:root{
  --sumi:#151a22;          /* tusz */
  --sumi2:#1d242f;         /* panel */
  --sumi3:#28313f;         /* panel jaśniejszy */
  --line:#3a4557;
  --washi:#e7e0cd;         /* papier planszy */
  --washi2:#d8cfb6;
  --ink:#0e1218;
  --text:#dfe4ec;
  --text2:#9aa6ba;
  --shu:#c0392b;           /* atakujący — cynober */
  --shu-l:#e06a5a;
  --ai:#3f6ea8;            /* obrońca — indygo */
  --ai-l:#7aa6d8;
  --gold:#c9a227;
  --moss:#6b8f5e;
  --warn:#d98c2b;
  --bad:#b23a48;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--sumi);color:var(--text);
  font:14px/1.45 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-variant-numeric:tabular-nums;overflow:hidden;
}
button{font:inherit;color:inherit;background:var(--sumi3);border:1px solid var(--line);
  padding:5px 10px;border-radius:3px;cursor:pointer}
button:hover:not(:disabled){background:#354154;border-color:#56637a}
button:disabled{opacity:.35;cursor:not-allowed}
button.pri{background:var(--gold);color:#1b1608;border-color:#e0bd44;font-weight:600}
button.pri:hover:not(:disabled){background:#e0bd44}
button.on{background:var(--moss);border-color:#8ab37c;color:#0f160c}
button.sm{padding:2px 7px;font-size:12px}
button.danger{background:#5b2129;border-color:#8d3a44}
input,select{font:inherit;color:var(--text);background:var(--ink);border:1px solid var(--line);
  padding:4px 6px;border-radius:3px}
input[type=number]{width:74px}
h1,h2,h3{margin:0;font-weight:600}
a{color:var(--gold)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#3a4557;border-radius:5px}
::-webkit-scrollbar-track{background:#131820}

/* ——— układ aplikacji ——— */
#shell{display:flex;flex-direction:column;height:100vh}
#topbar{display:flex;align-items:center;gap:14px;padding:7px 14px;background:linear-gradient(#232c39,#1a212b);
  border-bottom:1px solid var(--line);flex:0 0 auto}
#topbar .brand{font-family:Georgia,"Times New Roman",serif;font-size:17px;letter-spacing:.06em;color:var(--washi2)}
#topbar .brand b{color:var(--shu-l);font-weight:600}
#steps{display:flex;gap:2px;margin-left:6px}
.step{padding:3px 11px;font-size:12px;color:var(--text2);border:1px solid transparent;border-radius:3px}
.step.done{color:var(--moss)}
.step.cur{color:var(--gold);border-color:var(--gold);background:#2a2412}
.step.back{cursor:pointer}
.step.back:hover{color:var(--washi2);border-color:var(--line);background:#222a37}
.panel.sticky{position:sticky;top:-14px;z-index:6;box-shadow:0 8px 16px -6px rgba(8,11,16,.85)}
.backbar{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.zoombar{display:flex;gap:4px;align-items:center;margin-bottom:6px;font-size:12px;color:var(--text2)}
.zoombar input[type=range]{width:130px;accent-color:var(--gold)}
#turnflag{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-left-width:5px;
  border-radius:4px;padding:8px 11px;margin-bottom:10px;background:var(--sumi2)}
#turnflag.A{border-left-color:var(--shu);background:linear-gradient(90deg,#2b1a18,var(--sumi2))}
#turnflag.O{border-left-color:var(--ai);background:linear-gradient(90deg,#17202e,var(--sumi2))}
#turnflag .mon{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:15px;color:#fff}
#turnflag.A .mon{background:var(--shu)}
#turnflag.O .mon{background:var(--ai)}
#turnflag .who{font-weight:600;font-size:15px}
#turnflag.A .who{color:var(--shu-l)}
#turnflag.O .who{color:var(--ai-l)}
#turnflag .sub{font-size:11.5px;color:var(--text2)}
.mini polygon{stroke:#b9ae92;stroke-width:.4}
.mini{vertical-align:top}
.upiece .fm{font-size:8.5px;fill:#e3c96a;text-anchor:middle;pointer-events:none;font-weight:700}
#topinfo{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:13px}
.pill{padding:2px 9px;border-radius:11px;background:var(--sumi3);border:1px solid var(--line);font-size:12px}
.pill.A{border-color:var(--shu);color:var(--shu-l)}
.pill.O{border-color:var(--ai);color:var(--ai-l)}

#main{flex:1 1 auto;display:flex;min-height:0}
#stage{flex:1 1 auto;overflow:auto;padding:14px;min-width:0}
#rail{flex:0 0 306px;border-left:1px solid var(--line);background:#111620;display:flex;flex-direction:column;min-height:0}
#strip{flex:0 0 auto;border-top:1px solid var(--line);background:#0f141c;padding:6px 10px;
  max-height:184px;overflow:auto}

/* ——— inspektor ——— */
#inspector{padding:10px;border-bottom:1px solid var(--line);min-height:250px;font-size:13px}
#inspector .ihead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:7px}
#inspector .iname{font-weight:600;font-size:14.5px}
#inspector .icost{color:var(--gold)}
.statgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:6px 0}
.statgrid div{background:var(--sumi2);border:1px solid var(--line);border-radius:3px;padding:3px 2px;text-align:center}
.statgrid .k{display:block;font-size:10px;color:var(--text2)}
.statgrid .v{display:block;font-size:15px;font-weight:600}
.statgrid .up .v{color:var(--moss)}
.tagline{margin:5px 0 0}
.tag{display:inline-block;background:#2b3444;border:1px solid var(--line);border-radius:3px;
  padding:1px 6px;margin:2px 3px 0 0;font-size:11.5px}
.tag.sk{border-color:#6b5a2a;color:#e3c96a}
.tag.tr{border-color:#31566b;color:#8fc4dc}
.tag.bo{border-color:#4a6b39;color:#a6d18f}
.note{color:var(--text2);font-size:12px;margin-top:7px}
#log{flex:1 1 auto;overflow:auto;padding:8px 10px;font-size:12.5px;line-height:1.5}
#log .e{padding:2px 0;border-bottom:1px solid #1b222d}
#log .r{color:var(--text2)}
#log .hit{color:#e5b96b}#log .kill{color:var(--shu-l);font-weight:600}
#log .ok{color:var(--moss)}#log .bad{color:#e08a8a}
#log .rnd{color:var(--gold);font-weight:600;margin-top:5px;border-top:1px solid var(--line);padding-top:4px}

/* ——— karty składu ——— */
.striphead{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--text2);margin-bottom:4px}
.cards{display:flex;gap:6px;flex-wrap:wrap}
.ucard{width:126px;background:var(--sumi2);border:1px solid var(--line);border-left-width:3px;
  border-radius:3px;padding:4px 6px;font-size:11.5px;cursor:pointer;position:relative}
.ucard.A{border-left-color:var(--shu)}.ucard.O{border-left-color:var(--ai)}
.ucard:hover{background:var(--sumi3)}
.ucard.sel{outline:2px solid var(--gold);outline-offset:-1px}
.ucard{user-select:none}
.ucard.drag{opacity:.4}
.ucard.over{border-top:3px solid var(--gold)}
.ucard .grip{position:absolute;bottom:3px;right:5px;color:var(--text2);font-size:10px;cursor:grab}
.ucard.dead{opacity:.35;filter:grayscale(1)}
.ucard.act{opacity:.55}
.ucard.dim{opacity:.42;filter:saturate(.5)}
.ucard .plc{color:var(--moss);font-size:10px}
.ucard .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucard .m{color:var(--text2);display:flex;justify-content:space-between}
.hpbar{height:4px;background:#2b3444;border-radius:2px;margin:3px 0 2px;overflow:hidden}
.hpbar i{display:block;height:100%;background:var(--moss)}
.hpbar.low i{background:var(--warn)}.hpbar.crit i{background:var(--bad)}
.badge{position:absolute;top:3px;right:4px;font-size:10px;padding:0 4px;border-radius:2px}
.badge.sh{background:#7a5a1c;color:#fff}
.badge.fl{background:#7a2230;color:#fff}

/* ——— ekrany ——— */
.panel{background:var(--sumi2);border:1px solid var(--line);border-radius:4px;padding:12px 14px;margin-bottom:12px}
.panel > h2{font-size:14px;letter-spacing:.04em;color:var(--washi2);margin-bottom:9px;
  border-bottom:1px solid var(--line);padding-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.row label{color:var(--text2);font-size:12.5px}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.col3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hint{color:var(--text2);font-size:12px;margin:5px 0}
.err{color:#e08a8a;font-size:12.5px}
.okmsg{color:var(--moss);font-size:12.5px}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th{text-align:left;color:var(--text2);font-weight:500;border-bottom:1px solid var(--line);padding:4px 6px}
table.tbl td{border-bottom:1px solid #222b38;padding:3px 6px}
table.tbl tr:hover td{background:#222a37}
.money{color:var(--gold);font-weight:600}
.budgetbar{height:8px;background:#2b3444;border-radius:4px;overflow:hidden;margin:5px 0}
.budgetbar i{display:block;height:100%;background:linear-gradient(90deg,var(--moss),var(--gold))}
.budgetbar.over i{background:var(--bad)}
.tabs{display:flex;gap:4px;margin-bottom:10px}
.tabs button{border-bottom-width:2px}
.tabs button.act{background:var(--sumi3);border-bottom-color:var(--gold);color:#fff}
.chk{display:flex;gap:6px;align-items:flex-start;padding:4px 6px;border:1px solid transparent;border-radius:3px;cursor:pointer}
.chk:hover{background:#222a37}
.chk.on{background:#22301f;border-color:#3f5c37}
.chk.dis{opacity:.4;cursor:not-allowed}
.chk input{margin-top:3px}
.chk .cn{font-weight:600;font-size:12.5px}
.chk .cd{color:var(--text2);font-size:11.5px;line-height:1.35}
.chk .cc{margin-left:auto;color:var(--gold);white-space:nowrap;font-size:12px}
.scroll{max-height:330px;overflow:auto;padding-right:4px}

/* ——— plansza ——— */
#boardwrap{position:relative;background:#0c1017;border:1px solid var(--line);border-radius:4px;
  overflow:auto;padding:8px}
#board{display:block;background:transparent}
.hx{stroke:#7d8a63;stroke-width:.7;fill:#8faa6c}
.hx.hill{fill:#cfae70}
.hx.forest{fill:#5f7f56}
.hx.rice{fill:#a8b884}
.hx.build{fill:#b08a6a}
.hx.block{fill:#4c4a4a}
.hx.moat{fill:#7a8ea0}
.hx.terr1{fill:#d6cbb0} .hx.terr2{fill:#c8b996} .hx.terr3{fill:#baa678}
.hx.wall1{fill:#8d8d8d} .hx.wall2{fill:#787878} .hx.wall3{fill:#5f5f5f}
.hx.gate{fill:#96602d} .hx.tower{fill:#454545} .hx.keep{fill:#96282b} .hx.gruz{fill:#a89070}
.hx.river{fill:#5f87a8}
.hx.ford{fill:#8fb0c4}
.hx.bridge{fill:#9a7a52}
.hx.road{fill:#c8b892}
.hx.zA{stroke:var(--shu);stroke-width:1.1}
.hx.zO{stroke:var(--ai);stroke-width:1.1}
.hx.sel{stroke:#fff;stroke-width:2}
.hl{pointer-events:none;stroke-width:2}
.hl.aura{fill:rgba(201,162,39,.13);stroke:#c9a227;stroke-width:1.2;stroke-dasharray:3,3}
.hl.mv{fill:#d8552f;fill-opacity:.42;stroke:#7d2110;stroke-width:2.2}
.hl.mv.sO{fill:#2f6fd8;stroke:#122f6b}
.hl.ch{fill:#f0b429;fill-opacity:.55;stroke:#8a5b00;stroke-width:2.4}
.hl.ch.sO{fill:#5ec8e8;stroke:#0d4a63}
.hl.tgt{fill:#2b1d1a;fill-opacity:.5;stroke:#ffd166;stroke-width:2.6}
.hl.pv{fill:#d8552f;fill-opacity:.24;stroke:#7d2110;stroke-opacity:.85;stroke-width:1.7}
.hl.pv.sO{fill:#2f6fd8;stroke:#122f6b}
.hl.pvm{fill:#e8e0c8;fill-opacity:.22;stroke:#f2ece0;stroke-opacity:.55;stroke-width:1.3}
.hl.pvt{fill:none;stroke:#c0392b;stroke-dasharray:4,2;stroke-width:2.2}
.oddtag rect{fill:#141820;fill-opacity:.88;stroke:#ffd166;stroke-width:1}
.oddtag text{fill:#ffd166;font-size:10px;font-weight:700;font-family:inherit}
.hl.dep{fill:#d9d0a8;fill-opacity:.30;stroke:#bfb28c}
.hx.hot{stroke:#fff;stroke-width:1.6}
.hxlbl{font-size:7px;fill:#6f6752;pointer-events:none;user-select:none}
.upiece{cursor:pointer}
.upiece .body{stroke:#12161d;stroke-width:1.4}
.upiece.A .body{fill:var(--shu)}
.upiece.O .body{fill:var(--ai)}
.upiece.act .body{opacity:.45}
.upiece.sel .body{stroke:#fff;stroke-width:2.4}
.upiece .lbl{font-size:10px;font-weight:700;fill:#fff;text-anchor:middle;pointer-events:none;user-select:none}
.upiece .hp{font-size:8px;fill:#fff;text-anchor:middle;pointer-events:none}
.upiece .face{fill:#ffe9a8;stroke:#2a2413;stroke-width:.6;pointer-events:none}
.upiece .st{font-size:9px;text-anchor:middle;pointer-events:none;font-weight:700}
.upiece .halo{fill:none;stroke-width:2.4}
.upiece.shaken .halo{stroke:#ffc94a;stroke-dasharray:4,3}
.upiece.fleeing .halo{stroke:#e05a5a}
.upiece .sokmark{fill:#d9c8ff;stroke:#4b2f8f;stroke-width:.9;pointer-events:none}
.upiece .stbadge{font-size:11px;text-anchor:middle;font-weight:700;fill:#1b1608}
.upiece.shaken .st{fill:#ffd166}
.upiece.fleeing .body{opacity:.5}
.pal{stroke:#7a5a30;stroke-width:3.2;stroke-linecap:round}
.legend{display:flex;gap:9px;flex-wrap:wrap;font-size:11.5px;color:var(--text2);margin-top:7px}
.legend i{display:inline-block;width:11px;height:11px;border:1px solid #888;vertical-align:-2px;margin-right:3px;border-radius:2px}
#facepick{display:flex;gap:3px;flex-wrap:wrap}
#facepick button{width:34px}
.actbtns{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}
.dicebox{background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:6px 8px;font-size:12.5px;margin-top:6px}
.big{font-size:22px;font-weight:700;color:var(--gold)}
.res{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.res dt{color:var(--text2)}
.warnbox{background:#2e2415;border:1px solid #6b5a2a;border-radius:3px;padding:7px 9px;font-size:12.5px;margin:7px 0}
.warnbox b{color:#e3c96a}
.smallcaps{font-size:11.5px;color:var(--text2)}
#overlay{position:fixed;inset:0;background:rgba(8,11,16,.82);display:none;align-items:center;justify-content:center;z-index:50}
#overlay.on{display:flex}
.kp{pointer-events:none}
.kp .kpf{fill:#f3e3b0;stroke:#2a2112;stroke-width:1}
.kp.hA .kpf{fill:#e0584a}
.kp.hS .kpf{fill:#f2b84b}
.kp text{font-size:8px;font-weight:700;fill:#2a2112;text-anchor:middle}
#ovbox{background:var(--sumi2);border:1px solid var(--gold);border-radius:5px;padding:18px 22px;max-width:640px;max-height:84vh;overflow:auto}

/* ——— wybór trybu i lobby online ——— */
.modegate{min-height:100vh;overflow:auto;display:grid;place-items:center;padding:clamp(18px,5vw,56px);
  background:radial-gradient(circle at 50% 0,rgba(192,57,43,.18),transparent 42rem),var(--sumi)}
.modebox{width:min(760px,100%);background:linear-gradient(145deg,#202834,#171d27);border:1px solid var(--line);
  border-radius:8px;padding:clamp(20px,5vw,42px);box-shadow:0 26px 80px rgba(0,0,0,.45)}
.modebrand{font-family:Georgia,"Times New Roman",serif;font-size:clamp(27px,5vw,44px);color:var(--washi2);
  letter-spacing:.04em;margin-bottom:5px}.modebrand b{color:var(--shu-l);font-weight:600}
.modelead{color:var(--text2);margin:0 0 24px}
.modechoices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modecard{display:block;text-align:left;min-height:128px;padding:18px;border-radius:6px;background:#222b38}
.modecard strong{display:block;font:600 19px Georgia,"Times New Roman",serif;color:var(--washi2);margin-bottom:7px}
.modecard span{display:block;color:var(--text2);font-size:13px;line-height:1.5}
.modecard.pri strong,.modecard.pri span{color:#1b1608}
.modeline{height:1px;background:var(--line);margin:22px 0}
.modeactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.modefield{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.modefield input{flex:1 1 220px;min-width:0;text-transform:none}
.duelcode{font:600 clamp(20px,5vw,30px) ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--gold);
  letter-spacing:.08em;margin:12px 0}
.sharefield{display:flex;gap:7px}.sharefield input{flex:1;min-width:0;color:var(--washi2)}
.modestatus{padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--gold);background:#171d27;
  border-radius:4px;margin:14px 0}.modestatus.ok{border-left-color:var(--moss)}.modestatus.bad{border-left-color:var(--bad)}
.modespinner{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-right:7px;
  box-shadow:0 0 0 0 rgba(201,162,39,.55);animation:modepulse 1.6s infinite}
@keyframes modepulse{70%{box-shadow:0 0 0 8px rgba(201,162,39,0)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}
@media(max-width:620px){.modechoices{grid-template-columns:1fr}.modecard{min-height:0}.sharefield{display:block}.sharefield button{margin-top:7px;width:100%}}