:root{color-scheme:dark;--bg:#05090b;--panel:#091013e8;--line:#24353c;--text:#dce9ea;--muted:#71848a;--cyan:#62e3dc;--red:#ff655f;--amber:#efb34e;--green:#94e6a8}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 38% 28%,#10242a 0,#071013 34%,#030607 76%);color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;min-height:100vh}
button,input{font:inherit}
.shell{min-height:100vh;padding:18px;max-width:1800px;margin:auto}
header{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid var(--line);padding:3px 3px 15px;margin-bottom:14px}
.eyebrow,.panel-title,.console-label{letter-spacing:.13em;font-size:10px;color:#799198;font-weight:800}
h1{font-size:31px;letter-spacing:.2em;margin:4px 0 0;font-weight:600}
.status{font:700 10px ui-monospace,monospace;letter-spacing:.1em;color:#8fa4a9}
.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 13px var(--cyan);margin-right:8px}
main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.72fr);gap:12px;align-items:start}
.panel{background:linear-gradient(145deg,#0b1417f2,#070d0ff2);border:1px solid var(--line);box-shadow:0 18px 70px #0007;position:relative;overflow:hidden}
.panel:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#62e3dc08,transparent 30%)}
.panel-title{height:34px;border-bottom:1px solid #1a292e;display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.panel-title b{font:600 10px ui-monospace,monospace;color:#769097}
.globe-panel{min-height:510px}
.globe-wrap{height:calc(100% - 34px);position:relative;min-height:476px}
canvas{width:100%;height:100%;display:block}
.globe-overlay{position:absolute;left:15px;bottom:15px;display:flex;gap:8px;flex-wrap:wrap}
.globe-overlay span{background:#071013dd;border:1px solid #274047;padding:7px 9px;font:700 10px ui-monospace,monospace;color:#728c92}
.globe-overlay b{color:var(--text);margin-left:8px}
.side{display:grid;gap:12px}
.objective{padding-bottom:13px}
.objective h2,.objective p,.objective .bar,.objective strong{margin-left:12px;margin-right:12px}
.objective h2{font-size:17px;margin-top:14px;margin-bottom:6px}
.objective p{color:#8ea0a5;font-size:12px}
.bar{height:5px;background:#142126;margin-top:15px}
.bar i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 10px #62e3dc66;width:0}
.objective strong{display:block;text-align:right;font:700 10px ui-monospace,monospace;color:var(--cyan);margin-top:5px}
.mission{padding:10px 12px;border-bottom:1px solid #142126;cursor:pointer;transition:.15s}
.mission:hover,.mission.selected{background:#102025}
.mission.selected{box-shadow:inset 3px 0 0 var(--cyan)}
.mission small{display:flex;justify-content:space-between;color:#6f858b;font:700 9px ui-monospace,monospace;letter-spacing:.08em}
.mission h3{font-size:13px;margin:5px 0 2px}
.mission p{font-size:11px;color:#84989d;margin:0}
.mission.risk h3{color:#ff8d88}

.commander-panel{padding-bottom:10px}
.commander-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:9px 10px}
.commander-stats span{border:1px solid #1d3036;background:#0b1518;padding:6px;color:#6f858b;font:700 9px ui-monospace,monospace}
.commander-stats b{float:right;color:#d8e8ea}
.roster-head{display:flex;justify-content:space-between;padding:3px 10px 6px;color:#7d9298;font:800 9px ui-monospace,monospace;letter-spacing:.08em}
.roster-head small{font-size:8px;color:#52656a}
.roster{display:grid;gap:1px;border-top:1px solid #142126}
.roster-row{display:grid;grid-template-columns:22px 1fr auto;gap:7px;align-items:center;padding:7px 10px;background:#081013;border-bottom:1px solid #101b1e}
.roster-row:hover{background:#0d181b}
.roster-row input{accent-color:var(--cyan)}
.roster-row .identity strong{display:block;font-size:11px}
.roster-row .identity small{display:block;color:#657b81;font:600 8px ui-monospace,monospace}
.roster-row .soldier-state{font:700 8px ui-monospace,monospace;color:var(--green)}
.roster-row.unavailable{opacity:.45}
.roster-row.unavailable .soldier-state{color:var(--red)}
.deployment-order{margin:9px 10px 0;border:1px solid #24373d;background:#091316;padding:9px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.deployment-order strong{display:block;font-size:12px;margin-top:2px}
.deployment-order small{display:block;color:#6b8086;font:600 8px ui-monospace,monospace;margin-top:2px}
.deployment-order button{background:#143038;border:1px solid #3b6a73;color:#d7f5f2;font:800 9px ui-monospace,monospace;padding:9px 11px;cursor:pointer}
.deployment-order button:disabled{opacity:.35;cursor:not-allowed}
.debrief{margin:8px 10px 0;color:#7f949a;font:600 9px/1.5 ui-monospace,monospace}
.debrief b{color:#bcd0d4}

.tactical{min-height:520px}
.tactical-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:486px}
.battlefield{height:430px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);gap:2px;padding:18px;background:radial-gradient(circle at 45% 45%,#12282d,#071012 72%)}
.tile{appearance:none;border:1px solid #1b3036;background:#0d191c;position:relative;min-width:0;min-height:0;padding:0;cursor:pointer;transition:border-color .12s,background .12s,opacity .12s}
.tile:hover{border-color:#46717a;background:#122429}
.tile.fog{opacity:.22;filter:saturate(.2)}
.tile.wall{background:linear-gradient(135deg,#26363b,#111b1e);border-color:#405258;cursor:not-allowed}
.tile.half_cover:before,.tile.full_cover:before{content:"";position:absolute;inset:30% 17% 9%;background:linear-gradient(#4a6268,#23363b);border-top:2px solid #789097;box-shadow:0 3px 8px #0008}
.tile.full_cover:before{inset:10% 17% 9%;background:linear-gradient(#536a70,#233338)}
.tile.selected{outline:2px solid var(--cyan);outline-offset:-2px;box-shadow:inset 0 0 18px #62e3dc20}
.unit{position:absolute;left:50%;top:50%;width:56%;height:56%;transform:translate(-50%,-50%);border-radius:50%;z-index:3;display:grid;place-items:center;font:800 9px ui-monospace,monospace;box-shadow:0 0 16px currentColor}
.unit.human{background:#163f43;border:2px solid var(--cyan);color:var(--cyan)}
.unit.alien{background:#481d20;border:2px solid var(--red);color:var(--red)}
.unit.dead{filter:grayscale(1);opacity:.45;transform:translate(-50%,-50%) rotate(45deg)}
.unit-health{position:absolute;left:10%;right:10%;bottom:4px;height:3px;background:#0b1113;z-index:4}
.unit-health i{display:block;height:100%;background:var(--green)}
.action-hint{min-height:56px;border-top:1px solid #1a292e;padding:10px 14px;color:#80949a;font:600 11px ui-monospace,monospace;display:flex;align-items:center}
.tactical-console{border-left:1px solid #1a292e;background:#070d0f;padding:12px;display:flex;flex-direction:column;gap:12px}
.selected-unit h3{font-size:16px;margin:5px 0 9px}
.unit-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.unit-stats span{border:1px solid #1d3036;background:#0b1518;padding:6px;color:#6f858b;font:700 9px ui-monospace,monospace}
.unit-stats b{color:#d8e8ea;float:right}
.tactical-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tactical-actions button{min-height:36px;background:#102027;border:1px solid #31515a;color:#c9dcdf;font:700 9px ui-monospace,monospace;padding:7px;cursor:pointer}
.tactical-actions button:hover:not(:disabled){border-color:var(--cyan);color:white}
.tactical-actions button:disabled{opacity:.35;cursor:not-allowed}
#endTurn{border-color:#6e5832;color:#e9c98d}
#restartTraining{grid-column:1/-1}
#suppress.active{border-color:var(--amber);color:var(--amber);box-shadow:inset 0 0 12px #efb34e15}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:6px;color:#6f858b;font:700 8px ui-monospace,monospace}
.legend span{display:flex;align-items:center;gap:5px}
.swatch{width:10px;height:10px;border:1px solid #31464c;display:inline-block}
.swatch.human{background:var(--cyan)}.swatch.alien{background:var(--red)}.swatch.half{background:#4a6268}.swatch.full{background:#26363b}
.combat-log{margin-top:auto;max-height:170px;overflow:auto;border-top:1px solid #1b2c31;padding-top:7px}
.combat-line{font:600 9px/1.45 ui-monospace,monospace;color:#71878d;padding:4px 0;border-bottom:1px solid #101b1e}
.combat-line b{color:#a8bec2}

.feed{min-height:350px}
.event{padding:9px 12px;border-bottom:1px solid #142126;font-size:11px;color:#8ea1a6}
.event b{color:#cfe1e4}
.event time{color:#5f747a;margin-right:8px;font:700 9px ui-monospace,monospace}

@media(max-width:1100px){
  main{grid-template-columns:1fr}
  .side{grid-template-columns:1fr 1fr}
  .commander-panel{grid-column:1/-1}
  .tactical-layout{grid-template-columns:minmax(0,1fr) 260px}
}
@media(max-width:760px){
  .shell{padding:8px}
  header{align-items:start;gap:12px}
  .status{max-width:150px;text-align:right}
  .side{grid-template-columns:1fr}
  .commander-panel{grid-column:auto}
  .globe-panel{min-height:390px}
  .globe-wrap{min-height:354px}
  .tactical-layout{grid-template-columns:1fr}
  .tactical-console{border-left:0;border-top:1px solid #1a292e}
  .battlefield{height:360px;padding:8px}
  .deployment-order{grid-template-columns:1fr}
}