/* ══ 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:#a368ff; /* 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} /* Keep the page width perfectly constant: a permanent vertical scrollbar means selecting a unit (which grows the panel) never toggles the scrollbar and re-sizes the width-fluid board. overflow-x:hidden stops any stray horizontal overflow from making mobile browsers zoom-to-fit. NOTE: overflow lives on only — putting it on makes body a scroll container and breaks position:sticky for the HUD. */ html{overflow-y:scroll;overflow-x:hidden} 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)} /* ── Lobby: faction almanac ── */ .lobby-codex{display:flex;flex-direction:column;gap:8px;width:100%} .codex-heading{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center} .codex-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .codex-fbtn{flex:1;min-width:110px;font-size:14px;padding:10px 12px} /* ── Faction codex overlay ── */ .codex-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:22px;max-width:720px;width:92%;max-height:88vh;overflow-y:auto;text-align:left} .codex-close{position:absolute;top:12px;right:12px;background:var(--panel2);border:1px solid var(--line); border-radius:8px;width:32px;height:32px;font-size:15px;line-height:1;padding:0;z-index:1} .cx-title{font-size:26px;font-weight:800;color:var(--gold)} .cx-identity{font-size:13px;color:var(--muted);line-height:1.4;margin-top:4px} .cx-section-h{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted); margin:18px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)} .cx-econ{display:flex;flex-direction:column;gap:6px} .cx-econ-row{display:flex;justify-content:space-between;gap:12px;background:var(--panel2); border:1px solid var(--line);border-radius:8px;padding:8px 12px} .cx-econ-k{font-size:13px;color:var(--muted)} .cx-econ-v{font-size:13px;font-weight:600;text-align:right} .cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .cx-unit{display:flex;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px} .codex-art-wrap{position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:8px;overflow:hidden; background:#10101a;border:1px solid var(--line);display:flex;align-items:center;justify-content:center} .codex-art-fallback{display:none;font-size:13px;font-weight:800;color:var(--muted)} .codex-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cx-unit-body{flex:1;min-width:0} .cx-unit-name{font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px;align-items:baseline} .cx-cost{color:var(--gold);font-size:12px;font-weight:700;white-space:nowrap} .cx-unit-stat{font-size:12px;color:var(--gold);margin:2px 0} .cx-unit-role{margin-bottom:4px} .cx-unit-ability{font-size:11px;color:var(--muted);line-height:1.35;margin-top:3px} .cx-unit-ability b{color:var(--txt)} /* codex: basic-rules content */ .cx-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px} .cx-legend-row{display:flex;gap:10px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px} .cx-legend-icon{flex:0 0 auto;min-width:34px;text-align:center;font-size:16px;font-weight:700;color:var(--gold)} .cx-legend-name{font-size:13px;font-weight:700} .cx-legend-desc{font-size:11px;color:var(--muted);line-height:1.35;margin-top:1px} .cx-rules{font-size:13px;color:var(--txt);line-height:1.5} .cx-rules p{margin:0 0 8px} .cx-rules ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px} .cx-rules li{color:var(--muted)} .cx-rules b{color:var(--txt)} /* ── Lobby: account panel ── */ .lobby-auth{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left} .lobby-auth .muted{text-align:center} .auth-input{background:var(--panel2);border:1px solid var(--line);border-radius:7px;color:var(--txt); padding:10px 12px;font-size:15px;width:100%} .auth-input:focus{outline:none;border-color:var(--gold)} .auth-btns{display:flex;gap:8px} .auth-btns .lobby-btn{font-size:14px;padding:10px 12px} .auth-error{color:var(--red);font-size:13px;min-height:1em;text-align:center} .auth-row{font-size:15px;text-align:center} .auth-row b{color:var(--gold)} /* ── Lobby: your active games ── */ .lobby-games{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left} .lg-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .lg-empty{text-align:center;margin:2px 0} .lg-row{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line); border-radius:9px;padding:9px 11px;cursor:pointer;transition:.12s} .lg-row:hover{border-color:var(--gold)} .lg-row.mymove{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 12px -2px var(--green)} .lg-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .lg-opp{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lg-status{font-size:12px;color:var(--muted)} .lg-row.mymove .lg-status{color:var(--green);font-weight:700} .lg-when{font-size:11px;white-space:nowrap} .lg-del{background:transparent;border:none;color:var(--muted);font-size:14px;padding:2px 6px;cursor:pointer;border-radius:6px} .lg-del:hover{color:var(--red);background:#0006} /* ── 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 — always one stacked column (HUD → board → recruit → log) ── */ #screen-battle{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0} /* Width is sized from vw (NOT %/auto) so it stays constant when a scrollbar toggles or a panel grows on selection — that container-width change was rescaling the whole fluid board. */ #battle-main{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:14px;align-items:start;width:min(640px,94vw);margin:0 auto} #board-col,#side{min-width:0} /* let the columns shrink to fit, not push the page wide */ #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} /* Fluid board: 5 equal columns that fill the width — no viewport math, never overflows. */ .rgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;flex:1;min-width:0} .cell{height:auto;aspect-ratio:1;overflow:hidden;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{box-shadow:inset 0 0 0 1px var(--own)} .unit.selected{background:var(--own);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)}} /* Red flash when a tile takes damage */ .unit.flash-hit{animation:flashHit .5s ease} .nexus-bar.flash-hit{animation:flashHit .5s ease} @keyframes flashHit{ 0%{background-color:var(--red);box-shadow:0 0 0 3px var(--red),0 0 14px 4px var(--red)} 100%{background-color:transparent;box-shadow:none} } .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)} .b.atk{color:var(--gold);background:#000c} /* ── 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} #sel-card{display:flex;flex-direction:column;gap:10px} /* Ability description popout — first tap on the ability button reveals this + a USE button */ #sel-ability-pop:empty{display:none} #sel-ability-pop{flex-basis:100%;width:100%;background:var(--panel2);border:1px solid var(--gold); border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:6px} .ap-name{font-weight:800;font-size:13px;color:var(--gold)} .ap-surge{color:var(--cold)} .ap-text{font-size:12px;line-height:1.35} .ap-use{align-self:flex-start;background:var(--gold);color:#1a1300;border:none;font-weight:800; letter-spacing:.06em;padding:7px 22px;border-radius:6px;cursor:pointer} .ap-use:hover{filter:brightness(1.08)} #sel-actions button.open{border-color:var(--gold);color:var(--gold)} .panel-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0;overflow-wrap:anywhere} .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} /* ── Turn announcement popup ── */ .turn-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 34px; display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;min-width:240px} .turn-pop-text{font-size:26px;font-weight:800} #btn-turn-begin{font-size:16px;padding:11px 26px} /* ── 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: tighten labels and gutters to claw back width ── */ @media(max-width:900px){ .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} } /* ── Small screens: lift the selected-unit info card above the board (otherwise it sits below the tall board and you'd have to scroll past it). Recruit + Log stay below. display:contents lets #side's cards reorder around #board-col as if they were siblings. ── */ @media(max-width:899.98px){ #battle-main{display:flex;flex-direction:column;align-items:stretch} /* every section = board width */ #side{display:contents} /* Stats + actions condensed to ONE sticky line above the board: HP / damage / speed plus the ability, upgrade and Deselect buttons. The name, status, and ability/passive description lines are hidden — status already shows as token badges, and the ability's full text is available by hovering or press-and-holding its button. */ #sel-card{order:1;position:sticky;top:var(--hud-h,52px);z-index:4; background:var(--bg);border-bottom:1px solid var(--line);padding:4px 0 6px; flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px} #sel-info{display:flex;align-items:center;min-width:0} #sel-info .panel-title,#sel-info .si-line.muted{display:none} #sel-info .si-line{margin:0;font-size:12px;white-space:nowrap} #sel-actions{gap:5px} #sel-actions .act-tag{display:none} /* board highlights already show move/attack targets */ #sel-actions button{padding:4px 8px;font-size:12px} #board-col{order:2} #side>.panel-box{order:3} /* Recruit panel below the board */ #side>#log-panel{order:4} /* Log last */ } /* ── Big screens: board sits beside the side panel; HUD stays as the full-width top bar. Cells get a fixed, compact size so the board no longer fills (and dominates) the screen. ── */ @media(min-width:900px){ #battle-main{grid-template-columns:auto 320px;justify-content:center;column-gap:18px;width:auto;max-width:1200px;padding:18px} .rgrid{grid-template-columns:repeat(5,72px);flex:none} .cell{height:72px} #side{position:sticky;top:calc(var(--hud-h,56px) + 8px)} /* keep the panel in view while the board scrolls */ }