:root {
  color-scheme: dark;
  --ink: #e8f0ef;
  --muted: #8da09e;
  --panel: #0c171d;
  --panel-2: #111f25;
  --line: #25383d;
  --cyan: #50e3d2;
  --cyan-soft: #1d8f87;
  --amber: #ffc857;
  --red: #ff5570;
  --cell: clamp(2rem, 4.1vw, 3.55rem);
  --gap: clamp(0.15rem, 0.35vw, 0.3rem);
  font-family: "Bahnschrift", "Aptos", "Segoe UI", sans-serif;
  background: #050b0f;
  color: var(--ink);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #050b0f; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 48% -20%, rgba(40, 143, 137, 0.2), transparent 42rem),
    linear-gradient(180deg, #091218 0%, #050b0f 70%);
}

button, select, input { font: inherit; }
button, select { color: inherit; }
button { touch-action: manipulation; }

.app-shell { width: min(1600px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 clamp(0.75rem, 2vw, 2rem) 1.5rem; }

.topbar {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--ink); text-decoration: none; letter-spacing: 0.18em; }
.brand strong { color: var(--cyan); font-weight: 800; }
.brand-mark { width: 2.2rem; aspect-ratio: 1; display: grid; place-items: center; background: var(--cyan); clip-path: polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%); }
.brand-mark i { width: 1rem; aspect-ratio: 1; background: #071016; transform: rotate(45deg); box-shadow: 0 0 0 0.18rem rgba(7,16,22,.45); }

.session-tools { display: flex; align-items: center; gap: .55rem; }
.difficulty-label { color: var(--muted); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; }
select, .new-game-button, .profile-button, .pause-button { min-height: 2.65rem; border: 1px solid var(--line); background: var(--panel); border-radius: .35rem; }
select { padding: 0 2.2rem 0 .75rem; }
.new-game-button { display:flex; align-items:center; gap:.45rem; padding:0 .8rem; white-space:nowrap; cursor:pointer; }
.new-game-button span { color:var(--cyan); font-size:1.15rem; }
.pause-button { padding:0 .8rem; cursor:pointer; }
.profile-button { display: flex; align-items: center; gap: .55rem; padding: 0 .85rem; cursor: pointer; }
.menu-button { display:block; min-height:2.65rem; padding:0 .85rem; border:1px solid var(--line); border-radius:.35rem; background:var(--panel); cursor:pointer; }
.profile-light { width: .5rem; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 .65rem var(--cyan); }

main { padding-top: 1rem; }
.status-panel { display: grid; grid-template-columns: minmax(5rem,1fr) minmax(14rem,3fr) minmax(5rem,1fr); border: 1px solid var(--line); background: rgba(12,23,29,.88); }
.metric, .mission-state { min-height: 5.15rem; display: flex; flex-direction: column; justify-content: center; padding: .8rem 1.2rem; }
.metric:first-child { border-right: 1px solid var(--line); }
.metric-right { align-items: flex-end; border-left: 1px solid var(--line); }
.metric-label, .mission-state span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .17em; }
.metric strong { font-family: Consolas, monospace; font-size: 1.75rem; color: var(--amber); }
.mission-state { align-items: center; text-align: center; }
.mission-state strong { margin-top: .2rem; font-size: clamp(1rem, 2.2vw, 1.35rem); font-weight: 600; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; margin-top: 1rem; }
.board-frame, .console { border: 1px solid var(--line); background: rgba(9,18,24,.9); }
.board-toolbar { min-height: 2.5rem; padding: .6rem .8rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font: .7rem/1.3 Consolas, monospace; letter-spacing: .07em; border-bottom: 1px solid var(--line); }
.view-switch { display:flex; gap:.2rem; align-items:center; }
.view-switch button { min-height:1.7rem; padding:0 .65rem; border:1px solid var(--line); border-radius:.25rem; color:var(--muted); background:#071016; cursor:pointer; font:700 .68rem Consolas,monospace; }
.view-switch button.active { color:#071016; border-color:var(--cyan); background:var(--cyan); }
.legend-current, .legend-target { display: inline-block; width: .52rem; aspect-ratio: 1; margin: 0 .25rem; }
.legend-current { border-radius: 50%; background: var(--cyan); }
.legend-target { border: 1px solid var(--amber); transform: rotate(45deg); }
.board-viewport { min-height: 31rem; height: calc(100vh - 15.2rem); overflow: auto; display: block; padding: clamp(.8rem, 2vw, 2rem); outline: none; scrollbar-color: var(--cyan-soft) #071016; }
.board-viewport.perspective-mode { overflow:hidden; padding:0; }
.board { display: grid; gap: var(--gap); width: max-content; min-width:100%; margin:0; padding: 1rem; background-image: radial-gradient(rgba(80,227,210,.08) 1px, transparent 1px); background-size: 12px 12px; transition:opacity .12s ease; }
.board[hidden] { display:none !important; }
.board.paused { visibility:hidden; }
.perspective-stage { position:relative; width:100%; height:100%; min-height:28rem; overflow:hidden; background:#050b0f; }
.board-viewport.perspective-mode .perspective-stage { width:100%; height:100%; min-height:100%; }
.perspective-stage[hidden] { display:none; }
.perspective-stage:not([hidden]) { display:block; }
.perspective-stage.paused { visibility:hidden; }
.perspective-world { position:relative; width:100%; height:100%; min-height:0; overflow:hidden; }
.perspective-stage canvas { display:block; width:100%; height:100%; min-height:0; cursor:crosshair; touch-action:manipulation; }
.clue-scanner { position:absolute; z-index:3; left:50%; bottom:.7rem; width:min(30rem,62%); padding:.45rem .75rem .55rem; border:1px solid rgba(80,227,210,.42); background:rgba(5,16,22,.9); box-shadow:0 0 1.25rem rgba(0,0,0,.65),inset 0 0 1rem rgba(80,227,210,.04); transform:translateX(-50%) perspective(40rem) rotateX(12deg); transform-origin:bottom center; }
.clue-scanner small { display:block; margin-bottom:.3rem; color:var(--muted); text-align:center; font:600 .58rem Consolas,monospace; letter-spacing:.08em; }
.clue-scanner-viewport { --scan-cell:1.65rem; --scan-gap:.1rem; position:relative; width:calc(7 * var(--scan-cell) + 6 * var(--scan-gap)); height:calc(5 * var(--scan-cell) + 4 * var(--scan-gap)); max-width:100%; margin:auto; overflow:hidden; background:#050c10; }
.clue-scanner-mesh { position:absolute; inset:0; }
.scanner-cell { position:absolute; width:var(--scan-cell); height:var(--scan-cell); display:grid; place-items:center; border:1px solid rgba(80,227,210,.22); clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%); color:var(--muted); background:#16272e; font:800 .86rem/1 Consolas,monospace; transition:transform .12s ease; }
.scanner-cell i { display:block; color:inherit; font:inherit; font-style:normal; }
.scanner-cell.revealed { background:#0d1b20; }
.scanner-cell.covered { color:#657d7c; background:#253941; }
.scanner-cell.outside { color:#3e5355; background:#080f13; }
.scanner-cell.marked { color:var(--amber); border-color:rgba(255,200,87,.48); background:#352b16; }
.scanner-cell.void { color:#fff; border-color:var(--red); background:#541622; }
.scanner-cell.player { outline:2px solid var(--cyan); outline-offset:-2px; box-shadow:0 0 .6rem rgba(80,227,210,.28); }
.scanner-cell.target { box-shadow:inset 0 0 0 2px var(--amber); }
.scanner-cell[data-count="1"]{color:#62b5ff}.scanner-cell[data-count="2"]{color:#6cdf9a}.scanner-cell[data-count="3"]{color:#ff776f}.scanner-cell[data-count="4"]{color:#b997ff}.scanner-cell[data-count="5"],.scanner-cell[data-count="6"],.scanner-cell[data-count="7"],.scanner-cell[data-count="8"]{color:var(--amber)}
.vertical-scanner { position:absolute; z-index:4; left:.75rem; top:50%; width:14.2rem; padding:.45rem; border:1px solid rgba(114,217,255,.42); background:rgba(5,16,22,.91); box-shadow:0 0 1.25rem rgba(0,0,0,.65); transform:translateY(-50%) perspective(40rem) rotateY(8deg); transform-origin:left center; }
.vertical-scanner small { display:block; margin-bottom:.35rem; color:#72d9ff; text-align:center; font:600 .58rem Consolas,monospace; letter-spacing:.08em; }
.vertical-scanner-grid { --vertical-cell:1.55rem; display:grid; grid-template-columns:1.25rem repeat(7,var(--vertical-cell)); gap:.1rem; justify-content:center; }
.level-marker { display:grid; place-items:center; color:var(--muted); font:600 .55rem/1 Consolas,monospace; }
.level-marker.active { color:var(--cyan); background:rgba(80,227,210,.12); }
.vertical-cell { display:grid; place-items:center; border:1px solid rgba(114,217,255,.22); clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%); color:var(--muted); background:#16272e; font:800 .8rem/1 Consolas,monospace; }
.vertical-cell.revealed { background:#0d1b20; }.vertical-cell.covered{color:#657d7c;background:#253941}.vertical-cell.outside{color:#3e5355;background:#080f13}.vertical-cell.marked{color:var(--amber);background:#352b16}.vertical-cell.void{color:#fff;background:#541622}.vertical-cell.player{outline:2px solid var(--cyan);outline-offset:-2px}.vertical-cell.target{box-shadow:inset 0 0 0 2px var(--amber)}
.vertical-cell[data-count="1"]{color:#62b5ff}.vertical-cell[data-count="2"]{color:#6cdf9a}.vertical-cell[data-count="3"]{color:#ff776f}.vertical-cell[data-count="4"]{color:#b997ff}.vertical-cell[data-count="5"],.vertical-cell[data-count="6"],.vertical-cell[data-count="7"],.vertical-cell[data-count="8"],.vertical-cell[data-count="9"]{color:var(--amber)}
.vertical-cell.seam { border-color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(80,227,210,.38); }
.vertical-cell.player::after { position:absolute; right:1px; bottom:0; color:var(--cyan); font:700 .48rem/1 Consolas,monospace; }
.vertical-cell.player[data-pitch="up"]::after { content:"↗"; }
.vertical-cell.player[data-pitch="level"]::after { content:"→"; }
.vertical-cell.player[data-pitch="down"]::after { content:"↘"; }
.vertical-cell { position:relative; }
.vertical-scanner-grid:empty { display:none; }.vertical-scanner:has(.vertical-scanner-grid:empty){display:none}
.perspective-hud { position:absolute; inset:0; padding:.8rem; pointer-events:none; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.perspective-hud > span { padding:.45rem .65rem; color:var(--cyan); border:1px solid rgba(80,227,210,.35); background:rgba(5,11,15,.82); font:700 .7rem Consolas,monospace; letter-spacing:.08em; }
.perspective-hud > div { padding:.5rem; border:1px solid rgba(80,227,210,.35); background:rgba(5,11,15,.86); }
.perspective-hud small { display:block; margin-bottom:.35rem; color:var(--muted); font:600 .58rem Consolas,monospace; letter-spacing:.08em; }
.perspective-minimap-viewport { --scan-cell:1.05rem; --scan-gap:2px; position:relative; width:calc(7 * 1.05rem + 12px); height:calc(7 * 1.05rem + 12px); overflow:hidden; background:#050c10; }
.perspective-minimap { position:absolute; inset:0; }
.mini-cell { position:absolute; width:var(--scan-cell); height:var(--scan-cell); display:grid; place-items:center; color:var(--muted); background:#21333a; clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%); font:800 .58rem Consolas,monospace; transition:transform .12s ease; }
.mini-cell i { display:block; color:inherit; font:inherit; font-style:normal; }
.mini-cell.revealed { background:#0d1b20; }
.mini-cell.outside { background:transparent; }
.mini-cell.marked { color:var(--amber); background:#352b16; }
.mini-cell.player { outline:1px solid var(--cyan); outline-offset:1px; }
.mini-cell.target { box-shadow:inset 0 0 0 2px var(--amber); }
.mini-cell.player::after { content:"↑"; position:absolute; inset:0; display:grid; place-items:center; color:var(--cyan); text-shadow:0 0 .35rem var(--cyan); font:800 .65rem/1 Consolas,monospace; transform:rotate(var(--heading)); }
.mini-cell[data-count="1"]{color:#62b5ff}.mini-cell[data-count="2"]{color:#6cdf9a}.mini-cell[data-count="3"]{color:#ff776f}.mini-cell[data-count="4"]{color:#b997ff}.mini-cell[data-count="5"],.mini-cell[data-count="6"],.mini-cell[data-count="7"],.mini-cell[data-count="8"]{color:var(--amber)}

.translation-control { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin-top:.75rem; }
.translation-control button { min-width:0; min-height:3.2rem; padding:.45rem .3rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.22rem; border:1px solid var(--line); border-radius:.3rem; color:var(--ink); background:var(--panel-2); cursor:pointer; }
.translation-control button:hover { border-color:var(--cyan-soft); }
.translation-control button span { font-size:.7rem; }
.translation-control kbd { color:var(--muted); }

.cell {
  position: relative;
  width: var(--cell);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  background: #203139;
  clip-path: polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  font: 800 clamp(.9rem,2vw,1.25rem)/1 Consolas, monospace;
  transition: filter .12s ease, transform .12s ease, background .18s ease;
}
.cell::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: linear-gradient(145deg,#263b43,#17262d); z-index: -1; }
.cell:hover { filter: brightness(1.18); }
.cell:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.cell.revealed { background: #14252b; color: var(--number-color, var(--muted)); cursor: default; }
.cell.revealed::before { background: #0d1b20; }
.cell.marked { color: var(--amber); background: #695323; }
.cell.marked::before { background: #2e291c; }
.cell.void { color: white; background: var(--red); }
.cell.void::before { background: radial-gradient(circle, #ff7187 0 15%, #541622 17% 36%, #17090d 38%); }
.cell.current { filter: drop-shadow(0 0 .5rem var(--cyan)); }
.cell.current::after { content: ""; position: absolute; width: 32%; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 .8rem var(--cyan); }
.cell.current.has-number::after { width: 18%; right: 17%; bottom: 16%; }
.cell.target { filter: drop-shadow(0 0 .42rem var(--amber)); background: var(--amber); }
.cell.target::before { inset: 3px; }
.cell.initial-target { filter: drop-shadow(0 0 .42rem var(--cyan)); background: var(--cyan); }
.cell[data-count="1"] { --number-color: #62b5ff; }
.cell[data-count="2"] { --number-color: #6cdf9a; }
.cell[data-count="3"] { --number-color: #ff776f; }
.cell[data-count="4"] { --number-color: #b997ff; }
.cell[data-count="5"], .cell[data-count="6"], .cell[data-count="7"], .cell[data-count="8"] { --number-color: #ffc857; }

.console { padding: 1rem; }
.zoom-control { display:flex; justify-content:center; gap:.35rem; margin:.15rem 0 .75rem; }
.zoom-control button { min-height:2rem; min-width:2.4rem; padding:0 .65rem; border:1px solid var(--line); border-radius:.3rem; color:var(--muted); background:#071016; cursor:pointer; }
.zoom-control #focus-button { min-width:4.5rem; }
.console-heading { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.console-heading span, .connection-reading span { color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.console-heading strong { font: .9rem Consolas, monospace; color: var(--cyan); }
.direction-display { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .8rem; padding: 1rem 0; }
.compass-ring { position: relative; width: 8.5rem; max-width: 100%; aspect-ratio: 1; margin: auto; border: 1px solid #365058; border-radius: 50%; background: radial-gradient(circle,rgba(80,227,210,.12),transparent 55%); }
.compass-ring::before, .compass-ring::after { content:""; position:absolute; inset:50% 8%; height:1px; background:#273b40; }
.compass-ring::after { transform: rotate(90deg); }
.tick { position: absolute; color: var(--muted); font: .65rem Consolas,monospace; }
.tick-n { top:.35rem; left:50%; transform:translateX(-50%); }.tick-e{right:.5rem;top:50%;transform:translateY(-50%)}.tick-s{bottom:.35rem;left:50%;transform:translateX(-50%)}.tick-w{left:.5rem;top:50%;transform:translateY(-50%)}
.direction-arrow { position:absolute; inset:1.7rem; display:grid; place-items:center; font-size:2.35rem; color:var(--cyan); transform:rotate(0deg); transition:transform .15s ease; }
.connection-reading { text-align:center; }
.connection-reading strong { display:block; margin-top:.4rem; font: 1.25rem/1.5 Consolas,monospace; color:var(--amber); white-space:nowrap; }
.rotation-control { display:grid; grid-template-columns: 1fr 5.5rem 1fr; gap:.4rem; align-items:stretch; }
.rotation-control button, .action-grid button { border:1px solid var(--line); border-radius:.35rem; background:var(--panel-2); cursor:pointer; }
.rotation-control button { min-height:4.3rem; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.25rem; padding:.5rem; }
.rotation-control button:last-child { grid-template-columns:1fr auto; }
.rotation-control button span { grid-column:1/-1; font-size:.7rem; color:var(--muted); }
.rotation-control button b { color:var(--cyan); }
.rotation-control > div { display:flex; flex-direction:column; justify-content:center; text-align:center; background:#071016; border:1px solid var(--line); }
.rotation-control > div span { font-size:.58rem; color:var(--muted); }.rotation-control > div strong{font-size:.63rem;letter-spacing:.06em}
kbd { min-width:1.65rem; padding:.2rem .35rem; border:1px solid #3a5158; border-bottom-width:2px; border-radius:.25rem; color:var(--muted); font: .68rem Consolas,monospace; }
.action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.7rem; }
.action-grid button { min-height:3.75rem; display:flex; align-items:center; justify-content:space-between; padding:.65rem .75rem; }
.action-grid button span { font-weight:700; }
.action-grid .mark-action { border-color:#6b582d; }.action-grid .mark-action span{color:var(--amber)}
.action-grid .clear-action { border-color:#28766f; background:#123732; }.action-grid .clear-action span{color:var(--cyan)}
.action-grid .chord-action { border-color:#326b80; background:#102b36; }.action-grid .chord-action span{color:#72d9ff}
button:disabled { opacity:.4; cursor:not-allowed; }
.control-hint { margin:.9rem 0 0; color:var(--muted); font-size:.78rem; line-height:1.5; }

.stats-strip { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:var(--panel); }
.stats-strip div { padding:.8rem 1rem; border-right:1px solid var(--line); }
.stats-strip div:nth-child(3n) { border-right:0; }
.stats-strip div:nth-child(-n+3) { border-bottom:1px solid var(--line); }
.stats-strip span { display:block; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; }
.stats-strip strong { display:block; margin-top:.2rem; font:1.05rem Consolas,monospace; }
.stats-filters { display:grid; grid-template-columns:auto 1fr; gap:.4rem .65rem; align-items:center; margin-bottom:.65rem; }
.stats-filters label { margin:0; }
.stats-filters select { width:100%; }

dialog { width:min(31rem,calc(100% - 2rem)); padding:0; color:var(--ink); border:1px solid var(--line); border-radius:.5rem; background:#0b171c; box-shadow:0 1.5rem 5rem #000; }
dialog::backdrop { background:rgba(1,5,7,.78); backdrop-filter:blur(5px); }
.dialog-card { padding:1.2rem; }
.dialog-title { display:flex; justify-content:space-between; align-items:flex-start; }
.dialog-title span, .result-card > span { color:var(--cyan); font-size:.7rem; letter-spacing:.15em; }
.dialog-title h2, .result-card h2 { margin:.2rem 0 1rem; }
.dialog-title button { border:0; color:var(--muted); background:transparent; font-size:1.5rem; cursor:pointer; }
.dialog-card label { display:block; margin-bottom:.35rem; color:var(--muted); font-size:.8rem; }
.profile-create { display:flex; gap:.5rem; }
.profile-create input { min-width:0; flex:1; padding:.7rem; color:var(--ink); border:1px solid var(--line); border-radius:.3rem; background:#071016; }
.profile-create button, .result-actions button { padding:.7rem 1rem; border:1px solid var(--cyan-soft); border-radius:.3rem; color:var(--ink); background:#123732; cursor:pointer; }
.profile-list { display:grid; gap:.45rem; margin-top:1rem; }
.profile-list button { display:flex; justify-content:space-between; padding:.75rem; border:1px solid var(--line); border-radius:.3rem; color:var(--ink); background:var(--panel-2); cursor:pointer; }
.profile-list button.active { border-color:var(--cyan); }
.dialog-card > p { color:var(--muted); font-size:.8rem; line-height:1.5; }
.menu-card h3 { margin:1.2rem 0 .55rem; font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
.menu-actions { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.menu-actions label { grid-column:1/-1; }
.menu-actions select { grid-column:1/-1; width:100%; }
.menu-actions button { min-height:2.8rem; border:1px solid var(--line); border-radius:.3rem; color:var(--ink); background:var(--panel-2); cursor:pointer; }
.result-card { text-align:center; }.result-card p{color:var(--muted);line-height:1.5}.result-actions{display:flex;justify-content:center;gap:.6rem}.result-actions button:first-child{background:var(--panel-2);border-color:var(--line)}
.pause-dialog button { padding:.75rem 1rem; border:1px solid var(--cyan-soft); border-radius:.3rem; color:var(--ink); background:#123732; cursor:pointer; }

@media (max-width: 900px) {
  .game-layout { grid-template-columns:1fr; }
  .board-viewport { min-height:25rem; height:min(57vh,38rem); }
  .console { display:grid; grid-template-columns:1fr 1.25fr; gap:1rem; }
  .console-heading, .control-hint { grid-column:1/-1; }
  .direction-display { padding:0; }
  .rotation-control { align-self:center; }
  .action-grid { margin:0; }
}

@media (max-width: 620px) {
  :root { --cell:2.25rem; --gap:.14rem; }
  html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
  .app-shell { height:100dvh; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:0 .45rem max(.35rem,env(safe-area-inset-bottom)); }
  .topbar { flex:0 0 auto; min-height:3.6rem; padding:.4rem 0; }
  .brand { font-size:.9rem; }.brand-mark{width:1.8rem}
  .session-tools { width:auto; }.session-tools > :not(.menu-button):not(.pause-button){display:none}.menu-button{display:block}.pause-button{min-height:2.4rem;padding:0 .6rem;font-size:.75rem}
  main { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding-top:.35rem; }
  .status-panel { grid-template-columns:4.5rem 1fr 4.5rem; }
  .metric, .mission-state { min-height:3.55rem; padding:.4rem; }.metric strong{font-size:1.1rem}.mission-state span{font-size:.55rem}.mission-state strong{font-size:.82rem}
  .game-layout { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:.35rem; margin-top:.35rem; }
  .board-frame { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  .board-toolbar { flex:0 0 1.8rem; min-height:1.8rem; padding:.4rem .55rem; }.board-toolbar span:last-child{display:none}
  .view-switch button { min-height:1.45rem; padding:0 .5rem; font-size:.62rem; }
  .board-viewport { flex:1 1 auto; min-height:0; height:auto; display:block; overflow:auto; padding:0; overscroll-behavior:contain; scrollbar-width:none; }
  .board-viewport::-webkit-scrollbar { display:none; }
  .board { min-width:max-content; padding:.55rem; }
  .perspective-stage { min-height:100%; }
  .perspective-stage canvas { min-height:0; }
  .clue-scanner { bottom:.3rem; width:min(23rem,86%); padding:.25rem .35rem .3rem; }
  .clue-scanner small { margin-bottom:.2rem; font-size:.5rem; }
  .clue-scanner-viewport { --scan-cell:1.28rem; --scan-gap:.07rem; }
  .scanner-cell { font-size:.7rem; }
  .perspective-hud { padding:.4rem; }
  .perspective-hud > span { padding:.35rem .45rem; font-size:.58rem; }
  .perspective-hud > div { padding:.35rem; }
  .perspective-minimap-viewport { --scan-cell:.82rem; width:calc(7 * .82rem + 12px); height:calc(7 * .82rem + 12px); }
  .mini-cell { width:.82rem; height:.82rem; font-size:.48rem; }
  .vertical-scanner { left:.3rem; top:48%; width:10.6rem; padding:.25rem; }
  .vertical-scanner-grid { grid-template-columns:1rem repeat(7,var(--vertical-cell)); }
  .vertical-scanner-grid { --vertical-cell:1.12rem; gap:.06rem; }
  .vertical-cell { font-size:.64rem; }
  .console { flex:0 0 auto; display:grid; grid-template-columns:1fr auto; gap:.4rem .55rem; padding:.45rem; }
  .console-heading { grid-column:1/2; min-height:2rem; padding:0; align-items:center; }.console-heading span{display:none}.console-heading strong{font-size:.78rem}
  .zoom-control { grid-column:2/3; margin:0; }.zoom-control button{min-height:2rem;min-width:2.1rem;padding:0 .45rem}.zoom-control #focus-button{min-width:3.7rem;font-size:.72rem}
  .direction-display, .control-hint { display:none; }
  .rotation-control { grid-column:1/-1; grid-template-columns:1fr 4.5rem 1fr; }
  .rotation-control button { min-height:2.65rem; padding:.3rem .5rem; }.rotation-control button span{font-size:.64rem}.rotation-control > div span{display:none}
  .translation-control { grid-column:1/-1; gap:.25rem; margin-top:0; }
  .translation-control button { min-height:2.45rem; padding:.25rem .15rem; }.translation-control button span{font-size:.62rem}.translation-control button kbd{display:none}
  .action-grid { grid-column:1/-1; grid-template-columns:repeat(3,1fr); gap:.35rem; margin:0; }
  .action-grid button { min-height:2.9rem; padding:.35rem; justify-content:center; }.action-grid button kbd{display:none}.action-grid button span{font-size:.72rem}
  .stats-strip div{padding:.65rem}.stats-strip span{font-size:.58rem}
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }