/* Not My Event: the look of "Christmas Eve: Unwrapped" (public/templates/christmas-eve-unwrapped.html), a neon Christmas mystery arcade in five connected scenes.
   Midnight violet #201237, electric cyan #45E5FA, hot pink #FF56B3, violet #9453F7, winter silver #DDE7F2, neon gold #FFD66D. Glossy sticker art (public/assets/unwrapped-art.js).
   Rules: will-change only on a layer that is not scaled up (a scaled-up layer goes soft), SVG parts that animate say where they turn (transform-box: fill-box), and html.rm (reduced motion or the calm switch)
   and html.lite (a weak phone) turn most of the motion off. */
:root {
  --ink: #201237; --deep: #150A29; --a1: #45E5FA; --a2: #FF56B3; --a3: #9453F7; --silver: #DDE7F2; --gold: #FFD66D; --text: #F7F2FF; --mute: #C9BCE6;
  --glass: rgba(32, 18, 55, .78); --line: rgba(221, 231, 242, .22);
  --fd: Bungee, 'Arial Black', Impact, sans-serif; --fb: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body[data-theme="candy"] { --a1: #FFD66D; --a2: #FF56B3; --a3: #C26BFF; --ink: #2B1038; --deep: #1B0824; }
body[data-theme="ice"] { --a1: #45E5FA; --a2: #DDE7F2; --a3: #5B8CFF; --ink: #10213F; --deep: #09142B; --gold: #BFE8FF; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--deep); color: var(--text); font: 400 17px/1.5 var(--fb); overflow-x: hidden; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------------- The world behind everything: sky, stars, snow, a neon floor that rushes toward you as you scroll ---------------- */
#world { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--deep); pointer-events: none; }
.sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
body[data-scene="wrap"] .s1w, body[data-scene="claw"] .s2w, body[data-scene="gifts"] .s3w, body[data-scene="spin"] .s4w, body[data-scene="final"] .s5w { opacity: 1; }
.s1w { background: radial-gradient(ellipse at 50% 85%, rgba(148, 83, 247, .32), transparent 60%), linear-gradient(#07020F, #150A29 60%, #201237); }
.s2w { background: radial-gradient(ellipse at 50% 30%, rgba(255, 86, 179, .3), transparent 62%), linear-gradient(#1B0E36, #2E1659 55%, #150A29); }
.s3w { background: radial-gradient(ellipse at 20% 20%, rgba(69, 229, 250, .22), transparent 55%), radial-gradient(ellipse at 85% 70%, rgba(255, 214, 109, .16), transparent 55%), linear-gradient(#201237, #2B1859); }
.s4w { background: radial-gradient(ellipse at 50% 40%, rgba(255, 86, 179, .3), transparent 60%), radial-gradient(ellipse at 50% 110%, rgba(69, 229, 250, .28), transparent 55%), linear-gradient(#150A29, #2A1450); }
.s5w { background: radial-gradient(ellipse at 50% 20%, rgba(255, 214, 109, .22), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(255, 86, 179, .3), transparent 55%), linear-gradient(#201237, #3A1B6B); }
.w-stars { position: absolute; inset: 0; background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent), radial-gradient(1.4px 1.4px at 78% 12%, #fff, transparent), radial-gradient(2px 2px at 44% 30%, var(--a1), transparent), radial-gradient(1.4px 1.4px at 90% 44%, #fff, transparent), radial-gradient(1.6px 1.6px at 28% 56%, var(--gold), transparent), radial-gradient(1.2px 1.2px at 64% 66%, #fff, transparent), radial-gradient(1.8px 1.8px at 8% 82%, var(--a2), transparent), radial-gradient(1.4px 1.4px at 52% 90%, #fff, transparent), radial-gradient(1.2px 1.2px at 86% 78%, #fff, transparent), radial-gradient(1.6px 1.6px at 34% 8%, #fff, transparent); opacity: .85; animation: twinkle 5s ease-in-out infinite alternate; }
.w-snow { position: absolute; left: 0; right: 0; top: -120px; bottom: 0; background-image: radial-gradient(3px 3px at 20px 30px, rgba(255, 255, 255, .8), transparent), radial-gradient(2px 2px at 90px 120px, rgba(255, 255, 255, .6), transparent), radial-gradient(3px 3px at 160px 70px, rgba(221, 231, 242, .7), transparent), radial-gradient(2px 2px at 230px 170px, rgba(255, 255, 255, .6), transparent); background-size: 260px 220px; animation: snowfall 14s linear infinite; opacity: .7; }
.w-grid { position: absolute; left: -40%; right: -40%; bottom: -8%; height: calc(52% + 120px); background-image: linear-gradient(var(--a1) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--a1) 1.5px, transparent 1.5px); background-size: 90px 90px; transform: perspective(380px) rotateX(64deg) translateY(var(--gy, 0px)); transform-origin: 50% 100%; opacity: .26; will-change: transform; -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); }
.w-beams { position: absolute; inset: 0; background: conic-gradient(from 200deg at 50% -8%, transparent 0 8%, rgba(255, 86, 179, .14) 10% 14%, transparent 16% 24%, rgba(69, 229, 250, .14) 26% 30%, transparent 32% 40%, rgba(255, 214, 109, .12) 42% 46%, transparent 48%); opacity: .0; transition: opacity 1s ease; }
body[data-scene="spin"] .w-beams, body[data-scene="final"] .w-beams { opacity: 1; }
body[data-scene="final"] #world { display: none; }
@keyframes twinkle { from { opacity: .5; } to { opacity: .95; } }
@keyframes snowfall { to { transform: translateY(220px); } }
/* ---------------- The strip along the top: the name, the event details, the way to skip ahead ---------------- */
.hud { position: fixed; z-index: 40; left: 0; right: 0; top: 0; padding: max(8px, env(safe-area-inset-top, 0px)) 12px 14px; background: linear-gradient(rgba(21, 10, 41, .94), rgba(21, 10, 41, 0)); pointer-events: none; }
.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.hud-row > * { pointer-events: auto; }
.brand { margin: 0; font: 400 14px/1.1 var(--fd); letter-spacing: .02em; color: var(--gold); text-shadow: 0 0 14px rgba(255, 214, 109, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55vw; }
.hud-r { display: flex; gap: 8px; align-items: center; }
.hbtn { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--a1); background: rgba(21, 10, 41, .86); color: #fff; font: 700 13px var(--fb); }
.prog { display: flex; align-items: center; gap: 0; }
.prog button { position: relative; width: 34px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; }
.prog i { width: 12px; height: 12px; border-radius: 50%; background: rgba(221, 231, 242, .3); border: 2px solid var(--silver); display: block; transition: transform .25s, background .25s; }
.prog button.done i { background: var(--a1); border-color: var(--a1); }
.prog button[aria-current="true"] i { background: var(--a2); border-color: #fff; transform: scale(1.35); box-shadow: 0 0 12px var(--a2); }
.prog span { position: absolute; left: -9999px; }
.jump { color: var(--silver); font: 700 13px var(--fb); padding: 12px 8px; text-decoration: underline; text-underline-offset: 3px; }
#resume { position: fixed; z-index: 45; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; max-width: calc(100vw - 24px); display: flex; gap: 10px; align-items: center; background: #fff; color: var(--ink); border-radius: 16px; padding: 10px 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .5); font-weight: 600; }
#resume button { border: 0; border-radius: 999px; background: var(--ink); color: #fff; padding: 10px 14px; font-weight: 700; min-height: 44px; }
#cap { position: fixed; z-index: 44; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; max-width: min(92vw, 560px); background: rgba(21, 10, 41, .94); border: 2px solid var(--a1); border-radius: 14px; padding: 8px 14px; font-size: 15px; line-height: 1.35; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); pointer-events: none; }
#cap b { color: var(--gold); margin-right: 8px; font: 400 12px var(--fd); letter-spacing: .04em; }
#cap.in { animation: capin .35s ease-out; }
@keyframes capin { from { translate: -50% 14px; opacity: 0; } }

/* ---------------- Shared pieces ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 3px solid var(--ink); background: var(--a1); color: var(--ink); font: 400 15px/1 var(--fd); letter-spacing: .02em; box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 0 22px rgba(69, 229, 250, .45); text-decoration: none; transition: transform .12s; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.btn.hot { background: var(--a2); box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 0 24px rgba(255, 86, 179, .55); }
.btn.gold { background: var(--gold); box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 0 24px rgba(255, 214, 109, .5); }
.btn.ghost { background: rgba(21, 10, 41, .75); color: #fff; border-color: var(--a1); box-shadow: none; }
.btn.big { min-height: 56px; font-size: 17px; padding: 0 28px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; box-shadow: none; transform: none; }
.linkish { background: none; border: 0; color: var(--silver); text-decoration: underline; text-underline-offset: 3px; padding: 12px 8px; min-height: 44px; font-weight: 600; }
.glass { background: var(--glass); border: 2px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.kick { margin: 0 0 6px; font: 400 12px/1.2 var(--fd); letter-spacing: .08em; color: var(--a1); text-transform: uppercase; }
.lead { margin: 10px 0 0; color: var(--mute); max-width: 56ch; }
.note { margin: 6px 0 0; font-size: 14px; color: var(--mute); }
.fine { font-size: 14px; color: var(--mute); margin: 8px 0 0; }
h2 { margin: 0; font: 400 clamp(26px, 7.4vw, 52px)/1.04 var(--fd); color: #fff; text-shadow: 0 0 22px rgba(255, 86, 179, .6), 0 3px 0 rgba(0, 0, 0, .35); overflow-wrap: anywhere; }
.err { color: #FFC2DD; background: rgba(255, 86, 179, .16); border: 2px solid var(--a2); border-radius: 12px; padding: 10px 12px; margin: 10px 0 0; font-weight: 600; }
.field { margin: 12px 0 0; }
.field label, .flabel, legend { display: block; font: 700 14px var(--fb); margin: 0 0 6px; color: var(--silver); padding: 0; }
input[type="text"], input[type="search"], textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: rgba(21, 10, 41, .8); color: #fff; font-size: 17px; }
input[type="text"]:focus, textarea:focus { border-color: var(--a1); outline: none; box-shadow: 0 0 0 3px rgba(69, 229, 250, .35); }
textarea { resize: vertical; min-height: 84px; }
fieldset { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; flex: 1 1 130px; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: grid; place-items: center; min-height: 52px; padding: 8px 12px; text-align: center; border-radius: 16px; border: 2px solid var(--line); background: rgba(21, 10, 41, .7); font-weight: 700; transition: transform .12s, background .2s; }
.choice input:checked + span { background: var(--a1); color: var(--ink); border-color: #fff; box-shadow: 0 0 20px rgba(69, 229, 250, .5); transform: scale(1.02); }
.choice input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 3px; }
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--a1); background: rgba(21, 10, 41, .8); font-size: 24px; line-height: 1; }
.stepper output { min-width: 28px; text-align: center; font: 400 24px var(--fd); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 15px; color: var(--silver); }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--a2); flex: none; }
.consent { font-size: 13px; color: var(--mute); margin: 12px 0 0; }

/* ---------------- Scenes: each one flies in once, the first time you reach it ---------------- */
.scene { position: relative; z-index: 2; }
.scene:not(.s1) { min-height: 100svh; padding: 104px 16px 72px; }
.wrap { max-width: 1040px; margin: 0 auto; }
.scene:not(.always):not(.s1) .wrap { opacity: 0; transform: scale(.88) translateY(36px); }
.scene.seen:not(.s1) .wrap { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }

/* ---------------- Scene 1: do not open until Christmas (one screen: scrolling just carries on to the claw machine) ---------------- */
.s1 { position: relative; min-height: 100svh; overflow: hidden; }
.s1 .pin { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 84px 16px 28px; text-align: center; }
.room { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 74%, rgba(148, 83, 247, .38), transparent 58%), linear-gradient(#07020F, #12081F 60%, #1c0f33); }
.room::after { content: ""; position: absolute; left: 50%; bottom: 8%; width: min(80vw, 420px); height: 46px; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 86, 179, .5), transparent 70%); animation: glowpulse 5s ease-in-out infinite; }
.dust { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .5; animation: drift 9s ease-in-out infinite; }
/* little gifts that float up faster than the page as it scrolls on to the claw machine */
.flies { position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: transform; }
.flies svg { position: absolute; width: clamp(30px, 7vw, 54px); height: auto; opacity: .9; }
.s1-top, .s1 .sub, .s1-actions, .reveal { position: relative; z-index: 3; }
.tagline { margin: 0; font: 400 clamp(17px, 4.6vw, 26px)/1.15 var(--fd); color: #fff; text-shadow: 0 0 20px rgba(255, 86, 179, .7); max-width: 22ch; margin-inline: auto; }
.pres { --pw: min(76vw, 330px, calc(42svh * .8)); position: relative; z-index: 2; width: var(--pw); aspect-ratio: 320 / 400; will-change: transform, opacity; }
.pres-in { position: absolute; inset: 0; perspective: 900px; animation: bob 5.5s ease-in-out infinite; }
.pres-in > * { position: absolute; inset: 0; }
.pres svg { display: block; width: 100%; height: 100%; }
.half.l { clip-path: inset(0 50% 0 0); transform-origin: 0 50%; transform: translateX(calc(var(--u, 0) * -7%)) rotateY(calc(var(--u, 0) * 80deg)); opacity: calc(1 - var(--u, 0) * var(--u, 0) * .2); }
.half.r { clip-path: inset(0 0 0 50%); transform-origin: 100% 50%; transform: translateX(calc(var(--u, 0) * 7%)) rotateY(calc(var(--u, 0) * -80deg)); opacity: calc(1 - var(--u, 0) * var(--u, 0) * .2); }
.bow { pointer-events: none; transform-origin: 50% 24%; transform: translateY(calc(var(--u, 0) * -70px)) rotate(calc(var(--u, 0) * 26deg)); opacity: calc(1.15 - var(--u, 0) * 1.15); }
/* what is inside the box: the claw machine of scene 2, in miniature. It grows as the ribbon is pulled and springs up when the box opens; tap it and its claw drops. */
.pres-in > .popup { inset: auto; left: 50%; top: 18%; height: 68%; aspect-ratio: 360 / 420; translate: -50% 0; transform-origin: 50% 100%; transform: scale(calc(.15 + var(--u, 0) * .85)); opacity: calc(var(--u, 0) * 1.6); cursor: pointer; background: none; border: 0; padding: 0; }
.popup svg { display: block; width: 100%; height: 100%; }
.popup .bulb { animation: none; }
.pres.open .popup { transform: none; opacity: 1; animation: boing .8s cubic-bezier(.3, 1.4, .5, 1); }
.popup.go .mc-claw { animation: mcdrop 1.5s ease-in-out; }
.egg { background: none; border: 0; padding: 0; color: transparent; font-size: 0; }
.pres-in > .egg-bow { left: 22%; right: 22%; top: 8%; bottom: 66%; z-index: 5; }
.pres-in > .tail { inset: auto; left: 38%; width: 24%; top: 78%; height: 25%; z-index: 6; border: 0; background: none; padding: 0; touch-action: none; cursor: grab; transform: translateY(calc(var(--u, 0) * 80px)); animation: sway 3.2s ease-in-out infinite; transform-origin: 50% 0; }
.tail.drag { animation: none; cursor: grabbing; }
.pres.open .pres-in > .tail { opacity: 0; pointer-events: none; transition: opacity .4s; }
.s1 .sub { margin: 0; font: 600 clamp(16px, 4.3vw, 21px)/1.3 var(--fb); color: var(--silver); }
.s1-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; justify-content: center; }
.reveal { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; will-change: transform, opacity; }
.reveal h2 { font-size: clamp(24px, 6.4vw, 44px); max-width: 16ch; margin: 0; }
.reveal-sub { margin: 0; color: var(--silver); font-weight: 600; }
.reveal-row { display: flex; flex-wrap: wrap; gap: 0 14px; justify-content: center; }
.s1.opened .s1-top { display: none; }
.s1:not(.opened) .reveal { display: none; }
.s1.opened .s1-hint { display: none; }
.s1.opened .sub, .s1.opened .s1-actions { display: none; }

@media (max-height: 700px) { .s1 .pin { padding-top: 70px; gap: 4px; } .s1-top .kick, .s1-hint { display: none; } .pres { --pw: min(70vw, 300px, calc(34svh * .8)); } }

/* ---------------- Scene 2: the claw machine ---------------- */
.claw-grid { display: grid; gap: 22px; margin-top: 22px; justify-items: center; }
@media (min-width: 860px) { .claw-grid { grid-template-columns: minmax(300px, 400px) 1fr; justify-items: stretch; align-items: center; } }
.claw-stage { position: relative; width: min(88vw, 380px, calc(64svh * .857)); }
@media (min-width: 860px) { .claw-stage { width: min(100%, 400px, calc(78svh * .857)); } }
.cab { position: relative; border-radius: 28px; box-shadow: 0 0 40px rgba(255, 86, 179, .42); }
.cab svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cab:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.bulb, .wbulb, .tl { animation: bulb 1.2s steps(2, end) infinite alternate; }
#door { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.cab.door-open #door { transform: scaleY(.1); }
.pad { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; }
.pbtn { width: 68px; height: 68px; border-radius: 22px; border: 3px solid var(--ink); background: var(--a1); color: var(--ink); font: 400 28px var(--fd); box-shadow: 0 6px 0 rgba(0, 0, 0, .4); touch-action: none; user-select: none; -webkit-user-select: none; }
.pbtn:active, .pbtn.held { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, .4); background: #8EF2FF; }
.drop { min-width: 124px; height: 68px; border-radius: 22px; border: 3px solid var(--ink); background: var(--a2); color: var(--ink); font: 400 22px var(--fd); box-shadow: 0 6px 0 rgba(0, 0, 0, .4), 0 0 24px rgba(255, 86, 179, .6); }
.drop:active { transform: translateY(3px); }
.pad [disabled] { opacity: .45; box-shadow: none; }
.claw-status { margin: 12px 0 0; min-height: 3em; text-align: center; font-weight: 600; color: var(--silver); }
.claw-side { display: flex; flex-direction: column; gap: 14px; }
.how { margin: 0; padding-left: 20px; color: var(--mute); }
.how li { margin: 4px 0; }
.bcard { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; text-align: left; border-color: var(--gold); }
.bcard .medal { width: 96px; height: auto; display: block; animation: pop .7s cubic-bezier(.3, 1.6, .5, 1); }
.bcard h3 { margin: 0; font: 400 clamp(18px, 4.8vw, 26px)/1.1 var(--fd); color: var(--gold); }
.bcard p { margin: 6px 0 0; color: var(--silver); }
.bcard .row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.claw-left { margin: 6px 0 0; text-align: center; color: var(--mute); font-weight: 700; font-size: 14px; }
.cab-lock { position: absolute; left: 7%; right: 7%; top: 22%; z-index: 5; padding: 14px 16px; border-radius: 18px; border: 3px solid var(--gold); background: rgba(21, 10, 41, .93); text-align: center; pointer-events: none; }
.cab-lock b { display: block; font: 400 clamp(18px, 5vw, 26px)/1.1 var(--fd); color: var(--gold); }
.cab-lock span { display: block; margin-top: 6px; color: var(--silver); font-weight: 600; }
/* the gift ticket: a number, a picture of a gift and the gift's name, made to be screenshotted and shown to the host */
.pcard { margin-top: 12px; text-align: center; border-color: var(--gold); }
.pcard .tk-svg { display: block; width: min(150px, 42vw); height: auto; margin: 2px auto 0; }
.pcard .tk-no { margin: 2px 0 0; font: 400 clamp(26px, 8vw, 40px)/1 var(--fd); color: var(--gold); text-shadow: 0 0 18px rgba(255, 214, 109, .5); }
.pcard h3 { margin: 6px 0 0; font: 400 clamp(20px, 5.6vw, 30px)/1.1 var(--fd); color: #fff; overflow-wrap: anywhere; }
.pcard p { margin: 8px 0 0; color: var(--silver); font-weight: 600; }
.pcard .tk-tip { padding: 8px 10px; border-radius: 12px; background: rgba(255, 214, 109, .12); color: var(--gold); font-weight: 700; }
.wprize { margin: 14px auto 0; padding: 12px 14px; max-width: 420px; border-radius: 16px; border: 2px dashed var(--gold); }
.wprize .kick { margin: 0; text-align: center; }
.wprize .tk-svg { display: block; width: 110px; height: auto; margin: 0 auto; }

/* ---------------- Scene 3: pick your Christmas chaos ---------------- */
.boxes { display: grid; gap: 14px; margin-top: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .boxes { grid-template-columns: repeat(3, 1fr); } }
.gbtn { display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; background: rgba(32, 18, 55, .7); border: 2px solid var(--line); border-radius: 24px; padding: 10px 14px; color: #fff; transition: transform .2s, border-color .2s, background .2s; }
@media (min-width: 640px) { .gbtn { flex-direction: column; text-align: center; padding: 16px 12px 14px; } }
.gbtn:hover { border-color: var(--a1); transform: translateY(-3px); }
.gbtn[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 214, 109, .1); }
.gart { display: block; width: 104px; flex: none; animation: bob 4.6s ease-in-out infinite; }
@media (min-width: 640px) { .gart { width: min(100%, 190px); } }
.gbtn:nth-child(2) .gart { animation-delay: -1.5s; } .gbtn:nth-child(3) .gart { animation-delay: -3s; }
.gart svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .4)); }
.glabel b { display: block; font: 400 clamp(15px, 4vw, 19px)/1.15 var(--fd); color: #fff; }
.glabel small { display: block; margin-top: 4px; color: var(--mute); font-size: 14px; }
.gbtn .opened-tag { color: var(--gold); font-weight: 700; }
.bx .bx-lid, .bx .bx-in, .bx .bx-front, .bx .bx-glow { transition: transform .8s cubic-bezier(.3, 1.5, .5, 1), opacity .6s; transform-box: fill-box; }
.bx .bx-in { transform-origin: 50% 100%; transform: translateY(56px); }
.bx.k-c .bx-in { transform: scaleY(.12); }
.bx .bx-lid { transform-origin: 50% 100%; }
.bx.k-c .bx-lid { transform-origin: 0% 100%; }
.bx .bx-front { transform-origin: 50% 100%; }
.bx.open.k-s .bx-lid { transform: translate(18px, -100px) rotate(24deg); }
.bx.open.k-s .bx-in { transform: translateY(-8px) rotate(2deg); }
.bx.open.k-c .bx-lid { transform: rotate(-112deg); }
.bx.open.k-c .bx-in { animation: boing 1s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.bx.open.k-d .bx-lid { transform: translateX(120px) rotate(14deg); }
.bx.open.k-d .bx-front { transform: scaleY(.07); }
.bx.open.k-d .bx-in { transform: translateY(-34px); }
.bx.open .bx-glow { opacity: .55; }
.tray { margin-top: 18px; min-height: 130px; border-color: var(--a1); }
.tray h3 { margin: 0 0 6px; font: 400 clamp(18px, 4.8vw, 26px)/1.1 var(--fd); color: var(--gold); }
.tray p { margin: 8px 0 0; }
.tray .say { font: 700 clamp(17px, 4.4vw, 22px)/1.3 var(--fb); color: #fff; }
.tray .from { color: var(--mute); font-size: 15px; }
.tray .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tray .rows { margin: 10px 0 0; display: grid; gap: 8px; }
.tray .rows div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); animation: rowin .5s both; }
.tray .rows dt { color: var(--a1); font: 400 12px var(--fd); letter-spacing: .05em; text-transform: uppercase; padding-top: 3px; }
.tray .rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.tray .rows div:nth-child(2) { animation-delay: .15s; } .tray .rows div:nth-child(3) { animation-delay: .3s; } .tray .rows div:nth-child(4) { animation-delay: .45s; } .tray .rows div:nth-child(5) { animation-delay: .6s; } .tray .rows div:nth-child(6) { animation-delay: .75s; }
.shelf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 18px; }
.shelf .stk { width: 52px; height: 52px; display: block; }
.shelf .stk.off { opacity: .55; }
.shelf .count { font-weight: 700; color: var(--silver); margin-right: 8px; }
.shelf .lbl { flex-basis: 100%; font-size: 14px; color: var(--mute); }

/* ---------------- Scene 4: spin for your holiday fate ---------------- */
.spin-stage { display: grid; gap: 18px; justify-items: center; margin-top: 18px; }
@media (min-width: 860px) { .spin-stage { grid-template-columns: minmax(300px, 420px) 1fr; justify-items: stretch; align-items: center; } }
.wheelbox { width: min(88vw, 400px, calc(54svh * .96)); perspective: 800px; position: relative; justify-self: center; }
.wheel-tilt { transform: rotateX(14deg); transform-origin: 50% 85%; }
.wheelbox::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 70%); z-index: -1; }
.wheel-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wheelbox::before { content: ""; position: absolute; left: 6%; right: 6%; top: 10%; bottom: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(69, 229, 250, .32), transparent 70%); z-index: -1; }
.wheel-ptr.flick { animation: flick .12s ease-out; }
.fate { text-align: center; border-color: var(--a2); }
.fate .big { font: 400 clamp(18px, 4.8vw, 26px)/1.25 var(--fd); color: #fff; margin: 4px 0 0; }
.fate .acts { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; margin-top: 14px; }
.fate .ico { width: 62px; height: 62px; margin: 0 auto; display: block; }
details.menu { margin-top: 12px; color: var(--silver); }
details.menu summary { cursor: pointer; font-weight: 700; padding: 10px 0; min-height: 44px; }
details.menu ol { margin: 6px 0 0; padding-left: 24px; color: var(--mute); }
details.menu li { margin: 4px 0; }

/* ---------------- Scene 5: inside the giant gift, the walls fold outward, the party ---------------- */
.s5 { position: relative; padding: 0 !important; min-height: 0 !important; }
/* The party (tree, presents, lights) lives on ONE stage that stays pinned behind the whole scene, so the tree is also the background of the details and the reply. The walls fold away over it. */
.stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stage .egg { pointer-events: auto; }
.stage-in { position: sticky; top: 0; height: 100svh; overflow: hidden; background: linear-gradient(#150A29, #2A1450); }
.fold { position: relative; z-index: 1; height: 240svh; pointer-events: none; }
.fold .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pbg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 110%, rgba(255, 86, 179, .55), transparent 55%), radial-gradient(ellipse at 50% 0%, rgba(255, 214, 109, .28), transparent 50%), linear-gradient(#201237, #3A1B6B); }
.pbg .beams { position: absolute; inset: 0; background: conic-gradient(from 190deg at 50% 4%, transparent 0 6%, rgba(255, 86, 179, .22) 8% 13%, transparent 15% 22%, rgba(69, 229, 250, .22) 24% 29%, transparent 31% 39%, rgba(255, 214, 109, .2) 41% 46%, transparent 48%); opacity: 0; animation: sweep 9s ease-in-out infinite alternate; will-change: transform, opacity; }
.pbg .floor { position: absolute; left: -10%; right: -10%; bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(255, 86, 179, .4)); border-top: 3px solid var(--a1); }
/* the page's script moves these as it scrolls (transform and opacity only): these are where they start. The tree is as tall as the screen on every device. */
.p-tree { position: absolute; left: 50%; bottom: 0; height: 100%; aspect-ratio: 400 / 560; translate: -50% 0; transform: translateY(40px); opacity: 0; will-change: transform, opacity; }
.p-tree svg { display: block; width: 100%; height: 100%; }
.p-tree::before { content: ""; position: absolute; left: -26%; right: -26%; top: 4%; bottom: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 109, .26), rgba(255, 86, 179, .1) 48%, transparent 70%); }
.p-gifts { position: absolute; left: 0; right: 0; bottom: 0; height: min(40svh, 46vw); transform: translateY(60px); opacity: 0; will-change: transform, opacity; }
.p-gifts svg { display: block; width: 100%; height: 100%; }
.p-disco { position: absolute; left: 84%; top: 0; width: min(24vw, 120px); translate: -50% 0; transform: translateY(-120%); will-change: transform; }
.p-disco svg { display: block; width: 100%; height: auto; transform-origin: 50% 0; animation: swing 4s ease-in-out infinite alternate; }
.p-badges { position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity; }
.p-badges .fb { position: absolute; width: clamp(48px, 11vw, 76px); animation: bob 5s ease-in-out infinite; }
.p-badges svg { display: block; width: 100%; height: auto; }
.confetti { position: absolute; inset: 0; overflow: hidden; opacity: 0; will-change: opacity; }
.confetti i { position: absolute; top: -10px; width: 9px; height: 14px; border-radius: 2px; animation: fall 7s linear infinite; }
.stage.idle *, .stage.idle *::before { animation-play-state: paused !important; }
.walls { position: absolute; inset: 0; z-index: 6; perspective: 1000px; transform: scale(1.8); transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
.flap { position: absolute; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; pointer-events: none; }
.flap.t { top: 0; left: 0; width: 100%; height: 50%; transform-origin: 50% 0; }
.flap.b { bottom: 0; left: 0; width: 100%; height: 50%; transform-origin: 50% 100%; }
.flap.l { top: 0; bottom: 0; left: 0; width: 50%; transform-origin: 0 50%; }
.flap.r { top: 0; bottom: 0; right: 0; width: 50%; transform-origin: 100% 50%; }
body.modal { overflow: hidden; }
.egg.on-art { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; z-index: 4; }
.fold-title { position: absolute; z-index: 7; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 0 20px; pointer-events: none; opacity: 1; will-change: opacity; }
.fold-title h2 { text-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 26px rgba(255, 214, 109, .7); }
.fold-title .arrow { font: 400 26px var(--fd); color: var(--gold); animation: bob 1.8s ease-in-out infinite; }
/* the details and the reply scroll over the tree: a dark veil, solid panels, and the gaps between them let taps through to the stage */
.party-body { position: relative; z-index: 2; padding: 20px 16px 90px; background: linear-gradient(rgba(21, 10, 41, .25), rgba(21, 10, 41, .62) 160px); pointer-events: none; }
.party-body .wrap { display: grid; gap: 24px; }
.party-body .wrap > * { pointer-events: auto; }
.party-body .glass { background: rgba(32, 18, 55, .9); }
.sec-h { margin: 0; font: 400 clamp(20px, 5.4vw, 32px)/1.1 var(--fd); color: var(--gold); text-shadow: 0 0 18px rgba(255, 214, 109, .45); }
.event-title { font: 400 clamp(26px, 8vw, 54px)/1.02 var(--fd); margin: 0; color: #fff; text-shadow: 0 0 26px rgba(255, 86, 179, .7); overflow-wrap: anywhere; }
.f-rows { margin: 12px 0 0; display: grid; gap: 0; }
.f-rows > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.f-rows dt { color: var(--a1); font: 400 12px var(--fd); letter-spacing: .05em; text-transform: uppercase; padding-top: 4px; }
.f-rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.f-rows a { color: var(--gold); }
.f-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rsvp-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .rsvp-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.result { text-align: center; }
.result h3 { margin: 0; font: 400 clamp(20px, 5.4vw, 30px)/1.15 var(--fd); color: var(--gold); }
.result:focus { outline: none; }

/* the pass */
.pass-wrap { display: grid; gap: 14px; justify-items: center; }
.pass { position: relative; width: min(100%, 340px); border-radius: 28px; padding: 18px 18px 16px; background: linear-gradient(160deg, #3A1B6B, #201237 55%, #150A29); border: 4px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 4px var(--pc, var(--a1)), 0 18px 40px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 86, 179, .3); overflow: hidden; text-align: center; }
.pass::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 20deg, rgba(69, 229, 250, .22), rgba(255, 86, 179, .22), rgba(255, 214, 109, .22), rgba(148, 83, 247, .22), rgba(69, 229, 250, .22)); pointer-events: none; }
.pass > * { position: relative; }
.pass .p-top { display: flex; justify-content: space-between; font: 400 11px var(--fd); letter-spacing: .06em; color: var(--pc, var(--a1)); text-transform: uppercase; }
.pass .p-name { margin: 10px 0 0; font: 400 clamp(20px, 6vw, 28px)/1.1 var(--fd); color: #fff; overflow-wrap: anywhere; }
.pass .medal { width: 104px; margin: 8px auto 0; display: block; }
.pass .p-badge { margin: 4px 0 0; font: 400 15px/1.2 var(--fd); color: var(--gold); }
.pass .p-fate { margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .3); font-weight: 600; font-size: 15px; line-height: 1.3; }
.pass .p-fate small { display: block; color: var(--a1); font: 400 10px var(--fd); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.pass .p-stk { display: flex; justify-content: center; gap: 2px; margin-top: 10px; flex-wrap: wrap; }
.pass .p-stk .stk { width: 30px; height: 30px; }
.pass .p-event { margin: 12px 0 0; font-weight: 700; color: var(--silver); font-size: 14px; }
.pass .p-status { display: inline-block; margin-top: 10px; padding: 8px 16px; border-radius: 999px; background: var(--pc, var(--a1)); color: var(--ink); font: 400 14px var(--fd); }
.pass-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pass-lock { text-align: center; color: var(--mute); }

/* ---------------- Dialogs ---------------- */
.overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(10, 4, 22, .78); overflow-y: auto; }
.sheet { position: relative; width: min(100%, 520px); max-height: calc(100svh - 32px); overflow-y: auto; background: var(--ink); border: 3px solid var(--a1); border-radius: 26px; padding: 22px 18px 20px; box-shadow: 0 0 50px rgba(69, 229, 250, .35); }
.sheet h2 { font-size: clamp(22px, 6vw, 32px); padding-right: 40px; }
.sheet .x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: rgba(255, 255, 255, .08); font-size: 24px; line-height: 1; }
.mcard { margin: 14px 0 0; border-radius: 22px; padding: 18px; text-align: center; background: linear-gradient(160deg, #3A1B6B, #150A29); border: 3px solid var(--gold); }
.mcard svg { width: 84px; height: auto; display: block; margin: 0 auto; }
.mcard b { display: block; margin-top: 8px; font: 400 18px/1.2 var(--fd); color: var(--gold); }
.mcard span { display: block; margin-top: 6px; color: var(--silver); font-size: 15px; }
.copybox { width: 100%; margin-top: 12px; min-height: 90px; font-size: 15px; }

/* ---------------- Motion ---------------- */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes swing { from { rotate: -8deg; } to { rotate: 8deg; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes glowpulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(14px, -26px); opacity: .8; } }
@keyframes bulb { from { opacity: .45; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
@keyframes boing { 0% { transform: scaleY(.12); } 55% { transform: scaleY(1.22); } 75% { transform: scaleY(.92); } 100% { transform: scaleY(1); } }
@keyframes rowin { from { opacity: 0; transform: translateX(-16px); } }
@keyframes flick { 50% { transform: rotate(-16deg); } }
@keyframes sweep { from { rotate: -6deg; } to { rotate: 6deg; } }
@keyframes fall { to { transform: translateY(110svh) rotate(540deg); } }
@keyframes mcdrop { 0%, 100% { transform: translateY(0); } 40%, 58% { transform: translateY(72px); } }
.spark { animation: bulb 1.1s steps(2, end) infinite alternate; }

/* a weak phone: no scrolling floor, no drifting dust, no snow */
html.lite .w-grid, html.lite .w-snow, html.lite .dust, html.lite .confetti, html.lite .w-beams, html.lite .pbg .beams, html.lite .p-badges, html.lite .flies { display: none; }
html.lite .tl, html.lite .spark, html.lite .bulb, html.lite .p-disco svg { animation: none; }
html.lite .pres .half svg, html.lite .cab svg, html.lite .wheel-svg { filter: none; }
/* reduced motion or the calm switch: nothing moves by itself, nothing is scroll-driven, everything is simply there */
html.rm *, html.rm *::before, html.rm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html.rm .pres, html.rm .reveal, html.rm .flies { transform: none; opacity: 1; }
html.rm .pres-in { animation: none; }
html.rm .half.l, html.rm .half.r { transform: none; opacity: calc(1 - var(--u, 0)); }
html.rm .fold { height: 36svh; }
html.rm .fold .pin { position: relative; height: 100%; }
html.rm .walls, html.rm .fold-title { display: none; }
html.rm .p-tree, html.rm .p-gifts, html.rm .p-disco { transform: none; opacity: 1; }
html.rm .pbg .beams, html.rm .p-badges, html.rm .confetti { opacity: 1; }
html.rm .w-grid, html.rm .w-snow { display: none; }
@media (prefers-reduced-motion: reduce) { .w-stars, .w-snow, .pres-in, .gart, .tail, .bulb, .wbulb, .tl { animation: none !important; } }