:root{
    --bg:#1a1c17; --panel:#23261e; --panel2:#2c3025; --ink:#e8e4d5; --muted:#a8a394;
    --line:#3d4132; --ger:#5b6b7a; --gerL:#8ba3b8; --sov:#8a3b32; --sovL:#c8695c;
    --gold:#c9a227; --green:#7a8c3f; --red:#b4462f;
    --shadow:0 2px 10px rgba(0,0,0,.5);
    --mono:'Courier New',monospace; --sans:'Segoe UI',Roboto,system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);display:flex;flex-direction:column;overflow:hidden}
  header{
    display:flex;align-items:center;gap:14px;padding:8px 16px;
    background:linear-gradient(180deg,#2c3025,#20231b);border-bottom:2px solid var(--line);
    box-shadow:var(--shadow);z-index:5;flex-wrap:wrap;
  }
  header h1{font-family:var(--mono);font-size:20px;letter-spacing:3px;margin:0;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 0 #000}
  header .sub{font-size:11px;color:var(--muted);letter-spacing:1px;margin-top:-2px}
  .status{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
  .stat{text-align:center;line-height:1.1}
  .stat b{display:block;font-family:var(--mono);font-size:18px;color:var(--ink)}
  .stat span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
  .stat.ger b{color:var(--gerL)} .stat.sov b{color:var(--sovL)}
  .wrap{flex:1;display:flex;min-height:0}
  .board{flex:1;background:radial-gradient(circle at 50% 40%,#20241b,#14160f);position:relative;overflow:hidden}
  canvas{position:absolute;inset:0;width:100%;height:100%;background:#12140d;cursor:grab;display:block}
  canvas.grabbing{cursor:grabbing}
  .mapctl{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:8}
  .mapctl button{width:34px;height:34px;font-size:17px;font-weight:700;line-height:1;color:var(--ink);background:rgba(35,38,30,.9);border:1px solid var(--line);border-radius:5px;cursor:pointer;box-shadow:var(--shadow);padding:0;transition:.12s}
  .mapctl button:hover{border-color:var(--gold);background:rgba(51,56,42,.95)}
  .maphint{position:absolute;bottom:8px;left:10px;font-size:10.5px;color:var(--muted);background:rgba(20,22,15,.6);padding:3px 8px;border-radius:4px;z-index:8;pointer-events:none;font-family:var(--mono)}
  aside{width:328px;background:var(--panel);border-left:2px solid var(--line);display:flex;flex-direction:column;min-height:0}
  .sec{border-bottom:1px solid var(--line);padding:12px 14px}
  .sec h2{margin:0 0 8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-family:var(--mono)}
  .btn{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);background:linear-gradient(180deg,#3a3f2e,#2c3025);border:1px solid var(--line);padding:9px 12px;border-radius:4px;cursor:pointer;transition:.12s;width:100%}
  .btn:hover:not(:disabled){border-color:var(--gold);background:linear-gradient(180deg,#454b36,#33382a)}
  .btn:disabled{opacity:.4;cursor:not-allowed}
  .btn.primary{background:linear-gradient(180deg,#7a6a1e,#5c500f);border-color:var(--gold);color:#fff}
  .btn.primary:hover:not(:disabled){background:linear-gradient(180deg,#8f7c23,#6b5c11)}
  .btn.danger:hover:not(:disabled){border-color:var(--red)}
  .row{display:flex;gap:8px;margin-top:8px}
  .unitcard{font-size:13px;line-height:1.5}
  .unitcard .nm{font-family:var(--mono);font-size:15px;font-weight:bold;letter-spacing:1px}
  .unitcard .side-ger{color:var(--gerL)} .unitcard .side-sov{color:var(--sovL)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:8px;font-size:12px}
  .grid2 .k{color:var(--muted)} .grid2 .v{text-align:right;font-family:var(--mono)}
  .bar{height:9px;background:#111;border-radius:5px;overflow:hidden;margin-top:3px;border:1px solid #000}
  .bar i{display:block;height:100%}
  .tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:3px;margin-right:4px;font-family:var(--mono)}
  .tag.pin{background:var(--red);color:#fff}
  .tag.done{background:#444;color:#bbb}
  .tag.moved{background:#5a5a2a;color:#fff}
  .log{flex:1;overflow-y:auto;font-size:12px;line-height:1.45;padding:10px 14px;font-family:var(--mono);color:var(--muted);min-height:60px}
  .log .e{margin-bottom:4px;border-left:2px solid var(--line);padding-left:7px}
  .log .e.ger{border-color:var(--ger);color:#c3cfd8}
  .log .e.sov{border-color:var(--sov);color:#e0b0a8}
  .log .e.sys{border-color:var(--gold);color:#e6d79a}
  .log .e.hit{border-color:var(--red);color:#eab0a0}
  .hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4}
  .legend{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:11px;color:var(--muted)}
  .legend span{display:flex;align-items:center;gap:4px}
  .sw{width:12px;height:12px;border-radius:2px;border:1px solid #000}
  .overlay{position:absolute;inset:0;background:rgba(10,11,8,.93);display:flex;align-items:center;justify-content:center;z-index:20;overflow:auto;padding:20px}
  .modal{background:var(--panel);border:2px solid var(--gold);border-radius:8px;padding:26px 30px;max-width:720px;width:100%;box-shadow:var(--shadow)}
  .modal h2{font-family:var(--mono);letter-spacing:3px;color:var(--gold);margin:0 0 4px;font-size:26px;text-align:center}
  .modal .lead{color:var(--muted);font-size:13px;line-height:1.5;text-align:center;margin:0 0 16px}
  .modal p{color:var(--ink);line-height:1.6;font-size:14px}
  .modal .big{font-size:30px;font-family:var(--mono);margin:8px 0;text-align:center}
  .win{color:var(--green)} .lose{color:var(--red)} .draw{color:var(--gold)}
  .scnGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 14px}
  .scn{border:2px solid var(--line);border-radius:6px;padding:12px 14px;cursor:pointer;transition:.14s;background:#20231b}
  .scn:hover{border-color:#6f7550;background:#262a1f}
  .scn.sel{border-color:var(--gold);background:#33382a}
  .scn h3{margin:0 0 4px;font-family:var(--mono);font-size:15px;color:var(--ink)}
  .scn .meta{font-size:10px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}
  .scn small{color:var(--muted);font-size:11.5px;line-height:1.4;display:block}
  .sideRow{display:flex;gap:12px;justify-content:center;margin:4px 0 6px}
  .sidePick{flex:1;max-width:230px;border:2px solid var(--line);border-radius:6px;padding:10px 12px;cursor:pointer;transition:.14s}
  .sidePick:hover{border-color:#6f7550}
  .sidePick.sel{border-color:var(--gold);background:#33382a}
  .sidePick.g h3{color:var(--gerL);margin:0 0 3px;font-family:var(--mono)}
  .sidePick.s h3{color:var(--sovL);margin:0 0 3px;font-family:var(--mono)}
  .sidePick small{color:var(--muted);font-size:11px;line-height:1.35;display:block}
  kbd{background:#111;border:1px solid var(--line);border-radius:3px;padding:1px 5px;font-family:var(--mono);font-size:11px}
  .brief{background:#1b1e16;border:1px solid var(--line);border-radius:6px;padding:10px 14px;font-size:12.5px;color:var(--muted);line-height:1.5;margin:6px 0 14px}
  .brief b{color:var(--ink)}
  @media(max-width:900px){aside{width:262px}.scnGrid{grid-template-columns:1fr}}