/* =========================================================
   Heroes of Might & Wilanów III — arkusz stylów
   Estetyka: baroko + osiedlowy beton. Złote ramy, ciemny kamień.
   ========================================================= */

:root{
  --gold:        #e8c268;
  --gold-lt:     #ffe9a8;
  --gold-dk:     #8a6a22;
  --gold-deep:   #57420f;
  --stone:       #2a2622;
  --stone-lt:    #3d372f;
  --stone-dk:    #17150f;
  --ink:         #0d0b07;
  --parch:       #e8d7ac;
  --parch-dk:    #c3ad7c;
  --red:         #a3312a;
  --green:       #4b7a37;
  --blue:        #3a5f9e;
  --ui:          14px;
  --side-w:      280px;
  --font-head:   'Cinzel','Trajan Pro',Georgia,'Times New Roman',serif;
  --font-body:   'EB Garamond',Georgia,'Times New Roman',serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; }

body{
  background:#000;
  color:var(--parch);
  font-family:var(--font-body);
  font-size:var(--ui);
  user-select:none;
  -webkit-user-select:none;
  cursor:default;
}

#app{ position:fixed; inset:0; overflow:hidden; }

/* ---------- ekrany ---------- */
.screen{
  position:absolute; inset:0;
  display:none;
  opacity:0;
  transition:opacity .45s ease;
}
.screen.active{ display:block; opacity:1; }
.screen.fading{ opacity:0; }

.screen-title{
  font-family:var(--font-head);
  font-size:30px; font-weight:700;
  text-align:center;
  color:var(--gold-lt);
  letter-spacing:.06em;
  text-shadow:0 2px 0 #000, 0 0 22px rgba(232,194,104,.35);
  margin:14px 0 10px;
}

/* =========================================================
   PANELE I PRZYCISKI (wspólny język wizualny)
   ========================================================= */
.panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)),
    repeating-linear-gradient(115deg, #322c24 0 3px, #2b261f 3px 6px),
    var(--stone);
  border:2px solid var(--gold-dk);
  border-radius:5px;
  box-shadow:
    inset 0 0 0 1px rgba(255,232,168,.18),
    inset 0 2px 12px rgba(0,0,0,.6),
    0 6px 22px rgba(0,0,0,.65);
}
.panel-inset{
  background:linear-gradient(180deg,#14120d,#211d16);
  border:1px solid #57420f;
  border-radius:4px;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.8);
}

.hbtn{
  font-family:var(--font-head);
  font-size:14px; font-weight:600; letter-spacing:.04em;
  color:#f4e3b6;
  background:
    linear-gradient(180deg,#5c5145 0%,#3a332a 45%,#2a241d 100%);
  border:2px solid #6d5622;
  border-radius:4px;
  padding:8px 14px;
  cursor:pointer;
  text-shadow:0 1px 0 #000;
  box-shadow:
    inset 0 1px 0 rgba(255,236,184,.35),
    inset 0 -2px 6px rgba(0,0,0,.6),
    0 3px 8px rgba(0,0,0,.55);
  transition:transform .08s, filter .15s, box-shadow .15s;
}
.hbtn:hover{ filter:brightness(1.22); border-color:var(--gold); }
.hbtn:active{ transform:translateY(2px); filter:brightness(.9); }
.hbtn:disabled{ opacity:.42; cursor:not-allowed; filter:grayscale(.7); }
.hbtn-gold{
  background:linear-gradient(180deg,#c9a44c,#8a6a22 55%,#6a4f13);
  color:#2a1d05; text-shadow:0 1px 0 rgba(255,255,255,.35);
  border-color:var(--gold-lt);
}
.hbtn-sm{ font-size:12px; padding:5px 10px; }
.hbtn-ico{ font-size:18px; padding:6px 10px; min-width:44px; }
.hbtn-lg{
  display:block; width:100%;
  padding:12px 20px; text-align:left;
}
.hbtn-lg b{ display:block; font-size:19px; font-weight:700; }
.hbtn-lg i{ display:block; font-style:normal; font-size:12px; opacity:.62; font-family:var(--font-body); }

.ornament{
  height:12px;
  background:
    radial-gradient(circle at 50% 0, var(--gold) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent, var(--gold-dk) 20%, var(--gold) 50%, var(--gold-dk) 80%, transparent);
  background-size:16px 12px, 100% 2px;
  background-position:center, center;
  background-repeat:repeat-x, no-repeat;
  opacity:.75; margin:6px 0;
}

/* =========================================================
   EKRAN ŁADOWANIA
   ========================================================= */
#screen-boot{
  background:radial-gradient(ellipse at 50% 40%, #2b2213 0%, #0a0806 70%);
  display:flex; align-items:center; justify-content:center;
}
.boot-inner{ text-align:center; width:min(560px,86vw); }
.boot-crest{
  width:120px; height:120px; margin:0 auto 18px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #ffe9a8, #8a6a22 60%, #3a2c0c);
  box-shadow:0 0 60px rgba(232,194,104,.45), inset 0 -8px 20px rgba(0,0,0,.6);
  animation:crestSpin 8s linear infinite;
}
@keyframes crestSpin{ to{ transform:rotate(360deg);} }
.boot-title{
  font-family:var(--font-head); font-size:34px; color:var(--gold-lt);
  text-shadow:0 3px 0 #000,0 0 30px rgba(232,194,104,.4); letter-spacing:.05em;
}
.boot-sub{ font-size:17px; opacity:.7; margin-top:4px; font-style:italic; }
.boot-bar{
  margin:26px auto 8px; width:100%; height:14px;
  background:#120f0a; border:2px solid var(--gold-dk); border-radius:8px;
  overflow:hidden; box-shadow:inset 0 2px 8px #000;
}
.boot-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#8a6a22,#e8c268,#ffe9a8);
  transition:width .3s ease;
}
.boot-status{ font-size:13px; opacity:.65; font-style:italic; }

/* =========================================================
   MENU GŁÓWNE
   ========================================================= */
#screen-menu{ background:#070604; }
#menu-bg{ position:absolute; inset:0; width:100%; height:100%; }
.menu-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    /* przyciemnienie prawej strony — pod napisami i tablicami */
    linear-gradient(to left, rgba(6,8,16,.66) 0%, rgba(6,8,16,.42) 26%, rgba(6,8,16,.08) 46%, transparent 60%),
    radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(0,0,0,.55) 92%);
}
.menu-wrap{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  gap:14px;
  /* Numer wersji i stopka sa przyklejone do rogow okna, wiec wysrodkowana
     kolumna musi trzymac sie od nich z daleka — inaczej przy niskim oknie
     tablice wchodza pod stopke i litery sie nakladaja. */
  padding:44px clamp(24px,5vw,86px) 58px;
}
.menu-logo{ text-align:right; margin-bottom:2px; max-width:min(560px,52vw); }
.menu-logo h1{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(26px,3.6vw,46px); line-height:1.08;
  color:var(--gold-lt); letter-spacing:.04em;
  text-shadow:0 4px 0 #1a1206, 0 6px 18px #000, 0 0 44px rgba(232,194,104,.35);
}
.menu-logo h1 span{ color:#d8452f; text-shadow:0 4px 0 #2a0b06,0 0 30px rgba(216,69,47,.6); }
.menu-logo p{
  font-size:clamp(11px,1.2vw,15px); letter-spacing:.36em;
  text-transform:uppercase; opacity:.9; margin-top:6px;
  color:#f0dfb4;
  text-shadow:0 2px 4px #000, 0 0 12px rgba(0,0,0,.9);
}
.menu-buttons{
  width:min(360px,40vw); display:flex; flex-direction:column; gap:4px;
  flex:0 0 auto;              /* bez tego kolumna flex ściska tablice */
}
.menu-logo{ flex:0 0 auto; }

/* ---------- rzeźbione tablice menu ---------- */
.plate{
  position:relative; display:block; width:100%;
  background:none; border:0; padding:0; margin:0;
  cursor:pointer; line-height:0;
  transition:transform .12s ease, filter .15s ease;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.plate img{ width:100%; height:auto; display:block; }
.plate .pl-on{ position:absolute; left:0; top:0; opacity:0; transition:opacity .18s ease; }
.plate:hover .pl-on{ opacity:1; }
.plate:hover{ transform:translateY(-3px) scale(1.015); }
.plate:active{ transform:translateY(1px) scale(.995); filter:brightness(.9) drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.plate:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:4px; border-radius:6px; }
/* napis zapasowy — widoczny tylko, gdy grafiki tablic się nie wczytały */
.plate .pl-label{ display:none; }
.menu-buttons.bez-grafik .plate img{ display:none; }
.menu-buttons.bez-grafik .plate{
  display:block; line-height:normal; filter:none;
  font-family:var(--font-head); font-size:14px; font-weight:600; letter-spacing:.04em;
  color:#f4e3b6; text-align:left; padding:12px 20px;
  background:linear-gradient(180deg,#5c5145 0%,#3a332a 45%,#2a241d 100%);
  border:2px solid #6d5622; border-radius:4px;
  text-shadow:0 1px 0 #000;
  box-shadow:inset 0 1px 0 rgba(255,236,184,.35), inset 0 -2px 6px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.55);
}
.menu-buttons.bez-grafik .plate:hover{ transform:none; filter:brightness(1.22); border-color:var(--gold); }
.menu-buttons.bez-grafik .pl-label{ display:block; }
.menu-buttons.bez-grafik .pl-label b{ display:block; font-size:19px; font-weight:700; }
.menu-buttons.bez-grafik .pl-label i{ display:block; font-style:normal; font-size:12px; opacity:.62; font-family:var(--font-body); }
.menu-foot{
  position:absolute; left:0; right:0; bottom:16px;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 18px;
}
.menu-foot-right{ display:flex; gap:8px; }
.account-box{ display:flex; align-items:center; gap:10px; }
.acc-status{ font-size:12px; opacity:.68; font-style:italic; }
.menu-version{
  position:absolute; right:18px; top:14px;
  font-size:11px; opacity:.38; font-style:italic;
}

/* =========================================================
   KAMPANIA
   ========================================================= */
#screen-campaign{ background:#0a0806; }
.camp-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 0, rgba(232,194,104,.10), transparent 60%),
    repeating-linear-gradient(0deg, #14110c 0 2px, #100e09 2px 4px);
}
.camp-wrap{ position:absolute; inset:0; display:flex; flex-direction:column; padding:12px 22px 16px; }
.camp-body{ flex:1; display:flex; gap:18px; min-height:0; }
.camp-list{ list-style:none; width:330px; overflow-y:auto; padding-right:6px; display:flex; flex-direction:column; gap:8px; }
.camp-item{
  padding:10px 12px; cursor:pointer;
  background:linear-gradient(180deg,#332c23,#221d17);
  border:2px solid #4c3c17; border-radius:4px;
  transition:.15s;
}
.camp-item:hover{ border-color:var(--gold); filter:brightness(1.15); }
.camp-item.sel{ border-color:var(--gold-lt); background:linear-gradient(180deg,#4a3d23,#2c2418); box-shadow:0 0 14px rgba(232,194,104,.3); }
.camp-item.locked{ opacity:.45; filter:grayscale(.8); }
.camp-item .ci-no{ font-family:var(--font-head); font-size:11px; opacity:.6; letter-spacing:.1em; }
.camp-item .ci-name{ font-family:var(--font-head); font-size:17px; color:var(--gold-lt); }
.camp-item .ci-tag{ font-size:12px; opacity:.65; font-style:italic; }
.camp-item .ci-done{ float:right; color:#7fd07f; font-size:16px; }
.camp-detail{ flex:1; padding:18px 22px; overflow-y:auto; }
.camp-detail h3{ font-family:var(--font-head); font-size:24px; color:var(--gold-lt); margin-bottom:4px; }
.camp-detail .cd-sub{ font-style:italic; opacity:.6; margin-bottom:10px; }
.camp-detail p{ line-height:1.55; margin-bottom:10px; font-size:15px; }
.camp-detail .cd-goal{ border-left:3px solid var(--gold); padding-left:10px; margin:12px 0; }
/* wtrącenie Korespondenta Żebro */
.zebro-box{
  border-left:3px solid #4a7ac0; padding:8px 12px; margin:0 0 12px;
  background:rgba(20,32,54,.5); border-radius:0 4px 4px 0;
  font-size:13px; line-height:1.5; color:#cfe0f4;
}
.zebro-box b{ font-family:var(--font-head); color:#9dc4ee; }
.camp-detail .cd-goal b{ color:var(--gold-lt); font-family:var(--font-head); }
.camp-foot{ display:flex; justify-content:space-between; padding-top:12px; }

/* =========================================================
   MAPA PRZYGODY
   ========================================================= */
#screen-adventure{ background:#0b0d08; }
#map-canvas{ position:absolute; left:0; top:0; width:calc(100% - var(--side-w)); height:100%; cursor:crosshair; }

.adv-side{
  position:absolute; right:0; top:0; bottom:0; width:var(--side-w);
  border-radius:0; border-width:0 0 0 3px;
  display:flex; flex-direction:column; gap:8px; padding:8px;
  overflow:hidden;
}
/* Minimapa zjada najwiecej wysokosci, wiec przy niskim oknie
   (np. laptop przy skalowaniu 150%) kurczy sie, zamiast wypychac
   przyciski pod krawedz ekranu. */
.minimap-frame{
  width:min(100%,30vh); aspect-ratio:1/1; margin:0 auto; flex:0 0 auto;
  border:2px solid var(--gold-dk); border-radius:3px;
  background:#0a0a06; box-shadow:inset 0 0 14px #000;
  overflow:hidden; position:relative;
}
#minimap{ width:100%; height:100%; display:block; cursor:pointer; }

.hero-strip{ display:flex; gap:4px; flex-wrap:wrap; flex:0 0 auto;
  max-height:106px; overflow-y:auto; }
.hero-chip{
  width:46px; height:46px; border:2px solid #5d4a1c; border-radius:3px;
  background:#191510; cursor:pointer; position:relative; overflow:hidden;
  transition:.12s;
}
.hero-chip canvas{ width:100%; height:100%; display:block; }
.hero-chip:hover{ border-color:var(--gold); }
.hero-chip.sel{ border-color:var(--gold-lt); box-shadow:0 0 10px rgba(232,194,104,.7); }
.hero-chip.done{ filter:grayscale(.85) brightness(.65); }
.hero-chip .mp{ position:absolute; left:0; right:0; bottom:0; height:3px; background:#2a2a2a; }
.hero-chip .mp i{ display:block; height:100%; background:#6fc06f; }

.side-info{ padding:8px 10px; font-size:13px; min-height:76px; flex:0 0 auto; }
.side-info .si-name{ font-family:var(--font-head); font-size:16px; color:var(--gold-lt); }
.side-info .si-row{ display:flex; justify-content:space-between; opacity:.85; }
.side-info .si-stats{ display:flex; gap:9px; margin-top:5px; font-size:12px; }
.side-info .si-stats span b{ color:var(--gold-lt); }

/* Armia bierze cala reszte miejsca i to ona sie przewija —
   dzieki temu rzad przyciskow nigdy nie znika pod krawedzia. */
.side-army{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  flex:1 1 auto; min-height:0; overflow-y:auto; align-content:start; }
.army-slot{
  aspect-ratio:1/1; border:2px solid #4a3c18; border-radius:3px;
  background:linear-gradient(180deg,#1b1712,#0f0d09);
  position:relative; overflow:hidden; cursor:pointer;
}
/* spriteNode ustawia rozmiar plotna stylem inline, wiec bez !important
   plotno nie zmiescilo by sie w slocie przeskalowanym przez media query. */
.army-slot > canvas{ width:100% !important; height:100% !important; display:block; }
.army-slot .cnt{
  position:absolute; right:1px; bottom:0;
  font-family:var(--font-head); font-size:11px; color:#fff;
  text-shadow:0 0 3px #000,0 0 3px #000,1px 1px 0 #000;
  background:rgba(0,0,0,.45); padding:0 3px; border-radius:2px;
}
.army-slot.sel{ border-color:var(--gold-lt); box-shadow:inset 0 0 10px rgba(232,194,104,.45); }
.army-slot.empty{ opacity:.35; }

.side-buttons{ flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }

.res-bar{
  position:absolute; left:8px; bottom:8px;
  display:flex; gap:6px; align-items:center;
  padding:5px 9px;
  background:linear-gradient(180deg,rgba(40,35,27,.94),rgba(18,16,11,.94));
  border:2px solid var(--gold-dk); border-radius:5px;
  box-shadow:0 4px 16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,232,168,.2);
}
.res{ display:flex; align-items:center; gap:4px; font-family:var(--font-head); font-size:14px; }
.res canvas{ width:22px; height:22px; }
.res b{ color:#fff; text-shadow:0 1px 0 #000; font-weight:600; }
.res.gain{ animation:resGain .8s ease; }
@keyframes resGain{ 0%{ filter:brightness(2.6);} 100%{ filter:none;} }

.date-box{
  position:absolute; right:calc(var(--side-w) + 8px); bottom:8px;
  padding:5px 12px; font-family:var(--font-head); font-size:14px;
  background:linear-gradient(180deg,rgba(40,35,27,.94),rgba(18,16,11,.94));
  border:2px solid var(--gold-dk); border-radius:5px; color:var(--gold-lt);
  box-shadow:0 4px 16px rgba(0,0,0,.7);
}

.adv-log{
  position:absolute; left:8px; top:8px; width:min(430px,42vw);
  display:flex; flex-direction:column; gap:3px; pointer-events:none;
}
.adv-log div{
  background:rgba(10,9,6,.74); border-left:3px solid var(--gold-dk);
  padding:3px 9px; font-size:13px; border-radius:0 3px 3px 0;
  animation:logIn .3s ease;
}
@keyframes logIn{ from{ opacity:0; transform:translateX(-14px);} }
.adv-log div.imp{ border-left-color:var(--gold); color:var(--gold-lt); }
.adv-log div.bad{ border-left-color:#a3312a; color:#f0a49c; }
/* wypowiedzi Korespondenta Żebro */
.adv-log div.zebro{
  border-left-color:#4a7ac0; color:#cfe0f4; font-style:italic;
  background:rgba(14,22,38,.78);
}

/* =========================================================
   MIASTO
   ========================================================= */
#screen-town{ background:#0a0a0c; }
#town-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.town-ui{ position:absolute; inset:0; pointer-events:none; }
.town-ui > *{ pointer-events:auto; }
.town-bar{
  position:absolute; left:0; right:0; bottom:0; height:112px; overflow:hidden;
  display:flex; gap:10px; align-items:center; padding:8px 12px;
  background:linear-gradient(180deg,rgba(28,24,18,.96),rgba(12,10,7,.99));
  border-top:3px solid var(--gold-dk);
}
/* Dwa komplety po siedem slotow nie mieszcza sie na waskim oknie,
   wiec przy mniejszej szerokosci sloty chudna zamiast wypychac
   przycisk bohatera poza krawedz. */
.town-garrison{ display:flex; gap:4px; flex:0 1 auto; min-width:0; }
.town-garrison .army-slot{ width:48px; height:48px; flex:0 0 auto; }
.town-title{
  position:absolute; left:50%; top:10px; transform:translateX(-50%);
  font-family:var(--font-head); font-size:26px; color:var(--gold-lt);
  text-shadow:0 3px 0 #000,0 0 24px rgba(232,194,104,.4);
}
.town-back{ position:absolute; left:14px; top:14px; }
.build-tip{
  position:absolute; padding:8px 12px; max-width:280px;
  background:rgba(12,10,7,.96); border:2px solid var(--gold-dk); border-radius:4px;
  font-size:13px; pointer-events:none; z-index:40;
}

/* =========================================================
   BITWA
   ========================================================= */
#screen-combat{ background:#06070a; }
#combat-canvas{ position:absolute; left:0; top:0; width:100%; height:100%; }

.combat-top{
  position:absolute; left:0; right:0; top:0; height:38px;
  display:flex; align-items:center; justify-content:center; gap:22px;
  background:linear-gradient(180deg,rgba(10,9,6,.9),transparent);
  font-family:var(--font-head); font-size:15px; pointer-events:none;
}
.combat-bottom{
  position:absolute; left:0; right:0; bottom:0; height:104px;
  display:flex; align-items:stretch; gap:8px; padding:6px 10px;
  background:linear-gradient(180deg,rgba(30,26,20,.96),rgba(10,9,6,.99));
  border-top:3px solid var(--gold-dk);
}
.cbt-hero{
  width:150px; display:flex; gap:8px; align-items:center; overflow:hidden;
  padding:4px 6px;
  background:linear-gradient(180deg,#241f18,#14110c);
  border:2px solid #5d4a1c; border-radius:4px;
}
.cbt-hero canvas{ width:56px; height:74px; border:1px solid #4a3c18; border-radius:3px; background:#0c0a07; }
.cbt-hero .ch-info{ font-size:12px; line-height:1.4; min-width:0; overflow:hidden; }
/* Nazwiska bohaterow bywaja dlugie („Krzysztof z Kanalu Minus Jeden")
   i zawinięte na trzy linie rozpychały panel poza dolną krawędź. */
.cbt-hero .ch-info b{ font-family:var(--font-head); color:var(--gold-lt); display:block;
  font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cbt-hero .ch-info{ white-space:nowrap; }
.cbt-hero .mana{ color:#8ab6ff; }
.cbt-center{ flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }
.cbt-queue{ flex:1; display:flex; gap:3px; align-items:center; overflow:hidden; }
.q-item{
  width:42px; height:42px; border:2px solid #4a3c18; border-radius:3px;
  position:relative; overflow:hidden; flex:0 0 auto;
  background:#15120d;
}
.q-item canvas{ width:100%; height:100%; }
.q-item.cur{ border-color:var(--gold-lt); box-shadow:0 0 12px rgba(232,194,104,.8); transform:scale(1.08); }
.q-item.side1{ border-bottom-color:#c04a3a; border-bottom-width:4px; }
.q-item.side0{ border-bottom-color:#4a8ac0; border-bottom-width:4px; }
.q-item .qc{ position:absolute; right:1px; bottom:0; font-size:10px; color:#fff; text-shadow:1px 1px 0 #000; }
.cbt-actions{ display:flex; gap:5px; justify-content:center; }

.combat-log{
  position:absolute; left:10px; top:44px; width:min(360px,34vw);
  display:flex; flex-direction:column; gap:2px; pointer-events:none;
}
.combat-log div{
  background:rgba(8,8,10,.72); padding:2px 8px; font-size:12px;
  border-left:2px solid #5d4a1c; animation:logIn .25s ease;
}

.dmg-float{
  position:absolute; font-family:var(--font-head); font-weight:700;
  font-size:20px; color:#ff5a44; text-shadow:0 0 6px #000,0 2px 0 #000;
  pointer-events:none; animation:dmgUp 1.1s ease-out forwards;
}
.dmg-float.heal{ color:#7fe07f; }
.dmg-float.info{ color:var(--gold-lt); font-size:16px; }
@keyframes dmgUp{
  0%{ opacity:0; transform:translate(-50%,0) scale(.6);}
  18%{ opacity:1; transform:translate(-50%,-14px) scale(1.15);}
  100%{ opacity:0; transform:translate(-50%,-56px) scale(1);}
}

/* =========================================================
   DIALOGI
   ========================================================= */
#dialog-layer{ position:absolute; inset:0; pointer-events:none; z-index:100; }
.dlg-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.62);
  pointer-events:auto; display:flex; align-items:center; justify-content:center;
  animation:fadeIn .18s ease;
  backdrop-filter:blur(2px);
}
@keyframes fadeIn{ from{opacity:0;} }
.dlg{
  min-width:320px; max-width:min(760px,92vw); max-height:88vh;
  padding:18px 22px 16px; overflow:auto;
  animation:dlgIn .22s cubic-bezier(.2,1.4,.5,1);
}
@keyframes dlgIn{ from{ transform:scale(.86); opacity:0; } }
.dlg h3{
  font-family:var(--font-head); font-size:21px; color:var(--gold-lt);
  text-align:center; margin-bottom:6px; text-shadow:0 2px 0 #000;
}
.dlg .dlg-body{ font-size:16px; line-height:1.62; }
.dlg .dlg-body p{ margin-bottom:8px; }
/* w oknach jest miejsce — drobny tekst nie musi tu być aż tak drobny */
.dlg .dlg-body .small{ font-size:14.5px; opacity:.88; }
.dlg .dlg-body .dim{ opacity:.82; }
.dlg .dlg-body .small.dim{ opacity:.8; }
.dlg .dlg-btns{ display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.dlg-art{ display:block; margin:6px auto 12px; image-rendering:auto; }

.form-row{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.form-row label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.form-row input{
  font-family:var(--font-body); font-size:15px; color:var(--parch);
  background:#100e09; border:2px solid #57420f; border-radius:3px;
  padding:7px 10px; outline:none;
}
.form-row input:focus{ border-color:var(--gold); box-shadow:0 0 8px rgba(232,194,104,.35); }
.form-err{ color:#f0a49c; font-size:13px; min-height:18px; text-align:center; }
.tabs{ display:flex; gap:4px; justify-content:center; margin-bottom:12px; }
.tab{ padding:5px 14px; cursor:pointer; border-bottom:2px solid transparent; font-family:var(--font-head); opacity:.6; }
.tab.on{ opacity:1; border-bottom-color:var(--gold); color:var(--gold-lt); }

.save-list{ display:flex; flex-direction:column; gap:5px; max-height:46vh; overflow-y:auto; }
.save-row{
  display:flex; align-items:center; gap:10px; padding:7px 10px;
  background:linear-gradient(180deg,#2b251d,#1a1610); border:1px solid #4a3c18;
  border-radius:3px; cursor:pointer;
}
.save-row:hover{ border-color:var(--gold); }
.save-row .sr-main{ flex:1; }
.save-row .sr-name{ font-family:var(--font-head); color:var(--gold-lt); }
.save-row .sr-meta{ font-size:12px; opacity:.6; }
.save-row .sr-del{ color:#c9564a; padding:2px 7px; border-radius:3px; }
.save-row .sr-del:hover{ background:rgba(163,49,42,.3); }

/* siatka wyboru (zaklęcia, jednostki) */
.grid-pick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.pick-card{
  padding:6px; text-align:center; cursor:pointer;
  background:linear-gradient(180deg,#2b251d,#171410);
  border:2px solid #4a3c18; border-radius:4px; transition:.12s;
}
.pick-card:hover{ border-color:var(--gold); transform:translateY(-2px); }
.pick-card.dis{ opacity:.4; cursor:not-allowed; filter:grayscale(.8); }
.pick-card canvas{ display:block; margin:0 auto 3px; }
.pick-card .pc-name{ font-family:var(--font-head); font-size:12px; color:var(--gold-lt); line-height:1.15; }
.pick-card .pc-sub{ font-size:11px; opacity:.65; }

/* =========================================================
   TOOLTIP + TOASTY
   ========================================================= */
.tooltip{
  position:absolute; z-index:200; pointer-events:none; opacity:0;
  max-width:280px; padding:7px 11px;
  background:rgba(10,9,6,.97); border:2px solid var(--gold-dk); border-radius:4px;
  font-size:13px; line-height:1.45;
  box-shadow:0 6px 20px rgba(0,0,0,.8);
  transition:opacity .12s;
}
.tooltip.on{ opacity:1; }
.tooltip b{ color:var(--gold-lt); font-family:var(--font-head); }
.tooltip .tt-stats{ display:grid; grid-template-columns:auto auto; gap:0 12px; margin-top:4px; font-size:12px; }
.tooltip .tt-stats span:nth-child(odd){ opacity:.65; }
.tooltip .tt-ab{ margin-top:4px; font-size:12px; color:#9ad0ff; font-style:italic; }

#toast-layer{
  position:absolute; left:50%; top:60px; transform:translateX(-50%);
  z-index:150; display:flex; flex-direction:column; gap:6px; align-items:center;
  pointer-events:none;
}
.toast{
  padding:8px 18px; font-family:var(--font-head); font-size:15px;
  background:linear-gradient(180deg,rgba(45,38,26,.97),rgba(20,17,11,.97));
  border:2px solid var(--gold); border-radius:4px; color:var(--gold-lt);
  box-shadow:0 6px 24px rgba(0,0,0,.8);
  animation:toastIn .3s ease, toastOut .4s ease 2.4s forwards;
}
@keyframes toastIn{ from{ opacity:0; transform:translateY(-18px) scale(.9);} }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-12px);} }

/* =========================================================
   EKRAN BOHATERA
   ========================================================= */
.hero-screen{ display:flex; gap:16px; }
.hs-left{ width:190px; text-align:center; }
.hs-portrait{ border:3px solid var(--gold-dk); border-radius:4px; background:#0d0b07; }
.hs-name{ font-family:var(--font-head); font-size:19px; color:var(--gold-lt); margin-top:6px; }
.hs-class{ font-style:italic; opacity:.65; font-size:13px; }
.hs-right{ flex:1; }
.hs-prim{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
.hs-stat{
  text-align:center; padding:6px 2px;
  background:linear-gradient(180deg,#2b251d,#16130e); border:2px solid #4a3c18; border-radius:4px;
}
.hs-stat b{ display:block; font-family:var(--font-head); font-size:22px; color:var(--gold-lt); }
.hs-stat i{ font-style:normal; font-size:11px; opacity:.65; text-transform:uppercase; letter-spacing:.06em; }
.hs-xpbar{ height:12px; background:#100e09; border:1px solid #57420f; border-radius:6px; overflow:hidden; margin:4px 0 10px; }
.hs-xpbar i{ display:block; height:100%; background:linear-gradient(90deg,#6a4f13,#e8c268); }
.hs-skills{ display:flex; flex-wrap:wrap; gap:6px; }
.hs-skill{
  padding:5px 9px; font-size:12px;
  background:linear-gradient(180deg,#2b251d,#16130e); border:1px solid #4a3c18; border-radius:3px;
}
.hs-skill b{ color:var(--gold-lt); font-family:var(--font-head); }
.hs-army{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:12px; }

/* pasek zdrowia / paski ogólne */
.bar{ height:6px; background:#1a1a1a; border-radius:3px; overflow:hidden; }
.bar i{ display:block; height:100%; }

/* przewijanie w stylu gry */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#100e09; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#6a5a33,#3a3122); border:1px solid #57420f; border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#8a7440,#4a3f2b); }

/* narzędzia */
.hidden{ display:none !important; }
.center{ text-align:center; }
.small{ font-size:13px; opacity:.78; }
.gold{ color:var(--gold-lt); }
.dim{ opacity:.72; }
.mt{ margin-top:10px; }
.flex{ display:flex; gap:8px; align-items:center; }
.spacer{ flex:1; }

@media (max-width:1100px){
  :root{ --side-w:240px; }
  .town-garrison .army-slot{ width:40px; height:40px; }
}
@media (max-width:960px){
  .town-garrison .army-slot{ width:33px; height:33px; }
  .town-bar{ gap:6px; padding:6px 8px; }
}
/* niskie okna — tablice muszą się zmieścić razem z logo */
/* Tablice sa obrazami o stalych proporcjach, wiec ich wysokosc bierze sie
   z szerokosci. Przy niskim oknie ograniczamy ja takze przez vh, zeby trzy
   tablice, logo i stopka zawsze zmiescily sie na ekranie. */
@media (max-height:700px){
  .menu-buttons{ width:min(300px,34vw,42vh); }
  .menu-logo h1{ font-size:clamp(22px,3vw,36px); }
  .menu-logo p{ font-size:11px; letter-spacing:.28em; }
}
@media (max-height:560px){
  .menu-wrap{ padding:34px clamp(20px,4vw,60px) 50px; }
  .menu-buttons{ width:min(250px,28vw,38vh); }
  .menu-logo h1{ font-size:clamp(18px,2.6vw,28px); }
  .menu-logo p{ font-size:10px; letter-spacing:.22em; }
  .acc-status{ font-size:11px; }
}

/* Niskie okna — typowe przy skalowaniu systemu 125% i 150%.
   Paski muszą schudnąć, bo inaczej wypychają zawartość pod krawędź.
   Ekran miasta i bitwy mierzą wysokość pasków z DOM, więc same się
   dopasują do tych wartości. */
@media (max-height:680px){
  .town-bar{ height:96px; }
  .combat-bottom{ height:92px; }
  .cbt-hero canvas{ width:46px; height:60px; }
  .cbt-hero{ width:132px; }
  .town-title{ font-size:20px; top:6px; }
  .adv-side .hero-chip{ width:40px; height:40px; }
  .adv-side .side-info{ min-height:0; font-size:12px; }
}
@media (max-height:560px){
  .town-bar{ height:86px; }
  .combat-bottom{ height:84px; }
  .cbt-hero canvas{ width:40px; height:52px; }
  .hbtn-ico{ font-size:16px; padding:5px 8px; min-width:38px; }
  .adv-side .minimap-frame{ width:min(100%,26vh); }
  .cbt-hero .ch-info{ font-size:11px; line-height:1.24; }
  .cbt-hero .ch-info b{ font-size:12px; }
}