/* ============================================================
   Grindveil — GILDIA, strona glowna (guild.css)

   Napisana od nowa 01.09.2026. Poprzednia wersja mieszkala w ui.js
   jako piecset linii sklejanego `style="..."` i pokazywala dwanascie
   jednakowych kafelkow naraz — w tym dwa wygaszone „SOON" i „Opusc
   gildie" tej samej wielkosci co „Wojny gildii". Gracz po wejsciu nie
   wiedzial, gdzie patrzec, bo wszystko krzyczalo tak samo glosno.

   POMYSL: w gildii licza sie dwie rzeczy z zegarem — WOJNA i WYPRAWA
   W GLEBINY. Reszta (budynki, drzewko, ranking, dziennik, ustawienia)
   to miejsca, do ktorych sie idzie z wlasnej woli. Strona jest wiec
   ulozona w tej kolejnosci:

     HERB     kim jestesmy: sztandar, poziom, skarbiec
     TERAZ    co ma zegar — POKAZUJE SIE TYLKO, GDY COS TRWA
     HALA     szesc miejsc, do ktorych sie wchodzi
     ZALOGA   kto jest w srodku

   „TERAZ" nie ma stanu pustego. Gdy nic nie trwa, pasa po prostu nie
   ma, a strona jest cicha. To jest cala odpowiedz na „ma byc czysto".

   KOLOR NIESIE PILNOSC. Jasne zloto (--gold-soft) tylko na liczbach,
   ktore warto przeczytac, i na pasie TERAZ. Zloto konstrukcyjne
   (--gold-deep) na ramkach i etykietach. Do 01.09 cala strona byla
   w #FFD700 i przez to nic nie bylo wazniejsze od niczego.

   Wszystkie kolory i promienie pochodza z :root w css/style.css —
   zasada z REDESIGN-PLAN.md. Jedyny wyjatek to --ember, dopisany tam
   razem z ta przebudowa, bo pomaranczowy wojny zyje w grze od dawna.
   ============================================================ */

/* ── Plotno ───────────────────────────────────────────────── */
/* Panel gildii jest w style.css scisniety do 700 px i wysrodkowany —
   tak wygladala stara strona i tak wygladaja pozostale zakladki. Hala
   ma sciane po prawej z zaloga, wiec potrzebuje calej szerokosci. Klase
   dokłada guild-home.js przy montowaniu, zeby regula nie dotykala
   niczego innego, co kiedykolwiek stanie w tym panelu. */
/* Selektor musi niesc `#panelGuild`, a nie sama klase: ograniczenie
   w style.css stoi na identyfikatorze i sama klasa go nie przebije.

   WYSOKOSC BIERZE SIE Z KONTENERA, nie z okna. Bylo `calc(100vh - 56px)`
   i to jest zle na dwa sposoby: 56 px bylo zgadniete, a prawdziwa
   wysokosc paska nawigacji zalezy od ekranu. Panel konczyl sie wyzej niz
   #mainContent i pod nim zostawal pas w kolorze strony (--bg, jasniejszy
   fiolet) — tlo hali wygladalo na ucięte rowna pozioma kreska.
   Rozpuszczanie gradientu tego nie naprawilo, bo problem nie byl
   w gradiencie, tylko w tym, ze panel byl za krotki.

   #mainContent ma `position: relative`, wiec `inset: 0` przykleja panel
   dokladnie do jego krawedzi — na kazdym ekranie i przy kazdej wysokosci
   paska. */
#panelGuild.gh-panel, .gh-panel {
  max-width: none; margin: 0; padding: 0;
  position: absolute; inset: 0;
  overflow: hidden;
}
/* TU BYL „uciety dol". Zmierzone w grze: panel mial pelna wysokosc
   (1304 px), ale `.gh` w srodku tylko 1124 — bo style.css dokłada
   `#mainContent > .tab-panel { padding-bottom: 180px !important }`,
   zeby tresc zwyklych zakladek nie chowala sie pod paskiem nawigacji.
   Przy `height: 100%` te 180 px wypadalo POZA hale i widac tam bylo
   tlo strony: rowna pozioma kreska nad paskiem.

   Dwie poprzednie proby (rozpuszczenie gradientu, `inset: 0` na panelu)
   nie mogly pomoc, bo zadna nie dotykala przyczyny. Zapas na pasek
   nawigacji nosi teraz `.gh-main` — hala siega az do dolu okna,
   a przewijana tresc i tak konczy sie nad paskiem.

   Selektor musi byc rownie mocny: `!important` przebija sie tylko
   wyzsza szczegolowoscia, stad `#mainContent >`. */
#mainContent > #panelGuild.gh-panel { padding-bottom: 0 !important; }
/* SIATKA, nie flex. Rozmowa musi stac raz jako WLASNA KOLUMNA (szeroki
   ekran), raz jako pas pod hala (sredni), a raz w zwyklym toku (telefon)
   — i za kazdym razem jest tym SAMYM elementem w DOM-ie. Flex tego nie
   potrafi, bo kolejnosc i miejsce sa w nim jedna osia; siatka z nazwanymi
   obszarami przestawia ten sam element bez ruszania kodu.

   Kolumny hali zaczynaja sie tam, gdzie konczy sie #mainContent, wiec
   panel z profilem i pasek wydarzen po lewej nigdy niczego nie zasloni —
   panel gildii jest ICH sasiadem, a nie warstwa nad nimi. */
.gh {
  height: 100%;
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px 296px;
  grid-template-rows: 100%;
  grid-template-areas: "main talk roster";
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
/* Rozmowa zwinieta: kolumna kurczy sie do PASKA (38 px), a nie znika —
   pasek mowi, gdzie ona poszla. Hala rozszerza sie na zwolnione miejsce
   i wraca na srodek sama, bo `.gh-wrap` ma `margin: 0 auto`. */
.gh.no-talk { grid-template-columns: minmax(0, 1fr) 38px 296px; }

/* Pasek zwinietej rozmowy. Napis pionowo, bo pasek ma 38 px szerokosci
   i poziomy zmiescilby jedna litere w kazdym z czternastu jezykow. */
.gh-talk-rail {
  grid-area: talk;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 16px 0;
  background: linear-gradient(180deg, rgba(58, 42, 110, 0.5), rgba(6, 3, 16, 0.5));
  border: none; border-left: 1px solid rgba(200, 168, 78, 0.2);
  color: var(--text-dim); cursor: pointer; font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.gh-talk-rail:hover { background: linear-gradient(180deg, rgba(200, 168, 78, 0.16), rgba(6, 3, 16, 0.5)); color: var(--text); }
.gh-talk-rail:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -3px; }
.gh-talk-rail img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.gh-talk-rail span {
  writing-mode: vertical-rl;
  font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  white-space: nowrap;
}
.gh-main { grid-area: main; }
.gh-roster { grid-area: roster; }
.gh-talk-col {
  grid-area: talk;
  /* Tlo hali jest pozycjonowane z z-index 0, wiec przykrywa kazda tresc,
     ktora nie ma wlasnej warstwy — dokladnie tak jak przykrylo te kolumne,
     zanim dostala te dwie linijki. Hala i zaloga maja je od poczatku. */
  position: relative; z-index: 1;
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  padding: 18px 0 190px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.gh-talk-col .gh-rule { margin-top: 0; }
.gh-talk-col .gh-talk { flex: 1; min-height: 0; margin-top: 0; }

/* Ponizej 1400 px trzy kolumny robia sie za waskie na cokolwiek: rozmowa
   schodzi POD hale, ale zostaje po lewej od zalogi. */
@media (max-width: 1400px) {
  .gh.no-talk .gh-talk-call { display: inline-flex; }
  .gh {
    grid-template-columns: minmax(0, 1fr) 296px;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "main roster" "talk roster";
  }
  .gh.no-talk {
    grid-template-columns: minmax(0, 1fr) 296px;
    grid-template-rows: 100%; grid-template-areas: "main roster";
  }
  /* Pasek ma sens tylko przy trzech kolumnach — nizej rozmowa stoi POD
     hala, wiec „zwiniete do prawej" nie opisuje niczego prawdziwego. */
  .gh-talk-rail { display: none; }
  .gh-talk-col {
    padding: 0 20px 24px;
    border-left: none;
    height: 300px;
  }
}
/* Tlo hali. Ciemne U GORY, jasniejsze u dolu — odwrotnie niz zwykle,
   bo caly tekst siedzi w gornej polowie, a dolna jest pusta i to
   wlasnie tam hala ma byc widoczna. */
.gh-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.gh-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: saturate(0.8) brightness(0.9);
}
.gh-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 100%, transparent 20%, rgba(10, 6, 22, 0.5) 100%),
    /* Najjasniej w dwoch trzecich wysokosci — tam widac posadzke — a na
       samym dole ZNOWU do pelnej czerni. Bez tego ostatniego stopnia hala
       konczy sie ostra pozioma kreska w miejscu, w ktorym konczy sie panel,
       i wyglada na uciete tlo. Wysokosc panelu zalezy od paska nawigacji,
       wiec kreska wypada w innym miejscu na kazdym ekranie i nie da sie jej
       ustawic — mozna ja tylko rozpuscic. */
    linear-gradient(180deg,
      rgba(10, 6, 22, 0.97) 0%,
      rgba(10, 6, 22, 0.93) 38%,
      rgba(10, 6, 22, 0.66) 66%,
      rgba(10, 6, 22, 0.90) 88%,
      rgba(10, 6, 22, 1) 100%);
}
.gh-main {
  position: relative; z-index: 1;
  min-width: 0; min-height: 0;
  /* BLOK, nie flex, i to musi tu stac jawnie. `style.css` ma wlasny wpis
     `.gh-main` po starym „guild hubie" (`.gh-layout`, `.gh-tiles`), ktory
     ustawia `display:flex; flex-direction:column`. Ta sama nazwa klasy,
     ta sama szczegolowosc — wiec `.gh-wrap` stawal sie elementem kolumny
     flex ze `flex-shrink:1` i przy dluzszej hali KURCZYL SIE do wysokosci
     okna zamiast rosnac. Jego dzieci wychodzily poza niego, `scrollHeight`
     zostawal rowny `clientHeight`, wiec kolumna nie miala czego przewijac,
     a dolne dwa rzedy drzwi i pasek zarzadzania chowaly sie pod nawigacja.

     Widac to bylo dopiero od osmiorga drzwi (04.09, doszly Rozkazy):
     przy siedmiu hala miescila sie w oknie i nic nie wystawalo. */
  display: block;
  min-height: 0;
  /* Zapas na pasek nawigacji nosi przewijana kolumna, a nie panel — dzieki
     temu tlo hali siega dolu okna, a tekst nie. Wysokosc paska MIERZY
     js/ui.js do `--gv-nav-h`: pasek rosnie, gdy dochodzi wstega Swiatowego
     Bossa, wiec liczba wpisana na sztywno starcza tylko do pierwszej takiej
     zmiany. */
  padding: 24px 24px calc(var(--gv-nav-h, 128px) + var(--gv-safe-b, env(safe-area-inset-bottom, 0px)) + 48px);
  overflow-y: auto;
}
/* Kolumna jest wysoka na cala hale, zeby czat na dole mial sie na czym
   rozciagnac. Bez `min-height` konczylaby sie pod ostatnim guzikiem
   i zostawala pusta polowa ekranu. */
.gh-wrap {
  max-width: 760px; margin: 0 auto;
  min-height: 100%; display: flex; flex-direction: column;
}

/* ── Naglowek sekcji ──────────────────────────────────────── */
/* Ten sam naglowek dzialu, co na ekranie Rozkazow (`.go-rule`): Cinzel
   w zlocie na srodku, po obu stronach linia zakonczona filigranem. Filigran
   jest SVG wpisanym w CSS (`--gv-filigree`), wiec nie potrzebuje pliku
   i skaluje sie bez rozmycia. */
:root {
  --gv-filigree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7H74' stroke='%23C8A84E' stroke-opacity='.6'/%3E%3Cpath d='M74 7c6-8 14-8 19 0c-5 8-13 8-19 0z' fill='none' stroke='%23FFD46A' stroke-width='1.2'/%3E%3Ccircle cx='83.5' cy='7' r='1.4' fill='%23FFD46A'/%3E%3Cpath d='M93 7c4-5 8-5 11 0' fill='none' stroke='%23FFD46A' stroke-opacity='.8'/%3E%3Crect x='107.5' y='3' width='8' height='8' transform='rotate(45 111.5 7)' fill='%23FFD46A'/%3E%3C/svg%3E");
}
.gh-rule {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 26px 0 14px; text-align: center;
}
.gh-rule::before, .gh-rule::after {
  content: ''; flex: 1; height: 14px; min-width: 40px;
  background:
    var(--gv-filigree) right center / 120px 14px no-repeat,
    linear-gradient(90deg, transparent, rgba(200, 168, 78, 0.5)) left center / calc(100% - 118px) 1px no-repeat;
}
.gh-rule::after { transform: scaleX(-1); }
.gh-rule > span {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-soft);
  white-space: nowrap;
}

/* ══ HERB ═════════════════════════════════════════════════════
   Sztandar niesie trzy rzeczy naraz — herb, poziom i postep — zamiast
   trzech osobnych wierszy wysrodkowanych jeden pod drugim. */
/* Herb stoi na PLAKIECIE, tej samej co naglowek Rozkazow: zlota ramka,
   fioletowy bazalt, blask od gory. Do 04.09 lezal luzem na tle hali
   i tekst tonal w kamieniu. */
.gh-crest {
  position: relative; overflow: hidden;
  display: flex; gap: 22px; align-items: flex-start;
  padding: 22px 24px 20px;
  border: 1px solid rgba(200, 168, 78, 0.38);
  border-radius: 24px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(200, 168, 78, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(64, 46, 122, 0.62), rgba(18, 11, 38, 0.94) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
              inset 0 -16px 24px -18px rgba(0, 0, 0, 0.9),
              0 8px 26px rgba(6, 3, 16, 0.6);
}

.gh-standard { flex: 0 0 auto; width: 96px; position: relative; }
.gh-standard-cloth {
  position: relative;
  width: 96px; padding: 14px 0 22px;
  min-height: 124px;
  background: url('../img/guild/standard-cloth.webp') center top / 100% 100% no-repeat;
  box-shadow: var(--shadow-card);
  transform-origin: 50% 0;
  animation: gh-sway 7s ease-in-out infinite;
}
.gh-standard-cloth img {
  display: block; width: 60px; height: 60px; margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}
/* Poziom wybity na sztandarze. Cinzel tylko tutaj i na nazwie — reszta
   strony jest Interem, bo szeryfy w 10 px robia sie kaszą. */
.gh-standard-lv {
  display: block; margin-top: 6px; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1; color: var(--gold-soft);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.gh-standard-lv small {
  display: block; font-family: var(--font-body);
  font-size: 8px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--gold-deep); margin-top: 2px;
}
@keyframes gh-sway {
  0%, 100% { transform: rotate(-0.7deg); }
  50%      { transform: rotate(0.7deg); }
}

.gh-ident { position: relative; flex: 1; min-width: 0; padding-top: 2px; }
.gh-name {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1.1; letter-spacing: 0.04em;
  color: var(--gold-soft);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 22px rgba(255, 212, 106, 0.3);
  margin: 0 0 8px;
}
.gh-tag {
  font-family: var(--font-body); font-size: 12px; font-weight: 800;
  letter-spacing: 1.5px; color: var(--gold-deep);
}

/* Postep: jedna nitka, nie kafelek z ramka. Liczby po prawej, tabularne. */
.gh-xp { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gh-xp .gvk-bar { flex: 1; max-width: 300px; }
.gh-xp-num { font-size: 11px; color: var(--text-dim); white-space: nowrap; }

.gh-motd {
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
  font-style: italic;
  border-left: 2px solid rgba(200, 168, 78, 0.3);
  padding: 2px 0 2px 10px;
  margin-top: 8px;
  max-width: 460px;
}

/* Skarbiec: kuta plakietka jak pieczecie na ekranie Rozkazow — zloto,
   krysztaly i zaloga to trzy pola przedzielone szczelina, a guziki stoja
   obok na tej samej belce. */
.gh-purse {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 4px 4px 4px 0;
  background: linear-gradient(180deg, rgba(51, 36, 95, 0.9), rgba(22, 16, 44, 0.95));
  border: 1px solid rgba(255, 212, 106, 0.32);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 14px rgba(6, 3, 16, 0.5);
}
.gh-coin {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.gh-coin img { width: 20px; height: 20px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.gh-coin b {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--gold-soft); text-shadow: 0 0 12px rgba(255, 212, 106, 0.35);
}
.gh-coin.crys b { color: #d9b8ff; text-shadow: 0 0 12px rgba(155, 123, 255, 0.4); }
/* Zaloga w Interze, nie w Cinzelu: szeryfowa jedynka wyglada jak „I". */
.gh-coin.mem b { font-family: var(--font-body); font-weight: 800; font-size: 15px; color: var(--text-bright); text-shadow: none; }
.gh-coin.mem small { font-size: 10px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.04em; }
.gh-purse-sep { display: none; }
.gh-purse-acts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 4px; }

/* ── Guziki hali ──────────────────────────────────────────────
   Wlasny krój, nie .gvk-btn. Kit rysuje plaska pigulke, ktora na tle
   kamiennej hali wyglada jak przycisk z formularza — Mark napisal
   wprost „guziki sa brzydkie, proste". Ten ma trzy warstwy jak kazdy
   inny przedmiot w tej grze: ciemna plyta, zlota nitka na krawedzi
   i cienki blysk u gory. Ikona jest czescia guzika, a nie ozdoba —
   dzieki niej etykieta moze byc krotka w kazdym z czternastu jezykow. */
.gh-act {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  background: linear-gradient(180deg, rgba(58, 42, 110, 0.92), rgba(26, 16, 53, 0.92));
  border: 1px solid rgba(200, 168, 78, 0.3);
  border-radius: 10px;
  color: var(--text); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(6, 3, 16, 0.45);
  transition: transform 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}
.gh-act img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.gh-act:hover { transform: translateY(-1px); border-color: rgba(255, 212, 106, 0.55); filter: brightness(1.1); }
.gh-act:active { transform: translateY(0) scale(0.97); }
.gh-act:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
/* Liczba w etykiecie („Podatek 10%") — ta sama waga co reszta, ale
   w zlocie, zeby dalo sie ja przeczytac bez czytania calej etykiety. */
.gh-act .n { color: var(--gold-soft); }
.gh-act .n.off { color: var(--text-dim); }

/* Wplata jest jedyna akcja na tej stronie, ktora cos KOSZTUJE — i jedyna
   zlota. Reszta tylko otwiera okna. */
.gh-act.gold {
  background: linear-gradient(180deg, #FFE08A, #E9A93A);
  border-color: rgba(255, 255, 255, 0.35); color: #2a1c04;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 14px rgba(233, 169, 58, 0.28);
}
.gh-act.gold .n { color: #2a1c04; }
.gh-act.sm { padding: 7px 12px; font-size: 11px; }
.gh-act.sm img { width: 16px; height: 16px; }
.gh-act.danger {
  background: linear-gradient(180deg, rgba(70, 26, 34, 0.85), rgba(30, 12, 20, 0.85));
  border-color: rgba(255, 71, 87, 0.32); color: #ff9aa2;
}
.gh-act.danger:hover { border-color: rgba(255, 71, 87, 0.7); }
.gh-badge {
  display: inline-block; min-width: 17px; padding: 0 5px;
  background: var(--loss); color: #fff; border-radius: 9px;
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
}

/* ══ TERAZ ════════════════════════════════════════════════════
   Jedyne miejsce na stronie z poswiata. Jesli swieci, znaczy ze cos
   ucieka. Pasa nie ma, gdy nic nie trwa. */
.gh-now { display: flex; flex-direction: column; gap: 8px; }
.gh-live {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.14), rgba(255, 107, 53, 0.03) 60%, transparent);
  border: 1px solid rgba(255, 107, 53, 0.35);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius);
  cursor: pointer;
  /* To jest <button>, a przegladarka srodkuje w nim tekst — bez tego
     tytul i podpis odjezdzaja od ikony na srodek pasa. */
  text-align: left; font-family: inherit; color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gh-live:hover { border-color: rgba(255, 107, 53, 0.7); }
.gh-live:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.gh-live.abyss {
  background: linear-gradient(90deg, rgba(255, 71, 87, 0.14), rgba(255, 71, 87, 0.03) 60%, transparent);
  border-color: rgba(255, 71, 87, 0.35);
  border-left-color: var(--loss);
}
.gh-live.abyss:hover { border-color: rgba(255, 71, 87, 0.7); }
.gh-live.defend {
  background: linear-gradient(90deg, rgba(79, 172, 254, 0.14), rgba(79, 172, 254, 0.03) 60%, transparent);
  border-color: rgba(79, 172, 254, 0.35);
  border-left-color: var(--info);
}
.gh-live-ic { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }
.gh-live-txt { flex: 1; min-width: 0; }
.gh-live-txt b {
  display: block; font-size: 13px; font-weight: 800; color: var(--text-bright);
  letter-spacing: 0.3px;
}
.gh-live-txt span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
/* Zegar jest najwazniejsza liczba na tym pasie — dostaje wlasny stopien. */
.gh-clock {
  font-size: 16px; font-weight: 800; color: var(--gold-soft);
  white-space: nowrap; letter-spacing: 0.5px;
}

/* ══ HALA ═════════════════════════════════════════════════════
   Szesc miejsc. Nie dwanascie, nie „SOON". Kazde ma nazwe i JEDNA
   liczbe, ktora mowi, w jakim jest stanie. */
.gh-hall {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
/* ── Drzwi hali ───────────────────────────────────────────────
   To sa DRZWI, a nie kafelki z listy. Wczesniej byly poziomym
   prostokatem z obrazkiem po lewej — na tle kamiennej hali czytalo sie
   to jak wiersz tabeli i Mark dwa razy napisal, ze sa brzydkie.

   Teraz kazde jest WNEKA W SCIANIE: luk archiwolty, w srodku oswietlona
   nisza z ikona, pod spodem kuta tabliczka z nazwa. Ksztalt jest z tego
   samego swiata co tlo — hala ma rzedy filarow, a miedzy filarami sa
   wlasnie takie wneki.

   Wszystko rysuje CSS. `img/guild/door-arch.webp` (prompt w
   notes/prompts-gildia.txt) jest NIEOBOWIAZKOWA nakladka kamienia: gdy
   przyjdzie, dokłada fakture na ten sam ksztalt i nic sie nie przesuwa. */
.gh-door {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 10px 12px;
  background:
    linear-gradient(180deg, rgba(58, 42, 110, 0.55), rgba(16, 10, 32, 0.92) 62%),
    radial-gradient(90% 55% at 50% 22%, rgba(200, 168, 78, 0.14), transparent 70%);
  border: 1px solid rgba(200, 168, 78, 0.26);
  /* Gorne rogi mocno zaokraglone, dolne prawie proste — luk archiwolty
     osadzony w prostym cokole, a nie zaokraglony prostokat. */
  border-radius: 78px 78px 12px 12px;
  /* Grafika luku ma 256x320, czyli jest WYZSZA niz szeroka, a kafel
     w siatce trzy na rzad ma okolo 245 px szerokosci. Bez tego minimum
     luk byl rozciagany do proporcji 245x175 i kolumienki po bokach
     robily sie przysadziste. 196 px nie zrownuje proporcji (to by
     wymagalo 306 px i dwoch rzedow wysokich na 640), ale sciaga
     rozciagniecie z 1,75x do 1,25x — i tyle juz nie widac. */
  min-height: 278px;
  cursor: pointer; text-align: center; font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),
              inset 0 -18px 26px -18px rgba(0, 0, 0, 0.9),
              0 4px 14px rgba(6, 3, 16, 0.55);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
/* Nakladka kamienia — czeka na grafike; bez pliku po prostu jej nie ma. */
.gh-door::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: url('../img/guild/door-arch.webp') center / 100% 100% no-repeat;
  opacity: 0.55; pointer-events: none;
}
.gh-door:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 212, 106, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
              inset 0 -18px 26px -18px rgba(0, 0, 0, 0.9),
              0 10px 24px rgba(6, 3, 16, 0.65), 0 0 22px rgba(255, 212, 106, 0.14);
}
.gh-door:active { transform: translateY(-1px) scale(0.985); }
.gh-door:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

/* Nisza: ciemne zaglebienie z wlasnym swiatlem od gory. Ikona nie lezy
   NA drzwiach, tylko swieci W nich. */
.gh-door-ic {
  position: relative; z-index: 1; margin-top: 4px;
  width: 132px; height: 132px; border-radius: 50% 50% 46% 46%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 212, 106, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.3)),
    url('../img/guild/door-niche.webp') center / 100% 100% no-repeat;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.75),
              inset 0 -1px 0 rgba(255, 255, 255, 0.07),
              0 0 0 1px rgba(200, 168, 78, 0.2);
  transition: box-shadow 0.16s ease;
}
.gh-door-ic img {
  width: 104px; height: 104px; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}
.gh-door:hover .gh-door-ic {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.75),
              inset 0 -1px 0 rgba(255, 255, 255, 0.07),
              0 0 0 1px rgba(255, 212, 106, 0.45), 0 0 20px rgba(255, 212, 106, 0.22);
}

/* Kuta tabliczka pod nisza. Kreska nad nia oddziela ja od wneki tak, jak
   oddzielilaby ja szczelina miedzy kamieniami. */
.gh-door-txt {
  position: relative; z-index: 1;
  margin-top: auto; padding-top: 10px; width: 100%;
  border-top: 1px solid rgba(200, 168, 78, 0.18);
}
.gh-door-txt b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; line-height: 1.15; color: var(--text-bright);
  letter-spacing: 0.02em;
}
.gh-door-txt span {
  display: block; margin-top: 3px;
  font-size: 11px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Drzwi, w ktorych cos wlasnie zyje. Kolor jest ten sam co pas TERAZ
   wyzej, wiec oko idzie z gory na dol bez legendy. Swieci NISZA, a nie
   sama obwodka — swiatlo bije z wnetrza wneki. */
.gh-door.hot { border-color: rgba(255, 107, 53, 0.55); }
.gh-door.hot .gh-door-ic {
  box-shadow: inset 0 3px 8px rgba(0,0,0,.75), 0 0 0 1px rgba(255,107,53,.5), 0 0 22px rgba(255,107,53,.3);
}
.gh-door.hot .gh-door-txt span { color: var(--ember); }
.gh-door.hot-abyss { border-color: rgba(255, 71, 87, 0.55); }
.gh-door.hot-abyss .gh-door-ic {
  box-shadow: inset 0 3px 8px rgba(0,0,0,.75), 0 0 0 1px rgba(255,71,87,.5), 0 0 22px rgba(255,71,87,.3);
}
.gh-door.hot-abyss .gh-door-txt span { color: var(--loss); }

/* ── DOWODZTWO ────────────────────────────────────────────────
   Widzi je tylko przywodca i oficerowie. Do 04.09 bylo niska belka na caly
   rzad nad hala — zeby siodme drzwi nie zostawily obok siebie dwoch pustych
   wnek. Belka przegrala z sasiedztwem: przy szesciu swiecacych wnekach
   ponizej po prostu nie bylo jej widac, a to jedyne drzwi, ktore CZEGOS OD
   GRACZA CHCA. Odkad doszly Rozkazy, osiem drzwi uklada sie trzy, trzy
   i dwa, wiec pustych wnek nie ma i belka stracila swoj jedyny powod.

   Czerwien, a nie zloto: zloto ma tu wszystko. Jedyne inne czerwone drzwi
   to Glebiny w trakcie wyprawy — a wyprawa trwa godzine na dobe, wiec te
   dwa czerwone praktycznie nigdy nie stoja obok siebie. */
.gh-door.hot-cmd {
  border-color: rgba(229, 57, 53, 0.6);
  background:
    linear-gradient(180deg, rgba(110, 28, 34, 0.5), rgba(16, 10, 32, 0.92) 62%),
    radial-gradient(90% 55% at 50% 22%, rgba(229, 57, 53, 0.2), transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),
              inset 0 -18px 26px -18px rgba(0, 0, 0, 0.9),
              0 4px 14px rgba(6, 3, 16, 0.55), 0 0 20px rgba(229, 57, 53, 0.18);
}
.gh-door.hot-cmd .gh-door-ic {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.75),
              0 0 0 1px rgba(229, 57, 53, 0.55), 0 0 24px rgba(229, 57, 53, 0.35);
}
.gh-door.hot-cmd .gh-door-txt { border-top-color: rgba(229, 57, 53, 0.3); }
.gh-door.hot-cmd:hover {
  border-color: rgba(255, 99, 92, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
              inset 0 -18px 26px -18px rgba(0, 0, 0, 0.9),
              0 10px 24px rgba(6, 3, 16, 0.65), 0 0 30px rgba(229, 57, 53, 0.4);
}
.gh-door.hot-cmd:hover .gh-door-ic {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.75),
              0 0 0 1px rgba(255, 99, 92, 0.75), 0 0 30px rgba(229, 57, 53, 0.5);
}
/* Tetno TYLKO wtedy, gdy cos naprawde czeka na decyzje. Drzwi swiecace
   bez przerwy przestaja cokolwiek znaczyc po drugim dniu. */
.gh-door.hot-cmd.urgent { animation: ghCmdPulse 2.4s ease-in-out infinite; }
.gh-door.hot-cmd.urgent .gh-door-txt span { color: #FF837C; }
@keyframes ghCmdPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.09),
                         inset 0 -18px 26px -18px rgba(0,0,0,0.9),
                         0 4px 14px rgba(6,3,16,0.55), 0 0 18px rgba(229,57,53,0.18); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.09),
                         inset 0 -18px 26px -18px rgba(0,0,0,0.9),
                         0 4px 14px rgba(6,3,16,0.55), 0 0 34px rgba(229,57,53,0.5); }
}

/* Zarzadzanie: wiersz tekstu, nie kafle. Wchodzi sie tu raz na tydzien,
   a „Opusc gildie" nie moze byc tej samej wielkosci co „Wojny". */
.gh-admin {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 20px;
}
.gh-admin .gh-act.danger { margin-left: auto; }
.gh-adm {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-dim);
  padding: 6px 10px; border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.gh-adm:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.gh-adm:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.gh-adm.danger { color: rgba(255, 138, 148, 0.75); margin-left: auto; }
.gh-adm.danger:hover { color: #ff8a94; background: rgba(255, 71, 87, 0.1); }
.gh-adm-badge {
  display: inline-block; margin-left: 5px; min-width: 16px; padding: 0 4px;
  background: var(--loss); color: #fff; border-radius: 8px;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}

/* ══ ROZMOWA ══════════════════════════════════════════════════
   Ten sam kanal, co zakladka „Gildia" w panelu czatu — te same wiadomosci
   z `chat/guild/<guildId>/messages`, tylko widok zrobiony pod miejsce,
   ktore i tak stalo puste. Panel czatu jest dokiem na cala wysokosc
   okna i zaslania gre; tutaj rozmowa jest CZESCIA hali i widac ja bez
   otwierania czegokolwiek.

   Blok rosnie do dolu (`flex: 1`), wiec zjada dokladnie tyle pustego
   miejsca, ile go zostalo pod drzwiami — na niskim ekranie kurczy sie
   do swojego minimum i strona zaczyna sie przewijac. */
.gh-talk {
  flex: 1; min-height: 220px;
  display: flex; flex-direction: column;
  margin-top: 12px;
  /* Plyta z faktura kamienia. `talk-stone.webp` jest KAFELKOWANA, wiec
     dziala przy kazdej wysokosci — bitmapa rozciagana na cala plyte
     rozmywalaby sie tym bardziej, im dluzsza rozmowa. Bez pliku zostaje
     sam gradient i panel wyglada tak jak dzis. */
  background:
    linear-gradient(180deg, rgba(45, 31, 85, 0.35), rgba(6, 3, 16, 0.62) 40%),
    url('../img/guild/talk-stone.webp') center top / 256px repeat,
    rgba(6, 3, 16, 0.55);
  border: 1px solid rgba(200, 168, 78, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(6, 3, 16, 0.4);
  overflow: hidden;
}
/* Belka nad rozmowa: ognisko i ilu jest przy nim teraz. Bez niej plyta
   zaczynala sie od pierwszej wiadomosci i nie bylo widac, ze to miejsce,
   a nie lista. */
.gh-talk-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(200, 168, 78, 0.14);
  background: linear-gradient(180deg, rgba(255, 212, 106, 0.06), transparent);
}
.gh-talk-head img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.gh-talk-head b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--gold-soft);
}
.gh-talk-head span {
  margin-left: auto; font-size: 11px; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 5px;
}
/* Rozwiniecie na caly ekran. Rozmowa w gildii bywa dluga — ustalanie
   skladu na wojne to kilkadziesiat wiadomosci — a pas pod drzwiami ma
   200 px. Zwiniete zostaje czescia hali, rozwiniete zaslania ja calkiem. */
.gh-talk-zoom {
  flex: 0 0 auto; margin-left: 10px;
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(200, 168, 78, 0.22);
  color: var(--gold-soft); cursor: pointer;
  font-size: 12px; line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
.gh-talk-zoom:hover { background: rgba(200, 168, 78, 0.16); border-color: rgba(255, 212, 106, 0.55); }
.gh-talk-zoom:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
/* Licznik obecnych oddaje miejsce guzikowi, a nie odwrotnie. */
.gh-talk-head span { margin-left: auto; }

/* Zamiast `position: fixed` na samej plycie: fixed liczy sie wzgledem
   okna, a panel gildii ma wlasne `overflow: hidden` i tlo — plyta
   wyszlaby poza nie i zostawila hale widoczna dookola. Tak przykrywa
   dokladnie panel. */
.gh-talk.big .gh-talk-log { padding: 18px 22px; gap: 9px; }
.gh-talk.big .gh-msg { font-size: 13.5px; }
.gh-talk.big .gh-talk-say { padding: 14px 20px; }
@media (min-width: 900px) {
  /* Na monitorze wiadomosci nie rozciagaja sie na 1400 px — wiersz
     dluzszy niz okolo 90 znakow czyta sie zle. */
  .gh-talk.big .gh-talk-log > *, .gh-talk.big .gh-talk-say { max-width: 900px; width: 100%; margin-inline: auto; }
  .gh-talk.big .gh-talk-say { display: flex; }
}

.gh-talk-head span::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--win); box-shadow: 0 0 6px rgba(46, 213, 115, 0.7);
}
.gh-talk-log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.gh-talk-empty {
  margin: auto; text-align: center;
  font-size: 12px; color: var(--text-dim); line-height: 1.6;
  max-width: 280px;
}
/* Wiadomosc: awatar w ramce po lewej, nad tekstem pasek z tozsamoscia.
   Wszystko, co tam stoi, gracz ma juz gdzie indziej w grze — ta sama ramka
   co w rankingu, ta sama zlota nazwa co przy premium, ta sama pigulka
   ZALOZYCIELA co w czacie globalnym. Rozmowa w gildii nie moze pokazywac
   tych samych ludzi inaczej niz reszta gry. */
.gh-msg {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 4px 6px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; word-break: break-word;
}
.gh-msg-ava { flex: 0 0 auto; width: 34px; height: 34px; }
.gh-msg-body { flex: 1; min-width: 0; }
.gh-msg-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gh-msg-role { width: 13px; height: 13px; object-fit: contain; flex: 0 0 auto; }
.gh-msg b { font-weight: 700; }
/* Ranga koloruje NAZWE — te same kolory, co naglowki w zalodze po prawej,
   wiec „kto to jest" czyta sie bez wracania tam. Premium wygrywa
   z ranga: zlota nazwa jest rzecza, za ktora gracz zaplacil. */
.gh-msg b.leader  { color: var(--gold-soft); }
.gh-msg b.officer { color: var(--info); }
.gh-msg b.veteran { color: var(--violet); }
.gh-msg b.guardian{ color: var(--win); }
.gh-msg b.member  { color: #cfc6e6; }
.gh-msg b.gv-gold-name { color: inherit; }
.gh-msg-found {
  font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: 0.5px;
  padding: 1px 4px; border-radius: 4px;
  color: #2a1c04; background: linear-gradient(180deg, #FFE08A, #E9A93A);
}
.gh-msg-lv { font-style: normal; font-size: 10px; color: var(--text-dim); }
.gh-msg time { margin-left: auto; font-size: 10px; color: rgba(255, 255, 255, 0.22); }
.gh-msg-text { display: block; color: var(--text-dim); margin-top: 1px; }
.gh-msg.mine { background: rgba(200, 168, 78, 0.07); }

/* Przywodca i oficerowie dostaja pionowa kreske po lewej i cieply podklad.
   Nie chodzi o odznaczenie ich, tylko o to, ze w gildii rozkaz od lidera
   trzeba znalezc w rozmowie po tygodniu — a nie przeczytac wszystkiego. */
.gh-msg.leader, .gh-msg.officer { box-shadow: inset 2px 0 0 currentColor; padding-left: 10px; }
.gh-msg.leader  { color: rgba(255, 212, 106, 0.55); background: rgba(255, 212, 106, 0.05); }
.gh-msg.officer { color: rgba(79, 172, 254, 0.5);  background: rgba(79, 172, 254, 0.05); }
.gh-msg.leader .gh-msg-text, .gh-msg.officer .gh-msg-text { color: #d6cdeb; }

.gh-talk-say {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.25);
}
.gh-talk-say input {
  flex: 1; min-width: 0;
  /* Wciecie, nie pole formularza — ten sam jezyk, co nisza w drzwiach:
     ciemne wglebienie ze swiatlem od gory. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.22));
  border: 1px solid rgba(200, 168, 78, 0.18);
  border-radius: 9px; padding: 10px 13px;
  color: var(--text); font-family: inherit; font-size: 12.5px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}
.gh-talk-say input::placeholder { color: rgba(255, 255, 255, 0.28); }
.gh-talk-say input:focus { outline: none; border-color: rgba(255, 212, 106, 0.5); }

/* ── Ostrzezenie o nieobecnym przywodcy ───────────────────── */
.gh-alert {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 12px;
  border: 1px solid rgba(255, 179, 64, 0.35);
  border-left: 3px solid var(--legendary);
  border-radius: var(--radius);
  background: rgba(255, 179, 64, 0.07);
}
.gh-alert p { flex: 1; margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }

/* ══ ZALOGA ═══════════════════════════════════════════════════
   Kolumna po prawej na monitorze, szuflada na telefonie. */
.gh-roster {
  position: relative; z-index: 1;
  min-height: 0;
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(6, 3, 16, 0.35);
}
.gh-roster-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.gh-roster-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.gh-roster-title b { color: var(--text-dim); font-weight: 600; letter-spacing: 0; }
/* Sortowanie zamiast czterech linijek mikro-tekstu w kazdym wierszu.
   Do 01.09 kazdy czlonek niosl klase, poziom, „X temu", wplacone zloto,
   wplacone diamenty i podatek — szesc liczb w 9 px jedna pod druga.
   Teraz wiersz pokazuje TE liczbe, wedlug ktorej wlasnie sortujesz. */
.gh-sort { display: flex; gap: 4px; flex-wrap: wrap; }
.gh-sort button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent; border-radius: 7px;
  color: var(--text-dim); cursor: pointer;
  font-family: inherit; font-size: 10px; font-weight: 700;
  padding: 4px 9px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.gh-sort button:hover { color: var(--text); }
.gh-sort button[aria-pressed="true"] {
  color: var(--gold-soft);
  background: rgba(200, 168, 78, 0.12);
  border-color: rgba(200, 168, 78, 0.35);
}
.gh-sort button:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }

.gh-list { flex: 1; overflow-y: auto; padding: 8px 10px 200px; }
.gh-group {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 6px 6px;
  font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
}
.gh-group:first-child { margin-top: 2px; }
.gh-group::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.18; }

/* Wiersz jest pojemnikiem, a klikalna jest tylko czesc z awatarem i
   nazwa. Przycisk „...” stoi obok, POZA nim — przycisk w przycisku nie
   jest prawidlowym HTML-em i klawiatura gubi sie w takim wierszu. */
.gh-mem {
  display: flex; align-items: center; gap: 4px;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.gh-mem:hover { background: rgba(255, 255, 255, 0.05); }
.gh-mem.off { opacity: 0.55; }
.gh-mem-hit {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0; padding: 7px 6px;
  background: none; border: none; border-radius: 10px;
  cursor: pointer; text-align: left; font-family: inherit; color: inherit;
}
.gh-mem-hit:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -2px; }
.gh-ava { position: relative; width: 40px; height: 40px; flex: 0 0 auto; }
.gh-ava img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.gh-dot {
  position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #0A0616; background: #4a4460;
}
.gh-mem.on .gh-dot { background: var(--win); box-shadow: 0 0 6px rgba(46, 213, 115, 0.6); }
.gh-mem-txt { flex: 1; min-width: 0; }
.gh-mem-name {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--text);
  overflow: hidden;
}
.gh-mem-name > span:first-of-type {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gh-mem-name img { width: 13px; height: 13px; flex: 0 0 auto; object-fit: contain; }
.gh-mem-sub { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
/* Wartosc, wedlug ktorej lista jest posortowana. Jedna kolumna, wyrownana
   do prawej, cyfry tabularne — dlatego liczby stoja w pionie w slupku. */
.gh-mem-val {
  flex: 0 0 auto; text-align: right;
  font-size: 11px; font-weight: 700; color: var(--gold-soft);
  display: flex; align-items: center; gap: 3px;
}
.gh-mem-val img { width: 11px; height: 11px; opacity: 0.8; }
.gh-mem-val.mute { color: var(--text-dim); font-weight: 600; }
.gh-mem-more {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.25); font-size: 17px; line-height: 1;
  padding: 4px 2px; border-radius: 6px;
}
.gh-mem-more:hover { color: var(--text); }
/* Znacznik zapisania sie do wojny albo wyprawy. Byl szarym emoji w 10 px
   przy 85% krycia i po prostu go nie bylo widac — a to jest jedyne miejsce,
   w ktorym oficer sprawdza, kto juz jest w skladzie. Teraz kazdy ma wlasny
   kolor (ten sam co pas TERAZ), pelne krycie i plytke pod spodem. */
.gh-flag {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  font-size: 10px; line-height: 1;
  border: 1px solid currentColor;
}
.gh-flag.atk { color: var(--ember); background: rgba(255, 107, 53, 0.18); }
.gh-flag.def { color: var(--info);  background: rgba(79, 172, 254, 0.18); }
.gh-flag.dep { color: var(--loss);  background: rgba(255, 71, 87, 0.18); }
/* Wiersz zapisanego czlonka nie jest przygaszany, nawet gdy jest offline:
   „zapisal sie, ale go nie ma" to wazniejsza informacja niz „jest offline". */
.gh-mem.off:has(.gh-flag) { opacity: 0.8; }

/* ── Telefon ──────────────────────────────────────────────── */
.gh-roster-close { display: none; background: none; border: none; color: var(--text-dim);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 2px; }
.gh-roster-fab {
  display: none; position: fixed; right: 14px; bottom: 96px; z-index: 60;
  align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 24px;
  background: linear-gradient(135deg, var(--gold-soft), #F4B740);
  color: #1a1208; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 800;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.gh-backdrop {
  display: none; position: fixed; inset: 0; z-index: 58;
  background: rgba(6, 3, 16, 0.6);
}
.gh-backdrop.open { display: block; }

@media (max-width: 900px) {
  .gh {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "main" "talk";
  }
  .gh.no-talk { grid-template-columns: minmax(0, 1fr); grid-template-rows: 100%; grid-template-areas: "main"; }
  .gh-talk-col { padding: 0 14px 24px; height: 320px; }
  /* Zapas liczony z WYSOKOSCI NAWIGACJI, nie z liczby wpisanej na oko.
     Stalo tu 120 px, a `--gv-nav-h` na telefonie to 122 px plus pasek
     bezpieczenstwa — czyli ostatni wiersz zawsze wchodzil pod nawigacje. */
  .gh-main {
    padding: 16px 14px calc(var(--gv-nav-h, 122px) + var(--gv-safe-b, 0px) + 24px);
  }
  .gh-hall { grid-template-columns: repeat(2, 1fr); }
  /* Na telefonie kafel ma okolo 175 px szerokosci, wiec nisza 132 px
     dotykalaby krawedzi luku. Schodzi proporcjonalnie razem z nim. */
  .gh-door { min-height: 236px; border-radius: 66px 66px 12px 12px; }
  .gh-door-ic { width: 112px; height: 112px; }
  .gh-door-ic img { width: 88px; height: 88px; }
  .gh-crest { gap: 14px; padding: 16px 14px 14px; border-radius: 20px; }
  .gh-standard, .gh-standard-cloth { width: 66px; }
  .gh-standard-cloth img { width: 40px; height: 40px; }
  .gh-name { font-size: 22px; }
  /* Plakietka skarbca na telefonie: trzy pola w jednym rzedzie, guziki
     w drugim. Luzny `flex-wrap` lamal ja w trzy rzedy z dziura. */
  .gh-purse {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    padding: 0 0 6px;
  }
  .gh-coin { justify-content: center; padding: 10px 4px; gap: 5px; }
  .gh-coin:nth-child(3) { border-right: none; }
  .gh-coin b { font-size: 15px; }
  .gh-coin.mem small { display: none; }
  .gh-coin.mem b::after { content: ' / ' attr(data-max); font-size: 11px; color: var(--text-dim); }
  .gh-purse-acts {
    grid-column: 1 / -1; justify-content: center; margin: 0; padding: 6px 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .gh-roster {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 59;
    width: min(320px, 88vw);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    background: #0A0616;
    box-shadow: var(--shadow-modal);
  }
  .gh-roster.open { transform: translateX(0); }
  .gh-roster-close { display: block; }
  .gh-roster-fab { display: flex; }
}
@media (max-width: 380px) {
  .gh-hall { grid-template-columns: 1fr; }
}
/* Osiem drzwi w DWOCH rzedach po cztery, gdy kolumna hali jest dosc
   szeroka — trzy, trzy i dwa zostawialy dziure w ostatnim rzedzie i cala
   hala nie miescila sie w oknie. Liczone z szerokosci KOLUMNY, nie okna:
   otwarta rozmowa zabiera miejsce i wtedy wracaja trzy. */
.gh-wrap { container-type: inline-size; }
@container (min-width: 640px) {
  .gh-hall { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .gh-door { min-height: 224px; padding: 12px 8px 10px; border-radius: 62px 62px 12px 12px; }
  .gh-door-ic { width: 108px; height: 108px; }
  .gh-door-ic img { width: 84px; height: 84px; }
  .gh-door-txt b { font-size: 13px; }
  .gh-door-txt span { font-size: 10.5px; }
}

/* ══ EFEKTY ═══════════════════════════════════════════════════
   ZBUDOWANE Z ELEMENTOW, NIE Z ARKUSZA KLATEK.

   Pierwsze podejscie szlo arkuszami wygenerowanymi obrazkowo (24/18/20
   klatek). Nie nadaly sie i to nie byla kwestia liczby klatek: generator
   rysuje kazda klatke OSOBNO, wiec miedzy klatkami skacze ksztalt,
   skala i polozenie. Pieczec pojawiala sie znikad w osmej klatce w innej
   wielkosci, a odlamki przy szczelinie ukladaly sie za kazdym razem
   inaczej. Zamiast ruchu wychodzilo migotanie.

   Tutaj rusza sie TEN SAM element, wiec ciaglosc jest z definicji.
   Ta sama droga, ktora w Kuzni zadzialala przy zarze: 36 iskier, kazda
   z wlasna sciezka, zamiast kafelkowanego obrazka.

   Warstwa stoi w BODY, nie w panelu — panel jest przerysowywany po
   kazdej zmianie z serwera, a animacja trwa dluzej niz przerysowanie. */
.gh-fx {
  position: fixed; z-index: 70; pointer-events: none;
  transform: translate(-50%, -50%);
}

/* ── Rozwiniecie sztandaru: gildia weszla na nowy poziom ──────
   Rusza sie PRAWDZIWY sztandar gracza (.gh-standard-cloth), a nie
   rysunek nad nim — dlatego to jest jego herb, jego kolor i jego
   plotno. Rozwija sie od gornej krawedzi, z lekkim przestrzeleniem. */
.gh-standard-cloth.gh-unfurl {
  animation: gh-unfurl 820ms cubic-bezier(0.16, 0.9, 0.3, 1.25) 1;
  transform-origin: 50% 0;
}
@keyframes gh-unfurl {
  0%   { transform: scaleY(0.04) scaleX(0.86); filter: brightness(2.2); }
  55%  { transform: scaleY(1.07) scaleX(1.02); filter: brightness(1.4); }
  75%  { transform: scaleY(0.97) scaleX(0.99); }
  100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
}
/* Iskry strzasniete z plotna. Kazda dostaje wlasny kat i dystans
   z guild-home.js — bez tego wszystkie leca tym samym torem i widac,
   ze to jedna animacja odtworzona kilkanascie razy. */
.gh-spark {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 6px var(--gold-soft);
  animation: gh-spark var(--gh-d) ease-out var(--gh-delay) 1 both;
}
@keyframes gh-spark {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--gh-x)), calc(-50% + var(--gh-y))) scale(0.2); opacity: 0; }
}

/* ── Uderzenie w pas: wojna albo wyprawa ─────────────────────
   Poprzednia wersja rysowala nad pasem osobny ksztalt: pomaranczowy
   krazek („pieczec") i swietlna kreske („szczelina"). Oba byly ABSTRAKCJA
   — nie mowily „wojna" ani „glebiny", tylko „kolko" i „kreska", i nie
   mialy nic wspolnego z tym, co jest pod spodem.

   Sztandar dziala, bo animuje sie PRAWDZIWY sztandar gracza. Tutaj jest
   tak samo: uderzenie dostaje SAM PAS i JEGO ikona. Trzy rzeczy naraz,
   wszystkie na elementach, ktore juz tam sa:
     1. przez pas przechodzi smuga swiatla (jak ostrze),
     2. ikona pasa wbija sie z przestrzeleniem,
     3. obwodka pasa rozblyskuje i wraca.
   Kolor bierze sie z pasa, wiec wojna jest pomaranczowa, obrona
   niebieska, a glebiny czerwone — bez ani jednej dodatkowej reguly. */

/* Smuga siedzi W PASIE (overflow:hidden na nakladce), wiec nie wychodzi
   poza jego zaokraglone rogi i nie przykrywa tekstu obok. */
.gh-strike {
  position: fixed; z-index: 70; pointer-events: none;
  border-radius: var(--radius); overflow: hidden;
}
.gh-sweep {
  position: absolute; top: -20%; bottom: -20%; left: 0;
  width: 26%;
  background: linear-gradient(100deg, transparent, currentColor 45%, #fff 52%, currentColor 60%, transparent);
  opacity: 0.85; filter: blur(1px);
  transform: skewX(-18deg) translateX(-160%);
  animation: gh-sweep 560ms cubic-bezier(0.25, 0.8, 0.3, 1) 1 both;
}
@keyframes gh-sweep {
  0%   { transform: skewX(-18deg) translateX(-160%); opacity: 0; }
  18%  { opacity: 0.9; }
  100% { transform: skewX(-18deg) translateX(460%); opacity: 0; }
}
/* Rozblysk obwodki — pas jest juz obramowany swoim kolorem, wiec tylko
   podkrecamy to, co widac na co dzien. */
.gh-live.gh-struck { animation: gh-struck 620ms ease-out 1; }
@keyframes gh-struck {
  0%   { filter: brightness(2.4) saturate(1.6); }
  35%  { filter: brightness(1.5) saturate(1.3); }
  100% { filter: none; }
}
/* Ikona pasa wbija sie z gory. Przestrzelenie jest male — pas jest niski
   i wieksze wyszloby poza niego. */
.gh-live.gh-struck .gh-live-ic { animation: gh-punch 620ms cubic-bezier(0.2, 1.5, 0.4, 1) 1; }
@keyframes gh-punch {
  0%   { transform: scale(2.1) translateY(-14px); opacity: 0; filter: brightness(2.5); }
  40%  { transform: scale(0.88) translateY(0); opacity: 1; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); filter: none; }
}

.gh-spark.ember { background: #FF7A45; box-shadow: 0 0 7px #FF4757; }

@media (prefers-reduced-motion: reduce) {
  .gh-standard-cloth { animation: none; }
  .gh-door, .gh-roster, .gh-mem, .gh-live { transition: none; }
  .gh-door.hot-cmd.urgent { animation: none; }
  /* Efektow nie odtwarzamy wcale — guild-home.js sprawdza to samo
     zapytanie i w ogole ich nie tworzy. Reguly sa tu na wypadek, gdyby
     ustawienie zmienilo sie w trakcie odtwarzania. */
  .gh-fx { display: none; }
  .gh-standard-cloth.gh-unfurl { animation: none; }
}

/* ══ USTAWIENIA GILDII ════════════════════════════════════════
   Cztery zakladki w jednym oknie zamiast trzech osobnych miejsc.
   Do 01.09.2026 opis i podatek byly w jednym oknie, awanse w menu
   „trzy kropki" przy nazwisku, a podania w trzecim — trzy rzeczy,
   ktore robi ta sama osoba, w trzech miejscach.
   Szczegoly i podzial praw: naglowek js/guild-settings.js. */
/* Rozmiar nosi KARTA OKNA, a nie tresc w srodku. Wpisany na .gs dawal
   560 px w karcie, ktora w style.css ma `max-width: 360px` — tresc
   wychodzila poza krawedz i okno trzeba bylo przesuwac w bok. Karta ma
   tez wlasne `overflow-y: auto`, wiec przy stalej wysokosci w srodku
   robily sie dwa suwaki jeden w drugim i dolna czesc byla ucieta.
   Klase dokłada guild-settings.js przez most, zeby regula nie dotykala
   pozostalych okien w grze. */
#modalOverlay .modal-card.gs-modal, .modal-card.gs-modal, .gs-modal {
  max-width: 560px; width: min(560px, 94vw);
  height: min(600px, 78vh);
  padding: 20px;
  overflow: hidden;
}

/* Okno ma STALA wysokosc, nie „tyle, ile trzeba". Zakladki roznia sie
   iloscia tresci — Skarbiec to jeden suwak, Zaloga to lista dziewieciu
   osob — i przy wysokosci z tresci okno skakalo przy kazdym klikniecu
   zakladki, a przyciski uciekaly spod kursora. Nadmiar przewija sie
   w .gs-body, brak zostawia puste miejsce. */
.gs {
  position: relative;            /* kontekst dla nakladki potwierdzenia */
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  min-height: 0; min-width: 0;
}

.gs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gs-head img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.gs-head b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 19px; color: var(--text-bright); line-height: 1.1;
}
.gs-head span { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--gold-deep); }

.gs-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(200, 168, 78, 0.2);
  padding-bottom: 8px; margin-bottom: 14px;
}
.gs-tab {
  background: none; border: 1px solid transparent; border-radius: 9px;
  padding: 7px 13px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--text-dim); transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.gs-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.gs-tab.on {
  color: var(--gold-soft); background: rgba(200, 168, 78, 0.12);
  border-color: rgba(200, 168, 78, 0.4);
}
.gs-tab:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }

.gs-body { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }

.gs-lab {
  display: block; margin: 14px 0 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold-deep);
}
.gs-lab:first-child { margin-top: 0; }
.gs-in {
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.22));
  border: 1px solid rgba(200, 168, 78, 0.18);
  border-radius: 9px; padding: 10px 12px;
  color: var(--text); font-family: inherit; font-size: 12.5px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}
.gs-in:focus { outline: none; border-color: rgba(255, 212, 106, 0.5); }
.gs-area { min-height: 64px; resize: vertical; line-height: 1.5; }
.gs-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--text-dim); }

.gs-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.gs-opt {
  flex: 1; min-width: 96px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px;
  padding: 9px 10px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text-dim);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.gs-opt.on {
  color: var(--gold-soft); background: rgba(200, 168, 78, 0.12);
  border-color: rgba(200, 168, 78, 0.45);
}

/* Skarbiec nad herbami: kazda cena nizej odnosi sie do NIEGO, a nie do
   portfela gracza, i bez tego przywodca liczy z pamieci. */
.gs-purse {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 12px; margin-bottom: 12px;
  background: rgba(6, 3, 16, 0.45);
  border: 1px solid rgba(200, 168, 78, 0.16); border-radius: var(--radius);
}
.gs-purse span { display: inline-flex; align-items: center; gap: 6px; }
.gs-purse img { width: 16px; height: 16px; }
.gs-purse b { font-size: 14px; font-weight: 800; color: var(--gold-soft); }
.gs-purse i {
  margin-left: auto; font-style: normal;
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim);
}

.gs-grp {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold-deep);
}
.gs-grp span { white-space: nowrap; }
.gs-grp::after { content: ''; flex: 1; height: 1px; background: rgba(200, 168, 78, 0.18); order: 1; }
.gs-grp b { order: 2; display: inline-flex; align-items: center; gap: 4px; color: var(--gold-soft); }
.gs-grp b img { width: 13px; height: 13px; }

.gs-embs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.gs-emb {
  position: relative; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(58, 42, 110, 0.5), rgba(16, 10, 32, 0.75));
  border: 2px solid rgba(255, 255, 255, 0.08); border-radius: 12px;
  cursor: pointer; padding: 6px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gs-emb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gs-emb:hover { transform: translateY(-2px); border-color: rgba(255, 212, 106, 0.5); }
.gs-emb.on {
  border-color: var(--gold-soft);
  box-shadow: 0 0 16px rgba(255, 212, 106, 0.3);
}
/* Zablokowany nie jest wygaszony do niewidocznosci — ma byc widac, CO
   sie kupuje. Kupno to jedyna rzecz, ktora go odroznia. */
.gs-emb.locked img { opacity: 0.45; filter: grayscale(0.6); }
.gs-emb.locked { border-style: dashed; }
.gs-emb.t-diamond { border-color: rgba(191, 95, 255, 0.35); }
.gs-emb.t-gold { border-color: rgba(200, 168, 78, 0.3); }
.gs-lock {
  position: absolute; right: 3px; bottom: 2px;
  font-size: 11px; font-style: normal; opacity: 0.75;
}

.gs-tax { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.gs-tax input { flex: 1; accent-color: var(--gold-soft); }
.gs-tax b { min-width: 44px; text-align: center; font-size: 16px; font-weight: 800; color: var(--gold-soft); }

.gs-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.gs-row-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.gs-row-name i {
  display: block; font-style: normal;
  font-size: 10.5px; font-weight: 400; color: var(--text-dim); margin-top: 1px;
}
.gs-row-name.leader { color: var(--gold-soft); }
.gs-row-name.officer { color: var(--info); }


.gs-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 14px; margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 560px) {
  #modalOverlay .modal-card.gs-modal, .modal-card.gs-modal, .gs-modal {
    height: min(600px, 86vh); padding: 16px;
  }
  .gs-row { flex-wrap: wrap; }
  .gs-row-name { flex: 1 0 100%; }
}

/* Rozwiniecie POWIEKSZA OKNO, nie zaslania ekranu. Pierwsza wersja szla
   na cala strone (nakladka w body, position: fixed) i wypychala gracza
   z hali — a rozmowa jest jej czescia, nie osobnym miejscem. Teraz plyta
   po prostu rosnie w kolumnie i wszystko dookola zostaje na swoim
   miejscu, razem z zaloga po prawej. */


/* ── Lista rang i potwierdzenie: rysowane SAME ────────────────
   `<select>` po rozwinieciu jest oknem SYSTEMU, nie elementem strony —
   nie dziedziczy niczego ze skory gry i na Windowsie otwiera sie biala.
   `confirm()` jest jeszcze gorszy: na telefonie potrafi nie dojsc wcale,
   a na monitorze zatrzymuje cala strone. Oba zastapione wlasnymi. */
.gs-drop { position: relative; flex: 0 0 auto; }
.gs-drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(58, 42, 110, 0.9), rgba(26, 16, 53, 0.9));
  border: 1px solid rgba(200, 168, 78, 0.28);
  color: var(--text); cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.gs-drop-btn i { font-style: normal; color: var(--gold-deep); font-size: 9px; }
.gs-drop-btn:hover { border-color: rgba(255, 212, 106, 0.55); }
.gs-drop.open .gs-drop-btn { border-color: var(--gold-soft); }
.gs-drop-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
  min-width: 140px; padding: 4px;
  background: #150E2A;
  border: 1px solid rgba(200, 168, 78, 0.35); border-radius: 10px;
  box-shadow: var(--shadow-modal);
}
.gs-drop-opt {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: none; border-radius: 7px;
  background: none; color: var(--text-dim); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
}
.gs-drop-opt:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.gs-drop-opt.on { color: var(--gold-soft); background: rgba(200, 168, 78, 0.12); }

/* Potwierdzenie przykrywa KARTE, nie ekran: pytanie dotyczy tego, co
   gracz wlasnie klika, i ma zostac przy tym. */
.gs-ask {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; border-radius: inherit;
  background: rgba(6, 3, 16, 0.82);
}
.gs-ask-card {
  width: 100%; max-width: 320px; text-align: center;
  padding: 20px 18px;
  background: linear-gradient(160deg, var(--surface), var(--bg-lighter));
  border: 1px solid rgba(200, 168, 78, 0.35); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
}
.gs-ask-card b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 15px; line-height: 1.35; color: var(--text-bright);
}
.gs-ask-card span {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--gold-soft);
}
.gs-ask-card span img { width: 15px; height: 15px; }
.gs-ask-row { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }

/* ══ GLEBINY GILDII ═══════════════════════════════════════════
   Boss jest NAJWIEKSZA rzecza na ekranie. Do 01.09.2026 byl
   miniaturka 48 px obok nazwy, a polowe strony zajmowal formularz
   z lista godzin — czyli najciekawsza rzecz w gildii wygladala jak
   pozycja w tabeli. Powod i uklad: naglowek js/guild-depths.js. */
.gd2 { position: relative; height: 100%; overflow: hidden; }
.gd2-bg { position: absolute; inset: 0; z-index: 0; }
.gd2-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(0.75) brightness(0.55);
}
.gd2-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 50% 8%, rgba(255, 71, 87, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(10, 6, 22, 0.86) 0%, rgba(10, 6, 22, 0.94) 55%, rgba(10, 6, 22, 1) 100%);
}
.gd2-wrap {
  position: relative; z-index: 1;
  height: 100%; overflow-y: auto;
  padding: 18px 20px 190px;
  max-width: 620px; margin: 0 auto;
}

.gd2-back {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 8px; margin: 0 0 8px -8px; border-radius: 8px;
}
.gd2-back:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }

/* ── Przeciwnik ───────────────────────────────────────────── */
.gd2-hero { text-align: center; margin-bottom: 18px; }
/* Portret w kamiennej obreczy — ten sam jezyk co wneki w hali, zeby
   Glebiny czytaly sie jako kolejne drzwi tej samej budowli. */
.gd2-portret {
  width: 168px; height: 168px; margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden; position: relative;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.8),
              0 0 0 2px rgba(255, 71, 87, 0.35),
              0 0 34px rgba(255, 71, 87, 0.22);
}
.gd2-portret img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd2-portret::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, transparent 45%, rgba(10, 6, 22, 0.55) 100%);
}
.gd2-boss {
  font-family: var(--font-display); font-weight: 700;
  font-size: 27px; line-height: 1.1; color: var(--text-bright);
  margin: 0 0 8px; letter-spacing: 0.01em;
}
.gd2-meta {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-dim);
}
.gd2-meta b { color: var(--gold-soft); font-weight: 800; }
.gd2-floor b { font-size: 15px; }
.gd2-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.14); }
.gd2-prog { max-width: 260px; margin: 12px auto 0; }

/* ── Pas akcji: jedna faza naraz ──────────────────────────── */
.gd2-act {
  background: rgba(6, 3, 16, 0.55);
  border: 1px solid rgba(200, 168, 78, 0.18);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.gd2-act-live { border-color: rgba(255, 71, 87, 0.4); box-shadow: 0 0 22px rgba(255, 71, 87, 0.12); }
.gd2-win { border-color: rgba(46, 213, 115, 0.45); }
.gd2-lose { border-color: rgba(255, 71, 87, 0.45); }
.gd2-act-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.gd2-act-top b {
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-bright);
}
.gd2-win .gd2-act-top b { color: var(--win); }
.gd2-lose .gd2-act-top b { color: var(--loss); }
.gd2-act-top span { font-size: 12px; color: var(--text-dim); }
.gd2-clock { font-size: 16px; font-weight: 800; color: var(--gold-soft); white-space: nowrap; }
.gd2-act-mid { text-align: center; padding: 10px 0; }
.gd2-act-mid b { display: block; font-family: var(--font-display); font-size: 16px; color: var(--text-bright); }
.gd2-act-mid span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 6px; }

.gd2-rule { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; }
.gd2-rule::after { content: ''; flex: 1; height: 1px; background: rgba(200, 168, 78, 0.18); }
.gd2-rule > span {
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold-deep); white-space: nowrap;
}

.gd2-cost, .gd2-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.gd2-cost-lab { font-size: 12px; color: var(--text-dim); }
.gd2-cost-val {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 16px; font-weight: 800; color: var(--gold-soft);
}
.gd2-cost-val img { width: 16px; height: 16px; }
.gd2-cost-val.bad { color: var(--loss); }
.gd2-cost-have { margin-left: auto; font-size: 11px; color: rgba(255, 255, 255, 0.32); }

.gd2-btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.gd2-btns .gh-act { flex: 1; justify-content: center; min-width: 130px; }
.gd2-in {
  flex: 1; text-align: center; padding: 9px 15px; border-radius: 10px;
  border: 1px solid rgba(46, 213, 115, 0.4); background: rgba(46, 213, 115, 0.1);
  color: var(--win); font-size: 12px; font-weight: 700;
}

/* ── Sklad ────────────────────────────────────────────────── */
.gd2-crew { display: flex; flex-direction: column; gap: 4px; }
.gd2-fighter {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
}
.gd2-fighter.me { background: rgba(200, 168, 78, 0.1); }
.gd2-ava { flex: 0 0 auto; width: 34px; height: 34px; }
.gd2-ava img, .gd2-ava span { width: 34px; height: 34px; border-radius: 8px; display: block; }
.gd2-fighter-txt { flex: 1; min-width: 0; }
.gd2-fighter-txt b {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gd2-fighter-txt span { font-size: 10.5px; color: var(--text-dim); }
.gd2-power {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: rgba(200, 168, 78, 0.85);
}
.gd2-power img { width: 12px; height: 12px; opacity: 0.8; }
.gd2-empty { margin: 10px 0; text-align: center; font-size: 12px; color: var(--text-dim); }

/* ── Nagrody ──────────────────────────────────────────────── */
.gd2-loot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gd2-loot > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.gd2-loot img { width: 17px; height: 17px; }
.gd2-loot b { font-size: 16px; font-weight: 800; color: var(--gold-soft); }
.gd2-loot-guild { margin-left: auto; font-size: 11px !important; color: rgba(255,255,255,0.32) !important; }
.gd2-loot-mine { margin-top: 12px; }
.gd2-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.34); }

@media (max-width: 560px) {
  .gd2-wrap { padding: 14px 14px 190px; }
  .gd2-portret { width: 132px; height: 132px; }
  .gd2-boss { font-size: 22px; }
  .gd2-loot-guild { margin-left: 0; flex-basis: 100%; }
}


/* ── Skrzynia wojenna ─────────────────────────────────────────
   Stala w zakladce Wojen, wiec gracz musial wejsc w wojne, zeby zobaczyc,
   ze ma czym ja otworzyc. Powod i zrodlo liczb: js/guild-home.js. */
/* Skrzynia w tej samej oprawie, co karty Rozkazow: fioletowy bazalt,
   zlota ramka, a ogien wojny tylko w poswiacie za skrzynia. */
.gh-chest {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background:
    radial-gradient(60% 120% at 6% 50%, rgba(255, 107, 53, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(64, 46, 122, 0.5), rgba(18, 11, 38, 0.94) 70%);
  border: 1px solid rgba(200, 168, 78, 0.3);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(6, 3, 16, 0.55);
}
.gh-chest.ready {
  border-color: rgba(255, 107, 53, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(6, 3, 16, 0.55),
              0 0 26px rgba(255, 107, 53, 0.22);
}
.gh-chest-pic {
  width: 64px; height: 64px; flex: 0 0 auto; object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}
.gh-chest.ready .gh-chest-pic { filter: drop-shadow(0 0 14px rgba(255, 107, 53, 0.6)); }
.gh-chest-txt { flex: 1; min-width: 0; }
.gh-chest-txt > b {
  display: block; font-size: 13px; font-weight: 700; color: var(--text);
}
.gh-chest-txt > b span { color: var(--ember); font-size: 17px; font-weight: 800; }
/* Pasek do NASTEPNEJ skrzyni, nie do pierwszej — gracz z 450 zetonami ma
   jedna gotowa i polowe drugiej, i to jest to, co chce wiedziec. */
.gh-chest-bar {
  display: block; height: 5px; margin: 7px 0 6px;
  background: rgba(255, 255, 255, 0.07); border-radius: 3px; overflow: hidden;
}
.gh-chest-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--ember), var(--gold-soft));
}
.gh-chest-sub {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-dim);
}
.gh-chest-sub img { width: 13px; height: 13px; }

/* Podpowiedz z tabela lupow. Chowana przez `visibility`, a nie `display`,
   zeby dalo sie ja plynnie wygasic — i zeby nie lapala klikniec, gdy jest
   niewidoczna (ten sam blad, ktory zjadal klikniecia gosciom). */
.gh-chest-tip {
  /* POD karta, nie nad. Skrzynia stoi wysoko na stronie i podpowiedz
     otwierana do gory wychodzila poza gorna krawedz ekranu. */
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: 250px; padding: 10px 12px;
  background: #140D28;
  border: 1px solid rgba(255, 107, 53, 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s;
}
.gh-chest:hover .gh-chest-tip { opacity: 1; visibility: visible; }
.gh-chest-tip > b {
  display: block; margin-bottom: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold-deep);
}
.gh-chest-tip span {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; line-height: 1.9;
}
.gh-chest-tip span img { width: 14px; height: 14px; flex: 0 0 auto; }
.gh-chest-tip span i { flex: 1; font-style: normal; }
.gh-chest-tip span b { color: var(--text-dim); font-weight: 700; }

@media (max-width: 560px) {
  .gh-chest { flex-wrap: wrap; }
  .gh-chest .gh-act { width: 100%; justify-content: center; }
  /* Na telefonie nie ma najezdzania mysza — podpowiedz staje sie zwykla
     lista pod spodem, zamiast chowac sie na zawsze. */
  .gh-chest-tip {
    position: static; width: 100%; opacity: 1; visibility: visible;
    box-shadow: none; background: rgba(0, 0, 0, 0.25); margin-top: 4px;
  }
}

/* ── Powiadomienie na srodku ekranu ───────────────────────────
   showFloatingMessage wypada u samej gory; przy kliknieciu w dolnej
   polowie strony gracz go nie widzi, bo patrzy tam, gdzie kliknal.
   To jest dla ODPOWIEDZI na klikniecie, nie dla tla. */
.gv-cnote {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  /* Niewidoczne NIE LAPIE klikniec — ta sama zasada co przy oknie
     „Polacz konto", ktore przy opacity 0 zjadalo cala gre. */
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.gv-cnote.on { opacity: 1; pointer-events: auto; }
.gv-cnote-card {
  max-width: 340px; text-align: center;
  padding: 18px 22px;
  background: linear-gradient(160deg, var(--surface), var(--bg-lighter));
  border: 1px solid rgba(200, 168, 78, 0.45);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal), 0 0 30px rgba(6, 3, 16, 0.6);
  transform: translateY(10px) scale(0.96);
  transition: transform 0.18s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.gv-cnote.on .gv-cnote-card { transform: translateY(0) scale(1); }
.gv-cnote-card b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 16px; line-height: 1.3; color: var(--text-bright);
}
.gv-cnote-card span {
  display: block; margin-top: 8px;
  font-size: 13px; font-weight: 700; color: var(--gold-soft);
}
/* Wygaszony, ale KLIKALNY — `disabled` polykalby klikniecie i gracz nie
   dowiedzialby sie, dlaczego nic sie nie dzieje. */
.gh-act.off { filter: grayscale(0.55) brightness(0.72); }
.gh-act.off:hover { filter: grayscale(0.35) brightness(0.85); }


/* Przywolanie zwinietej rozmowy tam, gdzie NIE MA paska po prawej —
   czyli w ukladach, w ktorych rozmowa stoi pod hala. Przy trzech kolumnach
   pigulki nie ma, zeby nie bylo dwoch sposobow na to samo.
   `display` stalo tu DWA RAZY (none i inline-flex) i drugie kasowalo
   pierwsze — pigulka pokazywala sie razem z paskiem. */
.gh-talk-call {
  display: none;
  position: absolute; right: 20px; bottom: 118px; z-index: 3;
  align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(58, 42, 110, 0.95), rgba(26, 16, 53, 0.95));
  border: 1px solid rgba(200, 168, 78, 0.35);
  color: var(--text); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(6, 3, 16, 0.6);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.gh-talk-call img { width: 18px; height: 18px; object-fit: contain; }
.gh-talk-call:hover { transform: translateY(-2px); border-color: rgba(255, 212, 106, 0.6); }
.gh-talk-call:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
@media (max-width: 900px) {
  .gh-talk-call { right: 14px; bottom: 150px; }
}

/* Licznik nieprzeczytanych na zwinietej rozmowie. Bez niego zwiniecie
   znaczylo „przestaje wiedziec, czy ktos cos napisal" — a rozmowa gildii
   niesie ustalenia skladu na wojne. */
.gh-unread {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--loss); color: #fff; border-radius: 9px;
  font-style: normal; font-size: 10px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}
.gh-talk-rail .gh-unread { flex: 0 0 auto; }
.gh-talk-call .gh-unread { margin-left: 2px; }
/* Atrybut `hidden` chowa element regula PRZEGLADARKI, a ta przegrywa
   z kazda regula autora — `display: inline-flex` wyzej kasowal ja
   w calosci i przy zerze na pasku wisialo „0". Trzeba to napisac
   samemu, inaczej `hidden` w tym miejscu nic nie znaczy. */
.gh-unread[hidden] { display: none; }

/* Podglad walki — pasek widoczny TYLKO na podgladzie (localhost,
   *.pages.dev). Celowo wyglada na narzedzie, a nie na funkcje gry:
   wygaszony, drobnym pismem, z dopiskiem, ze liczby sa zmyslone. */
.gd2-preview {
  margin-top: 26px; padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  opacity: 0.75;
}
.gd2-preview span { font-size: 10px; color: var(--text-dim); }

/* ══ DOWODZTWO ════════════════════════════════════════════════
   Ekran oficera. Uklad i powod: naglowek js/guild-command.js.

   DWA STOPNIE GLOSNOSCI, nie piec. Odprawa na gorze swieci (to sa
   decyzje, ktore czekaja), karty pod nia sa ciche (to jest stan).
   Gdy odprawa jest pusta, ekran nie ma ani jednego jasnego elementu
   i to jest poprawny wyglad dnia, w ktorym nic nie trzeba robic.

   Ta sama scianka co Glebiny: tlo hali przyciemnione, tresc w jednej
   kolumnie na telefonie i w dwoch od 720 px. */
.gc { position: relative; height: 100%; overflow: hidden; }
.gc-bg { position: absolute; inset: 0; z-index: 0; }
/* Tlo hali widoczne, nie czarne: ta sama nakladka, co na Rozkazach
   (`.go-bg-overlay`), zeby pochodnie przebijaly. */
.gc-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: saturate(0.8) brightness(0.9);
}
.gc-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(58, 42, 110, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(10, 6, 22, 0.86) 0%, rgba(10, 6, 22, 0.93) 45%, rgba(10, 6, 22, 0.985) 100%);
}
/* Zapas na dole taki sam jak w Glebinach — pasek nawigacji stoi nad
   trescia i bez tego ostatnia karta konczy sie pod nim. */
.gc-wrap {
  position: relative; z-index: 1;
  height: 100%; overflow-y: auto;
  padding: 18px 20px 190px;
  max-width: 900px; margin: 0 auto;
}

.gc-back {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 8px; margin: 0 0 8px -8px; border-radius: 8px;
}
.gc-back:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }

/* Naglowek na plakiecie, tej samej co herb w hali i tytul Rozkazow. */
.gc-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 4px;
  padding: 18px 22px;
  border: 1px solid rgba(200, 168, 78, 0.38);
  border-radius: 22px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(200, 168, 78, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(64, 46, 122, 0.62), rgba(18, 11, 38, 0.94) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
              inset 0 -16px 24px -18px rgba(0, 0, 0, 0.9),
              0 8px 26px rgba(6, 3, 16, 0.6);
}
.gc-head-txt { flex: 1; min-width: 0; }
.gc-kicker {
  margin: 0 0 4px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(255, 212, 106, 0.72);
}
.gc-head h1 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1.1; letter-spacing: 0.06em;
  color: var(--gold-soft);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 22px rgba(255, 212, 106, 0.3);
}
/* Ranga jest tu informacja o UPRAWNIENIACH, a nie ozdoba: mowi, dlaczego
   ten ekran w ogole sie otworzyl i czemu przywodca widzi o jedna rzecz
   wiecej (podatek). */
.gc-role {
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(200, 168, 78, 0.35); color: var(--gold-soft);
}
.gc-role.officer { border-color: rgba(79, 172, 254, 0.4); color: #4FACFE; }

/* Naglowek dzialu z filigranem — ten sam, co `.gh-rule` w hali. */
.gc-rule {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 24px 0 12px; text-align: center;
}
.gc-rule::before, .gc-rule::after {
  content: ''; flex: 1; height: 14px; min-width: 40px;
  background:
    var(--gv-filigree) right center / 120px 14px no-repeat,
    linear-gradient(90deg, transparent, rgba(200, 168, 78, 0.5)) left center / calc(100% - 118px) 1px no-repeat;
}
.gc-rule::after { transform: scaleX(-1); }
.gc-rule > span {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-soft); white-space: nowrap;
}

/* ── ODPRAWA ──────────────────────────────────────────────────
   Kazdy wiersz konczy sie przyciskiem, ktory te sprawe zamyka. Wiersz
   bez przycisku nie ma prawa tu stac. */
.gc-tasks { display: flex; flex-direction: column; gap: 8px; }
.gc-task {
  /* zawijanie: na waskim ekranie przycisk schodzi do wlasnej linijki,
     zamiast sciskac tytul do trzech wierszy po dwa slowa */
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background:
    radial-gradient(60% 120% at 4% 50%, rgba(255, 212, 106, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(64, 46, 122, 0.55), rgba(20, 13, 42, 0.92) 70%);
  border: 1px solid rgba(255, 212, 106, 0.45);
  border-left: 3px solid var(--gold-soft);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 14px rgba(6, 3, 16, 0.5), 0 0 18px rgba(255, 212, 106, 0.1);
}
.gc-task.war { background: linear-gradient(90deg, rgba(255, 107, 53, 0.14), transparent 65%);
               border-color: rgba(255, 107, 53, 0.32); border-left-color: var(--ember); }
.gc-task.defend { background: linear-gradient(90deg, rgba(79, 172, 254, 0.14), transparent 65%);
                  border-color: rgba(79, 172, 254, 0.32); border-left-color: var(--info); }
.gc-task.abyss { background: linear-gradient(90deg, rgba(255, 71, 87, 0.14), transparent 65%);
                 border-color: rgba(255, 71, 87, 0.32); border-left-color: var(--loss); }
.gc-task.crew { background: linear-gradient(90deg, rgba(46, 213, 115, 0.12), transparent 65%);
                border-color: rgba(46, 213, 115, 0.28); border-left-color: var(--win); }
.gc-task-ic { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; }
.gc-task-txt { flex: 1 1 150px; min-width: 0; }
.gc-task-txt b {
  display: block; font-size: 13px; font-weight: 800;
  color: var(--text-bright); letter-spacing: 0.2px;
}
.gc-task-txt span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.gc-task .gvk-btn { flex: 0 0 auto; margin-left: auto; }

/* Cisza. Jedna linijka zamiast pustej listy w ramce — ramka wokol
   „nic nie czeka" wyglada jak zepsuty element. */
/* Pusta odprawa: cicha tabliczka, nie luzny wiersz tekstu. */
.gc-quiet {
  margin: 0; padding: 16px; text-align: center;
  font-size: 12px; line-height: 1.5; color: rgba(176, 165, 212, 0.65);
  border: 1px dashed rgba(200, 168, 78, 0.25); border-radius: 14px;
  background: rgba(20, 13, 42, 0.4);
}

/* ── KARTY STANU ────────────────────────────────────────────── */
.gc-grid {
  /* auto-fit, a nie zapytanie o szerokosc OKNA: karty maja sie ustawiac
     wedlug tego, ile miejsca ma PANEL. Przy zapytaniu o okno makieta
     zwezona do 390 px dalej rysowala dwie kolumny i pokazywala uklad,
     ktorego na telefonie nie ma. */
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

/* Karty stanu w tej samej oprawie, co karty Rozkazow: fioletowy bazalt,
   zlota ramka, ikona w oswietlonej wnece jak w drzwiach hali. */
.gc-card {
  display: flex; flex-direction: column;
  padding: 14px 16px 15px;
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(200, 168, 78, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(64, 46, 122, 0.55), rgba(20, 13, 42, 0.94) 65%);
  border: 1px solid rgba(200, 168, 78, 0.3);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(6, 3, 16, 0.55);
  transition: border-color 0.18s ease;
}
.gc-card:hover { border-color: rgba(255, 212, 106, 0.5); }
.gc-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gc-card-head img {
  width: 44px; height: 44px; padding: 5px; object-fit: contain; flex: 0 0 auto;
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 212, 106, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(200, 168, 78, 0.3);
}
.gc-card-head b {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--text-bright);
}
.gc-elo { font-size: 11px; font-weight: 800; color: var(--gold-soft); white-space: nowrap; }

/* Przeciwnik albo boss — jedna linijka, bo to jest odpowiedz na „z kim". */
.gc-vs {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.25); border-radius: var(--radius);
}
.gc-vs-lab {
  font-size: 9px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-dim); width: 100%;
}
.gc-vs b { font-size: 14px; font-weight: 800; color: var(--text-bright); }
.gc-vs b i { font-style: normal; color: var(--text-dim); font-weight: 700; }
.gc-vs-elo { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-dim); }

/* Liczby, ktore niosa decyzje. Liczba duza, podpis maly — odwrotnie niz
   w starym panelu, gdzie oba stopnie byly 9 px i nie dalo sie ich odroznic. */
.gc-facts { display: flex; gap: 10px; margin-bottom: 10px; }
.gc-facts > span {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dim); line-height: 1.25;
}
.gc-facts > span b { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-bright); text-transform: none; letter-spacing: 0; }
.gc-facts > span.hot b { color: var(--gold-soft); }
.gc-facts > span.warn b { color: #FFB340; }
.gc-facts > span.short b { color: #ff8a94; }

.gc-note { margin: 0 0 10px; font-size: 11px; color: var(--text-dim); }
.gc-note.warn { color: #FFB340; }

.gc-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 4px; }
/* BEZ `disabled`. Wylaczony przycisk polyka klikniecie i wyglada na
   zepsuty; wygaszony klika sie i mowi, czego brakuje. Ta sama zasada,
   co przy skrzyni wojennej w hali. */
.gvk-btn.off { opacity: 0.5; }

/* ── Kto sie nie zapisal ───────────────────────────────────── */
.gc-roll-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 7px 10px; margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  color: var(--text-dim); font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.gc-roll-btn b { color: var(--text-bright); }
.gc-roll-btn i { margin-left: auto; font-style: normal; }
.gc-roll-btn.on { border-color: rgba(200, 168, 78, 0.3); color: var(--text); }
.gc-roll { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.gc-who {
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px; color: var(--text-dim);
}
/* Obecnych wyrozniamy, bo do nich napisanie ma sens teraz. */
.gc-who.on { color: var(--text); border-color: rgba(46, 213, 115, 0.35); }
.gc-who.more { color: var(--text-dim); opacity: 0.7; }
.gc-roll-hint { margin: 0 0 10px; font-size: 10px; color: var(--text-dim); opacity: 0.8; }
.gc-roll-done { margin: 0 0 10px; font-size: 11px; color: var(--win); }

/* ── Dlugosc zapisow ──────────────────────────────────────── */
.gc-hours { position: relative; }
.gc-hours-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim); font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.gc-hours-btn b { color: var(--gold-soft); }
.gc-hours-btn i { font-style: normal; }
.gc-hours-list {
  /* W dol, nie w gore: nad przyciskiem stoi cena wyprawy, czyli liczba,
     na ktora oficer wlasnie patrzy, wybierajac dlugosc zapisow. */
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 6px;
  background: linear-gradient(160deg, var(--surface), var(--bg-lighter));
  border: 1px solid rgba(200, 168, 78, 0.3); border-radius: 10px;
  box-shadow: var(--shadow-modal);
}
.gc-hours-opt {
  padding: 6px 12px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent;
  color: var(--text-dim); font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.gc-hours-opt.on { border-color: rgba(200, 168, 78, 0.5); color: var(--gold-soft); }

/* ── Rozbudowa ─────────────────────────────────────────────── */
.gc-purse { display: flex; gap: 10px; margin-bottom: 10px; }
.gc-purse span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 12px; font-weight: 800; color: var(--gold-soft);
}
.gc-purse img { width: 14px; height: 14px; }
.gc-up {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 11px; margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
}
.gc-up.ready { border-color: rgba(200, 168, 78, 0.35); }
.gc-up img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.gc-up-txt { min-width: 0; }
.gc-up-txt b { display: block; font-size: 13px; font-weight: 800; color: var(--text-bright); }
.gc-up-txt b i { font-style: normal; color: var(--gold-soft); font-weight: 700; }
.gc-up-txt span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.gc-up-cost {
  display: flex !important; align-items: center; gap: 4px;
  margin-top: 5px !important; color: var(--gold-soft) !important; font-weight: 800;
}
.gc-up-cost img { width: 13px; height: 13px; }

/* ── Podatek ───────────────────────────────────────────────── */
.gc-tax {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 11px; margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.22); border-radius: var(--radius);
  font-size: 11px; color: var(--text-dim);
}
.gc-tax b { font-size: 15px; font-weight: 800; color: var(--gold-soft); }

/* ── Pytanie ───────────────────────────────────────────────── */
/* Przykrywa EKRAN, nie karte: te decyzje wydaja pieniadze gildii albo
   kasuja cudze zapisy. */
.gc-ask {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(6, 3, 16, 0.72);
}
.gc-ask-card {
  width: 100%; max-width: 340px; text-align: center;
  padding: 20px 18px;
  background: linear-gradient(160deg, var(--surface), var(--bg-lighter));
  border: 1px solid rgba(200, 168, 78, 0.35); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
}
.gc-ask-card b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 15px; line-height: 1.35; color: var(--text-bright);
}
.gc-ask-card > span {
  display: block; margin-top: 9px; font-size: 12px; font-weight: 700; color: var(--gold-soft);
}
.gc-ask-row { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }

/* ═══════════════════════════════════════════════════════════════
   ROZKAZY GILDII
   ═══════════════════════════════════════════════════════════════
   Druga wersja (04.09). Pierwsza byla lista trzech ciemnych wierszy
   z paskiem — Mark: „brzydka, prosta, bez efektow". Ten ekran ma byc
   SALA ODPRAW z tego samego swiata, co hala: fioletowy bazalt, stare
   zloto, swiatlo bijace z wnek. Trzy zasady:

   1. GRAFIKA MA BYC WIDOCZNA. Tlo sali odpraw stalo na 32% i ginelo;
      teraz jest nagłowkiem z prawdziwego obrazu, a tytul stoi NA nim.
   2. TRZY KONTRAKTY TO TRZY PLAKIETKI OBOK SIEBIE, nie trzy wiersze
      tabeli. Na telefonie wracaja do kolumny, ale z ikona w oswietlonej
      wnece, jak drzwi hali.
   3. JASNO. Karty sa fioletowe, nie czarne; liczby duze i zlote;
      tabele w dwoch kolumnach zamiast jednej dlugiej listy.

   Kazdy obrazek jest nieobowiazkowy (`onerror` go zdejmuje) — ekran ma
   wygladac tak samo z kompletem grafik i bez niego. */

/* Bez `padding-bottom`: `.gd-content` trzyma zapas na pasek nawigacji
   liczony z `--gv-nav-h`, a wpis tutaj przebijalby go (guild.css laduje
   sie po style.css) i chowal ostatnie wiersze pod nawigacja. */
.go-wrap { max-width: 900px; margin: 0 auto; }

/* Tlo strony: ta sama hala, co za drzwiami. Nakladka jest jasniejsza
   niz w `.gd-bg-overlay`, zeby pochodnie z obrazu przebijaly przez nia. */
.go-bg-overlay {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(58, 42, 110, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(10, 6, 22, 0.86) 0%, rgba(10, 6, 22, 0.93) 45%, rgba(10, 6, 22, 0.985) 100%);
}

/* Wejscie: karty wjezdzaja od dolu jedna po drugiej. `--i` nadaje JS. */
@keyframes goIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.go-in { animation: goIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }

/* ── Naglowek: sala odpraw ───────────────────────────────────── */
.go-head {
  position: relative; overflow: hidden;
  margin-bottom: 0; padding: 52px 18px 54px;
  text-align: center;
  border: 1px solid rgba(200, 168, 78, 0.38);
  border-radius: 24px;
  background: linear-gradient(180deg, #2A1C52, #120B26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
              0 10px 30px rgba(6, 3, 16, 0.6);
}
/* Obraz stoi w PELNEJ mocy; ciemnieje tylko dolna krawedz (pod pieczecie)
   i sam srodek (pod tytul). Bez pliku zostaje gradient bazaltu. */
.go-head-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.go-head-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; filter: saturate(1.05) brightness(1.08);
}
.go-head-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(55% 70% at 50% 45%, rgba(10, 6, 22, 0.45), transparent 100%),
    linear-gradient(180deg, rgba(10, 6, 22, 0.15) 0%, rgba(10, 6, 22, 0.1) 45%, rgba(18, 11, 38, 0.92) 100%);
}
.go-head > *:not(.go-head-art) { position: relative; z-index: 1; }

.go-kicker {
  margin: 0 0 8px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(255, 212, 106, 0.72);
}
.go-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 38px; line-height: 1.05; letter-spacing: 0.08em;
  color: var(--gold-soft);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 26px rgba(255, 212, 106, 0.4);
}
/* Ozdobnik pod tytulem: dwie linie i romb, jak na herbie. */
.go-orn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 12px auto 0; width: 220px;
}
.go-orn::before, .go-orn::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 212, 106, 0.8));
}
.go-orn::after { background: linear-gradient(90deg, rgba(255, 212, 106, 0.8), transparent); }
.go-orn i {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--gold-soft); box-shadow: 0 0 8px rgba(255, 212, 106, 0.8);
}
.go-sub {
  margin: 12px auto 0; max-width: 420px;
  font-size: 12.5px; line-height: 1.5; color: rgba(240, 234, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ── Pieczecie: jedna kuta plakietka, nachodzi na dol naglowka ── */
.go-seals {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: stretch;
  width: fit-content; max-width: calc(100% - 24px);
  margin: -30px auto 0; padding: 4px;
  border: 1px solid rgba(255, 212, 106, 0.42);
  border-radius: 18px;
  background: linear-gradient(180deg, #33245F, #16102C);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
              0 8px 24px rgba(6, 3, 16, 0.7), 0 0 0 4px rgba(10, 6, 22, 0.6);
}
.go-seal {
  min-width: 96px; padding: 12px 16px 10px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
.go-seal:first-child { border-left: none; }
.go-seal b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1; color: var(--text-bright);
}
.go-seal span {
  display: block; margin-top: 6px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-dim);
}
.go-seal.lit b { color: var(--gold-soft); text-shadow: 0 0 14px rgba(255, 212, 106, 0.45); }
.go-seal-div { display: flex; align-items: center; justify-content: center; gap: 8px; height: 24px; }
.go-seal-div img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); }
.go-seal-div b { font-size: 15px; letter-spacing: 0.04em; }

.go-clock {
  margin: 14px 0 0; text-align: center;
  font-size: 11px; letter-spacing: 0.06em; color: var(--text-dim);
}
.go-clock b { color: var(--gold-soft); font-weight: 800; }

/* ── Naglowek dzialu: wysrodkowany, z liniami po obu stronach ── */
.go-rule {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 14px; margin: 30px 0 14px; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-soft);
}
/* Filigran z `--gv-filigree` (definicja przy `.gh-rule` wyzej). */
.go-rule::before, .go-rule::after {
  content: ''; flex: 1; height: 14px; min-width: 40px;
  background:
    var(--gv-filigree) right center / 120px 14px no-repeat,
    linear-gradient(90deg, transparent, rgba(200, 168, 78, 0.5)) left center / calc(100% - 118px) 1px no-repeat;
}
.go-rule::after { transform: scaleX(-1); }
.go-rule small {
  flex-basis: 100%; order: 9;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none; color: var(--text-dim);
}

/* ── Kontrakty: trzy plakietki w rzedzie ────────────────────── */
.go-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.go-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 20px 16px 16px; text-align: center;
  border: 1px solid rgba(200, 168, 78, 0.3);
  border-radius: 22px;
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(200, 168, 78, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(64, 46, 122, 0.62), rgba(20, 13, 42, 0.94) 65%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
              inset 0 -16px 24px -18px rgba(0, 0, 0, 0.9),
              0 6px 18px rgba(6, 3, 16, 0.55);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.go-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 212, 106, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
              inset 0 -16px 24px -18px rgba(0, 0, 0, 0.9),
              0 12px 28px rgba(6, 3, 16, 0.65), 0 0 24px rgba(255, 212, 106, 0.16);
}
/* Wneka: ikona swieci W kadrze, ta sama nisza, co drzwi hali. */
.go-card-ic {
  flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50% 50% 44% 44%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 212, 106, 0.24), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.28)),
    url('../img/guild/door-niche.webp') center / 100% 100% no-repeat;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.75),
              0 0 0 1px rgba(200, 168, 78, 0.3), 0 0 18px rgba(255, 212, 106, 0.1);
  transition: box-shadow 0.18s ease;
}
.go-card:hover .go-card-ic {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.75),
              0 0 0 1px rgba(255, 212, 106, 0.5), 0 0 24px rgba(255, 212, 106, 0.28);
}
.go-card-ic img {
  width: 82px; height: 82px; object-fit: contain; display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
}
.go-card-body { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; margin-top: 12px; }
.go-card-top h3 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 15.5px; line-height: 1.2; color: var(--text-bright);
  letter-spacing: 0.02em;
}
/* Licznik: DUZY, pod tytulem. To pierwsza liczba, na ktora patrzy gracz. */
.go-count {
  display: block; margin-top: 6px;
  font-family: var(--font-display); font-size: 13px; color: rgba(176, 165, 212, 0.75);
  white-space: nowrap;
}
.go-count b {
  font-size: 26px; font-weight: 700; color: var(--gold-soft);
  text-shadow: 0 0 14px rgba(255, 212, 106, 0.35);
}
/* Jedno zdanie, GDZIE to zrobic. Pasek nie mowi graczowi, co klikac. */
.go-what {
  flex: 1; margin: 8px 0 12px; font-size: 11.5px; line-height: 1.5;
  color: var(--text-dim);
}

/* ── Pasek: prog jest KRESKA W SRODKU, nie koncem ────────────── */
.go-bar {
  position: relative; width: 100%; height: 14px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.48);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
/* `overflow: hidden` na WYPELNIENIU, nie tylko na torze. Przetarcie
   swiatla (`::after`) wyjezdzalo poza krotki pasek (1 z 20 = 5%) na pusty
   tor, zatrzymywalo sie tam na pol cyklu i wygladalo jak zawieszona
   plama — Mark: „poswiata, ktora sie zatrzymuje nagle bez ruchu". */
.go-bar i {
  position: absolute; inset: 0 auto 0 0; display: block;
  border-radius: 8px; min-width: 0; overflow: hidden;
  background: linear-gradient(180deg, #FFE59A 0%, #FFD46A 45%, #C8A84E 100%);
  box-shadow: 0 0 14px rgba(255, 212, 106, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  /* Pasek DOJEZDZA po wejsciu na ekran — widac, ze cos przybylo. */
  animation: goFill 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
@keyframes goFill { from { width: 0; } }
/* Przetarcie swiatla po pasku, raz na cztery sekundy. */
.go-bar i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: goShine 4s ease-in-out 1.4s infinite;
}
@keyframes goShine { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(220%); } }
.go-bar u {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}
.go-nums {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 8px; font-size: 10px; color: rgba(176, 165, 212, 0.7);
}
/* Zaslugi jako pieczatka, nie luzna liczba. */
.go-merit {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; color: var(--gold-soft);
  background: rgba(255, 212, 106, 0.1);
  border: 1px solid rgba(255, 212, 106, 0.35);
  white-space: nowrap;
}
.go-merit em { font-style: normal; }

/* Zrobione: zielony kontur, zielony pasek i pieczec w rogu. */
.go-card.done { border-color: rgba(46, 213, 115, 0.5); }
.go-card.done .go-card-ic {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.75),
              0 0 0 1px rgba(46, 213, 115, 0.5), 0 0 22px rgba(46, 213, 115, 0.28);
}
.go-card.done .go-bar i {
  background: linear-gradient(180deg, #7DF0A8, #2ED573 50%, #1FA85A);
  box-shadow: 0 0 14px rgba(46, 213, 115, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.go-card.done .go-count b { color: var(--win); text-shadow: 0 0 14px rgba(46, 213, 115, 0.4); }
.go-stamp {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; color: #0A0616;
  background: linear-gradient(180deg, #7DF0A8, #2ED573);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 16px rgba(46, 213, 115, 0.55), 0 3px 8px rgba(0, 0, 0, 0.6);
  animation: goStamp 460ms cubic-bezier(0.2, 1.5, 0.4, 1) 0.4s both;
}
@keyframes goStamp {
  0% { transform: scale(2.4) rotate(-18deg); opacity: 0; }
  60% { transform: scale(0.9) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ── Przelosowanie ───────────────────────────────────────────── */
.go-reroll {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 380px; margin: 14px auto 0; padding: 12px 18px;
  font-family: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--gold-soft); cursor: pointer;
  border: 1px solid rgba(255, 212, 106, 0.45); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 212, 106, 0.16), rgba(20, 13, 42, 0.6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(6, 3, 16, 0.5);
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.go-reroll:hover {
  border-color: rgba(255, 212, 106, 0.8); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 20px rgba(6, 3, 16, 0.6), 0 0 18px rgba(255, 212, 106, 0.2);
}
.go-reroll:disabled { opacity: 0.5; cursor: default; transform: none; }
.go-reroll img { width: 15px; height: 15px; }
.go-reroll-used {
  margin: 12px 0 0; text-align: center;
  font-size: 11px; color: rgba(176, 165, 212, 0.6);
}

/* ── Rozkaz tygodnia: szeroki fioletowy sztandar ─────────────── */
.go-week {
  position: relative; overflow: hidden;
  display: flex; gap: 20px; align-items: center;
  padding: 20px 22px;
  border: 1px solid rgba(155, 123, 255, 0.45);
  border-radius: 22px;
  background:
    radial-gradient(70% 90% at 12% 50%, rgba(155, 123, 255, 0.3), transparent 70%),
    linear-gradient(180deg, rgba(84, 56, 160, 0.55), rgba(20, 13, 42, 0.94) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
              0 8px 22px rgba(6, 3, 16, 0.55), 0 0 30px rgba(155, 123, 255, 0.12);
}
/* Powolny oddech fioletowej poswiaty za ikona. */
.go-week::before {
  content: ''; position: absolute; left: -40px; top: -40px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 123, 255, 0.32), transparent 65%);
  animation: goBreathe 4.5s ease-in-out infinite; pointer-events: none;
}
@keyframes goBreathe { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.go-week > * { position: relative; }
.go-week-ic {
  flex: 0 0 auto; width: 110px; height: 110px; border-radius: 50% 50% 44% 44%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(155, 123, 255, 0.34), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.26)),
    url('../img/guild/door-niche.webp') center / 100% 100% no-repeat;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(155, 123, 255, 0.45),
              0 0 26px rgba(155, 123, 255, 0.3);
}
.go-week-ic img {
  width: 88px; height: 88px; object-fit: contain; display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
}
.go-week-body { flex: 1; min-width: 0; text-align: left; }
.go-week .go-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.go-week .go-card-top h3 { font-size: 19px; }
.go-week .go-count { margin-top: 0; }
.go-week .go-count b { color: #C4AEFF; text-shadow: 0 0 14px rgba(155, 123, 255, 0.5); }
.go-week .go-what { margin: 6px 0 12px; }
.go-week .go-bar i {
  background: linear-gradient(180deg, #D9CCFF, #9B7BFF 50%, #6F4FD8);
  box-shadow: 0 0 14px rgba(155, 123, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.go-week .go-merit {
  color: #C4AEFF; background: rgba(155, 123, 255, 0.14); border-color: rgba(155, 123, 255, 0.45);
}
.go-week.done { border-color: rgba(46, 213, 115, 0.5); }
.go-week.done .go-bar i { background: linear-gradient(180deg, #7DF0A8, #2ED573 50%, #1FA85A); }
.go-week.done .go-count b { color: var(--win); }

/* ── Tablice: liga i wklad w dwoch kolumnach ─────────────────── */
.go-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
.go-tab { display: flex; flex-direction: column; gap: 6px; }
.go-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(200, 168, 78, 0.16);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(58, 42, 110, 0.38), rgba(16, 10, 32, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.go-row:hover { border-color: rgba(255, 212, 106, 0.35); transform: translateX(2px); }
.go-row.mine {
  border-color: rgba(255, 212, 106, 0.55);
  background: linear-gradient(180deg, rgba(255, 212, 106, 0.16), rgba(20, 13, 42, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 18px rgba(255, 212, 106, 0.12);
}
/* Miejsce: podium dostaje medal, reszta cichy numer. */
.go-place {
  flex: 0 0 auto; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  color: rgba(176, 165, 212, 0.65); border-radius: 50%;
}
.go-row.p1 .go-place, .go-row.p2 .go-place, .go-row.p3 .go-place {
  color: #0A0616; font-size: 12.5px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.go-row.p1 .go-place { background: linear-gradient(180deg, #FFE9A3, #FFD700 55%, #C8A84E); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 215, 0, 0.45); }
.go-row.p2 .go-place { background: linear-gradient(180deg, #F4F4F8, #C9C9D6 55%, #8E8EA0); }
.go-row.p3 .go-place { background: linear-gradient(180deg, #F2B98A, #D08A4E 55%, #96552A); }
.go-crest { flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); }
.go-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-bright);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.go-row.mine .go-name { color: var(--gold-soft); }
.go-tag { color: rgba(176, 165, 212, 0.7); font-weight: 700; }
.go-meta { flex: 0 0 auto; font-size: 10px; color: rgba(176, 165, 212, 0.6); white-space: nowrap; }
.go-score {
  flex: 0 0 auto; min-width: 44px; text-align: right;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--gold-soft);
}
.go-gap { text-align: center; color: rgba(176, 165, 212, 0.4); font-size: 14px; line-height: 1; }
.go-empty {
  padding: 22px 16px; text-align: center; font-size: 11.5px; line-height: 1.5;
  color: rgba(176, 165, 212, 0.6);
  border: 1px dashed rgba(200, 168, 78, 0.25); border-radius: 14px;
  background: rgba(20, 13, 42, 0.4);
}

/* Podium zeszlego tygodnia — mniejsze, bo to juz historia. */
.go-past .go-row { padding: 6px 12px; opacity: 0.85; }
.go-past .go-name { font-size: 11.5px; color: var(--text-dim); }
.go-past .go-score { font-size: 12px; color: var(--text-dim); }

/* Chorazy: znaczek przy nazwisku na tablicy wkladu. */
.go-banner {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  color: #C4AEFF;
  background: rgba(155, 123, 255, 0.16);
  border: 1px solid rgba(155, 123, 255, 0.45);
}

/* ── Telefon: kontrakty wracaja do kolumny, ikona po lewej ───── */
@media (max-width: 720px) {
  .go-grid { grid-template-columns: 1fr; gap: 10px; }
  .go-card {
    flex-direction: row; align-items: center; text-align: left;
    padding: 14px 14px 13px; border-radius: 18px; gap: 14px;
  }
  .go-card-ic { width: 72px; height: 72px; }
  .go-card-ic img { width: 58px; height: 58px; }
  .go-card-body { margin-top: 0; }
  .go-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .go-card-top h3 { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .go-count { margin-top: 0; }
  .go-count b { font-size: 18px; }
  .go-what { margin: 4px 0 8px; flex: 0 0 auto; }
  .go-stamp { top: 8px; right: 8px; width: 24px; height: 24px; font-size: 12px; }
  .go-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .go-head { padding: 30px 14px 42px; border-radius: 20px; }
  .go-title { font-size: 28px; }
  .go-sub { font-size: 11.5px; }
  .go-seals { max-width: calc(100% - 8px); flex-wrap: wrap; justify-content: center; }
  .go-seal { min-width: 0; flex: 1 1 40%; padding: 9px 10px 8px; }
  .go-seal:nth-child(3) { border-left: none; }
  .go-seal:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .go-seal b { font-size: 20px; }
  .go-week { gap: 14px; padding: 14px; }
  .go-week-ic { width: 76px; height: 76px; }
  .go-week-ic img { width: 60px; height: 60px; }
  .go-week .go-card-top h3 { font-size: 15px; }
  .go-week .go-count b { font-size: 18px; }
  .go-rule { font-size: 11.5px; letter-spacing: 0.14em; }
  .go-meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .go-in, .go-bar i, .go-bar i::after, .go-stamp, .go-week::before { animation: none; }
  .go-card, .go-reroll, .go-row { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BUDYNKI — podstrona (js/ui.js _showBuildingsPage)
   ═══════════════════════════════════════════════════════════════
   Ta sama sciana, co Rozkazy: `.go-head`, `.go-seals`, `.go-bar`.
   Wlasne sa tylko karty — z DUZA grafika budynku na gorze, bo grafiki
   `img/guild/b-*.webp` sa izometryczne i w 72 px nie bylo ich widac.
   Kolor budynku (`--c`) siedzi w poswiacie za grafika, w pasku i w
   liczbie poziomu; reszta karty jest wspolna fioletowa plyta. */
.go-seal.crys b { color: #d9b8ff; text-shadow: 0 0 14px rgba(155, 123, 255, 0.45); }
.go-seal b small { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--text-dim); }

.gb-grid {
  display: grid; gap: 14px; margin-top: 22px;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
.gb-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 14px 14px 14px; text-align: center;
  border: 1px solid rgba(200, 168, 78, 0.3);
  border-radius: 22px;
  background:
    radial-gradient(90% 50% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(64, 46, 122, 0.6), rgba(20, 13, 42, 0.94) 65%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
              inset 0 -16px 24px -18px rgba(0, 0, 0, 0.9),
              0 6px 18px rgba(6, 3, 16, 0.55);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.gb-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 212, 106, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
              inset 0 -16px 24px -18px rgba(0, 0, 0, 0.9),
              0 12px 28px rgba(6, 3, 16, 0.65), 0 0 24px color-mix(in srgb, var(--c) 30%, transparent);
}
/* Budynek stoi na poswiacie w swoim kolorze, bez ramki — grafika ma
   przezroczyste tlo i sama jest ksztaltem. */
.gb-pic {
  position: relative; width: 150px; height: 130px;
  display: flex; align-items: flex-end; justify-content: center;
}
.gb-pic::before {
  content: ''; position: absolute; left: 50%; bottom: 6px;
  width: 120px; height: 40px; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%);
  filter: blur(4px);
}
.gb-pic img {
  position: relative; width: 140px; height: 140px; object-fit: contain; display: block;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.7));
  transition: transform 0.2s ease;
}
.gb-card:hover .gb-pic img { transform: translateY(-4px) scale(1.04); }
.gb-card h3 {
  margin: 8px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: 15px; line-height: 1.2; color: var(--text-bright); letter-spacing: 0.02em;
}
.gb-lvl {
  display: flex; align-items: baseline; justify-content: center; gap: 5px;
  margin: 4px 0 8px; font-family: var(--font-display);
}
.gb-lvl b { font-size: 20px; font-weight: 700; color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); }
.gb-lvl span { font-size: 12px; color: rgba(176, 165, 212, 0.7); }
.gb-lvl em {
  font-style: normal; font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
  padding: 2px 7px; border-radius: 999px; color: #0A0616;
  background: linear-gradient(180deg, #7DF0A8, #2ED573);
}
.gb-card .go-bar { height: 10px; }
.gb-card .go-bar i {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.gb-bonus {
  width: 100%; display: flex; flex-direction: column; gap: 1px;
  margin-top: 10px; font-size: 10px; color: rgba(176, 165, 212, 0.65);
}
.gb-bonus b { font-size: 11.5px; font-weight: 800; color: var(--win); line-height: 1.35; }
.gb-bonus.next { margin-top: 6px; }
.gb-bonus.next b { color: var(--gold-soft); }
.gb-up {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 100%; margin-top: 12px; padding: 9px 10px;
  font-family: inherit; cursor: pointer; color: #2a1c04;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 12px;
  background: linear-gradient(180deg, #FFE08A, #E9A93A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 14px rgba(233, 169, 58, 0.28);
  transition: transform 0.14s ease, filter 0.14s ease, opacity 0.14s ease;
}
.gb-up b { font-size: 11.5px; font-weight: 800; }
.gb-up span { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; }
.gb-up span img { width: 13px; height: 13px; }
.gb-up:hover { transform: translateY(-1px); filter: brightness(1.06); }
.gb-up.off { opacity: 0.5; filter: saturate(0.6); }
.gb-up.off:hover { transform: none; filter: saturate(0.6); }
.gb-up.busy { opacity: 0.7; pointer-events: none; }
.gb-max {
  width: 100%; margin-top: 12px; padding: 8px;
  font-size: 11px; font-weight: 800; color: var(--win);
  border: 1px solid rgba(46, 213, 115, 0.4); border-radius: 12px;
  background: rgba(46, 213, 115, 0.1);
}
.gb-card.max { border-color: rgba(46, 213, 115, 0.45); }
.gb-cost {
  width: 100%; margin-top: 12px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 10px; color: rgba(176, 165, 212, 0.65);
  border: 1px dashed rgba(200, 168, 78, 0.25); border-radius: 12px;
  background: rgba(20, 13, 42, 0.4);
}
.gb-cost b { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; color: var(--gold-soft); }
.gb-cost b img { width: 13px; height: 13px; }
.gb-cost small { font-size: 9px; letter-spacing: 0.04em; }

/* ═══════════════════════════════════════════════════════════════
   DZIENNIK — podstrona (js/ui.js _showLogsPage)
   ═══════════════════════════════════════════════════════════════ */
.gl-wrap { max-width: 760px; }
.gl-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 22px 0 14px;
}
.gl-chip {
  padding: 7px 14px; border-radius: 999px;
  font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--text-dim); cursor: pointer;
  border: 1px solid rgba(200, 168, 78, 0.22);
  background: linear-gradient(180deg, rgba(58, 42, 110, 0.4), rgba(16, 10, 32, 0.8));
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.gl-chip:hover { color: var(--text); border-color: rgba(255, 212, 106, 0.45); }
.gl-chip.on {
  color: #2a1c04; border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, #FFE08A, #E9A93A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 10px rgba(233, 169, 58, 0.25);
}
.gl-list { display: flex; flex-direction: column; gap: 6px; }
/* Wiersz zdarzenia: kolorowa listwa po lewej mowi o rodzaju (ludzie,
   skarbiec, budynki, glebiny) szybciej niz czytanie zdania. */
.gl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px 9px 12px;
  border: 1px solid rgba(200, 168, 78, 0.16);
  border-left: 3px solid var(--c, rgba(200, 168, 78, 0.5));
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(58, 42, 110, 0.38), rgba(16, 10, 32, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.gl-row:hover { border-color: rgba(255, 212, 106, 0.35); border-left-color: var(--c); transform: translateX(2px); }
.gl-ava {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(200, 168, 78, 0.3), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.gl-ava-sys {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--text-dim); background: rgba(0, 0, 0, 0.35);
}
.gl-msg { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.gl-ago { flex: 0 0 auto; font-size: 10px; color: rgba(176, 165, 212, 0.55); white-space: nowrap; }

@media (max-width: 560px) {
  .gb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gb-card { padding: 10px 10px 12px; border-radius: 18px; }
  .gb-pic { width: 110px; height: 96px; }
  .gb-pic img { width: 104px; height: 104px; }
  .gb-card h3 { font-size: 13px; }
  .gb-lvl b { font-size: 17px; }
  .gl-row { padding: 8px 10px 8px 10px; gap: 10px; }
  .gl-ava { width: 30px; height: 30px; }
  .gl-msg { font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   WOJNY GILDII — strona (js/ui.js _showWarPage)
   ═══════════════════════════════════════════════════════════════
   Ta sama sciana, co Rozkazy: `.go-head`, `.go-seals`, `.go-rule`,
   `.go-empty`. Wlasne sa karty wojny, wypowiedzenie, skrzynia i historia.
   Kolor wojny to ogien (`--ember`), obrony — blekit. */
.gw-head .go-head-art img { object-position: center 60%; }
.gw-head .go-title { color: #FFB27A; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 26px rgba(255, 107, 53, 0.45); }
.gw-head .go-orn i { background: var(--ember); box-shadow: 0 0 8px rgba(255, 107, 53, 0.8); }
.go-seal b .gw-w { font-style: normal; color: var(--win); }
.go-seal b .gw-l { font-style: normal; color: var(--loss); }
.go-seal b small { font-family: var(--font-body); font-size: 12px; color: var(--text-dim); }

.gw-cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0 20px; align-items: start; }
.gw-col { min-width: 0; }

/* ── Karta wojny ──────────────────────────────────────────────── */
.gw-card {
  position: relative; padding: 16px 18px 14px; margin-bottom: 12px;
  border: 1px solid rgba(255, 107, 53, 0.45); border-radius: 22px;
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(255, 107, 53, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(64, 46, 122, 0.6), rgba(20, 13, 42, 0.94) 65%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(6, 3, 16, 0.55), 0 0 26px rgba(255, 107, 53, 0.12);
}
.gw-card.defend { border-color: rgba(79, 172, 254, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(6, 3, 16, 0.55), 0 0 26px rgba(79, 172, 254, 0.12); }
.gw-card.defend { background: radial-gradient(90% 50% at 50% 0%, rgba(79, 172, 254, 0.18), transparent 70%), linear-gradient(180deg, rgba(64, 46, 122, 0.6), rgba(20, 13, 42, 0.94) 65%); }
.gw-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.gw-badge {
  padding: 4px 12px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember); background: rgba(255, 107, 53, 0.14); border: 1px solid rgba(255, 107, 53, 0.45);
}
.gw-card.defend .gw-badge { color: #7CC4FF; background: rgba(79, 172, 254, 0.14); border-color: rgba(79, 172, 254, 0.45); }
.gw-clock { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.gw-clock b { font-family: var(--font-display); font-size: 15px; color: var(--gold-soft); }
.gw-opp { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; text-align: center; }
.gw-opp-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.gw-opp b { font-family: var(--font-display); font-size: 22px; color: var(--text-bright); }
.gw-opp small { font-size: 12px; font-weight: 800; color: var(--gold-deep); }
.gw-opp-elo { width: 100%; font-size: 11px; color: var(--text-dim); }
.gw-elo { display: flex; justify-content: center; gap: 8px; margin: 10px 0 12px; }
.gw-elo span { padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); }
.gw-elo .win { color: var(--win); } .gw-elo .lose { color: var(--loss); }
.gw-state { padding: 18px; text-align: center; font-family: var(--font-display); font-size: 15px; color: var(--gold-soft); border: 1px dashed rgba(200, 168, 78, 0.3); border-radius: 14px; animation: gwPulse 2s ease-in-out infinite; }
@keyframes gwPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
.gw-note { margin: 0 0 10px; padding: 7px 12px; border-radius: 12px; text-align: center; font-size: 11px; font-weight: 700; }
.gw-note.lock { color: #FF9AA2; background: rgba(255, 71, 87, 0.12); border: 1px solid rgba(255, 71, 87, 0.3); }
.gw-note.warn { color: #FFB340; background: rgba(255, 179, 64, 0.1); border: 1px solid rgba(255, 179, 64, 0.3); }
.gw-sub { display: flex; align-items: center; gap: 6px; margin: 6px 0 8px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 212, 106, 0.7); }
.gw-sub b { font-family: var(--font-display); font-size: 13px; color: var(--gold-soft); letter-spacing: 0; }
.gw-fighters { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.gw-fighter {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px;
  border-radius: 12px; border: 1px solid rgba(200, 168, 78, 0.14);
  background: linear-gradient(180deg, rgba(58, 42, 110, 0.38), rgba(16, 10, 32, 0.82));
}
.gw-fighter.me { border-color: rgba(255, 212, 106, 0.55); background: linear-gradient(180deg, rgba(255, 212, 106, 0.14), rgba(20, 13, 42, 0.85)); }
.gw-fighter-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #150d2c; }
.gw-fighter-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gw-fighter-txt b { font-size: 12.5px; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-fighter-txt b em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: var(--gold-soft); }
.gw-fighter-txt span { font-size: 10px; color: var(--text-dim); }
.gw-fighter-txt span i { font-style: normal; font-weight: 700; }
.gw-hp100 { color: var(--win) !important; }
.gw-fighter-pwr { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 12px; color: var(--gold-soft); white-space: nowrap; }
.gw-fighter-pwr img { width: 14px; height: 14px; }
.gw-def { margin: 4px 0 10px; padding: 10px 12px; text-align: center; border-radius: 14px; background: rgba(79, 172, 254, 0.08); border: 1px solid rgba(79, 172, 254, 0.25); }
.gw-def b { display: block; font-size: 12px; color: #7CC4FF; }
.gw-def span { display: block; margin-top: 3px; font-size: 10px; color: var(--text-dim); }
.gw-def i { font-style: normal; font-weight: 700; } .gw-def i.ok { color: var(--win); } .gw-def i.warn { color: #FFB340; }
.gw-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.gw-acts .gh-act { padding: 11px 18px; font-size: 12.5px; border-radius: 12px; }
.gw-ok { font-size: 12px; font-weight: 800; color: var(--win); }
.gw-warn { width: 100%; text-align: center; font-size: 10.5px; color: #FFB340; }
.gw-dim { font-size: 11px; color: var(--text-dim); text-align: center; }

/* ── Ostatnia wojna + wypowiedzenie ──────────────────────────── */
.gw-last {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 10px;
  border-radius: 18px; border: 1px solid rgba(46, 213, 115, 0.4);
  background: radial-gradient(60% 120% at 6% 50%, rgba(46, 213, 115, 0.18), transparent 70%), linear-gradient(180deg, rgba(64, 46, 122, 0.5), rgba(18, 11, 38, 0.94) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(6, 3, 16, 0.55);
}
.gw-last.loss { border-color: rgba(255, 71, 87, 0.4); background: radial-gradient(60% 120% at 6% 50%, rgba(255, 71, 87, 0.18), transparent 70%), linear-gradient(180deg, rgba(64, 46, 122, 0.5), rgba(18, 11, 38, 0.94) 70%); }
.gw-last-art img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)); }
.gw-last-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gw-last-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--win); }
.gw-last.loss .gw-last-lbl { color: var(--loss); }
.gw-last-txt b { font-family: var(--font-display); font-size: 16px; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-detail { margin-bottom: 10px; }
.gw-detail:empty { display: none; }
.gw-declare {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; margin-top: 4px;
  text-align: left; cursor: pointer; font-family: inherit; color: var(--text);
  border: 1px solid rgba(255, 107, 53, 0.55); border-radius: 18px;
  background: radial-gradient(60% 120% at 6% 50%, rgba(255, 107, 53, 0.28), transparent 70%), linear-gradient(180deg, rgba(64, 46, 122, 0.6), rgba(18, 11, 38, 0.94) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(6, 3, 16, 0.55), 0 0 26px rgba(255, 107, 53, 0.2);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.gw-declare:hover { transform: translateY(-2px); border-color: rgba(255, 150, 90, 0.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(6, 3, 16, 0.65), 0 0 34px rgba(255, 107, 53, 0.35); }
.gw-declare img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)); }
.gw-declare span { display: flex; flex-direction: column; min-width: 0; }
.gw-declare b { font-family: var(--font-display); font-size: 18px; color: #FFB27A; letter-spacing: 0.04em; }
.gw-declare small { font-size: 11px; color: var(--text-dim); }

/* ── Historia ─────────────────────────────────────────────────── */
.gw-history { display: flex; flex-direction: column; gap: 6px; }
.gw-history .war-history-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0;
  border-radius: 12px; border: 1px solid rgba(200, 168, 78, 0.14);
  background: linear-gradient(180deg, rgba(58, 42, 110, 0.38), rgba(16, 10, 32, 0.82));
}
.gw-history .war-history-row.win { border-left: 3px solid var(--win); }
.gw-history .war-history-row.loss { border-left: 3px solid var(--loss); }
.gw-history .war-h-result { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #0A0616; }
.gw-history .war-h-opp { flex: 1; font-size: 12.5px; color: var(--text-bright); font-weight: 600; }
.gw-history .war-h-players { font-size: 10px; color: var(--text-dim); }
.gw-history .war-h-date { font-size: 10px; color: rgba(176, 165, 212, 0.55); }
.gw-history .war-empty { padding: 18px; text-align: center; font-size: 11.5px; color: rgba(176, 165, 212, 0.6); border: 1px dashed rgba(200, 168, 78, 0.25); border-radius: 14px; }

/* ── Skrzynia i lup ───────────────────────────────────────────── */
.gw-chest {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px 14px; text-align: center; cursor: pointer;
  border-radius: 22px; border: 1px solid rgba(200, 168, 78, 0.3);
  background: radial-gradient(90% 50% at 50% 0%, rgba(255, 107, 53, 0.18), transparent 70%), linear-gradient(180deg, rgba(64, 46, 122, 0.6), rgba(20, 13, 42, 0.94) 65%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(6, 3, 16, 0.55);
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.gw-chest:hover { transform: translateY(-2px); border-color: rgba(255, 212, 106, 0.6); }
.gw-chest.ready { border-color: rgba(255, 107, 53, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(6, 3, 16, 0.55), 0 0 30px rgba(255, 107, 53, 0.3); }
.gw-chest-pic img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.7)); transition: transform 0.2s ease; }
.gw-chest.ready .gw-chest-pic img { filter: drop-shadow(0 0 18px rgba(255, 107, 53, 0.7)); animation: gwChestBob 2.4s ease-in-out infinite; }
@keyframes gwChestBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.gw-chest > b { font-family: var(--font-display); font-size: 16px; color: #FFB27A; }
.gw-chest-cost { display: flex; align-items: baseline; gap: 5px; }
.gw-chest-cost img { width: 16px; height: 16px; align-self: center; }
.gw-chest-cost span { font-family: var(--font-display); font-size: 18px; }
.gw-chest-cost span.ok { color: var(--win); } .gw-chest-cost span.short { color: var(--text-dim); }
.gw-chest-cost small { font-size: 11px; color: var(--text-dim); }
.gw-chest-hint { font-size: 10.5px; color: var(--text-dim); }
.gw-chest.ready .gw-chest-hint { color: var(--gold-soft); font-weight: 800; }
.gw-soon { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.gw-soon div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; border: 1px dashed rgba(200, 168, 78, 0.2); background: rgba(20, 13, 42, 0.4); opacity: 0.55; }
.gw-soon img { width: 30px; height: 30px; object-fit: contain; filter: grayscale(0.6); }
.gw-soon b { font-size: 10px; color: var(--text); }
.gw-soon small { font-size: 8px; letter-spacing: 0.2em; color: var(--text-dim); }
.gw-loot { margin-top: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(200, 168, 78, 0.18); background: rgba(20, 13, 42, 0.5); }
.gw-loot-lbl { font-size: 8.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 212, 106, 0.7); margin-bottom: 6px; }
.gw-loot-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 10.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.gw-loot-row:last-child { border-bottom: none; }
.gw-loot-row img { width: 14px; height: 14px; object-fit: contain; }
.gw-loot-row span { flex: 1; font-weight: 600; }
.gw-loot-row b { color: var(--text-dim); font-size: 10px; }

@media (max-width: 760px) {
  .gw-cols { grid-template-columns: 1fr; }
  .gw-side { margin-top: 4px; }
  .gw-opp b { font-size: 18px; }
  .gw-chest-pic img { width: 84px; height: 84px; }
}

/* ══════════════════════════════════════════════════════════════
   KARTA GILDII NA TELEFONIE: DA SIE ZJECHAC NA DOL  (07.09.2026)

   Zgloszenie _VOJTA_: „If you open guild scoreboard and open some guild,
   you cant scroll down, you just scroll players list, but no all site."

   Dlaczego. Regula `.modal-card:has(.gvgc)` celowo zdejmuje z okna tlo,
   ramke i przewijanie (`overflow: visible !important`), zeby karta
   gildii rysowala sie sama, bez pudelka wokol. Na komputerze to nie
   przeszkadza, bo karta miesci sie na ekranie. Na telefonie w PIONIE
   `.modal-card` nie dostaje ani `max-height`, ani `overflow-y` — dostaje
   je tylko wersja w poziomie — wiec karta wyzsza od ekranu nie ma jak sie
   przewinac. Jedyne, co reagowalo, to lista czlonkow ze swoim wlasnym
   `overflow-y`, i dokladnie to gracz opisal.

   Przewijanie wraca na SAMA KARTE, nie na okno: pudelko zostaje bez tla,
   a karta dostaje sufit wysokosci i wlasny pasek. Dzieki temu nic nie
   wraca do wygladu sprzed zmiany, a dol karty jest osiagalny.
   ══════════════════════════════════════════════════════════════ */
html.gv-port-mobile .modal-card:has(.gvgc),
html.gv-port-mobile .modal-card:has(.gvpc) {
  max-height: 88vh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
html.gv-port-mobile .gvgc,
html.gv-port-mobile .gvpc {
  width: min(94vw, 560px);
}
/* Lista czlonkow nie potrzebuje juz wlasnego okna w oknie: gdy cala
   karta sie przewija, drugi pasek w srodku tylko dzieli gest na dwa. */
html.gv-port-mobile .gvgc .gs-body,
html.gv-port-mobile .gvgc .gh-list {
  max-height: none;
  overflow-y: visible;
}

/* ══════════════════════════════════════════════════════════════
   LISTA GILDII NA TELEFONIE: KONIEC PRZEWIJANIA POD SPODEM
   (07.09.2026, zgloszenie z Discorda)

   „na telefonie w zakladce gildia, lista czlonkow gildii stoi
   w miejscu a wszystko obok i za nia mozna scrollowac co rozwala
   ekran."

   Lista jest szuflada `position: fixed`, wiec sama stoi — i tak ma
   byc. Problemem jest PRZENOSZENIE PRZEWIJANIA: gest zaczety na
   przyciemnieniu albo na koncu listy nie zatrzymuje sie tam, tylko
   przechodzi na strone pod spodem. Przegladarka szuka najblizszego
   rodzica, ktory da sie przewinac, i znajduje cala gre.

   `overscroll-behavior: contain` przerywa ten lancuch, a
   `touch-action: none` na przyciemnieniu zalatwia miejsce, gdzie nie
   ma czego przewijac. Razem zakrywaja caly ekran, gdy szuflada jest
   otwarta, wiec nie trzeba blokowac `body` z JS-a.
   ══════════════════════════════════════════════════════════════ */
.gh-backdrop.open {
  overscroll-behavior: contain;
  touch-action: none;
}
@media (max-width: 900px) {
  .gh-roster { overscroll-behavior: contain; }
  .gh-roster .gh-list {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Zapas 200 px pod lista zostal z czasow, gdy przewijala sie cala
     strona. W szufladzie robi tylko pusta przestrzen, przez ktora
     wyglada, jakby lista sie urwala. */
  .gh-roster .gh-list { padding-bottom: 24px; }
}