/* 学級裁判 — UI styles. Layout scales with #app font-size (set by JS from stage width). */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Nunito:wght@600;800&display=swap');

:root{
  --navy:#0e1a33; --navy-2:#162447; --navy-3:#1f3160; --ink:#0a1226;
  --chalk:#f6f2e7; --chalk-dim:#c9c4b6; --paper:#fbf7ea; --paper-line:#d9d0b8;
  --gold:#f3c34f; --gold-2:#ffd97a; --gold-dk:#a67c12;
  --red:#e2453f; --red-dk:#8f1d19;
  --board:#2d5a4e; --board-2:#234a40;
  --ok:#5ac47a;
  --shadow:0 .4em 1.2em rgba(0,0,0,.45);
  --font-jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
  --font-en:"Nunito","Zen Maru Gothic","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink);color:var(--chalk);font-family:var(--font-jp);overflow:hidden;touch-action:manipulation}
html[lang="en"] body{font-family:var(--font-en)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold-2);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Stage frame (16:9, letterboxed) ---- */
#app{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1280px;height:720px;overflow:hidden;background:var(--navy);font-size:20px;box-shadow:0 0 0 100vmax var(--ink);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#app input,#app textarea{user-select:text;-webkit-user-select:text}
#stage,#ui,#overlays{position:absolute;inset:0}
#stage canvas{display:block;width:100%!important;height:100%!important}
#ui{pointer-events:none}
#ui > *{pointer-events:auto}
#overlays{pointer-events:none;z-index:20}
#overlays > *{pointer-events:auto}
#toasts{position:absolute;left:50%;top:3.2em;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;gap:.4em;align-items:center;pointer-events:none}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:max(2.4em,44px);min-width:max(2.4em,44px);padding:.35em 1em;border-radius:.6em;border:2px solid rgba(255,255,255,.18);background:var(--navy-3);color:var(--chalk);font-weight:700;font-size:1em;line-height:1.2;box-shadow:0 .15em 0 rgba(0,0,0,.35);transition:transform .08s,filter .12s;white-space:nowrap}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(.1em);box-shadow:none}
.btn[disabled]{opacity:.45;cursor:default;filter:none}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--ink);border-color:var(--gold-dk)}
.btn-red{background:linear-gradient(180deg,#ff6b63,var(--red));color:#fff;border-color:var(--red-dk)}
.btn-ghost{background:rgba(14,26,51,.7);border-color:rgba(255,255,255,.25)}
.btn-icon{min-width:2.4em;padding:.3em .6em}
.btn-sm{font-size:.85em}

/* ---- Top bar (blackboard) ---- */
#topbar{position:absolute;left:0;right:0;top:0;height:max(2.6em,50px);display:flex;align-items:center;gap:.6em;padding:0 .8em;background:linear-gradient(180deg,var(--board),var(--board-2));border-bottom:.28em solid #9c7a4a;box-shadow:0 .2em .6em rgba(0,0,0,.4);font-size:.9em}
#topbar .ep{font-weight:900;color:var(--gold-2);letter-spacing:.04em;font-size:1.05em}
#topbar .phase{padding:.15em .7em;border-radius:1em;background:rgba(255,255,255,.12);border:1px dashed rgba(255,255,255,.4);color:var(--chalk);font-weight:700}
#topbar .spacer{flex:1}
#tb-trust{display:flex;align-items:center;gap:.4em;padding:.15em .6em;border-radius:1em;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.25);font-size:.85em;position:relative;color:var(--chalk)}
#tb-trust .lbl{font-weight:700;white-space:nowrap}
#tb-trust .segs{display:flex;gap:2px}
#tb-trust .segs i{display:block;width:.55em;height:.9em;border-radius:2px;background:rgba(255,255,255,.18)}
#tb-trust .segs i.on{background:var(--gold-2);box-shadow:0 0 .3em rgba(255,215,122,.6)}
#tb-trust.low .segs i.on{background:var(--red)}
#tb-trust .val{font-variant-numeric:tabular-nums;opacity:.8;font-size:.85em}
#tb-trust.hit{animation:trust-hit .5s ease-out}
@keyframes trust-hit{0%{background:var(--red);transform:scale(1.08)}100%{background:rgba(0,0,0,.25);transform:none}}
#tb-trust .dmg{position:absolute;right:.4em;top:100%;color:var(--red);font-weight:900;font-size:1.3em;text-shadow:0 0 .3em #000;animation:dmg-float 1.2s ease-out forwards;pointer-events:none}
@keyframes dmg-float{0%{transform:translateY(0);opacity:1}100%{transform:translateY(1.4em);opacity:0}}
.reduce-motion #tb-trust.hit,.reduce-motion #tb-trust .dmg{animation:none}
#gameover{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:1em;background:rgba(10,8,20,.88);color:var(--chalk);z-index:40;padding:2em}
#gameover h2{margin:0;font-size:2em;color:var(--red);letter-spacing:.08em}
#gameover p{margin:0;max-width:28em;line-height:1.6}
@media (max-width:700px){#tb-trust .lbl{display:none}}
#topbar .btn{min-height:max(2.1em,40px);font-size:.95em}

/* ---- Dialogue box (notebook) ---- */
#dialogue{position:absolute;left:1.2em;right:1.2em;bottom:.9em;min-height:7.2em;display:flex;flex-direction:column}
#dialogue .nameplate{align-self:flex-start;transform:skewX(-10deg);background:var(--gold);color:var(--ink);padding:.15em 1.1em .15em .9em;border-radius:.3em .9em .3em .3em;font-weight:900;font-size:1em;margin-left:.6em;margin-bottom:-.5em;position:relative;z-index:2;box-shadow:0 .15em .4em rgba(0,0,0,.4);min-width:5em;text-align:center}
#dialogue .nameplate > span{display:inline-block;transform:skewX(10deg)}
#dialogue .nameplate.narr{visibility:hidden}
#dialogue .box{position:relative;flex:1;background-color:var(--paper);color:#1f2433;border-radius:.7em;padding:1em 7.5em 1em 1.3em;box-shadow:var(--shadow);border:.2em solid #d5c9a6;background-image:repeating-linear-gradient(180deg,transparent 0 1.55em,rgba(60,90,160,.14) 1.55em 1.6em);font-size:1.1em;line-height:1.55;min-height:max(6.6em,160px)}
#dialogue .box.narr{background-color:#1e2f57;background-image:none;color:var(--chalk);border-color:#3b5390}
#dialogue .text{white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;line-break:strict;min-height:3em}
#dialogue .cursor{position:absolute;right:8em;bottom:.6em;font-size:.8em;opacity:.7;animation:blink 1s steps(2) infinite}
#dialogue .actions{position:absolute;right:.7em;top:.5em;bottom:.5em;display:flex;flex-direction:column;justify-content:center;gap:.3em}
#dialogue .actions .btn{font-size:.82em;min-width:6.2em;min-height:max(2.2em,44px);padding:.2em .8em}
@keyframes blink{to{opacity:0}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes slide-up{from{transform:translateY(.6em);opacity:0}to{transform:none;opacity:1}}
.pop{animation:pop .22s ease-out}
.reduce-motion .pop,.reduce-motion .slide-up{animation:none}
.slide-up{animation:slide-up .18s ease-out}

/* ---- Statement panel (left) ---- */
#statements{position:absolute;left:1.2em;top:max(3.4em,58px);width:15.5em;max-height:calc(100% - 12.5em);display:flex;flex-direction:column;gap:.45em;font-size:.85em}
#statements .title{font-weight:900;color:var(--gold-2);font-size:.95em;letter-spacing:.03em;text-shadow:0 1px 2px #000}
#statements .list{display:flex;flex-direction:column;gap:.35em;overflow:auto;padding-right:.2em}
#statements .st{display:flex;align-items:center;gap:.5em;text-align:left;background:rgba(14,26,51,.82);border:2px solid rgba(255,255,255,.2);border-radius:.5em;padding:.4em .6em;color:var(--chalk);min-height:max(2.6em,44px);line-height:1.3;transition:border-color .12s,background .12s}
#statements .st .num{flex:none;width:1.7em;height:1.7em;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-weight:900;font-size:.9em}
#statements .st .lbl{flex:1;font-size:.9em;opacity:.9;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#statements .st .mark{flex:none;font-size:.8em;opacity:.8}
#statements .st.active{border-color:var(--gold);background:rgba(243,195,79,.18);box-shadow:0 0 0 2px rgba(243,195,79,.35)}
#statements .st.active .num{background:var(--gold);color:var(--ink)}
#statements .st.revised .num{background:var(--ok);color:var(--ink)}
#statements .st.solved{opacity:.75;border-style:dashed}
#statements .st.solved .num{background:var(--red);color:#fff}
#statements .nav{display:flex;gap:.4em}
#statements .nav .btn{flex:1;font-size:.9em}

/* ---- Witness banner ---- */
#banner{position:absolute;left:50%;top:max(3.1em,54px);transform:translateX(-50%);background:rgba(14,26,51,.85);border:2px solid var(--gold);color:var(--gold-2);padding:.3em 1.2em;border-radius:2em;font-weight:900;font-size:.9em;white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}

/* ---- Investigation ---- */
.hotspot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.2em;background:none;border:0;padding:.3em;color:var(--chalk);min-width:max(3em,44px);min-height:max(3em,44px)}
.hotspot .dot{width:2.2em;height:2.2em;border-radius:50%;border:3px solid var(--gold-2);background:rgba(243,195,79,.35);box-shadow:0 0 .8em var(--gold);animation:pulse 1.6s ease-in-out infinite;display:grid;place-items:center;font-weight:900;color:#fff}
.hotspot .tag{background:rgba(14,26,51,.85);padding:.1em .6em;border-radius:1em;font-size:.8em;font-weight:700;white-space:nowrap;border:1px solid rgba(255,255,255,.3)}
.hotspot.done .dot{animation:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.15);box-shadow:none}
.hotspot.done .tag{opacity:.75}
.reduce-motion .hotspot .dot{animation:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
#people{position:absolute;left:1.2em;top:max(3.4em,58px);display:flex;flex-direction:column;gap:.4em;font-size:.9em}
#people .title{font-weight:900;color:var(--gold-2);font-size:.9em;text-shadow:0 1px 2px #000}
#people .btn{justify-content:flex-start;min-width:9em}
#people .btn .sw{width:.9em;height:.9em;border-radius:50%;flex:none}
#people .btn.done{opacity:.7}
#invhint{position:absolute;left:50%;bottom:1em;transform:translateX(-50%);background:rgba(14,26,51,.8);padding:.3em 1em;border-radius:1em;font-size:.85em;border:1px solid rgba(255,255,255,.25)}
#proceed{position:absolute;right:1.2em;bottom:1em}

/* ---- Overlays (generic panel) ---- */
.overlay{position:absolute;inset:0;background:rgba(5,10,24,.72);display:flex;align-items:center;justify-content:center;padding:1em;z-index:25}
.panel{background:var(--navy-2);border:.2em solid #3b5390;border-radius:1em;box-shadow:var(--shadow);width:min(100%,52em);max-height:100%;display:flex;flex-direction:column;overflow:hidden;font-size:.95em}
.panel .head{display:flex;align-items:center;gap:.6em;padding:.6em .9em;background:linear-gradient(180deg,var(--board),var(--board-2));border-bottom:.22em solid #9c7a4a}
.panel .head h2{margin:0;font-size:1.1em;flex:1;color:var(--gold-2)}
.panel .body{padding:.9em;overflow:auto;flex:1;min-height:0;word-break:keep-all;overflow-wrap:anywhere}
.panel .foot{display:flex;gap:.5em;justify-content:flex-end;padding:.6em .9em;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.tabs{display:flex;gap:.4em;padding:.6em .9em 0}
.tabs .btn{border-radius:.6em .6em 0 0;background:rgba(255,255,255,.08);min-height:max(2.2em,40px)}
.tabs .btn[aria-selected="true"]{background:var(--gold);color:var(--ink);border-color:var(--gold-dk)}

/* Evidence file */
.ev-layout{display:grid;grid-template-columns:15em 1fr;gap:.8em;min-height:15em}
.ev-list{display:flex;flex-direction:column;gap:.35em;overflow:auto;max-height:22em;padding-right:.2em}
.ev-item{display:flex;align-items:center;gap:.5em;text-align:left;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.15);border-radius:.5em;padding:.4em .5em;color:var(--chalk);min-height:max(2.8em,44px)}
.ev-item .ic{flex:none;width:2em;height:2em;border-radius:.4em;background:var(--paper);display:grid;place-items:center}
.ev-item .ic svg{width:1.5em;height:1.5em}
.ev-item .nm{flex:1;font-weight:700;font-size:.92em;line-height:1.25}
.ev-item.active{border-color:var(--gold);background:rgba(243,195,79,.18)}
.ev-item.new .nm::after{content:" ●";color:var(--gold-2)}
.ev-detail{background-color:var(--paper);color:#1f2433;border-radius:.6em;padding:.9em 1em;background-image:repeating-linear-gradient(180deg,transparent 0 1.55em,rgba(60,90,160,.12) 1.55em 1.6em);line-height:1.55;font-size:1em;overflow:auto;min-height:12em}
.ev-detail p{white-space:pre-line}
.ev-detail h3{margin:0 0 .4em;font-size:1.15em;color:var(--navy)}
.ev-detail .secret{display:inline-block;font-size:.8em;background:var(--red);color:#fff;padding:.1em .6em;border-radius:1em;margin-bottom:.4em}
.ev-detail p{margin:0;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.ev-empty{opacity:.7;padding:1em}
@media (max-width:0px){.ev-layout{grid-template-columns:1fr}}
.panel.narrow .ev-layout{grid-template-columns:1fr}

/* Media (camera log) */
.media{background:#0b0f1a;border-radius:.6em;padding:.8em;color:#d6f5e6;font-family:ui-monospace,Menlo,Consolas,monospace}
.media .rec{display:grid;grid-template-columns:4.5em 9em 1fr;gap:.4em;padding:.3em .4em;border-bottom:1px dashed rgba(255,255,255,.15);align-items:center}
.media .rec.hi{background:rgba(226,69,63,.25)}
.media .cam-note{font-family:var(--font-jp);font-size:.85em;opacity:.8;margin-bottom:.6em}
html[lang="en"] .media .cam-note{font-family:var(--font-en)}
.media .door{position:relative;height:5em;background:#111a2e;border-radius:.4em;margin-bottom:.7em;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.media .door .frame{position:absolute;left:50%;top:.5em;bottom:.5em;width:3em;transform:translateX(-50%);border:2px solid #9c7a4a;border-radius:.2em;background:#2b2417}
.media .door .fig{position:absolute;top:1.2em;width:1.6em;height:2.8em;border-radius:.8em .8em .3em .3em;transition:left .6s ease}
.media .door .stamp{position:absolute;right:.5em;top:.3em;font-size:.8em;color:#ff5c5c}

/* Confirm present */
.confirm-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:.8em;align-items:stretch}
.confirm-grid .card{background:var(--paper);color:#1f2433;border-radius:.6em;padding:.8em;line-height:1.5}
.confirm-grid .card .cap{font-size:.8em;font-weight:900;color:var(--gold-dk);margin-bottom:.3em}
.confirm-grid .vs{display:grid;place-items:center;font-weight:900;color:var(--gold-2);font-size:1.5em}
.panel.narrow .confirm-grid{grid-template-columns:1fr}

/* Log */
.log-list{display:flex;flex-direction:column;gap:.5em}
.log-item{display:grid;grid-template-columns:6em 1fr;gap:.6em;padding:.4em .5em;border-bottom:1px solid rgba(255,255,255,.1)}
.log-item .who{font-weight:900;color:var(--gold-2);font-size:.9em}
.log-item .txt{white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;line-height:1.45}

/* Settings */
.set-row{display:grid;grid-template-columns:11em 1fr;gap:.8em;align-items:center;padding:.55em 0;border-bottom:1px solid rgba(255,255,255,.1)}
.set-row label{font-weight:700}
.seg{display:flex;gap:.3em;flex-wrap:wrap}
.seg .btn{min-height:2.2em;font-size:.9em}
.seg .btn[aria-pressed="true"]{background:var(--gold);color:var(--ink);border-color:var(--gold-dk)}
input[type=range]{width:100%;accent-color:var(--gold)}

/* Timeline */
#timeline{position:absolute;left:1.2em;top:max(3.4em,58px);width:24em;max-height:calc(100% - 4.4em);display:flex;flex-direction:column;gap:.4em;font-size:.85em;background:rgba(14,26,51,.85);border:2px solid rgba(255,255,255,.2);border-radius:.8em;padding:.7em}
#timeline .title{font-weight:900;color:var(--gold-2)}
#timeline .help{font-size:.85em;opacity:.85}
#timeline .cards{display:flex;flex-direction:column;gap:.35em;overflow:auto}
.tcard{display:flex;align-items:center;gap:.5em;background:var(--paper);color:#1f2433;border-radius:.5em;padding:.4em .5em;border:2px solid #d5c9a6;cursor:grab;user-select:none;touch-action:none}
.tcard.dragging{opacity:.5}
.tcard.over{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.tcard .idx{flex:none;width:1.7em;height:1.7em;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:900;font-size:.9em}
.tcard .lbl{flex:1;line-height:1.3;font-size:.92em}
.tcard .mv{display:flex;flex-direction:column;gap:.15em}
.tcard .mv .btn{min-height:max(1.7em,30px);min-width:max(2.4em,44px);padding:.1em .4em;font-size:.75em;background:var(--navy-3)}
.tcard .tm{font-weight:900;color:var(--gold-dk);min-width:3em;text-align:right;font-family:ui-monospace,monospace}
#timeline .foot{display:flex;gap:.4em;justify-content:flex-end}
.replay-card{position:absolute;left:50%;top:3.6em;transform:translateX(-50%);background:var(--paper);color:#1f2433;border-radius:.7em;padding:.8em 1.2em;box-shadow:var(--shadow);border:.2em solid var(--gold);display:grid;grid-template-columns:auto 1fr;gap:.2em .8em;font-size:.95em;min-width:20em;max-width:60%}
.replay-card .k{font-weight:900;color:var(--gold-dk);font-size:.85em}
.replay-card .v{font-weight:700}
.replay-card .v.big{font-size:1.4em;font-family:ui-monospace,monospace}

/* Deduce */
#deduce{position:absolute;left:1.2em;top:max(3.4em,58px);width:26em;max-height:calc(100% - 4.4em);display:flex;flex-direction:column;gap:.5em;font-size:.9em;background:rgba(14,26,51,.88);border:2px solid var(--gold);border-radius:.8em;padding:.8em;overflow:auto}
#deduce .q{font-weight:900;color:var(--gold-2);line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
#deduce .opts{display:flex;flex-direction:column;gap:.35em}
#deduce .opts .btn{justify-content:flex-start;text-align:left;white-space:normal;line-height:1.3}
#deduce .step{font-size:.8em;opacity:.8}

/* Cut-in (objection) */
#cutin{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:28}
#cutin .band{position:absolute;left:-10%;right:-10%;height:34%;background:linear-gradient(90deg,var(--red-dk),var(--red) 30%,var(--red) 70%,var(--red-dk));transform:skewY(-6deg);box-shadow:0 0 3em rgba(0,0,0,.6)}
#cutin .word{position:relative;font-size:4.2em;font-weight:900;color:#fff;letter-spacing:.06em;text-shadow:.08em .08em 0 var(--ink),0 0 .5em rgba(0,0,0,.6);transform:rotate(-6deg);font-family:var(--font-jp)}
#cutin .word.small{font-size:3em}
#cutin.anim .band{animation:band .55s cubic-bezier(.2,.8,.2,1) both}
#cutin.anim .word{animation:word .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes band{from{transform:skewY(-6deg) scaleX(0)}to{transform:skewY(-6deg) scaleX(1)}}
@keyframes word{0%{transform:rotate(-6deg) scale(2.4);opacity:0}60%{transform:rotate(-6deg) scale(.95);opacity:1}100%{transform:rotate(-6deg) scale(1)}}
.reduce-motion #cutin.anim .band,.reduce-motion #cutin.anim .word{animation:none}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:27}
#flash.on{animation:flash .35s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.shake{animation:shake .4s ease-in-out}
@keyframes shake{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% - 8px),calc(-50% + 4px))}40%{transform:translate(calc(-50% + 8px),calc(-50% - 4px))}60%{transform:translate(calc(-50% - 6px),calc(-50% + 2px))}80%{transform:translate(calc(-50% + 4px),-50%)}}

/* Evidence show (during success) */
#evshow{position:absolute;right:1.4em;top:3.6em;width:15em;background:var(--paper);color:#1f2433;border:.25em solid var(--gold);border-radius:.7em;padding:.7em;box-shadow:var(--shadow);z-index:12}
#evshow .nm{font-weight:900;color:var(--navy);margin-bottom:.3em}
#evshow .ds{font-size:.82em;line-height:1.45;white-space:pre-wrap;max-height:9em;overflow:auto}

/* Toast */
.toast{background:var(--gold);color:var(--ink);padding:.4em 1.1em;border-radius:2em;font-weight:900;box-shadow:var(--shadow);animation:slide-up .2s ease-out;font-size:.9em;display:flex;align-items:center;gap:.5em}
.toast.info{background:var(--navy-3);color:var(--chalk);border:1px solid rgba(255,255,255,.3)}

/* Title */
#title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2em;background:radial-gradient(ellipse at 50% 30%,rgba(31,49,96,.55) 0%,rgba(14,26,51,.82) 60%,rgba(8,15,32,.95) 100%);z-index:15}
#title .board{background:linear-gradient(180deg,var(--board),var(--board-2));border:.5em solid #9c7a4a;border-radius:.4em;padding:1.2em 2.4em;box-shadow:var(--shadow);text-align:center;position:relative}
#title .board::after{content:"";position:absolute;left:10%;right:10%;bottom:-.9em;height:.4em;background:#7d5f36;border-radius:.2em}
#title h1{margin:0;font-size:3.2em;color:var(--chalk);letter-spacing:.08em;text-shadow:0 0 .2em rgba(255,255,255,.35);font-weight:900}
#title .tag{font-size:1.1em;color:var(--gold-2);margin-top:.2em;font-weight:700}
#title .sub{font-size:1em;color:var(--chalk-dim);margin-top:.4em}
#title .menu{display:flex;gap:.8em;flex-wrap:wrap;justify-content:center}
#title .menu .btn{font-size:1.1em;min-width:9em}
#title .foot{position:absolute;bottom:.8em;font-size:.75em;opacity:.7;text-align:center;padding:0 1em}
.pencil-deco{position:absolute;width:26em;height:1.2em;background:linear-gradient(90deg,#f5d24a 0 88%,#f2c9a0 88% 94%,#333 94%);border-radius:.2em;transform:rotate(-18deg);opacity:.25;pointer-events:none}
#langpick .panel{width:min(100%,28em)}
#langpick .opts{display:flex;gap:.8em;justify-content:center;padding:.5em}
#langpick .opts .btn{font-size:1.2em;min-width:8em}

/* End */
#endcard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;background:rgba(5,10,24,.85);z-index:15;text-align:center}
#endcard h2{font-size:2.4em;margin:0;color:var(--gold-2)}

/* Rotate notice */
#rotate{position:fixed;inset:0;background:var(--ink);z-index:100;display:flex;align-items:center;justify-content:center;color:var(--chalk);text-align:center;padding:2em}
.rotate-icon{font-size:4em;color:var(--gold)}
.rotate-title{font-size:1.4em;font-weight:900;margin:.4em 0}
#boot-error{position:fixed;inset:0;background:var(--ink);z-index:101;display:flex;align-items:center;justify-content:center;padding:2em;text-align:center}
.boot-card{background:var(--navy-2);padding:2em;border-radius:1em;max-width:32em;line-height:1.6}

/* Narrow (phone landscape ~ 667x375) tweaks in em space: nothing extra needed; panels use .narrow */

/* ---- Short viewports (phone landscape, ~375-480px tall): actions become a row above the box ---- */
@media (max-height:480px){
  #dialogue .box{padding-right:1.3em;min-height:max(4.6em,92px)}
  #dialogue .cursor{right:1em}
  #dialogue .actions{position:absolute;right:.4em;top:auto;bottom:calc(100% + .35em);flex-direction:row;gap:.35em}
  #dialogue .nameplate{margin-bottom:-.5em}
  #statements{max-height:calc(100% - 205px)}
  #statements .nav{display:none}
  #people .btn{min-height:44px}
  #timeline{max-height:calc(100% - 66px)}
  #deduce{max-height:calc(100% - 66px)}
  #banner{font-size:.8em}
}

/* evidence examine (pseudo-3D viewer) */
.ev-examine-row{display:flex;align-items:center;gap:.6em;margin-top:.8em}
.ev-clue-done{font-size:.85em;color:var(--board);font-weight:700}
.ev-3d{background:#1b2540;border-radius:.6em;margin:.4em 0;overflow:hidden}
.ev-3d canvas:focus-visible{outline:3px solid var(--gold-2)}
.ev-clues{margin:.4em 0;padding-left:1.2em;font-size:.9em}
.ev-clues li{margin:.2em 0;color:#7a7a7a}
.ev-clues li.found{color:#1f2433;font-weight:700}

/* publisher splash */
#splash{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:#0b1226;color:#fff;animation:splash-in .5s ease-out both}
#splash .inner{display:flex;flex-direction:column;align-items:center;gap:.5em;animation:splash-rise 2.6s ease-out both}
#splash .mark{width:4.2em;height:4.2em;color:var(--gold)}
#splash .logo{max-width:40%;max-height:35%;object-fit:contain}
#splash .name{font-size:1.9em;font-weight:900;letter-spacing:.12em;font-family:"Trebuchet MS",Verdana,system-ui,sans-serif}
#splash .presents{font-size:.85em;letter-spacing:.35em;opacity:.7;text-transform:uppercase}
#splash.out{animation:splash-out .45s ease-in both}
#splash.still,#splash.still .inner{animation:none}
@keyframes splash-in{from{opacity:0}to{opacity:1}}
@keyframes splash-out{from{opacity:1}to{opacity:0}}
@keyframes splash-rise{0%{opacity:0;transform:translateY(.6em)}18%{opacity:1;transform:none}85%{opacity:1}100%{opacity:1}}

/* illustrated info card */
.info-card{width:min(100%,46em)}
.card-lead{margin:0 0 .6em;opacity:.85}
.card-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em}
.card-step{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:.6em;padding:.5em;display:flex;flex-direction:column;gap:.3em;align-items:center;text-align:center;position:relative}
.card-step .pic{width:100%;aspect-ratio:4/3;background:#fbf8f0;border-radius:.4em;overflow:hidden}
.card-step .pic svg{width:100%;height:100%;display:block}
.card-step .num{position:absolute;left:.4em;top:.4em;width:1.5em;height:1.5em;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:900;display:grid;place-items:center;font-size:.85em}
.card-step .txt{font-size:.85em;line-height:1.4}
@media (max-width:700px),(max-height:480px){.card-steps{grid-template-columns:repeat(2,1fr)}.card-step .txt{font-size:.8em}}

/* people faces */
.ic.face,img.ic.face{width:2.2em;height:2.2em;border-radius:50%;object-fit:cover;background:#fff;border:2px solid rgba(255,255,255,.6);padding:0;flex:none}
.ev-item .ic.face{width:2.4em;height:2.4em}
.person-head{display:flex;align-items:center;gap:.7em;margin-bottom:.5em}
.person-head h3{margin:0}
.face-lg{width:4.6em;height:4.6em;border-radius:50%;object-fit:cover;background:#fff;border:3px solid var(--gold);box-shadow:0 .15em .5em rgba(0,0,0,.25);flex:none}

/* episode picker on the title */
.ep-picker{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.ep-tab{display:flex;flex-direction:column;align-items:center;gap:.1em;min-width:11em;padding:.5em .9em;border-radius:.6em;border:2px solid rgba(255,255,255,.35);background:rgba(10,20,45,.55);color:var(--chalk);cursor:pointer;font:inherit}
.ep-tab .n{font-weight:900;color:var(--gold-2)}
.ep-tab .s{font-size:.85em;opacity:.9}
.ep-tab.active{border-color:var(--gold);background:rgba(243,195,79,.18);box-shadow:0 0 .6em rgba(243,195,79,.35)}
#endcard .menu{display:flex;gap:.8em;flex-wrap:wrap;justify-content:center}

/* statements header progress */
#statements .title{display:flex;justify-content:space-between;align-items:center;gap:.5em}
#statements .title .prog{font-size:.85em;color:var(--gold-2);font-weight:900}
/* evidence gained card */
#gained{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:70;background:linear-gradient(180deg,var(--board),var(--board-2));border:.28em solid var(--gold);border-radius:.8em;padding:.6em 1.2em;box-shadow:0 .4em 1.2em rgba(0,0,0,.5);color:var(--chalk);min-width:14em;text-align:center;pointer-events:none}
#gained .cap{font-size:.8em;letter-spacing:.2em;color:var(--gold-2);font-weight:900}
#gained .row{display:flex;align-items:center;justify-content:center;gap:.6em;font-size:1.15em;margin-top:.2em}
#gained .row .ic{width:2em;height:2em;display:grid;place-items:center;background:var(--paper);border-radius:.4em}
#gained .row .ic svg{width:1.5em;height:1.5em}
#gained.out{transition:opacity .4s;opacity:0}

#closeup-back{position:absolute;left:1em;bottom:1em;z-index:3}

/* episode menu popup (title screen) */
.ep-menu{text-align:center}
.ep-menu-title{font-size:1.2em;font-weight:900;color:var(--gold-2);margin:.2em 0 1em}
.ep-menu-btns{display:flex;flex-direction:column;gap:.7em;align-items:center}
.ep-menu-btns .btn{font-size:1.1em;min-width:11em}
.ep-menu-note{opacity:.65;font-size:.85em;margin-top:.9em}

/* thought bubble (ぽわんぽわん) over a speaker: the cloud floats beside the head, three dots lead from the head to it */
#thought{position:absolute;top:4.6em;width:17em;z-index:11;pointer-events:none}
#thought.right{left:29%}
#thought.left{right:29%}
#thought .cloud{background:#fff;color:#1f2433;border:.22em solid #1f2433;border-radius:2.2em;padding:.9em 1em;box-shadow:var(--shadow);animation:bob 2.4s ease-in-out infinite}
#thought .cloud .pic{width:100%}
#thought .cloud .pic svg{width:100%;height:auto;display:block}
#thought .cloud .pic.photo img{width:100%;height:auto;display:block;border-radius:1em;border:.15em solid #1f2433}
#thought .cloud .cap{font-size:.8em;font-weight:900;text-align:center;margin-top:.2em;color:var(--navy)}
#thought .dot{position:absolute;background:#fff;border:.18em solid #1f2433;border-radius:50%;animation:bob 2.4s ease-in-out infinite}
#thought.right .d1{width:1.3em;height:1.3em;right:-1.7em;top:42%;animation-delay:.15s}
#thought.right .d2{width:.9em;height:.9em;right:-3.6em;top:51%;animation-delay:.3s}
#thought.right .d3{width:.55em;height:.55em;right:-5.4em;top:60%;animation-delay:.45s}
#thought.left .d1{width:1.3em;height:1.3em;left:-1.7em;top:42%;animation-delay:.15s}
#thought.left .d2{width:.9em;height:.9em;left:-3.6em;top:51%;animation-delay:.3s}
#thought.left .d3{width:.55em;height:.55em;left:-5.4em;top:60%;animation-delay:.45s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.25em)}}
.reduce-motion #thought .cloud,.reduce-motion #thought .dot{animation:none}