:root {
  color-scheme: dark;
  --ink: #06121a;
  --ink-2: #0b1c27;
  --panel: #0b1c27;
  --panel-2: #102834;
  --metal: #e8eef2;
  --silver: #b9c8d1;
  --steel: #7792a2;
  --cyan: #78e5ff;
  --teal: #39f0e4;
  --violet: #b8a7ff;
  --amber: #f3c47a;
  --danger: #ff7f8a;
  --line: rgba(185,216,230,.22);
  --line-strong: rgba(120,229,255,.48);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--metal);
  font-family: var(--font);
  line-height: 1.55;
  background:
    radial-gradient(circle at 18% 14%, rgba(44,137,164,.14), transparent 28rem),
    radial-gradient(circle at 84% 80%, rgba(57,240,228,.06), transparent 25rem),
    linear-gradient(150deg,#07131d,#091922 52%,#061119);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(120,229,255,.05) 1px, transparent 1px),
    linear-gradient(90deg,rgba(120,229,255,.04) 1px,transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom,transparent,#000 13%,#000 85%,transparent);
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.eyebrow { color: var(--cyan); font: 700 .69rem/1.25 var(--mono); text-transform: uppercase; letter-spacing: .14em; }

.game-shell { width: min(1280px, calc(100vw - 30px)); margin: 0 auto; padding: 14px 0 34px; position: relative; z-index: 1; }
.game-topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.game-brand { display: flex; align-items: baseline; gap: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.game-brand::before { content:""; width: 17px; height: 17px; border:1px solid var(--cyan); transform: rotate(45deg); box-shadow:0 0 15px rgba(120,229,255,.3); }
.game-brand strong { font-size: .9rem; }
.game-brand span { color: var(--steel); font-size: .68rem; }
.back-link { color: var(--silver); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .48rem .75rem; font-size: .75rem; }
.back-link:hover,.back-link:focus-visible { color: var(--cyan); border-color: var(--line-strong); }

.game-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.3rem; align-items: end; padding: 42px 0 25px; }
.game-intro h1 { margin: .2rem 0 0; font-size: clamp(3rem,7vw,6.6rem); line-height:.83; letter-spacing:-.055em; background:linear-gradient(#fff,#aac0cb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.game-intro p { margin: 0; color: var(--silver); max-width: 62ch; }
.case-note { margin: 0 0 20px; border-left: 2px solid var(--line-strong); padding: .3rem 0 .3rem 1rem; color: var(--steel); font-size: .8rem; }

.case-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-bottom: 17px; }
.case-card { position: relative; min-height: 245px; border:1px solid var(--line); border-radius: 18px; overflow:hidden; background:linear-gradient(145deg,rgba(15,38,50,.94),rgba(6,18,26,.94)); padding: 18px; display:flex; flex-direction:column; box-shadow: inset 0 0 0 1px rgba(255,255,255,.018); }
.case-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 90% 15%, var(--case-glow, rgba(120,229,255,.13)), transparent 42%); }
.case-card::after { content:""; position:absolute; inset:auto 14px 12px auto; width:90px; height:90px; border:1px solid rgba(120,229,255,.08); transform:rotate(45deg); }
.case-card--complete { border-color: rgba(57,240,228,.38); }
.case-card__top { display:flex; justify-content:space-between; gap:.7rem; position:relative; z-index:1; }
.case-card__status { font:700 .61rem var(--mono); color:var(--teal); text-transform:uppercase; letter-spacing:.09em; }
.case-card h2 { margin:.65rem 0 .3rem; font-size:clamp(1.55rem,3vw,2.35rem); line-height:.95; letter-spacing:-.035em; text-transform:uppercase; position:relative; z-index:1; }
.case-card__avatar { color:var(--cyan); font:700 .72rem var(--mono); text-transform:uppercase; letter-spacing:.08em; position:relative; z-index:1; }
.case-card p { color:var(--silver); font-size:.82rem; position:relative; z-index:1; }
.case-card__meta { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:auto; position:relative; z-index:1; }
.case-card__meta span { border:1px solid var(--line); border-radius:8px; padding:.4rem .5rem; color:var(--steel); font-size:.67rem; }
.case-card button { position:relative; z-index:2; margin-top:12px; min-height:42px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(120,229,255,.07); color:var(--metal); cursor:pointer; font-weight:700; }
.case-card button:hover,.case-card button:focus-visible { background:rgba(120,229,255,.13); }

.game-stage { display:none; grid-template-columns:minmax(0,1fr) 290px; gap:13px; align-items:stretch; }
.game-stage.is-active { display:grid; }
.canvas-wrap { position:relative; min-width:0; overflow:hidden; border:1px solid var(--line-strong); border-radius:17px; background:#07151e; min-height:440px; box-shadow:0 20px 55px rgba(0,0,0,.28); }
canvas { display:block; width:100%; height:auto; max-height:calc(100dvh - 170px); object-fit:contain; image-rendering:auto; background:#07151e; }
.game-hud { position:absolute; left:10px; top:10px; right:10px; display:flex; gap:7px; flex-wrap:wrap; pointer-events:none; }
.hud-chip { border:1px solid rgba(120,229,255,.22); border-radius:999px; padding:.37rem .55rem; background:rgba(4,15,22,.78); backdrop-filter:blur(5px); color:var(--steel); font: .61rem var(--mono); text-transform:uppercase; letter-spacing:.07em; }
.hud-chip strong { color:var(--metal); }
.world-banner { position:absolute; top:56px; left:50%; transform:translateX(-50%) translateY(-8px); opacity:0; padding:.45rem .7rem; border:1px solid var(--line); border-radius:8px; background:rgba(4,15,22,.84); font:700 .61rem var(--mono); letter-spacing:.12em; text-transform:uppercase; transition:opacity .35s,transform .35s; pointer-events:none; }
.world-banner.is-visible { opacity:1; transform:translateX(-50%) translateY(0); }

.side-panel { min-width:0; border:1px solid var(--line); border-radius:17px; padding:17px; background:linear-gradient(180deg,rgba(13,34,45,.88),rgba(6,18,26,.92)); display:flex; flex-direction:column; gap:14px; }
.side-panel h3 { margin:.25rem 0 .45rem; font-size:1.55rem; line-height:1; text-transform:uppercase; }
.side-panel p { margin:0; color:var(--silver); font-size:.82rem; }
.objective-list { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.objective-list li { padding:.58rem .62rem; border:1px solid var(--line); border-radius:9px; color:var(--steel); font-size:.75rem; }
.objective-list li.done { color:var(--teal); border-color:rgba(57,240,228,.26); background:rgba(57,240,228,.025); }
.controls { margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.controls span { border:1px solid var(--line); border-radius:8px; padding:.5rem; text-align:center; color:var(--steel); font-size:.68rem; }
.end-game { width:100%; min-height:42px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--silver); cursor:pointer; }
.end-game:hover,.end-game:focus-visible { border-color:var(--line-strong); color:var(--metal); }

.dialogue { position:absolute; left:14px; right:14px; bottom:14px; padding:13px 15px; border:1px solid var(--line-strong); border-radius:12px; background:rgba(4,15,23,.96); display:none; box-shadow:0 16px 42px rgba(0,0,0,.4); }
.dialogue.is-open { display:block; }
.dialogue > div { display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.dialogue strong { color:var(--cyan); }
.dialogue span { color:var(--steel); font: .63rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.dialogue p { margin:.35rem 0 0; color:var(--silver); }
.dialogue small { display:block; margin-top:.55rem; color:var(--steel); }

.touch-controls { display:none; margin-top:10px; grid-template-columns:repeat(4,52px); grid-template-rows:repeat(2,48px); gap:6px; justify-content:center; }
.touch-controls button { border:1px solid var(--line); border-radius:10px; background:rgba(11,28,39,.92); color:var(--metal); }
.touch-controls .up { grid-column:2; }
.touch-controls .left { grid-column:1; grid-row:2; }
.touch-controls .down { grid-column:2; grid-row:2; }
.touch-controls .right { grid-column:3; grid-row:2; }
.touch-controls .ability { grid-column:4; grid-row:1; color:var(--cyan); }
.touch-controls .interact { grid-column:4; grid-row:2; color:var(--teal); }

body.is-briefing-open, body.is-puzzle-open, body.is-debrief-open { overflow:hidden; }
.modal { position:fixed; inset:0; z-index:20; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(2,8,12,.82); backdrop-filter:blur(12px) saturate(.82); -webkit-backdrop-filter:blur(12px) saturate(.82); }
.modal.is-open { display:flex; }
.modal-card { width:min(1080px,100%); max-height:calc(100dvh - 36px); border:1px solid var(--line-strong); border-radius:22px; background:linear-gradient(145deg,#0d2430,#06121a 58%); box-shadow:0 36px 120px rgba(0,0,0,.68),inset 0 0 0 1px rgba(255,255,255,.02); overflow:auto; }
.briefing-channel { min-height:46px; display:flex; align-items:center; gap:.7rem; padding:0 18px; border-bottom:1px solid var(--line); color:var(--cyan); font:700 .68rem var(--mono); letter-spacing:.12em; text-transform:uppercase; background:linear-gradient(90deg,rgba(120,229,255,.08),transparent 38%,rgba(57,240,228,.04)); }
.briefing-channel strong { margin-left:auto; color:var(--teal); }
.briefing-channel__pulse { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(57,240,228,.45); animation:securePulse 1.9s infinite; }
@keyframes securePulse { 70%{box-shadow:0 0 0 10px rgba(57,240,228,0)}100%{box-shadow:0 0 0 0 rgba(57,240,228,0)} }
.briefing-layout { display:grid; grid-template-columns:minmax(250px,320px) minmax(0,1fr); }
.hale-profile { position:relative; padding:20px; border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(120,229,255,.035),rgba(3,12,18,.32)); }
.hale-portrait-shell { position:relative; aspect-ratio:1; border:1px solid var(--line-strong); border-radius:14px; overflow:hidden; background:#07131d; box-shadow:inset 0 0 38px rgba(120,229,255,.07); margin-bottom:18px; }
.hale-portrait-shell::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 58%,rgba(4,15,22,.42)); }
.hale-portrait-shell img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9) contrast(1.04); }
.hale-portrait-scan { position:absolute; z-index:2; left:0; right:0; top:-14%; height:1px; background:var(--cyan); box-shadow:0 0 10px var(--cyan),0 0 26px rgba(120,229,255,.55); animation:portraitScan 4.4s ease-in-out infinite; }
@keyframes portraitScan { 0%,10%{top:-8%;opacity:0}18%{opacity:.9}78%{top:104%;opacity:.7}90%,100%{top:104%;opacity:0} }
.hale-profile h2 { margin:.25rem 0 .5rem; font-size:2rem; letter-spacing:-.03em; text-transform:uppercase; }
.hale-profile p { color:var(--silver); font-size:.84rem; }
.transmission-state { margin-top:18px; display:grid; grid-template-columns:1fr auto; gap:8px 12px; padding-top:15px; border-top:1px solid var(--line); font:.66rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.transmission-state span { color:var(--steel); }.transmission-state strong { color:var(--teal); }
.briefing-main { padding:26px 28px 24px; min-width:0; }
.briefing-title-row { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding-bottom:17px; border-bottom:1px solid var(--line); }
.briefing-title-row h2 { margin:.35rem 0 0; font-size:clamp(1.55rem,3vw,2.4rem); line-height:1.05; }
.briefing-clearance { flex:0 0 auto; border:1px solid var(--line-strong); border-radius:999px; padding:.45rem .65rem; color:var(--cyan); font:700 .64rem var(--mono); }
.briefing-facts { margin:16px 0 0; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.briefing-facts>div { padding:12px 14px; }.briefing-facts>div:nth-child(odd){border-right:1px solid var(--line)}.briefing-facts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.briefing-facts dt { color:var(--steel); font:700 .62rem var(--mono); letter-spacing:.09em; text-transform:uppercase; }.briefing-facts dd { margin:.35rem 0 0; color:var(--metal); font-size:.83rem; }
.briefing-copy { margin-top:20px; }.briefing-lines { display:grid; gap:9px; margin-top:9px; }.briefing-lines p { margin:0; padding:9px 12px; border-left:2px solid rgba(120,229,255,.34); background:rgba(120,229,255,.025); color:var(--silver); font-size:.86rem; }
.briefing-objective { margin-top:18px; padding:14px 15px; border:1px solid rgba(57,240,228,.22); border-radius:12px; background:rgba(57,240,228,.035); }.briefing-objective p{margin:.45rem 0 0;color:var(--metal);font-size:.87rem}
.modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:0 28px 26px 368px; }.modal-actions button{min-height:44px;border-radius:999px;padding:.68rem 1rem;cursor:pointer}.primary{border:0;background:linear-gradient(135deg,var(--metal),var(--cyan));color:#041118;font-weight:750}.secondary{border:1px solid var(--line);background:transparent;color:var(--silver)}

.puzzle-card,.debrief-card { width:min(720px,100%); padding:clamp(22px,4vw,40px); }
.puzzle-card h2,.debrief-card h2 { margin:.35rem 0 .8rem; font-size:clamp(2rem,5vw,3.6rem); line-height:.95; letter-spacing:-.04em; text-transform:uppercase; }
.puzzle-card>p,.debrief-card>p { color:var(--silver); }
.puzzle-body { margin:20px 0; }
.puzzle-grid { display:grid; grid-template-columns:repeat(3,minmax(64px,1fr)); gap:8px; }
.puzzle-grid button { min-height:76px; border:1px solid var(--line); border-radius:12px; background:rgba(120,229,255,.035); color:var(--steel); cursor:pointer; font:700 .8rem var(--mono); }
.puzzle-grid button.is-on { border-color:var(--teal); color:var(--teal); background:rgba(57,240,228,.10); box-shadow:inset 0 0 22px rgba(57,240,228,.06); }
.order-options,.choice-options { display:grid; gap:8px; }
.order-options button,.choice-options button { min-height:48px; text-align:left; padding:.7rem .85rem; border:1px solid var(--line); border-radius:10px; background:rgba(120,229,255,.025); color:var(--silver); cursor:pointer; }
.order-options button.is-selected,.choice-options button.is-selected { color:var(--cyan); border-color:var(--line-strong); background:rgba(120,229,255,.08); }
.order-sequence { min-height:55px; display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; padding:10px; border:1px dashed var(--line); border-radius:10px; }
.order-sequence span { border:1px solid var(--line); border-radius:999px; padding:.35rem .5rem; color:var(--cyan); font-size:.72rem; }
.puzzle-hint { color:var(--amber); font-size:.78rem; border-left:2px solid rgba(243,196,122,.4); padding-left:.75rem; }
.puzzle-feedback { min-height:1.5em; color:var(--steel); font-size:.8rem; }
.puzzle-feedback.is-error { color:var(--danger); }.puzzle-feedback.is-success { color:var(--teal); }
.puzzle-actions { padding:8px 0 0; }
.debrief-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0; }.debrief-grid div{border:1px solid var(--line);border-radius:10px;padding:.7rem}.debrief-grid span{display:block;color:var(--steel);font:.6rem var(--mono);text-transform:uppercase;letter-spacing:.08em}.debrief-grid strong{display:block;margin-top:.25rem;color:var(--metal)}

@media(max-width:900px){
  .case-grid{grid-template-columns:1fr}.game-stage{grid-template-columns:1fr}.canvas-wrap{min-height:0}.side-panel{min-height:0}.controls{display:none}
}
@media(max-width:850px){
  html,body{min-height:100%}body{min-height:100dvh}.game-shell{width:100%;min-height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.game-topbar{min-height:52px}.game-brand span{display:none}.game-intro{grid-template-columns:1fr;padding:28px 0 20px}.touch-controls{display:grid;padding-bottom:env(safe-area-inset-bottom)}
  body.is-case-active{overflow-x:hidden}.game-stage.is-active{display:grid}.canvas-wrap{border-radius:12px}.side-panel{padding:12px}.side-panel h3{font-size:1.3rem}
  .modal{padding:0;align-items:stretch}.modal-card{width:100%;max-height:100dvh;min-height:100dvh;border:0;border-radius:0}.briefing-channel{position:sticky;top:0;z-index:4;background:rgba(6,18,26,.97)}.briefing-layout{grid-template-columns:1fr}.hale-profile{display:grid;grid-template-columns:104px 1fr;gap:0 14px;align-items:start;border-right:0;border-bottom:1px solid var(--line);padding:14px}.hale-portrait-shell{grid-row:span 4;margin:0;border-radius:10px}.hale-profile h2{font-size:1.5rem}.hale-profile p{margin:.3rem 0 0}.transmission-state{grid-column:2;margin-top:8px;padding-top:8px}.briefing-main{padding:18px 14px}.briefing-facts{grid-template-columns:1fr}.briefing-facts>div{border-right:0!important;border-bottom:1px solid var(--line)}.briefing-facts>div:last-child{border-bottom:0}.modal-actions{position:sticky;bottom:0;z-index:4;padding:10px 14px max(10px,env(safe-area-inset-bottom));background:rgba(6,18,26,.97);border-top:1px solid var(--line)}.modal-actions button{flex:1}.puzzle-card,.debrief-card{padding:20px 14px 80px}.puzzle-actions{padding:10px 14px max(10px,env(safe-area-inset-bottom));margin:0 -14px -80px}.debrief-grid{grid-template-columns:1fr}
}
@media(max-width:540px){.game-brand strong{font-size:.76rem}.back-link{font-size:.68rem}.game-intro h1{font-size:3.3rem}.game-hud{gap:4px}.hud-chip{font-size:.54rem}.dialogue{left:8px;right:8px;bottom:8px}.touch-controls{grid-template-columns:repeat(4,46px);grid-template-rows:repeat(2,44px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.inventory-panel { display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(120,229,255,.02); }
.inventory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.inventory-slot { min-height:64px; border:1px dashed rgba(120,229,255,.18); border-radius:10px; padding:6px; display:grid; place-items:center; text-align:center; color:var(--steel); font-size:.67rem; background:rgba(4,15,22,.45); }
.inventory-slot strong { display:block; color:var(--metal); font-size:.63rem; line-height:1.25; }
.inventory-slot.is-filled { border-style:solid; border-color:rgba(57,240,228,.25); background:rgba(57,240,228,.05); }
.inventory-note { color:var(--steel); font-size:.7rem !important; }
.code-entry { display:grid; gap:12px; }
.code-entry input { min-height:52px; border:1px solid var(--line); border-radius:10px; background:rgba(120,229,255,.04); color:var(--metal); padding:0 .85rem; font:700 1.2rem var(--mono); letter-spacing:.26em; }

.case-toolbar { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin: .2rem 0 1rem; }
.case-toolbar__group { display:grid; gap:4px; }
.case-toolbar__copy { margin:0; color:var(--steel); font-size:.8rem; max-width:50ch; }
.reset-progress { min-height:40px; padding:0 1rem; border-radius:999px; border:1px solid var(--line-strong); background:rgba(120,229,255,.05); color:var(--metal); cursor:pointer; font-weight:700; }
.reset-progress:hover,.reset-progress:focus-visible { background:rgba(120,229,255,.12); }
.case-card__top-right { display:flex; gap:.45rem; align-items:center; }
.case-card__new { font:700 .56rem var(--mono); color:#06121a; background:linear-gradient(90deg,var(--teal),var(--cyan)); border-radius:999px; padding:.18rem .42rem; text-transform:uppercase; letter-spacing:.08em; }
.case-card__labels { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px; margin:.5rem 0 .25rem; }
.case-card__labels span { font:700 .58rem var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--silver); border:1px solid rgba(120,229,255,.16); border-radius:999px; padding:.18rem .42rem; background:rgba(120,229,255,.04); }
.inventory-grid--gain .inventory-slot.is-filled { animation: inventoryGain .45s ease; }
.inventory-grid--use .inventory-slot { animation: inventoryUse .45s ease; }
.inventory-slot { gap:4px; }
.inventory-slot__icon { display:block; font-size:1.25rem; line-height:1; color:var(--metal); text-shadow:0 0 10px rgba(120,229,255,.2); }
.inventory-slot--coil .inventory-slot__icon { color:#9de7ff; }
.inventory-slot--sigil .inventory-slot__icon { color:#39f0e4; }
.inventory-slot--band .inventory-slot__icon { color:#f3c47a; }
.inventory-slot--key .inventory-slot__icon { color:#f7dfa6; }
.inventory-slot--shard .inventory-slot__icon,
.inventory-slot--token .inventory-slot__icon,
.inventory-slot--capsule .inventory-slot__icon,
.inventory-slot--tool .inventory-slot__icon { color:#b8a7ff; }
@keyframes inventoryGain { 0% { transform:scale(.92); box-shadow:0 0 0 rgba(57,240,228,0);} 50% { transform:scale(1.04); box-shadow:0 0 18px rgba(57,240,228,.28);} 100% { transform:scale(1); box-shadow:0 0 0 rgba(57,240,228,0);} }
@keyframes inventoryUse { 0% { opacity:1; } 50% { opacity:.55; } 100% { opacity:1; } }
@media(max-width:900px){ .case-toolbar{flex-direction:column;align-items:flex-start;} }


/* v0.9.7 — display layer; game coordinates are still 32px tiles. */
.game-stage { align-items: start; }
.canvas-wrap { min-height: 0; position: sticky; top: 12px; }
canvas { width: 100%; height: auto; max-height: none; image-rendering: auto; }
.game-hud { position: relative; top: auto; left: auto; right: auto; padding: 9px 10px; background: #0b1d2a; border-top: 1px solid rgba(166,208,224,.36); }
.hud-chip { background: #132c3b; color: #b5cbd5; border-color: #456374; }
.hud-chip strong { color: #f0f7fa; }
.objective-list li, .controls span, .case-card__meta span { color: #b9cdd7; }
.objective-list li.done { color: #b7ffe0; }
.inventory-note, .dialogue small { color: #b7c9d3; }
.world-banner { top: 9px; max-width: 90%; text-align: center; }
.dialogue { bottom: 59px; border-color: #a2cdda; }
.inventory-slot { min-width: 0; padding: 6px 3px; }
.inventory-slot strong { overflow-wrap: anywhere; }
.inventory-slot__icon--art { width: 32px; height: 32px; background-image: url('assets/ui/inventory-v097.png'); background-size: 800% 100%; background-repeat: no-repeat; }
.stealth-readout { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #557b83; padding: 5px 8px; border-radius: 999px; background: #132c3b; font: 700 9px var(--mono); color: #bfe5e8; }
.stealth-readout[hidden] { display: none; }
.stealth-readout.is-alert { color: #ffe1a5; border-color: #efbd7f; }
.stealth-track { width: 46px; height: 5px; background: #0c1c27; border: 1px solid #a4bdc2; border-radius: 3px; overflow: hidden; }
.stealth-track i { display: block; height: 100%; background: #ffc773; }
button:focus-visible, a:focus-visible { outline: 2px solid #d6f8ff; outline-offset: 3px; }
@media(max-width:900px) { .canvas-wrap { position: relative; top: auto; } }
@media(max-width:540px) { .dialogue { bottom: 76px; font-size: .84rem; } .game-hud { padding: 7px; } }

body.is-case-active .case-toolbar { display: none; }
@media(max-width:850px) {
  .game-stage .touch-controls { margin: 0 auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: #0d2430; }
  .touch-controls button { touch-action: manipulation; border-color: #6e929f; }
}

/* v0.9.8 additions: new adventures, same metallic visual language and artwork. */
.expansion-tools[hidden] { display:none; }
.expansion-tools { border-top:1px solid var(--line); padding-top:10px; display:grid; gap:9px; }
.hazard-status { min-height:3.2em; color:#dfedea !important; font-size:.77rem !important; border-left:2px solid var(--amber); padding-left:9px; }
.notes-button { min-height:42px; display:flex; align-items:center; justify-content:space-between; padding:.55rem .8rem; border-radius:10px; border:1px solid var(--line-strong); background:rgba(120,229,255,.055); cursor:pointer; color:var(--metal); }
.notes-button span { background:#133845; color:#caffec; border-radius:12px; padding:1px 8px; }
.field-notes-dialog { width:min(730px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); border:1px solid var(--line-strong); border-radius:18px; color:var(--metal); background:#0b202c; padding:24px; box-shadow:0 30px 90px #0009; }
.field-notes-dialog::backdrop { background:#020c14c9; backdrop-filter:blur(5px); }
.field-notes-dialog header { display:flex; gap:18px; justify-content:space-between; align-items:start; position:sticky; top:-24px; background:#0b202c; padding:10px 0; z-index:1; border-bottom:1px solid var(--line); }
.field-notes-dialog h2 { font-size:1.5rem; line-height:1.2; margin:8px 0; }
.field-notes-dialog header button { cursor:pointer; border:1px solid var(--line); border-radius:8px; color:var(--metal); background:#153647; padding:10px 18px; }
.notes-pause { color:#b4d5dc; font-size:.85rem; }
.field-note { padding:14px 0; border-bottom:1px solid var(--line); }
.field-note h3 { font-size:1rem; margin:0 0 7px; color:#b9eee8; }
.field-note p { white-space:pre-wrap; margin:0; color:#d3e1e6; font-size:.94rem; line-height:1.65; }
.cipher-label { display:block; color:var(--silver); margin:14px 0 7px; }
.cipher-input { display:block; width:100%; background:#091a26; color:#ebfff7; border:1px solid var(--line-strong); border-radius:10px; padding:14px 18px; font:700 1.25rem var(--mono); letter-spacing:.3em; }
.cipher-slots { display:flex; gap:10px; justify-content:center; margin:16px 0; }
.cipher-slots span { width:54px; height:60px; display:grid; place-items:center; border:1px solid var(--line); background:#142f3a; color:#c8ffe7; border-radius:8px; font:700 1.5rem var(--mono); }
.allocation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.allocation-channel { border:1px solid var(--line); background:#0b2230; border-radius:12px; padding:14px 8px; text-align:center; }
.allocation-channel h3 { margin:0 0 14px; font-size:1rem; }
.allocation-controls { display:flex; gap:8px; justify-content:center; align-items:center; }
.allocation-controls button { border:1px solid var(--line-strong); background:#1a3b4b; border-radius:8px; min-width:38px; min-height:42px; cursor:pointer; font-size:1.2rem; }
.allocation-controls output { min-width:20px; color:#d2ffea; font:700 1.1rem var(--mono); }
.allocation-total { text-align:center; color:#e8d7a9; font-weight:700; }
.route-link-grid { display:grid; grid-template-columns:repeat(var(--route-columns),1fr); gap:8px; }
.route-link-grid button { min-height:62px; border:1px solid #8eafbc; border-radius:10px; color:#eaf2f4; background:#173448; cursor:pointer; font:700 1rem var(--mono); }
.route-link-grid button:disabled { color:#a59da5; border-color:#514b59; background:repeating-linear-gradient(135deg,#201e2b 0,#201e2b 5px,#2e2c38 5px,#2e2c38 6px); cursor:not-allowed; }
.route-link-grid button.is-selected { background:#286050; border-color:#bcffe3; color:#e7fff1; box-shadow:inset 0 -3px 0 #71c3a4; }
.route-status { min-height:2em; color:#cbffec; overflow-wrap:anywhere; }
body.is-case-active .case-toolbar { display:none; }
button:focus-visible, input:focus-visible { outline:2px solid #dafded; outline-offset:3px; }
@media(max-width:560px){
  .allocation-grid { grid-template-columns:1fr; }
  .allocation-channel { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; }
  .allocation-channel h3 { margin:0; }
  .field-notes-dialog { padding:18px; }
  .field-notes-dialog header { top:-18px; }
  .route-link-grid button { min-height:56px; }
}