*{box-sizing:border-box} :root{color-scheme:dark;--ink:#d8e8f2;--muted:#91a9bf;--cyan:#64f3e0;--red:#ff897f;--line:#284355} body{margin:0;background:#080e19;color:var(--ink);font:15px system-ui,sans-serif} header,main,footer{width:min(1240px,95vw);margin:auto} header{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:30px 0 22px;flex-wrap:wrap} small,.scope,footer{font:700 11px ui-monospace,monospace;letter-spacing:.16em;color:var(--muted)} h1{font-size:clamp(36px,6vw,64px);line-height:.95;letter-spacing:-.065em;margin:9px 0 0} h2{margin:8px 0;font-size:27px;letter-spacing:-.035em} nav,#actions{display:flex;gap:7px;flex-wrap:wrap} button{border:1px solid var(--line);background:#142437;color:var(--ink);font:inherit;padding:9px 12px;cursor:pointer;border-radius:4px} button:hover:not(:disabled),button[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);background:#153d46} button:disabled{opacity:.45;cursor:default} button:focus-visible{outline:2px solid white;outline-offset:-3px} main{display:grid;grid-template-columns:minmax(0,2.45fr) minmax(285px,1fr);gap:14px} .field,aside{border:1px solid var(--line);background:#0d1928;border-radius:8px;overflow:hidden} .scope{display:flex;justify-content:space-between;gap:8px;padding:13px;color:var(--cyan)} #board{display:grid;grid-template-columns:repeat(8,1fr);position:relative;isolation:isolate;background:radial-gradient(ellipse at 20% 70%,#143c50,transparent 57%),radial-gradient(ellipse at 90% 20%,#30274c,transparent 68%),#0a1421} .cell{position:relative;aspect-ratio:1;border:1px solid #7ba7ce22;background:radial-gradient(circle at 73% 28%,#bce7ff77 0 1px,transparent 2px);border-radius:0;padding:0;min-width:0;opacity:1!important} .cell:nth-child(3n){background-position:14px 24px}.cell.arc{background-color:#30d3ce19}.cell.reachable{background:#34d9af47}.cell.target{background:#f35a5049}.cell.selected{box-shadow:inset 0 0 0 2px var(--cyan)} .craft{position:absolute;width:76%;height:76%;object-fit:contain;left:12%;top:9%;pointer-events:none;filter:drop-shadow(0 0 7px #52ffe686)} .foe .craft{filter:drop-shadow(0 0 7px #ff5a6499)} .marker{position:absolute;bottom:3%;left:0;width:100%;font:700 clamp(8px,1.1vw,13px) monospace;color:var(--cyan);pointer-events:none}.foe .marker{color:var(--red)} aside{padding:19px;background:linear-gradient(150deg,#122437,#0b1421)} #brief{min-height:3.2em;color:#c1d4e0;line-height:1.45} #orders{color:var(--cyan);font:700 13px monospace;margin:12px 0} #fleet{display:grid;gap:6px;margin-bottom:13px} .unit{text-align:left;display:flex;align-items:center;gap:10px;font-size:13px} .unit img{width:36px;height:34px;object-fit:contain}.unit strong{display:block}.unit span{color:var(--muted)} #log{font-size:13px;color:#aac0d0;min-height:2em} 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:#e7fffd;box-shadow:0 0 12px 4px #62f2ff;transform-origin:0 50%}.ring{width:36px;height:36px;border-radius:50%;border:3px solid #72f9ff;box-shadow:0 0 16px currentColor}.blast{background:#fff3a3;border-color:#ff9870;color:#ff8552}.hud-art{height:4px;background:var(--cyan)} @media(max-width:760px){main{grid-template-columns:1fr}header{padding-top:18px} aside{padding:14px}.scope{font-size:9px}footer{font-size:9px}}
aside:before{content:"";display:block;height:14px;margin:0 0 12px;background:url(/assets/command-trim.png) left center/auto 100% no-repeat}.cell{overflow:visible}.cell:has(.craft){z-index:1}.cell:focus-visible{z-index:2}