/* Effects of reading steps (js/reading-effects.js): pick, hold, spin. Loaded only on such steps. */
/* the plain links stay for crawlers and no-js; the site's own #answers display must not bring them back */
#answers.fx-src[hidden] { display: none !important; }
/* no flash of the plain list before the script builds the effect; shown anyway if the script never runs */
#answers.fx-src:not([hidden]) { visibility: hidden; animation: fx-fallback 0s 2.5s forwards; }
@keyframes fx-fallback { to { visibility: visible; } }
.fx {
    --fx-plum: var(--brand-dark, #2b2238);
    --fx-plum-2: #4a3866;
    --fx-gold: var(--brand-gold, #d8a95b);
    --fx-gold-l: #f3dca6;
    --fx-cream: #fffaf0;
    --fx-ink: var(--brand-ink, #2a2330);
    --fx-ink-soft: var(--brand-ink-soft, #574b52);
    margin: 6px auto 4px;
    max-width: 560px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
:where(.fx) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
.fx-hint { margin: 14px 0 0; font-size: 1.02rem; color: var(--fx-ink-soft); min-height: 1.4em; }

/* ---------------------------------------------------------------- pick */
.fx-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; padding: 8px 4px 2px; }
.fx-item { position: relative; width: calc(33% - 10px); max-width: 150px; perspective: 900px; transition: opacity .5s, transform .5s; animation: fx-deal .55s cubic-bezier(.2, .8, .3, 1.2) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.fx-items--4 .fx-item, .fx-items--5 .fx-item, .fx-items--6 .fx-item, .fx-items--7 .fx-item { width: calc(25% - 10px); }
.fx-items--5 .fx-item, .fx-items--7 .fx-item { max-width: 120px; }
.fx-item__in { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.3, .7, .2, 1); }
.fx-item__back, .fx-item__front { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fx-item__back { background: radial-gradient(circle at 50% 38%, rgba(255, 226, 160, .22), transparent 55%), linear-gradient(160deg, var(--fx-plum-2), var(--fx-plum)); box-shadow: inset 0 0 0 2px rgba(216, 169, 91, .85), inset 0 0 0 6px rgba(43, 34, 56, .9), inset 0 0 0 7px rgba(216, 169, 91, .45), 0 6px 16px rgba(43, 34, 56, .28); color: var(--fx-gold); font-size: 2rem; }
.fx-item__front { transform: rotateY(180deg); background: linear-gradient(180deg, #fffdf6, #f8ecd2); box-shadow: inset 0 0 0 2px var(--fx-gold), 0 10px 26px rgba(176, 130, 47, .45); padding: 8px 6px; gap: 6px; }
.fx-item__icon { font-size: 2.2rem; line-height: 1; }
.fx-item__label { font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--fx-ink); }
.fx-item__name { display: block; margin-top: 7px; font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--fx-ink); }
.fx-item:focus-visible { outline: 3px solid var(--fx-gold); outline-offset: 4px; border-radius: 12px; }
.fx-item:not(.is-open):hover .fx-item__in { transform: translateY(-4px); }
.fx-item.is-open { z-index: 2; }
.fx-item.is-open .fx-item__in { transform: rotateY(180deg) translateY(-6px) scale(1.08); }
.fx.is-chosen .fx-item:not(.is-open) { opacity: .32; transform: scale(.94); }

/* skins whose front lies under the back: it shows only once opened */
.fx-skin--door .fx-item:not(.is-open) .fx-item__front, .fx-skin--gift .fx-item:not(.is-open) .fx-item__front,
.fx-skin--bottle .fx-item:not(.is-open) .fx-item__front, .fx-skin--rose .fx-item:not(.is-open) .fx-item__front { visibility: hidden; }
.fx-item__front { overflow: hidden; }

/* card: ornament on the back */
.fx-skin--card .fx-item__back::before, .fx-skin--stack .fx-item__back::before { content: "✦"; font-size: 2.1rem; text-shadow: 0 0 14px rgba(255, 210, 130, .9); }
.fx-skin--card .fx-item__back::after, .fx-skin--stack .fx-item__back::after { content: "☾ · ☽"; position: absolute; bottom: 12%; font-size: .8rem; letter-spacing: .1em; opacity: .75; }
/* stack: three heaps of cards */
.fx-skin--stack .fx-item__back { box-shadow: inset 0 0 0 2px rgba(216, 169, 91, .85), inset 0 0 0 6px rgba(43, 34, 56, .9), 4px 4px 0 -1px #3a2d4f, 4px 4px 0 0 rgba(216, 169, 91, .6), 8px 8px 0 -1px #33284a, 8px 8px 0 0 rgba(216, 169, 91, .5), 0 12px 22px rgba(43, 34, 56, .35); }
/* star: a night sky tile */
.fx-skin--star .fx-item__in { aspect-ratio: 1; }
.fx-skin--star .fx-item__back { border-radius: 50%; background: radial-gradient(circle, #fff7d9 0 9%, rgba(255, 236, 170, .55) 10%, transparent 38%), radial-gradient(circle at 30% 30%, #2d3a6b, #141a35); box-shadow: 0 0 0 2px rgba(216, 169, 91, .5), 0 0 22px rgba(255, 220, 140, .35); animation: fx-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -370ms); }
.fx-skin--star .fx-item__front { border-radius: 50%; }
/* shell */
.fx-skin--shell .fx-item__in { aspect-ratio: 1; }
.fx-skin--shell .fx-item__back { border-radius: 50%; font-size: 3.1rem; background: radial-gradient(circle at 50% 40%, #fdf3df, #e9cfa0 70%, #c9a46a); box-shadow: 0 0 0 2px rgba(216, 169, 91, .7), 0 6px 14px rgba(120, 90, 40, .3); }
.fx-skin--shell .fx-item__front { border-radius: 50%; background: radial-gradient(circle, #ffffff 0 18%, #f7ecff 40%, #e7dcf3); }
/* door: swings open on its hinge, the light is behind it */
.fx-skin--door .fx-item__in { aspect-ratio: 3 / 4.4; transform-style: flat; }
.fx-skin--door .fx-item__front { transform: none; border-radius: 48% 48% 10px 10px / 30% 30% 10px 10px; background: radial-gradient(circle at 50% 45%, #fff6d8, #f5d68a 60%, #d9a650); }
.fx-skin--door .fx-item__back { z-index: 1; border-radius: 48% 48% 10px 10px / 30% 30% 10px 10px; background: radial-gradient(circle at 78% 58%, #f3d27e 0 4%, #8a5b2e 5%, transparent 6%), repeating-linear-gradient(90deg, #6b4423 0 22%, #5a381c 22% 24%), linear-gradient(#734a26, #4e3017); box-shadow: inset 0 0 0 3px #3b2412, 0 6px 16px rgba(60, 35, 15, .35); transform-origin: left center; transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.fx-skin--door .fx-item.is-open .fx-item__in { transform: none; }
.fx-skin--door .fx-item.is-open .fx-item__back { transform: perspective(700px) rotateY(-108deg); }
/* envelope: the seal shows its colour, the letter comes out */
.fx-skin--envelope .fx-item__in { aspect-ratio: 4 / 3; }
.fx-skin--envelope .fx-item__back { background: linear-gradient(155deg, transparent 49.4%, rgba(150, 110, 60, .35) 50%, transparent 51.5%), linear-gradient(25deg, transparent 49.4%, rgba(150, 110, 60, .35) 50%, transparent 51.5%), linear-gradient(#fbf1dc, #ecd7ad); box-shadow: inset 0 0 0 1px rgba(150, 110, 60, .5), 0 6px 14px rgba(120, 90, 40, .28); }
.fx-skin--envelope .fx-item__back::after { content: ""; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .45), transparent 45%), var(--c, #b3122e); box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(0, 0, 0, .12); }
/* gift: a box with a ribbon in its colour, the lid flies off */
.fx-skin--gift .fx-item__in { aspect-ratio: 1; transform-style: flat; }
.fx-skin--gift .fx-item__front { transform: none; }
.fx-skin--gift .fx-item__back { z-index: 1; background: linear-gradient(90deg, transparent 43%, var(--c, #d8a95b) 43% 57%, transparent 57%), linear-gradient(0deg, transparent 43%, var(--c, #d8a95b) 43% 57%, transparent 57%), linear-gradient(150deg, #6a3d5c, #3b2747); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15), 0 8px 16px rgba(43, 34, 56, .3); transition: transform .8s cubic-bezier(.3, .7, .2, 1), opacity .8s; }
.fx-skin--gift .fx-item__back::before { content: "🎀"; position: absolute; top: -18%; font-size: 2.2rem; }
.fx-skin--gift .fx-item.is-open .fx-item__in { transform: none; }
.fx-skin--gift .fx-item.is-open .fx-item__back { transform: translateY(-46%) rotate(-12deg) scale(.9); opacity: 0; }
/* bottle: coloured glass with a rolled letter, the glass melts into light */
.fx-skin--bottle .fx-item__in { aspect-ratio: 2 / 3.3; transform-style: flat; }
.fx-skin--bottle .fx-item__front { transform: none; }
.fx-skin--bottle .fx-item__back { z-index: 1; background: none; box-shadow: none; transition: transform .8s, opacity .8s; }
.fx-skin--bottle .fx-item__back::before { content: ""; position: absolute; left: 30%; right: 30%; top: 2%; height: 20%; border-radius: 6px 6px 2px 2px; background: linear-gradient(#a77b4a, #6b4a2a) 0 0 / 100% 34% no-repeat, color-mix(in srgb, var(--c, #2f8f5b) 70%, white); opacity: .9; }
.fx-skin--bottle .fx-item__back::after { content: "📜"; position: absolute; left: 12%; right: 12%; top: 20%; bottom: 2%; display: flex; align-items: center; justify-content: center; font-size: 2rem; border-radius: 40% 40% 18px 18px / 22% 22% 18px 18px; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), transparent 40%), color-mix(in srgb, var(--c, #2f8f5b) 75%, transparent); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 6px 18px color-mix(in srgb, var(--c, #2f8f5b) 45%, transparent); }
.fx-skin--bottle .fx-item.is-open .fx-item__in { transform: none; }
.fx-skin--bottle .fx-item.is-open .fx-item__back { transform: scale(1.15); opacity: 0; }
/* rose: visible colours, the chosen one blooms */
.fx-skin--rose .fx-item__in { aspect-ratio: 1; transform-style: flat; }
.fx-skin--rose .fx-item__front { transform: none; opacity: 0; transition: opacity .6s .3s; }
.fx-skin--rose .fx-item__back { z-index: 1; border-radius: 50%; font-size: 3.2rem; background: radial-gradient(circle, color-mix(in srgb, var(--c, #b3122e) 55%, white) 0 30%, color-mix(in srgb, var(--c, #b3122e) 25%, white) 55%, transparent 72%); box-shadow: none; transition: transform .8s, opacity .6s .2s; }
.fx-skin--rose .fx-item__back { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c, #b3122e) 60%, transparent)); }
.fx-skin--rose .fx-item.is-open .fx-item__in { transform: none; }
.fx-skin--rose .fx-item.is-open .fx-item__back { transform: scale(1.35) rotate(-8deg); }
.fx-skin--rose .fx-item.is-open .fx-item__front { opacity: 0; }

/* ---------------------------------------------------------------- reveal and sparkles */
.fx-reveal { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px auto 0; padding: 14px 26px 16px; border-radius: 18px; background: linear-gradient(180deg, #fffdf6, #f8ecd2); box-shadow: inset 0 0 0 2px var(--fx-gold), 0 0 0 6px color-mix(in srgb, var(--c, #d8a95b) 22%, transparent), 0 12px 30px rgba(176, 130, 47, .35); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .3, 1.2); }
.fx-reveal.is-on { opacity: 1; transform: none; }
.fx-reveal__icon { font-size: 2.6rem; line-height: 1; }
.fx-reveal__label { font-family: var(--brand-display, Georgia, serif); font-weight: 700; font-size: 1.45rem; line-height: 1.2; color: var(--fx-ink); }
.fx-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.fx-burst i { position: absolute; left: -.5em; top: -.6em; font-style: normal; font-size: 1.1rem; color: var(--fx-gold); text-shadow: 0 0 8px rgba(255, 210, 130, .95); opacity: 0; animation: fx-spark 1.2s ease-out forwards; }

/* ---------------------------------------------------------------- hold */
.fx-hold { display: flex; justify-content: center; padding: 6px 0 0; }
.fx-hold__obj { --p: 0; position: relative; width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, #4b3a68, var(--fx-plum) 70%); box-shadow: 0 10px 30px rgba(43, 34, 56, .35), 0 0 calc(10px + var(--p) * 50px) calc(var(--p) * 12px) rgba(255, 205, 120, calc(.15 + var(--p) * .55)); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .2s; }
.fx-hold__obj.is-holding { transform: scale(.97); }
.fx-hold__glow { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 150, calc(.25 + var(--p) * .7)), transparent 70%); transform: scale(calc(.7 + var(--p) * .7)); }
.fx-hold__icon { position: relative; font-size: 84px; line-height: 1; transform: scale(calc(.92 + var(--p) * .18)); filter: drop-shadow(0 0 calc(var(--p) * 18px) rgba(255, 214, 140, .95)); transition: transform .5s; }
.fx-hold__veil { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(235, 238, 245, .92), rgba(220, 225, 238, .7) 60%, transparent 72%); opacity: 0; pointer-events: none; }
.fx-skin--mirror .fx-hold__veil { opacity: calc(1 - var(--p)); }
.fx-skin--candle .fx-hold__icon { transform-origin: 50% 80%; }
.fx-skin--candle .fx-hold__obj.is-holding .fx-hold__icon { animation: fx-flicker .35s ease-in-out infinite alternate; }
.fx-skin--book .fx-hold__obj.is-holding .fx-hold__icon { animation: fx-flutter .22s ease-in-out infinite alternate; }
.fx-skin--lamp .fx-hold__obj::after { content: ""; position: absolute; left: 50%; top: 6%; width: 46px; height: calc(var(--p) * 70px); margin-left: -23px; border-radius: 50%; background: radial-gradient(ellipse at bottom, rgba(255, 214, 140, .8), transparent 70%); filter: blur(4px); }
.fx-skin--locket .fx-hold__obj.is-done .fx-hold__icon { transform: scale(1.25) rotate(-6deg); }
.fx-hold__obj.is-done .fx-hold__icon { transform: scale(1.18); }
.fx-hold__ring { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); transform: rotate(-90deg); pointer-events: none; }
.fx-hold__track { fill: none; stroke: rgba(216, 169, 91, .25); stroke-width: 5; }
.fx-hold__fill { fill: none; stroke: var(--fx-gold); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: calc(339.3 * (1 - var(--p))); filter: drop-shadow(0 0 4px rgba(255, 210, 130, .9)); }

/* ---------------------------------------------------------------- spin */
.fx--spin { display: flex; flex-direction: column; align-items: center; }
.fx-spin { display: inline-block; padding: 8px; }
.fx-spin__cta { display: inline-block; margin-top: 12px; padding: 13px 30px; border-radius: 999px; font-weight: 700; font-size: 1.15rem; color: #3a2a12; background: linear-gradient(180deg, var(--brand-cta-from, #ecc47c), var(--brand-cta-to, #d4a250)); box-shadow: inset 0 -3px 0 var(--brand-cta-edge, #b0822f), 0 6px 16px rgba(176, 130, 47, .35); cursor: pointer; }
.fx-spin__cta:empty { display: none; }
/* wheel */
.fx-wheel { position: relative; width: 270px; height: 270px; }
.fx-wheel__disc { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 6px var(--fx-gold), inset 0 0 0 9px #2b2238, inset 0 0 0 10px rgba(216, 169, 91, .6), 0 10px 28px rgba(43, 34, 56, .35); transition: transform 4.2s cubic-bezier(.12, .62, .08, 1); }
.fx-wheel__seg { position: absolute; inset: 0; }
.fx-wheel__seg::after { content: ""; position: absolute; left: 50%; top: 10px; bottom: 50%; width: 1px; background: rgba(216, 169, 91, .45); transform: rotate(calc(180deg / 8)); transform-origin: bottom; }
.fx-wheel__mark { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); font-size: 1.7rem; line-height: 1; }
.fx-wheel__hub { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #3a2a12; background: radial-gradient(circle at 40% 35%, #fff1c9, var(--fx-gold)); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.fx-wheel__pin { position: absolute; left: 50%; top: -14px; margin-left: -14px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 30px solid #b3122e; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
/* coin */
.fx-coin { width: 160px; height: 160px; perspective: 800px; }
.fx-coin.is-tossed { animation: fx-toss 2.6s cubic-bezier(.3, .6, .4, 1); }
.fx-coin__body { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 2.6s cubic-bezier(.2, .7, .25, 1); }
.fx-coin__face { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 72px; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: radial-gradient(circle at 38% 32%, #fff3c8, #e8be62 45%, #b5852f 80%); box-shadow: inset 0 0 0 7px #c9973f, inset 0 0 0 9px #f3d58c, 0 8px 20px rgba(120, 80, 20, .35); }
.fx-coin__face--b { transform: rotateY(180deg); }
.fx-coin__edge { position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; margin-left: -7px; border-radius: 6px; background: repeating-linear-gradient(0deg, #c9973f 0 4px, #f3d58c 4px 7px); transform: rotateY(90deg); opacity: 0; transition: opacity .4s 2.3s; }
.fx-coin.is-edge .fx-coin__edge { opacity: 1; }
/* die */
.fx-die { width: 120px; height: 120px; perspective: 700px; margin: 18px; }
.fx-die.is-rolled { animation: fx-roll 2.4s cubic-bezier(.3, .6, .4, 1); }
.fx-die__cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(28deg); transition: transform 2.4s cubic-bezier(.2, .7, .25, 1); }
.fx-die__face { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14px; border-radius: 18px; background: radial-gradient(circle at 35% 30%, #c9a6ff, #7a4fc4 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 0 18px rgba(255, 255, 255, .25); }
.fx-die__face i { place-self: center; width: 18px; height: 18px; border-radius: 50%; }
.fx-die__face i.on { background: #fffaf0; box-shadow: 0 0 8px rgba(255, 240, 200, .95); }
.fx-die__face--1 { transform: translateZ(60px); }
.fx-die__face--6 { transform: rotateY(180deg) translateZ(60px); }
.fx-die__face--2 { transform: rotateY(90deg) translateZ(60px); }
.fx-die__face--5 { transform: rotateY(-90deg) translateZ(60px); }
.fx-die__face--3 { transform: rotateX(90deg) translateZ(60px); }
.fx-die__face--4 { transform: rotateX(-90deg) translateZ(60px); }
/* hourglass */
.fx-glass { position: relative; width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; }
.fx-glass__icon { font-size: 110px; line-height: 1; transition: transform 1.3s cubic-bezier(.4, .1, .2, 1); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.fx-glass__sand { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c, #f2c94c) 80%, white), transparent 70%); opacity: 0; transition: opacity 1s 1.4s; }
.fx-glass.is-turned .fx-glass__icon { transform: rotate(180deg); }
.fx-glass.is-turned .fx-glass__sand { opacity: .85; animation: fx-pulse 1.4s ease-in-out 1.4s infinite alternate; }

/* ---------------------------------------------------------------- motion */
@keyframes fx-deal { from { opacity: 0; transform: translateY(18px) rotate(-4deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fx-twinkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes fx-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.1); } }
@keyframes fx-flicker { from { transform: scale(calc(.92 + var(--p) * .18)) rotate(-2deg); } to { transform: scale(calc(.95 + var(--p) * .2)) rotate(2deg); } }
@keyframes fx-flutter { from { transform: rotate(-3deg) translateY(1px); } to { transform: rotate(3deg) translateY(-2px); } }
@keyframes fx-toss { 0% { transform: translateY(0); } 35% { transform: translateY(-90px); } 70% { transform: translateY(0); } 82% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
@keyframes fx-roll { 0% { transform: translateX(-60px); } 70% { transform: translateX(8px); } 100% { transform: translateX(0); } }
@keyframes fx-pulse { from { transform: scale(.9); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
    .fx *, .fx *::before, .fx *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
@media (max-width: 380px) {
    .fx-wheel { width: 240px; height: 240px; }
    .fx-hold__obj { width: 176px; height: 176px; }
    .fx-item__label { font-size: .95rem; }
}