/* ============================================================
   PULVISOL — views.css : gestionnaire de fenêtres (mode « bureau »),
   Registre (mode tableau, zéro 3D) et couches de données du globe.
   Fichier AUTONOME : n'écrase aucune règle de styles.css.
   Tout est préfixé .pv- pour éviter toute collision.
   ============================================================ */

:root {
  --pv-panel: rgba(11, 14, 22, .94);
  --pv-line: #1e2739;
  --pv-ink: #e8eef7;
  --pv-dim: #8b97ab;
  --pv-faint: #5a6577;
  --pv-or: #ffd166;
  --pv-cy: #7fd8e8;
  --pv-vert: #5dbb7c;
  --pv-rouge: #ff6b8a;
}

/* ---------- barre de lancement (dock) ---------- */
#pv-dock {
  /* 49, nie 44: otwarty arkusz stoi na 47 (patrz `styles.css`), a pasek
     nawigacji musi zostac klikalny NAD nim — inaczej po otwarciu panelu
     jedyna droga dalej to zamkniecie panelu. */
  position: fixed; left: 12px; bottom: 12px; z-index: 49;
  display: flex; gap: 6px; padding: 5px;
  background: rgba(9, 12, 19, .82); border: 1px solid var(--pv-line);
  border-radius: 12px; backdrop-filter: blur(9px);
}
#pv-dock button {
  appearance: none; border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--pv-dim); font: 500 12px/1 inherit; letter-spacing: .02em;
  padding: 8px 11px; border-radius: 8px; display: flex; align-items: center; gap: 7px;
  transition: color .15s, background .15s, border-color .15s;
}
#pv-dock button:hover { color: var(--pv-ink); background: rgba(255, 255, 255, .05); }
#pv-dock button.on { color: var(--pv-or); background: rgba(255, 209, 102, .10); border-color: rgba(255, 209, 102, .3); }
#pv-dock .pv-i { font-size: 14px; line-height: 1; }
@media (max-width: 720px) { #pv-dock .pv-lbl { display: none; } #pv-dock button { padding: 9px 10px; } }

/* ---------- fenêtre ---------- */
.pv-win {
  position: fixed; z-index: 46; width: 340px; max-width: calc(100vw - 24px);
  background: var(--pv-panel); border: 1px solid var(--pv-line); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .62); backdrop-filter: blur(10px);
  color: var(--pv-ink); font-size: 13px; overflow: hidden;
  animation: pv-in .16s ease-out;
}
@keyframes pv-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.pv-win.pv-wide { width: 620px; }
.pv-win header {
  display: flex; align-items: center; gap: 10px; cursor: grab; user-select: none;
  padding: 10px 12px; border-bottom: 1px solid var(--pv-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
}
.pv-win header.pv-drag { cursor: grabbing; }
.pv-win header h3 {
  margin: 0; flex: 1; font: 600 12px/1.2 'Clash Display', inherit; letter-spacing: .06em; text-transform: uppercase;
}
.pv-win header button {
  appearance: none; background: none; border: none; cursor: pointer; color: var(--pv-faint);
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 5px;
}
.pv-win header button:hover { color: var(--pv-ink); background: rgba(255, 255, 255, .07); }
.pv-body { padding: 12px; max-height: min(62vh, 520px); overflow: auto; overscroll-behavior: contain; }
.pv-win.pv-min .pv-body { display: none; }

/* ---------- lignes clé/valeur ---------- */
.pv-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--pv-dim); }
.pv-row + .pv-row { border-top: 1px solid rgba(30, 39, 57, .55); }
.pv-row b { color: var(--pv-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-pos { color: var(--pv-vert); }
.pv-neg { color: var(--pv-rouge); }
.pv-note { margin: 10px 0 0; font-size: 11.5px; color: var(--pv-faint); line-height: 1.5; }

/* ---------- Registre ---------- */
.pv-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.pv-tabs span {
  font-size: 12px; padding: 6px 12px; border: 1px solid var(--pv-line); border-radius: 8px;
  color: var(--pv-dim); cursor: pointer;
}
.pv-tabs span.on { color: #05060a; background: var(--pv-or); border-color: var(--pv-or); font-weight: 700; }
table.pv-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.pv-tab th {
  text-align: left; font: 600 10px/1 'Clash Display', inherit; letter-spacing: .13em;
  color: var(--pv-faint); padding: 0 8px 8px; border-bottom: 1px solid var(--pv-line); white-space: nowrap;
}
table.pv-tab td { padding: 9px 8px; border-bottom: 1px solid rgba(30, 39, 57, .5); vertical-align: middle; }
table.pv-tab tr:hover td { background: rgba(255, 255, 255, .018); }
.pv-b { display: flex; align-items: center; gap: 9px; }
.pv-g { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #05060a; flex: none; }
.pv-lv { color: var(--pv-or); font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-n { color: var(--pv-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-up {
  appearance: none; cursor: pointer; white-space: nowrap;
  font: 500 11.5px/1 inherit; padding: 6px 11px; border-radius: 7px;
  border: 1px solid rgba(255, 209, 102, .42); color: var(--pv-or); background: rgba(255, 209, 102, .09);
}
.pv-up:hover { background: rgba(255, 209, 102, .17); }
.pv-up[disabled] { border-color: var(--pv-line); color: var(--pv-faint); background: none; cursor: not-allowed; }
.pv-empty { color: var(--pv-faint); font-size: 12.5px; padding: 14px 4px; line-height: 1.55; }

/* ---------- couches ---------- */
.pv-lyr {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--pv-dim); cursor: pointer;
}
.pv-lyr:hover { background: rgba(255, 255, 255, .04); color: var(--pv-ink); }
.pv-lyr.on { background: rgba(255, 209, 102, .10); color: var(--pv-ink); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .28); }
.pv-sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.pv-scale { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--pv-line); }
.pv-scale i { display: block; height: 7px; border-radius: 4px; margin-bottom: 6px; font-style: normal; }
.pv-scale span { font-size: 11px; color: var(--pv-faint); }

/* ---------- réglages ---------- */
.pv-sec { font: 600 10px/1 'Clash Display', inherit; letter-spacing: .14em; color: var(--pv-faint); margin: 14px 0 8px; }
.pv-sec:first-child { margin-top: 0; }
.pv-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(30, 39, 57, .5); }
.pv-opt span { color: var(--pv-dim); font-size: 12.5px; }
.pv-seg { display: flex; gap: 4px; }
.pv-seg button {
  appearance: none; cursor: pointer; font: 500 11.5px/1 inherit; padding: 6px 10px; border-radius: 7px;
  border: 1px solid var(--pv-line); background: none; color: var(--pv-dim);
}
.pv-seg button.on { color: #05060a; background: var(--pv-or); border-color: var(--pv-or); font-weight: 700; }
.pv-sw-tog {
  appearance: none; cursor: pointer; width: 40px; height: 22px; border-radius: 999px; flex: none;
  border: 1px solid var(--pv-line); background: #141b28; position: relative; transition: background .16s;
}
.pv-sw-tog:after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--pv-faint); transition: transform .16s, background .16s;
}
.pv-sw-tog.on { background: rgba(255, 209, 102, .22); border-color: rgba(255, 209, 102, .5); }
.pv-sw-tog.on:after { transform: translateX(18px); background: var(--pv-or); }

/* ---------- mobile : plus de bureau, des feuilles ----------
   Sur 390 px, des fenêtres flottantes se marchent dessus. On passe donc
   en feuille unique ancrée au-dessus du dock, une seule à la fois. */
@media (max-width: 720px) {
  .pv-win, .pv-win.pv-wide, .pv-win.pv-full {
    left: 8px !important; right: 8px; width: auto !important;
    top: auto !important; bottom: 62px !important; transform: none !important;
    max-height: 64vh; display: flex; flex-direction: column;
  }
  .pv-win header { cursor: default; }
  .pv-body { max-height: none; flex: 1; }
  /* on garde Bâtiment · Niv · Rendement · bouton : le reste ne tient pas sur 390 px
     et le rendement est justement l'information qui décide du clic */
  table.pv-tab th:nth-child(3), table.pv-tab td:nth-child(3),
  table.pv-tab th:nth-child(4), table.pv-tab td:nth-child(4) { display: none; }
  table.pv-tab th, table.pv-tab td { padding: 8px 5px; font-size: 12px; }
  .pv-b { gap: 7px; }
  .pv-up { padding: 6px 9px; font-size: 11px; }
  #pv-dock { left: 8px; right: 8px; bottom: 8px; justify-content: space-between; }
}

/* ---------- mode Registre plein écran (zéro 3D) ---------- */
body.pv-mode-registre #scene { filter: saturate(.25) brightness(.35); }
body.pv-mode-registre #hint, body.pv-mode-registre #fab-build, body.pv-mode-registre #fab-fleet { display: none !important; }
body.pv-mode-registre .pv-win.pv-full {
  left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
  width: min(880px, calc(100vw - 32px));
}
body.pv-mode-registre .pv-win.pv-full .pv-body { max-height: min(74vh, 700px); }

/* ============================================================
   PRZEBIEG DOTYKOWY — ten sam token space.hit.min = 44 px co w styles.css.
   Bramka B3 zmierzyła tu 4 przyciski doku (Registre / Ressources / …) o
   wymiarach 34×34 na kadrze 390 px. Blok dopisany NA KOŃCU pliku, żeby
   wygrać kaskadą bez ruszania cudzych reguł i cofać się skasowaniem bloku.
   ============================================================ */
@media (pointer: coarse), (max-width: 779px) {
  #pv-dock button { min-height: 44px; min-width: 44px; justify-content: center; padding: 10px 12px; }
  .pv-win header button { min-height: 44px; min-width: 44px; padding: 4px 8px; }
  .pv-seg button { min-height: 44px; padding: 8px 12px; }
}

/* ── STRUKTURA PIB (INC-3, 2026-08-04) ─────────────────────────────
   Trzy sektory jako jeden pasek. Szerokosc = udzial w wartosci dodanej.
   Kolory z tokenow motywu — zmiana skorki zmienia takze ten pasek. */
.gdp-struct { margin: 14px 0 6px; }
/* GATUNEK (INC-5). Lista osi: nazwa po lewej, KANONICZNY identyfikator po prawej.
   Identyfikator celowo monospace — to slownik kanonu, nie nazwa dla gracza;
   dziewiec z dziesieciu tabel osi w dok. 89 nie ma nazw wyswietlanych. */
.xen-box { margin: 14px 0 6px; }
.xen-list { list-style: none; margin: 8px 0 6px; padding: 0; }
.xen-list li { display: flex; justify-content: space-between; gap: 12px;
  padding: 3px 0; border-bottom: 1px solid var(--pv-line, rgba(255,255,255,.06)); }
.xen-list li:last-child { border-bottom: 0; }
.xen-list code { font-size: .82em; opacity: .78; white-space: nowrap; }
.gdp-bars { display: flex; height: 10px; border-radius: 5px; overflow: hidden;
            background: var(--pv-surface-fill, rgba(140,165,210,.07)); margin: 6px 0; }
.gdp-b { display: block; height: 100%; transition: width .3s ease; }
.gdp-b.p1 { background: var(--pv-color-res-minerai, #c9925a); }
.gdp-b.p2 { background: var(--pv-color-res-metal, #b8c4d4); }
.gdp-b.p3 { background: var(--pv-color-signal-ok, #7fe8a8); }
.tech-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0;
            border-top: 1px solid var(--pv-surface-line, rgba(140,165,210,.14)); }
.tech-row.on { background: var(--pv-surface-fill-soft, rgba(140,165,210,.06)); }
.tech-main { flex: 1; min-width: 0; }
.tech-side { text-align: right; white-space: nowrap; }
.tech-eff { color: var(--pv-color-signal-ok, #7fe8a8); font-size: .85em; margin: 2px 0 0; }
.tech-foot { opacity: .6; font-size: .85em; margin: 8px 0 0; }

/* MAGAZYN (zamowienie wlasciciela 04.08). Pasek pokazuje zapelnienie, bo
   „ile mam" bez „ile sie miesci" nie zmienia zadnej decyzji. Wiersze `flow`
   NIE MAJA paska — celowo: przeplyw nie ma czego zapelniac. */
.sto-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0;
  border-bottom: 1px solid var(--pv-line, rgba(255,255,255,.06)); }
.sto-row:last-child { border-bottom: 0; }
.sto-ic { font-size: 17px; line-height: 1.2; color: var(--c); width: 22px; text-align: center; flex: 0 0 22px; }
.sto-main { flex: 1 1 auto; min-width: 0; }
.sto-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.sto-top b { font-size: 13px; }
.sto-val { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sto-val i { font-style: normal; opacity: .55; }
.sto-val.neg, .sto-sub .neg { color: var(--danger); }
.sto-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); margin: 5px 0 4px; overflow: hidden; }
.sto-bar span { display: block; height: 100%; border-radius: 3px; }
.sto-sub { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; opacity: .7;
  font-variant-numeric: tabular-nums; }
.sto-row.full .sto-val { color: var(--danger); }
.sto-row.flow .sto-top b { opacity: .9; }

/* MODULY BUDYNKU. Koszt nastepnego i aktualny bonus stoja OBOK SIEBIE — bez tego
   gracz nie widzi malejacego zwrotu, a to on jest jedynym limitem. */
.mod-box { margin: 14px 0 6px; }
.mod-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.mod-slots { font-size: 10.5px; opacity: .6; }
.mod-row { display: flex; gap: 9px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--pv-line, rgba(255,255,255,.06)); }
.mod-row:last-of-type { border-bottom: 0; }
.mod-ic { font-size: 16px; color: var(--c); width: 20px; text-align: center; flex: 0 0 20px; }
.mod-main { flex: 1 1 auto; min-width: 0; }
.mod-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mod-top b { font-size: 12.5px; }
.mod-n { font-size: 11px; opacity: .55; font-variant-numeric: tabular-nums; }
.mod-sub { display: flex; gap: 8px; font-size: 10.5px; opacity: .75; font-variant-numeric: tabular-nums; }
.mod-sat { color: var(--danger); opacity: .9; }
.btn.tiny { padding: 5px 9px; font-size: 10.5px; border-radius: 8px; flex: 0 0 auto; min-height: 34px; }
.btn.tiny.off { opacity: .4; pointer-events: none; }


/* ── DRZEWKO BADAN: galezie ────────────────────────────────────────────────
   Naglowek galezi jest KOTWICA WZROKU (DESIGN_LOGIC R6): przy trzynastu
   pozycjach oko potrzebuje piatki punktow zaczepienia, inaczej czyta wszystko
   po kolei. Licznik „zdobyte/wszystkie" po prawej — postep bez osobnego panelu. */
.tech-branch { margin: 18px 0 0; }
.tech-branch:first-of-type { margin-top: 8px; }
.tech-bhead { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 6px 0 4px; border-bottom: 1px solid var(--pv-line-strong, rgba(140,165,210,.28));
  letter-spacing: .06em; font-size: .78em; text-transform: uppercase; }
.tech-bhead b { color: var(--cs-accent, #ffd166); }
.tech-bhead span { color: var(--pv-color-text-dim, #93a4c4); font-variant-numeric: tabular-nums; }
/* Wiersz zablokowany: przygaszony, ale CZYTELNY — opis dalej uczy, do czego
   ta technologia prowadzi. Gaszenie do zera zrobiloby z drzewka mgle. */
.tech-row.locked { opacity: .62; }
.tech-row.locked .tech-main b { color: var(--pv-color-text-dim, #93a4c4); }
.tech-need { margin: 4px 0 0; font-size: .85em; color: var(--pv-color-signal-warn, #ffb454); }
.tech-need b { color: inherit; }

/* ── DRZEWKO: ZAKLADKI KATEGORII ──────────────────────────────────────────
   45 technologii w jednej kolumnie to ponad cztery ekrany przewijania.
   Trzy zakladki (uklad Victorii 3) zamieniaja przewijanie na WYBOR. Licznik
   przy nazwie mowi, ile juz zdobyte, wiec zakladka niesie informacje nawet
   nieotwarta — inaczej gracz musi kliknac, zeby dowiedziec sie, czy warto. */
.tech-tabs { display: flex; gap: 6px; margin: 10px 0 2px; flex-wrap: wrap; }
.tech-tab { flex: 1 1 30%; min-width: 96px; display: flex; flex-direction: column;
  gap: 2px; padding: 8px 10px; cursor: pointer; font: inherit; text-align: left;
  letter-spacing: .07em; font-size: .78em; text-transform: uppercase;
  background: var(--pv-surface-fill-soft, rgba(140,165,210,.06));
  border: 1px solid var(--pv-line, rgba(140,165,210,.18));
  border-radius: 4px; color: var(--pv-color-text-dim, #93a4c4); }
.tech-tab i { font-style: normal; font-variant-numeric: tabular-nums; opacity: .75; }
.tech-tab:hover { border-color: var(--cs-accent, #ffd166); }
/* ⚠️ `color` na <button> NIE dziedziczy — przegladarka wymusza `buttontext`
   (czarny). Ta sama pulapka wywrocila juz chipy paska; tutaj kolor jest
   podany wprost przy KAZDYM stanie, nie tylko przy aktywnym. */
.tech-tab.on { color: var(--pv-color-text, #e8eef8);
  border-color: var(--cs-accent, #ffd166);
  background: var(--pv-surface-fill, rgba(140,165,210,.12)); }
.tech-tab.on i { color: var(--cs-accent, #ffd166); opacity: 1; }

/* ── PRZEGLAD LANCUCHOW PRZEROBU ──────────────────────────────────────────
   Pasek mierzy NASYCENIE (czy jest wsad), nie moc. To rozroznienie jest cala
   trescia tego panelu: zaklad na maksie i zaklad bez wsadu maja to samo „/h",
   a robia zupelnie co innego. */
.chn-row { padding: 8px 0; border-bottom: 1px solid var(--pv-line, rgba(140,165,210,.12)); }
.chn-main { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.chn-main b { font-weight: 600; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.chn-arrow { color: var(--pv-color-text-dim, #93a4c4); margin: 0 2px; }
.chn-cap { font-variant-numeric: tabular-nums; color: var(--pv-color-text-dim, #93a4c4); white-space: nowrap; }
.chn-row .sto-bar { margin: 5px 0 3px; }
.chn-row .sto-bar span { background: var(--pv-color-signal-ok, #7fe8a8); }
.chn-row.hungry .sto-bar span { background: var(--pv-color-signal-warn, #ffb454); }
.chn-row.hungry .sto-sub { color: var(--pv-color-signal-warn, #ffb454); }

/* ── PANEL BUDOWY: ZAKLADKI KATEGORII ─────────────────────────────────────
   67 budynkow w jednej kolumnie to piec ekranow przewijania. Licznik przy
   nazwie mowi, ILE JUZ STOI w tej kategorii — dzieki temu zakladka niesie
   informacje nawet nieotwarta i widac, gdzie sa luki. */
.cp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 6px; }
.cp-tab { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
  cursor: pointer; font: inherit; font-size: .74em; letter-spacing: .05em;
  text-transform: uppercase; border-radius: 3px;
  background: var(--pv-surface-fill-soft, rgba(140,165,210,.06));
  border: 1px solid var(--pv-line, rgba(140,165,210,.18));
  color: var(--pv-color-text-dim, #93a4c4); }
.cp-tab i { font-style: normal; font-variant-numeric: tabular-nums; opacity: .7; }
.cp-tab:hover { border-color: var(--cs-accent, #ffd166); }
/* `color` na <button> nie dziedziczy — podany wprost przy kazdym stanie. */
.cp-tab.on { color: var(--pv-color-text, #e8eef8);
  border-color: var(--cs-accent, #ffd166);
  background: var(--pv-surface-fill, rgba(140,165,210,.12)); }
.cp-tab.on i { color: var(--cs-accent, #ffd166); opacity: 1; }

/* Chip zywnosci — ten sam jezyk co pozostale chipy paska; `deficit` juz
   istnieje i maluje na czerwono, wiec glod czyta sie tak samo jak brak energii. */
.hud-chip.food .res-glyph { --c: #8fe86b; }

/* ── PRZEGLAD IMPERIUM (dolny pasek) ──────────────────────────────────────
   Tabela, nie karty: przy kilkudziesieciu swiatach karty daja przewijanie,
   a przewijanie jest przeciwienstwem przegladu. Wiersz pilny ma pasek z lewej,
   nie tlo — tlo na kilkunastu wierszach naraz przestaje cokolwiek znaczyc. */
.ap-tab { width: 100%; border-collapse: collapse; font-size: .82em; }
.ap-tab th { text-align: left; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; font-size: .82em; padding: 4px 6px;
  color: var(--pv-color-text-dim, #93a4c4);
  border-bottom: 1px solid var(--pv-line-strong, rgba(140,165,210,.28)); }
.ap-tab td { padding: 5px 6px; border-bottom: 1px solid var(--pv-line, rgba(140,165,210,.12)); }
.ap-row { cursor: pointer; }
.ap-row:hover td { background: var(--pv-surface-fill-soft, rgba(140,165,210,.06)); }
.ap-name { font-weight: 600; }
.ap-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-num.neg { color: var(--pv-color-signal-warn, #ffb454); }
.ap-al { color: var(--pv-color-text-dim, #93a4c4); font-size: .92em; }
.ap-row.uwaga td:first-child { box-shadow: inset 3px 0 0 var(--pv-color-signal-warn, #ffb454); }
.ap-row.pilne td:first-child { box-shadow: inset 3px 0 0 var(--pv-color-signal-bad, #ff6b8a); }
.ap-row.pilne .ap-al { color: var(--pv-color-signal-bad, #ff6b8a); }

/* ── DRZEWKO BADAN: GRAF ZALEZNOSCI ───────────────────────────────────────
   Kolumna = era, wezel = technologia, linia = wymaganie. Zamowienie: „drzewko
   jak w Civilization albo Victorii 3" — tam zaleznosc widac ZANIM sie cokolwiek
   przeczyta, bo jest linia.
   ⚠️ PRZEWIJANIE POZIOME WE WLASNYM POJEMNIKU: piec kolumn nie miesci sie w
   panelu, a strona pod spodem NIE MOZE jechac w bok. */
.tech-graf { overflow-x: auto; overflow-y: hidden; padding: 8px 2px 10px;
  margin: 4px 0 2px; -webkit-overflow-scrolling: touch; }
.tg-plotno { position: relative; }
.tg-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
/* Linia przygaszona domyslnie: przy kilkunastu naraz pelna jasnosc daje siatke,
   z ktorej nic nie wynika. Zapala sie dopiero wybrany lancuch. */
.tg-l { fill: none; stroke: var(--pv-line-strong, rgba(140,165,210,.28)); stroke-width: 1.4; }
.tg-l.on { stroke: var(--pv-color-signal-ok, #7fe8a8); opacity: .55; }
.tg-l.hi { stroke: var(--cs-accent, #ffd166); stroke-width: 2.2; opacity: 1; }
.tg-n { position: absolute; display: flex; flex-direction: column; justify-content: center;
  gap: 1px; padding: 3px 7px; cursor: pointer; font: inherit; text-align: left;
  border-radius: 3px; overflow: hidden;
  background: var(--pv-surface-fill, rgba(140,165,210,.12));
  border: 1px solid var(--pv-line, rgba(140,165,210,.18));
  color: var(--pv-color-text-dim, #93a4c4); }
.tg-n span { font-size: 10.5px; line-height: 1.15; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tg-n i { font-style: normal; font-size: 9px; opacity: .75; font-variant-numeric: tabular-nums; }
.tg-n.zdobyta { color: var(--pv-color-text, #e8eef8);
  border-color: var(--pv-color-signal-ok, #7fe8a8);
  box-shadow: inset 2px 0 0 var(--pv-color-signal-ok, #7fe8a8); }
.tg-n.wolna { color: var(--pv-color-text, #e8eef8); border-color: var(--cs-accent, #ffd166); }
.tg-n.zamknieta { opacity: .55; }
.tg-n.hi { border-color: var(--cs-accent, #ffd166);
  box-shadow: 0 0 0 1px var(--cs-accent, #ffd166); }
/* CO TECHNOLOGIA OTWIERA. Zaklady i jednostki rozroznione kolorem obwodki,
   nie ikona — ikona wymagalaby legendy, a obwodka czyta sie od razu obok
   nazwy, ktora i tak mowi, co to jest. */
.tech-opens { margin: 3px 0 0; font-size: 10.5px; opacity: .92;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.tech-op { display: inline-block; padding: 0 6px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap; line-height: 1.5; }
.tech-op.b { color: var(--pv-color-signal-ok, #7fe8a8); }
.tech-op.j { color: var(--cs-accent, #ffd166); }
/* WEZEL-DUCH: wymaganie z INNEJ zakladki, wpuszczone rynna po lewej.
   Kreskowana ramka i kursywa mowia „to nie stad" bez legendy; klikniecie
   przenosi na zakladke, gdzie ta technologia naprawde stoi. */
.tg-n.obca { border-style: dashed; opacity: .8; background: transparent; }
.tg-n.obca span { font-style: italic; }
.tg-n.obca::after { content: '›'; position: absolute; right: 5px; top: 50%;
  transform: translateY(-50%); font-size: 13px; opacity: .6; }
.tg-n.obca:hover { opacity: 1; border-style: solid; }
.tg-n:hover { border-color: var(--cs-accent, #ffd166); }
/* blysk wiersza, do ktorego prowadzi wezel */
.tech-row.tech-ping { animation: techPing 1.4s ease-out; }
@keyframes techPing {
  0% { background: var(--pv-surface-fill, rgba(140,165,210,.20)); }
  100% { background: transparent; }
}

/* ===== ZWIJANE LANCUCHY PRODUKCYJNE w liscie budowy =====
   Grupa odpowiada na pytanie „skad wziac X", a naglowek ma wystarczyc do
   decyzji BEZ rozwijania: ile masz, ile mozesz postawic teraz, ile daje/h. */
.cp-grp { border: 1px solid var(--panel-border, rgba(255,255,255,.10)); border-radius: 12px;
  margin: 0 0 8px; background: rgba(255,255,255,.02); overflow: hidden; }
.cp-grp > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 10px 12px; user-select: none;
}
.cp-grp > summary::-webkit-details-marker { display: none; }
.cp-grp > summary::before {
  content: '▸'; opacity: .5; flex: 0 0 auto; transition: transform .15s ease; font-size: 12px;
}
.cp-grp[open] > summary::before { transform: rotate(90deg); }
.cp-grp > summary:hover { background: rgba(255,255,255,.05); }
.cp-grp .grp-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cp-grp .grp-t { font-weight: 650; letter-spacing: .02em; }
.cp-grp .grp-l { font-style: normal; font-weight: 400; font-size: 11px; opacity: .5; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-grp .grp-n { flex: 0 0 auto; font-size: 10.5px; opacity: .6; text-align: right; letter-spacing: .02em; }
.cp-grp .grp-n b { display: block; font-size: 14px; opacity: .95; font-weight: 700; }
.cp-grp .grp-n.moz b { color: var(--pv-emit-gold, #ffd166); }
.cp-grp .grp-d { margin: 0 12px 8px; font-size: 11.5px; opacity: .62; line-height: 1.45;
  border-left: 2px solid var(--panel-border, rgba(255,255,255,.14)); padding-left: 9px; }
.cp-grp .cp-row:last-child { border-bottom: 0; }
@media (max-width: 780px) {
  .cp-grp .grp-l { display: none; }
  .cp-grp .grp-n { font-size: 9.5px; }
}

/* ===== KATALOG JEDNOSTEK I SPECJALIZACJE (panel wojsk) =====
   💣 Panel pokazywal dotad tylko swiaty z koszarami — bez nich gracz widzial
   jedno zdanie. Jedenascie typow z pelnymi danymi bojowymi bylo w silniku
   i nie istnialo dla gracza. */
.jed-row.off { opacity: .55; }
.jed-akcje { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.jed-koszt { display: flex; gap: 6px; font-size: 10.5px; opacity: .8; }
.jed-btns { display: flex; gap: 4px; }
.jed-blok { font-size: 10px; opacity: .6; max-width: 130px; text-align: right; line-height: 1.25; }
.jed-cecha { opacity: .55; font-size: 10.5px; margin-top: 2px; }
.rola { font-size: 10px; padding: 1px 6px; border-radius: 999px; letter-spacing: .04em;
  border: 1px solid currentColor; }
.rola.szturm { color: #ff8f6b; } .rola.ostrzal { color: #8fb8ff; }
.rola.lowca { color: #7fe8a8; } .rola.garnizon { color: #c8b8ff; }
.rola-cykl { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
.rola-cykl i { opacity: .45; font-style: normal; }
.sh-lock .btn { margin-top: 10px; }

/* ===== KANTOR (comptoir) w oknie zasobow =====
   💣 `Sim.convert` mial zero wywolan poza silnikiem — kantor istnial w grze
   i tylko AI potrafila go otworzyc. To jest wyjscie z zakleszczenia surowca. */
.pv-wym { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--pv-line, rgba(255,255,255,.10)); }
.pv-wym-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pv-wym-h b { letter-spacing: .04em; }
.pv-wym-h span { font-size: 10.5px; opacity: .6; }
.pv-wym-b { display: inline-block; margin: 0 4px 4px 0; padding: 4px 8px; border-radius: 8px;
  font-size: 10.5px; cursor: pointer; color: inherit;
  background: rgba(255,255,255,.06); border: 1px solid var(--pv-line, rgba(255,255,255,.12)); }
.pv-wym-b:hover:not(.off) { background: rgba(255,255,255,.13); }
.pv-wym-b.off { opacity: .38; cursor: default; }
.pv-wym-n { font-size: 10px; opacity: .55; line-height: 1.4; margin: 6px 0 0; }