/* Layout: full-bleed battlefield canvas with a command sidebar docked right; on phones the sidebar stacks under the map.
   Deliberately single-theme: a dark field console, whatever the host theme. */
:root{
  --ground:#0b0e0f; --panel:#141a1c; --panel-2:#1c2427; --line:#2b373b; --text:#d5dccd; --dim:#86928a;
  --amber:#f0b43c; --amber-dim:#7a5a1c; --enemy:#d2463a; --ok:#72d15c; --warn:#e8c33a; --bad:#e0503c;
  --display:'Saira Condensed','Arial Narrow',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--ground);color:var(--text);font:13px/1.4 var(--mono);overflow:hidden;margin:0}
#app{display:flex;height:100%}
#view{position:relative;flex:1;min-width:0;min-height:0;background:#000}
#game{display:block;width:100%;height:100%;touch-action:none;outline:none}
#side{width:252px;flex:none;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px;padding:10px 12px;overflow-y:auto}
.hud{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lbl{display:block;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
#credits{font:800 26px/1 var(--display);color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pbar{height:8px;background:#0a0d0e;border:1px solid var(--line);position:relative;overflow:hidden}
.pbar i{position:absolute;inset:0 auto 0 0;background:var(--ok);width:0}
.pbar b{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text);left:0}
#ptext{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
#ptext.low{color:var(--bad)}
#mini{width:100%;aspect-ratio:1;max-width:100%;display:block;background:#000;border:1px solid var(--line);image-rendering:pixelated;cursor:crosshair;touch-action:none}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
button{font:inherit;color:inherit;cursor:pointer}
.tabs button,.actions button{background:var(--panel-2);border:1px solid var(--line);padding:6px 4px;font:700 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);min-height:30px}
.tabs button:hover,.actions button:hover{color:var(--text);border-color:#46555a}
.tabs button.on{color:var(--amber);border-color:var(--amber-dim);background:#231d10}
.actions button.on{color:var(--ground);background:var(--amber);border-color:var(--amber)}
button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.bb{position:relative;background:#101517;border:1px solid var(--line);padding:4px 4px 5px;text-align:left;overflow:hidden;display:flex;flex-direction:column;gap:2px;min-height:96px}
.bb canvas{width:100%;height:auto;aspect-ratio:96/56;display:block;position:relative;z-index:1}
.bb .nm{font:700 13px/1.05 var(--display);letter-spacing:.03em;position:relative;z-index:1}
.bb .cost{font-size:11px;color:var(--amber);font-variant-numeric:tabular-nums;position:relative;z-index:1}
.bb .prog{position:absolute;left:0;right:0;bottom:0;top:0;background:linear-gradient(0deg,rgba(240,180,60,.28),rgba(240,180,60,.10));transform-origin:left;transform:scaleX(var(--p,0));z-index:0}
.bb .st{position:absolute;top:6px;right:6px;z-index:2;font:800 12px/1 var(--display);letter-spacing:.1em;color:var(--ground);background:var(--amber);padding:3px 5px}
.bb .st:empty{display:none}
.bb .st.hold{background:var(--dim)}
.bb .cnt{position:absolute;top:6px;left:6px;z-index:2;font:800 13px/1 var(--display);color:var(--amber);text-shadow:0 1px 2px #000}
.bb:hover:not(.lock){border-color:#56666b}
.bb.ready{border-color:var(--amber);animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{to{box-shadow:inset 0 0 0 1px var(--amber)}}
.bb.lock{opacity:.38;cursor:not-allowed}
.bb.busy{opacity:.6}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:4px}
#bMenu{grid-column:1/-1}
#log{display:flex;flex-direction:column;gap:2px;font-size:11px;min-height:5.6em}
#log div{color:var(--dim)}
#log div:first-child{color:var(--text)}
#log time{color:var(--amber-dim);margin-right:6px;font-variant-numeric:tabular-nums}
details.keys{font-size:11px;color:var(--dim);border-top:1px solid var(--line);padding-top:8px}
details.keys summary{cursor:pointer;font:700 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
details.keys dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:8px 0 0}
details.keys dt{color:var(--amber)}
details.keys dd{margin:0}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(8,10,11,.55),rgba(8,10,11,.92));padding-inline:16px;z-index:5;overflow:auto}
.card{max-width:520px;width:100%;background:rgba(20,26,28,.94);border:1px solid var(--line);border-top:3px solid var(--amber);padding:22px 22px 20px;display:flex;flex-direction:column;gap:14px}
.card h1{font:800 54px/.9 var(--display);letter-spacing:.02em;margin:0;text-transform:uppercase;color:var(--amber);text-wrap:balance}
.card h1 small{display:block;font:600 14px/1.2 var(--mono);letter-spacing:.24em;color:var(--dim);margin-top:8px}
.card p{margin:0;color:var(--dim);max-width:62ch}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.seg button{background:transparent;border:0;border-right:1px solid var(--line);padding:9px 6px;font:700 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.seg button:last-child{border-right:0}
.seg.s4{grid-template-columns:repeat(4,1fr)}
.seg button.on{background:var(--amber);color:var(--ground)}
.seg button span{display:block;font:400 10px/1.2 var(--mono);letter-spacing:0;text-transform:none;margin-top:4px;opacity:.8}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.go{background:var(--amber);color:var(--ground);border:1px solid var(--amber);padding:11px 22px;font:800 20px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.go:hover{background:#ffc853}
.ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--line);padding:11px 16px;font:700 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;min-height:44px}
.ghost:hover{border-color:#56666b}
label.chk{display:flex;gap:6px;align-items:center;color:var(--dim);font-size:12px;cursor:pointer}
.stats{display:grid;grid-template-columns:1fr auto auto;gap:4px 18px;font-variant-numeric:tabular-nums}
.stats .h{color:var(--dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
#end h1.lose{color:var(--bad)}
#pausebar{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--amber);color:var(--ground);font:800 16px/1 var(--display);letter-spacing:.3em;padding:6px 14px;z-index:4;pointer-events:none}
#menu .card h1{font-size:40px}
#menu .row{align-items:stretch}
#menu .row .go,#menu .row .ghost{min-height:44px;padding-block:0}
#menu .row:last-child{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.bb .hk{position:absolute;right:5px;bottom:4px;z-index:2;font:700 10px/1 var(--mono);color:var(--dim);border:1px solid var(--line);padding:1px 4px;background:rgba(0,0,0,.45)}
#tip{position:fixed;z-index:20;width:230px;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--amber);padding:8px 10px;pointer-events:none;font-size:11px;display:flex;flex-direction:column;gap:3px;box-shadow:0 6px 18px rgba(0,0,0,.6)}
#tip .th{display:flex;justify-content:space-between;align-items:baseline}
#tip .th b{font:800 16px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--amber)}
#tip .th span{color:var(--amber);font-variant-numeric:tabular-nums}
#tip p{margin:0 0 3px;color:var(--text)}
#tip .tr{display:flex;justify-content:space-between;gap:10px}
#tip .tr span:first-child{color:var(--dim)}
#tip .tr span:last-child{text-align:right}
#selpanel{background:var(--panel-2);border:1px solid var(--line);padding:6px 8px;display:flex;flex-direction:column;gap:4px}
#selpanel .sn{display:flex;justify-content:space-between;align-items:baseline}
#selpanel .sn b{font:800 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
#selpanel .sk,#selpanel .sh{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
#selpanel .sbar{height:6px;background:#0a0d0e;border:1px solid var(--line)}
#selpanel .sbar i{display:block;height:100%;width:0}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{background:var(--panel);border:1px solid var(--line);padding:4px 8px;min-height:28px;font:700 12px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.chip b{color:var(--amber)}
.chip:hover{border-color:var(--amber-dim);background:#231d10}
@media (max-width:720px){
  #app{flex-direction:column}
  #view{flex:1 1 56%}
  #side{width:auto;border-left:0;border-top:1px solid var(--line);flex:1 1 44%;padding:10px 16px}
  #mini{max-width:180px}
  .card h1{font-size:40px}
}
@media (prefers-reduced-motion:reduce){.bb.ready{animation:none;box-shadow:inset 0 0 0 1px var(--amber)}}