/*
 * Theater design plan: black #000, white #f7f7f5, silver #b5b5b5,
 * muted #9a9a9a, line #303030. Libre Baskerville carries the host's
 * theatrical invitation; Manrope carries navigation and game controls.
 * Desktop: invitation | actual Ace. Phone: invitation, then Ace.
 * The Table is a literal circular arrangement of thirteen earned cards.
 * Review: keep the actual Zero mark and production suit monogram; omit
 * tutorial captions, ticker, gold ornaments and invented live statistics.
 */
html:has(body.theater) { background:#000; color-scheme:dark; }
body.theater { --ink:#f7f7f5; --silver:#b5b5b5; --muted:#9a9a9a; --line:#303030; --display:'Libre Baskerville',Georgia,serif; --text:'Manrope',Arial,sans-serif; margin:0; background:transparent; color:var(--ink); font:400 16px/1.65 var(--text); -webkit-font-smoothing:antialiased; isolation:isolate; }
body.theater *,body.theater *::before,body.theater *::after { box-sizing:border-box; }
body.theater [hidden] { display:none!important; }
body.theater h1,body.theater h2,body.theater h3,body.theater p { margin:0; }
body.theater a { color:inherit; text-underline-offset:5px; }
body.theater button,body.theater input,body.theater textarea,body.theater select { font:inherit; }
body.theater button,body.theater a { -webkit-tap-highlight-color:transparent; }
body.theater :is(a,button,input,textarea,select,summary):focus-visible { outline:2px solid #fff; outline-offset:6px; }
body.theater .theater-frame { width:min(1240px,100%); margin:auto; padding:0 64px; }
/* Hidden until a keyboard user tabs to it; invisible too, so a phone's scroll bounce cannot reveal it. */
body.theater .skip-link { position:fixed; z-index:100; top:12px; left:16px; background:#fff; color:#000; padding:12px 20px; transform:translateY(-180%); opacity:0; pointer-events:none; }
body.theater .skip-link:focus { transform:translateY(0); opacity:1; pointer-events:auto; }
body.theater .suits,body.theater .suits-veil { position:fixed; pointer-events:none; z-index:-1; }
body.theater .suits { inset:0; background:url('/brand/suits.svg') 0 0/160px 160px repeat; }
body.theater .suits-veil { left:0; top:0; width:300vmax; height:300vmax; margin:-150vmax 0 0 -150vmax; background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0,rgba(0,0,0,.18) 6vmax,rgba(0,0,0,.8) 15vmax,#000 25vmax); transform:translate3d(var(--sx,50vw),var(--sy,30vh),0); transition:transform .7s cubic-bezier(.2,.7,.2,1); will-change:transform; }
body.theater .suits-veil.veil-js { transition:none; }
body.theater .theater-header { display:flex; align-items:center; justify-content:space-between; min-height:122px; gap:30px; }
body.theater .theater-brand { display:block; flex:none; line-height:0; }
body.theater .theater-brand img { width:30px; height:auto; }
body.theater .theater-nav { display:flex; align-items:center; gap:38px; font-size:13px; }
body.theater .theater-nav a { text-decoration:none; color:var(--silver); padding:12px 0; }
body.theater .theater-nav a:hover,body.theater .theater-nav a[aria-current] { color:#fff; }
body.theater .theater-nav a[aria-current] { text-decoration:underline; text-underline-offset:8px; }
body.theater .theater-menu { display:none; }
body.theater .theater-hero { min-height:min(710px,calc(100svh - 190px)); display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:75px; padding:30px 0 80px; }
body.theater .greeting { font-size:17px; color:var(--silver); margin-bottom:24px; }
body.theater .hero-copy h1 { font-family:var(--display); font-size:clamp(68px,7.6vw,104px); line-height:1.08; letter-spacing:-.055em; font-weight:400; }
body.theater .hero-copy h1 span { display:block; }
body.theater .hero-promise { margin-top:32px; font-size:16px; line-height:1.85; color:var(--silver); max-width:420px; }
body.theater .hero-promise p+p { margin-top:5px; }
body.theater .hero-platform { max-width:420px; margin-top:24px; font-size:13px; line-height:1.8; color:var(--silver); }
body.theater .hero-platform a { color:var(--ink); }
body.theater .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px 28px; margin-top:30px; }
body.theater .button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:12px 25px; border:1px solid #777; background:#000; color:var(--ink); border-radius:0; text-decoration:none; font-size:14px; cursor:pointer; transition:color .2s,background .2s,border-color .2s; }
body.theater .button.primary { background:var(--ink); border-color:var(--ink); color:#000; }
body.theater .button:hover { background:#fff; color:#000; border-color:#fff; }
body.theater .button.primary:hover { background:#d9d9d9; border-color:#d9d9d9; }
body.theater .text-link { font-size:14px; padding:10px 0; }
body.theater .soon { color:var(--silver); font-size:17px; }
body.theater .ace-stage { display:grid; place-items:center; perspective:1200px; padding:16px; }
body.theater .ace-card { display:block; position:relative; width:min(310px,100%); aspect-ratio:353/529; border:0; padding:0; background:none; cursor:pointer; transform:rotateX(var(--ace-rx,0deg)) rotateY(var(--ace-ry,0deg)); transition:transform .4s ease; touch-action:pan-y; }
body.theater .ace-inner { display:block; width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .85s cubic-bezier(.2,.75,.2,1); }
body.theater .ace-card.is-turned .ace-inner { transform:rotateY(180deg); }
body.theater .ace-face { position:absolute; inset:0; display:grid; place-items:center; border-radius:13px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
body.theater .ace-front img { display:block; width:100%; height:100%; object-fit:contain; }
body.theater .ace-back { transform:rotateY(180deg); background:#080808; border:6px solid #e4e4e4; }
body.theater .ace-back::after { content:''; position:absolute; inset:12px; border:1px solid #5c5c5c; border-radius:3px; }
body.theater .ace-back-pattern { position:absolute; inset:0; background:url('/brand/suits.svg') center/120px; opacity:.7; }
body.theater .ace-back>img { z-index:1; width:60px; height:auto; padding:12px; box-sizing:content-box; background:#080808; }
body.theater .content-section { padding:90px 0; }
body.theater .section-intro { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:44px; }
body.theater .section-intro h2 { font-family:var(--display); font-size:clamp(32px,3.6vw,46px); font-weight:400; letter-spacing:-.035em; line-height:1.28; }
body.theater .section-intro>p { color:var(--silver); max-width:440px; font-size:15px; }

body.theater .all-replays { display:inline-block; margin-top:26px; }
body.theater .theater-footer { min-height:110px; padding:25px 0 35px; display:flex; align-items:center; gap:20px; color:var(--muted); font-size:12px; }
body.theater .theater-sound { min-height:44px; padding:0; border:0; background:none; color:inherit; display:flex; align-items:center; gap:10px; cursor:pointer; font-size:12px; }
body.theater .sound-bars { width:18px; height:20px; display:flex; align-items:center; justify-content:space-between; }
body.theater .sound-bars i { display:block; width:2px; height:5px; background:currentColor; }
body.theater .sound-bars i:nth-child(2) { height:13px; }
body.theater .sound-bars i:nth-child(3) { height:18px; }
body.theater .theater-sound[aria-pressed=true] { color:#fff; }
body.theater .theater-sound[aria-pressed=true] i { animation:theater-sound-wave 1.2s ease-in-out infinite alternate; }
body.theater .theater-sound[aria-pressed=true] i:nth-child(2) { animation-delay:-.3s; }
body.theater .theater-sound[aria-pressed=true] i:nth-child(3) { animation-delay:-.7s; }
@keyframes theater-sound-wave { to { transform:scaleY(.35); } }
body.theater .sound-status { font-size:12px; max-width:260px; }
body.theater .footer-follow { margin-left:auto; padding:10px 0; }
body.theater .page-heading { padding:66px 0 24px; }
body.theater .page-heading h1 { font:400 clamp(44px,6.8vw,78px)/1.18 var(--display); letter-spacing:-.045em; }
body.theater .page-heading>p { margin-top:25px; font-size:17px; color:var(--silver); }

body.theater .replays-page { padding-bottom:60px; }
body.theater .table-page .page-heading { text-align:center; }
body.theater .table-experience { display:grid; place-items:center; padding:22px 0 20px; }
body.theater .spade-table { position:relative; width:min(640px,100%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#070707 0,rgba(7,7,7,.75) 60%,transparent 68%); }
body.theater .table-card { --a:0deg; position:absolute; left:50%; top:50%; width:55px; height:80px; margin:-40px 0 0 -27.5px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1px solid #b5b5b5; border-radius:4px; background:#f0efeb; color:#000; text-decoration:none; transform:rotate(var(--a)) translateY(-260px) rotate(calc(-1 * var(--a))); }
body.theater .table-rank { font-family:var(--display); font-size:21px; line-height:1; }
body.theater .table-card svg { width:20px; height:22px; }
body.theater .table-card.unclaimed { background:#030303; color:#545454; border-color:#353535; }
body.theater .table-card.claimed:hover { background:#fff; box-shadow:0 0 0 5px #ffffff18; }
body.theater .table-card.seat-0{--a:0deg}.theater .table-card.seat-1{--a:27.6923deg}.theater .table-card.seat-2{--a:55.3846deg}.theater .table-card.seat-3{--a:83.0769deg}.theater .table-card.seat-4{--a:110.7692deg}.theater .table-card.seat-5{--a:138.4615deg}.theater .table-card.seat-6{--a:166.1538deg}.theater .table-card.seat-7{--a:193.8462deg}.theater .table-card.seat-8{--a:221.5385deg}.theater .table-card.seat-9{--a:249.2308deg}.theater .table-card.seat-10{--a:276.9231deg}.theater .table-card.seat-11{--a:304.6154deg}.theater .table-card.seat-12{--a:332.3077deg}
body.theater .table-center { position:absolute; inset:32%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
body.theater .table-center>span { font-family:var(--display); font-size:43px; line-height:1.2; white-space:nowrap; }
body.theater .table-center>p { color:var(--silver); font-size:13px; margin-top:9px; white-space:nowrap; }
body.theater .table-center>img { width:25px; height:auto; margin-top:27px; opacity:.65; }
body.theater .table-ledger { padding-top:40px; }
body.theater .winner-list { border-top:1px solid var(--line); }
body.theater .winner-row { display:grid; grid-template-columns:85px 1fr 80px; gap:15px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none; }
body.theater .winner-card { font-family:var(--display); font-size:26px; }
body.theater .winner-person { font-size:17px; }
body.theater .winner-person small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
body.theater .winner-seat { color:var(--muted); font-size:13px; text-align:right; }
body.theater .winner-row:hover .winner-person { text-decoration:underline; text-underline-offset:5px; }
body.theater .replay-page { max-width:940px; margin:auto; padding:26px 0 70px; min-height:65vh; }
body.theater .replay-heading { padding:12px 0 38px; }
body.theater .back-link { display:inline-block; font-size:13px; color:var(--silver); margin-bottom:35px; }
body.theater .replay-number { font-size:14px; color:var(--silver); margin-bottom:13px; }
body.theater .replay-heading h1 { font-family:var(--display); font-size:clamp(36px,5vw,60px); font-weight:400; line-height:1.25; letter-spacing:-.035em; }
body.theater .replay-subtitle { color:var(--silver); font-size:16px; margin-top:19px; }
body.theater .replay-stage { border:1px solid var(--line); padding:36px; background:rgba(0,0,0,.74); min-width:0; }
body.theater .replay-stage h2,body.theater .result h2 { font:400 clamp(24px,3vw,34px)/1.35 var(--display); margin-bottom:20px; }
body.theater .replay-stage p { max-width:65ch; margin-bottom:18px; }
body.theater .replay-controls { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:24px 0; }
body.theater .replay-controls button,body.theater .replay-stage button,body.theater .result button,body.theater .replay-page button { min-height:46px; padding:10px 18px; border:1px solid #666; background:#000; color:var(--ink); cursor:pointer; }
body.theater .replay-page button:disabled { opacity:.4; cursor:default; }
body.theater .replay-page button:not(:disabled):hover { border-color:#fff; }
body.theater .replay-page .primary { background:var(--ink); color:#000; border-color:var(--ink); }
body.theater .replay-page input:not([type=radio]):not([type=checkbox]),body.theater .replay-page select,body.theater .replay-page textarea { min-height:49px; width:100%; max-width:100%; padding:12px 14px; border:1px solid #666; border-radius:0; background:#080808; color:var(--ink); font-size:16px; }
body.theater .replay-page form { margin-top:24px; }
body.theater .replay-page label { display:block; margin:18px 0 7px; color:var(--silver); font-size:14px; }
body.theater .replay-page fieldset { padding:18px; border:1px solid var(--line); margin:20px 0; }
body.theater .replay-page fieldset label { display:flex; align-items:start; gap:10px; margin:12px 0; }
body.theater .replay-page input[type=radio],body.theater .replay-page input[type=checkbox] { margin-top:7px; accent-color:#fff; }
body.theater .clue-list { padding:0; margin:28px 0; list-style:none; }
body.theater .clue-list>li,.theater .clue-item { border-bottom:1px solid var(--line); padding:20px 0; }
body.theater .clue-list>li:first-child { border-top:1px solid var(--line); }
body.theater .clue-list h3 { font-size:17px; margin-bottom:6px; font-weight:500; }
body.theater .clue-list p,body.theater .clue-date { font-size:13px; color:var(--silver); }
body.theater .notebook { margin-top:30px; }
body.theater .notebook textarea { min-height:180px; line-height:1.8; resize:vertical; }
body.theater .feedback { min-height:28px; margin-top:16px; color:#ddd; }
body.theater .feedback.error { padding-left:14px; border-left:2px solid #eee; }
body.theater .result { border-top:1px solid var(--line); padding-top:40px; margin-top:40px; }
body.theater .result p+p { margin-top:16px; }
body.theater .result a { display:inline-block; margin-top:22px; }
body.theater .loading-experience { padding:40px 0; color:var(--silver); }
body.theater .clue-dialog { max-width:min(820px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); width:100%; background:#050505; color:var(--ink); border:1px solid #666; padding:20px; overflow:auto; }
body.theater .clue-dialog::backdrop { background:rgba(0,0,0,.88); }
body.theater .dialog-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
body.theater .dialog-top h2 { font-size:16px; font-weight:500; }
body.theater .dialog-close { width:44px; height:44px; border:1px solid var(--line); background:#000; color:#fff; font-size:25px; cursor:pointer; }
body.theater #clue-video { display:block; width:100%; max-height:calc(100dvh - 190px); background:#000; }
body.theater #clue-date { font-size:12px; color:var(--silver); margin-top:14px; }
@media(min-width:1500px) { body.theater .theater-hero { min-height:720px; } }
@media(max-width:1000px) { body.theater .theater-frame { padding:0 38px; } body.theater .theater-hero { gap:30px; } body.theater .hero-copy h1 { font-size:76px; } body.theater .ace-card { width:270px; } body.theater .hero-actions { align-items:start; flex-direction:column; gap:13px; } }
@media(max-width:700px) { body.theater .theater-frame { padding:0 24px; } body.theater .theater-header { min-height:96px; gap:20px; } body.theater .theater-brand img { width:25px; } body.theater .theater-nav { gap:20px; font-size:11px; } body.theater .theater-hero { min-height:0; grid-template-columns:1fr; gap:35px; padding:27px 0 36px; } body.theater .hero-copy h1 { font-size:clamp(58px,14vw,88px); letter-spacing:-.06em; } body.theater .hero-copy h1 span { display:inline; } body.theater .hero-copy h1 span+span::before { content:' '; } body.theater .greeting { font-size:14px; margin-bottom:18px; } body.theater .hero-promise { margin-top:24px; font-size:14px; } body.theater .hero-actions { margin-top:23px; gap:13px; flex-direction:row; align-items:center; } body.theater .hero-actions .text-link { margin-left:3px; } body.theater .button { min-height:49px; padding:11px 19px; font-size:13px; } body.theater .ace-stage { padding:14px 0; } body.theater .ace-card { width:190px; } body.theater .content-section { padding:58px 0; } body.theater .section-intro { grid-template-columns:1fr; gap:23px; margin-bottom:30px; } body.theater .section-intro h2 { font-size:34px; } body.theater .section-intro>p { font-size:14px; max-width:38ch; } body.theater .theater-footer { min-height:94px; padding-top:20px; gap:12px; flex-wrap:wrap; } body.theater .sound-status { order:3; flex-basis:100%; } body.theater .page-heading { padding:35px 0 20px; } body.theater .page-heading h1 { font-size:44px; } body.theater .page-heading>p { font-size:15px; margin-top:20px; } body.theater .table-experience { padding-top:12px; } body.theater .spade-table { width:100%; max-width:500px; } body.theater .table-card { width:8.6%; height:13%; margin:-6.5% 0 0 -4.3%; transform:rotate(var(--a)) translateY(calc(-1 * min(39vw,195px))) rotate(calc(-1 * var(--a))); border-radius:3px; gap:3px; } body.theater .table-rank { font-size:clamp(13px,3.2vw,18px); } body.theater .table-card svg { width:clamp(12px,3.5vw,19px); height:auto; } body.theater .table-center>span { font-size:32px; } body.theater .table-center>p { font-size:11px; } body.theater .table-center>img { width:20px; margin-top:18px; } body.theater .table-ledger { padding-top:36px; } body.theater .winner-row { grid-template-columns:47px 1fr 53px; gap:10px; padding:19px 0; } body.theater .winner-card { font-size:22px; } body.theater .winner-person { font-size:15px; } body.theater .winner-seat { font-size:11px; } body.theater .replay-page { padding:8px 0 38px; } body.theater .replay-heading { padding:9px 0 30px; } body.theater .back-link { margin-bottom:30px; } body.theater .replay-heading h1 { font-size:35px; } body.theater .replay-subtitle { font-size:14px; } body.theater .replay-stage { padding:23px 18px; } body.theater .replay-stage p { font-size:14px; } body.theater .replay-controls { gap:11px; } body.theater .clue-dialog { padding:14px; } }
@media(max-width:700px) { body.theater .table-card { transform:rotate(var(--a)) translateY(calc(-1 * min(35vw,205px))) rotate(calc(-1 * var(--a))); } }
@media(max-width:360px) { body.theater .theater-frame { padding:0 19px; } body.theater .theater-nav { gap:13px; font-size:10px; } body.theater .hero-copy h1 { font-size:52px; } body.theater .hero-actions { align-items:start; flex-direction:column; } body.theater .table-center>span { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { body.theater *,body.theater *::before,body.theater *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

body.theater #events-title { scroll-margin-top:40px; }
body.theater .event-label { color:var(--silver); font-size:13px; line-height:1.6; }
body.theater .event-current.is-live .event-label::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ink); margin-right:9px; }
@media(max-width:900px) {
  body.theater .theater-nav { gap:24px; }
}
@media(max-width:700px) {
  body.theater .theater-header { gap:16px; }
  body.theater .theater-nav { gap:15px; font-size:11px; }
}
@media(max-width:360px) {
  body.theater .theater-nav { gap:10px; font-size:10px; }
  body.theater .theater-header { gap:10px; }
}

/* Shared closing navigation: Zero's story and all three confirmed accounts. */
body.theater .theater-footer { display:block; padding:40px 0 25px; margin-top:35px; border-top:1px solid var(--line); }
body.theater .footer-content { display:grid; grid-template-columns:1fr 1.4fr; gap:65px; padding:0 0 30px; }
body.theater .footer-story .footer-about { display:inline-flex; align-items:center; min-height:44px; font:400 22px/1.5 var(--display); color:var(--ink); text-decoration:none; }
body.theater .footer-about:hover,body.theater .footer-about[aria-current] { text-decoration:underline; }
body.theater .footer-story>p { font-size:13px; color:var(--silver); margin-top:3px; }
body.theater .footer-socials { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-content:start; }
body.theater .footer-socials a { display:flex; flex-direction:column; justify-content:center; min-height:62px; padding:8px 0; text-decoration:none; }
body.theater .footer-socials a>span { color:var(--ink); font-size:14px; }
body.theater .footer-socials a>small { color:var(--silver); font-size:11px; margin-top:6px; overflow-wrap:anywhere; }
body.theater .footer-socials a:hover>span { text-decoration:underline; text-underline-offset:5px; }
body.theater .footer-controls { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding-top:14px; border-top:1px solid #202020; }
body.theater .footer-wordmark { margin-left:auto; font-size:11px; color:var(--muted); }
@media(max-width:700px) {
  body.theater .theater-nav { display:none; }
  body.theater .theater-menu { display:block; position:relative; z-index:30; }
  body.theater .theater-menu summary { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:44px; min-width:80px; list-style:none; cursor:pointer; color:var(--ink); font-size:13px; }
  body.theater .theater-menu summary::-webkit-details-marker { display:none; }
  body.theater .menu-lines { display:block; position:relative; width:17px; height:9px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; }
  body.theater .theater-menu[open] .menu-lines { height:1px; border-bottom:0; }
  body.theater .theater-mobile-nav { position:absolute; top:100%; right:0; width:min(290px,calc(100vw - 48px)); display:flex; flex-direction:column; padding:12px 20px; border:1px solid var(--line); background:#050505; box-shadow:0 18px 45px #000a; }
  body.theater .theater-mobile-nav a { display:flex; align-items:center; min-height:44px; padding:10px 0; text-decoration:none; color:var(--silver); font-size:14px; }
  body.theater .theater-mobile-nav a:hover,body.theater .theater-mobile-nav a[aria-current] { color:var(--ink); text-decoration:underline; }
}
@media(max-width:700px) {
  body.theater .theater-footer { padding:24px 0 20px; margin-top:20px; }
  body.theater .footer-content { grid-template-columns:1fr; gap:22px; padding-bottom:24px; }
  body.theater .footer-story .footer-about { font-size:21px; }
  body.theater .footer-socials { gap:15px; }
  body.theater .footer-socials a>span { font-size:13px; }
  body.theater .footer-socials a>small { font-size:10px; }
  body.theater .footer-controls { gap:12px; }
}

/* ---------- text motion (shared with the winner's-eyes mode) */
body.theater .zm-word{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(5px);animation:zm-rise .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0) * 55ms + 80ms)}
body.theater .zm-char{opacity:0;animation:zm-ink .38s ease forwards;animation-delay:calc(var(--line,0ms) + var(--d,0ms))}
body.theater .zm-enter>*{animation:zm-rise .6s cubic-bezier(.2,.7,.2,1) both}
body.theater .zm-enter>*:nth-child(2){animation-delay:.06s}body.theater .zm-enter>*:nth-child(3){animation-delay:.12s}body.theater .zm-enter>*:nth-child(4){animation-delay:.18s}body.theater .zm-enter>*:nth-child(5){animation-delay:.24s}body.theater .zm-enter>*:nth-child(n+6){animation-delay:.3s}
body.theater .zm-shake{animation:zm-shake .42s cubic-bezier(.36,.07,.19,.97)}
body.theater .zm-glow{animation:zm-glow 1.1s ease}
body.theater .zm-flip{animation:zm-flip .62s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes zm-rise{from{opacity:0;transform:translateY(.45em);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes zm-ink{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@keyframes zm-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
@keyframes zm-glow{0%{box-shadow:0 0 0 rgba(255,255,255,0)}30%{box-shadow:0 0 28px rgba(255,255,255,.28)}100%{box-shadow:0 0 0 rgba(255,255,255,0)}}
@keyframes zm-flip{0%{opacity:0;transform:perspective(400px) rotateX(-90deg)}60%{opacity:1;transform:perspective(400px) rotateX(18deg)}100%{transform:none}}

/* ---------- smoother pages: cross-page fades, living links */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:zm-page-out .28s ease both}
  ::view-transition-new(root){animation:zm-page-in .42s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes zm-page-out{to{opacity:0}}
@keyframes zm-page-in{from{opacity:0;transform:translateY(8px)}}
body.theater .theater-nav a{position:relative;transition:color .3s}
body.theater .theater-nav a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
body.theater .theater-nav a:hover::after,body.theater .theater-nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}

@media(prefers-reduced-motion:reduce){body.theater .zm-word,body.theater .zm-char{opacity:1!important;transform:none!important;filter:none!important}}

/* ==========================================================================================
   Refinement pass: a quieter, more luxurious finish over the approved layout.
   Small caps for labels, fill-sweep buttons, drawn underlines, film grain, a frosted header.
   ========================================================================================== */
body.theater { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:'kern' 1,'liga' 1; scrollbar-color:#3a3a3a #000; }
html:has(body.theater) { scroll-behavior:smooth; background:#000; }
@media(prefers-reduced-motion:reduce){ html:has(body.theater){ scroll-behavior:auto; } }
body.theater ::selection { background:#f7f7f5; color:#000; }
/* film grain and a soft vignette, above the backdrop, below nothing interactive */
body.theater::after { content:''; position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation:zm-grain 1.6s steps(6) infinite; }
body.theater .suits,body.theater .suits-veil { z-index:-2; }
body.theater::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%); }
@keyframes zm-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* small caps labels */
body.theater :is(.greeting,.event-label,.replay-number,.spades-winner-label,.spades-prize-label,.clue-date) { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:500; }
body.theater .greeting { font-size:12px; letter-spacing:.32em; color:var(--silver); }
body.theater .replay-number::before { content:''; display:inline-block; width:28px; height:1px; margin:0 12px 3px 0; background:currentColor; vertical-align:middle; opacity:.7; }

/* buttons: uppercase, letter-spaced, a white fill that sweeps in */
body.theater :is(.button,.replay-page button.primary,.replay-page .mode-switch button) { letter-spacing:.16em; text-transform:uppercase; font-size:12px; font-weight:500; }
body.theater .button { position:relative; overflow:hidden; isolation:isolate; min-height:54px; padding:12px 30px; border-color:#8a8a8a; transition:color .45s cubic-bezier(.2,.7,.2,1),border-color .45s; }
body.theater .button::before { content:''; position:absolute; inset:0; z-index:-1; background:#fff; transform:scaleX(0); transform-origin:right; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
body.theater .button:hover { background:#000; color:#000; border-color:#fff; }
body.theater .button:hover::before { transform:scaleX(1); transform-origin:left; }
body.theater .button.primary { background:var(--ink); color:#000; }
body.theater .button.primary::before { background:#000; }
body.theater .button.primary:hover { background:var(--ink); color:#fff; border-color:#fff; }
body.theater .replay-page button { transition:background .35s,color .35s,border-color .35s,transform .35s cubic-bezier(.2,.7,.2,1); }
body.theater .replay-page button:not(:disabled):active { transform:translateY(1px); }

/* text links: a drawn underline and a small arrow */
body.theater .text-link,body.theater .back-link,body.theater .spades-replay-link,body.theater .spades-view-table { position:relative; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; transition:background-size .5s cubic-bezier(.2,.7,.2,1),color .3s; padding-bottom:3px; }
body.theater .text-link:hover,body.theater .back-link:hover,body.theater .spades-replay-link:hover,body.theater .spades-view-table:hover { background-size:0 1px; background-position:100% 100%; color:#fff; }
body.theater .text-link::after { content:'→'; display:inline-block; margin-left:.55em; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
body.theater .text-link:hover::after { transform:translateX(5px); }
body.theater .back-link::before { content:'←'; display:inline-block; margin-right:.55em; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
body.theater .back-link:hover::before { transform:translateX(-4px); }

/* a frosted header once the page has moved */
body.theater .theater-header { position:sticky; top:0; z-index:40; transition:background .5s,backdrop-filter .5s,border-color .5s,min-height .5s cubic-bezier(.2,.7,.2,1); border-bottom:1px solid transparent; }
body.theater .theater-header::before { content:""; position:absolute; inset:0 -100vmax; z-index:-1; background:rgba(0,0,0,.88); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%); border-bottom:1px solid rgba(255,255,255,.07); opacity:0; transition:opacity .5s; pointer-events:none; }
body.theater.is-scrolled .theater-header { min-height:78px; }
body.theater.is-scrolled .theater-header::before { opacity:1; }
body.theater .theater-nav a { font-size:12px; letter-spacing:.16em; text-transform:uppercase; }

/* headings: tighter, finer */
body.theater :is(.page-heading h1,.replay-heading h1) { letter-spacing:-.04em; }

/* panels and rows: a fine inner frame that appears on hover, like engraved stationery */
body.theater :is(.arcade-card,.replay-stage) { transition:border-color .5s,background .5s; }

/* a quiet ornament between home sections */

/* gentle arrival for every page */
body.theater .theater-frame { animation:zm-page-in .8s cubic-bezier(.2,.7,.2,1) backwards; }
@media(prefers-reduced-motion:reduce){ body.theater::after{ animation:none; } body.theater .theater-frame{ animation:none; } }
@media(max-width:700px){ body.theater .theater-nav a{ letter-spacing:.12em; } body.theater .button{ min-height:52px; padding:12px 24px; } }
@media(max-width:700px){ body.theater.is-scrolled .theater-header{ min-height:64px; } }
body.theater .theater-frame { overflow-x:clip; }
/* A concluded challenge says so once, quietly, under its title. */
body.theater .replay-notice { max-width:62ch; margin-top:14px; color:var(--muted); font-size:13px; line-height:1.7; }
/* The entrance can be watched again from any page. */
body.theater .footer-entrance { min-height:44px; padding:8px 0; border:0; background:none; color:var(--muted); font-size:11px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; transition:color .35s; }
body.theater .footer-entrance:hover,body.theater .footer-entrance:focus-visible { color:var(--ink); }
/* A drawn north-east arrow. The ↗ character becomes a coloured emoji on iPhones. */
body.theater { --arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
body.theater .arrow-ne { display:inline-block; flex:none; width:.72em; height:.72em; background:currentColor; -webkit-mask:var(--arrow-ne) center/contain no-repeat; mask:var(--arrow-ne) center/contain no-repeat; }
/* Symbols such as card suits stay as text, never coloured emoji, where browsers allow the choice. */
body.theater { font-variant-emoji:text; }