:root{color-scheme:dark;--bg: #07101c;--panel: rgba(8, 17, 31, .88);--panel-border: rgba(148, 163, 184, .16);--text: #e2e8f0;--muted: #9fb0c9;--primary: #60a5fa;--shadow: 0 16px 40px rgba(15, 23, 42, .35);font-family:Inter,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,rgba(59,130,246,.2),transparent 0 24%),linear-gradient(135deg,#020617,var(--bg));color:var(--text)}button{font:inherit}#app{min-height:100vh}h1,h2,h3,p{margin-top:0}.app-shell{display:grid;grid-template-columns:360px 1fr;gap:1rem;min-height:100vh;padding:1rem}.sidebar,.main-stage{display:flex;min-width:0;flex-direction:column;gap:1rem}.panel{border:1px solid var(--panel-border);border-radius:18px;background:var(--panel);padding:1rem 1.1rem;box-shadow:var(--shadow)}.hero h1{margin-bottom:.55rem;font-size:2rem}.eyebrow{margin:0 0 .35rem;color:var(--primary);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700}.intro,.muted-text{color:var(--muted);line-height:1.55}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.chip{display:inline-flex;align-items:center;padding:.22rem .6rem;border-radius:999px;font-size:.72rem;background:#60a5fa24;color:#bfdbfe}.chip.muted{background:#94a3b82e;color:var(--muted)}.toolbar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem}.speed-controls{display:flex;flex-wrap:wrap;gap:.5rem}.btn{border:1px solid rgba(148,163,184,.28);background:#0f172ae6;color:var(--text);border-radius:10px;padding:.62rem .8rem;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.btn:hover,.btn:focus-visible{transform:translateY(-1px);border-color:#60a5fab3}.btn.active{background:#2563eb3d;border-color:#60a5faf2}.battlefield{flex:1;min-height:560px;padding:.75rem}#battlefieldCanvas{display:block;width:100%;height:min(70vh,640px);border-radius:14px;background:linear-gradient(180deg,#0f172ae6,#08111ffa)}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0}.stat-grid div{min-width:0}.stat-grid dt{margin-bottom:.2rem;color:var(--muted);font-size:.78rem}.stat-grid dd{margin:0;font-weight:700}.event-log{display:flex;flex-direction:column;gap:.65rem;margin:0;padding:0;list-style:none}.event-log li{border:1px solid rgba(148,163,184,.16);border-radius:12px;background:#0f172ab8;padding:.7rem .75rem}.event-log li span{display:inline-block;margin-bottom:.22rem;color:var(--muted);font-size:.72rem}.event-log li strong{display:block;font-size:.92rem;line-height:1.45}.event-log li.good{border-color:#22c55e57}.event-log li.warn{border-color:#f59e0b57}.legend{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.legend span{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted)}.swatch{display:inline-block;width:.8rem;height:.8rem;border-radius:999px}.swatch.crimson{background:#ef4444}.swatch.azure{background:#3b82f6}.swatch.gold{background:#f59e0b}.swatch.unit{background:#f8fafc;border:1px solid rgba(15,23,42,.8)}@media(max-width:980px){.app-shell{grid-template-columns:1fr}.battlefield{min-height:420px}}