/* ===========================================================================
 * PANZER BLITZ (Tronsoft Games edition)  -  game.css
 * ========================================================================= */
:root{
  --bg:#20241c; --panel:#2b2f24; --panel2:#343829; --ink:#e9e2c9;
  --muted:#a49d84; --line:#4a4d3a; --accent:#c8a24a; --ge:#79815f; --su:#a4463a;
  --btn:#3b4030; --btnh:#4c5340;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); overflow:hidden;
  font-family:"Trebuchet MS","Segoe UI",system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{display:flex;height:100vh;width:100vw}

/* ---------------- board ---------------- */
#boardWrap{position:relative;flex:1;position:relative;background:
  radial-gradient(circle at 30% 20%,#2c3125,#191c14 80%);min-width:0}
#board{position:absolute;inset:0;cursor:grab}
#board:active{cursor:grabbing}
#pbsvg{width:100%;height:100%;display:block;touch-action:none}
.hex{cursor:pointer;transition:fill .1s}

#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;
  gap:10px;padding:8px 12px;background:linear-gradient(#20241cdd,#20241c88 70%,transparent);
  z-index:5;pointer-events:none}
#topbar .brand{font-weight:bold;letter-spacing:2px;color:var(--accent);
  font-size:15px;text-shadow:0 1px 2px #000}
#topbar .brand small{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);font-weight:normal}
#topbar .sp{flex:1}
#topbar button{pointer-events:auto}

.iconbtn{background:var(--btn);color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:6px 10px;font-size:13px;cursor:pointer}
.iconbtn:hover{background:var(--btnh)}

/* ---------------- side panel ---------------- */
#panel{width:320px;background:var(--panel);border-left:2px solid var(--line);
  display:flex;flex-direction:column;z-index:6}
#panel h2{margin:0;padding:12px 14px 6px;font-size:16px;color:var(--accent);
  letter-spacing:1px}
#scenBlurb{padding:0 14px 8px;font-size:12px;color:var(--muted);line-height:1.4}
.section{padding:8px 14px;border-top:1px solid var(--line)}
#turnInfo{font-size:14px}
#objInfo{font-size:11px;color:var(--muted);margin-top:3px}
.objrow{font-size:12px;padding:2px 0;display:flex;justify-content:space-between}
.objrow .owner{font-size:11px}

.actions{display:flex;gap:8px;padding:8px 14px}
.actions button{flex:1;background:var(--btn);color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:9px 6px;font-size:13px;cursor:pointer;font-weight:bold}
.actions button:hover:not(:disabled){background:var(--btnh)}
.actions button:disabled{opacity:.4;cursor:default}
.actions button.active{background:var(--accent);color:#241d0c;border-color:var(--accent)}

#unitInfo{min-height:96px}
.uname{font-weight:bold;font-size:14px;border-left:4px solid var(--su);padding-left:8px;margin-bottom:6px}
.uname small{color:var(--muted);font-weight:normal}
table.ustat{width:100%;border-collapse:collapse;font-size:12px}
table.ustat td{padding:2px 4px;border-bottom:1px solid #ffffff10}
table.ustat td:nth-child(2),table.ustat td:nth-child(4){text-align:right;font-weight:bold;font-family:monospace}
table.ustat td:nth-child(3){color:var(--muted);padding-left:12px}
table.ustat td:nth-child(1){color:var(--muted)}
.warn{color:#ffcf3a;font-size:12px;margin-top:6px;font-weight:bold}
.muted{color:var(--muted);font-size:12px;margin-top:6px}

#log{flex:1;overflow-y:auto;padding:8px 14px;font-size:12px;line-height:1.45;
  border-top:1px solid var(--line);background:#181b13}
.logline{padding:2px 0;border-bottom:1px solid #ffffff08}
.logline .ai{color:#d79a86}
.logline .you{color:#9fc27a}
.logline b{color:var(--ink)}
.logline i{color:var(--accent);font-style:normal}

.endbar{padding:10px 14px;border-top:1px solid var(--line)}
#btnEnd{width:100%;background:var(--su);color:#fff;border:none;border-radius:6px;
  padding:12px;font-size:15px;font-weight:bold;cursor:pointer;letter-spacing:1px}
#btnEnd:hover:not(:disabled){filter:brightness(1.12)}
#btnEnd:disabled{opacity:.5;cursor:default}

/* ---------------- modals ---------------- */
.modal{position:fixed;inset:0;background:#000000cc;display:none;align-items:center;
  justify-content:center;z-index:50;padding:20px}
.modal.show{display:flex}
.card{background:var(--panel2);border:2px solid var(--accent);border-radius:12px;
  max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:22px 26px;
  box-shadow:0 20px 60px #000a}
.card h1{margin:0 0 4px;color:var(--accent);font-size:24px;letter-spacing:1px}
.card h3{color:var(--accent);margin:16px 0 6px;font-size:15px}
.card p,.card li{font-size:13.5px;line-height:1.55;color:var(--ink)}
.card small{color:var(--muted)}
.setupRow{margin:14px 0}
.setupRow label{display:block;margin-bottom:6px;color:var(--muted);font-size:12px;
  text-transform:uppercase;letter-spacing:1px}
select,.sideopt{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:9px;font-size:14px;width:100%}
.sides{display:flex;gap:10px}
.sides label{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:10px;cursor:pointer;text-align:center;font-size:13px;color:var(--ink);
  text-transform:none;letter-spacing:0}
.sides input{display:none}
.sides input:checked + span{color:var(--accent);font-weight:bold}
.sides label:has(input:checked){border-color:var(--accent);background:#3d3a26}
.bigbtn{background:var(--accent);color:#241d0c;border:none;border-radius:8px;padding:12px 18px;
  font-size:15px;font-weight:bold;cursor:pointer;letter-spacing:1px;margin-top:8px}
.bigbtn:hover{filter:brightness(1.08)}
.ghostbtn{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:8px;
  padding:11px 16px;font-size:14px;cursor:pointer;margin-right:8px}
.ghostbtn:hover{background:var(--btn)}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:12px;margin-top:6px}
.legend .sw{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;
  vertical-align:-2px;border:1px solid #0006}

/* ---------------- responsive ---------------- */
@media (max-width:820px){
  #app{flex-direction:column}
  #panel{width:100%;height:44vh;border-left:none;border-top:2px solid var(--line);order:2}
  #boardWrap{position:relative;height:56vh;order:1}
  #log{max-height:120px;flex:none}
  #unitInfo{min-height:0}
}

/* v2.5 command-and-control enhancements */
#topbar .version{font-size:11px;letter-spacing:1px;color:var(--ink);font-weight:normal;margin-left:4px}
.unitnav{display:flex;gap:6px;padding:0 14px 8px}
.unitnav button{flex:1;background:#303528;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px 4px;font-size:11px;cursor:pointer}
.unitnav button:hover:not(:disabled){background:var(--btnh)}
.unitnav button:disabled{opacity:.35;cursor:default}
#aiStatus{display:none;padding:9px 14px;border-top:1px solid var(--line);background:#4b2d25;color:#ffd7c8;font-weight:bold;letter-spacing:1px;text-align:center;animation:pulseAI 1s infinite alternate}
#aiStatus.show{display:block}
@keyframes pulseAI{from{opacity:.72}to{opacity:1}}
.combat-card{max-width:620px}
.combat-grid{display:grid;grid-template-columns:1fr auto;gap:6px 18px;margin:12px 0;padding:10px;background:#20241c;border:1px solid var(--line);border-radius:8px;font-size:13px}
.combat-grid b{text-align:right;color:var(--accent)}
.combat-firers{max-height:150px;overflow:auto;margin:8px 0;padding-left:20px;font-size:12px}
.modalActions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px}
.modalActions .bigbtn{margin-top:0}

/* v2.6 orders manager */
.ordersbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:0 14px 8px;padding:8px 10px;background:#20241c;border:1px solid var(--line);border-radius:7px;font-size:11px;color:var(--muted)}
.ordersbar b{color:var(--accent);font-size:14px}
.ordersbar.complete{border-color:#6f8a59;background:#263021}
.ordersbar.complete #ordersCount b{color:#a9d482}
#btnSkip{background:#303528}
.compact-card{max-width:480px}
.dangerbtn{background:var(--su);color:#fff}


/* v2.7 tactical overview map */
#minimapPanel{position:absolute;left:12px;bottom:12px;width:220px;background:#151810e8;border:1px solid var(--line);border-radius:8px;padding:6px;z-index:12;box-shadow:0 4px 18px #0009;user-select:none}
.minimapTitle{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;font-weight:bold;letter-spacing:1px;margin:0 2px 4px}
#minimap{display:block;width:220px;height:130px;border:1px solid #000;border-radius:4px;cursor:crosshair;background:#171a13}
@media (max-width:820px){#minimapPanel{width:160px;left:8px;bottom:8px}#minimap{width:160px;height:95px}}


/* v2.8 live victory tracker */
.victoryTracker{background:#12150f;border:1px solid var(--line);border-radius:7px;padding:9px 10px!important}
.vhead{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.7px;color:var(--muted);margin-bottom:7px}.vhead b{color:#ddd6b8}.vhead span{font-size:9px}
.vstatus{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.7px;border:1px solid;padding:2px 6px;border-radius:10px;margin-bottom:6px}.vstatus.good{color:#bfe6a8;border-color:#608f4c;background:#203019}.vstatus.warn{color:#f1d487;border-color:#8d7434;background:#302817}.vstatus.bad{color:#efaaa1;border-color:#934c43;background:#321b19}
.vline{font-size:10px;line-height:1.4;color:#d3ccb1;margin-bottom:6px}.vbar{height:8px;background:#2a2d24;border:1px solid #3c4035;border-radius:8px;overflow:hidden}.vbar span{display:block;height:100%;background:#b49443}.vbar span.good{background:#709f54}.vnums{font-size:9px;color:var(--muted);margin-top:3px;text-align:right}.dualscore{display:flex;justify-content:space-between;background:#1d2018;border-radius:5px;padding:6px 8px;font-size:10px;color:#cfc8ab}.dualscore b{font-size:13px;color:#f0e5b9}.victoryTracker details{margin-top:7px;border-top:1px solid #303329;padding-top:5px}.victoryTracker summary{cursor:pointer;font-size:9px;color:#a9a389}.vnote{font-size:9px;line-height:1.45;color:#bcb59b;padding-top:5px}


/* v2.9 force-status roster */
.forceHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.miniBtn{font-size:10px;padding:3px 8px}.forceStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;font-size:11px}.forceStats span{padding:3px 5px;background:#0002;border-radius:3px}.forceStats .ready,.forceRoster .ready{color:#b9e98a}.forceStats .warn,.forceRoster .warn{color:#ffd36a}.forceRoster{margin-top:7px;max-height:190px;overflow:auto;border-top:1px solid var(--line);padding-top:5px}.forceRow{width:100%;display:grid;grid-template-columns:1fr 54px 64px;gap:5px;text-align:left;font-size:9px;padding:4px 5px;margin:2px 0;background:#1c2018;border:1px solid #353b2d}.forceRow:hover{border-color:#8f9d73}.forceName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forceRoster[hidden]{display:none}


/* v3.0 turn command queue */
.commandQueue{margin:7px 0 9px;border:1px solid var(--line);border-radius:5px;background:#11150f66;padding:6px}
.commandQueueHead{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.6px;margin-bottom:5px}
.commandQueueList{max-height:165px;overflow:auto}
.commandQueueList.collapsed{display:none}
.queueRow{width:100%;display:grid;grid-template-columns:22px minmax(90px,1fr) 78px 48px;gap:5px;align-items:center;text-align:left;font-size:9px;padding:4px 5px;margin:2px 0;background:#1b2018;border:1px solid #343b2e;color:inherit}
.queueRow:hover{border-color:#8e9c72;background:#23291f}
.queueRow.selected{border-color:#f3da76;box-shadow:inset 0 0 0 1px #f3da7655;background:#29291d}
.queueNum{opacity:.65;text-align:center}
.queueName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:bold}
.queueMeta{color:var(--muted);white-space:nowrap}
.queueState{font-size:8px;color:#b9e98a;text-align:right}
.queueEmpty{font-size:10px;color:var(--muted);padding:6px 4px}
.queueDone{color:#b9e98a}
@media (max-width:820px){
  .queueRow{grid-template-columns:18px minmax(70px,1fr) 56px 42px}
  .queueMeta{font-size:8px}
}


/* v3.0.1 maintenance fixes */
.queueRow.deferred{opacity:.72;border-style:dashed}
.queueRow.deferred .queueState{color:#e6c46b}
.combatSupportList{margin-top:8px;border-top:1px solid var(--line);padding-top:7px}
.supportHead{display:flex;justify-content:space-between;gap:8px;font-size:10px;margin-bottom:5px}
.supportHead span{color:var(--muted);font-size:9px}
.supportRow{display:flex;gap:7px;align-items:center;padding:4px 5px;margin:2px 0;background:#161a14;border:1px solid #30362b;border-radius:3px;font-size:10px}
.supportRow input{margin:0}
.supportSummary{margin-bottom:7px;padding:5px 7px;background:#20261b;border-left:3px solid #d8c16e;font-size:10px}


/* v3.0.2 corrective states */
.forceStats .deferred{color:#e6c46b}
.combatSupportList:empty{display:none}


/* v3.1 LOS & Fire Visualization */
.losInfo{display:none;margin-top:5px;padding:6px 8px;border-radius:4px;font-size:10px;line-height:1.25;border:1px solid transparent}
.losInfo.show{display:flex;flex-direction:column;gap:2px}
.losInfo.clear{background:#17301c;border-color:#4f915a;color:#bfe8c6}
.losInfo.blocked{background:#371b19;border-color:#a75b52;color:#ffd0c9}
.losInfo span{font-size:9px;color:inherit;opacity:.9}
#losLayer{pointer-events:none}
.losHalo{stroke:#000;stroke-width:7;stroke-linecap:round;opacity:.55}
.losClear{stroke:#9cff89;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:10 5;filter:drop-shadow(0 0 3px #73ff63)}
.losBlocked{stroke:#ff6b5f;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:5 5;filter:drop-shadow(0 0 3px #ff4f45)}
.losEndpoint{fill:none;stroke:#fff3a6;stroke-width:2}
.losTargetClear{fill:none;stroke:#9cff89;stroke-width:3}
.losTargetBlocked{fill:none;stroke:#ff6b5f;stroke-width:3}
.losBlocker{fill:#ff5e50;fill-opacity:.15;stroke:#ff6b5f;stroke-width:3;stroke-dasharray:3 3}
.losBlockText{fill:#ffd1cc;font-size:9px;font-weight:bold;paint-order:stroke;stroke:#111;stroke-width:3px}


/* v3.1.1 LOS accuracy corrections */
.losInfo.indirect{background:#3a3016;border-color:#b99335;color:#ffe6a1}
.losInfo.range{background:#2f2535;border-color:#8a69a3;color:#e6d4f2}
.losIndirect{stroke:#e8bd4c;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:9 5;filter:drop-shadow(0 0 3px #d9a92d)}
.losIndirectTarget{stroke:#ffd76a;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:3 5;filter:drop-shadow(0 0 3px #e6b83d)}
.losSpotter{fill:#e8bd4c33;stroke:#e8bd4c;stroke-width:3}
.losSpotText{fill:#ffe5a0;font-size:9px;font-weight:bold;paint-order:stroke;stroke:#111;stroke-width:3px}
.losRange{stroke:#a77bc7;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:2 6;filter:drop-shadow(0 0 3px #8d68a9)}


/* v3.2 Movement Path Preview */
.movePathInfo{display:none;margin-top:5px;padding:6px 8px;border-radius:4px;font-size:10px;line-height:1.25;background:#19283a;border:1px solid #4d78a1;color:#cfe6ff}
.movePathInfo.show{display:flex;flex-direction:column;gap:2px}
.movePathInfo.warn{background:#39251d;border-color:#9c674a;color:#ffd7bd}
.movePathInfo span{font-size:9px}
.movePathInfo small{font-size:8px;color:inherit;opacity:.8;line-height:1.3}
#movePathLayer{pointer-events:none}
.movePathHalo{fill:none;stroke:#000;stroke-width:8;stroke-linejoin:round;stroke-linecap:round;opacity:.45}
.movePathLine{fill:none;stroke:#77b9ff;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:8 4;filter:drop-shadow(0 0 3px #5ba8f0)}
.movePathStart{fill:#1d5b91;stroke:#d7ecff;stroke-width:2}
.movePathStep{fill:#1e4f78;stroke:#8fd0ff;stroke-width:2}
.movePathCost{fill:#fff;font-size:7px;font-weight:bold;paint-order:stroke;stroke:#16344f;stroke-width:2px}