/* Replay modes, Arcade and the shared text motion. Black and white; Libre Baskerville for clues. */

/* ---------- mode chooser */
body.theater .mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}

body.theater .mode-switch{display:inline-flex;margin:0 0 22px;border:1px solid var(--line)}
body.theater .replay-page .mode-switch button{min-height:38px;padding:6px 16px;border:0;background:transparent;color:var(--muted);font-size:13px}
body.theater .replay-page .mode-switch button[aria-pressed=true]{background:var(--ink);color:#000}
body.theater .replay-intro-copy{color:var(--silver);max-width:62ch;margin-bottom:22px;line-height:1.8}

/* ---------- arcade */
body.theater .arcade{display:flex;flex-direction:column;gap:20px}
body.theater .arcade-intro h2{margin-bottom:12px}
body.theater .arcade-intro-line{font:400 clamp(17px,2vw,21px)/1.7 var(--display);max-width:38ch}
body.theater .arcade-facts{display:flex;gap:34px;list-style:none;padding:0;margin:24px 0 26px}
body.theater .arcade-facts b{display:block;font:400 26px/1.2 var(--display)}
body.theater .arcade-facts span{font-size:12px;color:var(--muted);letter-spacing:.06em}
body.theater .arcade-best{color:var(--silver);font-size:14px;margin-bottom:16px}
body.theater .arcade-hud{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:rgba(0,0,0,.8)}
body.theater .hud-item{display:flex;flex-direction:column;gap:3px;padding:12px 16px}
body.theater .hud-item+.hud-item{border-left:1px solid var(--line)}
body.theater .hud-item small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
body.theater .hud-item b{font:400 21px/1.2 var(--display);font-variant-numeric:tabular-nums}
body.theater .arcade-hud.is-urgent .hud-item:first-child b{animation:hud-pulse 1s ease infinite}
@keyframes hud-pulse{50%{opacity:.35}}
body.theater .arcade-board{padding:18px 20px;border:1px solid var(--line);background:rgba(0,0,0,.8);overflow-x:auto}
body.theater .board-chips{display:flex;gap:26px;margin-bottom:12px}
body.theater .board-chip{display:flex;gap:9px;align-items:baseline;border-radius:0}
body.theater .board-chip small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
body.theater .board-chip b{font:400 18px var(--display);letter-spacing:.08em}
body.theater .board-digits,body.theater .board-letters,body.theater .board-numbers{display:flex;align-items:flex-end;gap:5px;flex-wrap:nowrap}
body.theater .board-cell{display:inline-flex;align-items:center;justify-content:center;min-width:.9em;font:400 clamp(17px,2.5vw,26px)/1.3 var(--display);color:#5a5a5a;border-bottom:1px solid #444;padding:0 1px;font-variant-numeric:tabular-nums}
body.theater .board-cell.letter{min-width:1.5em;font-size:clamp(24px,3.4vw,36px)}
body.theater .board-cell.wide{min-width:2em}
body.theater .board-cell.is-found{color:var(--ink);border-bottom-color:var(--ink)}
body.theater .board-sep{font:400 clamp(17px,2.5vw,26px)/1.3 var(--display);color:var(--silver)}
body.theater .board-sep.comma{margin-right:10px}
body.theater .board-lock{font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:12px;letter-spacing:.03em}
body.theater .board-lock.is-open{color:var(--ink)}
body.theater .board-senses{display:flex;gap:18px;flex-wrap:wrap}
body.theater .board-sense{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#4a4a4a;transition:color .6s}
body.theater .board-sense.is-lit{color:var(--ink)}
body.theater .arcade-card{border:1px solid var(--line);background:rgba(0,0,0,.8);padding:32px;min-height:220px;transition:border-color .4s}
body.theater .arcade-card.is-solved{border-color:#fff}
body.theater .arcade-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
body.theater .arcade-card h3{font:400 clamp(26px,3vw,36px)/1.3 var(--display);margin-bottom:10px}
body.theater .arcade-lines{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
body.theater .arcade-line{font:400 clamp(22px,3.3vw,38px)/1.45 var(--display);letter-spacing:.01em;overflow-wrap:anywhere;margin:0}
body.theater .arcade-lines.small .arcade-line{font-size:clamp(14px,1.6vw,17px);line-height:1.9;letter-spacing:.06em}
body.theater .arcade-whisper{color:var(--silver);font-style:italic;font-family:var(--display);font-size:15px;margin:6px 0 4px}
body.theater .arcade-answer{margin-top:22px!important}
body.theater .arcade-input-row{display:flex;gap:10px}
body.theater .replay-page .arcade-input-row input{flex:1;font:400 22px var(--display);letter-spacing:.12em;text-transform:uppercase}
body.theater .replay-page .arcade-input-row button{flex:none;min-width:96px}
body.theater .arcade-feedback{min-height:1.6em;margin-top:10px;color:var(--silver);font-size:14px}
body.theater .arcade-actions{display:flex;flex-direction:column;gap:14px}
body.theater .replay-page .arcade-call{align-self:flex-start}
body.theater .replay-page .linkish{border:0!important;background:none!important;padding:8px 0!important;min-height:0!important;color:var(--silver)!important;text-decoration:underline;text-underline-offset:4px;font-size:13px}
body.theater .replay-page .arcade-restart{align-self:flex-start;margin-top:8px}
body.theater .last-word,body.theater .vault-last-word{font-style:italic}

/* visuals */
body.theater .av-cuts{display:flex;align-items:stretch;height:84px;margin-bottom:22px;max-width:420px}
body.theater .av-frame{flex:1;background:linear-gradient(180deg,#1b1b1b,#0b0b0b);opacity:0;animation:zm-ink .5s ease forwards;animation-delay:calc(var(--i) * 420ms)}
body.theater .av-cut{width:3px;background:#fff;opacity:0;animation:av-cut .5s ease forwards;animation-delay:calc(var(--i) * 420ms + 360ms)}
@keyframes av-cut{0%{opacity:0}40%{opacity:1;box-shadow:0 0 14px #fff}100%{opacity:.85}}
body.theater .av-card{display:inline-flex;align-items:center;justify-content:center;width:120px;height:170px;margin-bottom:22px;background:#f7f7f5;color:#000;border-radius:8px;font:400 44px var(--display);animation:av-deal .7s cubic-bezier(.2,.7,.2,1) both}
body.theater .av-card.small{width:92px;height:130px;font-size:34px;margin:0;animation-delay:calc(var(--i,0) * 260ms)}
body.theater .av-pair{display:flex;gap:16px;margin-bottom:22px}
@keyframes av-deal{from{opacity:0;transform:translateY(-14px) rotate(-7deg)}to{opacity:1;transform:none}}
body.theater .av-watch{width:120px;color:var(--ink);margin-bottom:18px}
body.theater .av-watch .av-hour{transform-origin:50px 50px;animation:av-hour 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes av-hour{from{transform:rotate(-200deg)}}
body.theater .av-taps{position:relative;width:110px;height:156px;margin-bottom:20px;border-radius:8px;border:1px solid #555;background:repeating-linear-gradient(45deg,#111 0 6px,#161616 6px 12px)}
body.theater .av-tap{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;margin:-7px;border-radius:50%;background:#fff;opacity:0;animation:av-tap .5s ease forwards;animation-delay:calc(var(--i) * 360ms + 300ms)}
@keyframes av-tap{0%{opacity:0;transform:scale(2.2)}50%{opacity:1}100%{opacity:.85;transform:scale(1)}}
body.theater .av-cross{display:grid;grid-template-columns:repeat(5,34px);grid-auto-rows:46px;gap:5px;margin-bottom:22px}
body.theater .av-cell{border-radius:4px}
body.theater .av-cell.back{background:repeating-linear-gradient(45deg,#1b1b1b 0 5px,#252525 5px 10px);border:1px solid #444}
body.theater .av-cell.face{display:flex;align-items:center;justify-content:center;background:#f7f7f5;color:#000;font:400 15px var(--display)}
body.theater .av-cell.back,body.theater .av-cell.face{opacity:0;animation:zm-ink .4s ease forwards;animation-delay:calc(var(--i) * 140ms)}

/* vault */
body.theater .arcade-vault{position:relative;height:clamp(260px,42vw,380px);border:1px solid var(--line);background:#000}
body.theater .vault-centre{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
body.theater .vault-logo{display:block;width:clamp(40px,8vw,58px);height:auto;opacity:.88}
body.theater .vault-corner-card{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px}
body.theater .vault-corner-card[hidden]{display:none}
body.theater .vault-corner-card.top-left{left:5%;top:7%}body.theater .vault-corner-card.top-right{right:5%;top:7%}body.theater .vault-corner-card.bottom-left{left:5%;bottom:7%}body.theater .vault-corner-card.bottom-right{right:5%;bottom:7%}
body.theater .vault-suit{font-size:clamp(40px,6vw,64px);line-height:1}
body.theater .vault-number{font:400 20px var(--display);margin-top:-6px}
body.theater .vault-dashes{display:flex;gap:5px}
body.theater .vault-dashes i{width:14px;height:2px;background:#666}
body.theater .vault-dashes i.is-lit{background:#fff;box-shadow:0 0 8px #fff}
body.theater .vault-last-word{position:absolute;left:0;right:0;bottom:16%;text-align:center;font:italic 400 18px var(--display);color:var(--silver)}

/* senses */
body.theater .memory-text p{font:400 clamp(16px,1.8vw,19px)/1.85 var(--display);margin-bottom:12px}
body.theater .memory-bar{height:2px;background:#222;margin-top:18px;overflow:hidden}
body.theater .memory-bar i{display:block;height:100%;background:#fff;transform-origin:left}
body.theater .memory-bar i.is-draining{animation:memory-drain var(--dur,22s) linear forwards}
@keyframes memory-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
body.theater .accusation-board{border:1px solid var(--line);padding:24px;background:rgba(0,0,0,.8)}

/* result */
body.theater .arcade-result{text-align:left}
body.theater .rank-card{width:132px;height:188px;perspective:900px;margin-bottom:26px}
body.theater .rank-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
body.theater .rank-card.is-turned .rank-inner{transform:rotateY(180deg)}
body.theater .rank-back,body.theater .rank-face{position:absolute;inset:0;border-radius:9px;backface-visibility:hidden}
body.theater .rank-back{background:repeating-linear-gradient(45deg,#121212 0 7px,#1d1d1d 7px 14px);border:1px solid #555}
body.theater .rank-face{display:flex;align-items:center;justify-content:center;transform:rotateY(180deg);background:#f7f7f5;color:#000;font:400 46px var(--display)}
body.theater .arcade-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin:22px 0 26px}
body.theater .arcade-stats>div{padding:12px 16px}
body.theater .arcade-stats>div+div{border-left:1px solid var(--line)}
body.theater .arcade-stats dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
body.theater .arcade-stats dd{margin:4px 0 0;font:400 21px var(--display)}
body.theater .arcade-breakdown{margin:6px 0 10px}
body.theater .arcade-breakdown p{margin-top:12px;color:var(--silver);line-height:1.8}

@media(max-width:720px){

  body.theater .arcade-hud,body.theater .arcade-stats{grid-template-columns:repeat(2,1fr)}
  body.theater .hud-item:nth-child(3),body.theater .arcade-stats>div:nth-child(3){border-left:0}
  body.theater .hud-item:nth-child(n+3),body.theater .arcade-stats>div:nth-child(n+3){border-top:1px solid var(--line)}
  body.theater .arcade-card{padding:22px 18px;min-height:0}
  body.theater .board-cell{font-size:16px}
  body.theater .board-cell.letter{font-size:24px}
  body.theater .board-sep{font-size:16px}
  body.theater .board-digits{gap:2px}
  body.theater .arcade-facts{gap:22px}
  body.theater .av-cross{grid-template-columns:repeat(5,28px);grid-auto-rows:38px}
}
@media(prefers-reduced-motion:reduce){
  body.theater .zm-word,body.theater .zm-char,body.theater .av-frame,body.theater .av-cut,body.theater .av-tap,body.theater .av-cell{opacity:1!important;transform:none!important;filter:none!important}
}

body.theater .replay-page .arcade-input-row input.is-short{flex:0 0 auto;width:7.5ch;text-align:center;letter-spacing:.2em;font-size:26px}
body.theater .arcade-start{margin-bottom:14px}
body.theater .board-cell{min-height:1.3em}
@media(max-width:720px){
  body.theater .arcade-board{padding:14px 12px;scrollbar-width:none}
  body.theater .board-chips{flex-wrap:wrap;gap:6px 18px}
  body.theater .board-chip b{font-size:16px}
  body.theater .board-digits{gap:1px}
  body.theater .board-digits .board-cell{min-width:.64em;font-size:19px;padding:0}
  body.theater .board-digits .board-sep{font-size:19px}
  body.theater .board-sep.comma{margin-right:6px}
}
/* Puzzle 05: the accusation is written, as it was in the original form. */
body.theater .accuse-question{display:block;margin:0 0 8px;font:400 19px/1.4 var(--display);color:var(--ink)}
body.theater .accuse-question:not(:first-child){margin-top:20px}
body.theater .replay-page .accuse-input{display:block;width:100%;max-width:520px}
body.theater .accusation-board>.primary{margin-top:24px}