/* ===========================================================================
 * 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{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{height:56vh;order:1}
  #log{max-height:120px;flex:none}
  #unitInfo{min-height:0}
}