:root{
    --bg:#05060d; --panel:#0e1424; --panel2:#141c33; --ink:#e8ecff; --dim:#8794b8;
    --line:#26314f; --gold:#f6c651; --red:#ff4d4d; --accent:#5ad1ff;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    background:radial-gradient(1200px 800px at 70% -10%, #10203f 0%, #05060d 60%), var(--bg);
    color:var(--ink); font-family:"Segoe UI",system-ui,Arial,sans-serif; overflow:hidden;
  }
  #app{display:flex; height:100vh; width:100vw}
  #mapWrap{flex:1; position:relative; min-width:0}
  svg{width:100%; height:100%; display:block; touch-action:none}
  #side{
    width:360px; min-width:360px; background:linear-gradient(180deg,var(--panel),#080c17);
    border-left:1px solid var(--line); display:flex; flex-direction:column; height:100vh;
  }
  header{padding:12px 14px 8px; border-bottom:1px solid var(--line)}
  header h1{margin:0; font-size:17px; letter-spacing:1px; color:var(--gold); font-weight:700}
  header .sub{font-size:11px; color:var(--dim); margin-top:2px}
  #hud{padding:10px 14px; border-bottom:1px solid var(--line); font-size:12.5px}
  .row{display:flex; justify-content:space-between; margin:3px 0}
  .k{color:var(--dim)} .v{font-weight:600}
  #phaseBar{padding:8px 14px; border-bottom:1px solid var(--line)}
  #phaseName{color:var(--accent); font-weight:700; font-size:13.5px}
  #phaseNum{color:var(--dim); font-size:11px}
  #content{flex:1; overflow-y:auto; padding:12px 14px; font-size:13px; line-height:1.45}
  #content::-webkit-scrollbar{width:8px}
  #content::-webkit-scrollbar-thumb{background:#243052; border-radius:4px}
  #footer{padding:10px 14px; border-top:1px solid var(--line); display:flex; gap:8px}
  button{
    background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:7px;
    padding:8px 12px; font-size:13px; cursor:pointer; font-family:inherit; transition:.12s;
  }
  button:hover:not(:disabled){background:#1d2identifier;border-color:#3a4straight}
  button:hover:not(:disabled){background:#1d2a4a; border-color:#42557f}
  button:disabled{opacity:.4; cursor:not-allowed}
  button.primary{background:linear-gradient(180deg,#2b6bff,#1b46c9); border-color:#3f74ff; font-weight:600; flex:1}
  button.gold{background:linear-gradient(180deg,#f6c651,#d69a1e); color:#301f00; border-color:#f6c651; font-weight:700}
  button.danger{background:#3a1420; border-color:#7a2740; color:#ffb3c0}
  .log{font-size:12px; color:#c3cbe6}
  .log .e{padding:4px 8px; border-left:2px solid var(--line); margin:4px 0; background:#0c1striped}
  .log .e{padding:5px 9px; border-left:2px solid #2a3committed; margin:5px 0; background:#0b1striped}
  .log .e{padding:5px 9px; border-left:2px solid #2a355c; margin:5px 0; background:#0b1220; border-radius:0 6px 6px 0}
  .log .e.combat{border-left-color:var(--red)}
  .log .e.good{border-left-color:#39d98a}
  .log .e.event{border-left-color:var(--gold)}
  .pill{display:inline-block; padding:1px 7px; border-radius:20px; font-size:11px; font-weight:700}
  .unitline{display:flex; justify-content:space-between; align-items:center; padding:6px 8px; margin:4px 0; background:#0c1striped; border:1px solid var(--line); border-radius:6px}
  .unitline{display:flex; justify-content:space-between; align-items:center; padding:6px 9px; margin:5px 0; background:#0c1navy; border:1px solid var(--line); border-radius:7px}
  .unitline{display:flex; justify-content:space-between; align-items:center; padding:6px 9px; margin:5px 0; background:#0d1striped; border:1px solid var(--line); border-radius:7px}
  .unitline{display:flex;justify-content:space-between;align-items:center;padding:6px 9px;margin:5px 0;background:#0d1526;border:1px solid var(--line);border-radius:7px}
  .qbtn{width:26px;height:26px;padding:0;font-size:15px;line-height:1}
  .qty{min-width:26px; text-align:center; font-weight:700}
  .muted{color:var(--dim); font-size:12px}
  .stat{font-size:11px; color:var(--dim)}
  .tag{font-size:10.5px; padding:1px 6px; border-radius:4px; background:#1a2340; color:#9fb0dd; margin-left:4px}
  .card{background:#12183amber; border:1px solid var(--line); border-radius:8px; padding:9px 11px; margin:7px 0}
  .card{background:#101830; border:1px solid var(--line); border-radius:9px; padding:9px 11px; margin:8px 0}
  .card h4{margin:0 0 4px; font-size:12.5px; color:var(--gold)}
  .card p{margin:0; font-size:11.5px; color:#b9c3e2}
  #tooltip{position:absolute; pointer-events:none; background:#0a0f1cf2; border:1px solid #33477a; border-radius:8px; padding:8px 10px; font-size:12px; max-width:240px; z-index:30; display:none; box-shadow:0 8px 24px #000a}
  #tooltip b{color:var(--gold)}
  .modal{position:absolute; inset:0; background:#02040acc; display:flex; align-items:center; justify-content:center; z-index:50}
  .modal .box{background:var(--panel); border:1px solid #33477a; border-radius:14px; padding:22px; width:min(560px,92%); max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px #000}
  .modal h2{margin:0 0 6px; color:var(--gold); font-size:20px}
  .modal .box::-webkit-scrollbar{width:8px}
  .modal .box::-webkit-scrollbar-thumb{background:#243052;border-radius:4px}
  table.mini{width:100%; border-collapse:collapse; font-size:11.5px; margin:6px 0}
  table.mini th,table.mini td{border:1px solid var(--line); padding:3px 6px; text-align:center}
  table.mini th{background:#16203c; color:var(--accent)}
  .legend{display:flex; gap:10px; flex-wrap:wrap; font-size:11px; color:var(--dim); position:absolute; left:12px; bottom:10px; background:#070b14cc; padding:6px 10px; border-radius:8px; border:1px solid var(--line)}
  .legdot{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:-1px}
  .help-link{position:absolute; top:12px; right:12px; z-index:10}
  #zoomctl{position:absolute; right:12px; bottom:12px; z-index:10; display:flex; flex-direction:column; gap:6px}
  #zoomctl button{width:38px; height:38px; padding:0; font-size:18px; line-height:1; background:#0c1428cc; border:1px solid var(--line); border-radius:9px; backdrop-filter:blur(4px)}
  #zoomctl button:hover{background:#1d2a4a; border-color:#42557f}
  svg{cursor:grab}
  svg:active{cursor:grabbing}
  a{color:var(--accent)}
  .tiny{font-size:10.5px}
  .flash{animation:fl 1.2s ease}
  @keyframes fl{0%{background:#3a2f00}100%{background:transparent}}
  input[type=range]{width:100%}