:root {
  color-scheme: dark;
  --sea: #0c2029;
  --panel: #112933;
  --line: #34515b;
  --ink: #ecf1eb;
  --dim: #b7cace;
  --gold: #f4ce8c;
  --signal: #8ce0d1;
  font: 16px/1.5 system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--sea); color: var(--ink); }
a { color: var(--gold); text-underline-offset: .22em; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: fixed; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 16px; background: var(--sea); z-index: 2; }
.skip:focus { transform: none; }
.top, main { width: min(1150px, calc(100% - 48px)); margin-inline: auto; }
.top { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 850; letter-spacing: .12em; }
.brand small { display: block; font-size: .62rem; letter-spacing: .21em; color: var(--gold); }
.quiet, .actions button {
  min-height: 44px; padding: 8px 15px; border: 1px solid var(--line);
  background: #193641; border-radius: 8px; font-weight: 680;
}
.quiet { min-width: 83px; }
.quiet:hover, .actions button:hover:not(:disabled) { background: #2b4953; }
.intro {
  min-height: clamp(205px, 24vw, 280px); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 5vw, 62px); border: 1px solid var(--line); border-radius: 15px;
  background: linear-gradient(90deg, #0d2028 2%, #0d2028bf 42%, #0d202820 100%), #16333f url('cover.webp') right 14% / cover;
  overflow: hidden;
}
.eyebrow { font: 650 .73rem/1.35 ui-monospace, Consolas, monospace; letter-spacing: .16em; color: var(--gold); }
.intro .eyebrow { display: flex; align-items: center; gap: 10px; }
.intro .eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.intro h1 { font: 500 clamp(3.1rem, 7.7vw, 6.8rem)/.99 Georgia, serif; letter-spacing: -.05em; margin: .12em 0 .15em; }
.tagline { max-width: 32ch; font-size: clamp(.95rem, 2vw, 1.15rem); color: #e1ebe8; }
.layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.chart, .brief, .missions, dialog { border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.chart { padding: clamp(15px, 2.8vw, 28px); min-width: 0; }
.chart-head, .missions-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart h2, .log h2, dialog h2 { font: 500 clamp(1.45rem, 3vw, 2.15rem)/1.1 Georgia, serif; margin-top: .28em; }
.telemetry { display: flex; gap: clamp(8px, 2vw, 20px); text-align: center; }
.telemetry strong { display: block; color: var(--signal); font: 650 1.4rem/1.2 ui-monospace, monospace; }
.telemetry small, .chart-coords { color: var(--dim); font: 600 .67rem/1.3 ui-monospace, monospace; letter-spacing: .08em; }
.board-wrap {
  margin: 19px 0 14px; padding: 12px 8px 8px; border-radius: 9px; border: 1px solid #36535b;
  background: radial-gradient(ellipse at 50% 30%, #23506091, #0b2731db 76%),
    repeating-linear-gradient(156deg, #264c593d 0 1px, transparent 1px 12px), #10313d;
}
.board { max-width: var(--board-width, 445px); margin-inline: auto; display: grid; gap: 3px; grid-template-columns: repeat(var(--size, 4), minmax(0, 1fr)); }
.tile, .reef { min-width: 0; aspect-ratio: 1; border-radius: 7px; }
.reef { background: repeating-linear-gradient(148deg, transparent 0 5px, #8ab7b91d 5px 6px); }
.tile { position: relative; padding: 0; color: #98b6be; background: #173d4a; border: 1px solid #42636c; }
.tile:hover { background: #275060; }
.tile:focus-visible { outline-offset: -3px; z-index: 1; }
.tile.guided { box-shadow: inset 0 0 0 2px var(--gold); }
.tile.powered { color: var(--signal); background: #1a4c55; border-color: #679c9d; }
.tile.source { color: var(--gold); background: #3b4034; border-color: #9f8457; cursor: default; }
.tile svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wires { stroke: currentColor; stroke-width: 2.5; fill: none; }
.powered .wires { stroke-width: 3.4; filter: drop-shadow(0 0 3px #8ce0d19e); }
.node circle, .node rect { fill: #12313e; stroke: currentColor; stroke-width: 1.25; }
.node text { fill: currentColor; font: 800 10px system-ui, sans-serif; text-anchor: middle; }
.tower { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.15; }
.chart-coords { display: flex; justify-content: space-between; margin: 8px 4px 0; }
.chart-coords span { color: var(--gold); }
.actions { display: flex; flex-wrap: wrap; gap: 7px; }
.actions .primary { color: #132832; background: var(--gold); border-color: var(--gold); }
.actions .primary:hover:not(:disabled) { background: #ffe1aa; }
.feedback { margin-top: 10px; min-height: 2.8em; color: var(--dim); font-size: .88rem; }
.log { display: grid; gap: 16px; min-width: 0; }
.brief, .missions { padding: clamp(15px, 2.5vw, 24px); }
.brief p:not(.eyebrow) { margin-top: .8em; color: var(--dim); }
.brief b { color: var(--ink); }
kbd { display: inline-block; padding: 0 .28em; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); }
.legend { display: flex; gap: 7px 14px; flex-wrap: wrap; margin-top: 14px; font-size: .83rem; color: var(--dim); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--gold); }
.legend .legend-source { border-radius: 50%; background: var(--gold); }
.legend .legend-port { border-color: var(--dim); border-radius: 2px; }
.legend .legend-signal { width: 13px; height: 3px; border: 0; border-radius: 2px; background: var(--signal); }
.missions-head > span { color: var(--signal); font: 650 .85rem ui-monospace, monospace; }
.missions ol { list-style: none; padding: 0; margin: 13px 0 0; }
.missions li + li { margin-top: 4px; }
.missions button { width: 100%; min-height: 44px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; text-align: left; background: #193641; border: 1px solid transparent; border-radius: 6px; padding: 5px 9px; font-size: .88rem; }
.missions button:hover { background: #244650; }
.missions button[aria-current] { border-color: #9f8457; background: #29424a; }
.mission-dot, .mission-score { color: var(--gold); font: .82rem ui-monospace, monospace; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 24px 0; color: var(--dim); font-size: .88rem; }
dialog { max-width: min(460px, calc(100vw - 28px)); color: var(--ink); padding: 22px; box-shadow: 0 18px 60px #001219a3; }
dialog::backdrop { background: #05131bdc; }
dialog p { margin-top: 10px; }
.result-art { display: flex; align-items: center; height: 78px; padding-left: 9px; border-radius: 7px; background: linear-gradient(90deg, #10252ed9, transparent), #1b4050 url('cover.webp') center 53% / cover; }
.score { color: var(--gold); font-weight: 750; margin-bottom: 12px; }

@media (max-width: 730px) {
  .top, main { width: calc(100% - 24px); }
  .top { min-height: 61px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .log { gap: 12px; }
}

@media (max-width: 390px) {
  .chart { padding: 11px; }
  .board-wrap { padding-inline: 3px; }
  .board { gap: 2px; }
  .tile, .reef { border-radius: 5px; }
}