*{box-sizing:border-box}
:root{color-scheme:dark;--ink:#eef2ef;--muted:#a0b3b6;--cyan:#9ef8df;--red:#ff997b;--gold:#f4cb86;--line:#31474a;--panel:#0c171c;font:15px system-ui,sans-serif}
body{margin:0;background:radial-gradient(ellipse at 50% 0,#183239,#080e12 65%);color:var(--ink)}
.mast,nav,main,footer{width:min(1270px,94vw);margin-inline:auto}
.mast{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:28px 0 17px;flex-wrap:wrap}
small,.scope,footer,#orders{font:700 11px ui-monospace,monospace;letter-spacing:.15em;color:var(--muted)}
h1,h2{margin:0;letter-spacing:-.055em}
h1{font-size:clamp(37px,5vw,63px);line-height:.95;margin-top:8px}
em{font-style:normal;color:var(--gold)}
nav,#actions,.menu-actions{display:flex;gap:7px;flex-wrap:wrap}
nav{padding:0 0 13px}
button{border:1px solid var(--line);background:#15272c;color:var(--ink);font:inherit;padding:9px 12px;cursor:pointer;border-radius:5px}
button:hover:not(:disabled),button[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);background:#173637}
button:disabled{opacity:.45;cursor:default}
button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.menu-key,nav button{font:700 11px ui-monospace,monospace;letter-spacing:.055em;text-transform:uppercase}
main{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(295px,1fr);gap:13px}
.field,aside{align-self:start;border:1px solid var(--line);border-radius:9px;background:var(--panel);overflow:hidden}
.scope{display:flex;justify-content:space-between;gap:8px;padding:12px 15px;text-transform:uppercase}
.scope b{color:var(--cyan)}.scope i{font-style:normal;color:var(--red)}
#board{display:grid;grid-template-columns:repeat(8,1fr);position:relative;isolation:isolate;background:linear-gradient(145deg,#0c2129a6,#050a13b0),url(/assets/orbit.webp) center 54%/cover,#0d242a}
#board[data-sector="3"],#board[data-sector="5"]{background-position:center,78% center}
#board[data-sector="4"]{background-position:center,30% center}
.cell{position:relative;aspect-ratio:1;border:0;border-top:1px solid #a0c9c539;border-left:1px solid #a0c9c539;background:#08141829;border-radius:0;padding:0;min-width:0;opacity:1!important}
.cell:nth-child(8n){border-right:1px solid #a0c9c539}
.cell:nth-last-child(-n+8){border-bottom:1px solid #a0c9c539}
.cell.arc{background:#58dbc12a}
.cell.reachable{background:#77ffe451;box-shadow:inset 0 0 0 1px #9ef8df8a}
.cell.target{background:#b83a286e;box-shadow:inset 0 0 0 1px var(--red)}
.cell.selected{box-shadow:inset 0 0 0 2px var(--cyan)}
.cell:has(.craft){z-index:1}.cell:focus-visible{z-index:2}
.craft{position:absolute;width:74%;height:74%;object-fit:contain;left:13%;top:6%;pointer-events:none;filter:drop-shadow(0 1px 4px #4de8bd77)}
.foe .craft{filter:drop-shadow(0 1px 4px #ff714c99)}
.flagship .craft{width:90%;height:90%;left:5%;top:0;filter:drop-shadow(0 0 9px #ff7952)}
.flagship .marker{color:var(--gold);border:1px solid #ba8050}
.marker{position:absolute;bottom:3%;left:6%;width:88%;font:700 clamp(8px,1.05vw,13px) monospace;line-height:1.4;border-radius:3px;background:#081315dc;color:var(--cyan);pointer-events:none}
.foe .marker{color:var(--red)}
.shield{position:absolute;pointer-events:none;top:7%;left:15%;width:70%;height:70%;border:1px solid #82f5eb70;border-radius:50%;box-shadow:inset 0 0 12px #72f7d930}
.foe .shield{border-color:#f4b07f73;box-shadow:inset 0 0 12px #ffad7230}
aside{padding:18px;background:linear-gradient(145deg,#182a2d,#0c171c 72%)}
.channel::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-right:8px}
aside h2{margin:7px 0;font-size:30px}
#brief{color:#c4d1d0;line-height:1.45;min-height:3em}
#orders{color:var(--gold);border-block:1px solid var(--line);padding:12px 0;margin:13px 0}
#fleet{display:grid;gap:6px;margin-bottom:14px}
.unit{text-align:left;display:flex;align-items:center;gap:10px;font-size:13px;min-height:50px}
.unit img{width:38px;height:36px;object-fit:contain}
.unit strong{display:block;color:var(--ink)}.unit span{color:var(--muted)}
#log{font-size:13px;color:#bccfce;min-height:1em}
footer{display:flex;justify-content:space-between;padding:17px 0;gap:12px}
.fx{position:absolute;pointer-events:none;z-index:3}
.beam{height:3px;background:#effffb;box-shadow:0 0 13px 4px #69ffd9;transform-origin:0 50%}
.hostile-beam{background:#fff3c6;box-shadow:0 0 13px 4px #ff7849}
.ring{width:36px;height:36px;border-radius:50%;border:3px solid #72f9ff;box-shadow:0 0 16px #72f9ff}
.blast{background:#fff3a3;border-color:#ff9870;box-shadow:0 0 30px #ff714c}
.spark{width:4px;height:4px;border-radius:50%;background:#fff0bc;box-shadow:0 0 8px #ff9f5a}
.trail{height:5px;background:linear-gradient(90deg,transparent,#8bffe6);transform-origin:0 50%;box-shadow:0 0 13px #69ffd988}
dialog{width:min(1000px,94vw);max-height:92vh;padding:0;border:1px solid #648287;border-radius:11px;color:var(--ink);background:linear-gradient(90deg,#071216 0%,#081317df 30%,#08131724 100%),url(/assets/orbit.webp) 55% center/cover,#102b31;box-shadow:0 24px 120px #000}
dialog::backdrop{background:#040b10bd;backdrop-filter:blur(7px)}
.menu-content{padding:clamp(25px,6vw,80px)}
.menu-content h2{font-size:clamp(53px,9vw,108px);line-height:.84;margin:17px 0}
.menu-content p{color:#d4e2dd;max-width:30ch}
.menu-actions{margin:26px 0}
.menu-actions button:first-of-type:not([hidden]),#begin-tutorial{background:#a4edda;color:#102422;border-color:#b5f1e0;font-weight:700}
button[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){dialog[open]{animation:arrive .27s ease-out}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}
@media(max-width:760px){main{grid-template-columns:1fr}.mast{padding-top:18px}aside{padding:14px}.scope,footer{font-size:9px}.scope{padding:10px}.menu-actions{max-width:210px}}