:root{
  --bg:#14161a; --panel:#1c1f26; --panel2:#22262f; --line:#2c313b;
  --line-strong:#454b58; --text:#e8e6df; --text-dim:#9a9a90; --gold:#d4a94a;
  --danger:#e0554f; --ok:#7fb069; --blue:#5aa9e6;
  --radius:8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,'Segoe UI',Roboto,sans-serif}
h1,h2,h3,h4{margin:0 0 8px;font-weight:600}
h1{font-size:28px} h2{font-size:18px} h3{font-size:16px} h4{font-size:13px;margin:14px 0 6px;color:var(--gold)}
p{margin:6px 0}
button{font:inherit;cursor:pointer;background:var(--panel2);color:var(--text);border:1px solid var(--line-strong);border-radius:6px;padding:7px 12px;min-height:34px}
button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
button:disabled{opacity:.38;cursor:not-allowed}
button.primary{background:var(--gold);color:#1a1508;border-color:var(--gold);font-weight:600}
button.primary:hover:not(:disabled){filter:brightness(1.1);color:#1a1508}
button.danger{border-color:var(--danger)} button.danger:hover:not(:disabled){color:var(--danger);border-color:var(--danger)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input,select,textarea{font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--line-strong);border-radius:5px;padding:6px 8px;max-width:100%}
label{font-size:12px;color:var(--text-dim)}
.hidden{display:none}
.small{font-size:12px;color:var(--text-dim)}
.mono{font-family:ui-monospace,Consolas,'Courier New',monospace}
.spacer{flex:1}
.note{color:var(--gold);font-size:13px;background:#d4a94a14;border:1px solid #d4a94a44;border-radius:6px;padding:8px 10px}
.error{color:var(--danger);min-height:1.2em;margin:8px 0 0;font-size:13px}
.swatch{display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid #0006;vertical-align:-1px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ---- menu & game over ---- */
.menu,.over{max-width:640px;margin:0 auto;padding:28px 16px 60px}
.over{max-width:820px}
.lead{color:var(--text-dim);font-size:15px;margin-bottom:18px}
.panel{background:rgba(28,31,38,.86);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--line-strong);border-radius:10px;padding:14px;margin-bottom:12px}
.menu .panel{padding:20px}
.field{margin:10px 0}.field label{display:block;margin-bottom:4px}
.fieldrow{display:flex;gap:12px;flex-wrap:wrap}.fieldrow>.field{flex:1;min-width:175px}
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0}
.actionrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.actionrow.tight{margin-top:0}
.list-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.list-item.out{opacity:.5}

/* ---- game layout ---- */
.game{max-width:1500px;margin:0 auto;padding:12px}
.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(28,31,38,.86);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--line-strong);border-radius:10px;padding:10px 16px;margin-bottom:12px}
.player-chip{display:flex;align-items:center;gap:8px;font-weight:600}
.phase-badge{padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.resources{display:flex;gap:14px;flex-wrap:wrap}
.res{display:inline-flex;align-items:center;gap:4px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px;align-items:start}
.mapcol{position:relative}
.mapwrap{background:rgba(20,22,26,.5);border:1px solid var(--line-strong);border-radius:10px;padding:8px;overflow:auto;height:calc(100vh - 110px);min-height:420px}
.zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px}
.zoom button{width:38px;height:38px;font-size:20px;line-height:1;padding:0;background:var(--panel)}
.sidebar{display:flex;flex-direction:column;gap:0;max-height:calc(100vh - 110px);overflow-y:auto;padding-right:2px}
.scroll{max-height:300px;overflow-y:auto}.scroll.short{max-height:200px}
.log{max-height:220px;overflow-y:auto;font-size:12px;color:var(--text-dim)}
.logline{padding:3px 0;border-bottom:1px solid var(--line)}
.logline.t-combat,.logline.t-captured,.logline.t-defeated{color:#e8b4b0}
.logline.t-gameOver{color:var(--gold)}
.mailitem,.shoprow,.econrow,.marketrow{padding:6px;border-radius:6px}
.econrow.highlight{outline:2px solid var(--gold);background:var(--panel2)}
.mailitem{background:var(--panel2);margin-bottom:6px}
.shoprow{border-bottom:1px solid var(--line)}
.actwrap{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.cost{display:inline-flex;gap:6px;font-size:12px;color:var(--text-dim)}
.chip{white-space:nowrap}.chip.short{color:var(--danger)}
table.endow{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0}
table.endow th,table.endow td{padding:4px 6px;text-align:left;border-bottom:1px solid var(--line)}
table.endow td.mono,table.endow th{text-align:right}table.endow th:first-child,table.endow td:first-child{text-align:left}

/* ---- map ---- */
.map{display:block}
.hex{cursor:pointer;stroke:#0008;stroke-width:1;transition:filter .1s}
.hex:hover{filter:brightness(1.25)}
.hex.capital{stroke:#d4a94a;stroke-width:2.5}
.hex.selected{stroke:var(--gold);stroke-width:3.5}
.hex.mark-move{stroke:var(--ok);stroke-width:3;stroke-dasharray:5 3}
.hex.mark-claim{stroke:var(--blue);stroke-width:3;stroke-dasharray:5 3}
.hex.mark-attack{stroke:var(--danger);stroke-width:3.5}
.map text{pointer-events:none;user-select:none}
.hexlabel{fill:#0009;font-family:ui-monospace,monospace}
.reslabel{font-weight:700;paint-order:stroke;stroke:#000;stroke-width:2px}
.devglyph{fill:#fff;paint-order:stroke;stroke:#0008;stroke-width:2px}
.crown{fill:#ffd75e}
.terrainglyph{fill:#fff;opacity:.45}
.hexname{fill:#fff;paint-order:stroke;stroke:#000;stroke-width:3px;stroke-linejoin:round}
.rad{fill:#e8d44a}
.hexarmy{fill:#fff;font-weight:700;font-family:ui-monospace,monospace;paint-order:stroke;stroke:#000;stroke-width:2px;stroke-linejoin:round}

/* ---- modal ---- */
.overlay{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;z-index:50;padding:12px}
.overlay.show{display:flex}
.modal{background:var(--panel);border:1px solid var(--gold);border-radius:10px;padding:22px;max-width:460px;width:100%;max-height:90vh;overflow-y:auto}
.modal.wide{max-width:640px}
.modal h3{color:var(--gold)}
.stepper{display:inline-flex;align-items:center;gap:4px}
.stepper button{width:30px;min-height:30px;padding:0}
input.qty{width:56px;text-align:center}
.unitpicker .urow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0;font-size:14px;color:var(--text)}
.liqlist{max-height:46vh;overflow-y:auto;border-top:1px solid var(--line)}
.liqrow{padding:8px 0;border-bottom:1px solid var(--line)}
.liqrow .check,.liqrow .urow{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:6px;color:var(--text);font-size:13px}
.dicebox{display:flex;gap:10px;align-items:center;margin:10px 0}
.die{display:inline-grid;place-items:center;width:46px;height:46px;background:#f2efe6;color:#14161a;font-weight:800;font-size:24px;border-radius:9px;box-shadow:0 2px 0 #0006}
table.pairings,table.matchup{border-collapse:collapse;font-size:13px;margin:6px 0}
table.pairings td,table.matchup td,table.matchup th{padding:3px 8px}
.out-defenderLoses td:last-child{color:var(--ok)}.out-attackerLoses td:last-child{color:var(--danger)}.out-miss td:last-child{color:var(--text-dim)}
.cover{text-align:center;padding:10px 0}.cover .swatch{width:36px;height:36px;border-radius:8px;display:block;margin:0 auto 12px}
.cover h3{color:var(--text);font-size:20px}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line-strong);padding:10px 16px;border-radius:8px;max-width:min(90vw,560px);z-index:40;box-shadow:0 6px 24px #0008}
.toast.error{border-color:var(--danger)}
.statchart{background:var(--panel2);border-radius:8px;padding:8px}
.statchart .grid{stroke:var(--line);stroke-width:1}.statchart .axis{fill:var(--text-dim);font-size:11px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0;font-size:13px}

/* ---- narrow screens ---- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .mapwrap{height:auto;min-height:0;max-height:64vh}
  .zoom{top:12px;bottom:auto;right:12px;flex-direction:row}
  .sidebar{max-height:none;overflow:visible}
  .game{padding:8px}
  .topbar{padding:8px 12px;gap:8px 12px}
  input,select,textarea{font-size:16px} /* below 16px iOS zooms the page when a field is focused */
}
/* ---- touch ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-tap-highlight-color:transparent}
button,select,input,summary,label{touch-action:manipulation}
@media (pointer:coarse){
  button{min-height:42px}
  button.linkish{min-height:0;padding:6px 2px}
  .zoom button{width:44px;height:44px}
  .modal{padding:18px}
  .modal button{min-height:44px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.veiled{min-height:100vh}
/* online */
.badge{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:10px;background:var(--gold);color:#1a1508;font-size:11px;font-weight:700;vertical-align:1px}
.gamerow.yourturn{border-left:3px solid var(--gold);padding-left:8px}
button.linkish{background:none;border:none;color:var(--blue);padding:0;min-height:0;text-decoration:underline}
button.linkish:hover:not(:disabled){color:var(--gold)}
.endvote{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
label.check{display:flex;gap:6px;align-items:center;color:var(--text);font-size:13px}

/* ---- timers & away ---- */
.timer{font-variant-numeric:tabular-nums;padding:3px 10px;border-radius:20px;border:1px solid var(--line-strong);font-size:12px;color:var(--text-dim);white-space:nowrap}
.timer.mine{border-color:var(--gold);color:var(--gold)}
.panel.away{border-color:var(--danger)}
details>summary{cursor:pointer;margin-top:12px}

/* ---- replay viewer ---- */
.replay .topbar{gap:12px}
.rp-spacer{flex:1}
.rp-head{font-weight:600;color:var(--gold);margin-bottom:4px}
.rp-what{min-height:2.8em;margin-bottom:8px}
.rp-slider{width:100%;margin:6px 0 10px}
.rp-buttons button{min-width:40px}
.rp-player{padding:6px 0;border-bottom:1px solid var(--line)}
.rp-player.out{opacity:.55}
.rp-log{max-height:260px}
.rp-buttons{flex-wrap:nowrap}
.rp-buttons button{min-width:0;padding:6px 9px;flex:0 1 auto}
@media (max-width:900px){.rp-buttons{gap:4px}.rp-buttons button{padding:6px 7px}}

/* ---- background pictures ---- */
#backdrop{position:fixed;inset:0;z-index:-1;background:center / cover no-repeat;opacity:0;transition:opacity .7s ease}
#backdrop.on{opacity:1}
#backdrop::after{content:'';position:absolute;inset:0;background:rgba(20,22,26,.55)}
#backdrop[data-kind=lobby]::after{background:rgba(20,22,26,.64)}
#backdrop[data-kind=game]::after{background:rgba(20,22,26,.5)}
@media (prefers-reduced-motion:reduce){#backdrop{transition:none}}