/* Not My Event: the look of "The Birthday Roast Machine" (public/templates/birthday-roast-machine.html). One page that scrolls DOWN through five places of one comedy awards show. Each scene
   is a section with a pinned picture behind it (.stage, drawn by roast-art.js for the size of the screen) and its words and toys in front (.flow), which simply scroll: nothing is ever clipped
   on a small phone, and nothing has to be finished to go on. The scroll frame in roast.js writes only transform and opacity on a few layers. Five palettes: burgundy velvet and gold (theater),
   teal and brass with candy bulbs (machine room), black and gold (awards), steel blue turning party pink (backstage), midnight blue and brass (lounge). Nothing flashes: bulbs and lamps glow
   and fade slowly. */
:root { --ac: #E2B453; --ac2: #FFF0B0; --mono: 'Share Tech Mono', ui-monospace, Menlo, Consolas, monospace; --head: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; --serif: 'Playfair Display', Georgia, serif; --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #140308; color: #fff; font-family: var(--sans); line-height: 1.45; overflow-x: clip; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 9100; background: #fff; color: #000; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid #FFD36A; outline-offset: 3px; }

/* ---------- the two controls at the top, the details pill, the sound hint ---------- */
#menu-wrap { position: fixed; left: 10px; top: 10px; z-index: 9040; }
#b-menu { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(255, 231, 168, .5); background: rgba(20, 3, 8, .8); color: #FFE7A8; font-family: var(--head); letter-spacing: .1em; font-size: 17px; }
#menu { margin-top: 8px; display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(20, 3, 8, .96); border: 1px solid rgba(255, 231, 168, .3); min-width: 210px; }
#menu button { min-height: 44px; text-align: left; padding: 0 12px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; }
#menu button[aria-pressed="true"] { background: var(--ac); color: #1a0a04; }
#ev-pill { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9030; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid rgba(255, 231, 168, .5); background: rgba(20, 3, 8, .82); color: #FFE7A8; font-size: 13px; letter-spacing: .04em; }
#snd-hint { position: fixed; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 48px); transform: translateX(-50%); z-index: 9030; padding: 6px 12px; border-radius: 14px; background: rgba(20, 3, 8, .82); font-size: 12px; white-space: nowrap; transition: opacity .4s; pointer-events: none; }
#snd-hint.gone { opacity: 0; }

/* ---------- a scene: a pinned picture, and the words in front ---------- */
.sc { position: relative; }
#s1 { background: #2a0610; } #s2 { background: #0c2630; } #s3 { background: #0b0906; } #s4 { background: #151a24; } #s5 { background: #0d1530; }
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; z-index: 0; }
.flow { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100lvh; }
.flow, .beat { pointer-events: none; }
.beat > * { pointer-events: auto; }
.ly, .ov { position: absolute; inset: 0; pointer-events: none; }
.ly svg, .ov svg { display: block; width: 100%; height: 100%; }
.ov { opacity: 0; }
.beat { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 76px 16px 70px; text-align: center; }
.beat.out { min-height: 70vh; justify-content: flex-end; padding-bottom: 22vh; }
.cue { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; border-radius: 16px; background: rgba(20, 3, 8, .74); color: #FFE7A8; }
.cue::after { content: '  ↓'; }
.cue.light { background: rgba(255, 255, 255, .2); color: #fff; }
.linkish { background: none; border: 0; padding: 10px 8px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; color: inherit; opacity: .92; }
.linkish.light { color: #fff; }
.minor { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.fine { font-size: 12px; opacity: .78; }
.unit { width: 100%; max-width: 600px; padding: 22px 18px 14px; border-radius: 18px; display: grid; gap: 14px; justify-items: center; }
.head { font-family: var(--head); font-weight: 400; font-size: clamp(36px, 10vw, 68px); line-height: 1; letter-spacing: .03em; max-width: 14em; }
.lede { font-size: clamp(16px, 4.4vw, 20px); max-width: 30em; }
.plate { font-family: var(--head); font-size: clamp(20px, 5.6vw, 30px); letter-spacing: .14em; padding: 6px 18px 4px; border-radius: 6px; color: #2a1a04; background: linear-gradient(180deg, #f6dfa0, #c8963e); box-shadow: 0 3px 0 #6e4e16; }
.plate.gold { background: linear-gradient(90deg, #8a6420, #f6e39b 40%, #d9a940 60%, #7a5418); }

/* ---------- buttons ---------- */
.btn-show { min-height: 56px; padding: 8px 26px; border-radius: 10px; border: 0; background: linear-gradient(180deg, #fff0b0, #e2b453 55%, #b8873a); color: #2a0610; font-family: var(--head); font-size: clamp(24px, 6.6vw, 32px); letter-spacing: .08em; box-shadow: 0 5px 0 #6e4e16, 0 0 0 3px #2a0610, 0 0 0 5px #e2b453; }
.btn-show:active { transform: translateY(3px); box-shadow: 0 2px 0 #6e4e16, 0 0 0 3px #2a0610, 0 0 0 5px #e2b453; }
.btn-show.small { min-height: 48px; font-size: clamp(20px, 5.4vw, 24px); padding: 6px 20px; }
.acts, .row-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.btn { min-height: 48px; padding: 8px 22px; border-radius: 26px; border: 2px solid var(--ac); background: var(--ac); color: #1a0a04; font-weight: 700; font-size: 16px; letter-spacing: .03em; font-family: var(--sans); }
.btn.ghost { background: transparent; color: var(--ac); }
.btn:disabled { opacity: .5; }

/* ---------- 1. Welcome to the Roast ---------- */
#s1 .kick { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 5vw, 26px); color: #FFE7A8; text-shadow: 0 2px 10px #000; max-width: 22em; margin-top: 18vh; }
.caption { max-width: 32em; font-size: clamp(15px, 4.2vw, 19px); padding: 10px 14px; border-radius: 12px; background: rgba(20, 3, 8, .82); opacity: 0; transition: opacity .6s .9s; }
.caption .who { font-family: var(--mono); font-size: .8em; letter-spacing: .1em; color: #FFD36A; }
#s1.open .caption { opacity: 1; }
.starts { display: grid; gap: 4px; justify-items: center; }
#s1 .curt { transition: transform 1.9s cubic-bezier(.6, .05, .3, 1); }
#s1.open .curt { transform: scaleX(.16); }
#s1 .beams { opacity: 0; transform: rotate(-7deg); transform-origin: 50% 0; transition: opacity 1.2s .7s, transform 1.8s .5s cubic-bezier(.3, .7, .3, 1); }
#s1.open .beams { opacity: 1; transform: none; }
#s1 .hatch { background: radial-gradient(circle at 50% 80%, #fff3c8 0, #ffd36a 14%, #ffb35a 26%, rgba(255, 179, 90, 0) 50%); transform-origin: 50% 80%; }
#s1 .wash { background: #0c2630; }
.cards { background: rgba(26, 4, 10, .9); border: 2px solid rgba(226, 180, 83, .7); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.round { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #FFD36A; }
.ameter { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #FFE7A8; }
.am-bar { flex: 1; height: 12px; border-radius: 6px; background: #3a0a14; border: 1px solid rgba(226, 180, 83, .5); overflow: hidden; }
.am-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb35a, #ffe7a8); transition: width .9s cubic-bezier(.3, .7, .3, 1); }
.q { font-family: var(--serif); font-weight: 800; font-size: clamp(22px, 6vw, 32px); line-height: 1.15; max-width: 18em; }
.q:focus { outline: none; }
.choices { display: grid; gap: 10px; width: 100%; }
.card { display: flex; gap: 12px; align-items: center; text-align: left; min-height: 60px; padding: 10px 14px; border-radius: 12px; border: 0; background: #fff8ec; color: #2a0610; font-size: clamp(15px, 4.2vw, 17px); line-height: 1.3; box-shadow: 0 4px 0 #c9b28a; transition: transform .45s cubic-bezier(.3, .7, .3, 1), opacity .3s, box-shadow .45s; }
.card .c-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #2a0610; color: #FFE7A8; font-family: var(--head); font-size: 20px; }
.card:not(:disabled):hover { transform: translateY(-2px); }
.card.pick { transform: rotate(-2deg) scale(1.04); box-shadow: 0 0 0 3px #FFD36A, 0 0 40px rgba(255, 220, 140, .75); }
.card.dim { opacity: .45; }
.card:disabled { cursor: default; }
.react { min-height: 1.4em; font-size: 16px; color: #FFE7A8; } .react b { color: #fff; font-family: var(--head); font-weight: 400; font-size: 1.3em; letter-spacing: .05em; }
.receipt { width: 100%; max-width: 360px; padding: 14px 16px 18px; background: #fbf8f0; color: #22180e; font-family: var(--mono); font-size: 13px; text-align: left; transform-origin: 50% 0; animation: print .8s cubic-bezier(.3, .7, .3, 1); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x; }
.rc-h { text-align: center; letter-spacing: .2em; font-weight: 700; border-bottom: 1px dashed #22180e; padding-bottom: 6px; margin-bottom: 6px; }
#rc-list { display: grid; gap: 6px; } #rc-list li { line-height: 1.35; } .rc-t { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #a8222f; }
.rc-f { margin-top: 8px; font-size: 10px; text-align: center; opacity: .7; }
@keyframes print { from { transform: scaleY(.05); opacity: 0; } to { transform: none; opacity: 1; } }
.done-line { font-family: var(--mono); color: #FFD36A; font-size: 15px; }

/* ---------- 2. The Roast-O-Matic 3000 ---------- */
#s2 .head { color: #FFE7A8; text-shadow: 0 3px 0 #6e4e16; }
#s2 .lede { color: #cfefff; }
.console { position: relative; background: linear-gradient(180deg, #17404c, #0e2a33); border: 6px solid #b8873a; box-shadow: inset 0 0 0 2px #6e4e16, 0 18px 50px rgba(0, 0, 0, .55); }
.gears { width: 100%; max-width: 240px; height: 70px; }
.gears svg { width: 100%; height: 100%; }
.gears .g1, .gears .g2 { transform-box: fill-box; transform-origin: 50% 50%; }
.step-h { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #5CF2C0; justify-self: start; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.pk { min-height: 48px; padding: 8px 14px; border-radius: 10px; border: 2px solid #2a5260; background: #0a1c22; color: #dff6ff; font-size: 15px; line-height: 1.25; text-align: center; box-shadow: 0 3px 0 #04090b; transition: background .25s, border-color .25s, box-shadow .25s; flex: 1 1 calc(50% - 8px); }
#k-cats .pk { flex-basis: calc(33% - 8px); }
.pk[aria-pressed="true"] { border-color: #FFD23F; background: #3a2c06; color: #FFE7A8; box-shadow: 0 0 0 2px #FFD23F, 0 0 18px rgba(255, 210, 63, .45); }
.lever-row { display: flex; justify-content: center; width: 100%; padding-top: 4px; }
.lever { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 20px 10px 14px; border-radius: 14px; border: 3px solid #b8873a; background: linear-gradient(180deg, #a8222f, #6e1018); color: #fff; font-family: var(--head); font-size: clamp(20px, 5.6vw, 28px); letter-spacing: .06em; box-shadow: 0 6px 0 #3a0a10; touch-action: none; }
.lever:disabled { filter: saturate(.25) brightness(.7); cursor: not-allowed; }
.lv-stick { position: relative; width: 26px; height: 56px; flex: none; }
.lv-stick::before { content: ''; position: absolute; left: 8px; bottom: 0; width: 10px; height: 18px; border-radius: 3px; background: #2a2a30; }
.lv-stick i { position: absolute; left: 11px; bottom: 12px; width: 4px; height: 40px; border-radius: 2px; background: linear-gradient(90deg, #5a6372, #d9dee8, #4a5262); transform-origin: 50% 100%; transform: rotate(calc(var(--pull, 0) * 70deg)); transition: transform .3s; }
.lv-stick i::after { content: ''; position: absolute; left: -7px; top: -12px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9aa8, #c8243a 60%, #7a0e1c); }
.lever.pulled .lv-stick i { transform: rotate(70deg); transition-duration: .18s; }
.console.work { animation: rattle .16s linear infinite; }
.console.work .g1 { animation: spin 1.1s linear infinite; } .console.work .g2 { animation: spin .8s linear infinite reverse; }
@keyframes rattle { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.k-status { min-height: 1.4em; font-family: var(--mono); font-size: 14px; color: #FFD36A; }
.aplate { width: 100%; max-width: 440px; padding: 16px 18px; border-radius: 8px; background: linear-gradient(135deg, #8a6420, #f6e39b 35%, #d9a940 55%, #fff0b0 70%, #7a5418); color: #2a1a04; box-shadow: inset 0 0 0 2px #fff6d8, inset 0 0 0 5px #8a6420, 0 10px 30px rgba(0, 0, 0, .5); }
.aplate.print { animation: plate 1s cubic-bezier(.3, .7, .3, 1); transform-origin: 50% 0; }
@keyframes plate { from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.ap-top { font-family: var(--mono); font-size: 12px; letter-spacing: .24em; }
.ap-t { font-family: var(--serif); font-weight: 800; font-size: clamp(20px, 5.6vw, 28px); line-height: 1.15; overflow-wrap: anywhere; } .ap-t:focus { outline: none; }
.ap-to { font-size: 14px; font-style: italic; }
#s2 .wash { background: #0b0906; }

/* ---------- 3. The Birthday Awards ---------- */
.ann { font-family: var(--serif); font-size: clamp(20px, 5.4vw, 30px); line-height: 1.25; max-width: 20em; padding: 10px 16px; border-radius: 12px; background: rgba(11, 9, 6, .7); }
.ann b { color: #F6E39B; }
.trophy { position: relative; display: block; width: min(300px, 68vw); aspect-ratio: 220 / 300; padding: 0; border: 0; background: none; perspective: 900px; }
.tr-svg, .tr-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tr-svg { transform-style: preserve-3d; }
.engr { position: absolute; left: 30%; width: 40%; top: 73.5%; height: 18%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--serif); font-weight: 800; font-size: clamp(8px, 2.3vw, 12px); line-height: 1.12; color: #3a2408; overflow: hidden; overflow-wrap: anywhere; }
.trophy.spin .tr-svg, .trophy.spin .engr { animation: tspin 1.3s cubic-bezier(.3, .7, .3, 1); }
@keyframes tspin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.evid { max-width: 340px; padding: 10px 14px 12px; background: #fbf8f0; color: #22180e; font-family: var(--mono); font-size: 13px; text-align: left; transform-origin: 50% 0; transform: scaleY(.04); opacity: 0; transition: transform .9s cubic-bezier(.3, .7, .3, 1) .6s, opacity .3s .6s; }
#s3:not(.off) .evid { transform: none; opacity: 1; }
.ev-h { letter-spacing: .2em; font-weight: 700; border-bottom: 1px dashed #22180e; padding-bottom: 4px; margin-bottom: 6px; }
#s3 .press { left: 50%; top: auto; right: auto; bottom: 16%; width: min(46vw, 220px); height: min(46vw, 220px); margin-left: calc(min(46vw, 220px) / -2); border-radius: 50%; background: radial-gradient(circle at 40% 32%, #ff9aa8, #e0465c 45%, #8a1022); box-shadow: 0 14px 0 #4a0810, 0 24px 40px rgba(0, 0, 0, .6), inset 0 -6px 0 rgba(0, 0, 0, .2); display: grid; place-items: center; }
#s3 .press span { font-family: var(--head); font-size: clamp(22px, 6vw, 34px); letter-spacing: .1em; color: #fff; }
#s3 .wash { background: #151a24; }

/* ---------- 4. The Roast Goes Wrong ---------- */
#s4 .wall { transition: transform 1.6s cubic-bezier(.5, .05, .3, 1); }
#s4 .wall.l { transform-origin: 0 50%; } #s4 .wall.r { transform-origin: 100% 50%; }
#s4 .back, #s4 .smoke { transition: opacity 1s; }
#s4 .lights { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 1.4s; pointer-events: none; }
#s4.m2 .lights { opacity: .55; }
#s4.m2:not(.m4) .back { animation: rattle .2s linear 6; }
#s4.m2 .puff { animation: puff 2.6s ease-out forwards; }
@keyframes puff { 0% { opacity: 0; transform: translateY(0) scale(.4); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(-120px) scale(1.6); } }
#s4 .puff { transform-box: fill-box; transform-origin: 50% 50%; }
#s4.m4 .wall.l { transform: perspective(1400px) rotateY(78deg); } #s4.m4 .wall.r { transform: perspective(1400px) rotateY(-78deg); }
#s4.m4 .back, #s4.m4 .smoke { opacity: 0; } #s4.m4 .lights { opacity: 0; }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.machine { font-family: var(--mono); font-size: clamp(17px, 4.8vw, 26px); letter-spacing: .08em; color: #fff; background: #a8222f; padding: 10px 16px; border-radius: 8px; border: 2px solid #ffd0d4; max-width: 22em; opacity: 0; transform: scale(.9); transition: opacity .4s, transform .4s; }
#s4.m1 .machine { opacity: 1; transform: none; }
#s4.m4 .machine { opacity: .0; }
.rlevel { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 440px; padding: 10px 12px; border-radius: 10px; background: rgba(10, 12, 18, .85); border: 1px solid #5a6372; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; opacity: 0; transition: opacity .4s; }
#s4.m1 .rlevel { opacity: 1; } #s4.m4 .rlevel { opacity: 0; }
.rl-bar { flex: 1; height: 14px; border-radius: 7px; background: #20283a; overflow: hidden; }
.rl-bar i { display: block; height: 100%; width: 8%; background: linear-gradient(90deg, #5cf2c0, #ffd23f 55%, #ff5d73); transition: width 1.7s cubic-bezier(.4, 0, .6, 1); }
#s4.m1 .rl-bar i { width: 100%; }
.rl-n { min-width: 6em; text-align: right; color: #ff9aa8; }
.heart { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(24px, 6.8vw, 40px); line-height: 1.2; max-width: 16em; padding: 12px 18px; border-radius: 14px; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(10px); transition: opacity 1.2s, transform 1.2s; }
#s4.m3 .heart { opacity: 1; transform: none; }
#s4.m4 .heart { color: #3a0a20; text-shadow: none; background: rgba(255, 255, 255, .78); }
#s4 .dark { background: #0d1530; }
#s4 .gt { left: 50%; top: 0; right: auto; bottom: auto; width: min(64vw, 300px); height: min(30vw, 140px); border-radius: 10px; background: linear-gradient(135deg, #8a6420, #f6e39b 35%, #d9a940 55%, #fff0b0 70%, #7a5418); display: grid; place-items: center; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
#s4 .gt span { font-family: var(--head); letter-spacing: .14em; color: #2a1a04; font-size: clamp(14px, 3.6vw, 20px); }

/* ---------- 5. You've Made the Guest List ---------- */
.ticket { position: relative; width: 100%; max-width: 560px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, #8a6420, #f6e39b 30%, #d9a940 50%, #fff0b0 70%, #8a6420); box-shadow: 0 20px 60px rgba(0, 0, 0, .55); color: #2a1a04; }
.ticket::before, .ticket::after { content: ''; position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #0d1530; }
.ticket::before { left: -14px; } .ticket::after { right: -14px; }
.tk-in { display: grid; gap: 8px; justify-items: center; padding: 26px 22px 22px; border-radius: 8px; border: 2px dashed rgba(42, 26, 4, .5); background: linear-gradient(180deg, rgba(255, 248, 225, .55), rgba(255, 248, 225, .2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.ticket.fold .tk-in { clip-path: inset(0 0 100% 0); }
.ticket.fold.open .tk-in { clip-path: inset(0 0 0 0); transition: clip-path 1.4s cubic-bezier(.3, .7, .3, 1) .2s; }
.tk-show { font-family: var(--head); font-size: 18px; letter-spacing: .18em; }
#t-title { font-family: var(--head); font-weight: 400; font-size: clamp(34px, 9.6vw, 56px); line-height: 1; letter-spacing: .04em; color: #4a0a14; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.tk-inv { font-family: var(--serif); font-style: italic; font-size: 18px; }
.ticket .who { font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 8.6vw, 48px); line-height: 1.05; overflow-wrap: anywhere; color: #2a0610; }
.ticket .age { font-style: italic; }
.ticket .rule { width: 60%; height: 2px; background: linear-gradient(90deg, transparent, #4a0a14, transparent); margin: 4px 0; }
.ticket .when, .ticket .where, .ticket .with { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.ticket .quip { font-family: var(--serif); font-style: italic; font-size: 17px; max-width: 26em; }
.ticket .awd { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; max-width: 30em; overflow-wrap: anywhere; }
.ticket .acts { margin-top: 6px; }
.ticket .btn { background: #2a0610; border-color: #2a0610; color: #FFE7A8; }
.ticket .btn.ghost { background: transparent; color: #2a0610; }

/* ---------- the details, the reply, the award to share ---------- */
.after { position: relative; z-index: 2; background: #0d1530; color: #F2ECDD; padding: 30px 16px calc(96px + env(safe-area-inset-bottom)); display: grid; gap: 34px; justify-items: center; }
.after section { width: 100%; max-width: 560px; display: grid; gap: 14px; }
.after h2 { font-family: var(--serif); font-weight: 800; font-size: 28px; color: var(--ac); }
.det { display: grid; gap: 11px; }
.det div { display: grid; gap: 1px; padding-bottom: 10px; border-bottom: 1px solid rgba(226, 180, 83, .25); }
.det dt { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ac); }
.det dd { font-size: 17px; overflow-wrap: anywhere; }
.row-acts { justify-content: flex-start; }
.going { font-family: var(--mono); font-size: 14px; color: var(--ac2); }
#rsvp-form { display: grid; gap: 14px; }
.f { display: grid; gap: 6px; font-size: 14px; color: #D8D2C2; }
.f input[type="text"], .f textarea { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(226, 180, 83, .6); background: #0a1024; color: #fff; font: inherit; font-size: 16px; }
.ans { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.ans label { display: flex; gap: 10px; align-items: center; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(226, 180, 83, .45); background: #0a1024; font-size: 16px; cursor: pointer; }
.ans label:has(input:checked) { border-color: var(--ac); background: #1a1a2a; box-shadow: inset 0 0 0 1px var(--ac); }
.ans input { width: 20px; height: 20px; accent-color: var(--ac); flex: none; }
.ans b { color: var(--ac2); }
.step { display: flex; align-items: center; gap: 14px; }
.step button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ac); background: transparent; color: var(--ac); font-size: 22px; }
.step output { min-width: 1.5em; text-align: center; font-size: 20px; color: #fff; }
#err { min-height: 1.3em; font-size: 14px; color: #D8D2C2; } #err.err { color: #FF9AA2; }
#done { display: grid; gap: 8px; padding: 18px; border-radius: 14px; border: 1px solid var(--ac); background: #0a1024; }
#done-t { font-family: var(--head); font-weight: 400; font-size: 32px; letter-spacing: .04em; color: var(--ac2); } #done-t:focus { outline: none; }
#r-closed { padding: 14px; border-radius: 12px; background: #0a1024; }
#share { text-align: center; justify-items: center; padding: 24px 16px; border: 3px double var(--ac); border-radius: 10px; background: radial-gradient(ellipse at 50% 0, rgba(226, 180, 83, .18), transparent 70%), #0a1024; }
#share .c-top { font-family: var(--mono); letter-spacing: .24em; font-size: 12px; color: var(--ac); }
.s-t { font-family: var(--serif); font-style: italic; font-size: 19px; max-width: 24em; overflow-wrap: anywhere; }
.foot { font-size: 12px; opacity: .6; text-align: center; max-width: 30em; }

/* ---------- the small motion in the pictures (slow, and never a strobe) ---------- */
.bul { animation: glow 1.4s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .4; } to { opacity: 1; } }
.tube { animation: glow 2.6s ease-in-out infinite alternate; }
.wheel { animation: spin 22s linear infinite; }
.rib { animation: drift 7s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-16px) rotate(6deg); } }
.brw { animation: wave 1.1s ease-in-out infinite alternate; } .brw.l { animation-delay: -.55s; }
@keyframes wave { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.brc { animation: clap .45s ease-in-out infinite alternate; }
@keyframes clap { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
.bal { animation: sway 3.6s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.flm { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .5s ease-in-out infinite alternate; }
@keyframes flick { from { transform: scale(.9, .94); } to { transform: scale(1.06, 1.1); } }
.dust { animation: glow 3s ease-in-out infinite alternate; }
.scan { animation: scan 3.2s linear infinite; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(60px); } }
/* a scene off the screen rests */
.sc.off .stage *, .sc.off .flow * { animation-play-state: paused !important; }

/* ---------- reduced motion: every word and control stays, the sweeping and bursting goes ---------- */
body.rm *, body.rm *::before, body.rm *::after { animation: none !important; transition: none !important; }
body.rm .ov, body.rm #confetti { display: none; }
body.rm #s1 .curt { transform: scaleX(.16); } body.rm #s1 .beams, body.rm .caption { opacity: 1; transform: none; }
body.rm .machine, body.rm .rlevel, body.rm .heart { opacity: 1; transform: none; }
body.rm #s4 .wall.l, body.rm #s4 .wall.r { transform: none; opacity: 0; } body.rm #s4 .back, body.rm #s4 .smoke, body.rm #s4 .lights { opacity: 0; }
body.rm .ticket.fold .tk-in { clip-path: none; }
body.rm .evid { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 380px) { .beat { padding-left: 10px; padding-right: 10px; } .unit { padding: 18px 12px 12px; } .pk, #k-cats .pk { flex-basis: 100%; } }