/* ==========================================================================
   Styl „Gra planszowa” — włączany atrybutem <html data-theme="plansza">.
   Pudełko gry rozłożone na ciemnym stole: panele to kafelki z grubej tektury
   z nadrukowaną złotą ramką, przyciski to żetony, które się wciska, karty
   oddziałów to karty do gry, plansza leży w drewnianej ramie. Tonacja ciemna,
   akcenty złote i jadeitowe. Kolory stron (--shu, --ai) i kolory heksów są
   wspólne z rendererem planszy — tych tu nie zmieniamy.
   ========================================================================== */
html[data-theme="plansza"]{
  --sumi:#0c1210;          /* stół — ciemny filc */
  --sumi2:#16201c;         /* kafelek */
  --sumi3:#1e2a25;
  --sumi4:#27362f;
  --line:#2d3b34;
  --line2:#46584d;
  --washi2:#eadcb8;
  --text:#ebe3cd;
  --text2:#9db0a4;
  --ink:#080d0b;
  --gold:#d4af37;
  --gold-l:#ecd07a;
  --gold-bg:rgba(212,175,55,.13);
  --jade:#46b08c;
  --jade-l:#86dcbc;
  --jade-d:#1d5a47;
  --moss:#46b08c;
  --hover:#1b2621;
  --r:8px;
  --r2:14px;
  --tile:0 0 0 1px #0a0f0d,inset 0 0 0 4px #141d19,inset 0 0 0 5px rgba(212,175,55,.32),0 5px 0 #070b09,0 16px 28px -14px #000;
  /* prawa kolumna: karta podglądu jak kafelek z nadrukowaną ramką, statystyki jak żetony na pasku */
  --sheet:linear-gradient(180deg,#18231e,#131c18);
  --sheet-line:#0a0f0d;
  --sheet-shadow:var(--tile);
  --well:rgba(0,0,0,.28);
  --well-line:rgba(157,176,164,.08);
  --stat:radial-gradient(circle at 50% 30%,#f3ead3,#dccfae);
  --stat-line:#1a140a;
  --stat-up:radial-gradient(circle at 50% 30%,#dcf5ea,#a9dcc6);
  --stat-up-v:#0f4535;
  --card:linear-gradient(180deg,#1d2924,#141d19);
  --card-hover:linear-gradient(180deg,#24332c,#18231e);
  --felt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .7 0 0 0 0 .6 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");
}
html[data-theme="plansza"] body{background:var(--felt),radial-gradient(ellipse at 50% -10%,#16251f,var(--sumi) 70%) fixed;background-color:var(--sumi)}
html[data-theme="plansza"] ::selection{background:rgba(70,176,140,.4)}
html[data-theme="plansza"] *{scrollbar-color:#35463e transparent}
html[data-theme="plansza"] ::-webkit-scrollbar-thumb{background:#35463e;background-clip:padding-box}

/* ——— żetony: przyciski mają grubość i wciskają się ——— */
html[data-theme="plansza"] button{background:linear-gradient(180deg,#2b3b34,#1f2b26);border:1px solid #4d6155;border-radius:var(--r);
  box-shadow:0 3px 0 #06100c,inset 0 1px 0 rgba(255,255,255,.09);transition:transform .08s,box-shadow .08s,background-color .15s,border-color .15s}
html[data-theme="plansza"] button:hover:not(:disabled){background:linear-gradient(180deg,#33463d,#25332d);border-color:#6a8273}
html[data-theme="plansza"] button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #06100c,inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme="plansza"] button.sm{box-shadow:0 2px 0 #06100c,inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="plansza"] button.sm:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 #06100c}
html[data-theme="plansza"] button:disabled{box-shadow:none}
html[data-theme="plansza"] button.pri{background:radial-gradient(ellipse at 50% 0,#f5dc8a,#d4af37 55%,#b08a1c);color:#1d1604;border-color:#f0d57a;
  box-shadow:0 3px 0 #6e5410,0 8px 18px -8px rgba(212,175,55,.55),inset 0 1px 0 rgba(255,255,255,.45);text-shadow:0 1px 0 rgba(255,255,255,.35)}
html[data-theme="plansza"] button.pri:hover:not(:disabled){background:radial-gradient(ellipse at 50% 0,#fae59c,#dcb943 55%,#b8921f);border-color:#f7df8c}
html[data-theme="plansza"] button.pri:active:not(:disabled){box-shadow:0 1px 0 #6e5410,inset 0 1px 0 rgba(255,255,255,.35)}
html[data-theme="plansza"] button.on{background:radial-gradient(ellipse at 50% 0,#8fe3c3,#46b08c 60%,#2f8a6b);color:#04140e;border-color:#9ae6c8;
  box-shadow:0 2px 0 #134133,inset 0 1px 0 rgba(255,255,255,.4)}
html[data-theme="plansza"] button.on:hover:not(:disabled){background:radial-gradient(ellipse at 50% 0,#a0ebcf,#52bd98 60%,#359473)}
html[data-theme="plansza"] button.danger{background:linear-gradient(180deg,#6d2a2f,#4e1c21);border-color:#9a454d;box-shadow:0 3px 0 #230a0d}
html[data-theme="plansza"] input,html[data-theme="plansza"] select,html[data-theme="plansza"] textarea{background:var(--ink);border-color:#3c4d44;box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
html[data-theme="plansza"] input:focus,html[data-theme="plansza"] select:focus,html[data-theme="plansza"] textarea:focus{border-color:var(--jade);box-shadow:inset 0 2px 3px rgba(0,0,0,.5),0 0 0 3px rgba(70,176,140,.2)}
html[data-theme="plansza"] button:focus-visible,html[data-theme="plansza"] input:focus-visible,
html[data-theme="plansza"] select:focus-visible,html[data-theme="plansza"] summary:focus-visible{outline-color:var(--jade-l)}
html[data-theme="plansza"] input[type=checkbox],html[data-theme="plansza"] input[type=radio],html[data-theme="plansza"] input[type=range]{accent-color:var(--jade)}
/* przełączniki: wciśnięty = jadeitowy żeton */
html[data-theme="plansza"] .tg[aria-pressed="true"],html[data-theme="plansza"] button.tg-on,
html[data-theme="plansza"] .viewtoggle button[aria-pressed="true"]{background:linear-gradient(180deg,#255445,#1b3f34);border-color:var(--jade);color:var(--jade-l);
  box-shadow:0 1px 0 #06100c,inset 0 2px 4px rgba(0,0,0,.45);transform:translateY(1px)}
html[data-theme="plansza"] .viewswitch button.on{background:radial-gradient(ellipse at 50% 0,#f5dc8a,#d4af37 55%,#b08a1c);color:#1d1604;border-color:#f0d57a}

/* ——— pasek górny: krawędź pudełka ——— */
html[data-theme="plansza"] #topbar{background:linear-gradient(180deg,#1a2621,#111a16);border-bottom:1px solid #0a0f0d;
  box-shadow:0 1px 0 rgba(212,175,55,.35),0 3px 0 #0a0f0d,0 10px 22px -12px #000}
html[data-theme="plansza"] .seal{border-radius:50%;transform:none;background:radial-gradient(circle at 35% 30%,#e0584a,#a3281d 70%);
  box-shadow:0 0 0 2px #d4af37,0 0 0 3px #0a0f0d,0 2px 0 3px #06100c}
/* kroki jak tor na planszy */
html[data-theme="plansza"] .step::before{background:#0f1714;border:2px solid #3e5047;box-shadow:0 2px 0 #06100c}
html[data-theme="plansza"] .step.done{color:var(--jade-l)}
html[data-theme="plansza"] .step.done::before{background:radial-gradient(circle at 40% 30%,#86dcbc,#2f8a6b);border-color:#9ae6c8;color:#04140e}
html[data-theme="plansza"] .step.cur{color:var(--gold-l);background:rgba(212,175,55,.1);box-shadow:inset 0 0 0 1px rgba(212,175,55,.45)}
html[data-theme="plansza"] .step.cur::before{background:radial-gradient(circle at 40% 30%,#f5dc8a,#c9a02b);border-color:#f0d57a;color:#1d1604}
html[data-theme="plansza"] .pill{background:#111a16;border-color:#3e5047;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
html[data-theme="plansza"] .pill.budget{border-color:rgba(212,175,55,.55);color:var(--gold-l)}

/* ——— kafelki paneli z nadrukowaną ramką ——— */
html[data-theme="plansza"] #stage{background:none}
html[data-theme="plansza"] .panel{background:linear-gradient(180deg,#18231e,#131c18);border:none;border-radius:var(--r2);
  padding:16px 18px;margin-bottom:18px;box-shadow:var(--tile)}
html[data-theme="plansza"] .panel > h2{justify-content:flex-start;background:none;padding:0 0 9px;border-bottom:1px dashed rgba(212,175,55,.3);
  font-variant:small-caps;letter-spacing:.1em;font-size:16px;color:var(--gold-l)}
html[data-theme="plansza"] .panel > h2::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:2px;transform:rotate(45deg);
  background:linear-gradient(135deg,#86dcbc,#2f8a6b);box-shadow:0 0 0 1px #0a0f0d}
html[data-theme="plansza"] .panel > h2 > span{margin-left:auto;font-variant:normal}
html[data-theme="plansza"] .panel > h2 > span ~ span{margin-left:0}
html[data-theme="plansza"] .panel.sticky{box-shadow:var(--tile),0 14px 24px -10px #000}
html[data-theme="plansza"] .warnbox{background:rgba(212,175,55,.08);border-color:#6f5d25}
html[data-theme="plansza"] .money,html[data-theme="plansza"] .chk .cc{color:var(--gold-l)}
html[data-theme="plansza"] .budgetbar{height:10px;background:#0a110e;box-shadow:inset 0 1px 3px #000,0 0 0 1px #2d3b34}
html[data-theme="plansza"] .budgetbar i{background:linear-gradient(90deg,#2f8a6b,var(--jade) 50%,var(--gold));
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 16px);mask:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 16px)}
html[data-theme="plansza"] table.tbl th{color:var(--jade-l);font-variant:small-caps;letter-spacing:.06em}
html[data-theme="plansza"] table.tbl td{border-bottom-color:#1f2b26}
html[data-theme="plansza"] .chk.on{background:rgba(70,176,140,.12);border-color:rgba(70,176,140,.55)}
html[data-theme="plansza"] .tag{background:#101814;border-color:#3e5047}
html[data-theme="plansza"] .tag.sk{border-color:#7a6528;color:var(--gold-l);background:rgba(212,175,55,.08)}
html[data-theme="plansza"] .tag.bo{border-color:#2f7a60;color:var(--jade-l);background:rgba(70,176,140,.1)}
html[data-theme="plansza"] .screenfoot{background:linear-gradient(180deg,rgba(12,18,16,.85),#0c1210 45%);border-top:1px solid rgba(212,175,55,.3)}

/* ——— statystyki jako nadrukowany pasek żetonów ——— */
html[data-theme="plansza"] .statgrid{box-shadow:0 2px 0 #06100c}
html[data-theme="plansza"] .statgrid .k{color:#6b6048;font-weight:700}
html[data-theme="plansza"] .statgrid .v{color:#1c170c}
html[data-theme="plansza"] #inspector,html[data-theme="plansza"] #unitpop{padding:12px 14px}
html[data-theme="plansza"] #inspector .ihead,html[data-theme="plansza"] #unitpop .ihead{border-bottom:1px dashed rgba(212,175,55,.3)}
html[data-theme="plansza"] #inspector .iname,html[data-theme="plansza"] #unitpop .iname{font-variant:small-caps;letter-spacing:.05em;color:var(--gold-l)}
html[data-theme="plansza"] .uchip{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px #0a0f0d,0 0 0 2px rgba(212,175,55,.45)}

/* ——— karty oddziałów jak karty do gry ——— */
html[data-theme="plansza"] .ucard{border:1px solid #3a4b42;border-radius:9px;box-shadow:0 3px 0 #06100c,inset 0 0 0 1px rgba(212,175,55,.12)}
html[data-theme="plansza"] .ucard:hover{border-color:#557064;box-shadow:0 4px 0 #06100c}
html[data-theme="plansza"] .ucard.sel{border-color:var(--gold);box-shadow:0 3px 0 #06100c,0 0 0 1px var(--gold),0 0 0 5px rgba(212,175,55,.18)}
html[data-theme="plansza"] .hpbar{height:6px;border-radius:2px;background:#0a110e;box-shadow:inset 0 1px 2px #000}
html[data-theme="plansza"] .hpbar i{border-radius:0;background:linear-gradient(180deg,#86dcbc,#2f8a6b);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 11px);mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 11px)}
html[data-theme="plansza"] .hpbar.low i{background:linear-gradient(180deg,#f0c060,#c98a1c)}
html[data-theme="plansza"] .hpbar.crit i{background:linear-gradient(180deg,#f08a7a,#b23a48)}
html[data-theme="plansza"] #strip,html[data-theme="plansza"] #rail,html[data-theme="plansza"] #build-footer{background:rgba(8,13,11,.72)}
html[data-theme="plansza"] .sidetab{border-left-width:1px;border-top:4px solid}
html[data-theme="plansza"] .sidetab.A{border-top-color:var(--shu)}html[data-theme="plansza"] .sidetab.O{border-top-color:var(--ai)}
html[data-theme="plansza"] .sidetab.act{background:linear-gradient(180deg,#2a3b33,#1e2b25);border-color:var(--gold);box-shadow:0 1px 0 #06100c,inset 0 0 0 1px rgba(212,175,55,.35)}
html[data-theme="plansza"] .sidetab b{font-variant:small-caps;letter-spacing:.06em}
html[data-theme="plansza"] .modgroup{background:#111a16;border:1px solid #2f3e36;border-radius:10px;box-shadow:inset 0 0 0 3px #111a16,inset 0 0 0 4px rgba(70,176,140,.18)}
html[data-theme="plansza"] .modgroup h3{color:var(--jade-l);font-variant:small-caps;letter-spacing:.08em;border-bottom-style:dashed}
html[data-theme="plansza"] .modgroup .chk .cc{border-radius:50%;min-width:22px;height:22px;display:grid;place-items:center;padding:0;
  background:radial-gradient(circle at 40% 30%,#f5dc8a,#c9a02b);border-color:#6e5410;color:#1d1604;font-weight:700;box-shadow:0 1px 0 #06100c}

/* ——— bitwa: znacznik tury i plansza w drewnianej ramie ——— */
html[data-theme="plansza"] #turnflag{border:none;border-radius:12px;box-shadow:var(--tile);border-top:5px solid var(--gold)}
html[data-theme="plansza"] #turnflag.A{border-top-color:var(--shu);background:linear-gradient(180deg,rgba(192,57,43,.22),#16201c 75%)}
html[data-theme="plansza"] #turnflag.O{border-top-color:var(--ai);background:linear-gradient(180deg,rgba(63,110,168,.24),#16201c 75%)}
html[data-theme="plansza"] #turnflag .mon{box-shadow:0 0 0 2px var(--gold),0 0 0 3px #0a0f0d,0 3px 0 3px #06100c}
html[data-theme="plansza"] #turnflag .who{font-variant:small-caps;letter-spacing:.05em}
html[data-theme="plansza"] #boardwrap{background:var(--felt),radial-gradient(ellipse at center,#1b2a24,#0b120f 80%);
  border:9px solid #3a2a1c;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.5),inset 0 0 22px rgba(0,0,0,.7),0 0 0 1px #140e08,0 0 0 3px #6b4f2f,0 0 0 4px #140e08,0 14px 30px -10px #000}
html[data-theme="plansza"] .upiece .body{filter:drop-shadow(0 1.6px 0 rgba(0,0,0,.65))}
html[data-theme="plansza"] .hx{stroke:#5e6e4a}
html[data-theme="plansza"] #log .rnd{color:var(--gold-l);--rnd-line:rgba(212,175,55,.5)}
html[data-theme="plansza"] #log .rnd::before,html[data-theme="plansza"] #log .rnd::after{background:repeating-linear-gradient(90deg,var(--rnd-line) 0 4px,transparent 4px 7px)}
html[data-theme="plansza"] .actcol > .panel{padding:12px 14px}
html[data-theme="plansza"] .online-board-wrap{border:6px solid #3a2a1c;border-radius:12px}

/* ——— okna i wybór trybu: wieczko pudełka ——— */
html[data-theme="plansza"] #overlay{background:rgba(4,8,6,.8)}
html[data-theme="plansza"] #ovbox{background:linear-gradient(180deg,#1a2621,#121b17);border:none;border-radius:16px;box-shadow:var(--tile),0 30px 80px -20px #000}
html[data-theme="plansza"] #ovbox > h2{font-variant:small-caps;letter-spacing:.08em;color:var(--gold-l);border-bottom:1px dashed rgba(212,175,55,.35)}
html[data-theme="plansza"] .modegate{background:
    radial-gradient(ellipse at 50% 0,rgba(70,176,140,.18),transparent 60%),
    linear-gradient(180deg,rgba(12,18,16,.66),rgba(12,18,16,.94) 55%,var(--sumi)),
    url(../../samurai-duel.webp) center 30%/cover no-repeat,var(--sumi)}
html[data-theme="plansza"] .modebox{background:linear-gradient(180deg,rgba(24,35,30,.94),rgba(17,26,22,.96));border:none;border-radius:20px;
  box-shadow:0 0 0 1px #0a0f0d,inset 0 0 0 6px #15201b,inset 0 0 0 7px rgba(212,175,55,.45),inset 0 0 0 10px #15201b,inset 0 0 0 11px rgba(212,175,55,.2),0 8px 0 #070b09,0 40px 90px -20px #000}
html[data-theme="plansza"] .modebrand{font-variant:small-caps;letter-spacing:.1em}
html[data-theme="plansza"] .modebrand b{color:var(--gold-l)}
html[data-theme="plansza"] .modecard{background:linear-gradient(180deg,#1f2c26,#16201c);border:1px solid #3a4b42;border-radius:14px;
  box-shadow:0 5px 0 #06100c,inset 0 0 0 4px #1b2722,inset 0 0 0 5px rgba(212,175,55,.2)}
html[data-theme="plansza"] .modecard:hover:not(:disabled){transform:translateY(-3px);border-color:var(--jade);background:linear-gradient(180deg,#243530,#18241f);box-shadow:0 8px 0 #06100c,inset 0 0 0 4px #1b2722,inset 0 0 0 5px rgba(70,176,140,.45)}
html[data-theme="plansza"] .modecard:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #06100c}
html[data-theme="plansza"] .modecard.pri{background:linear-gradient(180deg,#242e22,#1b241e);border-color:rgba(212,175,55,.45);
  box-shadow:0 5px 0 #06100c,inset 0 0 0 4px #1f2a21,inset 0 0 0 5px rgba(212,175,55,.22),0 14px 24px -22px rgba(212,175,55,.3)}
html[data-theme="plansza"] .modecard strong{font-variant:small-caps;letter-spacing:.05em}
html[data-theme="plansza"] .modecard.pri:hover:not(:disabled){background:linear-gradient(180deg,#263329,#1d271f);border-color:rgba(212,175,55,.75);
  box-shadow:0 8px 0 #06100c,inset 0 0 0 4px #1f2a21,inset 0 0 0 5px rgba(212,175,55,.4),0 14px 24px -22px rgba(212,175,55,.3)}
html[data-theme="plansza"] .modeglyph{border-radius:50%!important;transform:none;background:radial-gradient(circle at 35% 30%,#e0584a,#a3281d 70%);
  box-shadow:0 0 0 2px var(--gold),0 0 0 3px #0a0f0d,0 3px 0 3px #06100c}
html[data-theme="plansza"] .modecard:not(.pri) .modeglyph{background:radial-gradient(circle at 35% 30%,#86dcbc,#2f8a6b 70%);color:#04140e!important;
  box-shadow:0 0 0 2px var(--gold),0 0 0 3px #0a0f0d,0 3px 0 3px #06100c}
html[data-theme="plansza"] .modestatus{border-left-color:var(--jade)}
html[data-theme="plansza"] .tutorial-bar{border-top-color:var(--jade);background:linear-gradient(180deg,#18241f,#101814)}
html[data-theme="plansza"] .tuthead b{color:var(--jade-l)}

/* ——— znak: logo z wieczka pudełka — gruby krój, złote i jadeitowe litery z obrysem i cieniem ——— */
html[data-theme="plansza"]{--wm-font:"WM Plansza",var(--serif);--wm-weight:400}
html[data-theme="plansza"] .wordmark{font-variant:normal;text-transform:uppercase;letter-spacing:.04em}
html[data-theme="plansza"] .wordmark .wm1{background:linear-gradient(180deg,#fff0b8,#ecc653 46%,#b8891c 54%,#e7c25a);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-stroke:.035em #2a1d04;filter:drop-shadow(0 2px 0 #06100c)}
html[data-theme="plansza"] .wordmark .wm-dash{color:#7a8f82}
html[data-theme="plansza"] .wordmark .wm2{background:linear-gradient(180deg,#d4f6e7,#46b08c 52%,#2f8a6b);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-stroke:.035em #04140e;filter:drop-shadow(0 2px 0 #06100c)}