/* ==========================================================================
   Siogun — styl symulatora „laka i washi”.
   Ciepła czerń laki (urushi) jako tło, papier washi jako tekst, złoto jako
   akcent i cynober/indygo jako kolory stron. Kolory stron (--shu, --ai) oraz
   kolory heksów są wspólne z rendererem planszy 2D/3D — nie zmieniaj ich tu
   bez zmiany w js/board-renderer.js i js/board3d/.
   ========================================================================== */
:root{
  --sumi:#13110f;          /* tusz — tło aplikacji */
  --sumi2:#1c1916;         /* panel */
  --sumi3:#28221d;         /* panel jaśniejszy / przycisk */
  --sumi4:#332b25;         /* przycisk po najechaniu */
  --line:#382f28;
  --line2:#51453a;         /* obramowanie aktywne */
  --washi:#e7e0cd;         /* papier planszy */
  --washi2:#dccfb2;
  --ink:#0c0a09;           /* pola formularzy */
  --text:#e9e2d3;
  --text2:#a3978a;
  --shu:#c0392b;           /* atakujący — cynober */
  --shu-l:#e06a5a;
  --ai:#3f6ea8;            /* obrońca — indygo */
  --ai-l:#7aa6d8;
  --gold:#c9a227;
  --gold-l:#e2c15a;
  --gold-bg:rgba(201,162,39,.12);
  --moss:#7d9b6a;
  --warn:#d98c2b;
  --bad:#b23a48;
  --hover:#241f1b;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --r:6px;                 /* promień kontrolek */
  --r2:10px;               /* promień paneli */
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 14px 30px -20px rgba(0,0,0,.9);
  /* prawa kolumna: tło, karta podglądu (arkusz), wgłębienie dziennika, pasek statystyk */
  --rail-bg:#0f0d0c;
  --sheet:linear-gradient(180deg,#1e1a17,#191613);
  --sheet-line:var(--line);
  --sheet-shadow:var(--shadow);
  --well:rgba(0,0,0,.24);
  --well-line:rgba(255,255,255,.035);
  --well-shadow:inset 0 1px 3px rgba(0,0,0,.55);
  --stat:#1a1613;
  --stat-line:var(--line);
  --stat-up:rgba(125,155,106,.18);
  --stat-up-v:#a6d18f;
  --card:linear-gradient(180deg,#221d19,#1b1714);
  --card-hover:#2a241f;
}
*{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 var(--sans);
  font-variant-numeric:tabular-nums;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(201,162,39,.35)}
button{font:inherit;color:inherit;background:linear-gradient(180deg,#2d2620,#241e1a);
  border:1px solid var(--line2);padding:5px 11px;border-radius:var(--r);cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s}
button:hover:not(:disabled){background:var(--sumi4);border-color:#6a5b4c}
button:active:not(:disabled){box-shadow:0 1px 3px rgba(0,0,0,.5) inset}
button:disabled{opacity:.35;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--gold-l);outline-offset:2px}
button.pri{background:linear-gradient(180deg,#e2c15a,#c49b22);color:#1b1608;border-color:#e6c75a;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px -8px rgba(201,162,39,.7)}
button.pri:hover:not(:disabled){background:linear-gradient(180deg,#ebcd6a,#d1a82c);border-color:#f0d57a}
button.on{background:linear-gradient(180deg,#8aa877,#6f8c5c);border-color:#9dbd88;color:#0f160c;font-weight:600}
button.on:hover:not(:disabled){background:linear-gradient(180deg,#96b483,#7a9866);border-color:#aed09a}
button.sm{padding:2px 8px;font-size:12px}
button.danger{background:linear-gradient(180deg,#6b2630,#561d25);border-color:#94404b}
button.danger:hover:not(:disabled){background:#7a2c37;border-color:#b0505c}
input,select,textarea{font:inherit;color:var(--text);background:var(--ink);border:1px solid var(--line2);
  padding:4px 7px;border-radius:var(--r);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15);outline:none}
input[type=number]{width:74px}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--gold)}
textarea#jsonbox{background:var(--ink)!important;color:var(--text)!important;border:1px solid var(--line2)!important;
  border-radius:var(--r)!important;padding:8px}
h1,h2,h3{margin:0;font-weight:600}
a{color:var(--gold-l)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#40362e;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#574a3e;background-clip:padding-box;border:2px solid transparent}
::-webkit-scrollbar-track{background:transparent}
*{scrollbar-color:#40362e transparent}

/* ——— układ aplikacji ——— */
#shell{display:flex;flex-direction:column;height:100vh}
#topbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:8px 16px;
  background:linear-gradient(180deg,#201b17,#171412);border-bottom:1px solid var(--line);flex:0 0 auto;
  box-shadow:0 1px 0 rgba(201,162,39,.08),0 6px 18px -10px rgba(0,0,0,.9);position:relative;z-index:10}
#topbar .brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.seal{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:5px;
  background:linear-gradient(145deg,#d2493a,#9c2a1f);color:#fbe9dc;font:700 17px/1 var(--serif);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.2) inset;transform:rotate(-3deg)}
.brandtxt{display:flex;flex-direction:column;line-height:1.1}
.brandtxt .t{font-family:var(--serif);font-size:18px;letter-spacing:.05em;color:var(--washi2)}
.brandtxt .t b{color:var(--shu-l);font-weight:600}
.brandtxt small{font-size:10.5px;letter-spacing:.06em;color:var(--text2);margin-top:2px}
#steps{display:flex;gap:2px;align-items:center;counter-reset:step}
.step{counter-increment:step;display:flex;align-items:center;gap:7px;padding:3px 12px 3px 4px;font-size:12.5px;
  color:var(--text2);border-radius:999px;white-space:nowrap;transition:background-color .15s,color .15s}
.step::before{content:counter(step);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:10.5px;font-weight:700;border:1px solid var(--line2);color:var(--text2);background:var(--sumi)}
.step.done{color:#a9bf98}
.step.done::before{content:"✓";background:#26301f;border-color:#5d7a4d;color:#a6d18f}
.step.cur{color:var(--gold-l);background:var(--gold-bg);box-shadow:0 0 0 1px rgba(201,162,39,.5) inset;font-weight:600}
.step.cur::before{background:var(--gold);border-color:var(--gold);color:#1b1608}
.step.back{cursor:pointer}
.step.back:hover{color:var(--washi2);background:var(--hover)}
.panel.sticky{position:sticky;top:-16px;z-index:6;box-shadow:0 10px 20px -8px rgba(0,0,0,.9)}
/* Błędy i ostrzeżenia: panel rośnie z ich liczbą (do 7.5em, dalej przewijanie); kliknięty element i tak zostaje w miejscu (keepBuildAnchor). */
.budgetmsgs{max-height:7.5em;overflow-y:auto;overscroll-behavior:contain}
.backbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.zoombar{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-bottom:8px;font-size:12px;color:var(--text2)}
.zoombar input[type=range]{width:130px;accent-color:var(--gold)}
#turnflag{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-left-width:4px;
  border-radius:var(--r2);padding:10px 12px;margin-bottom:10px;background:var(--sumi2);box-shadow:var(--shadow)}
#turnflag.A{border-left-color:var(--shu);background:linear-gradient(90deg,rgba(192,57,43,.2),var(--sumi2) 70%)}
#turnflag.O{border-left-color:var(--ai);background:linear-gradient(90deg,rgba(63,110,168,.22),var(--sumi2) 70%)}
#turnflag .mon{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:16px;color:#fff;font-family:var(--serif);
  box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 0 4px rgba(255,255,255,.06)}
#turnflag.A .mon{background:radial-gradient(circle at 35% 30%,#e0584a,var(--shu))}
#turnflag.O .mon{background:radial-gradient(circle at 35% 30%,#5b8bc6,var(--ai))}
#turnflag .who{font-weight:600;font-size:15px;font-family:var(--serif);letter-spacing:.02em}
#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;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;font-size:13px}
.viewtoggle{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.viewtoggle:empty{display:none}
.viewtoggle .vt-mobile{display:none}
.viewtoggle button[aria-pressed="true"]{background:rgba(201,162,39,.16);border-color:rgba(201,162,39,.6);color:var(--gold-l)}
/* schowany pasek boczny / skład armii (w bitwie „Podgląd” chowa tylko podgląd i dziennik — panel akcji zostaje) */
#shell:not(.scr-battle) #rail,#shell:not(.scr-battle) #strip{display:none}   /* pasek boczny i skład armii tylko w bitwie */
#shell.hide-strip #strip{display:none}
.pill{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--line2);
  font-size:12px;white-space:nowrap;color:var(--text)}
.pill.A{border-color:rgba(192,57,43,.8);color:#f0a093;background:rgba(192,57,43,.16)}
.pill.O{border-color:rgba(63,110,168,.85);color:#a9c8ec;background:rgba(63,110,168,.18)}
.pill.budget{color:var(--gold-l);border-color:rgba(201,162,39,.45)}

#main{flex:1 1 auto;display:flex;min-height:0}
#stage{flex:1 1 auto;overflow:auto;padding:16px;min-width:0;
  background:radial-gradient(ellipse at 50% -20%,rgba(192,57,43,.07),transparent 60%)}
#rail{flex:0 0 288px;display:flex;flex-direction:column;gap:8px;min-height:0;padding:8px;
  border-left:1px solid var(--line);background:var(--rail-bg)}
#strip{flex:0 0 auto;border-top:1px solid var(--line);background:#0f0d0c;padding:7px 12px 9px;
  max-height:184px;overflow:auto}
#build-footer{flex:0 0 auto;padding:2px 14px;border-top:1px solid var(--line);
  background:#0f0d0c;color:var(--text2);font-size:10.5px;text-align:right}

/* ——— inspektor: karta z podglądem jednostki albo heksu; pasek w kolorze strony u góry ——— */
#inspector{position:relative;flex:0 0 auto;min-height:168px;padding:10px 12px 11px;font-size:12.5px;
  background:var(--sheet);border:1px solid var(--sheet-line);border-radius:var(--r2);box-shadow:var(--sheet-shadow)}
#unitpop{position:fixed;z-index:60;width:300px;max-width:calc(100vw - 12px);padding:10px 12px 11px;font-size:12.5px;pointer-events:none;
  background:var(--sheet);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:0 10px 28px rgba(0,0,0,.5)}
#unitpop[hidden]{display:none}
#unitpop .pdesc{margin:5px 0 0;font-size:11.5px;line-height:1.45;color:var(--text2)}
#unitpop .pdesc .tag{margin:0 5px 0 0;vertical-align:1px}
:is(#inspector,#unitpop)[data-side]::before{content:"";position:absolute;left:12px;right:12px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--shu)}
#inspector[data-side="O"]::before,#unitpop[data-side="O"]::before{background:var(--ai)}
#inspector > .note:only-child{display:grid;place-items:center;min-height:144px;margin:0;padding:0 10px;text-align:center;line-height:1.5}
:is(#inspector,#unitpop) .ihead{display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-bottom:1px solid var(--sheet-line);padding-bottom:7px;margin-bottom:8px}
:is(#inspector,#unitpop) .iname{min-width:0;font:600 14.5px/1.25 var(--serif);color:var(--washi2);letter-spacing:.02em}
:is(#inspector,#unitpop) .icost{flex:0 0 auto;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;
  color:var(--gold-l);background:var(--gold-bg);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
/* statystyki: jeden zaokrąglony pasek, komórki rozdzielone cienką linią (odstęp siatki w kolorze linii) */
.statgrid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:1px;margin:6px 0 8px;overflow:hidden;
  background:var(--stat-line);border:1px solid var(--stat-line);border-radius:8px}
.statgrid div{background:var(--stat);padding:3px 0 2px;text-align:center}
.statgrid .k{display:block;font-size:8.5px;line-height:1.3;letter-spacing:.05em;color:var(--text2)}
.statgrid .v{display:block;font-size:14px;line-height:1.25;font-weight:700;color:var(--washi)}
.statgrid .up{background:var(--stat-up)}
.statgrid .up .v{color:var(--stat-up-v)}
.statgrid .down{background:rgba(176,80,92,.2)}
.statgrid .down .v{color:#e8939c}
.note.wound{color:#e8939c}
.tagline{margin:5px 0 0}
.tag{display:inline-block;background:#221d19;border:1px solid var(--line2);border-radius:999px;
  padding:1px 8px;margin:2px 3px 0 0;font-size:11.5px}
.tag.sk{border-color:#6b5a2a;color:#e3c96a;background:rgba(201,162,39,.08)}
.tag.tr{border-color:#31566b;color:#8fc4dc;background:rgba(49,86,107,.15)}
.tag.bo{border-color:#4a6b39;color:#a6d18f;background:rgba(74,107,57,.15)}
.note{color:var(--text2);font-size:12px;margin-top:7px}
#unitpop .note,#inspector .note{line-height:1.45}
:is(#inspector,#unitpop) .tag{padding:0 7px;font-size:11px;line-height:1.6}
/* szanse ataku nad podglądem celu */
#inspector .odds,#unitpop .odds{margin:0 0 9px;padding:7px 10px;border-radius:8px;color:var(--text);
  background:var(--gold-bg);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
/* dziennik: wgłębienie pod kartą, rundy jako przerywniki */
#log{flex:1 1 auto;overflow:auto;padding:4px 10px 8px;font-size:12px;line-height:1.45;
  background:var(--well);border-radius:var(--r2);box-shadow:var(--well-shadow)}
#log .e{padding:3px 0;border-bottom:1px solid var(--well-line)}
#log .e:last-child{border-bottom:none}
#log .r{color:var(--text2)}
#log .hit{color:#e5b96b}#log .kill{color:var(--shu-l);font-weight:600}
#log .ok{color:#a6c493}#log .bad{color:#e08a8a}
#log .rnd{display:flex;align-items:center;gap:8px;margin-top:6px;padding:5px 0 3px;border-bottom:none;
  color:var(--gold-l);font:600 11px/1.3 var(--serif);letter-spacing:.16em;--rnd-line:color-mix(in srgb,var(--gold) 50%,transparent)}
#log .rnd::before,#log .rnd::after{content:"";flex:1 1 0;height:1px;background:linear-gradient(90deg,transparent,var(--rnd-line))}
#log .rnd::after{background:linear-gradient(90deg,var(--rnd-line),transparent)}
/* dziennik schowany przyciskiem „Dziennik” — reszta prawej kolumny zostaje */
#shell.hide-log #log{display:none}
#logToggle{margin-top:auto;width:100%;flex:0 0 auto}
#shell.hide-rail #logToggle{display:none}   /* przycisk dziennika tylko przy widocznym pasku bocznym (bez paska nie ma czego chować) */

/* ——— karty składu: znaczek strony z tym samym skrótem co żeton na planszy ——— */
.striphead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--text2);margin:2px 0 5px}
.striphead b:first-child{font-family:var(--serif);font-size:13px;letter-spacing:.03em}
.cards{display:flex;gap:6px;flex-wrap:wrap}
.ucard{width:124px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 7px 5px;
  font-size:11px;line-height:1.35;cursor:pointer;position:relative;user-select:none;
  transition:background-color .12s,border-color .12s,box-shadow .12s}
.ucard:hover{background:var(--card-hover);border-color:var(--line2);box-shadow:0 6px 14px -8px rgba(0,0,0,.9)}
.ucard.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 0 4px rgba(201,162,39,.15)}
.ucard.drag{opacity:.4}
.ucard.over{box-shadow:inset 0 3px 0 var(--gold)}
.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{display:flex;align-items:center;gap:4px;margin-bottom:2px;font-weight:600;color:var(--washi)}
.ucard .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucard .grip{position:absolute;left:0;top:50%;width:7px;transform:translateY(-50%);text-align:center;color:var(--text2);font-size:8px;line-height:1;cursor:grab;
  opacity:0;transition:opacity .12s}
.ucard:hover .grip{opacity:.7}
.ucard .m{color:var(--text2);display:flex;justify-content:space-between;gap:4px;white-space:nowrap}
.uchip{flex:0 0 auto;min-width:19px;height:14px;padding:0 2px;border-radius:4px;font:700 8.5px/14px var(--sans);font-style:normal;
  letter-spacing:.02em;text-align:center;color:#fff;background:var(--shu);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.35)}
.uchip.O{background:var(--ai)}
.uchip.cav{border-radius:7px}
.uchip.hero{border-radius:7px 2px}
.hpbar{height:4px;background:#2e2722;border-radius:999px;margin:3px 0 3px;overflow:hidden}
.hpbar i{display:block;height:100%;background:linear-gradient(90deg,#6f8c5c,#94b67f);border-radius:999px}
.hpbar.low i{background:var(--warn)}.hpbar.crit i{background:var(--bad)}
.badge{position:absolute;top:4px;right:4px;font-size:9px;line-height:14px;padding:0 5px;border-radius:999px;font-weight:700;
  box-shadow:0 0 0 2px var(--sumi2)}
.badge.sh{background:#8a661f;color:#fff}
.badge.fl{background:#8a2838;color:#fff}
.badge.ok{background:#2f4a2a;color:#a6d18f}

/* ——— ekrany ——— */
.panel{background:linear-gradient(180deg,#1e1a17,#191613);border:1px solid var(--line);border-radius:var(--r2);
  padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow)}
.panel > h2{font:600 15px/1.3 var(--serif);letter-spacing:.05em;color:var(--washi2);margin-bottom:11px;
  border-bottom:1px solid var(--line);padding:0 0 8px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  background:linear-gradient(var(--shu),var(--shu)) 0 3px/3px 14px no-repeat}
.panel > h2 > .info{margin-right:auto;font:400 14px/1 var(--sans);color:var(--text2)}
.panel.folded > h2{margin-bottom:0;border-bottom:0;padding-bottom:0}
.panel > h2 > span{font:500 12px/1.3 var(--sans);letter-spacing:.01em;color:var(--text2)}
.panel > h2 .money{font-size:13px;font-weight:700;color:var(--gold-l)}
/* Zwijane panele rozstawienia online (foldableDeployPanel w app-deploy.js). */
details.deployfold > summary{cursor:pointer;list-style:none;display:block}
details.deployfold > summary::-webkit-details-marker{display:none}
details.deployfold > summary > h2,details.deployfold > summary > h3{margin:0;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-left:12px;position:relative}
details.deployfold > summary > h2{font:600 15px/1.3 var(--serif);letter-spacing:.05em;color:var(--washi2);background:linear-gradient(var(--shu),var(--shu)) 0 3px/3px 14px no-repeat}
details.deployfold > summary > h2 > span{font:500 12px/1.3 var(--sans);letter-spacing:.01em;color:var(--text2)}
details.deployfold > summary > h2::after,details.deployfold > summary > h3::after{content:"▸";margin-left:auto;color:var(--text2)}
details.deployfold[open] > summary > h2::after,details.deployfold[open] > summary > h3::after{content:"▾"}
details.deployfold[open] > summary{margin-bottom:11px;border-bottom:1px solid var(--line);padding-bottom:8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:9px}
.row label{color:var(--text2);font-size:12.5px}
.inl{display:inline-flex;align-items:center;gap:6px}
.mapedit{padding:8px 10px;margin:2px 0 10px;border:1px dashed var(--line2);border-radius:var(--r);background:rgba(255,255,255,.02)}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.col3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hint{color:var(--text2);font-size:12px;margin:5px 0}
.err{color:#ea9a9a;font-size:12.5px}
#formerr{min-height:1.5em}   /* komunikat o formacjach pojawia się i znika — bez przesuwania paneli pod spodem */
.okmsg{color:#a6c493;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;font-size:11.5px;letter-spacing:.03em;border-bottom:1px solid var(--line2);padding:5px 6px}
table.tbl td{border-bottom:1px solid #26201c;padding:4px 6px}
table.tbl tr:hover td{background:var(--hover)}
.money{color:var(--gold-l);font-weight:600}
.budgetbar{height:8px;background:#2e2722;border-radius:999px;overflow:hidden;margin:6px 0;box-shadow:0 1px 2px rgba(0,0,0,.5) inset}
.budgetbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--moss),var(--gold))}
.budgetbar.over i{background:var(--bad)}
.tabs{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tabs button{border-bottom-width:2px}
.tabs button.act{background:var(--sumi4);border-bottom-color:var(--gold);color:#fff}
.chk{display:flex;gap:7px;align-items:flex-start;padding:5px 7px;border:1px solid transparent;border-radius:var(--r);cursor:pointer;
  transition:background-color .12s,border-color .12s}
.chk:hover{background:var(--hover)}
.chk.on{background:rgba(125,155,106,.14);border-color:#4f6841}
.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-l);white-space:nowrap;font-size:12px}
.scroll{max-height:330px;overflow:auto;padding-right:4px}

/* ——— plansza ——— */
.battlecols{display:flex;gap:14px;align-items:flex-start}
.battlecols .boardcol{flex:1 1 auto;min-width:0}
#boardwrap{position:relative;background:radial-gradient(ellipse at center,#191613,#0c0a09 80%);border:1px solid var(--line);
  border-radius:var(--r2);overflow:auto;padding:10px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -24px #000}
#board{display:block;background:transparent}
/* ——— widok 3D planszy (js/board3d/) ——— */
.viewswitch{display:inline-flex;margin-right:8px}
.viewswitch button{border-radius:0}
.viewswitch button:first-child{border-radius:var(--r) 0 0 var(--r)}
.viewswitch button:last-child{border-radius:0 var(--r) var(--r) 0;margin-left:-1px}
.viewswitch button.on{background:linear-gradient(180deg,#e2c15a,#c49b22);color:#1b1608;border-color:var(--gold);font-weight:700}
.board3d-slot{position:relative;margin:-10px;container-type:inline-size}
.board3d-loading,.board3d{width:100%;height:clamp(300px,66cqi,78vh)}
.board3d-loading{display:flex;align-items:center;justify-content:center;color:var(--text2)}
.board3d{position:relative;overflow:hidden;border-radius:var(--r2);user-select:none;-webkit-user-select:none}
.board3d canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.board3d canvas:active{cursor:grabbing}
.board3d canvas.b3-hit{cursor:pointer}
.zoombar select.animspeed{padding:2px 6px;font-size:12px;width:auto}
.board3d canvas:focus{outline:none}
.board3d canvas:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* napisy nad figurką: trafienie — czerwona pieczęć (hanko), pudło — cicha etykieta z papieru */
.b3pop>span{display:inline-block;font-family:var(--serif);line-height:1;white-space:nowrap}
.b3pop.hit>span{padding:3px 7px 4px;border-radius:5px;font-size:17px;font-weight:700;letter-spacing:.02em;color:#fff4e4;
  background:linear-gradient(160deg,#d94a3a,#9a2519);border:1.5px solid #f4d9ae;
  box-shadow:0 0 0 1px #5e140c,0 3px 8px #000a;text-shadow:0 1px 1px #5e140c;
  transform:rotate(-4deg);animation:b3stamp .32s cubic-bezier(.2,1.6,.4,1) both}
.b3pop.miss>span{padding:3px 10px 4px;border-radius:999px;font-size:13px;font-style:italic;font-weight:600;letter-spacing:.08em;
  color:#f1e8d6;background:#15120ecc;border:1px solid #efe6d24d;box-shadow:0 2px 6px #0008;
  animation:b3drift .4s ease-out both}
@keyframes b3stamp{0%{opacity:0;transform:scale(1.9) rotate(-14deg)}60%{opacity:1}100%{transform:scale(1) rotate(-4deg)}}
@keyframes b3drift{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.b3pop>span{animation:none}}
.b3hp{min-width:16px;height:16px;border-radius:8px;background:#1b1b1b;border:1px solid #e8dcc0;color:#f2ece0;font-size:10px;font-weight:700;line-height:14px;text-align:center;box-shadow:0 1px 2px #0008}
.b3hp.low{color:#ff9a8a;border-color:#ff9a8a}
.b3weather{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:10px;background:#0c1017b3;border:1px solid #ffffff2e;color:#f2ece0;font-size:12px;line-height:18px;pointer-events:auto;cursor:help}
.b3weather[hidden]{display:none}
.b3path{padding:0 5px;border-radius:3px;background:#1d2a3acc;border:1px solid #bfe0ff;color:#dcefff;font-size:10px;font-weight:700;line-height:14px}
.board3d-lost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0c1017cc;color:var(--text2)}
.board3d-lost[hidden]{display:none}
.board3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.board3d-labels>div{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform;transform-origin:0 0}
.b3u{display:flex;gap:3px;align-items:center;padding:0 4px;border-radius:3px;font-size:10px;line-height:15px;color:#fff;border:1px solid #12161d;box-shadow:0 1px 2px #0008}
.b3u.A{background:var(--shu)}
.b3u.O{background:var(--ai)}
.b3u b{font-weight:700}
.b3u i{font-style:normal;opacity:.9}
.b3u.act,.b3u.flee{opacity:.55}
.b3u.sel{outline:2px solid #fff;opacity:1}
.b3u.b3-hide{visibility:hidden}
.b3u em{font-style:normal;font-weight:700;font-size:9px;line-height:12px;min-width:12px;text-align:center;border-radius:6px;padding:0 2px}
.b3u .ksi{flex:0 0 auto;margin:-1px 0}
.note .ksi{vertical-align:-3px}
.refico{display:inline-block;vertical-align:middle;margin-right:4px}
.b3u em.fm{background:#1b2230;color:#e3c96a;border:1px solid #c9a227}
.b3tag{margin-top:-19px;padding:0 4px;border-radius:3px;background:#141820e0;border:1px solid #ffd166;color:#ffd166;font-size:10px;font-weight:700;line-height:13px}
.b3coord{font-size:9px;color:#c9bf9c;text-shadow:0 0 3px #000,0 0 2px #000}
.hx{stroke:#7d8a63;stroke-width:.7;fill:#8faa6c}
.hx.hill{fill:#cfae70}
.hx.hill.szaniec{fill:#a8875c}
.hx.hill.hill2{fill:#b98f4c}
.hill2ring{fill:none;stroke:#7a5a22;stroke-width:1.4;stroke-opacity:.75}
.szaniec-mark{fill:none;stroke:#5a3c1e;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.szaniec-hach{fill:none;stroke:#5a3c1e;stroke-width:1.4;stroke-linecap:round}
.hx.forest{fill:#5f7f56}
.hx.grove{fill:#7d9d63}
.grovedot{fill:#4f7048;fill-opacity:.8;stroke:#34502f;stroke-width:.6}
.hx.rice{fill:#a8b884}
.hx.build{fill:#b08a6a}
.hx.block{fill:#4c4a4a}
.hx.moat{fill:#7a8ea0}
.castleroad{stroke:#a98a4c;stroke-width:6;stroke-linecap:round;opacity:.9}.castleroadhub{fill:#a98a4c;opacity:.9}
.castlehouse polygon,.castlehouse rect{fill:#a8825a;stroke:#5b4128;stroke-width:1.2}.castlehouse line{stroke:#5b4128;stroke-width:1}
.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.fl{fill:#3fae6a;fill-opacity:.42;stroke:#17663a;stroke-width:2.2}
.hl.flz{fill:#3fae6a;fill-opacity:.24;stroke:#17663a;stroke-opacity:.85;stroke-width:1.8;stroke-dasharray:5,3}
.hl.flw{fill:#3fae6a;fill-opacity:.14;stroke:#17663a;stroke-opacity:.8;stroke-width:1.6;stroke-dasharray:5,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.shaken .st{fill:#ffd166}
.upiece.fleeing .body{opacity:.5}
.online-board-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin:12px 0 6px;color:var(--text2);font-size:12px}
.online-board-head b{color:var(--washi2);font-size:14px;font-family:var(--serif)}
.online-board-wrap{overflow:auto;background:radial-gradient(ellipse at center,#191613,#0c0a09 80%);border:1px solid var(--line);border-radius:var(--r2);max-height:min(68vh,590px);touch-action:pan-x pan-y}
.online-board{display:block;width:100%;min-width:700px;height:auto;background:transparent}
.online-board .hx{cursor:crosshair}
.online-board .hx:hover{stroke:#fff;stroke-width:1.5}
.online-board .hx.online-legal{stroke:#7ee787;stroke-width:2;filter:brightness(1.08)}
.online-board .hx.online-legal:hover{stroke:#b7ffbf;stroke-width:3}
.online-board .upiece{cursor:default}
.online-board .upiece[data-online-unit]{cursor:pointer}
.online-board .upiece.online-target .body{stroke:#ff6b6b;stroke-width:3;filter:drop-shadow(0 0 3px #ff4d4d)}
.online-unit-panel{display:grid;gap:8px;margin:10px 0;padding:10px 12px;background:var(--sumi2);border:1px solid var(--line);border-radius:var(--r2)}
.online-unit-panel>div:first-child{display:flex;justify-content:space-between;gap:10px;color:var(--text2)}
.online-unit-panel>div:first-child b{color:var(--washi2)}
.online-facing{display:grid;grid-template-columns:repeat(6,minmax(40px,1fr));gap:5px}
.online-action-modes{display:flex;gap:6px;flex-wrap:wrap}.online-action-modes button{flex:1 1 82px}
.online-zoom{display:flex;gap:4px;margin-left:auto}.online-zoom button{padding:3px 8px;min-width:34px}
.online-advanced{margin:10px 0;border:1px solid var(--line);border-radius:var(--r2);padding:8px 10px}.online-advanced>summary{cursor:pointer;color:var(--text2)}
.online-last-action{margin:10px 0;padding:8px 12px;background:var(--sumi2);border:1px solid var(--line);border-radius:var(--r2);font-size:12px}
.online-last-action summary{cursor:pointer;color:var(--washi2);font-weight:700}.online-last-action ol{margin:7px 0 0 20px;color:var(--text2)}
@media(max-width:620px){.online-board-head{flex-wrap:wrap}.online-board-head>span:not(.online-zoom){flex-basis:100%}.online-unit-panel>div:first-child{display:grid}.online-facing{grid-template-columns:repeat(3,1fr)}}
.pal{stroke:#7a5a30;stroke-width:3.2;stroke-linecap:round}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--text2);margin-top:8px}
.legend i{display:inline-block;width:11px;height:11px;border:1px solid rgba(255,255,255,.25);vertical-align:-2px;margin-right:4px;border-radius:3px}
#facepick{display:flex;gap:3px;flex-wrap:wrap}
#facepick button{width:34px}
.actbtns{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}
.dicebox{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:7px 9px;font-size:12.5px;margin-top:6px}
.big{font-size:24px;font-weight:700;color:var(--gold-l);font-family:var(--serif)}
.res{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.res dt{color:var(--text2)}
.warnbox{background:rgba(201,162,39,.08);border:1px solid #6b5a2a;border-left-width:3px;border-radius:var(--r);padding:8px 10px;font-size:12.5px;margin:7px 0}
.warnbox b{color:#e3c96a}
.smallcaps{font-size:11.5px;color:var(--text2)}
.info{position:relative;display:inline-block;margin-left:6px;font:400 14px/1 var(--sans);color:var(--text2);cursor:help;vertical-align:middle;opacity:.8}
.info:hover,.info:focus{opacity:1;outline:none}
#tipbox{position:fixed;z-index:200;max-width:min(380px,calc(100vw - 16px));padding:8px 10px;border:1px solid var(--line2);border-radius:6px;background:var(--sumi2);color:var(--text);font:400 12px/1.45 var(--sans);box-shadow:0 4px 14px rgba(0,0,0,.45);pointer-events:none}
#tipbox[hidden]{display:none}
#overlay{position:fixed;inset:0;background:rgba(8,6,5,.78);display:none;align-items:center;justify-content:center;z-index:50;
  padding:16px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#overlay.on{display:flex;animation:fadein .16s ease-out}
.kp{pointer-events:none}
.kp .kph{fill:#f3e3b0;fill-opacity:.04;stroke:#f3e3b0;stroke-width:1.2;stroke-dasharray:4,3;stroke-opacity:.5}
.kp .kpp{stroke:#2a2112;stroke-width:1.3;stroke-linecap:round}
.kp .kpf{fill:#f3e3b0;stroke:#2a2112;stroke-width:1}
.kp.hA .kph{fill:#e0584a;fill-opacity:.1;stroke:#e0584a;stroke-dasharray:none;stroke-width:1.4;stroke-opacity:.6}
.kp.hA .kpf{fill:#e0584a}
.kp.hS .kph{fill:#f2b84b;fill-opacity:.1;stroke:#f2b84b;stroke-dasharray:none;stroke-width:1.4;stroke-opacity:.6}
.kp.hS .kpf{fill:#f2b84b}
#ovbox{background:linear-gradient(180deg,#221d19,#1a1613);border:1px solid rgba(201,162,39,.55);border-radius:14px;
  padding:20px 24px;max-width:640px;max-height:84vh;overflow:auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 80px -20px #000;animation:popin .18s ease-out}
#ovbox > h2{font:600 19px/1.25 var(--serif);letter-spacing:.03em;color:var(--washi2);margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
#ovbox > h3{font-family:var(--serif);color:var(--washi2);margin:10px 0 6px}
/* formularz „Uwagi” (js/feedback.js) */
.fbform label{display:block;margin-top:10px}
.fbform label small{color:var(--text2);font-weight:400}
.fbform select,.fbform textarea,.fbform input[type=text]{display:block;width:100%;margin-top:4px}
.fbform textarea{resize:vertical;min-height:120px}
.fbform .fbcheck{display:flex;align-items:center;gap:8px}
.fbform .fbcheck input{width:auto;margin:0}
.fbform .fbtrap{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}
.fbform .fbdetails{margin-top:6px;font-size:12px}
.fbform .fbdetails pre{white-space:pre-wrap;word-break:break-word;margin:6px 0 0;opacity:.8}
.fbform .modestatus{margin-top:10px}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes popin{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}

/* ——— znak „Sengoku — bitwa”: krój i wykończenie zależą od stylu graficznego.
   Fonty są podzbiorami tylko ze znakami napisu (fonts/LICENSES.md); przeglądarka pobiera
   wyłącznie krój bieżącego stylu. ——— */
@font-face{font-family:"WM Laka";src:url(../../fonts/wm-laka-shipporiminchob1.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"WM Plansza";src:url(../../fonts/wm-plansza-reggaeone.woff2) format("woff2");font-display:swap}
@font-face{font-family:"WM Pergamin";src:url(../../fonts/wm-pergamin-zenantique.woff2) format("woff2");font-display:swap}
@font-face{font-family:"WM Tusz";src:url(../../fonts/wm-tusz-yujisyuku.woff2) format("woff2");font-display:swap}
@font-face{font-family:"WM Latarnie";src:url(../../fonts/wm-latarnie-pottaone.woff2) format("woff2");font-display:swap}
:root{--wm-font:"WM Laka",var(--serif);--wm-weight:600}
.brandtxt .wordmark,.modebrand.wordmark,.seal{font-family:var(--wm-font);font-synthesis:none}
.brandtxt .wordmark,.modebrand.wordmark{font-weight:var(--wm-weight);white-space:nowrap}
.wordmark b{font-weight:inherit}
/* Laka i washi: „Sengoku” złotem maki-e, „bitwa” cynobrową laką */
.wordmark .wm1{background:linear-gradient(180deg,#f7ead0,#e0bd6a 62%,#b98a2c);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .wm-dash{color:var(--shu);opacity:.85}
.wordmark .wm2{color:var(--shu-l)}

/* ——— wybór trybu i lobby online ——— */
.modegate{height:100vh;height:100dvh;min-height:0;overflow:auto;display:grid;place-items:center;padding:clamp(16px,5vw,56px);
  background:
    radial-gradient(ellipse at 50% 0,rgba(192,57,43,.22),transparent 60%),
    linear-gradient(180deg,rgba(19,17,15,.62),rgba(19,17,15,.93) 55%,var(--sumi)),
    url(../../samurai-duel.webp) center 30%/cover no-repeat,
    var(--sumi)}
.modebox{width:min(820px,100%);background:rgba(24,21,18,.84);border:1px solid rgba(233,226,211,.12);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:16px;padding:clamp(20px,5vw,44px);box-shadow:0 30px 90px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.06) inset;
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  animation:popin .25s ease-out}
.modebrand{font-family:var(--serif);font-size:clamp(28px,5vw,46px);color:var(--washi2);line-height:1.1;
  letter-spacing:.04em;margin-bottom:8px}.modebrand b{color:var(--shu-l);font-weight:600}
.modelead{color:var(--text2);margin:0 0 26px;font-size:15px}
.modelead b{color:var(--washi2)}
.modechoices{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.modecard{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;font-weight:400;min-height:150px;padding:20px 20px 18px;border-radius:12px;
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(233,226,211,.14);
  box-shadow:none;overflow:hidden;transition:transform .16s,border-color .16s,background-color .16s,box-shadow .16s}
.modecard:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(201,162,39,.65);
  background:linear-gradient(170deg,rgba(201,162,39,.12),rgba(255,255,255,.02));box-shadow:0 16px 30px -18px #000}
.modecard strong{display:block;font:600 20px/1.2 var(--serif);color:var(--washi2);margin-bottom:8px;letter-spacing:.02em}
.modecard span{display:block;color:var(--text2);font-size:13px;line-height:1.55}
.modecard.pri{font-weight:400;background:linear-gradient(170deg,rgba(201,162,39,.22),rgba(201,162,39,.05));border-color:rgba(201,162,39,.7);
  color:var(--text);box-shadow:0 18px 36px -22px rgba(201,162,39,.6)}
.modecard.pri:hover:not(:disabled){background:linear-gradient(170deg,rgba(201,162,39,.3),rgba(201,162,39,.08));border-color:var(--gold-l)}
.modecard.pri strong{color:var(--gold-l)}
.modecard.pri span{color:var(--text)}
.modeglyph{display:grid!important;place-items:center;width:40px;height:40px;margin-bottom:14px;border-radius:8px;
  font:700 22px/1 var(--serif)!important;color:#fbe9dc!important;background:linear-gradient(145deg,#d2493a,#9c2a1f);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.2) inset;transform:rotate(-3deg)}
.modecard:not(.pri) .modeglyph{background:linear-gradient(145deg,#3a322b,#28221d);color:var(--washi2)!important;
  box-shadow:0 0 0 1px rgba(233,226,211,.14),0 1px 0 rgba(255,255,255,.08) inset}
.themepick{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:22px;color:var(--text2);font-size:12.5px}
.themepick span{margin-right:4px}
.themepick button[aria-pressed="true"]{background:var(--gold-bg);border-color:rgba(201,162,39,.6);color:var(--gold-l)}
html[data-theme="plansza"] .themepick button[aria-pressed="true"]{background:linear-gradient(180deg,#255445,#1b3f34);border-color:var(--jade);color:var(--jade-l)}
.themebtn{white-space:nowrap}
.soundctl{display:flex;align-items:center;gap:6px}
.soundbtn{white-space:nowrap}
.soundvol{width:80px;accent-color:var(--gold)}
.soundvol:disabled{opacity:.35}
.modeline{height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent);margin:24px 0}
.modeactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}
.modefield{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.modefield input{flex:1 1 220px;min-width:0;text-transform:none;padding:7px 10px}
.duelcode{font:600 clamp(20px,5vw,30px) ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--gold-l);
  letter-spacing:.08em;margin:12px 0;padding:10px 14px;border:1px dashed rgba(201,162,39,.5);border-radius:var(--r2);
  background:rgba(201,162,39,.06);text-align:center}
.sharefield{display:flex;gap:7px}.sharefield input{flex:1;min-width:0;color:var(--washi2)}
.modestatus{padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--gold);background:rgba(15,13,12,.7);
  border-radius:var(--r);margin:14px 0}.modestatus.ok{border-left-color:var(--moss)}.modestatus.bad{border-left-color:var(--bad)}
.historylist{display:grid;gap:8px;margin:0 0 6px;padding:0;list-style:none}
.historylist .modecard{min-height:0;padding:14px 16px}
.historylist .modecard strong{font-size:16px;margin-bottom:4px}
.historylist li{padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02)}
.historylist li strong{display:block;color:var(--washi2);font-weight:600}
.historylist li span{color:var(--text2);font-size:12px}
.army-json-editor{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);background:#110f0d}
.army-json-editor summary{cursor:pointer;padding:8px 10px;color:var(--text2);user-select:none}
.army-json-editor[open] summary{border-bottom:1px solid var(--line)}
.army-json-editor textarea{display:block;border:0!important;border-radius:0!important;resize:vertical}
.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)}}
/* ——— poradnik: tekst do czytania na ekranie wyboru trybu (js/guide.js) ——— */
.guidebox{width:min(1080px,100%);text-align:left}
.guidetop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.guidetop .modebrand{margin-bottom:0}.guidetop .modeactions{margin-top:0}
.guidegrid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}
.guidetoc{position:sticky;top:0}
.guidetoc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.guidetoclink{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;border:1px solid transparent;box-shadow:none;
  padding:6px 8px;font-weight:400;font-size:13px;line-height:1.35;color:var(--text2)}
.guidetoclink:hover{color:var(--text);background:var(--gold-bg)}
.guidetoclink[aria-current]{color:var(--gold-l);border-color:rgba(201,162,39,.45);background:var(--gold-bg)}
.guidetocnum{flex:0 0 1.6em;text-align:right;font-variant-numeric:tabular-nums;opacity:.8}
.guidesel{display:none;width:100%;margin-bottom:14px}
.guidetext{min-width:0;font-size:15px;line-height:1.65;color:var(--text)}
.guidetext h2{font:600 clamp(22px,3.4vw,30px)/1.2 var(--serif);color:var(--washi2);margin:4px 0 8px}
.guidetext .modelead{margin-bottom:18px}
.guidesec{padding:16px 0;border-top:1px solid var(--line)}
.guidesec h3{font:600 18px/1.3 var(--serif);color:var(--washi2);margin:0 0 8px}
.guidesec p,.guidesec ul,.guidesec ol{margin:0 0 10px}
.guidesec ul,.guidesec ol{padding-left:22px}
.guidesec li{margin:3px 0}
.guidetbl{display:block;max-width:100%;overflow-x:auto;margin:8px 0 12px;font-size:13px}
.guidetbl th,.guidetbl td{text-align:center;padding:4px 8px;white-space:nowrap}
.guideplan{margin-top:10px;padding:10px 12px;border:1px dashed var(--line2);border-radius:var(--r);background:var(--gold-bg);font-size:13px;color:var(--text2)}
.guideplan b{color:var(--gold-l);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.guideplan ul{margin:4px 0 0;padding-left:18px}
.guidenav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:760px){.guidegrid{grid-template-columns:1fr}.guidetoc{display:none}.guidesel{display:block}}
@media(max-width:620px){.modechoices{grid-template-columns:1fr}.modecard{min-height:0}.modeglyph{width:34px;height:34px;font-size:18px!important;margin-bottom:10px}.sharefield{display:block}.sharefield button{margin-top:7px;width:100%}}

/* ——— samouczek: pasek dołożony na tym samym ekranie gry lokalnej ——— */
.tutorial-bar{flex:0 0 auto;border-top:2px solid var(--gold);background:linear-gradient(180deg,#221d17,#191512);
  padding:10px 16px;max-height:38vh;overflow:auto}
.tuthead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tuthead b{color:var(--gold-l);font-family:var(--serif);font-size:15px;letter-spacing:.03em}
.tutprogress{color:var(--text2);font-size:11.5px}
.tuthead .sp{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.tutbody h3{font:600 15px/1.3 var(--serif);color:var(--washi2);margin-bottom:4px}
.tuttext{font-size:12.5px;line-height:1.6;color:var(--text)}
.tuttext p{margin:0 0 6px}
.tuttext b{color:var(--washi2)}
.tuttip{border:1px solid rgba(201,162,39,.6);border-left-width:4px;background:rgba(201,162,39,.08);border-radius:var(--r);padding:8px 11px}
.tutnav{display:flex;gap:8px;align-items:center;margin-top:8px}
.tutpill{display:block;width:100%;text-align:left;background:var(--gold-bg);border:1px solid rgba(201,162,39,.6);
  border-radius:var(--r);padding:8px 12px;font-size:12.5px;color:var(--gold-l);cursor:pointer}
.tutpill:hover{background:rgba(201,162,39,.2)}
.tut-hl{outline:2px solid var(--gold);outline-offset:2px;box-shadow:0 0 0 6px rgba(201,162,39,.16);border-radius:var(--r)}

/* ==========================================================================
   Układ ekranów
   ========================================================================== */

/* ——— przyklejony pasek z główną akcją ekranu (scenariusz, armie) ——— */
.screenfoot{position:sticky;bottom:-16px;z-index:7;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  margin:16px -16px -16px;padding:11px 16px 13px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(19,17,15,.88),var(--sumi) 45%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.screenfoot .hint{margin:0}

/* ——— scenariusz: ustawienia bitwy po lewej, pogoda i teren po prawej ——— */
.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;align-items:start}
.setup-col{min-width:0}
.brief-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:1180px){.brief-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brief .bf{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.015)}
.brief .bk{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold-bg);border:1px solid rgba(201,162,39,.4);color:var(--gold-l);font:600 18px/1 var(--serif)}
.brief .bf b{display:block;font:600 13.5px/1.3 var(--sans);color:var(--washi)}
.brief .bf span:not(.bk){display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:var(--text2)}
@media(max-width:560px){.brief-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1180px){.setup-grid{grid-template-columns:minmax(0,1fr)}}

/* ——— armie: przełącznik stron z budżetem każdej z nich ——— */
.buildhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-bottom:12px}
.sidetabs{display:flex;gap:6px;flex-wrap:wrap}
.sidetab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:180px;padding:7px 14px 8px 12px;
  text-align:left;border-left-width:3px}
.sidetab.A{border-left-color:var(--shu)}.sidetab.O{border-left-color:var(--ai)}
.sidetab b{font:600 15px/1.2 var(--serif);letter-spacing:.02em;color:var(--washi2)}
.sidetab span{font-size:11.5px;color:var(--text2)}
.sidetab i{font-style:normal}.sidetab i.ok{color:#a6c493}.sidetab i.bad{color:#ea9a9a}
.sidetab.act{background:var(--sumi4);border-color:rgba(201,162,39,.6);border-left-color:currentColor;
  box-shadow:0 0 0 1px rgba(201,162,39,.35) inset}
.sidetab.A.act{border-left-color:var(--shu-l)}.sidetab.O.act{border-left-color:var(--ai-l)}
.buildtools{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
/* generator armii: kafelki profilu i jakości w oknie, podsumowanie wylosowanego składu */
.genopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin:0 0 6px}
.genopts.two{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.genopt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:8px 10px;text-align:left}
.genopt b{font:600 13.5px/1.25 var(--serif);letter-spacing:.02em}
.genopt span{font-size:11.5px;font-weight:400;line-height:1.35;color:var(--text2)}
.genopt.on span{color:rgba(15,22,12,.82)}
.genresult{margin-top:12px;padding:10px 12px;border:1px solid #4f6841;border-radius:var(--r);background:rgba(125,155,106,.1);font-size:12.5px;line-height:1.5}
.genresult ul{margin:5px 0 6px;padding-left:18px}

/* lista armii wypełnia całą wysokość panelu wyznaczoną przez cennik obok (contain:size — lista
   sama nie wydłuża wiersza siatki, tylko przewija się w tym, co dostała) */
.armypanel{display:flex;flex-direction:column}
.armypanel #armylist{flex:1 1 auto;max-height:none;min-height:260px;contain:size}
/* modyfikatory: grupy jako osobne bloki układane w kolumny */
.modpicked{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px}
.modgrid{columns:3 300px;column-gap:14px}
.modq{width:200px;margin-right:10px;padding:3px 8px;font-size:12px}
.modgroup[hidden],.modgroup .chk[hidden]{display:none}
.modgroup{break-inside:avoid;margin:0 0 14px;padding:8px 8px 6px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.015)}
.modgroup h3{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 4px;padding:0 4px 5px;
  border-bottom:1px solid var(--line);font:600 13.5px/1.3 var(--serif);letter-spacing:.03em;color:var(--washi2)}
.modgroup h3 span{font:600 11px var(--sans);color:var(--gold-l)}
.modgroup .chk{padding:5px 4px}
.modgroup .chk .cc{min-width:22px;text-align:center;padding:0 6px;border-radius:999px;background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.3);font-size:11.5px}

/* ——— rozstawienie: plansza i obok wszystko, co się na niej stawia ——— */
.deploy-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
.deploy-board{min-width:0}
.deploy-side{position:sticky;top:0;min-width:0}
.deploy-side .panel{margin-bottom:12px}
.deploy-side .pickrow button{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deploy-side #start{width:100%;padding:8px 12px}
.facegrid{display:inline-grid;grid-template-columns:repeat(6,minmax(36px,auto));gap:3px}
@media(min-width:861px) and (min-height:501px){
  #shell.scr-deploy #stage{container-type:size}
  .deploy-side{max-height:calc(100cqh - 32px);overflow:auto;padding-right:2px;overscroll-behavior:contain}
}
@media(max-width:1180px){.deploy-grid{grid-template-columns:minmax(0,1fr)}.deploy-side{position:static}}

/* ——— bitwa: jeden wąski pasek narzędzi nad planszą ——— */
.bt-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-bottom:8px}
.bt-toolbar{flex-direction:column;align-items:stretch;gap:6px}
.bt-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.bt-row.bt-view{justify-content:flex-start}
/* „Schowaj interfejs”: znika górny pasek i druga część paska planszy; przyciski akcji zostają */
#shell.scr-battle.hide-ui #topbar{display:none}
/* po schowaniu interfejsu z paska narzędzi zostaje sam przycisk „Pokaż interfejs”; pasek akcji tury zostaje cały */
#shell.scr-battle.hide-ui .bt-extras .zoombar,#shell.scr-battle.hide-ui .bt-right>:not(#uiToggle){display:none}
.bt-group{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.bt-toolbar .zoombar{margin:0;gap:3px}
.bt-toolbar .zoombar .hint,.bt-toolbar .zoombar>span:not(.viewswitch):not(.zval),.bt-toolbar [data-zoom="1"]{display:none}
.bt-toolbar #zoomr{display:none}
.deploy-board .zoombar .hint{display:none}
#shell.scr-battle #board{margin:0 auto}
.zval{display:inline-block;min-width:38px;text-align:center;font-size:12px;color:var(--text2)}
.bt-toolbar select.sm{padding:2px 6px;font-size:12px}
.bt-extras{justify-content:space-between}
.bt-right{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.bt-right select.sm{padding:3px 7px;font-size:12.5px}
.bt-toggles .tg{padding:3px 10px;font-size:12.5px}
/* przyciski akcji tury: osobny, mniejszy pasek pod paskiem narzędzi; ciemne tło i złota dolna krawędź odróżniają je od narzędzi widoku */
.bt-actionbar{align-self:flex-start;padding:5px 8px;border:1px solid var(--line2);border-radius:12px;background:var(--rail-bg);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.bt-actions{gap:6px}
.bt-actions button.act{padding:6px 12px;font:600 13px/1.1 var(--sans);letter-spacing:.01em;color:var(--washi);background:linear-gradient(180deg,var(--sumi3),var(--sumi2));border:1px solid var(--line2);border-bottom:2px solid var(--gold);border-radius:var(--r)}
.bt-actions button.act:hover:not(:disabled){background:linear-gradient(180deg,var(--sumi4),var(--sumi3));border-color:var(--gold)}
.bt-actions button.act:disabled{border-bottom-color:var(--line2);opacity:.5}
.bt-toggles{display:inline-flex;margin-left:4px}
.bt-toggles .tg{border-radius:0;margin-left:-1px}
.bt-toggles .tg:first-child{border-radius:var(--r) 0 0 var(--r);margin-left:0}
.bt-toggles .tg:last-child{border-radius:0 var(--r) var(--r) 0}
.tg[aria-pressed="true"],button.tg-on{background:rgba(201,162,39,.16);border-color:rgba(201,162,39,.6);color:var(--gold-l)}
.tg[aria-pressed="true"]:hover:not(:disabled),button.tg-on:hover:not(:disabled){background:rgba(201,162,39,.24)}

/* ——— bitwa: panel akcji w prawej kolumnie ——— */
#dock:empty{display:none}
#dock{flex:0 0 auto;overflow:auto;overscroll-behavior:contain}
#dock .actcol > :last-child{margin-bottom:0}
.actcol > .panel{padding:10px 12px;margin-bottom:8px}
.actcol .panel > h2{font-size:14px;margin-bottom:8px;padding-bottom:6px}
.actcol #turnflag{padding:8px 10px;margin-bottom:8px;gap:10px}
.actcol #turnflag .mon{width:30px;height:30px;font-size:14px}
.actcol #turnflag .who{font-size:14px}
.actcol .actbtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:6px 0}
.actcol .actbtns button{padding:5px 8px;font-size:13px;line-height:1.25}
.actcol .actbtns button.pri,.actcol .actbtns button:only-child{grid-column:1/-1}
.actcol .actbtns button.pri{padding:7px 10px}
.actcol #facepick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin:3px 0 4px}
.actcol #facepick button{width:auto;padding:2px 0}
.actcol .smallcaps{margin-top:6px}
.actcol .warnbox,.actcol .hint{font-size:12px}

.hpwidget{display:none;min-width:210px;padding:7px 10px;border:1px solid var(--line2);border-radius:12px;background:var(--rail-bg);box-shadow:0 6px 18px rgba(0,0,0,.3);font-size:12px}
.hpwidget .hpw-row{grid-template-columns:62px 1fr auto}
.hpw-name{color:var(--text2);font-weight:600;letter-spacing:.02em}
.hpw-row{display:grid;grid-template-columns:minmax(90px,1fr) auto;align-items:center;gap:8px;margin:4px 0 2px;width:100%;font-size:12px}
.hpw-bar{position:relative;height:9px;border-radius:5px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.hpw-bar i{display:block;height:100%;border-radius:5px;transition:width .3s}
.hpw-bar b{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--washi);opacity:.8}
.hpw-row.sA .hpw-bar i{background:var(--shu)}
.hpw-row.sO .hpw-bar i{background:var(--ai)}
.hpw-row.low .hpw-val{color:var(--warn);font-weight:700}
.hpw-val{min-width:44px;text-align:right;color:var(--text)}
.hpw-val small{color:var(--text2)}
/* ——— bitwa na szerokim ekranie: plansza wypełnia całe wolne miejsce ——— */
@media(min-width:861px) and (min-height:501px){
  #shell.scr-battle #topbar{padding:5px 14px;gap:6px 14px}
  #shell.scr-battle .brandtxt small{display:none}
  #shell.scr-battle .brandtxt .t{font-size:16px}
  #shell.scr-battle .seal{width:26px;height:26px;font-size:15px}
  #shell.scr-battle .step:not(.cur){padding:3px;font-size:0;gap:0}
  #shell.scr-battle .step:not(.cur)::before{font-size:10.5px}
  #shell.scr-battle #stage{display:flex;flex-direction:column;overflow:hidden;padding:8px 12px 10px}
  #shell.scr-battle .battlecols{flex:1 1 auto;min-height:0;align-items:stretch}
  #shell.scr-battle #boardwrap{flex:1 1 auto;min-height:0;overflow:auto;padding:8px}
  #shell.scr-battle .board3d-slot{margin:-8px;height:calc(100% + 16px)}
  #shell.scr-battle .board3d,#shell.scr-battle .board3d-loading{height:100%}
  /* panel akcji potrzebuje tej samej szerokości co wcześniej (280px treści), inaczej jego przyciski się zawijają */
  #shell.scr-battle #rail{flex-basis:292px;padding:6px;gap:6px}
  #shell.scr-battle #dock{max-height:52%}
  /* podgląd ma zawsze zostać widoczny — wysoki panel akcji (bitwa online) nie może go zgnieść */
  #shell.scr-battle #inspector{min-height:min(150px,30%);flex:0 1 auto;max-height:40%;overflow:auto}
  #shell.scr-battle #build-footer{display:none}
  /* podgląd i dziennik schowane — panel akcji dostaje całą kolumnę */
  #shell.scr-battle.hide-rail #inspector,#shell.scr-battle.hide-rail #log{display:none}
  #shell.scr-battle.hide-rail #dock{max-height:none;flex:1 1 auto}
  #shell.scr-battle.hide-rail #rail{flex-basis:272px}
}

/* ——— bitwa na szerokim ekranie: plansza na całe okno, panele unoszą się nad nią ———
   Pasek narzędzi (u góry), panel boczny z akcją, podglądem i dziennikiem (z prawej) i skład (u dołu)
   to zaokrąglone wyspy nad planszą; mogą ją lekko zasłaniać. Plansza 2D dopasowuje się do miejsca
   między nimi (--bt-h, --strip-h z battle-ui.js), widok 3D wypełnia całe pole. */
@media(min-width:861px) and (min-height:501px){
  #shell.scr-battle{position:relative}
  #shell.scr-battle #main{position:relative}
  #shell.scr-battle #stage{position:absolute;inset:0;padding:0;background:none}
  #shell.scr-battle .bt-toolbar{position:absolute;z-index:6;top:10px;left:10px;right:322px;margin:0;padding:7px 10px;
    border:1px solid var(--line2);border-radius:14px;background:var(--rail-bg);box-shadow:0 8px 24px rgba(0,0,0,.35)}
  #shell.scr-battle .bt-actionbar{position:absolute;z-index:6;top:calc(18px + var(--bt-tb,44px));left:10px;margin:0}
  #shell.scr-battle.hide-ui .bt-toolbar,#shell.scr-battle.hide-ui.hide-rail .bt-toolbar{left:auto;padding:5px 8px}
  #shell.scr-battle.hide-ui .bt-actionbar{top:10px}
  #shell.scr-battle.hide-strip .hpwidget{display:block;position:absolute;z-index:5;left:10px;bottom:20px}
  #shell.scr-battle .battlecols{position:absolute;inset:0}
  #shell.scr-battle #boardwrap{border:none;border-radius:0;height:100%;
    padding:calc(var(--bt-h,0px) + 20px) 312px calc(var(--strip-h,0px) + 20px) 10px}
  #shell.scr-battle #boardwrap.board3d-wrap,#shell.scr-battle #boardwrap:has(.board3d-slot){padding:0;overflow:hidden}
  #shell.scr-battle .board3d-slot{margin:0;height:100%}
  #shell.scr-battle .b3weather{top:calc(var(--bt-h,0px) + 20px);left:14px}
  #shell.scr-battle #rail{position:absolute;z-index:7;top:10px;right:10px;bottom:10px;width:292px;
    border:1px solid var(--line2);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.4);overflow:hidden}
  #shell.scr-battle.hide-rail #rail{bottom:auto;max-height:calc(100% - 20px);width:272px}
  #shell.scr-battle #strip{position:absolute;z-index:6;left:10px;right:322px;bottom:10px;
    border:1px solid var(--line2);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.35);max-height:30vh}
  #shell.scr-battle.hide-rail #strip,#shell.scr-battle.hide-rail .bt-toolbar{right:302px}
}

/* ——— rozstawienie na szerokim ekranie: plansza na całe okno, teren i rozstawienie jako wyspy ——— */
@media(min-width:861px) and (min-height:501px){
  #shell.scr-deploy #main{position:relative}
  #shell.scr-deploy #stage{position:absolute;inset:0;padding:0;overflow:hidden;background:none}
  #shell.scr-deploy .dep-top{position:absolute;z-index:6;top:10px;left:10px;right:392px;max-height:42%;overflow:auto;padding:8px 10px;
    border:1px solid var(--line2);border-radius:14px;background:var(--rail-bg);box-shadow:0 8px 24px rgba(0,0,0,.35)}
  #shell.scr-deploy .dep-top .backbar{margin:0 0 6px}
  #shell.scr-deploy .dep-top .panel{margin:0 0 6px;padding:8px 10px}
  #shell.scr-deploy .dep-top .zoombar{margin:0}
  #shell.scr-deploy .deploy-grid{position:absolute;inset:0;display:block}
  #shell.scr-deploy .deploy-board{position:absolute;inset:0}
  #shell.scr-deploy #boardwrap{height:100%;overflow:auto;border:none;border-radius:0;
    padding:calc(var(--bt-h,0px) + 20px) 392px 10px 10px}
  #shell.scr-deploy #boardwrap.board3d-wrap,#shell.scr-deploy #boardwrap:has(.board3d-slot){padding:0;overflow:hidden}
  #shell.scr-deploy .board3d-slot{margin:0;height:100%}
  #shell.scr-deploy .board3d,#shell.scr-deploy .board3d-loading{height:100%}
  #shell.scr-deploy .b3weather{top:calc(var(--bt-h,0px) + 20px);left:14px}
  #shell.scr-deploy .deploy-side{position:absolute;z-index:7;top:10px;right:10px;bottom:10px;width:372px;max-height:none;overflow:auto;padding:8px;
    border:1px solid var(--line2);border-radius:14px;background:var(--rail-bg);box-shadow:0 8px 24px rgba(0,0,0,.4)}
  #shell.scr-deploy .deploy-side .panel:last-child{margin-bottom:0}
}

/* ——— bitwa: zwarty pasek składu — jeden rząd kart na stronę, opis strony z boku ——— */
#shell.scr-battle #strip{padding:6px 10px}
#shell.scr-battle .stripside{display:grid;grid-template-columns:128px minmax(0,1fr);gap:10px;align-items:center}
#shell.scr-battle .stripside + .stripside{margin-top:5px}
#shell.scr-battle .striphead{flex-direction:column;align-items:flex-start;gap:0;margin:0;font-size:11px;line-height:1.35;flex-wrap:nowrap}
#shell.scr-battle .striphead b:first-child{font-size:13.5px}
#shell.scr-battle .striphead span b{color:var(--washi)}
#shell.scr-battle .striphead .hpw-row{grid-template-columns:1fr;gap:2px;margin:3px 0 0}
#shell.scr-battle .striphead .actleft{font-size:11px;margin-top:3px}
#shell.scr-battle .striphead .hpw-val{order:-1;text-align:left;min-width:0}
#shell.scr-battle .cards,#shell.scr-deploy .cards,#shell.scr-build .cards{flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:2px}
#shell.scr-deploy .ucard,#shell.scr-build .ucard{flex:0 0 auto}
#shell.scr-battle .ucard{flex:0 0 116px;width:116px;padding:3px 6px 4px}
#shell.scr-battle .ucard:hover{transform:none}

/* ——— węższe monitory: nieaktywne kroki skracają się do numeru ——— */
@media(max-width:1520px){
  .step:not(.cur){padding:3px;font-size:0;gap:0}
  .step:not(.cur)::before{font-size:10.5px}
  .brandtxt small{display:none}
}

/* ——— widok telefonu: panel boczny, pasek jednostek, budżet armii i okno
   aktywacji stają się ukrywalne, żeby zostawić miejsce na planszę. Powyżej
   progu wygląd aplikacji się nie zmienia. ——— */
@media(max-width:860px),(max-height:500px){
  body{overflow:auto}
  #shell{height:auto;min-height:100vh}
  #topbar{flex-wrap:wrap;row-gap:6px;padding:8px 10px}
  #topinfo{margin-left:0;justify-content:flex-start}
  .viewtoggle{margin-left:auto;width:100%}
  .viewtoggle button{font-size:11px;padding:3px 7px}
  .viewtoggle .vt-mobile{display:inline-block}
  .soundvol{display:none}   /* na telefonie głośność ustawia się przyciskami urządzenia */
  #main{flex-direction:column;min-height:0}
  #stage{padding:8px}
  #rail{flex:0 0 auto;width:100%;border-left:none;border-top:1px solid var(--line)}
  #inspector{min-height:0}
  #log{max-height:32vh}
  #shell.hide-rail #inspector,#shell.hide-rail #log{display:none}
  #shell.hide-strip #strip{display:none}
  #shell.hide-budget #topinfo .pill.budget{display:none}
  .battlecols{flex-direction:column}
  .battlecols .board3d-wrap{align-self:stretch}
  #shell.hide-actcol #dock{display:none}
  .deploy-grid,.setup-grid{grid-template-columns:minmax(0,1fr)!important}
  .deploy-side{position:static!important;max-height:none!important}
  .screenfoot{margin:14px -8px -8px!important;bottom:-8px!important;padding:10px 8px!important}
  .col2,.col3{grid-template-columns:minmax(0,1fr)}
  .tblwrap{overflow-x:auto}   /* cennik jest szerszy od ekranu: przewija się w swoim panelu, panel ma szerokość pozostałych */
  .panel{padding:12px}
  .tutorial-bar{position:sticky;bottom:0;z-index:20;max-height:46vh;box-shadow:0 -8px 16px -6px rgba(0,0,0,.85)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* Powtórka bitwy (js/replay.js): pasek odtwarzacza nad planszą */
.replaybar{padding:8px 12px;margin-bottom:8px}
.replaybar .rp-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.replaybar .rp-right{margin-left:auto;display:flex;gap:6px}
.replaybar .rp-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.replaybar .rp-play{min-width:92px}
.replaybar #rpSlider{flex:1 1 180px;min-width:120px}
.replaybar .rp-pos{font-size:12px;opacity:.85;white-space:nowrap}
.replaybar .rp-log{margin-top:6px;font-size:12.5px;line-height:1.4;height:5.8em;overflow:auto}   /* stała wysokość: liczba wpisów kroku nie przesuwa planszy */
/* okienko ze statystykami oddziału pod kursorem: po prawej stronie planszy, nie przechwytuje myszy */
.battlecols.rp-cols{position:relative}
.rp-unit{position:absolute;z-index:5;top:8px;right:8px;width:280px;max-width:calc(100% - 16px);max-height:calc(100% - 16px);overflow:hidden;
  padding:10px 12px 11px;font-size:12.5px;pointer-events:none;
  background:var(--sheet);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.rp-unit[hidden]{display:none}
.rp-unit[data-side]::before{content:"";position:absolute;left:12px;right:12px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--shu)}
.rp-unit[data-side="O"]::before{background:var(--ai)}
.rp-unit .ihead{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--sheet-line);padding-bottom:7px;margin-bottom:8px}
.rp-unit .iname{min-width:0;font:600 14.5px/1.25 var(--serif);color:var(--washi2);letter-spacing:.02em}
.rp-unit .icost{flex:0 1 auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;
  color:var(--gold-l);background:var(--gold-bg);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.rp-unit .note{line-height:1.45}
.rp-unit .tag{padding:0 7px;font-size:11px;line-height:1.6}
.rp-unit .pdesc{margin:5px 0 0;font-size:11.5px;line-height:1.45;color:var(--text2)}
.rp-unit .pdesc .tag{margin:0 5px 0 0;vertical-align:1px}
.rp-unit .rp-gen{margin-top:9px;padding-top:7px;border-top:1px solid var(--sheet-line);color:var(--text)}
@media(max-width:900px){.rp-unit{width:230px}}
.modereplay{justify-content:center}
#shell.scr-replay #strip{display:none}   /* skład pod planszą pokazuje stan gry, nie klatkę powtórki */

/* komunikat testu armii (js/battle-notice.js) — nad planszą, bez blokowania kliknięć */
.battlenotice{position:fixed;left:50%;top:84px;transform:translate(-50%,-8px);z-index:45;pointer-events:none;
  min-width:260px;max-width:min(440px,calc(100vw - 32px));padding:12px 18px 13px;text-align:center;
  background:linear-gradient(180deg,var(--sumi3),var(--sumi2));border:1px solid var(--line2);border-top:3px solid var(--gold);
  border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.55);color:var(--text);opacity:0;transition:opacity .18s,transform .18s}
.battlenotice.on{opacity:1;transform:translate(-50%,0)}
.battlenotice.ok{border-top-color:var(--moss)}
.battlenotice.bad{border-top-color:var(--bad)}
.battlenotice .bn-title{font-weight:700;letter-spacing:.02em}
.battlenotice .bn-roll{margin-top:6px;font-size:15px;color:var(--text2);font-variant-numeric:tabular-nums}
.battlenotice .bn-dice{font-size:24px;line-height:1;margin-right:10px;color:var(--text);vertical-align:-3px;letter-spacing:2px}
.battlenotice .bn-result{margin-top:6px;font-weight:700}
.battlenotice.ok .bn-result{color:var(--moss)}
.battlenotice.bad .bn-result{color:var(--shu-l)}
@media (prefers-reduced-motion:reduce){.battlenotice{transition:none}}

/* ——— ukryte drobiazgi (js/setna.js): napis w rogu, linijka setnej bitwy, „Rok 1600” ——— */
.setna-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,8px);z-index:46;display:flex;align-items:center;gap:12px;max-width:min(92vw,460px);
  padding:10px 16px 10px 12px;border-radius:12px;background:#17120ef0;border:1px solid #ffffff26;color:#f2ece0;font-size:14px;line-height:1.35;
  box-shadow:0 8px 28px #0008;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.setna-toast.on{opacity:1;transform:translate(-50%,0)}
.setna-toast .st-mark{flex:none;display:grid;place-items:center;min-width:40px;height:40px;padding:0 6px;border-radius:6px;background:#a8321f;color:#f7e9d4;
  font:700 22px/1 "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.05em}
.setna-line{margin-top:8px;font-style:italic}
.setna-line span{display:inline-block;margin-right:6px;padding:0 5px;border-radius:3px;background:#a8321f;color:#f7e9d4;font-style:normal;font-weight:700}
/* Rok 1600: cała strona w tuszu i papierze — filtr obrazu (plansza 2D, canvas 3D, panele), nic poza wyglądem */
html[data-rok="1600"]{filter:grayscale(1) sepia(.55) contrast(1.06) brightness(1.03)}
html[data-rok="1600"] body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,#3c28144d 100%);mix-blend-mode:multiply}

/* ——— rozstawienie: strony, akcje i oddziały wyglądają inaczej ——— */
.dep-sides .sidetab{min-width:150px;padding:6px 12px 7px 10px}
.dep-sides .sidetab:disabled{opacity:.5;cursor:not-allowed}
.dep-actions{display:inline-flex;gap:6px;flex-wrap:wrap}
button.dep-act{padding:5px 12px;font-size:12.5px;font-weight:600;letter-spacing:.02em;border-radius:999px;background:transparent;
  border:1px solid rgba(201,162,39,.7);color:var(--gold-l)}
button.dep-act:hover:not(:disabled){background:rgba(201,162,39,.16)}
button.dep-act.dep-clear{border-color:#94404b;color:#ea9a9a}
button.dep-act.dep-clear:hover:not(:disabled){background:rgba(148,64,75,.22)}
.unitchip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;font-size:12px;border-radius:3px;
  background:rgba(255,255,255,.04);border:1px solid var(--line2);border-left:4px solid var(--text2);color:var(--text)}
.unitchip.A{border-left-color:var(--shu-l)}.unitchip.O{border-left-color:var(--ai-l)}
.unitchip .chipmark{font-style:normal;font-size:11px;opacity:.8}
.unitchip.placed{opacity:.55}.unitchip.placed .chipmark{color:#a6c493;opacity:1}
.unitchip.sel{opacity:1;background:rgba(201,162,39,.18);border-color:rgba(201,162,39,.7);box-shadow:0 0 0 2px rgba(201,162,39,.25)}
.unitchip:hover:not(:disabled){background:rgba(255,255,255,.09)}
.facegrid button{min-width:36px;border-radius:50%;padding:3px 0}

/* Znaczniki (pings.js): prywatne chorągiewki gracza na planszy online */
.pingbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}
.pingbar .hint{flex-basis:100%;margin:0}
.pingpanel{margin-bottom:8px}.pingpanel .pingbar{margin-top:0}
button.pingsw{width:22px;height:22px;padding:0;border-radius:50%;background:var(--pc);border:2px solid rgba(0,0,0,.45);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;cursor:pointer}
button.pingsw.on{outline:2px solid var(--accent,#e8dcc0);outline-offset:2px}

/* okienko z rzutami (js/roll-panel.js): po prawej stronie bitwy, na lewo od panelu bocznego; na telefonie w rogu ekranu */
#rollpanel{position:absolute;z-index:44;top:calc(var(--bt-tb,var(--bt-h,0px)) + 20px);right:322px;width:262px;max-width:calc(100% - 24px);display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--sheet) 94%,transparent);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:0 10px 28px rgba(0,0,0,.5);
  font-size:12px;color:var(--text)}
#rollpanel[hidden]{display:none}
#shell.hide-rail #rollpanel{right:302px}
#rollpanel.closed{width:auto;background:none;border:0;box-shadow:none}
#rollpanel .rp-bar{display:flex;align-items:center;gap:6px;padding:6px 8px 5px;border-bottom:1px solid var(--sheet-line)}
#rollpanel.min .rp-bar{border-bottom:0}
#rollpanel .rp-bar b{flex:0 0 auto}
#rollpanel .rp-n{flex:1 1 auto;font-size:11px;color:var(--text2)}
#rollpanel .rp-bar button{padding:0 7px;line-height:1.5}
#rollpanel .rp-list{max-height:min(52vh,460px);overflow:auto;padding:4px 6px 6px}
#rollpanel .hint{padding:6px 4px}
#rollpanel .rr{margin:4px 0;padding:5px 8px 6px;border-radius:7px;background:var(--stat);border-left:3px solid var(--line2)}
#rollpanel .rr.sA{border-left-color:var(--shu)}
#rollpanel .rr.sO{border-left-color:var(--ai)}
#rollpanel .rr.fresh{animation:rrfresh 1.2s ease-out}
@keyframes rrfresh{from{background:var(--gold-bg)}}
#rollpanel .rr-title{font-weight:600;line-height:1.3}
#rollpanel .rr-sub{font-weight:400;color:var(--text2);font-size:11px}
#rollpanel .rr-roll{margin-top:2px;font-variant-numeric:tabular-nums;color:var(--text2)}
#rollpanel .rr-dice{font-size:21px;line-height:1;margin-right:8px;color:var(--text);vertical-align:-3px;letter-spacing:2px}
#rollpanel .rr-calc b{color:var(--text);font-size:14px}
#rollpanel .rr-parts,#rollpanel .rr-need{margin-top:2px;font-size:11px;line-height:1.35;color:var(--text2)}
#rollpanel .rr-need{opacity:.8}
#rollpanel .rr-res{margin-top:3px;font-weight:700}
#rollpanel .rr.ok .rr-res{color:var(--moss)}
#rollpanel .rr.bad .rr-res{color:var(--shu-l)}
@media(max-width:860px),(max-height:500px){#rollpanel,#shell.hide-rail #rollpanel{position:fixed;top:auto;bottom:8px;right:8px;width:min(262px,calc(100% - 16px))}
  #rollpanel .rp-list{max-height:32vh}}
@media (prefers-reduced-motion:reduce){#rollpanel .rr.fresh{animation:none}}

[data-mode-section][hidden]{display:none}
/* Pożar w oblężeniu (§19.6a), plansza SVG: poświata pola, język ognia z dymem, podpis magazynu */
.fireglow{fill:#ff6a1a;fill-opacity:.28;stroke:#ffb000;stroke-width:2;stroke-opacity:.85}
.fire2d .flame{transform-box:fill-box;transform-origin:50% 100%;animation:fire2dFlick .8s ease-in-out infinite alternate}
.fire2d .smoke{fill:#4a4440;fill-opacity:.5;animation:fire2dSmoke 2.4s ease-in-out infinite}
.fire2d .smoke.s2{fill-opacity:.34;animation-delay:-1.2s}
@keyframes fire2dFlick{from{transform:scale(1,1)}to{transform:scale(.9,1.08)}}
@keyframes fire2dSmoke{from{transform:translateY(0);opacity:1}to{transform:translateY(-5px);opacity:.35}}
.storelbl{font-size:9px;font-weight:700;fill:#fbefc6;stroke:#2a1a10;stroke-width:2.6px;paint-order:stroke;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.fire2d .flame,.fire2d .smoke{animation:none}}
.hint>.info:only-child{margin-left:0}