/* ══ WARBAND — Tactical Fantasy Army Game v0.2 ════════════════ */
:root{
  --bg:#0d0d14; --panel:#16161f; --panel2:#1e1e2b; --line:#2c2c3c;
  --muted:#8a8aa0; --gold:#e3b341; --txt:#e6e6f0;
  --pa:#3aa0ff; --pb:#ff5d6c;            /* player A / B colours */
  --green:#2ec27e; --red:#f0506e; --orange:#f0883e; --cold:#5fd0ff; --curse:#b56cff;
  --cell:64px;                           /* board cell size — shrunk in mobile media queries */
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:12px}
.gold{color:var(--gold)} .move{color:var(--green)} .surge{color:var(--cold)}
button{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:7px;
  padding:7px 12px;font-size:13px;cursor:pointer;transition:.12s}
button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
button:disabled{opacity:.4;cursor:not-allowed}
button.ghost{background:transparent;color:var(--muted)} button.small{padding:4px 8px;font-size:12px}
button.up{border-color:var(--gold);color:var(--gold)}
.back-link{color:var(--muted);text-decoration:none;font-size:13px}
.back-link:hover{color:var(--gold)}
h2{margin:6px 0} h3{margin:0}
.end-icon{font-size:46px;text-align:center}
.pa{--own:var(--pa)} .pb{--own:var(--pb)}

/* ── Screens / cards ── */
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px}
.setup-card,.end-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:24px;max-width:920px;width:100%;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.pick-h{align-self:flex-start;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.setup-banner{font-size:20px;font-weight:800;padding:4px 16px;border-radius:8px;border:2px solid var(--own,var(--line));color:var(--own,var(--txt))}

/* ── Lobby ── */
.lobby-card{max-width:440px;gap:16px}
#lobby-choices{display:flex;flex-direction:column;gap:12px;width:100%}
.lobby-btn{font-size:15px;padding:12px 18px;width:100%}
.lobby-join{display:flex;gap:8px;width:100%}
.lobby-join input{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:7px;color:var(--txt);
  padding:10px 12px;font-size:16px;letter-spacing:.18em;text-transform:uppercase;text-align:center}
.lobby-join input:focus{outline:none;border-color:var(--gold)}
.lobby-code-display{font-size:38px;font-weight:800;letter-spacing:.22em;color:var(--gold);
  background:var(--panel2);border:1px dashed var(--line);border-radius:10px;padding:14px;margin:6px 0}
.net-status{font-size:13px;font-weight:700;padding:4px 12px;border-radius:7px;background:var(--panel2);border:1px solid var(--line)}
.net-status.mine{border-color:var(--green);color:var(--green)}
.net-status.wait{border-color:var(--muted);color:var(--muted)}

/* ── Pick cards (faction / champion / evolution) ── */
.pick-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.card-pick{flex:1;min-width:170px;max-width:300px;background:var(--panel2);border:2px solid var(--line);border-radius:10px;
  padding:12px;cursor:pointer;transition:.12s;text-align:left}
.card-pick:hover{border-color:var(--gold)}
.card-pick.picked{border-color:var(--gold);background:#2a2410}
.cp-name{font-size:15px;font-weight:700}
.cp-stat{font-size:12px;color:var(--gold);margin:3px 0}
.cp-sub{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.35}

/* ── Setup shop / tray ── */
.shop-row{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.shop-item{flex:1;min-width:150px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;cursor:pointer;position:relative;transition:.12s;text-align:left}
.shop-item:hover{border-color:var(--gold)} .shop-item.cant{opacity:.4;cursor:not-allowed}
.si-cost{position:absolute;top:7px;right:9px;color:var(--gold);font-size:12px;font-weight:700}
.si-name{font-size:13px;font-weight:700} .si-stat{font-size:11px;color:var(--gold);margin:2px 0}
.si-ability{font-size:11px;color:var(--muted);line-height:1.3}
.tray{display:flex;gap:8px;flex-wrap:wrap;min-height:42px;width:100%;background:#10101a;border:1px dashed var(--line);border-radius:8px;padding:8px}
.tray-unit{background:var(--panel2);border:2px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px}
.tray-unit:hover{border-color:var(--gold)} .tray-unit.picked{border-color:var(--gold);box-shadow:0 0 0 2px rgba(227,179,65,.4)}
.tray-unit.champ{border-left:4px solid var(--own,var(--gold))}
.setup-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;margin-top:6px}
.hint{font-size:12px;color:var(--muted)}
#btn-setup-ready{font-size:15px;padding:9px 22px}

/* ── HUD ── */
#hud{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;flex-wrap:wrap}
.turn-banner{font-weight:800;font-size:16px;padding:2px 12px;border-radius:7px;border:2px solid var(--own,var(--line));color:var(--own,var(--txt))}
.nexus-hp{font-weight:700} .nexus-hp.pa{color:var(--pa)} .nexus-hp.pb{color:var(--pb)}
.pools{display:flex;gap:12px;font-weight:700;margin-left:auto}
#btn-endturn{font-size:14px}

/* ── Battle layout ── */
#battle-main{display:grid;grid-template-columns:1fr 320px;gap:14px;padding:14px;align-items:start;max-width:1200px;margin:0 auto}
#board-col{display:flex;flex-direction:column;gap:6px}

/* ── Board rows ── */
.board{display:flex;flex-direction:column;gap:4px}
.setup-board{margin-top:6px}
.brow{display:flex;align-items:center;gap:8px}
.brow.center{opacity:.97}
.row-label{width:78px;font-size:10px;color:var(--muted);text-align:right;flex:none;text-transform:uppercase;letter-spacing:.04em}
.rgrid{display:grid;grid-template-columns:repeat(5,var(--cell));gap:4px}
.cell{height:var(--cell);border:1px solid var(--line);border-radius:8px;background:#12121b;display:flex;align-items:center;justify-content:center;cursor:default;transition:.1s}
.brow.center .cell{background:#14141f;border-style:dashed}
.cell.spacer{border:none;background:transparent}
.cell.hl-move{outline:2px solid var(--green);background:#10241a;cursor:pointer}
.cell.hl-deploy{outline:2px dashed var(--gold);background:#23200f;cursor:pointer}
.cell.hl-target{outline:2px solid var(--orange);background:#2a1d10;cursor:pointer}

/* ── Nexus bar ── */
.nexus-bar{display:flex;justify-content:space-between;align-items:center;margin-left:86px;
  padding:6px 14px;border-radius:8px;font-weight:800;font-size:13px;border:2px solid var(--own,var(--line));
  background:linear-gradient(90deg,color-mix(in srgb,var(--own) 22%,transparent),transparent);color:var(--own,var(--txt))}
.nexus-bar.hl-attack{outline:3px solid var(--red);cursor:pointer}

/* ── Unit tiles ── */
.unit{width:100%;height:100%;border-radius:7px;border:2px solid var(--own);background:color-mix(in srgb,var(--own) 16%,#12121b);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;cursor:pointer;position:relative;line-height:1.05;padding:2px}
.unit.champ{border-width:3px;box-shadow:inset 0 0 0 1px var(--own)}
.unit.selected{outline:3px solid var(--gold)}
.unit.hl-attack{outline:3px solid var(--red)}
.unit.hl-target{outline:3px solid var(--orange)}
.unit.hl-cand{box-shadow:0 0 0 2px var(--cold);animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px var(--cold)}}
.u-top{font-size:13px;font-weight:800}
.u-lvl{font-size:9px;color:var(--gold);margin-left:2px}
.u-hp{font-size:11px} .u-dmg{font-size:10px;color:var(--gold)}
.u-badges{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;position:absolute;top:1px;right:1px;z-index:2}

/* ── Token art (your own pictures) ── */
.u-art{position:absolute;inset:0;border-radius:5px;background-size:cover;background-position:center;z-index:0}
.unit.has-art{justify-content:flex-end;padding:0;overflow:hidden}
.u-foot{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:3px 3px 2px;font-weight:700;text-shadow:0 1px 2px #000,0 0 3px #000;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.45) 65%,transparent)}
.u-foot .u-hp{font-size:11px} .u-foot .u-dmg{font-size:10px;color:var(--gold)} .u-foot .u-lvl{font-size:9px}
.reserve-slot.has-art{background-size:cover;background-position:center;position:relative}
.reserve-slot.has-art b{display:none}
.reserve-slot.has-art .muted{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);font-size:9px;text-shadow:0 1px 1px #000}
.b{font-size:8px;font-weight:700;padding:0 2px;border-radius:3px;background:#000a}
.b.shield{color:#cfe8ff} .b.cold{color:var(--cold)} .b.curse{color:var(--curse)}
.b.frozen{color:var(--cold);background:#06283a} .b.zzz{color:var(--muted)}

/* ── Reserve strips ── */
.reserve-strip{display:flex;align-items:center;gap:6px;margin-left:86px;flex-wrap:wrap}
.reserve-label{font-size:10px;color:var(--muted);text-transform:uppercase;width:70px}
.reserve-slot{min-width:54px;height:38px;border:1px dashed var(--line);border-radius:7px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:11px;background:#10101a}
.reserve-slot.empty{opacity:.5}
.reserve-slot.pa,.reserve-slot.pb{border-style:solid;border-color:var(--own);cursor:pointer}
.reserve-slot.picked{outline:2px solid var(--gold)}

/* ── Side panel ── */
#side{display:flex;flex-direction:column;gap:10px;position:sticky;top:58px}
.panel-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}
.panel-title{font-size:13px;font-weight:800;margin-bottom:4px}
.si-line{font-size:12px;margin:3px 0;line-height:1.35}
.actions{display:flex;flex-wrap:wrap;gap:6px}
.act-tag{font-size:11px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
.recruit-list{display:flex;flex-direction:column;gap:5px}
.recruit-item{display:flex;align-items:center;gap:6px;font-size:12px;background:var(--panel2);border:1px solid var(--line);
  border-radius:7px;padding:6px 8px;cursor:pointer;position:relative}
.recruit-item:hover{border-color:var(--gold)} .recruit-item.cant{opacity:.4;cursor:not-allowed}
.recruit-item.picked{border-color:var(--gold)} .ri-cost{color:var(--gold);font-weight:700;width:34px}
#log{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow:auto;font-size:11px}
.log-line{color:var(--muted);border-bottom:1px solid #ffffff08;padding:2px 0}

/* ── Overlays ── */
.overlay{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:20;backdrop-filter:blur(3px)}
.evolve-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:620px;width:90%;
  display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}

/* ── Toast ── */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--gold);
  color:var(--gold);padding:8px 16px;border-radius:8px;font-size:13px;z-index:30}

/* ── Tablet / phone: one stacked column (HUD → board → recruit → log) ── */
@media(max-width:900px){
  #screen-battle{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0}
  #battle-main{grid-template-columns:minmax(0,1fr);max-width:640px}
  #board-col,#side{min-width:0}            /* let the columns shrink to fit, not push the page wide */
  #side{position:static}
  /* Fluid board: 5 equal columns that fill the width — no viewport math, never overflows. */
  .rgrid{grid-template-columns:repeat(5,minmax(0,1fr));flex:1;min-width:0}
  .cell{height:auto;aspect-ratio:1;overflow:hidden}
  .row-label,.reserve-label{width:54px}
  .nexus-bar,.reserve-strip{margin-left:62px}
}

/* ── Phone: tighten labels, HUD and reserves to claw back width ── */
@media(max-width:560px){
  #hud{gap:7px 10px;padding:7px 10px}
  .turn-banner{font-size:14px;padding:2px 9px}
  .pools{gap:10px;margin-left:0}            /* don't shove pools off the right edge */
  #battle-main{padding:8px;gap:10px}
  .brow{gap:5px}
  .row-label{width:36px;font-size:8px;letter-spacing:0;line-height:1.1}
  .nexus-bar{margin-left:41px;padding:5px 9px;font-size:12px}
  .reserve-strip{margin-left:41px;gap:4px}
  .reserve-label{width:36px;font-size:8px}
  .reserve-slot{min-width:36px;height:32px;font-size:10px}
  .u-top{font-size:12px}
  #log{max-height:170px}
}