/* =========================================================================
   USTAWKA — style
   ========================================================================= */
:root {
  --tlo: #0b0e13;
  --tlo2: #11161f;
  --tlo3: #171d28;
  --linia: #232b39;
  --tekst: #e6edf3;
  --przygas: #8b949e;
  --ok: #3fb950;
  --zle: #f85149;
  --akcent: #e5a00d;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--tlo);
  color: var(--tekst);
  font: 14px/1.45 "Segoe UI", Roboto, system-ui, sans-serif;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
button {
  font: inherit; color: var(--tekst); background: var(--tlo3);
  border: 1px solid var(--linia); border-radius: 7px; padding: 7px 11px;
  cursor: pointer; transition: .12s;
}
button:hover { background: #1f2734; border-color: #3a4658; }
button.primary { background: var(--akcent); color: #1a1200; border-color: #b8810a; font-weight: 700; }
button.primary:hover { background: #f0b429; }
button.danger { border-color: #6a2b2b; color: #ff9b95; }
button.akt { background: #2a3346; border-color: #4a5b78; }
small { color: var(--przygas); font-weight: 400; }
b.ok, .ok { color: var(--ok); }
b.zle, .zle { color: var(--zle); }

/* ------------------------------------------------------------ ekran startu */
.startOverlay {
  position: fixed; inset: 0; z-index: 60; overflow: auto;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2231, #08090d 70%);
  padding: 32px 20px;
}
.startOverlay.ukryty { display: none; }
.startBox { max-width: 1100px; margin: 0 auto; }
.startBox h1 {
  font-size: 58px; letter-spacing: 10px; margin: 10px 0 6px;
  text-shadow: 0 0 30px rgba(229,160,13,.35);
}
.startBox h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 2px; color: var(--przygas); margin: 26px 0 12px; }
.lead { max-width: 720px; color: #b6c0cc; }
.startInfo { display: flex; gap: 22px; margin: 18px 0; flex-wrap: wrap; }
.startInfo div { background: var(--tlo2); border: 1px solid var(--linia); border-radius: 8px; padding: 8px 14px; color: var(--przygas); }
.startInfo b { color: var(--tekst); font-size: 17px; }

.wyborEkipy { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.ekipaKarta {
  text-align: left; display: grid; gap: 3px; padding: 11px 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, var(--tlo2)), var(--tlo2));
  border-left: 4px solid var(--c);
}
.ekipaKarta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.ekipaHerb {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px;
  background: var(--c); color: #06080c; font-weight: 800; font-size: 11px;
}
.ekipaNazwa { font-weight: 700; font-size: 15px; }
.ekipaMiasto { color: var(--przygas); font-size: 12px; }
.ekipaSila { color: var(--akcent); letter-spacing: 2px; font-size: 12px; }
.ekipaRel { display: grid; gap: 2px; font-size: 11px; font-style: normal; margin-top: 3px; }
.ekipaRel .zg { color: #6fd18a; }
.ekipaRel .ks { color: #ff8b84; }
.startStopka { margin: 26px 0 10px; }
.dysk { color: #6b7684; font-size: 12px; max-width: 720px; margin-top: 14px; }

/* ------------------------------------------------------------- górny pasek */
#top {
  display: flex; align-items: center; gap: 18px; padding: 8px 14px;
  background: var(--tlo2); border-bottom: 1px solid var(--linia);
}
#topInfo { display: flex; align-items: center; gap: 10px; }
.topNazwa { display: grid; line-height: 1.25; }
.topNazwa span { color: var(--przygas); font-size: 12px; }
#topStats { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; }
.zasob { background: var(--tlo3); border: 1px solid var(--linia); border-radius: 7px; padding: 4px 10px; font-size: 13px; }
.zasob.gorace { border-color: #7a2b2b; background: #241417; }
#topBtns { display: flex; gap: 8px; }

.herb {
  display: inline-grid; place-items: center; border-radius: 5px;
  background: var(--c); color: #06080c; font-weight: 800; flex: none;
}

/* -------------------------------------------------------------- układ gry */
#gra { display: grid; grid-template-columns: 290px 1fr 330px; overflow: hidden; }
#panelLewy, #panelPrawy { overflow-y: auto; padding: 10px; background: var(--tlo2); }
#panelLewy { border-right: 1px solid var(--linia); }
#panelPrawy { border-left: 1px solid var(--linia); }
.karta { background: var(--tlo3); border: 1px solid var(--linia); border-radius: 10px; padding: 11px; margin-bottom: 10px; }
.karta h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--przygas); }
.podtytul { margin: -4px 0 8px; color: var(--przygas); font-size: 12px; }
.pusto { color: var(--przygas); font-size: 12px; margin: 6px 0 0; }

.stat { margin-bottom: 8px; }
.statTop { display: flex; justify-content: space-between; font-size: 12px; color: var(--przygas); }
.bar { height: 7px; background: #0c1017; border-radius: 4px; overflow: hidden; margin-top: 3px; }
.bar i { display: block; height: 100%; }
.bar .morale { background: linear-gradient(90deg, #d29922, #3fb950); }
.bar .heat { background: linear-gradient(90deg, #f0883e, #f85149); }
.bar .forma { background: linear-gradient(90deg, #388bfd, #79c0ff); }
.bar .wplywy { background: linear-gradient(90deg, #8957e5, #d2a8ff); }

.mini { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--przygas); margin-top: 6px; }
.mini b { color: var(--tekst); }

.listaTerenow { display: grid; gap: 4px; max-height: 210px; overflow-y: auto; }
.terenRow { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 5px 8px; }
.tName { display: grid; line-height: 1.2; font-size: 13px; }
.tName small { font-size: 11px; }
.wpl { font-weight: 700; font-size: 13px; }

.szaliki { display: grid; gap: 4px; }
.szalikTag { font-size: 12px; border-left: 3px solid var(--c); padding-left: 7px; }

.ranking { list-style: none; margin: 0; padding: 0; counter-reset: r; display: grid; gap: 3px; }
.ranking li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; counter-increment: r; }
.ranking li::before { content: counter(r) "."; color: var(--przygas); width: 16px; }
.ranking li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking li.ja { color: var(--akcent); font-weight: 700; }

/* ---------------------------------------------------------------- zakładki */
.zakladki { display: flex; gap: 4px; margin-bottom: 10px; }
.zakladki button { flex: 1; padding: 6px 4px; font-size: 12.5px; }
.zakladki button.akt { background: var(--akcent); color: #1a1200; border-color: #b8810a; font-weight: 700; }
.przyciski { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.przyciski.kolumna { flex-direction: column; }
.przyciski button { text-align: left; display: grid; }
.wlasciciel { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.tag { font-size: 10px; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; border: 1px solid; }
.tag.zgoda { color: #6fd18a; border-color: #2c5f3c; background: #10231a; }
.tag.kosa { color: #ff8b84; border-color: #6a2b2b; background: #241417; }
.tag.rozejm { color: #d2a8ff; border-color: #4b3a6b; background: #1a1526; }
.tag.neutral { color: var(--przygas); border-color: var(--linia); }

.listaEkip, .dyplomacja { display: grid; gap: 8px; }
.ekipaRow, .dypRow { border-bottom: 1px solid var(--linia); padding-bottom: 7px; }
.ekipaTop { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.ekipaTop b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wart { font-weight: 700; font-size: 12px; }

.kodeks { margin: 0; font-size: 12.5px; }
.kodeks dt { font-weight: 700; color: var(--akcent); margin-top: 8px; }
.kodeks dd { margin: 2px 0 0; color: #b6c0cc; }

/* -------------------------------------------------------------------- mapa */
#mapaWrap { position: relative; background: #070a0f; overflow: hidden; }
#mapa { width: 100%; height: 100%; display: block; cursor: grab; }
#mapa:active { cursor: grabbing; }
.krajPath { fill: #0d141e; stroke: none; }
.krajObrys { fill: none; stroke: #3b5068; stroke-width: 2.2; pointer-events: none; }

/* --- województwa --- */
.wojKomorka { cursor: pointer; transition: fill-opacity .12s; }
.wojKomorka:hover { fill-opacity: .78 !important; }
.wojKomorka.aktywne { cursor: default; }
.wojGranica { stroke: #4a5f7a; stroke-width: 1.2; stroke-opacity: .85; pointer-events: none; }
.wojLabel {
  fill: #cfd8e3; font-size: 12.5px; text-anchor: middle; letter-spacing: 1.2px;
  text-transform: uppercase; pointer-events: none;
  paint-order: stroke; stroke: #070a0f; stroke-width: 3.5px; stroke-linejoin: round;
}
.wojLabelMaly {
  fill: #93a1b1; font-size: 10px; text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: #070a0f; stroke-width: 3px; stroke-linejoin: round;
}
.miastaKropki circle { pointer-events: none; }
.terenG.obcy { opacity: .75; }
.miastoLabel.obcy { fill: #6b7684; }

/* --- pasek nad mapą --- */
.mapaPasek {
  position: absolute; top: 10px; left: 12px; right: 12px; z-index: 5;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.mapaPasek button, .mapaPasek span {
  pointer-events: auto;
  background: rgba(9,12,17,.9); border: 1px solid var(--linia); border-radius: 8px;
  padding: 5px 11px; font-size: 12.5px; color: var(--przygas);
}
.mapaPasek span b { color: var(--tekst); }
.mapaPasek button { color: var(--tekst); cursor: pointer; }
.mapaPasek button:hover { background: #1f2734; }
.droga { stroke: #1d2836; stroke-width: 2; stroke-dasharray: 5 6; }
/* uwaga: rozmiary napisów na mapie ustawiamy atrybutami SVG (skalują się
   odwrotnie do zoomu) — CSS nie może ich nadpisywać */
.miastoLabel { fill: #99a4b2; text-anchor: middle; letter-spacing: .8px; text-transform: uppercase;
  pointer-events: none; paint-order: stroke; stroke: #070a0f; stroke-linejoin: round; }
.terenLabel { fill: #c3ccd6; text-anchor: middle;
  pointer-events: none; paint-order: stroke; stroke: #070a0f; stroke-linejoin: round; }
.terenIkona { fill: rgba(0,0,0,.55); text-anchor: middle; pointer-events: none; }
.terenG { cursor: pointer; }
.terenG:hover .terenHex { stroke: #fff; stroke-width: 2; }
.relLinia { fill: none; stroke-width: 2; opacity: .75; }
.relLinia.zgoda { stroke: #3fb950; stroke-dasharray: none; }
.relLinia.kosa { stroke: #f85149; stroke-dasharray: 6 5; }

.legenda {
  position: absolute; left: 12px; bottom: 12px; display: flex; gap: 14px; flex-wrap: wrap;
  background: rgba(9,12,17,.85); border: 1px solid var(--linia); border-radius: 8px;
  padding: 6px 11px; font-size: 11px; color: var(--przygas);
}
.legenda span { display: flex; align-items: center; gap: 5px; }
.lg { width: 11px; height: 11px; display: inline-block; border-radius: 2px; }
.lgStadion { background: #e5a00d; }
.lgTeren { background: linear-gradient(90deg, rgba(88,166,255,.25), #58a6ff); }
.lgZgoda { background: #3fb950; }
.lgKosa { background: #f85149; }
.legenda .hint { color: #5b6572; }

/* ----------------------------------------------------------------- kronika */
#stopka { background: var(--tlo2); border-top: 1px solid var(--linia); padding: 6px 12px 8px; height: 132px; overflow: hidden; }
#stopka h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--przygas); }
#kronika { height: 100px; overflow-y: auto; font-size: 12.5px; display: grid; gap: 2px; align-content: start; }
.wpis { padding: 2px 6px; border-left: 3px solid var(--linia); background: #0e131b; border-radius: 0 5px 5px 0; }
.wpis .tura { color: #5b6572; margin-right: 7px; font-size: 11px; }
.wpis.dobre { border-left-color: var(--ok); }
.wpis.zle { border-left-color: var(--zle); }
.wpis.kosa { border-left-color: #ff8b84; background: #170e12; }

/* ------------------------------------------------------------------ modale */
.modalBack { position: fixed; inset: 0; background: rgba(4,6,10,.72); display: grid; place-items: center; z-index: 70; padding: 20px; }
.modal { width: min(560px, 100%); max-height: 86vh; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--tlo2); border: 1px solid var(--linia); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal header { padding: 12px 16px; border-bottom: 1px solid var(--linia); font-weight: 700; letter-spacing: .5px; }
.modalBody { padding: 14px 16px; overflow-y: auto; }
.modal footer { padding: 11px 16px; border-top: 1px solid var(--linia); display: flex; gap: 8px; justify-content: flex-end; }
.duzy { font-size: 15px; font-weight: 600; margin-top: 0; }
.lista { margin: 8px 0 0; padding-left: 18px; color: #b6c0cc; }
.lista li { margin-bottom: 4px; }
.ostrzezenie { background: #241417; border: 1px solid #6a2b2b; border-radius: 7px; padding: 7px 10px; font-size: 12.5px; color: #ffb3ad; }
.pole, .suwak { display: grid; gap: 5px; margin-bottom: 12px; font-size: 13px; color: var(--przygas); }
.pole select { padding: 7px; background: var(--tlo3); color: var(--tekst); border: 1px solid var(--linia); border-radius: 7px; }
.suwak input { width: 100%; accent-color: var(--akcent); }
.suwak b { color: var(--tekst); }

@media (max-width: 1200px) {
  #gra { grid-template-columns: 240px 1fr 290px; }
}
@media (max-width: 900px) {
  #gra { grid-template-columns: 1fr; grid-template-rows: 300px auto auto; }
  #panelLewy, #panelPrawy { max-height: 40vh; }
}