:root {
  --chrome: #b8b8b2;
  --chrome-hi: #f3f3ed;
  --chrome-mid: #d6d6cf;
  --chrome-lo: #696961;
  --ink: #151515;
  --screen: #0a0d0b;
  --green: #72ff76;
  --amber: #ffe168;
  --red: #ff5a55;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #252827; color: var(--ink); font-family: Chicago, Monaco, "Courier New", monospace; }
body { display: grid; place-items: center; overflow: hidden; }
button, input, select { font: inherit; }
button { border: 2px solid #161616; background: #d8d8d2; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #777; cursor: pointer; }
button:active { box-shadow: inset 2px 2px 0 #777, inset -2px -2px 0 #fff; transform: translateY(1px); }
#app { width: min(1460px, 100vw); height: min(900px, 100vh); padding: 8px; background: var(--chrome); border: 2px solid #111; box-shadow: inset 2px 2px 0 var(--chrome-hi), inset -2px -2px 0 var(--chrome-lo), 0 10px 40px #0008; display: flex; flex-direction: column; }
.mac-titlebar { height: 34px; border: 2px solid #111; background: #e8e8e2; position: relative; display: grid; place-items: center; flex: 0 0 auto; }
.title-stripes { position:absolute; inset:4px 7px; background: repeating-linear-gradient(to bottom,#222 0,#222 1px,transparent 1px,transparent 3px); opacity:.45; }
.title-name { z-index:1; background:#e8e8e2; padding:0 18px; font-weight:900; letter-spacing:2px; }
.title-version { position:absolute; right:10px; z-index:1; background:#e8e8e2; padding:0 6px; font-size:11px; }
.game-shell { min-height:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:8px; margin-top:8px; }
.viewport-wrap { position:relative; min-width:0; min-height:0; border:3px solid #1a1a1a; box-shadow:inset 3px 3px 0 #666, inset -3px -3px 0 #eee; background:#050706; overflow:hidden; }
#game { width:100%; height:100%; display:block; image-rendering:pixelated; cursor:crosshair; }
.side-panel { display:flex; flex-direction:column; gap:7px; min-height:0; }
.panel-block { border:2px solid #111; background:#121512; color:#e6eadf; box-shadow:inset 1px 1px 0 #555; padding:8px; }
.panel-title { color:#111; background:#c9c9c2; margin:-8px -8px 8px; padding:4px 7px; border-bottom:2px solid #111; font-size:12px; font-weight:900; letter-spacing:1px; }
.radar-panel { flex:0 0 auto; }
#minimap { display:block; width:100%; height:auto; border:1px solid #555; background:#050806; image-rendering:pixelated; }
.status-panel { flex:0 0 auto; }
.meter-row { display:grid; grid-template-columns:52px 1fr 34px; align-items:center; gap:6px; font-size:11px; margin:5px 0; }
.meter { height:12px; border:1px solid #6f776d; background:#1c251c; }
.meter i { display:block; height:100%; width:100%; background:repeating-linear-gradient(90deg,#56bd59 0,#56bd59 7px,#163b19 7px,#163b19 9px); }
.meter-row b { text-align:right; color:#fff; }
.supply-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:8px; }
.supply-grid div { display:flex; justify-content:space-between; padding:5px 6px; border:1px solid #485047; font-size:11px; }
.supply-grid strong { color:var(--amber); }
.engineer-status { display:grid; grid-template-columns:15px 1fr; grid-template-rows:auto auto; gap:0 7px; margin-bottom:8px; }
.lamp { grid-row:1/3; width:12px; height:12px; margin-top:3px; border-radius:50%; border:1px solid #000; box-shadow:0 0 8px currentColor; }
.lamp.ready { background:#60ff60; color:#60ff60; }.lamp.busy{background:#ffd54d;color:#ffd54d}.lamp.dead{background:#ff4747;color:#ff4747}
.engineer-status strong { font-size:12px; }.engineer-status small{font-size:10px;color:#aab4a7}
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.tool { height:32px; color:#111; font-size:10px; text-align:left; padding:3px 5px; }
.tool span { display:inline-block; width:18px; text-align:center; font-weight:bold; }.tool.active{background:#fff39b;outline:2px solid #85ff84;outline-offset:-4px}.tool:last-child{grid-column:1/3}
.hint { color:#9da99b; font-size:9px; line-height:1.25; margin:7px 0 0; }
.field-row { display:flex; justify-content:space-between; border-bottom:1px dotted #4b5548; padding:3px 0; font-size:11px; }.field-row strong{color:#8dff90}.field-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:7px}.field-actions button{font-size:9px;padding:5px 2px}.victory-card{width:min(420px,88%)}.victory-kicker{font-size:10px;font-weight:900;letter-spacing:2px;color:#365a38}.victory-card h2{letter-spacing:2px;margin-bottom:6px}.victory-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0}.victory-stats div{border:2px solid #333;background:#efefe8;padding:8px 6px}.victory-stats span{display:block;font-size:9px;color:#555}.victory-stats strong{font-size:18px}
.message-panel { flex:1; min-height:80px; overflow:hidden; }.radio-log{height:100%;overflow:hidden;font-size:9px;line-height:1.3;color:#cfd9cb}.radio-entry{margin-bottom:4px}.radio-entry em{font-style:normal;color:#7eff83}.radio-entry.warn{color:#ffdd75}.radio-entry.danger{color:#ff7772}
footer { height:25px; margin-top:7px; border:2px solid #111; background:#d8d8d1; display:flex; justify-content:space-between; align-items:center; padding:0 8px; font-size:10px; flex:0 0 auto; }
.overlay { position:absolute; inset:0; display:grid; place-items:center; background:#050807d9; z-index:20; }.hidden{display:none!important}
.start-overlay { background:radial-gradient(circle at 50% 45%,#183d2ccc,#030605f5 70%); }
.start-card, .dialog-card { width:min(600px,90%); background:#c8c8c1; border:3px solid #111; box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #6a6a64,0 12px 50px #000; padding:25px; text-align:center; }
.logo-mark{width:76px;height:76px;margin:0 auto 10px;border:4px double #111;background:#1c3f2a;color:#9cff9d;display:grid;place-items:center;font-size:30px;font-weight:900;transform:rotate(-3deg);box-shadow:6px 6px 0 #62625e}.start-card h1{font-size:32px;letter-spacing:5px;margin:11px 0 5px}.tagline{font-size:13px;line-height:1.5;margin:0 0 17px}.start-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;text-align:left}.start-grid label{font-size:10px;font-weight:bold}.start-grid input,.start-grid select{width:100%;margin-top:3px;padding:7px;border:2px solid #111;background:white}.seed-row{display:grid;grid-template-columns:1fr auto;gap:4px;margin-top:3px}.seed-row input{margin-top:0}.seed-row button{font-size:9px;padding:4px 7px}.primary{background:#efffe3;font-weight:900;padding:10px 28px;margin-top:16px}.microcopy{font-size:9px;margin:12px 0 0;color:#444}.dialog-card{width:min(360px,85%)}.dialog-card button{display:block;width:100%;margin:9px 0;padding:9px}.tutorial-card{position:absolute;left:18px;bottom:18px;width:min(390px,calc(100% - 36px));background:#e7e7df;border:3px solid #111;box-shadow:inset 2px 2px #fff,inset -2px -2px #777,8px 8px #0007;padding:14px;z-index:15}.tutorial-card h3{margin:4px 0 6px;font-size:16px}.tutorial-card p{font-size:11px;line-height:1.4;margin:0 0 9px}.tutorial-kicker{font-size:9px;font-weight:bold;color:#466348}.tutorial-card button{padding:5px 10px}.tiny-close{position:absolute;right:8px;top:7px;width:24px;height:24px;padding:0;font-size:16px}.toast{position:absolute;top:15px;left:50%;transform:translateX(-50%);background:#111e;color:#fff;border:1px solid #eee8;padding:8px 13px;font-size:11px;z-index:17;box-shadow:3px 3px #0008}
.death-prompt{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;gap:0 9px;min-width:250px;background:#090b09eb;color:#f1f5ee;border:2px solid #efefe8;box-shadow:4px 4px #0009;padding:8px 12px;z-index:18;text-align:left;letter-spacing:.5px}.death-prompt kbd{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border:2px solid #f4f4ed;background:#d8d8d0;color:#111;font:900 19px monospace;box-shadow:inset -2px -2px #777,inset 2px 2px #fff}.death-prompt strong{font-size:13px;line-height:1}.death-prompt span{font-size:8px;color:#aeb7aa;text-transform:uppercase;letter-spacing:1px}.death-prompt.hidden{display:none}
@media (max-width: 980px){ body{overflow:auto}.game-shell{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:1fr 1fr}.radar-panel{grid-row:span 2}#app{height:auto;min-height:100vh}.viewport-wrap{height:65vh}.message-panel{min-height:130px}footer{display:none}}

/* v0.3 tactical HUD */
.tactical-row{align-items:flex-start;gap:8px}.tactical-row span{flex:0 0 56px}.tactical-row strong{font-size:9px;text-align:right;line-height:1.25;color:#e9f5e4;max-width:190px}.field-panel{flex:0 0 auto}.message-panel{min-height:90px}.status-panel{position:relative}.status-panel:after{content:"LIVE";position:absolute;right:7px;top:5px;font-size:8px;color:#2d472f;background:#d7e7d1;border:1px solid #333;padding:1px 4px;letter-spacing:1px}
/* v0.4.0 multiplayer entry */
.v040-mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.v040-mode-buttons .primary{margin-top:0;width:100%;padding:11px 10px}.v040-mode-buttons .mp-entry{background:#d8f0ff}.v040-network-note{margin:10px 0 0;padding:6px;border:1px solid #67746a;background:#e6ede4;font-size:9px;line-height:1.35;color:#354437}

/* v0.5.0 nearest-base instrumentation */
.nearest-base-panel{flex:0 0 auto;background:#0d130e}.nearest-base-panel .field-row strong{font-size:10px}.base-health-row{grid-template-columns:50px 1fr 36px}.base-supplies{margin-top:5px}.base-supplies div{padding:4px 5px}.nearest-base-panel .meter i{background:repeating-linear-gradient(90deg,#78d46f 0,#78d46f 7px,#173a1a 7px,#173a1a 9px)}

/* v0.6.0 Visual Battlefield — denser field instrumentation */
.game-shell{grid-template-columns:minmax(0,1fr) 272px;gap:6px}
.side-panel{gap:5px}.panel-block{padding:6px}.panel-title{margin:-6px -6px 6px;padding:3px 6px;font-size:10px;letter-spacing:1.4px}
.meter-row{grid-template-columns:46px 1fr 30px;gap:4px;font-size:9px;margin:3px 0}.meter{height:9px}.supply-grid{gap:3px;margin-top:5px}.supply-grid div{padding:3px 5px;font-size:9px}
.field-row{padding:2px 0;font-size:9px}.tool{height:27px;font-size:9px}.hint{font-size:8px;margin-top:5px}.engineer-status{margin-bottom:5px}.engineer-status strong{font-size:10px}.engineer-status small{font-size:8px}
#minimap{border:2px solid #0b0d0c;box-shadow:inset 0 0 0 1px #697169}.status-panel:after{font-size:7px;top:3px;right:5px}.message-panel{min-height:72px}.radio-log{font-size:8px}
.viewport-wrap:after,.mp-viewport-wrap:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 30px #0005;z-index:2}
@media(max-width:980px){.game-shell{grid-template-columns:1fr}.side-panel{grid-template-columns:1fr 1fr}}