/* Not My Event: the look of "The Midnight Takeover: Save the Party!" (public/templates/midnight-takeover.html). One stage pinned to the screen for the whole story; five places drawn with code
   (public/assets/takeover-art.js), each on layers that fill the screen; everything that moves is transform and opacity only. */
:root { --ink: #FFF7EA; --gold: #FFD27A; --coral: #F0765E; --teal: #1FA7A0; --cyan: #3DE2FF; --mag: #FF3DCB; --night: #0B1230; --card: #FFFBF2; --cardInk: #2A1E2E; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0B1230; color: var(--ink); font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; overflow-x: hidden; }
button { font: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: #111; padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ---------------- the two controls at the top, the pill, the captions ---------------- */
#menu-wrap { position: fixed; z-index: 60; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); }
#b-menu { min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid rgba(255,255,255,.35); background: rgba(11,18,48,.72); color: #fff; font-weight: 800; letter-spacing: .04em; }
#menu { margin-top: 8px; display: grid; gap: 6px; padding: 10px; border-radius: 16px; background: rgba(11,18,48,.94); border: 1px solid rgba(255,255,255,.2); min-width: 220px; }
#menu[hidden] { display: none; }
#menu button { min-height: 44px; text-align: left; padding: 0 14px; border-radius: 10px; border: 0; background: rgba(255,255,255,.08); color: #fff; font-weight: 700; }
#menu button[aria-pressed="true"]::after { content: ' ✓'; color: var(--gold); }
.mute { position: fixed; z-index: 60; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); min-height: 44px; }
#ev-pill { position: fixed; z-index: 55; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); min-height: 46px; padding: 0 22px; border-radius: 23px; border: 1px solid rgba(255,210,122,.7); background: rgba(11,18,48,.8); color: var(--gold); font-weight: 800; white-space: nowrap; transition: opacity .3s; }
body.at-end #ev-pill { opacity: 0; pointer-events: none; }
#snd-hint { position: fixed; z-index: 50; right: 66px; top: 22px; margin: 0; font-size: 13px; font-weight: 700; color: #fff; background: rgba(11,18,48,.7); padding: 6px 10px; border-radius: 12px; transition: opacity .5s; }
#snd-hint.gone { opacity: 0; }
#cap { position: fixed; z-index: 52; left: 50%; bottom: 76px; transform: translateX(-50%); margin: 0; max-width: min(90vw, 520px); text-align: center; padding: 8px 14px; border-radius: 12px; background: rgba(0,0,0,.72); color: #fff; font-weight: 700; font-size: 15px; opacity: 0; transition: opacity .3s; pointer-events: none; }
#cap.on { opacity: 1; }
#ptag { position: fixed; z-index: 54; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 12px; background: rgba(255,210,122,.92); color: #3A2A10; font-size: 12px; font-weight: 800; pointer-events: none; }
@media (max-width: 420px) { #ptag { top: 64px; } }

/* ---------------- the story: one pinned stage, five places ---------------- */
#story { position: relative; height: 1400vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #0B1230; }
.scene { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.scene.vis { visibility: visible; }
.cam { position: absolute; inset: 0; will-change: transform; }
.ly { position: absolute; inset: -6%; pointer-events: none; will-change: transform; }
.ly > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lines { position: absolute; left: 0; right: 0; top: 13%; z-index: 6; text-align: center; padding: 0 20px; pointer-events: none; }
.ln { margin: 0 auto 10px; max-width: 640px; font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 700; font-size: clamp(22px, 5.6vw, 40px); line-height: 1.15; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 18px rgba(0,0,0,.55); opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .45s, transform .45s; }
.ln.on { opacity: 1; transform: none; }
.ln.small { font-size: clamp(16px, 4vw, 22px); font-family: 'Nunito', sans-serif; font-weight: 800; }
.kick { display: inline-block; font-size: 13px; letter-spacing: .2em; padding: 6px 12px; border-radius: 10px; background: rgba(0,0,0,.45); }

/* the host's message (a text arriving on the phone) */
.msg { position: absolute; z-index: 7; left: 50%; top: 14%; width: min(88vw, 380px); transform: translate3d(-50%, -20px, 0); opacity: 0; transition: opacity .4s, transform .4s; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: rgba(255,251,242,.96); color: #2A1E2E; box-shadow: 0 12px 30px rgba(0,0,0,.35); pointer-events: none; }
.msg.on { opacity: 1; transform: translate3d(-50%, 0, 0); }
.msg b { display: block; font-size: 12px; letter-spacing: .08em; color: #8A5A2B; }
.msg p { margin: 2px 0 0; font-weight: 700; font-size: 15px; line-height: 1.3; }
.msg i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--coral); color: #fff; font-style: normal; font-weight: 800; display: grid; place-items: center; }

/* ---------------- the game cards and the playing field ---------------- */
.gcard { position: absolute; z-index: 9; left: 50%; bottom: max(80px, calc(env(safe-area-inset-bottom) + 72px)); transform: translate3d(-50%, 30px, 0); width: min(92vw, 420px); padding: 18px 18px 16px; border-radius: 22px; text-align: center; opacity: 0; visibility: hidden; transition: opacity .35s, transform .35s, visibility 0s .35s; }
.gcard.on { opacity: 1; visibility: visible; transform: translate3d(-50%, 0, 0); transition: opacity .35s, transform .35s; }
.g1 .gcard { background: rgba(42,20,12,.9); border: 2px solid #FFB36B; }
.g2 .gcard { background: rgba(18,6,46,.9); border: 2px solid var(--cyan); }
.gcard h2 { margin: 0; font-family: 'Fredoka', sans-serif; font-size: clamp(28px, 7vw, 40px); letter-spacing: .03em; line-height: 1; }
.g1 h2 { color: #FFD23F; } .g2 h2 { color: var(--cyan); }
.gcard p { margin: 8px 0 0; font-weight: 700; line-height: 1.35; }
.gcard .how { font-size: 14px; opacity: .85; font-weight: 600; }
.gbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.gb { min-height: 48px; padding: 0 22px; border-radius: 24px; border: 0; font-weight: 800; font-size: 16px; }
.gb.go { background: #FFD23F; color: #2A1406; }
.g2 .gb.go { background: var(--cyan); color: #06121E; }
.gb.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.gtier { font-family: 'Fredoka', sans-serif; font-size: 26px !important; color: #FFD23F; }
.g2 .gtier { color: var(--cyan); }
.gscore { font-size: 15px; }
.gtoggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 700; min-height: 44px; }
.gtoggle input { width: 22px; height: 22px; }

.hud { position: absolute; z-index: 9; left: 50%; top: max(66px, calc(env(safe-area-inset-top) + 60px)); transform: translateX(-50%); display: flex; gap: 8px; align-items: center; opacity: 0; transition: opacity .3s; pointer-events: none; }
.playing .hud { opacity: 1; }
.hud span { min-width: 76px; text-align: center; padding: 6px 10px; border-radius: 12px; background: rgba(0,0,0,.6); font-weight: 800; font-variant-numeric: tabular-nums; }
.hud .t.low { color: #FF7A6B; }
.hudbtns { position: absolute; z-index: 9; left: 50%; bottom: max(80px, calc(env(safe-area-inset-bottom) + 72px)); transform: translateX(-50%); display: none; gap: 8px; }
.playing .hudbtns { display: flex; }
.paused-note { position: absolute; z-index: 10; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 14px 18px; border-radius: 16px; background: rgba(0,0,0,.75); font-weight: 800; text-align: center; display: none; }
.paused .paused-note { display: block; }

/* Party Panic: the falling decorations are buttons; the field itself lets the scroll through */
.pf { position: absolute; z-index: 8; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.it { position: absolute; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 0; padding: 0; background: transparent; pointer-events: auto; touch-action: none; border-radius: 50%; will-change: transform; }
.it svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.it[hidden] { display: none; }
.it.held { z-index: 3; filter: drop-shadow(0 0 10px rgba(255,255,255,.9)); }
.easy .it { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
.dest { position: absolute; z-index: 7; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.75); opacity: 0; transition: opacity .2s; pointer-events: none; }
.dest.on { opacity: 1; animation: tk-pulse 1s infinite; }
.pop { position: absolute; z-index: 9; font-weight: 900; font-size: 20px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6); pointer-events: none; animation: tk-up .9s forwards; }
@keyframes tk-up { to { transform: translate3d(0, -50px, 0); opacity: 0; } }
@keyframes tk-pulse { 50% { transform: scale(1.08); } }

/* Save the Beat: one lane, the notes fall to the line, tap the pad */
.lane { position: absolute; z-index: 8; left: 50%; top: 16%; bottom: max(168px, calc(env(safe-area-inset-bottom) + 160px)); width: min(46vw, 180px); transform: translateX(-50%); border-radius: 22px; background: linear-gradient(rgba(61,226,255,0), rgba(61,226,255,.12)); border: 1px solid rgba(61,226,255,.35); opacity: 0; visibility: hidden; transition: opacity .3s; }
.playing .lane { opacity: 1; visibility: visible; }
.lane .line { position: absolute; left: -10px; right: -10px; bottom: 34px; height: 6px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.note { position: absolute; left: 50%; top: 0; width: 64px; height: 26px; margin-left: -32px; border-radius: 13px; background: var(--mag); box-shadow: 0 0 14px var(--mag); will-change: transform; }
.note.acc { background: #FFD27A; box-shadow: 0 0 14px #FFD27A; }
.note[hidden] { display: none; }
.pad { position: absolute; z-index: 9; left: 50%; bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px)); transform: translateX(-50%); width: min(80vw, 320px); min-height: 72px; border-radius: 36px; border: 3px solid var(--cyan); background: rgba(6,18,30,.85); color: var(--cyan); font-family: 'Fredoka', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: .1em; touch-action: manipulation; display: none; }
.playing .pad { display: block; }
.pad.hit { background: var(--cyan); color: #06121E; }
.g2 .hudbtns { bottom: auto; top: max(128px, calc(env(safe-area-inset-top) + 122px)); }
.judge { position: absolute; z-index: 9; left: 50%; top: 46%; transform: translate(-50%, -50%); font-family: 'Fredoka', sans-serif; font-size: 34px; font-weight: 700; text-shadow: 0 0 14px rgba(0,0,0,.8); pointer-events: none; opacity: 0; }
.judge.show { animation: tk-judge .5s; }
.judge.perfect { color: #FFD27A; } .judge.good { color: var(--cyan); } .judge.miss { color: #FF7A8A; }
@keyframes tk-judge { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }
.meter { position: absolute; z-index: 9; left: 50%; top: max(106px, calc(env(safe-area-inset-top) + 100px)); transform: translateX(-50%); width: min(70vw, 260px); height: 10px; border-radius: 5px; background: rgba(255,255,255,.18); overflow: hidden; opacity: 0; }
.playing .meter { opacity: 1; }
.meter b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mag), var(--cyan)); transition: width .2s; }

/* ---------------- 1. the living room: the decorations go up ---------------- */
#s1 .dz { opacity: 0; transition: opacity .35s, transform .5s; transform-box: fill-box; transform-origin: center; transform: translateY(-30px) scale(.6); }
#s1 .dz.on { opacity: 1; transform: none; }
#s1 .pn { transform-box: fill-box; transform-origin: 50% 0; transition: transform .8s cubic-bezier(.3, 1.6, .5, 1); }
#s1 .pn.crook { transform: rotate(var(--r)) translateY(10px); }
#s1.ready .pn.crook { transform: none; }
#s1 .lamp { transition: opacity 1s; }
#s1.ready .lamp { opacity: .55; }
#s1.ready .yb { fill: #FFD27A; }
#s1 .fire { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-fire 1.2s ease-in-out infinite alternate; }
@keyframes tk-fire { to { transform: scaleY(1.14) scaleX(.94); } }
#s1 .trail { position: absolute; z-index: 5; left: 0; top: 0; width: 46vmax; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,210,122,0), #FFD27A, #FF3DCB, #3DE2FF); transform-origin: 100% 50%; opacity: 0; pointer-events: none; }

/* ---------------- 2. the backyard: the music comes back ---------------- */
#s2 .bulb { opacity: .22; transition: opacity .3s; }
#s2 .glo { transition: opacity .4s; }
#s2.lv1 .l1 .bulb, #s2.lv2 .l2 .bulb, #s2.lv3 .l3 .bulb, #s2.lv4 .l4 .bulb, #s2.lv5 .l5 .bulb { opacity: 1; }
#s2.lv1 .l1 .glo, #s2.lv2 .l2 .glo, #s2.lv3 .l3 .glo, #s2.lv4 .l4 .glo, #s2.lv5 .l5 .glo { opacity: .55; }
#s2 .onsign { opacity: 0; transition: opacity .4s; }
#s2.live .onsign { opacity: 1; } #s2.live .offsign { opacity: 0; }
#s2 .offsign { animation: tk-blink 1.1s steps(2) infinite; }
#s2.live .offsign { animation: none; }
@keyframes tk-blink { 50% { opacity: .35; } }
#s2 .halo { transition: opacity .25s; }
#s2.lv2 .halo { opacity: .35; }
#s2 .spk.thump .cone { animation: tk-cone .18s; }
#s2.live .cone { animation: tk-cone .536s infinite; }
#s2.live .halo { animation: tk-halo .536s infinite; }
@keyframes tk-cone { 50% { transform: scale(1.35); } }
@keyframes tk-halo { 0% { opacity: .65; } 100% { opacity: .2; } }
#s2 .cone { transform-box: fill-box; transform-origin: center; }
#s2 .led { transition: fill .3s; }
#s2.lv3 .led { fill: var(--mag); }
#s2.live .led { animation: tk-led 1.07s linear infinite; }
@keyframes tk-led { 0% { fill: #FF3DCB; } 33% { fill: #3DE2FF; } 66% { fill: #FFD27A; } }
#s2 .tile { transition: fill .2s; }
#s2.lv4 .tile.t0, #s2.live .tile { animation: tk-tile 1.07s steps(1) infinite; }
#s2.live .tile.t1 { animation-delay: -.27s; } #s2.live .tile.t2 { animation-delay: -.54s; } #s2.live .tile.t3 { animation-delay: -.8s; }
@keyframes tk-tile { 0% { fill: #FF3DCB; } 25% { fill: #1C1240; } 50% { fill: #3DE2FF; } 75% { fill: #2A1660; } }
#s2 .dcol { opacity: 0; transition: opacity .5s; }
#s2 .dancer.on .dcol { opacity: 1; } #s2 .dancer.on .dsil { opacity: 0; }
#s2 .dancer.on > .dcol > .pp { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-dance .536s ease-in-out infinite alternate; }
#s2 .dancer.d1.on > .dcol > .pp, #s2 .dancer.d3.on > .dcol > .pp, #s2 .dancer.d5.on > .dcol > .pp { animation-delay: -.27s; }
@keyframes tk-dance { 0% { transform: translateY(0) rotate(-3deg); } 100% { transform: translateY(-10px) rotate(3deg); } }
#s2 .dj .pp { transform-box: fill-box; transform-origin: 50% 100%; }
#s2.live .dj .pp { animation: tk-dance .536s ease-in-out infinite alternate; }

/* ---------------- 3. the kitchen ---------------- */
#s3 .flash3 { transition: opacity .12s; }
#s3.flash .flash3 { opacity: 1; }
#s3 .toast .arms { transform-box: fill-box; transform-origin: 50% 0; }
#s3 .grp, #s3 .kidonly > g { transform-box: fill-box; }
#s3 .cookie-kid { transition: transform .6s; }
#s3.snatch .cookie-kid { transform: translateX(-16px); }
body.adults .kidonly { display: none; }
#s3 .bubble, .bub3 { position: absolute; z-index: 7; left: 50%; top: 30%; transform: translate(-50%, 10px); margin: 0; padding: 12px 18px; border-radius: 18px; background: #fff; color: #2A1E2E; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(18px, 4.6vw, 26px); text-align: center; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; max-width: 86vw; }
.bub3.on { opacity: 1; transform: translate(-50%, 0); }
.wins { position: absolute; z-index: 7; left: 50%; top: 24%; transform: translateX(-50%); display: grid; gap: 8px; width: min(86vw, 360px); pointer-events: none; }
.wins p { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(42,20,12,.82); color: #FFE7A8; font-weight: 800; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.wins p.on { opacity: 1; transform: none; }

/* ---------------- 4. the street at midnight ---------------- */
#s4 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#s4 .lit { color: #FFD27A; opacity: 0; }
#s4 .haze { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(200,210,255,.18), rgba(200,210,255,0) 70%); opacity: 0; transition: opacity 2s; pointer-events: none; }
#s4.smoky .haze { opacity: 1; }
#s4 .flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.board { position: absolute; z-index: 7; left: 50%; top: 26%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.board .num { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(110px, 32vw, 220px); line-height: 1; color: #FFF3D0; text-shadow: 0 0 24px rgba(255,210,122,.9), 0 4px 0 rgba(0,0,0,.4); font-variant-numeric: tabular-nums; }
.board .num.tick { animation: tk-num .9s; }
@keyframes tk-num { 0% { transform: scale(1.4); opacity: 0; } 15% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: .2; transform: scale(.9); } }
.board .say { display: block; margin-top: 8px; font-weight: 800; font-size: 16px; letter-spacing: .14em; color: #fff; }
.hny { position: absolute; z-index: 7; left: 0; right: 0; top: 24%; margin: 0; text-align: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(44px, 12vw, 96px); line-height: 1; color: #FFD27A; text-shadow: 0 0 28px rgba(255,61,203,.8), 0 4px 0 rgba(0,0,0,.4); opacity: 0; transform: scale(.8); transition: opacity .5s, transform .5s; pointer-events: none; }
.hny.on { opacity: 1; transform: none; }
.ctl4 { position: absolute; z-index: 9; left: 50%; bottom: max(80px, calc(env(safe-area-inset-bottom) + 72px)); transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: nowrap; }
.ctl4 button { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(255,255,255,.55); background: rgba(5,10,36,.75); color: #fff; font-weight: 800; white-space: nowrap; }
.ctl4 button[hidden] { display: none; }
#s4 .cw > .pp, #s4 .nbrs .pp { transform-box: fill-box; transform-origin: 50% 100%; }
#s4.cheer .cw > .pp { animation: tk-hop .5s ease-in-out infinite alternate; }
#s4.cheer .cw.c1 > .pp { animation-delay: -.2s; } #s4.cheer .cw.c2 > .pp { animation-delay: -.35s; }
@keyframes tk-hop { to { transform: translateY(-14px); } }
#s4 .dog { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-dog 2.4s ease-in-out infinite; }
@keyframes tk-dog { 50% { transform: rotate(-6deg); } }

/* ---------------- 5. the patio, the envelope, the invitation ---------------- */
#s5 canvas { position: absolute; left: 0; right: 0; top: 0; height: 40%; width: 100%; display: block; pointer-events: none; }
.env { position: absolute; z-index: 5; left: 50%; top: 64%; width: min(70vw, 300px); aspect-ratio: 300 / 190; transform: translate(-50%, -50%); perspective: 900px; pointer-events: none; }
.env svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.env .flap { position: absolute; left: 0; top: 0; width: 100%; height: 62%; transform-origin: 50% 0; will-change: transform; z-index: 3; }
.env .flap svg { height: 100%; }
.env .body { z-index: 2; }
.card { position: absolute; z-index: 4; left: 50%; top: 50%; width: min(92vw, 440px); max-height: calc(100svh - 150px); overflow: auto; padding: 26px 22px 20px; border-radius: 22px; background: var(--card); color: var(--cardInk); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 2px solid #E2B34E; transform: translate3d(-50%, 30%, 0) scale(.4); opacity: 0; will-change: transform; }
.card .k-in { margin: 0; font-weight: 900; letter-spacing: .18em; font-size: 12px; color: #B9822B; }
.card h1 { margin: 8px 0 0; font-family: 'Fredoka', sans-serif; font-size: clamp(30px, 8vw, 42px); line-height: 1; color: #2A1E2E; }
.card .sub { margin: 4px 0 0; font-family: 'Fredoka', sans-serif; font-size: 22px; color: #D84D8A; }
.card .tag { margin: 10px 0 0; font-style: italic; font-family: 'Playfair Display', Georgia, serif; font-size: 17px; }
.card .inv { margin: 10px 0 0; font-weight: 700; }
.card .rule { height: 2px; margin: 14px auto; width: 60%; background: linear-gradient(90deg, transparent, #E2B34E, transparent); }
.card .when, .card .where, .card .with { margin: 6px 0 0; font-weight: 700; }
.card .score-line { margin: 10px 0 0; font-size: 14px; color: #7A5A2A; font-weight: 700; }
.card .fin { margin: 10px 0 0; font-style: italic; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.btn { min-height: 48px; padding: 0 20px; border-radius: 24px; border: 0; background: #2A1E2E; color: #FFE7A8; font-weight: 900; letter-spacing: .03em; }
.btn.ghost { background: transparent; color: #2A1E2E; border: 1.5px solid #2A1E2E; }
.btn[hidden] { display: none; }

/* ---------------- after the story: details, reply, keepsake ---------------- */
.after { position: relative; z-index: 2; background: #FFF8EC; color: #2A1E2E; padding: 40px 16px 110px; }
.after section { max-width: 560px; margin: 0 auto 36px; }
.after h2 { font-family: 'Fredoka', sans-serif; font-size: 30px; margin: 0 0 14px; }
.det { margin: 0; display: grid; gap: 10px; }
.det div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #EADCC4; }
.det dt { font-weight: 800; color: #8A5A2B; }
.det dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 380px) { .det div { grid-template-columns: 1fr; gap: 2px; } }
#live-cd { font-weight: 800; color: #B9822B; }
.row-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.after .btn.ghost { color: #2A1E2E; border-color: #2A1E2E; }
.f { display: grid; gap: 6px; margin: 0 0 14px; font-weight: 800; }
.f input { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #CDB894; font: inherit; font-weight: 600; background: #fff; }
.ans { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.ans label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #CDB894; background: #fff; font-weight: 800; }
.ans label[hidden] { display: none; }
.ans input { width: 20px; height: 20px; }
.step { display: flex; align-items: center; gap: 14px; }
.step button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #2A1E2E; background: #fff; font-size: 22px; font-weight: 900; }
.step output { min-width: 28px; text-align: center; font-size: 20px; font-weight: 900; }
.f[hidden] { display: none; }
#err { min-height: 20px; margin: 0 0 10px; font-weight: 700; }
#err.err { color: #B42318; }
#done[hidden], #rsvp-form[hidden] { display: none; }
#done h3 { font-family: 'Fredoka', sans-serif; font-size: 26px; margin: 0; }
.linkish { background: none; border: 0; padding: 10px 0; color: #8A5A2B; text-decoration: underline; font-weight: 800; min-height: 44px; }
.going { font-weight: 800; color: #8A5A2B; }
#keep[hidden] { display: none; }
#keep canvas { width: 100%; max-width: 360px; height: auto; border-radius: 18px; display: block; margin: 0 auto 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
#keep p { margin: 0 0 12px; }
.foot { text-align: center; font-size: 13px; color: #8A7A66; }

/* ---------------- reduced motion: the places stand still, one under the other ---------------- */
body.rm #story { height: auto; }
body.rm .stage { position: relative; height: auto; overflow: visible; }
body.rm .scene { position: relative; height: 100vh; height: 100svh; min-height: 560px; visibility: visible; opacity: 1; overflow: hidden; }
body.rm .cam, body.rm .ly { transform: none !important; }
body.rm .ln { opacity: 1; transform: none; transition: none; }
body.rm .card { position: relative; left: auto; top: auto; margin: 0 auto; transform: none; opacity: 1; max-height: none; }
body.rm #s5 { height: auto; min-height: 100svh; padding: 40% 0 40px; }
body.rm .env { display: none; }
body.rm .msg, body.rm .wins p, body.rm .bub3 { transition: none; }
body.rm *, body.rm *::before, body.rm *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) { .ln, .msg, .gcard { transition: none; } }

/* People never bob, sway, rock, slide back and forth or run in a loop (the user, 2026-11-09). They stand still; legs that step and a wave are fine. */
#s2 .dancer > .dcol > .pp, #s2 .dancer.on > .dcol > .pp, #s2.live .dj .pp, #s2 .dj .pp { animation: none !important; }