:root{color-scheme:dark;--ink:#edf6ed;--mint:#8ee9c4;--dim:#a1b5b1;--line:#344b49;--dark:#101819}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#1d3030,var(--dark) 56%);color:var(--ink);font:15px/1.5 system-ui,sans-serif}
main{max-width:1360px;margin:auto;padding:clamp(14px,4vw,48px)}header,.mapbar,.legend,.secondary{display:flex;align-items:center;justify-content:space-between;gap:12px}
header{margin-bottom:20px}small,footer,.mapbar,.legend{font:700 11px/1.4 ui-monospace,monospace;letter-spacing:.13em;color:var(--dim)}
h1{font-size:clamp(32px,6vw,76px);line-height:.95;letter-spacing:-.075em;margin:8px 0}h1 span{color:var(--mint)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:18px}section,aside{border:1px solid var(--line);background:#101a1b}
.mapbar,.legend{padding:12px;background:#192728}.mapbar strong{color:var(--mint)}.legend{justify-content:flex-start;flex-wrap:wrap}
canvas{width:100%;display:block;aspect-ratio:13/7;cursor:crosshair;touch-action:manipulation}
aside{padding:15px}.brief{padding:12px;background:#1e3230 url(assets/plate.png) center/100% 100%;background-blend-mode:multiply;min-height:147px;border:1px solid var(--line)}
h2{font-size:19px;line-height:1.2;margin:6px 0}p{margin:6px 0;color:var(--dim)}#status{padding:4px 12px;min-height:30px}
button{border:1px solid var(--line);background:#192729;color:var(--ink);font:inherit;padding:8px 11px;cursor:pointer;min-height:40px}
button:hover,button[aria-pressed=true]{border-color:var(--mint);color:var(--mint)}button:focus-visible,canvas:focus-visible{outline:2px solid #ffce75;outline-offset:2px}button:disabled{opacity:.48;cursor:default}
#squad{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}.unit{text-align:left}.unit span{display:block;color:var(--dim);font:11px/1.7 ui-monospace,monospace}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.primary{width:100%;margin:8px 0;background:var(--mint);color:#132322;font-weight:800}.primary:hover{color:#132322;background:#adffdd}.secondary{justify-content:flex-start;flex-wrap:wrap}
#hint{color:var(--dim);font-size:12px;margin-top:8px;min-height:32px}footer{margin-top:18px}footer b{color:var(--mint)}
@media(max-width:900px){.layout{grid-template-columns:1fr}aside{display:grid;gap:8px;grid-template-columns:1fr 1fr}.brief,.secondary{grid-column:1/-1;min-height:0}#squad,.primary{margin:0}.actions{grid-column:2;grid-row:2}}
@media(max-width:500px){main{padding:12px}aside{padding:9px}button{font-size:12px;padding:5px}small{font-size:9px}}