/* Operation Nightjar investigation room, AI Vision edition.
   Follows aivisionsolutions.net: light glass panels on a cool grey field,
   near-black ink, one restrained crimson accent, Inter for everything you read
   and JetBrains Mono for paths, hashes and the terminal. Both fonts are bundled
   in fonts/ so the room works with the network disconnected.
   Readability: no text below 12px. */
:root{
  --bg:#eef0f2;--ink:#0d0d0f;--ink-soft:#2b2d31;--muted:#55585e;--muted-2:#767a81;
  --line:rgba(5,5,5,.1);--line-strong:rgba(5,5,5,.2);--soft:#f4f4f1;--soft-2:#f3f4f6;
  --accent:#e2231a;--accent-hover:#b8160f;--accent-soft:#fdeceb;--accent-ring:rgba(226,35,26,.16);--accent-dark:#ff5d52;
  --good:#1f6b43;--good-soft:#e8f3ec;
  --dark:#08080a;--dark-2:#111113;--dark-line:rgba(255,255,255,.12);--dark-text:#f4f4f2;--dark-muted:#a3a6ac;
  --glass:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.6));
  --glass-border:rgba(255,255,255,.95);
  --glass-shadow:0 24px 60px rgba(18,22,30,.08),inset 0 1px 0 rgba(255,255,255,.95);
  --lift-shadow:0 30px 70px rgba(18,22,30,.16);
  --radius:22px;
  --board-paper:linear-gradient(180deg,#fbfbfc,#f2f3f5);
  --board-dots:radial-gradient(circle,rgba(5,5,5,.14) 1px,rgba(5,5,5,0) 1.5px) 0 0/22px 22px;
  --ease:cubic-bezier(.22,.7,.25,1);
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:radial-gradient(circle at 96% -8%,rgba(226,35,26,.14),rgba(226,35,26,0) 38%),radial-gradient(circle at -6% 108%,#fff,rgba(255,255,255,0) 46%),var(--bg);background-attachment:fixed;color:var(--ink);font:16px/1.5 var(--ui);font-feature-settings:"ss01","cv05","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
code{font-family:var(--mono);font-size:.92em}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
body.intro-active{overflow:hidden}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.title-dot{color:var(--accent)}

/* ---------- Top bar ---------- */
/* The frosted glass lives on a pseudo-element: a backdrop-filter on .topbar
   itself would trap the fixed reset panel used on narrow screens. */
.topbar{position:relative;z-index:5;height:64px;display:flex;align-items:center;gap:20px;padding:0 clamp(14px,1.8vw,26px);border-bottom:1px solid rgba(5,5,5,.07)}
.topbar:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(238,240,242,.72);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.brand{display:flex;align-items:center;gap:14px;flex:none;color:var(--ink);text-decoration:none}
.brand-logo{display:block;width:auto;height:27px}
.brand-wordmark{display:flex;flex-direction:column;gap:4px;padding-left:14px;border-left:1px solid var(--line-strong);font:800 17px/1 var(--ui);letter-spacing:-.03em}
.brand-wordmark small{color:var(--muted);font:600 12px/1 var(--ui);letter-spacing:.02em}
.chapter-nav{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.1vw,16px)}
.chapter-nav button{position:relative;flex:none;width:34px;height:34px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:#fff;color:var(--ink);font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;box-shadow:0 1px 2px rgba(5,5,5,.05);transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s,color .2s}
.chapter-nav button:not(:last-child):after{content:"";position:absolute;left:calc(100% + 1px);top:50%;width:clamp(8px,1.1vw,16px);height:1px;background:var(--line-strong);pointer-events:none}
.chapter-nav button:hover:not(:disabled){transform:translateY(-2px);border-color:var(--ink)}
.chapter-nav button.is-done{border-color:var(--ink);background:var(--ink);color:#fff}
.chapter-nav button.is-done:not(:last-child):after{background:var(--ink)}
.chapter-nav button[aria-current="step"]{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 0 5px var(--accent-ring),0 8px 18px rgba(226,35,26,.28)}
.chapter-nav button:disabled{border-style:dashed;border-color:rgba(5,5,5,.2);background:transparent;color:rgba(5,5,5,.4);box-shadow:none;cursor:not-allowed}
.topbar-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none}
.topbar-action{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.82);color:var(--ink);font:600 13px/1 var(--ui);white-space:nowrap;box-shadow:0 1px 2px rgba(5,5,5,.04);transition:background .2s,border-color .2s,transform .2s var(--ease)}
.topbar-action:hover{background:#fff;border-color:var(--line-strong)}
.sound-toggle[aria-pressed="true"] .sound-mute,.sound-toggle[aria-pressed="false"] .sound-wave{display:none}
.sound-toggle[aria-pressed="false"]{color:var(--muted)}

/* ---------- Reset the case ---------- */
.reset-wrap{position:relative;flex:none}
.topbar-danger{color:var(--accent-hover);border-color:rgba(226,35,26,.24);background:rgba(253,236,235,.75)}
.topbar-danger:hover{background:var(--accent-soft);border-color:var(--accent)}
.reset-confirm{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:310px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--lift-shadow);color:var(--ink);font:400 14px/1.5 var(--ui);text-align:left}
.reset-confirm p{margin:0 0 8px}
.reset-confirm .reset-hint{color:var(--muted);font-size:13px}
.reset-actions{display:flex;gap:8px;margin-top:14px}
.reset-actions button{flex:1;height:40px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font:700 13px/1 var(--ui);transition:background .2s,border-color .2s}
.reset-actions .reset-go{border-color:var(--accent);background:var(--accent);color:#fff}
.reset-actions .reset-go:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.reset-actions .reset-cancel:hover{border-color:var(--ink)}
/* The panel is absolute inside .reset-wrap, so a percentage offset centres it on
   the wrapper, not the screen. Pin it to the viewport instead on narrow layouts. */
@media(max-width:560px){.reset-confirm{position:fixed;top:68px;left:16px;right:16px;width:auto}}

/* ---------- Room layout ---------- */
.room{display:flex;gap:14px;padding:14px;height:calc(100vh - 64px);height:calc(100svh - 64px);overflow:hidden}
.room>section{min-width:0;min-height:0}
/* Flex shares 30/23/47 give the case card room to split in two. The terminal column folds to a rail:
   flex-grow and flex-basis both interpolate, so the other panels widen smoothly. */
.room>.board-panel{flex:30 1 0}
.room>.terminal-panel{flex:23 1 0;transition:flex-grow .62s cubic-bezier(.65,0,.25,1),flex-basis .62s cubic-bezier(.65,0,.25,1),flex-shrink .62s,height .55s cubic-bezier(.65,0,.25,1)}
.room>.story-panel{flex:47 1 0}
.room.terminal-collapsed>.terminal-panel{flex:0 0 68px}
.room.is-restoring>.terminal-panel{transition:none}

/* ---------- Evidence board ---------- */
.board-panel{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 16px 14px;border:1px solid var(--glass-border);border-radius:var(--radius);background:var(--glass);box-shadow:var(--glass-shadow)}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.board-plaque{display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--ink);font:800 18px/1.1 var(--ui);letter-spacing:-.03em;white-space:nowrap}
.board-plaque:before{content:"";flex:none;width:9px;height:9px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.board-count{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-soft);font:600 13px/1 var(--ui);white-space:nowrap}
.board-count:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.board-frame{position:relative;flex:1;min-height:0;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(5,5,5,.04)}
.board-surface{position:absolute;inset:6px;overflow:hidden;border-radius:13px;outline:none;background:var(--board-dots),var(--board-paper);box-shadow:inset 0 0 0 1px rgba(5,5,5,.04);transition:box-shadow .2s}
.board-surface:focus-visible{box-shadow:inset 0 0 0 3px var(--accent)}
.board-surface.is-drop-target{box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 70px rgba(226,35,26,.12)}
.board-surface.is-drop-target:after{content:"Drop to pin";position:absolute;left:50%;top:50%;z-index:40;padding:13px 22px;border-radius:999px;background:var(--ink);color:#fff;font:700 15px/1 var(--ui);letter-spacing:.02em;transform:translate(-50%,-50%);pointer-events:none}
.board-lamp{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 320px at var(--lx,50%) var(--ly,24%),rgba(226,35,26,.06),rgba(226,35,26,0) 70%)}
.board-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;text-align:center;pointer-events:none}
.board-empty strong{color:var(--ink);font:800 clamp(24px,2.2vw,30px)/1.1 var(--ui);letter-spacing:-.035em}
.board-empty span{max-width:30ch;color:var(--muted);font:500 15px/1.5 var(--ui)}
.board-empty svg{width:120px;margin:4px 0 0 90px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.board-items{position:absolute;inset:0}
.board-item{position:absolute;width:clamp(140px,12.5vw,190px);transform:rotate(var(--rotation,0deg)) rotate(var(--swing,0deg));transform-origin:50% 0;transition:transform .45s cubic-bezier(.3,1.5,.5,1),filter .25s;filter:drop-shadow(0 4px 6px rgba(18,22,30,.12)) drop-shadow(0 14px 22px rgba(18,22,30,.1))}
.board-item:hover{filter:drop-shadow(0 8px 10px rgba(18,22,30,.14)) drop-shadow(0 22px 30px rgba(18,22,30,.14))}
.board-item.is-dragging{transform:rotate(var(--rotation,0deg)) rotate(var(--swing,0deg)) scale(1.06);transition:transform .09s linear,filter .2s;filter:drop-shadow(0 16px 16px rgba(18,22,30,.18)) drop-shadow(0 36px 44px rgba(18,22,30,.18))}
.board-item.is-dragging,.board-item.is-dragging *{cursor:grabbing!important}
.board-item.is-settling{animation:board-settle .65s cubic-bezier(.3,1.5,.5,1)}
.board-item.is-new{animation:board-new .55s cubic-bezier(.25,1.4,.5,1)}
/* Pin colours keep their original data-pin names; only the finish changed. */
.board-item[data-pin="red"]{--pin:#e2231a;--pin-hi:#ff958c;--pin-lo:#7a0f0a}
.board-item[data-pin="brass"]{--pin:#1d1e21;--pin-hi:#7d8088;--pin-lo:#000}
.board-item[data-pin="teal"]{--pin:#6b7079;--pin-hi:#d3d6db;--pin-lo:#2c2f34}
.board-item[data-pin="blue"]{--pin:#9b1610;--pin-hi:#f07a70;--pin-lo:#470805}
.board-pin{position:absolute;z-index:3;top:-11px;left:50%;width:24px;height:24px;margin-left:-12px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75) 0 10%,rgba(255,255,255,0) 12%),radial-gradient(circle at 40% 35%,var(--pin-hi),var(--pin) 52%,var(--pin-lo));box-shadow:0 2px 3px rgba(0,0,0,.35),2px 7px 9px rgba(0,0,0,.18);cursor:grab;touch-action:none;transition:transform .2s}
.board-pin:hover{transform:scale(1.12)}
.board-pin:focus-visible{outline-offset:4px}
.board-remove,.board-tint{position:absolute;z-index:6;top:-13px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 8px rgba(18,22,30,.25);opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
.board-remove{right:-11px;background:var(--ink);color:#fff;font:600 18px/1 var(--ui)}
.board-tint{left:-11px;background:#fff}
.board-tint:after{content:"";width:13px;height:13px;border-radius:50%;background:conic-gradient(#fcd34d 0 20%,#fb8c84 0 40%,#6aaef0 0 60%,#5fd38d 0 80%,#18181b 0);box-shadow:0 0 0 1px rgba(5,5,5,.25)}
.board-tint[aria-expanded="true"]{opacity:1;transform:none;box-shadow:0 0 0 3px var(--accent-ring),0 3px 8px rgba(18,22,30,.25)}
/* The colour palette opens over the top of the note, so it is never clipped by the board edge. */
.board-palette{position:absolute;z-index:9;top:20px;left:-4px;display:flex;gap:6px;padding:7px;border-radius:999px;background:#fff;box-shadow:0 12px 28px rgba(18,22,30,.24),0 0 0 1px rgba(5,5,5,.06);animation:slip-in .2s ease-out}
.board-swatch{width:26px;height:26px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--tone);box-shadow:0 0 0 1px rgba(5,5,5,.2);transition:transform .15s}
.board-swatch:hover{transform:scale(1.14)}
.board-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.board-item:hover .board-remove,.board-item:focus-within .board-remove,.board-item:hover .board-tint,.board-item:focus-within .board-tint{opacity:1;transform:none}
.board-photo{padding:8px 8px 10px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px rgba(5,5,5,.06);cursor:grab;touch-action:none}
img[src*="calling-card"]{object-position:68% 45%}
.board-photo img{display:block;width:100%;aspect-ratio:1.15;object-fit:cover;border-radius:2px;background:#e9eaec;pointer-events:none}
.board-caption{margin:9px 2px 0;color:var(--ink-soft);font:500 12px/1.3 var(--mono);text-align:center;overflow-wrap:anywhere}
.board-item.note{width:clamp(180px,15vw,230px);height:190px}
/* Five note papers that are easy to tell apart at a glance: yellow, coral, blue, green and black.
   The swatches in each note's palette reuse the same --tone values. */
.board-item[data-paper="0"],.board-swatch[data-color="0"]{--tone:#fde68a;--rule:rgba(146,100,0,.16)}
.board-item[data-paper="1"],.board-swatch[data-color="1"]{--tone:#fca5a5;--rule:rgba(150,20,20,.16)}
.board-item[data-paper="2"],.board-swatch[data-color="2"]{--tone:#93c5fd;--rule:rgba(20,60,140,.16)}
.board-item[data-paper="3"],.board-swatch[data-color="3"]{--tone:#86efac;--rule:rgba(10,100,50,.16)}
.board-item[data-paper="4"],.board-swatch[data-color="4"]{--tone:#18181b;--rule:rgba(255,255,255,.1)}
.board-item[data-paper="4"]{--note-ink:#f4f4f2;--note-muted:#a3a6ac;--note-handle:#d0d2d6}
.board-note{display:flex;flex-direction:column;height:100%;padding:22px 15px 14px;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 30%),var(--tone,#fff);box-shadow:inset 0 0 0 1px rgba(5,5,5,.05),inset 0 -18px 24px -18px rgba(5,5,5,.08);cursor:grab;touch-action:none}
.board-note textarea{flex:1;min-height:0;width:100%;padding:0;border:0;resize:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 25px,var(--rule) 25px 26px) 0 0/100% 26px local;color:var(--note-ink,#16171a);font:500 15px/26px var(--ui);outline:none;cursor:text;touch-action:auto}
.board-note textarea::placeholder{color:var(--note-muted,#767a81)}
.board-resize{position:absolute;z-index:5;right:-7px;bottom:-7px;width:26px;height:26px;padding:0;border:0;background:none;cursor:nwse-resize;touch-action:none;opacity:0;transition:opacity .2s}
.board-resize:before{content:"";position:absolute;right:8px;bottom:8px;width:11px;height:11px;border-right:2.5px solid var(--note-handle,#55585e);border-bottom:2.5px solid var(--note-handle,#55585e);border-radius:0 0 3px 0}
.board-item:hover .board-resize,.board-resize:focus-visible,.board-item.is-resizing .board-resize{opacity:1}
.board-edge{position:absolute;z-index:4;touch-action:none}
.edge-e{top:16px;bottom:16px;right:-6px;width:12px;cursor:ew-resize}
.edge-s{left:16px;right:16px;bottom:-6px;height:12px;cursor:ns-resize}
.board-edge:hover,.board-item.is-resizing .board-edge{background:linear-gradient(var(--accent),var(--accent)) center/3px 60% no-repeat}
.edge-s:hover,.board-item.is-resizing .edge-s{background-size:60% 3px}
.board-toolbar{display:flex;align-items:center;gap:10px}
.board-move-hint{margin-right:auto;color:var(--muted);font:500 13px/1.35 var(--ui)}
.tool-button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink);font:600 14px/1 var(--ui);white-space:nowrap;transition:background .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s}
.tool-button:hover{border-color:var(--ink);transform:translateY(-1px)}
.tool-primary{border-color:var(--ink);background:var(--ink);color:#fff;box-shadow:0 10px 22px rgba(5,5,5,.16)}
.tool-primary:hover{background:#000}
.board-capture{position:absolute;z-index:30;left:24px;right:24px;bottom:72px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);box-shadow:var(--lift-shadow);animation:slip-in .35s cubic-bezier(.2,.8,.2,1)}
.board-capture-label{display:inline-flex;align-items:center;gap:8px;color:var(--accent-hover);font:800 12px/1 var(--ui);letter-spacing:.14em}
.board-capture-label:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent)}
.board-capture textarea{display:block;width:100%;min-height:84px;max-height:170px;margin:12px 0 14px;padding:11px 13px;resize:vertical;border:1px solid var(--line-strong);border-radius:12px;background:var(--soft-2);color:var(--ink);font:500 15px/1.5 var(--ui)}
.board-capture textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.board-capture-actions{display:flex;justify-content:flex-end;gap:10px}
.board-capture-actions button{height:42px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:700 14px/1 var(--ui)}
.board-capture-actions button:last-child{border-color:var(--line-strong);background:#fff;color:var(--ink)}
.board-capture-actions button:disabled{opacity:.4;cursor:default}

/* ---------- Case terminal ---------- */
.terminal-panel{position:relative;display:flex;overflow:hidden;border:1px solid #000;border-radius:var(--radius);background:var(--dark);box-shadow:0 24px 60px rgba(18,22,30,.2)}
.terminal-open{width:100%;height:100%;min-height:0}
.terminal-open{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:inherit;background:var(--dark)}
/* The picture is a CRT: fine scanlines, a vignette, a glass highlight, a soft
   phosphor glow on the text and a faint refresh band rolling down the tube. */
.terminal-open:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 48% 42%,transparent 45%,rgba(0,0,0,.16) 75%,rgba(0,0,0,.5) 100%),radial-gradient(ellipse 110% 30% at 28% 0%,rgba(222,255,226,.1),transparent 78%),linear-gradient(118deg,rgba(255,255,255,.035),transparent 28%,transparent 72%,rgba(255,255,255,.025)),repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,rgba(255,255,255,.025) 1px 3px);box-shadow:inset 0 0 20px 5px rgba(0,0,0,.5),inset 0 2px 5px rgba(226,255,226,.2)}
.terminal-open:after{content:"";position:absolute;left:0;right:0;top:0;height:100%;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 44%,rgba(255,255,255,.028) 50%,rgba(255,255,255,0) 56%);animation:crt-refresh 9s linear infinite}
.terminal-mast{display:flex;align-items:center;gap:12px;flex:none;height:48px;padding:0 8px 0 16px;border-bottom:1px solid var(--dark-line);background:var(--dark-2);color:#d9dadc;font:500 12.5px/1 var(--mono)}
.terminal-lights{display:none;gap:7px}
.terminal-lights i{width:10px;height:10px;border-radius:50%;background:#3a3b40}
.terminal-lights i:first-child{background:var(--accent)}
.terminal-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.terminal-theme{flex:none;max-width:94px;min-height:32px;padding:3px 5px;border:1px solid var(--dark-line);border-radius:6px;background:var(--dark-2);color:#d9dadc;font:500 12px/1.3 var(--mono);color-scheme:dark;cursor:pointer}
.terminal-mast button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:none;color:#d9dadc;transition:background .2s,color .2s,box-shadow .2s}
.terminal-mast button:hover{background:rgba(226,35,26,.16);color:#fff;box-shadow:0 0 0 4px rgba(226,35,26,.14)}
.terminal-open #terminal{flex:1;min-height:0}

/* Folded: a slim rail of dark glass with one power button (the owner's mockup).
   A faint red light lines the edge. Until the set has been switched on once
   (.is-inviting), a band of light runs up both edges together, like a phone's
   edge lighting, and the power button warms as it passes. */
.terminal-rail{display:none}
.room.terminal-collapsed .terminal-rail{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;width:100%;padding:24px 0;overflow:hidden;border:0;border-radius:inherit;background:radial-gradient(ellipse 70% 13% at 86% 0%,rgba(255,255,255,.17),rgba(255,255,255,0) 72%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 24%,rgba(0,0,0,0) 76%,rgba(0,0,0,.38)),radial-gradient(circle,rgba(255,255,255,.07) .7px,rgba(255,255,255,0) 1.1px) 0 0/9px 9px,linear-gradient(180deg,#141416,#08080a);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -14px 28px rgba(0,0,0,.45);color:var(--dark-muted);animation:rail-in .5s ease .4s both}
.terminal-rail:before{content:"";position:absolute;inset:2px;z-index:1;border-radius:calc(var(--radius) - 3px);box-shadow:inset 0 0 0 1px rgba(255,59,48,.34),inset 0 0 12px rgba(255,59,48,.08);pointer-events:none;-webkit-mask:linear-gradient(180deg,#000,rgba(0,0,0,.4) 78%,rgba(0,0,0,.65));mask:linear-gradient(180deg,#000,rgba(0,0,0,.4) 78%,rgba(0,0,0,.65));transition:box-shadow .3s}
.terminal-rail:hover:before,.terminal-rail:focus-visible:before{box-shadow:inset 0 0 0 1px rgba(255,59,48,.65),inset 0 0 16px rgba(255,59,48,.16)}
.rail-edge{position:absolute;inset:2px;z-index:1;border-radius:calc(var(--radius) - 3px);pointer-events:none}
.rail-edge:before,.rail-edge:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,59,48,0) 40%,#ffd8d2 46%,rgba(255,59,48,.95) 48%,rgba(255,59,48,.35) 56%,rgba(255,59,48,0) 66%) 0 0/100% 300% no-repeat;opacity:0}
.rail-edge:before{padding:1.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.rail-edge:after{-webkit-mask:linear-gradient(90deg,#000,rgba(0,0,0,0) 12px,rgba(0,0,0,0) calc(100% - 12px),#000),linear-gradient(180deg,#000,rgba(0,0,0,0) 12px,rgba(0,0,0,0) calc(100% - 12px),#000);mask:linear-gradient(90deg,#000,rgba(0,0,0,0) 12px,rgba(0,0,0,0) calc(100% - 12px),#000),linear-gradient(180deg,#000,rgba(0,0,0,0) 12px,rgba(0,0,0,0) calc(100% - 12px),#000)}
.terminal-panel.is-inviting .rail-edge:before{opacity:1;animation:edge-run 4s linear infinite}
.terminal-panel.is-inviting .rail-edge:after{opacity:.4;animation:edge-run 4s linear infinite}
.rail-power{position:relative;z-index:3;display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid rgba(255,93,82,.55);border-radius:50%;background:radial-gradient(circle at 50% 28%,#27272b,#0d0d0f 68%);color:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 18px rgba(226,35,26,.3),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s,background .2s}
.rail-power .icon{width:18px;height:18px}
.rail-power:before{content:"";position:absolute;inset:-1px;border:1px solid rgba(255,93,82,.7);border-radius:50%;opacity:0;pointer-events:none}
.rail-label{position:relative;z-index:3;order:-1;writing-mode:vertical-rl;transform:rotate(180deg);font:600 12px/1 var(--mono);letter-spacing:.36em;text-transform:uppercase;white-space:nowrap;color:var(--dark-muted);transition:color .2s}
.terminal-rail:hover .rail-label,.terminal-rail:focus-visible .rail-label{color:#fff}
.terminal-rail:hover .rail-power,.terminal-rail:focus-visible .rail-power{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 6px rgba(226,35,26,.18),0 0 26px rgba(226,35,26,.5);transform:scale(1.06)}
.terminal-rail:active .rail-power{transform:scale(.95)}
.terminal-rail:focus-visible{outline-offset:-6px}
.terminal-panel.is-inviting{animation:rail-breathe 4s ease-in-out infinite}
.terminal-panel.is-inviting .rail-power{animation:rail-charge 4s ease-in-out infinite}
.terminal-panel.is-inviting .rail-power:before{animation:rail-ping 4s cubic-bezier(.2,.6,.3,1) infinite}
.terminal-panel.is-inviting .terminal-rail:hover .rail-power,.terminal-panel.is-inviting .terminal-rail:focus-visible .rail-power{animation:none}
@media(max-height:560px) and (min-width:941px){.rail-label{display:none}}

/* CRT power. On: a dot stretches into a bright line, the line opens into the
   picture, and the picture over-brightens and settles. Off: the reverse, ending
   on a fading dot. JS removes the classes on a timer, never on animationend. */
.tv-glow{position:absolute;left:0;right:0;top:50%;z-index:6;height:0;pointer-events:none}
.tv-glow:before{content:"";position:absolute;left:3%;right:3%;top:-1.5px;height:3px;border-radius:3px;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.85),0 0 46px 12px rgba(255,93,82,.38);opacity:0}
.tv-glow:after{content:"";position:absolute;left:50%;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,rgba(255,255,255,.7) 36%,rgba(255,93,82,.28) 58%,rgba(255,93,82,0) 72%);opacity:0}
.terminal-panel:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.08) 50%,rgba(255,255,255,0)) 0 -120%/100% 34% no-repeat,repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 1px 3px)}
.terminal-panel.tv-on .terminal-open{animation:tv-on .95s cubic-bezier(.2,.7,.2,1) both}
.terminal-panel.tv-on .tv-glow:before{animation:tv-on-line .95s cubic-bezier(.2,.7,.2,1) both}
.terminal-panel.tv-on .tv-glow:after{animation:tv-on-dot .95s ease-out both}
.terminal-panel.tv-on:after{animation:tv-scan 1.2s ease-out both}
.terminal-panel.tv-off .terminal-open{animation:tv-off .58s cubic-bezier(.55,0,.75,.2) forwards}
.terminal-panel.tv-off .tv-glow:before{animation:tv-off-line .58s cubic-bezier(.55,0,.75,.2) forwards}
.terminal-panel.tv-off .tv-glow:after{animation:tv-off-dot .9s ease-out forwards}
.term{display:flex;flex-direction:column;min-height:0;background:var(--dark);color:#e6e7e9;font:14px/1.65 var(--mono);letter-spacing:.025em}
.term-chrome{display:none}
.term-lights,.term-tier{display:none}
.term-screen{flex:1;min-height:0;overflow:auto;padding:16px 16px 22px;cursor:text;scrollbar-color:#3a3b40 var(--dark);user-select:text;-webkit-user-select:text}
.term-scroll{min-height:0}
.term-scroll,.term-run,.term-body{user-select:text;-webkit-user-select:text}
.term-screen ::selection,.term-entry input::selection{background:var(--accent);color:#fff}
.term-screen{text-shadow:0 0 6px rgba(255,255,255,.14)}
.term-note{margin:0 0 10px;color:var(--dark-muted);font:13px/1.55 var(--mono)}
.term-note-warn{color:#ff8a80}
.term-note-divider{color:#6f7279}
.term-run{margin:0 0 16px}
.term-run[data-restored] .term-body{color:#b9bbc0}
.term-echo,.term-complete{color:#fff;white-space:pre-wrap;overflow-wrap:anywhere}
.ps1{color:var(--accent-dark);white-space:pre-wrap;text-shadow:0 0 8px rgba(255,93,82,.4)}
.term-body{margin:4px 0 0;color:#d9dadc;font:13.5px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.term-paths{display:flex;flex-direction:column;gap:4px;margin:6px 0 0}
.term-paths a{align-self:flex-start;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,93,82,.75);text-underline-offset:3px;font:13px/1.5 var(--mono)}
.term-paths a:hover{color:var(--accent-dark)}
.term-complete p{margin:2px 0 0;color:var(--dark-muted)}
.term-entry{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0;overflow-wrap:anywhere}
.term-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.term-entry input{position:static;display:block;flex:none;width:100%;min-width:0;height:auto;margin:0;padding:0;border:0;background:transparent;color:#fff;caret-color:var(--accent-dark);outline:none;opacity:1;font:inherit;letter-spacing:inherit;text-shadow:inherit}
.term-entry .ps1{display:block;flex:none}
.term-typed,.term-rest,.term-caret{display:none}
.term-entry[data-focused="true"] .term-caret{background:#fff;animation:caret-blink 1.1s steps(1) infinite}
.term-entry[data-busy="true"] .term-caret{animation:none}
.term-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex:none;padding:9px 14px;border-top:1px solid var(--dark-line);background:var(--dark-2);color:#6f7279;font:500 12px/1.4 var(--ui);white-space:nowrap;overflow:hidden}
.term-foot kbd{padding:0 4px;border:1px solid rgba(255,255,255,.14);border-radius:4px;color:#a3a6ac;font:600 12px/1.4 var(--mono)}
.term-foot #term-count{color:#a3a6ac}
/* A narrow terminal keeps only the Tab hint. */
.terminal-open{container-type:inline-size}
@container (max-width:320px){.term-foot-more{display:none}}

/* Green phosphor is the default; Original retains the white/red CRT palette. */
.terminal-panel[data-terminal-theme="green"] .terminal-open{--accent:#63e87b;--accent-dark:#9cff8b;--dark-muted:#9bcda0;--dark:#061008;--dark-2:#0a170d}
.terminal-panel[data-terminal-theme="green"] .term,
.terminal-panel[data-terminal-theme="green"] .term-body{color:#a5f39c}
.terminal-panel[data-terminal-theme="green"] .term-run[data-restored] .term-body{color:#9bcda0}
.terminal-panel[data-terminal-theme="green"] .term-echo,
.terminal-panel[data-terminal-theme="green"] .term-complete,
.terminal-panel[data-terminal-theme="green"] .term-entry input,
.terminal-panel[data-terminal-theme="green"] .term-paths a{color:#c3ffad}
.terminal-panel[data-terminal-theme="green"] .term-screen{background:radial-gradient(ellipse at 50% 40%,rgba(85,188,75,.07),transparent 75%);scrollbar-color:#34523a var(--dark);text-shadow:0 0 2px rgba(165,243,156,.45),0 0 9px rgba(102,232,123,.28)}
.terminal-panel[data-terminal-theme="green"] .ps1{text-shadow:0 0 3px rgba(156,255,139,.6),0 0 12px rgba(102,232,123,.38)}
.terminal-panel[data-terminal-theme="green"] .term-paths a{text-decoration-color:rgba(83,223,131,.75)}
.terminal-panel[data-terminal-theme="green"] .term-paths a:hover{color:var(--accent-dark)}
.terminal-panel[data-terminal-theme="green"] .term-note-divider,
.terminal-panel[data-terminal-theme="green"] .term-foot{color:#9bcda0}
.terminal-panel[data-terminal-theme="green"] .term-foot kbd,
.terminal-panel[data-terminal-theme="green"] .term-foot #term-count,
.terminal-panel[data-terminal-theme="green"] .terminal-mast,
.terminal-panel[data-terminal-theme="green"] .terminal-theme{color:#a5f39c}
.terminal-panel[data-terminal-theme="green"] .term-screen ::selection,
.terminal-panel[data-terminal-theme="green"] .term-entry input::selection{color:var(--dark)}
@container (max-width:320px){.terminal-lights{display:none}}
@media(max-width:940px){.terminal-theme{min-height:44px}.terminal-mast{height:52px}.terminal-mast button{width:44px;height:44px}}

/* ---------- Case card: the evidence on the left, the story on the right ---------- */
.story-panel{position:relative;display:flex;flex-direction:column;min-width:0}
.case-card{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(320px,52%) minmax(0,1fr);overflow:hidden;border:1px solid var(--glass-border);border-radius:var(--radius);background:var(--board-paper);box-shadow:var(--glass-shadow)}
.case-card.is-wide{grid-template-columns:minmax(0,1fr) minmax(290px,1.06fr);grid-template-rows:minmax(0,1fr)}
.case-brief{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.card-topline{position:relative;z-index:2;display:flex;align-items:center;gap:12px;flex:none;min-height:54px;padding:14px 20px 12px 24px;border-bottom:1px solid var(--line)}
#chapter-label{display:inline-flex;align-items:center;gap:9px;color:var(--accent-hover);font:800 12.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
#chapter-label:before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.card-body{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;padding:18px clamp(20px,2.2vw,30px) 22px;scrollbar-color:#c9ccd1 transparent}
/* The card body is focused by script after each sequence so reading resumes in
   the right place; it is not a control, so it draws no ring of its own. */
.card-body:focus{outline:none}
.card-stamp{display:none;margin-left:auto;padding:6px 11px 5px;border:2px solid var(--accent);border-radius:8px;background:rgba(253,236,235,.7);color:var(--accent);font:800 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;transform:rotate(-5deg);pointer-events:none}
.case-brief[data-answered="true"] .card-stamp{display:inline-block}
.card-stamp.stamp-in{animation:stamp-in .5s cubic-bezier(.3,1.6,.5,1)}

/* ---------- The evidence inspector ----------
   The object rests on the same dotted paper as the evidence board; only the
   terminal is dark. Examine lifts it onto a dark item screen. The object is
   CSS 3D (front, back, four edges); the pose comes from tools/inspect.js.
   Faces size their type from --ow, the object's width in pixels, so the back
   stays legible at any size. The --v-* colours switch with the backdrop. */
.case-viewer{--v-chip:#fff;--v-chip-hover:#fff;--v-line:var(--line);--v-line-hover:var(--line-strong);--v-text:var(--ink-soft);--v-text-strong:var(--ink);--v-shadow:rgba(18,22,30,.3);position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;min-height:0;margin:8px;overflow:hidden;border-radius:16px;color:var(--ink);background:var(--board-dots),var(--board-paper);box-shadow:inset 0 0 0 1px rgba(5,5,5,.06)}
.case-viewer:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 55% 45% at 50% 48%,rgba(255,255,255,.85),rgba(255,255,255,0) 100%)}
.case-viewer.is-examining{--v-chip:rgba(255,255,255,.05);--v-chip-hover:rgba(255,255,255,.1);--v-line:rgba(255,255,255,.2);--v-line-hover:rgba(255,255,255,.55);--v-text:#e6e7e9;--v-text-strong:#fff;--v-shadow:rgba(0,0,0,.75);color:#fff}
.case-viewer.is-examining:before{background:radial-gradient(circle at 50% -12%,rgba(226,35,26,.28),rgba(226,35,26,0) 52%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,0) 1px 4px)}
.case-card.is-wide .case-viewer{margin:8px 0 8px 8px}
.viewer-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 0 12px}
.viewer-label{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:8px 12px;border:1px solid var(--v-line);border-radius:999px;background:var(--v-chip);color:var(--v-text);font:600 12px/1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-label.is-file{color:var(--v-text-strong);cursor:grab}
.viewer-label.is-file:before{content:"";flex:none;width:8px;height:12px;background:radial-gradient(circle,#a3a6ac 1.2px,rgba(0,0,0,0) 1.6px) 0 0/4px 4px}
.viewer-label.is-file:hover{border-color:var(--v-line-hover)}
.viewer-examine{display:inline-flex;align-items:center;gap:7px;flex:none;height:34px;padding:0 14px;border:1px solid var(--v-line);border-radius:999px;background:var(--v-chip);color:var(--v-text);font:600 13px/1 var(--ui);transition:border-color .2s,color .2s,background .2s}
.viewer-examine .icon{width:15px;height:15px}
.viewer-examine:hover{border-color:var(--v-line-hover);color:var(--v-text-strong);background:var(--v-chip-hover)}
.viewer-stage{position:relative;z-index:1;flex:1;min-height:0;display:grid;place-items:center;perspective:1200px;cursor:grab;touch-action:none;outline:none;user-select:none;-webkit-user-select:none}
.viewer-stage.is-grabbing{cursor:grabbing}
.viewer-stage:focus-visible{box-shadow:inset 0 0 0 3px var(--accent);border-radius:12px}
@media(pointer:coarse){.case-viewer:not(.is-examining) .viewer-stage{touch-action:pan-y}}
.viewer-float{grid-area:1/1;transform-style:preserve-3d;animation:obj-float 6.5s ease-in-out infinite}
.viewer-enter{transform-style:preserve-3d}
.viewer-enter.is-entering{animation:obj-enter .95s cubic-bezier(.2,.8,.2,1) both}
.viewer-object{position:relative;width:var(--owpx,240px);height:var(--ohpx,160px);transform-style:preserve-3d;will-change:transform}
.obj-face{position:absolute;inset:0;overflow:hidden;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(calc(var(--ot,5px) / 2))}
.obj-back{transform:rotateY(180deg) translateZ(calc(var(--ot,5px) / 2))}
.obj-face:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,0) calc(var(--shx,50%) - 30%),rgba(255,255,255,.55) var(--shx,50%),rgba(255,255,255,0) calc(var(--shx,50%) + 30%));opacity:var(--sho,.2);mix-blend-mode:screen}
.obj-back:after{background:linear-gradient(118deg,rgba(255,255,255,0) calc(var(--shxb,50%) - 30%),rgba(255,255,255,.45) var(--shxb,50%),rgba(255,255,255,0) calc(var(--shxb,50%) + 30%));opacity:calc(var(--sho,.2) * .55)}
.obj-edge{position:absolute;background:linear-gradient(90deg,#d6d5cf,#f4f3ef 50%,#cfcec8)}
.obj-edge-t{left:0;top:0;width:100%;height:var(--ot,5px);transform:translateY(calc(var(--ot,5px) / -2)) rotateX(90deg)}
.obj-edge-b{left:0;bottom:0;width:100%;height:var(--ot,5px);transform:translateY(calc(var(--ot,5px) / 2)) rotateX(-90deg)}
.obj-edge-l{left:0;top:0;width:var(--ot,5px);height:100%;transform:translateX(calc(var(--ot,5px) / -2)) rotateY(-90deg)}
.obj-edge-r{right:0;top:0;width:var(--ot,5px);height:100%;transform:translateX(calc(var(--ot,5px) / 2)) rotateY(90deg)}
.viewer-object[data-kind="dossier"] .obj-edge,.viewer-object[data-kind="sealed"] .obj-edge{background:linear-gradient(90deg,#222226,#3b3b41 50%,#1d1d21)}
.viewer-object.just-collected .obj-front{animation:obj-collected 1.8s ease-out}
.viewer-shadow{position:absolute;left:50%;top:calc(50% + var(--ohpx,160px) * var(--shadow-z,1) / 2 + 20px);width:var(--owpx,240px);height:26px;border-radius:50%;background:radial-gradient(closest-side,var(--v-shadow),rgba(0,0,0,0));transform:translateX(-50%) scaleX(calc(var(--shadow-w,1) * var(--shadow-z,1)));pointer-events:none;animation:shadow-breathe 6.5s ease-in-out infinite}

/* Faces */
.obj-print{position:absolute;inset:0;padding:4.5%;background:linear-gradient(160deg,#fff,#efeee9)}
.obj-print,.obj-paper,.obj-tag{box-shadow:inset 0 0 0 1px rgba(5,5,5,.1)}
.obj-print img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px;background:#1b1b1e;pointer-events:none}
.obj-paper{position:absolute;inset:0;display:flex;flex-direction:column;gap:.45em;padding:7% 8%;background:repeating-linear-gradient(180deg,rgba(5,5,5,0) 0 1.55em,rgba(5,5,5,.05) 1.55em calc(1.55em + 1px)),linear-gradient(160deg,#faf9f6,#efeee9);color:var(--ink);font-size:max(12px,calc(var(--ow,240) * .05px));line-height:1.45}
.paper-kicker{display:inline-flex;align-items:center;gap:.5em;color:var(--accent-hover);font:800 max(12px,.7em)/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.paper-kicker:before{content:"";width:.6em;height:.6em;border-radius:2px;background:var(--accent)}
.paper-title{font:800 1.3em/1.12 var(--ui);letter-spacing:-.03em}
.paper-text{color:var(--ink-soft)}
.paper-foot{margin-top:auto;padding-top:.5em;border-top:1px dashed var(--line-strong);color:var(--muted);font:600 max(12px,.72em)/1.2 var(--mono)}
.obj-dossier{position:absolute;inset:0;display:flex;flex-direction:column;padding:9% 9% 8%;background:radial-gradient(circle at 100% 0,rgba(226,35,26,.36),rgba(226,35,26,0) 52%),linear-gradient(160deg,#1d1d21,#0b0b0d);color:#fff;font-size:max(12px,calc(var(--ow,240) * .05px))}
.dossier-tab{position:absolute;top:0;right:11%;padding:.45em .8em;border-radius:0 0 7px 7px;background:var(--accent);font:800 max(12px,.68em)/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.dossier-kicker{color:#a3a6ac;font:700 max(12px,.7em)/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase}
.dossier-title{margin:.55em 0 0;font:800 1.8em/.95 var(--ui);letter-spacing:-.045em;text-transform:uppercase}
.dossier-stamp{display:grid;place-items:center;align-self:flex-start;width:max(92px,calc(var(--ow,240) * .36px));aspect-ratio:1;margin-top:1em;padding:.6em;border:1.5px solid var(--accent-dark);border-radius:50%;color:var(--accent-dark);font:800 max(12px,.62em)/1.15 var(--ui);letter-spacing:.03em;text-align:center;text-transform:uppercase;transform:rotate(9deg)}
.dossier-foot{margin-top:auto;padding-top:.7em;border-top:1px solid rgba(255,255,255,.14);color:#a3a6ac;font:600 max(12px,.68em)/1.3 var(--ui)}
.obj-tag{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.45em;padding:0 8% 0 21%;background:linear-gradient(160deg,#fbfaf6,#e9e8e2);color:var(--ink);font-size:max(12px,calc(var(--ow,240) * .05px))}
.tag-hole{position:absolute;left:8%;top:50%;width:1em;height:1em;margin-top:-.5em;border-radius:50%;background:#141416;box-shadow:0 0 0 .3em #dcdad3}
.tag-kicker{color:var(--accent-hover);font:800 max(12px,.7em)/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.tag-handle{font:700 1.3em/1.15 var(--mono);overflow-wrap:anywhere}
.tag-from{color:var(--muted);font:600 max(12px,.72em)/1.2 var(--mono)}
.obj-sealed{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;padding:12%;background:repeating-linear-gradient(135deg,#17171a 0 14px,#1c1c20 14px 28px);color:#fff;text-align:center;font-size:max(12px,calc(var(--ow,240) * .05px))}
.obj-sealed .icon{width:2.4em;height:2.4em;color:var(--accent-dark)}
.obj-sealed strong{font:800 1.5em/1 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.obj-sealed span{color:#c9cbd0;line-height:1.4}

/* First-use hint over the stage, and the controls under it. */
.viewer-coach{position:absolute;left:50%;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border:1px solid var(--v-line);border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--muted);font:500 12px/1.2 var(--ui);white-space:nowrap;box-shadow:0 4px 14px rgba(18,22,30,.06);transform:translateX(-50%);pointer-events:none;animation:coach-in .5s ease 1s both}
.case-viewer.is-examining .viewer-coach{background:rgba(10,10,12,.6);color:#d9dadc}
.coach-hand{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;animation:coach-drag 1.8s ease-in-out infinite}
.viewer-controls{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 12px 14px}
.viewer-controls .pin-action{min-height:0;height:36px;max-width:100%;gap:8px;padding:0 16px 0 14px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font:600 13px/1 var(--ui);letter-spacing:0;box-shadow:0 2px 8px rgba(18,22,30,.06)}
.viewer-controls .pin-action:before{width:7px;height:7px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.viewer-controls .pin-action:hover{border-color:var(--ink);background:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(18,22,30,.1)}
.viewer-controls .pin-action.pinned{border-color:rgba(31,107,67,.28);background:var(--good-soft);color:var(--good);box-shadow:none}
.viewer-controls .pin-action.pinned:hover{border-color:rgba(31,107,67,.45);background:#dcefe3}
.viewer-controls .pin-action.pinned:before{background:var(--good);box-shadow:0 0 0 3px rgba(31,107,67,.15)}
.turn-button{position:relative;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 14px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:600 13px/1 var(--ui);white-space:nowrap;box-shadow:0 6px 18px rgba(13,13,15,.18);transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s}
.turn-button:hover{background:#000;transform:translateY(-1px);box-shadow:0 10px 22px rgba(13,13,15,.24)}
.turn-button .icon{width:15px;height:15px;transition:transform .5s var(--ease)}
.turn-badge{width:7px;height:7px;margin-left:1px;border-radius:50%;background:var(--accent-dark)}
.case-viewer:not(.clue-found) .turn-badge{animation:badge-pulse 1.6s ease-in-out infinite}
.case-viewer.is-turned .turn-badge{display:none}
.case-viewer.is-turned .turn-button{border-color:var(--line-strong);background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(18,22,30,.06)}
.case-viewer.is-examining .turn-button{border-color:#fff;background:#fff;color:var(--ink)}
.case-viewer.is-examining.is-turned .turn-button{border-color:rgba(255,255,255,.5);background:transparent;color:#fff;box-shadow:none}
.case-viewer.is-turned .turn-button .icon{transform:rotate(180deg)}
.viewer-tools{position:absolute;right:12px;top:58px;z-index:3;display:flex;flex-direction:column;gap:6px}
.viewer-tool{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--v-line);border-radius:50%;background:var(--v-chip);color:var(--v-text-strong);transition:border-color .2s,background .2s}
.viewer-tool .icon{width:16px;height:16px}
.viewer-tool:hover{border-color:var(--v-line-hover);background:var(--v-chip-hover)}

/* Examine: the same viewer, lifted out to fill the window. */
.case-card .case-viewer.is-examining{position:fixed;inset:0;z-index:260;margin:0;border-radius:0;background:radial-gradient(ellipse 60% 55% at 50% 46%,#2c2c31 0,#111113 60%,#050506 100%)}
.case-viewer.is-examining .viewer-head{padding:18px 22px 0}
.case-viewer.is-examining .viewer-stage{perspective:2400px}
.case-viewer.is-examining .viewer-controls{padding:14px 22px 28px}
.case-viewer.is-examining .viewer-tools{right:22px;top:50%;transform:translateY(-50%)}
body.is-examining{overflow:hidden}

/* Card content */
.chapter-kicker{display:flex;align-items:center;gap:9px;margin:0 0 12px;color:var(--accent-hover);font:800 12px/1.35 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.chapter-kicker:before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.chapter-title{margin:0 0 14px;color:var(--ink);font:800 clamp(32px,3vw,46px)/1.04 var(--ui);letter-spacing:-.045em}
.chapter-deck{max-width:36ch;margin:0 0 16px;color:var(--ink-soft);font:500 clamp(18px,1.4vw,21px)/1.45 var(--ui);letter-spacing:-.012em}
.chapter-copy{max-width:56ch;margin:0 0 14px;color:var(--muted);font:400 16px/1.65 var(--ui)}
.chapter-copy code{color:var(--ink)}
.chapter-rule{height:1px;margin:18px 0;background:var(--line)}
.brief-heading{margin:4px 0 16px;font-size:clamp(34px,2.7vw,46px);line-height:.95;letter-spacing:-.05em}
.story-action,.pin-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:700 13.5px/1.2 var(--ui);letter-spacing:.04em;text-decoration:none;box-shadow:0 10px 22px rgba(5,5,5,.16);transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.story-action:hover,.pin-action:hover{transform:translateY(-2px);background:#000;box-shadow:0 14px 28px rgba(5,5,5,.22)}
.pin-action:before{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#ff958c 30%,#e2231a 70%);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.pin-action.pinned{background:var(--good-soft);color:var(--good);box-shadow:inset 0 0 0 1px rgba(31,107,67,.28)}
.pin-action.pinned:hover{background:#dcefe3}
.pin-action.pinned:before{background:radial-gradient(circle at 35% 30%,#fff 0 18%,#9fd6b4 30%,#1f6b43 70%)}
.source-line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;margin:12px 0 0;color:var(--muted);font:500 13.5px/1.4 var(--ui)}
.source-line a{color:var(--ink);font-weight:700;text-decoration-color:rgba(226,35,26,.6);text-underline-offset:4px}
.source-line a:hover{color:var(--accent-hover)}
.question-card{position:relative;margin:22px 0 16px;padding:22px 24px 21px;border:1px solid var(--line);border-radius:18px;background:var(--soft-2)}
.question-card h2{margin:0 0 10px;color:var(--ink);font:800 clamp(21px,1.7vw,27px)/1.15 var(--ui);letter-spacing:-.035em}
.question-card p{margin:0;color:var(--muted);font:400 16px/1.6 var(--ui)}
.question-mark{float:right;margin:-6px -4px 0 10px;color:rgba(226,35,26,.22);font:800 58px/1 var(--ui)}
.map-form{margin:16px 0 0}
.map-form label{display:block;margin:0 0 12px;color:var(--ink-soft);font:800 12px/1.2 var(--ui);letter-spacing:.1em}
.map-form input{display:block;width:100%;height:48px;margin-top:7px;padding:0 14px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--ink);font:500 16px/1 var(--mono)}
.map-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.map-form .story-action{width:100%;margin-top:6px}
.map-status{min-height:20px;margin:10px 0 0;color:var(--muted);font:500 13.5px/1.4 var(--ui)}
.map-status a{color:var(--accent-hover);font-weight:700}
/* ---------- Capture seal (final card) ---------- */
.capture-seal{display:flex;gap:13px;align-items:flex-start;margin:16px 0 4px;padding:16px 18px;border-radius:16px;background:radial-gradient(circle at 100% 0,rgba(226,35,26,.26),rgba(226,35,26,0) 55%),var(--dark);color:#fff}
.capture-seal-mark{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 15px/1 var(--ui);box-shadow:0 0 0 4px rgba(226,35,26,.22)}
.capture-seal strong{display:block;font:800 13.5px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:5px}
.capture-seal span{display:block;font:400 14px/1.55 var(--ui);color:#c9cbd0}
.capture-seal code{font:600 12.5px/1 var(--mono);background:rgba(255,255,255,.1);padding:2px 5px;border-radius:4px;color:#fff}

/* Three plain questions, stacked. The old five-column jargon layout was the
   thing instructors found unclear; the question now reads as a question. */
.report-form{display:grid;gap:17px;padding-bottom:10px}
.report-form label{display:block;color:var(--ink-soft)}
.report-form .report-q{display:block;font:700 15px/1.35 var(--ui);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.report-form .report-hint{display:block;margin:2px 0 7px;font:400 13px/1.4 var(--ui);letter-spacing:normal;text-transform:none;color:var(--muted)}
.report-form textarea{width:100%;min-height:62px;padding:10px 12px;resize:vertical;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--ink);font:400 15px/1.5 var(--ui);letter-spacing:normal;text-transform:none}
.report-form .story-action{margin:4px 0 0}

/* Dock: the question and navigation sit under the card */
.dock{flex:none;display:flex;flex-direction:column;gap:12px;padding:14px 20px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.55)}
.answer-check{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.answer-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.answer-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--accent-hover);font:800 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.answer-kicker:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.answer-state{padding:6px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);font:700 12px/1 var(--ui);letter-spacing:.06em}
.answer-state.is-verified{border-color:var(--ink);background:var(--ink);color:#fff}
.answer-check label{color:var(--ink);font:700 clamp(17px,1.35vw,20px)/1.35 var(--ui);letter-spacing:-.02em}
.answer-row{display:flex;gap:10px}
.answer-row.is-wrong{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
.answer-row input{flex:1;width:0;min-width:0;height:50px;padding:0 16px;border:1px solid var(--line-strong);border-radius:14px;background:#fff;color:var(--ink);font:500 16px/1 var(--mono);transition:border-color .2s,box-shadow .2s}
.answer-row input::placeholder{color:var(--muted-2);font-family:var(--ui)}
.answer-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.answer-row input[readonly]{border-color:rgba(31,107,67,.32);background:var(--good-soft);color:var(--good)}
.answer-row button{height:50px;padding:0 28px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:700 15px/1 var(--ui);letter-spacing:.02em;box-shadow:0 10px 22px rgba(5,5,5,.16);transition:transform .2s var(--ease),background .2s}
.answer-row button:hover:not(:disabled){transform:translateY(-1px);background:#000}
.answer-row button:disabled{background:var(--good-soft);color:var(--good);box-shadow:none;cursor:default}
.answer-check p{min-height:20px;margin:0;color:var(--muted);font:500 14px/1.4 var(--ui)}
.answer-check p.is-good{color:var(--good)}
.answer-check p.is-bad{color:var(--accent-hover)}
.card-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px}
.nav-button{height:46px;border-radius:999px;font:700 14.5px/1 var(--ui);letter-spacing:.02em;transition:transform .2s var(--ease),background .2s,border-color .2s,opacity .2s}
.nav-button:hover:not(:disabled){transform:translateY(-2px)}
.nav-back{border:1px solid var(--line-strong);background:#fff;color:var(--ink)}
.nav-back:hover:not(:disabled){border-color:var(--ink)}
.nav-next{border:0;background:var(--ink);color:#fff;box-shadow:0 10px 22px rgba(5,5,5,.16)}
.nav-next.is-ready{background:var(--accent);animation:next-ready 1.9s ease-in-out infinite}
.nav-next.is-ready:hover:not(:disabled){background:var(--accent-hover)}
.nav-button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}

.toast{position:fixed;left:50%;bottom:26px;z-index:70;max-width:min(90vw,460px);padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:var(--lift-shadow);font:600 14px/1.4 var(--ui);text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.no-script{padding:20px;background:#fff;color:var(--ink)}

@keyframes caret-blink{50%{opacity:0}}
@keyframes board-settle{0%{scale:1.06}40%{scale:.985;rotate:-2.5deg}70%{rotate:1.2deg}100%{scale:1;rotate:0deg}}
@keyframes board-new{from{opacity:0;scale:1.25;translate:0 -24px}}
@keyframes slip-in{from{opacity:0;translate:0 18px}}
@keyframes tv-on{0%{opacity:0;transform:scale(.04,.004);filter:brightness(10) saturate(0)}14%{opacity:1;transform:scale(.06,.004)}32%{transform:scale(1,.004);filter:brightness(8) saturate(0)}52%{transform:scale(1,1.03);filter:brightness(2.6) contrast(1.5) saturate(.4)}64%{transform:scale(1,.985);filter:brightness(1.5) contrast(1.15)}74%{transform:none;filter:brightness(1.25);opacity:.9}80%{opacity:1;filter:brightness(1.06)}86%{opacity:.94}100%{opacity:1;transform:none;filter:none}}
@keyframes tv-on-line{0%,10%{opacity:0;transform:scale(0,1)}16%{opacity:1;transform:scale(.06,1)}32%{opacity:1;transform:scale(1,1)}44%{opacity:.5;transform:scale(1,6)}56%{opacity:0;transform:scale(1,14)}100%{opacity:0}}
@keyframes tv-on-dot{0%{opacity:0;transform:scale(.2)}6%{opacity:1;transform:scale(1.2)}16%{opacity:.9;transform:scale(.8)}26%{opacity:0;transform:scale(.5)}100%{opacity:0}}
@keyframes tv-scan{0%,38%{opacity:0;background-position:0 -120%,0 0}52%{opacity:1}100%{opacity:0;background-position:0 240%,0 0}}
@keyframes tv-off{0%{opacity:1;transform:none;filter:none}16%{transform:scale(1.01,.9);filter:brightness(1.8)}46%{opacity:1;transform:scale(1,.005);filter:brightness(7) saturate(0)}70%{opacity:.8;transform:scale(.03,.005)}100%{opacity:0;transform:scale(0,0)}}
@keyframes tv-off-line{0%,32%{opacity:0;transform:scale(1,18)}46%{opacity:1;transform:scale(1,1)}68%{opacity:1;transform:scale(.025,1)}74%,100%{opacity:0;transform:scale(.01,1)}}
@keyframes tv-off-dot{0%,42%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(.12)}}
@keyframes crt-refresh{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@keyframes rail-in{from{opacity:0}to{opacity:1}}
@keyframes edge-run{0%{background-position:0 0}55%,100%{background-position:0 100%}}
@keyframes edge-run-x{0%{background-position:0 0}55%,100%{background-position:100% 0}}
@keyframes rail-charge{0%,15%,42%,100%{border-color:rgba(255,93,82,.55);box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 18px rgba(226,35,26,.3),inset 0 1px 0 rgba(255,255,255,.1)}22%{border-color:rgba(255,200,194,.85);box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 24px rgba(255,255,255,.2),0 0 30px rgba(226,35,26,.5),inset 0 1px 0 rgba(255,255,255,.14)}}
@keyframes rail-ping{0%,20%{opacity:0;transform:scale(1)}22%{opacity:.55;transform:scale(1)}58%,100%{opacity:0;transform:scale(1.42)}}
@keyframes rail-breathe{0%,8%,46%,100%{box-shadow:0 24px 60px rgba(18,22,30,.2),0 0 0 0 rgba(226,35,26,0)}24%{box-shadow:0 24px 60px rgba(18,22,30,.2),0 0 18px 1px rgba(226,35,26,.2)}}
@keyframes card-deal{from{opacity:0;transform:translateX(52px) rotate(3deg)}}
@keyframes stamp-in{from{opacity:0;transform:rotate(-14deg) scale(3)}}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes next-ready{0%,100%{box-shadow:0 10px 22px rgba(226,35,26,.25),0 0 0 0 rgba(226,35,26,.45)}50%{box-shadow:0 10px 22px rgba(226,35,26,.25),0 0 0 9px rgba(226,35,26,0)}}
@keyframes obj-collected{0%{box-shadow:0 0 0 0 rgba(255,93,82,.9)}70%{box-shadow:0 0 0 18px rgba(255,93,82,0)}100%{box-shadow:none}}
@keyframes obj-float{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
@keyframes shadow-breathe{0%,100%{opacity:.6}50%{opacity:.9}}
@keyframes obj-enter{0%{opacity:0;transform:translateY(-30px) translateZ(-260px) rotateY(-150deg) rotateX(18deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes coach-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes coach-drag{0%,100%{transform:translateX(-5px) rotate(-8deg)}50%{transform:translateX(6px) rotate(6deg)}}
@keyframes badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,93,82,.75)}50%{box-shadow:0 0 0 5px rgba(255,93,82,0)}}

/* ---------- Responsive ---------- */
@media(hover:none){.board-remove,.board-tint,.board-resize{opacity:1;transform:none}}
@media(max-width:1360px){.topbar-action span{display:none}.topbar-action{width:38px;padding:0;justify-content:center}.board-move-hint{display:none}.board-toolbar{justify-content:flex-end}}
@media(max-width:1220px){.room>.board-panel{flex-grow:29}.room>.terminal-panel{flex-grow:24}.board-move-hint{display:none}.brand-wordmark small{display:none}}
@media(max-width:1100px) and (min-width:941px){.brand-logo{height:20px}.brand{gap:10px}.brand-wordmark{padding-left:10px;font-size:15px}}
@media(max-height:780px) and (min-width:941px){.dock{gap:10px;padding:12px 16px}.answer-row input,.answer-row button{height:46px}.nav-button{height:42px}.card-body{padding-top:14px}.chapter-title{margin-bottom:12px}}
@media(max-width:940px){
  .topbar{flex-wrap:wrap;height:auto;min-height:64px;padding:10px 16px;gap:10px}
  .chapter-nav{order:3;flex-basis:100%;padding:2px 0 4px}
  .topbar-tools{margin-left:auto}
  .room{display:flex;flex-direction:column;height:auto;overflow:visible;padding:12px;gap:12px}
  .story-panel{order:1;height:1000px}
  .room>.board-panel,.room>.terminal-panel,.room>.story-panel{flex:none}
  .terminal-panel{order:2;height:500px}
  .room.terminal-collapsed>.terminal-panel{flex:none;height:72px}
  .room.terminal-collapsed .terminal-rail{flex-direction:row;gap:16px;padding:0 20px}
  .rail-label{order:0;writing-mode:horizontal-tb;transform:none}
  .rail-edge:before,.rail-edge:after{background:linear-gradient(270deg,rgba(255,59,48,0) 40%,#ffd8d2 46%,rgba(255,59,48,.95) 48%,rgba(255,59,48,.35) 56%,rgba(255,59,48,0) 66%) 0 0/300% 100% no-repeat}
  .terminal-panel.is-inviting .rail-edge:before,.terminal-panel.is-inviting .rail-edge:after{animation-name:edge-run-x}
  .room.terminal-collapsed .terminal-rail:before{-webkit-mask:none;mask:none}
  .board-panel{order:3;height:640px}
}
@media(max-width:600px){
  .brand-logo{height:19px}
  .brand{gap:10px}
  .brand-wordmark{padding-left:10px;font-size:15px}
  .chapter-nav{gap:7px}
  .chapter-nav button{width:30px;height:30px;font-size:12px}
  .chapter-nav button:not(:last-child):after{width:7px}
  .room{padding:10px 8px;gap:10px}
  .story-panel{height:960px}
  .card-topline{padding:15px 16px 11px 20px}
  .card-body{padding:16px 20px 20px}
  .brief-heading{font-size:50px}
  .chapter-title{font-size:32px}
  .report-form label{display:block}
  .report-form textarea{margin-top:6px}
  .report-form .story-action{margin-left:0}
  .dock{padding:14px}
  .answer-row button{padding:0 18px}
  .terminal-panel{height:460px}
  .board-panel{height:600px;padding:12px 10px}
  .board-capture{left:12px;right:12px}
  .board-toolbar .tool-button{flex:1;justify-content:center}
}
@media(max-width:420px){
  .topbar{padding:10px 12px}
  .brand-wordmark small{display:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

@keyframes overlay-fade{from{opacity:0}to{opacity:1}}

/* ---------- The report under the glass ---------- */
/* flex + margin:auto, not place-items:center — a centred grid child clips its
   own overflow, which put the stamp and the close button out of reach on a
   long report. This centres when short and scrolls when tall. */
.report-stage{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:22px;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 50% 18%,rgba(34,34,38,.97),rgba(6,6,8,.98) 76%);animation:overlay-fade .45s ease both}
.report-stage:focus{outline:none}
.report-inner{width:min(620px,100%);margin:auto;text-align:left}

.report-sheet{position:relative;padding:30px 32px 26px;border-radius:18px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.55);color:var(--ink);transform-origin:50% 50%;overflow:hidden}
.report-sheet:before{content:"";position:absolute;inset:8px;border:1px solid var(--line);border-radius:12px;pointer-events:none}

.report-head{position:relative;padding-bottom:15px;border-bottom:2px solid var(--ink);margin-bottom:19px}
.report-org{display:flex;align-items:center;gap:9px;margin:0;font:800 12px/1 var(--ui);letter-spacing:.28em;color:var(--accent-hover)}
.report-org:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent)}
.report-title{margin:10px 0 7px;font:800 clamp(21px,3.4vw,27px)/1.15 var(--ui);color:var(--ink);letter-spacing:-.035em}
.report-byline{margin:0;font:600 13.5px/1.4 var(--ui);color:var(--ink-soft)}
.report-fiction{margin:4px 0 0;font:500 12px/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}

.report-paper{position:relative}
.report-section{padding:11px 13px;margin:0 -13px;border-radius:10px;opacity:.45;transition:opacity .7s ease,background .7s ease}
.report-section.is-read{opacity:1;background:var(--soft-2)}
.report-section h3{margin:0 0 6px;font:800 12px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hover)}
.report-section p{margin:0 0 7px;font:400 15.5px/1.75 var(--ui);color:var(--ink)}
.report-fill{padding:1px 7px;border-radius:6px;font-weight:800;white-space:nowrap}
.report-fill.is-right{background:var(--good-soft);color:var(--good);box-shadow:0 0 0 1.5px rgba(31,107,67,.28)}
.report-fill.is-wrong{background:var(--accent-soft);color:var(--accent-hover);box-shadow:0 0 0 1.5px rgba(226,35,26,.3);text-decoration:underline wavy var(--accent) 1.5px;text-underline-offset:3px}

.report-stamp{margin:24px 0 0;padding:13px 19px;border:2.5px solid #fff;border-radius:10px;color:#fff;font:800 clamp(17px,3.2vw,24px)/1.15 var(--ui);letter-spacing:.08em;text-transform:uppercase;text-align:center;opacity:0;transform:rotate(-9deg) scale(2.1)}
.report-stamp.is-in{animation:report-slam .55s cubic-bezier(.2,1.5,.4,1) both}
.report-stage.is-returned .report-stamp{border-color:var(--accent-dark);color:var(--accent-dark)}
.report-verdict-line{margin:17px 0 0;opacity:0;font:400 15px/1.6 var(--ui);color:#c9cbd0;transition:opacity .45s ease}
.report-verdict-line.is-in{opacity:1}
.report-choice{display:flex;flex-wrap:wrap;align-items:center;gap:11px}
.report-back{margin-top:24px;padding:14px 22px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.04);color:#d9dadc;font:600 14px/1 var(--ui);letter-spacing:.01em;transition:background .2s,border-color .2s,color .2s}
.report-back:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}
.report-done{margin-top:24px;padding:14px 24px;border:1px solid #fff;border-radius:999px;background:#fff;color:var(--ink);font:700 14.5px/1 var(--ui);letter-spacing:.02em;box-shadow:0 14px 34px rgba(0,0,0,.45);transition:box-shadow .2s,transform .2s var(--ease)}
.report-done:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,0,0,.5),0 0 0 6px rgba(226,35,26,.32)}

/* The finding, as a form with gaps. */
.form-block{margin:0 0 15px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.form-block legend{padding:0 7px;font:800 12px/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-hover)}
.form-line{margin:0 0 9px;font:400 15.5px/2.15 var(--ui);color:var(--ink-soft)}
.form-line:last-child{margin-bottom:0}
.form-gap{margin:0 3px;padding:3px 9px;border:0;border-bottom:2px dashed var(--line-strong);border-radius:8px 8px 0 0;background:var(--soft-2);color:var(--muted);font:600 14px/1.5 var(--ui);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.form-gap:hover{background:#e7e9ec}
.form-gap:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.form-gap.is-set{border-bottom-style:solid;border-bottom-color:var(--ink);background:#eceef1;color:var(--ink);font-weight:700}

/* The signature field on the final card. */
.report-name{display:block;margin:4px 0 2px}
.report-name input{width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--ink);font:400 15px/1.5 var(--ui)}
.report-name input:focus,.report-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.story-primary{display:flex;width:100%;margin-top:11px}
.story-action.story-quiet{display:flex;width:100%;margin-top:8px;background:#fff;color:var(--ink);font-size:13px;box-shadow:inset 0 0 0 1px var(--line-strong)}
.story-action.story-quiet:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}

@keyframes report-slam{0%{opacity:0;transform:rotate(-9deg) scale(2.1)}60%{opacity:1;transform:rotate(-3deg) scale(.95)}100%{opacity:1;transform:rotate(-2.5deg) scale(1)}}
@keyframes report-pick{0%{transform:scale(1)}45%{transform:scale(1.085)}100%{transform:scale(1)}}

/* Reduced motion: room.css disables animation globally, so every element above
   must read correctly at rest. The sheet sits at its resting scale, the glass
   never appears, and each supporting phrase is simply bold and highlighted. */
@media(prefers-reduced-motion:reduce){
  .report-stamp{opacity:1;transform:rotate(-2.5deg)}
  .report-verdict-line{opacity:1}
}

@media(max-width:560px){
  .report-inner{width:100%}
  .report-sheet{padding:22px 18px 20px}
  .report-stamp{font-size:15.5px;letter-spacing:.03em}
}

/* ---------- Exhibits flying from the board into the finding ---------- */
.report-exhibits{margin-top:19px;padding-top:15px;border-top:1px dashed var(--line-strong)}
.report-exhibit-head{margin:0 0 10px;font:800 12px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hover)}
.report-evidence{display:flex;flex-wrap:wrap;gap:11px}
.report-noexhibit{margin:0;font:400 13.5px/1.5 var(--ui);font-style:italic;color:var(--muted)}

.report-exhibit{width:104px;margin:0;opacity:0;transform:translateY(9px) rotate(-1.5deg);transition:opacity .4s ease,transform .4s ease}
.report-exhibit:nth-child(even){transform:translateY(9px) rotate(1.8deg)}
.report-exhibit.is-placed{opacity:1;transform:rotate(-1.5deg)}
.report-exhibit:nth-child(even).is-placed{transform:rotate(1.8deg)}
.report-exhibit img{display:block;width:100%;aspect-ratio:1.3;object-fit:cover;border:4px solid #fff;border-radius:4px;box-shadow:0 6px 14px rgba(18,22,30,.2),0 0 0 1px rgba(5,5,5,.06)}
.report-exhibit figcaption{margin-top:5px;font:600 12px/1.3 var(--mono);color:var(--muted);overflow-wrap:anywhere}

/* While the finding is on screen the board stays uncovered to its left, and a
   photograph that has been lifted into the report reads as taken, not missing. */
.report-stage.is-beside-board{right:0}
.board-item.is-pulled{opacity:.3;filter:saturate(.45);transition:opacity .5s ease,filter .5s ease}
.board-item.is-pulled .board-pin{opacity:.5}

/* The photograph in transit, lifted off the board. */
.report-flier{position:fixed;z-index:400;margin:0;object-fit:cover;border:4px solid #fff;border-radius:4px;box-shadow:0 22px 44px rgba(0,0,0,.5);opacity:.96;transform-origin:top left;pointer-events:none;
  transition:transform .62s cubic-bezier(.34,.02,.2,1),opacity .62s ease}

/* Reduced motion: no flight, no fly-in. The exhibits are simply present, the
   moon and the closing lines are shown at rest, and every step still resolves. */
@media(prefers-reduced-motion:reduce){
  .report-exhibit{opacity:1;transform:none}
  .report-flier{display:none}
}

@media(max-width:560px){
  .report-exhibit{width:84px}
}

/* ---------- The closing takeover ----------
   It borrows the opening's own variables and its .op-line / .op-em treatment,
   so the last three lines of the case look like the first three. */
.op-outro{
  --op-cream:#f4f4f2;--op-accent:#ff5d52;--op-red:#e2231a;--op-dim:#a3a6ac;
  --op-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:fixed;inset:0;z-index:400;display:grid;grid-template-rows:1fr auto 1fr;
  padding:clamp(22px,5vw,72px);overflow:hidden;background:#050506;color:var(--op-cream);
  isolation:isolate;opacity:0;transition:opacity 1s ease}
.op-outro:focus{outline:none}
.op-outro.is-live{opacity:1}

/* Moon surface, shared by the opening and the closing: limb-darkened disc,
   hand-placed maria, a fractal-noise mottle and a fine grain. All inline, so it
   works offline. */
.moon-surface{overflow:hidden;background:radial-gradient(ellipse 30% 24% at 34% 30%,rgba(98,102,110,.42),rgba(98,102,110,0) 100%),radial-gradient(ellipse 22% 30% at 24% 52%,rgba(98,102,110,.36),rgba(98,102,110,0) 100%),radial-gradient(ellipse 16% 13% at 56% 33%,rgba(98,102,110,.4),rgba(98,102,110,0) 100%),radial-gradient(ellipse 15% 12% at 61% 47%,rgba(98,102,110,.34),rgba(98,102,110,0) 100%),radial-gradient(ellipse 7% 8% at 79% 39%,rgba(90,94,102,.42),rgba(90,94,102,0) 100%),radial-gradient(ellipse 17% 11% at 42% 66%,rgba(98,102,110,.26),rgba(98,102,110,0) 100%),radial-gradient(circle at 46% 80%,rgba(255,255,255,.9) 0 1.6%,rgba(255,255,255,0) 4%),radial-gradient(circle at 42% 40%,#fefefd 0,#f3f3f0 44%,#dddedb 80%,#b9bbbe 100%)}
.moon-surface:before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.5;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .44 0 0 0 0 .48 3.4 0 0 0 -1.62'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23m)'/%3E%3C/svg%3E") center/100% 100%}
.moon-surface:after{content:"";position:absolute;inset:0;border-radius:50%;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .31 0 0 0 0 .33 0 0 0 .45 -.2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") center/100% 100%,radial-gradient(circle at 42% 40%,rgba(0,0,0,0) 56%,rgba(20,22,28,.28) 100%);box-shadow:inset -6px -8px 18px rgba(30,32,40,.22),inset 3px 4px 10px rgba(255,255,255,.5)}
.outro-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.outro-sky:before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 12%,rgba(226,35,26,.2),rgba(226,35,26,0) 38%),radial-gradient(ellipse at 50% 22%,#18181b 0,#0a0a0c 58%,#050506 100%)}
.outro-moon{position:absolute;left:50%;top:clamp(42px,11vh,118px);width:clamp(74px,9vw,128px);aspect-ratio:1;
  margin-left:calc(clamp(74px,9vw,128px) / -2);border-radius:50%;
  box-shadow:0 0 36px 4px rgba(255,255,255,.24),0 0 150px rgba(226,35,26,.18);
  opacity:0;transform:translateY(26px) scale(.9);transition:opacity 1.6s ease .2s,transform 1.8s cubic-bezier(.2,.7,.2,1) .2s}
.op-outro.is-live .outro-moon{opacity:1;transform:none}

.outro-bird{position:absolute;left:0;top:clamp(58px,13vh,140px);width:clamp(46px,5vw,76px);
  fill:#000;opacity:0;filter:drop-shadow(0 -1px 0 rgba(255,255,255,.35)) drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.outro-bird.is-flying{animation:outro-cross 2.6s cubic-bezier(.36,0,.5,1) both}

.outro-body{grid-row:2;position:relative;z-index:1;max-width:min(1100px,100%);margin:0 auto;width:100%;text-align:center}
.op-outro .op-line{min-height:3.4em;text-align:center;text-shadow:0 2px 34px #000}
.outro-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.outro-seal{margin-top:clamp(18px,4vh,44px);opacity:0;transform:translateY(10px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.outro-seal.is-in{opacity:1;transform:none}
.outro-case{display:inline-flex;align-items:center;gap:12px;margin:0;color:var(--op-accent);font:800 clamp(12px,1.3vw,15px)/1 var(--op-sans);letter-spacing:.38em;text-transform:uppercase}
.outro-case:before{content:"";width:9px;height:9px;border-radius:2px;background:var(--op-red)}
.outro-closer{margin:14px 0 0;color:var(--op-cream);font:600 clamp(17px,2vw,24px)/1.35 var(--op-sans);letter-spacing:-.02em}
.outro-done{margin-top:clamp(22px,4vh,40px);padding:18px 32px;border:1px solid #fff;border-radius:999px;
  background:#fff;color:#0d0d0f;
  font:800 14px/1 var(--op-sans);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.06);transition:transform .2s,box-shadow .2s}
.outro-done:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 0 6px rgba(226,35,26,.32)}
.outro-skip{position:absolute;right:clamp(18px,4vw,48px);top:clamp(18px,4vh,40px);z-index:2;
  padding:11px 19px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.04);
  color:var(--op-dim);font:700 12px/1 var(--op-sans);letter-spacing:.14em;text-transform:uppercase;
  transition:color .2s,border-color .2s}
.outro-skip:hover{color:#fff;border-color:rgba(255,255,255,.5)}

@keyframes outro-cross{
  0%{opacity:0;transform:translateX(-16vw) translateY(22px) rotate(-12deg) scale(.55)}
  12%{opacity:1}
  52%{transform:translateX(44vw) translateY(-26px) rotate(5deg) scale(1)}
  88%{opacity:1}
  100%{opacity:0;transform:translateX(116vw) translateY(14px) rotate(-7deg) scale(.68)}
}

/* Reduced motion: no typing, no flight. Every line is already written, the moon
   is up, and the seal is shown. room.css disables animation globally, so each
   element must read correctly at rest. */
@media(prefers-reduced-motion:reduce){
  .op-outro{opacity:1}
  .outro-moon{opacity:1;transform:none}
  .outro-bird{display:none}
  .outro-seal{opacity:1;transform:none}
}

@media(max-width:560px){
  .op-outro{grid-template-rows:auto 1fr auto}
  .op-outro .op-line{min-height:4.6em;font-size:clamp(23px,6.4vw,34px)}
  .outro-skip{top:auto;bottom:clamp(14px,3vh,24px);right:50%;transform:translateX(50%)}
}
.op-outro.is-cut{transition:none}

/* ---------- The closing cinematic (tools/closing.js) ----------
   Black, letterboxed and quiet: one red accent, Inter for statements and
   JetBrains Mono for the readouts. The wall is a plane in CSS 3D that the
   camera glides along; the globe is a canvas; the map is inline SVG. */
.cine{--c-red:#e2231a;--c-hot:#ff5d52;--c-ink:#f4f4f2;--c-dim:#8b8e95;--c-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--c-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  position:fixed;inset:0;z-index:410;overflow:hidden;background:transparent;color:var(--c-ink);font-family:var(--c-sans);isolation:isolate}
.cine:focus{outline:none}
.cine.is-dark{background:#040405}
.cine > :not(.cine-shutter):not(.cine-flash):not(.cine-skip){transition:opacity .9s ease}
.cine.is-ending > :not(.cine-skip){opacity:0!important}
/* 1 · Switch-off */
.cine-shutter{position:absolute;left:0;right:0;z-index:8;height:50.5%;background:#040405;transition:transform .48s cubic-bezier(.7,0,.84,0)}
.cine-shutter-top{top:0;transform:translateY(-101%)}
.cine-shutter-bottom{bottom:0;transform:translateY(101%)}
.cine.is-shutting .cine-shutter{transform:none}
.cine.is-dark .cine-shutter{opacity:0;transition:opacity .2s}
.cine-flash{position:absolute;left:0;right:0;top:50%;z-index:9;height:3px;margin-top:-1.5px;background:#fff;box-shadow:0 0 14px 4px rgba(255,255,255,.8),0 0 60px 18px rgba(255,93,82,.35);opacity:0;pointer-events:none}
.cine-flash.is-on{animation:cine-collapse .95s cubic-bezier(.55,0,.75,.2) forwards}
body.cine-flare .topbar,body.cine-flare .room{filter:brightness(1.8) contrast(1.15) saturate(.5);transition:filter .4s ease-in}
/* Letterbox and readouts */
.cine-bars:before,.cine-bars:after{content:"";position:absolute;left:0;right:0;z-index:6;height:7vh;background:#000;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cine-bars:before{top:0;transform:translateY(-100%)}
.cine-bars:after{bottom:0;transform:translateY(100%)}
.cine.is-framed .cine-bars:before,.cine.is-framed .cine-bars:after{transform:none}
.cine-hud{position:absolute;inset:calc(7vh + 16px) clamp(18px,3vw,40px);z-index:7;pointer-events:none;color:var(--c-dim);font:600 12px/1.5 var(--c-mono);letter-spacing:.16em;text-transform:uppercase;opacity:0}
.cine.is-framed .cine-hud{opacity:1}
.cine-hud-tl{position:absolute;left:0;top:0}
.cine-hud-bl{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:10px;color:var(--c-ink)}
.cine-hud-bl:not(:empty):before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c-red);box-shadow:0 0 10px rgba(226,35,26,.8);animation:caret-blink 1.2s steps(1) infinite}
.cine-hud-br{position:absolute;right:0;bottom:0;text-align:right;white-space:pre;color:var(--c-ink)}
.cine-skip{position:absolute;right:clamp(18px,3vw,40px);top:calc(7vh + 8px);z-index:10;padding:10px 18px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.04);color:var(--c-dim);font:700 12px/1 var(--c-sans);letter-spacing:.14em;text-transform:uppercase;transition:color .2s,border-color .2s}
.cine-skip:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.cine:not(.is-framed) .cine-skip{top:clamp(16px,3vh,28px)}
/* 2 · The wall */
.cine-wall{position:absolute;inset:0;z-index:1;perspective:1100px;opacity:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(226,35,26,.08),rgba(226,35,26,0) 70%)}
.cine-wall.is-on{opacity:1}
.cine-plane{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.cine-string{position:absolute;left:0;top:0;overflow:visible;transform:translateZ(-6px)}
.cine-string path{fill:none;stroke:var(--c-red);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 5px rgba(226,35,26,.85))}
.cine-node{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:10px;transform:translate(-50%,-50%);opacity:.28;filter:saturate(.3) brightness(.6);transition:opacity .5s,filter .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.cine-node.is-lit{opacity:1;filter:none;transform:translate(-50%,-50%) scale(1.05)}
.cine-node.is-past{opacity:.75;transform:translate(-50%,-50%)}
.cine-kicker{margin:0;color:var(--c-hot);font:700 12px/1 var(--c-mono);letter-spacing:.18em;text-transform:uppercase;text-shadow:0 0 10px rgba(226,35,26,.6)}
.cine-print{position:relative;margin:0;padding:10px 10px 12px;background:#f4f3ef;box-shadow:0 34px 70px rgba(0,0,0,.7)}
.cine-print img{display:block;width:clamp(170px,19vw,250px);height:auto;background:#1b1b1e}
.cine-print figcaption{min-height:1.4em;margin-top:9px;color:#1a1a1d;font:600 13px/1.3 var(--c-mono)}
.cine-pin{position:absolute;left:50%;top:-9px;z-index:1;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#ff958c 30%,#e2231a 70%);box-shadow:0 4px 8px rgba(0,0,0,.6)}
.cine-pin.is-grey{background:radial-gradient(circle at 35% 30%,#fff 0 16%,#a3a6ac 32%,#55585e 70%)}
.cine-term{width:min(480px,76vw);padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,0) 1px 3px),rgba(9,9,11,.94);box-shadow:0 34px 80px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.6);font:500 14px/1.6 var(--c-mono);color:#d9dadc;text-shadow:0 0 7px rgba(255,255,255,.18)}
.cine-term p{margin:0;overflow-wrap:anywhere}
.cine-ps1{color:var(--c-hot);text-shadow:0 0 8px rgba(255,93,82,.45)}
.cine-cmd{color:#fff}
.cine-out{margin-top:6px!important;opacity:0;transition:opacity .25s}
.cine-out.is-in{opacity:1}
.cine-label{color:var(--c-dim)}
.cine-hit{color:#fff;font-weight:700}
.cine-node.is-solved .cine-hit{color:var(--c-hot);text-shadow:0 0 12px rgba(255,93,82,.55)}
.cine-node.is-photo.is-solved figcaption{color:#c4170f}
.cine-note{position:absolute;width:190px;min-height:140px;padding:16px 16px 18px;background:var(--tone,#fde68a);color:#1a1a1d;font:500 15px/1.4 var(--c-sans);transform:translate(-50%,-50%) translateZ(var(--z)) rotate(var(--r));opacity:.5;filter:blur(1.2px);box-shadow:0 26px 50px rgba(0,0,0,.6);overflow-wrap:anywhere}
.cine-note[data-paper="1"]{--tone:#fca5a5}
.cine-note[data-paper="2"]{--tone:#93c5fd}
.cine-note[data-paper="3"]{--tone:#86efac}
.cine-note[data-paper="4"]{--tone:#18181b;color:#f4f4f2}
/* 3 · Globe and map */
.cine-globe{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;transition:opacity .8s}
.cine-globe.is-on{opacity:1}
.cine-map{position:absolute;inset:-50%;z-index:3;opacity:0;transform-origin:50% 50%;-webkit-mask:radial-gradient(ellipse closest-side,#000 62%,rgba(0,0,0,0) 100%);mask:radial-gradient(ellipse closest-side,#000 62%,rgba(0,0,0,0) 100%)}
.cine-mapsvg{display:block;width:100%;height:100%}
.map-streets{fill:none;stroke:rgba(255,255,255,.1);stroke-width:2}
.map-road{fill:none;stroke:rgba(255,255,255,.2);stroke-width:5;stroke-linecap:round}
.map-river{fill:#0d1720;stroke:rgba(140,190,230,.35);stroke-width:1.5}
.map-tower path,.map-tower rect,.map-tower circle,.map-building{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.4);stroke-width:1.5}
.map-ship{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.55);stroke-width:1.5}
.map-bridge rect{fill:#2a2b30;stroke:rgba(255,255,255,.6);stroke-width:1.5}
.map-bridge .map-bridge-tower{fill:#3a3b41}
.map-bridge-gap{stroke:#0d1720;stroke-width:3}
.map-park{fill:rgba(134,239,172,.09);stroke:rgba(134,239,172,.45);stroke-width:1.5;transition:fill .6s,stroke .6s}
.cine-map.is-pinned .map-park{fill:rgba(226,35,26,.24);stroke:var(--c-hot)}
.map-label{fill:rgba(255,255,255,.5);font:600 15px/1 var(--c-mono);letter-spacing:.2em}
.map-small{font-size:13px}
.map-river-label{fill:rgba(140,190,230,.55);letter-spacing:.5em}
.map-target{fill:var(--c-hot);font-size:17px;opacity:0;transition:opacity .5s .5s}
.cine-map.is-pinned .map-target{opacity:1}
.map-pin{opacity:0}
.map-pin-head{fill:var(--c-red);stroke:#fff;stroke-width:2}
.map-pin-dot{fill:#fff}
.map-pin-ring{fill:none;stroke:var(--c-hot);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.cine-map.is-pinned .map-pin{opacity:1;animation:cine-pin-drop .55s cubic-bezier(.3,1.5,.5,1) both}
.cine-map.is-pinned .map-pin-ring{animation:cine-ring 1.6s ease-out .45s infinite}
.cine-map.is-pinned .map-pin-ring.is-late{animation-delay:1.25s}
/* Big statements */
.cine-caption{position:absolute;left:50%;top:50%;z-index:5;width:min(92vw,980px);text-align:center;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.cine-caption.is-low{top:auto;bottom:calc(7vh + 54px);transform:translateX(-50%)}
.cine-caption.is-in{opacity:1;animation:cine-cap-in .8s cubic-bezier(.2,.8,.2,1) both}
.cine-caption strong{display:block;color:#fff;font:800 clamp(34px,5.4vw,78px)/1 var(--c-sans);letter-spacing:-.045em;text-shadow:0 6px 40px rgba(0,0,0,.8)}
.cine-caption span{display:block;margin-top:14px;color:var(--c-hot);font:700 13px/1.4 var(--c-mono);letter-spacing:.24em;text-transform:uppercase}
@keyframes cine-collapse{0%{opacity:1;transform:scale(1,1)}55%{opacity:1;transform:scale(.012,1)}70%{opacity:1;transform:scale(.006,2.4)}100%{opacity:0;transform:scale(.004,.6)}}
@keyframes cine-pin-drop{from{opacity:0;transform:translateY(-90px)}}
@keyframes cine-ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(3.2)}}
@keyframes cine-cap-in{from{opacity:0;filter:blur(10px);letter-spacing:.02em}}
@media(max-width:560px){.cine-hud-tl{display:none}.cine-hud{letter-spacing:.1em}}