/* =========================================================================
   Fuszerka-Idle.pl. Warsztat: beton, olej, taśma ostrzegawcza i lampa nad stołem.

   Kolejność: zmienne, elementy wspólne, ekrany, układ, komponenty, efekty.
   ========================================================================= */

:root {
  /*
   * Wysokość górnej belki, mierzona na żywo.
   *
   * Belka zawija się do kolejnych rzędów, gdy jest w niej więcej rzeczy:
   * drugi warsztat dokłada przełącznik, a przy powiększeniu systemowym albo
   * węższym oknie reszta się nie mieści i schodzi niżej. Przyklejone panele
   * obok, czyli nawigacja, pasek stanu i kolumna kanciapy, miały tę wysokość
   * wpisaną na sztywno jako osiemdziesiąt kilka pikseli. Przy dwóch rzędach
   * belka je zasłaniała: gracz tracił z oczu zakładki czatu i znajomych.
   *
   * Ta wartość jest tu tylko wartością zapasową na pierwsze rysowanie.
   * Prawdziwą ustawia `belka.js`, obserwując faktyczny rozmiar elementu.
   */
  --belka: 78px;

  --beton:        #14161a;
  --beton-jasny:  #1b1e24;
  --panel:        #1f232a;
  --panel-2:      #262b34;
  --panel-3:      #2e343f;
  --kreska:       #363d49;
  --kreska-jasna: #47505f;
  --tekst:        #dfe4ec;
  --tekst-cichy:  #8d96a7;
  --tasma:        #f0b429;
  --tasma-ciemna: #b8860d;
  --tasma-blask:  rgba(240, 180, 41, .16);
  --olej:         #0d0f12;
  --zielony:      #5ddc93;
  --czerwony:     #ff6b6b;
  --niebieski:    #6aa9ff;

  --radius: 4px;
  --radius-duzy: 8px;
  --cien: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.45);
  --cien-maly: 0 4px 14px rgba(0,0,0,.35);

  --naglowek: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --tresc: 'Barlow', 'Segoe UI', Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scrollbar-color: var(--kreska) var(--olej); }
html.wyscig-trwa { overflow-anchor: none; }

/*
 * `touch-action` nie dziedziczy się jak kolor czy krój pisma: ustawienie go na
 * `body` obejmuje sam `body`, a nie guziki w środku. Stąd gwiazdka. Nie deptze
 * to miejsc, które blokują dotyk na amen, bo selektor klasowy jest bardziej
 * szczegółowy i wygrywa: płótno wyścigu, minigry i scena boksu zostają przy
 * swoim `none`.
 *
 * `manipulation` przepuszcza przewijanie i szczypanie, blokuje tylko
 * przybliżanie podwójnym stuknięciem.
 */
* { touch-action: manipulation; }

/*
 * Gra ma się zachowywać jak gra, a nie jak strona.
 *
 * Zabezpieczenia dotyku mieliśmy dotąd punktowo: na płótnie wyścigu, na
 * minigrach i na scenie boksu. Wszędzie indziej, czyli w nawigacji, w sklepie
 * i na czacie, przeglądarka dalej łapała podwójne stuknięcie i przybliżała
 * stronę. Przy grze, w której klika się szybko i dużo, wychodziło z tego
 * przypadkowe powiększanie po kilka razy na minutę.
 *
 * `manipulation` wyłącza wyłącznie przybliżanie podwójnym stuknięciem.
 * Przewijanie i szczypanie zostają, więc kto ma słabszy wzrok, dalej sobie
 * powiększy. Miejsca, które ustawiają `touch-action: none`, są bardziej
 * szczegółowe i nadpisują to bez zmian.
 */
body {
  font-family: var(--tresc);
  background: var(--beton);
  color: var(--tekst);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  /* Bez gumowego odbijania przy końcu listy i bez pociągnięcia do odświeżenia:
     jedno i drugie zdradza przeglądarkę i potrafi zgubić stan gry. */
  overscroll-behavior: none;
  /* Szary prostokąt błyskający pod palcem po każdym stuknięciu. Guziki mają
     własną reakcję na wciśnięcie, więc ta jest tylko brudem na ekranie. */
  -webkit-tap-highlight-color: transparent;
  /* iPhone w poziomie sam powiększał tekst i rozjeżdżał układ. */
  -webkit-text-size-adjust: 100%;
}

/* Natywna skorupa ma zachowywać się jak aplikacja, nie jak karta przeglądarki. */
html.aplikacja-natywna,
html.aplikacja-natywna body {
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
html.aplikacja-natywna input,
html.aplikacja-natywna textarea {
  -webkit-user-select: text;
  user-select: text;
}

.aplikacja-offline {
  position: fixed;
  z-index: 10000;
  left: 50%;
  top: calc(10px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 8px 12px;
  max-width: calc(100vw - 20px);
  color: #f0f2f5;
  background: rgba(22, 25, 30, .96);
  border: 1px solid #dba724;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.aplikacja-offline.hidden { display: none; }
.aplikacja-offline span {
  grid-row: 1 / 3;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(240, 178, 41, .3);
  border-top-color: var(--tasma);
  border-radius: 50%;
  animation: aplikacja-laczy 1s linear infinite;
}
.aplikacja-offline b { font-family: var(--naglowek); line-height: 1.1; }
.aplikacja-offline small { color: var(--cichy); line-height: 1.1; white-space: nowrap; }
@keyframes aplikacja-laczy { to { transform: rotate(360deg); } }

/* Beton pod wszystkim: zdjęcie tekstury plus winieta, żeby środek był jaśniejszy.
   Bez `background-attachment: fixed`: warstwa i tak jest przyklejona przez
   `position: fixed`, a przyczepianie samego tła kazało przeglądarce przemalować
   cały ekran przy każdym przewinięciu. To było widać jako mrugnięcie czernią,
   bo pod spodem jest goły kolor tła strony. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,180,41,.05), transparent 55%),
    linear-gradient(rgba(16,18,22,.86), rgba(12,14,17,.94)),
    url('/img/tlo-beton.jpg') center/cover;
}

img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--olej); }
::-webkit-scrollbar-thumb { background: var(--kreska); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--kreska-jasna); }

/* ---------------------------------------------------------------- wspólne */

.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel), #1c2027);
  border: 1px solid var(--kreska);
  border-radius: var(--radius-duzy);
  padding: 18px;
  box-shadow: var(--cien);
}
.panel + .panel { margin-top: 14px; }

/* W siatce odstępy robi `gap`, a marginesy z reguły wyżej tylko przesuwałyby
   panele w dół: pierwszy zostawał na górze rzędu, reszta niżej i przez to
   niższa. Stąd brały się kafle o różnej wysokości w Kanciapie. */
.karty > .panel + .panel,
.karty > .panel { margin-top: 0; }

/* Siatka po panelu potrzebuje takiego samego odstępu jak panel po panelu,
   inaczej kafle przyklejają się do opisu nad nimi. */
.panel + .karty { margin-top: 14px; }

/* Nitowany narożnik: drobiazg, ale odbiera panelom wygląd zwykłego diva. */
.panel::after {
  content: '';
  position: absolute;
  top: 9px; right: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--kreska-jasna);
  /* Drugi nit w lewo, nie w prawo: przy 10px w prawo wychodził poza panel
     i był przycinany, przez co para wyglądała na krzywą. */
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), -11px 0 0 var(--kreska-jasna);
  opacity: .55;
}

.tytul {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 6px;
  font-family: var(--naglowek);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tasma);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--kreska);
}
.tytul .ikona-sekcji { width: 26px; height: 26px; border-radius: 5px; flex: none; }
.tytul::before {
  content: '';
  width: 3px;
  height: 19px;
  background: var(--tasma);
  border-radius: 2px;
  box-shadow: 0 0 12px var(--tasma-blask);
}

h1, h2, h3 { font-family: var(--naglowek); font-weight: 600; letter-spacing: .01em; }

.btn {
  position: relative;
  background: linear-gradient(180deg, #f7c33f, var(--tasma));
  color: #1a1206;
  border: 1px solid #d99f14;
  border-radius: var(--radius);
  padding: 9px 17px;
  font-family: var(--naglowek);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: filter .12s, transform .06s, box-shadow .12s;
}
.btn:hover:not(:disabled) { filter: brightness(1.09); box-shadow: 0 0 16px var(--tasma-blask); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: var(--panel-3); border-color: var(--kreska); color: var(--tekst-cichy); cursor: not-allowed; }
.btn.wtorny { background: linear-gradient(180deg, var(--panel-3), var(--panel-2)); color: var(--tekst); border-color: var(--kreska); }
.btn.wtorny:hover:not(:disabled) { border-color: var(--tasma-ciemna); box-shadow: none; }
.btn.zly { background: linear-gradient(180deg, #ff8080, var(--czerwony)); border-color: #d94f4f; color: #2a0b0b; }
.btn.maly { padding: 5px 11px; font-size: 12.5px; letter-spacing: .04em; }

input, select, textarea {
  background: var(--olej);
  border: 1px solid var(--kreska);
  border-radius: var(--radius);
  padding: 9px 12px;
  width: 100%;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tasma-ciemna); box-shadow: 0 0 0 3px var(--tasma-blask); }

.cichy { color: var(--tekst-cichy); font-size: 13px; }
.kasa { color: var(--tasma); font-weight: 600; }
.dobry { color: var(--zielony); }
.zle { color: var(--czerwony); }

/* Pas ostrzegawczy: używany jako akcent nad belką i pod modalem. */
.tasma-pas {
  height: 5px;
  background: repeating-linear-gradient(-45deg, var(--tasma) 0 12px, #23262c 12px 24px);
  opacity: .9;
}

/* ------------------------------------------------------------ brama (login) */

body.na-bramie::before {
  background:
    linear-gradient(rgba(14,16,19,.70), rgba(11,13,16,.95)),
    url('/img/hala.jpg') center/cover;
}

/* Powrót do gry: przeglądarka pamięta żeton, więc zamiast okna logowania
   pokazujemy ekran ładowania, dopóki serwer nie potwierdzi, że żeton jest ważny.
   Klasa siada na <html> przed pierwszym rysowaniem, żeby nic nie mrugnęło. */
html.wraca #ekran-brama { display: none !important; }
html.wraca #ekran-ladowanie { display: block !important; }

/* Pasek, który sam się przesuwa: nie wie, ile zostało, i nie udaje, że wie. */
.pasek-ladowania {
  height: 4px; margin-top: 18px;
  background: var(--olej); border: 1px solid var(--kreska); border-radius: var(--radius);
  overflow: hidden;
}
.pasek-ladowania span {
  display: block; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--tasma), transparent);
  animation: ladowanie 1.1s ease-in-out infinite;
}
@keyframes ladowanie {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}

/* Brama jest teraz szersza, bo poza formularzem stoi na niej wizytówka gry:
   zrzut z rozgrywki i pięć linijek o tym, co się tu w ogóle robi. Sam formularz
   zostaje wąski, żeby nie rozjechał się na szerokim ekranie. */
.brama { max-width: 560px; margin: 5vh auto 40px; padding: 0 16px; }
.brama > .panel { max-width: 430px; margin-left: auto; margin-right: auto; }

/* Jedno zdanie, które ma odpowiedzieć na pytanie „co to w ogóle jest”,
   zanim ktokolwiek zobaczy pole na hasło. */
.brama-lead {
  margin: 0 auto 16px; max-width: 460px;
  font-size: 15px; line-height: 1.55; color: var(--tekst);
  text-align: center;
}

.brama-wizytowka { margin-top: 26px; }

.brama-lista {
  list-style: none; margin: 0 auto 18px; max-width: 480px;
  display: flex; flex-direction: column; gap: 9px;
  font-size: 13.5px; line-height: 1.5; color: var(--tekst-cichy);
}
/* Klucz zamiast kropki: lista wygląda wtedy jak część warsztatu, a nie jak
   punktory z prezentacji. */
.brama-lista li { padding-left: 26px; position: relative; }
.brama-lista li::before { content: '🔧'; position: absolute; left: 0; top: 0; font-size: 13px; }
.brama-lista b { color: var(--tekst); font-weight: 600; }

.brama-stopka {
  text-align: center; font-size: 13px; line-height: 1.6;
  color: var(--tekst-cichy);
}
.brama-stopka b { color: var(--tasma); }

@media (max-width: 600px) {
  .brama { max-width: 460px; }
  .brama-lead { font-size: 14px; }
  .brama-wizytowka { margin-top: 20px; }
}


.brama .logo {
  display: block; width: 138px; height: auto; margin: 0 auto 4px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.7));
  animation: huśtanie 6s ease-in-out infinite;
}
@keyframes huśtanie {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-5px); }
}
.brama h1 {
  font-size: 44px;
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 3px 20px rgba(0,0,0,.8);
}
.brama h1 span { color: var(--tasma); }
.brama .motto { text-align: center; color: var(--tekst-cichy); margin-bottom: 22px; font-style: italic; }

.zakladki { display: flex; gap: 8px; margin-bottom: 18px; }
.zakladki button {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--kreska);
  border-radius: var(--radius);
  padding: 10px;
  font-family: var(--naglowek);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.zakladki button.aktywna { background: var(--tasma); color: #1a1206; border-color: var(--tasma); }
.pole { margin-bottom: 13px; }
.pole label { display: block; font-size: 12px; color: var(--tekst-cichy); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .07em; }
.blad { color: var(--czerwony); font-size: 14px; margin-top: 10px; min-height: 20px; }

/* -------------------------------------------------------------- górna belka */

.belka {
  position: sticky;
  top: 0;
  /* Wyżej niż pasek zakładek (40). Belka tworzy własny kontekst nakładania,
     więc z-index panelu radia liczy się tylko w jej środku, a na zewnątrz
     decyduje ta liczba. Przy remisie 40 do 40 wygrywał pasek zakładek, bo stoi
     dalej w kodzie, i panel radia znikał pod nim. Modal (80) i dymki (90)
     dalej są nad wszystkim. */
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 10px 18px;
  /* Tło jest praktycznie kryjące, więc rozmycie spod spodu i tak nie było widać,
     a kazało przeglądarce trzymać żywą kopię wszystkiego pod przyklejoną belką
     i przeliczać ją przy każdym przewinięciu. To druga przyczyna mrugania. */
  background: linear-gradient(180deg, rgba(28,32,39,.985), rgba(20,23,28,.985));
  border-bottom: 1px solid var(--kreska);
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.belka::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 4px;
  background: repeating-linear-gradient(-45deg, var(--tasma) 0 10px, #1a1d23 10px 20px);
  opacity: .85;
}
.belka .znaczek { width: 36px; height: auto; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.belka .szyld { font-family: var(--naglowek); font-weight: 600; font-size: 19px; letter-spacing: .02em; }
.belka .szyld small { display: block; font-family: var(--tresc); font-size: 10.5px; color: var(--tekst-cichy); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

/* Kurs ekipy na szrot: pasek i to, z czym wrócili ostatnim razem. */
.kurs-ekipy { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.kurs-ekipy .cichy { font-size: 12px; }

/* Przełącznik placów w belce.
   Pokazuje się dopiero przy drugim warsztacie. Krótkie guziki z pierwszym
   słowem nazwy i poziomem: chodzi o to, żeby dało się przeskoczyć jednym
   kliknięciem, a nie o czytanie pełnych szyldów. */
.przelacznik-warsztatow { display: flex; gap: 5px; flex: 0 0 auto; }
.przelacznik-warsztatow button {
  position: relative;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  background: var(--panel-2);
  border: 1px solid var(--kreska);
  border-radius: var(--radius);
  color: var(--tekst-cichy);
  font-family: var(--naglowek);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .14s, color .14s;
}
.przelacznik-warsztatow button:hover { border-color: var(--kreska-jasna); color: var(--tekst); }
.przelacznik-warsztatow button.aktywny {
  border-color: var(--tasma);
  color: var(--tasma);
  box-shadow: inset 0 0 0 1px var(--tasma-ciemna);
}
/* Cztery place i więcej: jeden guzik z listą zamiast rzędu guzików. */
.przelacznik-warsztatow.zwiniety { position: relative; }
.przelacznik-rozwin .przelacznik-ile { font-size: 10px; color: var(--tekst-cichy); letter-spacing: .04em; }
.przelacznik-rozwin .strzalka { font-size: 10px; }
.przelacznik-lista {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 230px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--kreska-jasna); border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
}
.przelacznik-lista.hidden { display: none; }
.przelacznik-warsztatow .przelacznik-lista button { justify-content: space-between; width: 100%; padding: 8px 10px; font-size: 13px; }
.przelacznik-warsztatow .alarm {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--zly, #d0604a);
  box-shadow: 0 0 7px var(--zly, #d0604a);
}

/* Wizytówka gracza: nazwa warsztatu widziana przez innych.
   Ta sama ozdoba, którą właściciel ma na swoim szyldzie, świeci też na czacie,
   w rankingu, na podwórku i w czołówce floty. Po to się ją kupuje. */
.gracz { font-weight: 600; }
.gracz.mocny { font-weight: 700; }
.plakietka-gracza { font-size: .92em; }

.gracz.kosmetyk-neon_niebieski { color: #7fc4ff; text-shadow: 0 0 5px rgba(59, 163, 255, .75); }
.gracz.kosmetyk-neon_zielony   { color: #86f0a8; text-shadow: 0 0 5px rgba(53, 212, 106, .7); }
.gracz.kosmetyk-neon_zloty     { color: #ffd76a; text-shadow: 0 0 6px rgba(240, 180, 41, .8); }
.gracz.kosmetyk-kalendarz::after          { content: ' 📅'; font-size: .85em; opacity: .8; }
.gracz.kosmetyk-kostka_dywanik::after     { content: ' 🧶'; font-size: .85em; opacity: .8; }
.gracz.kosmetyk-zdjecie_z_dyplomem::after { content: ' 🖼️'; font-size: .85em; opacity: .8; }

/* Godzina przy wiadomości. Ten sam krój i ten sam odcień co w Radiu Złom,
   żeby oba okienka w kanciapie czytało się tak samo. */
/* Wzmianka @login. Zwykła jest tylko wyróżniona, własna świeci: to jedyna
   wiadomość na czacie, która czeka na odpowiedź. Poświata leci na całym wpisie,
   żeby dało się ją wyłapać kątem oka przy przewijaniu. */
.wzmianka { color: var(--tasma); font-weight: 600; }
.wzmianka.moja {
  color: #1b1f25;
  background: var(--tasma);
  border-radius: 4px;
  padding: 0 4px;
}
.wiadomosc.do-mnie {
  background: linear-gradient(90deg, rgba(240,180,41,.16), transparent 70%);
  border-left: 2px solid var(--tasma);
  padding-left: 6px;
  border-radius: 4px;
}

.wiadomosc .godzina {
  color: var(--tekst-cichy);
  font-family: var(--naglowek);
  font-size: 11px;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

/* Wiadomość od kogoś, kto się dorzucił: świeci sama nazwa warsztatu, nie treść.
   Ustawiamy wyłącznie poświatę, bez koloru: dzięki temu składa się ona z kolorem
   nicku wybranym przez gracza i z barwą neonu, jeśli ktoś ma go nad bramą.
   Gradient w tle jest zarezerwowany dla obsługi, żeby dało się ją odróżnić
   jednym spojrzeniem od zwykłego gracza z abonamentem. */
.wiadomosc.premium .gracz {
  text-shadow: 0 0 7px color-mix(in srgb, var(--kolor-gracza, var(--tasma)) 60%, transparent);
}

/* Admin i moderatorzy: pasek w tle i odznaka przy nazwie. */
.wiadomosc.ranga-admin,
.wiadomosc.ranga-moderator {
  position: relative;
  padding-left: 9px;
  border-radius: var(--radius);
}
.wiadomosc.ranga-admin { background: linear-gradient(90deg, rgba(208, 96, 74, .22), transparent 62%); }
.wiadomosc.ranga-moderator { background: linear-gradient(90deg, rgba(90, 170, 255, .18), transparent 62%); }
.wiadomosc.ranga-admin::before,
.wiadomosc.ranga-moderator::before {
  content: '';
  position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 2px; border-radius: 2px;
}
.wiadomosc.ranga-admin::before { background: #d0604a; box-shadow: 0 0 7px #d0604a; }
.wiadomosc.ranga-moderator::before { background: #5aaaff; box-shadow: 0 0 7px #5aaaff; }

.odznaka-rangi {
  display: inline-block;
  margin-right: 5px;
  padding: 0 5px;
  border-radius: 3px;
  font-family: var(--naglowek);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.ranga-admin .odznaka-rangi { background: #d0604a; color: #1a1206; }
.ranga-moderator .odznaka-rangi { background: #5aaaff; color: #0d1a25; }

/* Guziki moderacji: pokazują się dopiero pod kursorem, żeby nie zaśmiecały czatu. */
.wiadomosc .moderacja { margin-left: 6px; opacity: 0; transition: opacity .12s; white-space: nowrap; }
.wiadomosc:hover .moderacja, .wiadomosc:focus-within .moderacja { opacity: 1; }
.wiadomosc .moderacja button {
  background: none;
  border: 1px solid var(--kreska);
  border-radius: 3px;
  color: var(--tekst-cichy);
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
}
.wiadomosc .moderacja button:hover { border-color: var(--zly, #d0604a); color: var(--zly, #d0604a); }
@media (max-width: 760px) { .wiadomosc .moderacja { opacity: 1; } }

/* Neony nad bramą.
   Kosmetyki dawały wcześniej sam podpis pod nazwą warsztatu, przez co nie było
   po nich widać niczego. Neon ma świecić: nazwa dostaje kolor, poświatę
   i to charakterystyczne, nierówne mruganie starej rurki. */
.belka .szyld.kosmetyk-neon_niebieski > :first-child,
.belka .szyld.kosmetyk-neon_zielony > :first-child,
.belka .szyld.kosmetyk-neon_zloty > :first-child {
  animation: neon-mruga 4.5s ease-in-out infinite;
}
.belka .szyld.kosmetyk-neon_niebieski { color: #7fc4ff; text-shadow: 0 0 6px #3ba3ff, 0 0 18px rgba(59, 163, 255, .55); }
.belka .szyld.kosmetyk-neon_zielony   { color: #86f0a8; text-shadow: 0 0 6px #35d46a, 0 0 18px rgba(53, 212, 106, .5); }
.belka .szyld.kosmetyk-neon_zloty     { color: #ffd76a; text-shadow: 0 0 7px #f0b429, 0 0 22px rgba(240, 180, 41, .6); }

.belka .szyld.kosmetyk-kalendarz small::before { content: '📅 '; }
.belka .szyld.kosmetyk-kostka_dywanik small::before { content: '🧶 '; }
.belka .szyld.kosmetyk-zdjecie_z_dyplomem small::before { content: '🖼️ '; }

@keyframes neon-mruga {
  0%, 92%, 96%, 100% { opacity: 1; }
  94%                { opacity: .55; }
  95%                { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .belka .szyld[class*="kosmetyk-neon"] > :first-child { animation: none; }
}

/* Zamalowany szyld: ślad po wizycie sąsiada.
   Bazgroł idzie po nazwie warsztatu, bo szyld to właśnie ona. Nazwa zostaje
   czytelna, ma być widać zaczepkę, a nie zasłonięty interfejs. */
.belka .szyld.zamalowany { position: relative; cursor: help; }
.belka .szyld.zamalowany > * { position: relative; z-index: 1; }
.belka .szyld.zamalowany small { text-decoration: line-through; text-decoration-color: rgba(198, 52, 44, .8); }
.belka .szyld.zamalowany::after {
  content: '';
  position: absolute;
  inset: -7px -14px -4px -12px;
  pointer-events: none;
  z-index: 2;
  transform: rotate(-3.5deg);
  opacity: .82;
  background:
    linear-gradient(100deg, transparent 3%, rgba(190, 44, 38, .95) 7%, rgba(206, 60, 46, .8) 44%, rgba(190, 44, 38, .92) 62%, transparent 68%),
    linear-gradient(76deg, transparent 22%, rgba(190, 44, 38, .55) 27%, rgba(190, 44, 38, .5) 72%, transparent 79%),
    radial-gradient(circle at 18% 70%, rgba(190, 44, 38, .5) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 26%, rgba(190, 44, 38, .45) 0 4px, transparent 5px);
  background-repeat: no-repeat;
  filter: blur(.35px);
}
.belka .rozpychacz { flex: 1; }

/* Discord jest działaniem, nie kolejnym licznikiem, dlatego ma własny zwarty
   kształt i kolor. Siedzi tuż przed graczami online, bo oba elementy prowadzą
   do ludzi, tylko jeden poza grą, a drugi w niej. */
.belka-discord {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #6672f2, #5865f2);
  color: #fff;
  box-shadow: 0 3px 11px rgba(38, 46, 126, .35), inset 0 1px rgba(255, 255, 255, .12);
  font-family: var(--naglowek);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s, filter .14s, box-shadow .14s;
}
.belka-discord svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.belka-discord:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(38, 46, 126, .5), inset 0 1px rgba(255, 255, 255, .16);
}
.belka-discord:active { transform: translateY(0); }
.belka-discord:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Aplikacja na telefon: jedna pigułka z ikonami iOS i Android, bez podpisów,
   żeby belka z pięcioma warsztatami mieściła się w jednym rzędzie. */
.belka-aplikacja {
  display: inline-flex; flex: none;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius);
  background: linear-gradient(180deg, #3a3f47, #24282e);
  box-shadow: 0 3px 11px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .12);
  overflow: hidden;
}
.belka-ios {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; background: none; color: #fff;
  cursor: pointer;
  transition: background .14s;
}
.belka-ios + .belka-ios { border-left: 1px solid rgba(255, 255, 255, .14); }
.belka-ios svg { width: 17px; height: 17px; fill: currentColor; }
.belka-ios:hover { background: rgba(255, 255, 255, .1); }
.belka-ios:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.belka-android svg { color: #3ddc84; }

/* Wskaźniki w belce.
   Liczby lecą cyframi o stałej szerokości i mają swoje minimum, bo inaczej
   każda zmiana kasy przestawiała szerokość pola i cała belka drgała w bok.
   To był ten efekt wibrowania tekstu przy zarobku. */
.wskaznik { display: flex; flex-direction: column; line-height: 1.15; flex: none; }
.wskaznik b {
  font-family: var(--naglowek);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.wskaznik span { font-size: 10px; color: var(--tekst-cichy); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
#belka-kasa { min-width: 9ch; display: inline-block; }
#belka-moc, #belka-klasa, #belka-kapsle, #belka-online { min-width: 3ch; display: inline-block; }
#belka-magazyn { min-width: 7ch; display: inline-block; }
#belka-prad { min-width: 8ch; display: inline-block; }

.pasek-xp { height: 5px; background: var(--olej); border-radius: 3px; overflow: hidden; width: 130px; margin-top: 4px; border: 1px solid #000; }
.pasek-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--niebieski), #a5c9ff); transition: width .4s; }

/* Paski postępu dostają nową szerokość co półtorej sekundy, czyli co tick.
   Bez przejścia widać było skok i cała gra sprawiała wrażenie szarpanej.
   Liniowe przejście przez czas jednego ticku wygląda jak płynny ruch. */
.pasek-roboty i, .pasek-cienki i { transition: width 1.5s linear; }
/* Poza sytuacjami, w których pasek ma wrócić na zero od razu: przy zmianie
   auta albo po skończonej robocie płynny powrót wyglądałby jak cofanie się. */
.pasek-roboty.stoi i, .pasek-roboty.zrobione i { transition: none; }

/* --------------------------------------------------------------- układ gry */

.hala { display: grid; grid-template-columns: 208px minmax(0, 1fr) 306px; gap: 16px; padding: 18px; align-items: start; }
.kolumna-srodkowa { min-width: 0; }
/*
 * Belka na węższych ekranach komputera ściska się, zamiast łamać na dwa rzędy.
 * Przy 22 px odstępu między szesnastoma elementami same przerwy zjadały ponad
 * 300 px, więc na laptopie 1366 px belka nie mieściła się nawet z jednym placem.
 * Informacje zostają te same: mniejsze odstępy, ciaśniejsze podpisy, a Discord
 * bez napisu (nazwa jest w dymku).
 */
@media (max-width: 1700px) {
  .belka { gap: 15px; }
  .wskaznik span { letter-spacing: .06em; }
}
@media (max-width: 1500px) {
  .belka { gap: 11px; padding-left: 12px; padding-right: 12px; }
  .wskaznik span { font-size: 9px; letter-spacing: .03em; }
  .pasek-xp { width: 96px; }
  .belka-discord > span { display: none; }
  .belka-discord { padding: 6px 9px; }
}
@media (max-width: 1180px) { .hala { grid-template-columns: 190px minmax(0, 1fr); } .kanciapa-kolumna { display: none; } }
@media (max-width: 760px)  { .hala { grid-template-columns: 1fr; padding: 12px; } .nawigacja { flex-direction: row; flex-wrap: wrap; position: static; } .nawigacja button { width: auto; } }

/* Zakładek jest tyle, że na niższych ekranach ostatnie wychodziły poza widok,
   a przyklejony panel nie dawał się przewinąć: do Admina trzeba było oddalać
   całą stronę. Panel ma więc własne przewijanie. */
.nawigacja {
  position: sticky; top: calc(var(--belka) + 4px);
  display: flex; flex-direction: column; gap: 3px;
  max-height: calc(100vh - var(--belka) - 22px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px;
}
.nawigacja::-webkit-scrollbar { width: 6px; }
.nawigacja::-webkit-scrollbar-thumb { background: var(--kreska); border-radius: 3px; }
.nawigacja button {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 7px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--naglowek);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tekst-cichy);
  transition: background .15s, color .15s, transform .1s;
}
/* Nagłówek grupy zakładek.
   Ma dzielić listę i dać się przeczytać: pierwsza wersja była tak wyciszona
   (kolor cichy plus przezroczystość), że zlewała się z tłem i nie robiła
   ani jednego, ani drugiego. Kreska ciągnąca się za napisem robi z niego
   nagłówek sekcji, a nie zgubiony wyraz. */
.grupa-nawigacji {
  display: flex; align-items: center; gap: 9px;
  margin: 15px 0 5px; padding: 0 11px;
  font-family: var(--naglowek);
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tekst-cichy);
}
.grupa-nawigacji > span { flex: none; }
.grupa-nawigacji > small { display: none; }
.grupa-nawigacji::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--kreska), transparent);
}
.grupa-nawigacji:first-child { margin-top: 2px; }

.nawigacja button img { width: 32px; height: 32px; flex: none; border-radius: 6px; opacity: .62; transition: opacity .18s, transform .18s; }
.nawigacja button:hover { background: rgba(255,255,255,.04); color: var(--tekst); }
.nawigacja button:hover img { opacity: 1; transform: scale(1.07) rotate(-3deg); }
.nawigacja button.aktywna { background: linear-gradient(90deg, var(--tasma-blask), transparent); color: var(--tasma); }
.nawigacja button.aktywna img { opacity: 1; box-shadow: 0 0 14px var(--tasma-blask); }
.nawigacja button.aktywna::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 2px;
  background: var(--tasma);
  box-shadow: 0 0 10px var(--tasma);
}
/* Znacznik przy zakładce: licznik czasu albo liczba chętnych. Musi trzymać
   się w pasku niezależnie od treści, bo przy dłuższym napisie (na przykład
   "29 min · 4") rozpychał guzik i wychodził poza nawigację. */
.nawigacja .znacznik {
  margin-left: auto;
  min-width: 22px; height: 20px; max-width: 78px;
  /* Flex, a nie grid: przy dwóch kawałkach (literka rodzaju i czas) siatka
     układała je jeden pod drugim i czas uciekał poza znacznik. */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--tasma); color: #1a1206;
  font-family: var(--naglowek); font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 0 10px var(--tasma-blask);
}
/* Guzik zakładki nie może się rozjeżdżać, gdy znacznik urośnie. */
.nawigacja button { min-width: 0; }
.nawigacja button > :not(.znacznik) { min-width: 0; }

/* Dzwoni klient: zakładka pulsuje, żeby dało się to zauważyć kątem oka. */
.nawigacja button.dzwoni {
  color: var(--tasma);
  background: linear-gradient(90deg, var(--tasma-blask), transparent);
  animation: dzwoni-anim 1.1s ease-in-out infinite;
}
.nawigacja button.dzwoni img { opacity: 1; }
/* Wydarzenie, w którym już siedzisz: zakładka ma być podświetlona, ale nie
   ma migać. Miganie jest zaproszeniem, a zaproszenie zostało już przyjęte. */
.nawigacja button.dzwoni.spokojnie {
  animation: none;
  box-shadow: inset 0 0 0 1px var(--tasma-ciemna);
}
@keyframes dzwoni-anim {
  0%, 100% { box-shadow: inset 0 0 0 1px transparent; }
  50%      { box-shadow: inset 0 0 0 1px var(--tasma-ciemna), 0 0 18px var(--tasma-blask); }
}

/* -------------------------------------------------------- pasek stanu i scena */

/* Własne, kryjące tło: pasek jest przyklejony, więc treść przewija się pod nim
   i przy przezroczystym tle litery nachodziły na siebie. */
#status {
  position: sticky; top: calc(var(--belka) + 8px); z-index: 30;
  margin: 0 -6px 16px;
  padding: 6px 6px 0;
  background: var(--beton);
  box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .85);
}

/* Zasłonka na szczelinę między belką a paskiem stanu.
   Oba elementy są przyklejone, ale w różnych miejscach, więc między nimi
   zostawało kilkanaście pikseli, przez które przewijała się treść. Zamiast
   dobierać `top` do wysokości belki (a ta jest inna na telefonie), przedłużamy
   tło paska w górę. Belka ma wyższy z-index, więc chowa się pod nią. */
#status::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 30px;
  background: var(--beton);
}
#status .podnosnik { margin-bottom: 8px; }

/* Zwijanie podnośników. Trzy pełne panele zasłaniają całą zakładkę, więc każdy
   da się kliknięciem złożyć do jednej linijki. Kursor i guzik w rogu mówią,
   że to w ogóle jest klikalne. */
.podnosnik[data-zwin] { cursor: zoom-out; }
.podnosnik .zwijak {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 26px; height: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-family: var(--naglowek);
  color: var(--tekst-cichy);
  background: rgba(0,0,0,.25);
  border: 1px solid var(--kreska);
  border-radius: 6px;
  cursor: pointer;
}
.podnosnik .zwijak:hover { color: var(--tasma); border-color: var(--tasma); }
.pasek-skrot.zwiniety { cursor: zoom-in; }
.pasek-skrot.zwiniety .zwijak {
  margin-left: 6px;
  color: var(--tekst-cichy);
  font-family: var(--naglowek);
}
.pasek-skrot.zwiniety.pusty b { color: var(--tekst-cichy); }
/* Trzy podnośniki naraz to trzy panele w przyklejonym pasku. Bez sufitu
   zasłoniłyby całą zakładkę, więc stos podnośników w ostateczności przewija się
   sam. Sufit siedzi na stosie, a nie na #status: ten ma własną zasłonkę na
   szczelinę pod belką (::before), a własne przewijanie by ją obcięło. */
.stos-podnosnikow { max-height: calc(100vh - 130px); overflow-y: auto; }
/* Dodatkowe stanowisko wygląda i działa jak główny podnośnik, tylko odrobinę
   niższe: auto jest mniejsze, żeby trzy panele mieściły się na ekranie. */
.podnosnik.dodatkowy { padding: 12px 18px; }
.podnosnik.dodatkowy .scena .auto { max-height: 96px; }
.podnosnik.dodatkowy h2 { font-size: 19px; }
.podnosnik.dodatkowy .opis { margin-bottom: 10px; }
.podnosnik.dodatkowy.puste { opacity: .72; }
.podnosnik.dodatkowy h2 .plakietka { vertical-align: middle; margin-left: 6px; }

.podnosnik {
  position: relative;
  overflow: hidden;
  /* Dwie kolumny: opis i pasek roboty po lewej, auto na podnośniku po prawej.
     Wcześniej scena była pozycjonowana absolutnie i pasek postępu wchodził
     jej pod koła. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  grid-template-areas: "tresc scena";
  align-items: center;
  column-gap: 18px;
  background:
    radial-gradient(ellipse at 82% -20%, rgba(240,180,41,.14), transparent 62%),
    linear-gradient(180deg, var(--panel-2), #1b1f25);
  border: 1px solid var(--kreska);
  border-left: 3px solid var(--tasma);
  border-radius: var(--radius-duzy);
  padding: 16px 18px;
  box-shadow: var(--cien);
}
.podnosnik > .tresc { grid-area: tresc; min-width: 0; }
@media (max-width: 980px) {
  .podnosnik { grid-template-columns: 1fr; grid-template-areas: "tresc"; }
}
.podnosnik h2 { font-size: 22px; letter-spacing: .02em; margin-bottom: 2px; }
.podnosnik .opis { color: var(--tekst-cichy); font-size: 13px; font-style: italic; margin-bottom: 14px; max-width: 62ch; }
.podnosnik .dane { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.podnosnik .dane b { font-family: var(--naglowek); font-size: 16px; }

/* Auto na podnośniku: obrazek unosi się i lekko buja, pod nim ramiona lifta. */
.scena {
  grid-area: scena;
  position: relative;
  width: 100%;
  padding-bottom: 16px;
  pointer-events: none;
}
@media (max-width: 980px) { .scena { display: none; } }
.scena .auto {
  display: block;
  width: 100%;
  /* Pasek stanu jest przyklejony do góry, więc nie może rosnąć w nieskończoność.
     Wyższe auta (autobus, dźwig) skalują się do tej samej wysokości. */
  max-height: 124px;
  object-fit: contain;
  /* Grafiki mają wycięte tło, więc auto stoi na podnośniku, a nie w prostokącie. */
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.55));
  animation: bujanie 3.4s ease-in-out infinite;
}
.scena.wjazd .auto { animation: wjazd-auta .9s cubic-bezier(.22,.9,.3,1); }
.scena .lift {
  position: absolute; left: 14%; right: 14%; bottom: 2px;
  height: 7px;
  background: linear-gradient(180deg, var(--kreska-jasna), #22262d);
  border-radius: 2px;
  box-shadow: 0 3px 0 rgba(0,0,0,.5);
}
.scena .lift::before, .scena .lift::after {
  content: '';
  position: absolute; bottom: -14px;
  width: 7px; height: 16px;
  background: linear-gradient(180deg, var(--kreska-jasna), #1a1e24);
}
.scena .lift::before { left: 8%; }
.scena .lift::after { right: 8%; }
@keyframes bujanie {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(.5deg); }
}
@keyframes wjazd-auta {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Klucz kręcący się przy naprawie. */
.scena .klucz {
  position: absolute; left: 2px; bottom: 12px;
  font-size: 30px;
  animation: krecenie 1.1s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes krecenie {
  0%, 100% { transform: rotate(-18deg); }
  45%      { transform: rotate(26deg); }
  55%      { transform: rotate(20deg); }
}

/* Rozwalony podnośnik: siłownik puścił i cała hala stoi. Zamiast osobnej
   grafiki przechylamy ten sam podnośnik, który normalnie trzyma auto, i
   dokładamy iskrzenie. Widać na pierwszy rzut oka, że to nie jest pusty plac,
   tylko sprzęt do naprawy. */
.podnosnik.rozwalony { border-left-color: var(--zly, #c0392b); }
.scena-rozwalona { position: relative; min-height: 120px; }
.scena-rozwalona .lift.lezy {
  position: absolute; left: 12%; right: 12%; bottom: 26px;
  height: 9px;
  background: linear-gradient(180deg, #6b3a34, #2a1c1a);
  border-radius: 2px;
  transform: rotate(-9deg);
  box-shadow: 0 4px 0 rgba(0,0,0,.5);
}
.scena-rozwalona .lift.lezy::before, .scena-rozwalona .lift.lezy::after {
  content: '';
  position: absolute; bottom: -18px;
  width: 8px; height: 20px;
  background: linear-gradient(180deg, #5a322c, #1a1e24);
}
.scena-rozwalona .lift.lezy::before { left: 10%; transform: rotate(14deg); }
.scena-rozwalona .lift.lezy::after { right: 10%; transform: rotate(-26deg); }
.scena-rozwalona .iskry {
  position: absolute; left: 24%; bottom: 34px;
  font-size: 26px; color: #ffd166;
  animation: iskrzenie 1.6s steps(2, end) infinite;
}
@keyframes iskrzenie {
  0%, 44% { opacity: 0; transform: scale(.7) rotate(0deg); }
  50%     { opacity: 1; transform: scale(1.15) rotate(18deg); }
  62%     { opacity: .25; transform: scale(.9) rotate(-10deg); }
  70%     { opacity: .9; transform: scale(1.05) rotate(8deg); }
  100%    { opacity: 0; transform: scale(.7) rotate(0deg); }
}

/* Klient z reklamacją odłożoną na później. Linijka pod paskiem stanu, obok
   dowózki: ma przypominać, że ktoś czeka, ale nie zasłaniać gry. */
.reklamacja-pasek {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(180,67,58,.18), var(--panel-2) 60%);
  border: 1px solid var(--kreska);
  border-left: 3px solid var(--zly, #b4433a);
  border-radius: var(--radius);
}
.reklamacja-pasek img { width: 22px; height: 22px; }

/* Zamek na wytrych. Okrągły bębenek na środku ekranu, bo to jedyna rzecz,
   która się wtedy liczy, i nie ma sensu szukać jej na górze zakładki. */
.zamek-zaslona .okno-zamka { max-width: 420px; text-align: center; }
.zamek {
  width: 100%; max-width: 320px;
  margin: 14px auto 4px;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.zamek .obudowa { fill: #0f1216; stroke: var(--kreska-jasna); stroke-width: 3; }
.zamek .szczelina { stroke: #0b0d10; stroke-width: 10; stroke-linecap: round; }
.zamek .oczko { fill: #0b0d10; stroke: var(--kreska-jasna); stroke-width: 2; }
.zamek .bebenek { transition: none; }
.zamek .bebenek.ustepuje .szczelina { stroke: #2b2f36; }
/* Wytrych: stal, nie złoto. Poprzednia wersja miała jaskrawą kulkę na końcu
   i wyglądała jak wskaźnik celu, w który trzeba trafić myszą. */
.zamek .wytrych .trzonek {
  stroke: #cfd6df;
  stroke-width: 3;
  stroke-linecap: round;
}
.zamek .wytrych .haczyk {
  stroke: #cfd6df;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}
.zamek .os { fill: var(--tasma); stroke: #7a5a12; stroke-width: 2; }
/* Rysa na bębenku musi być widoczna na ciemnym tle, inaczej obrót ginie. */
.zamek .bebenek .rysa { fill: #7c8794; }
.zamek .bebenek.ustepuje .rysa { fill: var(--tasma); }
.zamek .zmeczenie {
  fill: none;
  stroke: var(--tasma);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .85;
  transform: rotate(-90deg);
  transform-origin: 150px 150px;
}
.zamek .zmeczenie.czerwony { stroke: var(--zly, #b4433a); }
/* Instrukcja pod zamkiem: pięć kroków, bo bez nich pierwsza próba to zgadywanka. */
.zamek-instrukcja {
  margin: 10px 0 0;
  padding-left: 20px;
  text-align: left;
  font-size: 12.5px;
  color: var(--tekst-cichy);
  line-height: 1.5;
}
.zamek-instrukcja b { color: var(--tekst); }

/* Potwierdzenie ustąpionej zapadki: przez sekundę na środku bębenka, bo tam
   gracz akurat patrzy. Sam zmieniony numer w nagłówku był nie do zauważenia. */
.zapadka-poszla {
  fill: #6fbf5b;
  font-family: var(--naglowek);
  font-size: 26px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(0,0,0,.75);
  stroke-width: 6px;
  animation: zapadka-w-gore 1.2s ease-out forwards;
  pointer-events: none;
}
@keyframes zapadka-w-gore {
  0% { opacity: 0; transform: translateY(10px) scale(.85); }
  18% { opacity: 1; transform: translateY(0) scale(1.05); }
  70% { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(1); }
}

.zamek-podpisy { display: flex; flex-direction: column; gap: 2px; }
.zamek-podpisy .klawisz-podpowiedz { font-size: 11px; opacity: .7; }
@media (max-width: 700px) {
  .zamek-podpisy .klawisz-podpowiedz { display: none; }
}

/* Nagłówki tabeli tam, gdzie w wierszach są pola do wpisania: bez podpisu
   nad kolumną nie wiadomo, czy w okienku wpisuje się sztuki, czy złotówki. */
.tabela .naglowek-tabeli th {
  text-align: left;
  font-family: var(--naglowek);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tekst-cichy);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--kreska);
}

/* Głosowanie nad czatem. Wisi na górze kanciapy i nie da się go zamknąć:
   to pytanie do wszystkich, a nie powiadomienie. */
.panel.glosowanie { position: relative; margin-bottom: 8px; border-left: 3px solid var(--tasma); }
.panel.glosowanie .tytul .zwijak {
  width: 22px; height: 22px; margin-left: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--naglowek); font-size: 16px; line-height: 1;
  color: var(--tekst-cichy);
  background: rgba(0,0,0,.25);
  border: 1px solid var(--kreska);
  border-radius: 5px;
  cursor: pointer;
}
.panel.glosowanie .tytul .zwijak:hover { color: var(--tasma); border-color: var(--tasma); }
/* Zwinięte głosowanie: jedna linijka, żeby z czatu nie zostały dwie wiadomości. */
.panel.glosowanie.zwiniete {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  cursor: zoom-in;
  font-size: 13px;
}
.panel.glosowanie.zwiniete b {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}
.panel.glosowanie.zwiniete .cichy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opcje-glosowania { display: flex; flex-direction: column; gap: 6px; }
.opcje-glosowania .btn { text-align: left; white-space: normal; height: auto; padding: 8px 10px; }
.wynik-glosowania {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--kreska);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}
.wynik-glosowania .pasek-cienki {
  position: absolute; left: 0; top: 0; bottom: 0; right: 0;
  height: auto; background: none; border: 0;
}
.wynik-glosowania .pasek-cienki i { height: 100%; background: rgba(240,180,41,.16); }
.wynik-glosowania span, .wynik-glosowania b { position: relative; }
.wynik-glosowania b { margin-left: auto; }
.wynik-glosowania.moj { border-color: var(--tasma); }

/* Płonący napis na czacie. Cztery klatki cienia zamiast gifa: ten sam efekt
   co w generatorach sprzed dwudziestu lat, tylko bez wysyłania obrazka. */
.ogien-tekst {
  display: inline-block;
  font-family: var(--naglowek);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #ffe08a;
  text-transform: uppercase;
  animation: plomien .38s steps(1, end) infinite;
}
@keyframes plomien {
  0% { text-shadow: 0 -2px 3px #ff8c1a, 0 -4px 8px #ff5e00, 0 -7px 14px #c92a00, 0 -10px 22px #7a1200; }
  25% { text-shadow: 0 -3px 4px #ffb347, 0 -6px 10px #ff6b00, 0 -9px 16px #b32400, 0 -12px 24px #611000; }
  50% { text-shadow: 0 -2px 3px #ffd27a, 0 -5px 9px #ff7b1a, 0 -8px 15px #cc3300, 0 -11px 23px #6e1400; }
  75% { text-shadow: 0 -4px 5px #ffa726, 0 -7px 11px #ff5500, 0 -10px 18px #a81f00, 0 -13px 26px #560d00; }
  100% { text-shadow: 0 -2px 3px #ff8c1a, 0 -4px 8px #ff5e00, 0 -7px 14px #c92a00, 0 -10px 22px #7a1200; }
}

/* Historia warsztatu obok Radia Złom: te same zdarzenia co w powiadomieniach,
   tylko zapisane, żeby dało się do nich wrócić. */
.ikonka-historii { margin-right: 4px; }
/* Skrót `padding` kasował wcięcie z `.radio-zlom div`, więc tekst historii
   przyklejał się do paska po lewej. Wcięcie zostaje, dochodzi tylko oddech
   w pionie i kreska między wpisami. */
#radio-historia div { padding: 3px 0 3px 9px; border-bottom: 1px solid rgba(255,255,255,.04); }
#radio-historia div:last-child { border-bottom: 0; }
#radio-historia .zle { color: var(--zly, #b4433a); }

/* Podpowiedzi wzmianek: wyskakują nad polem czatu w miarę pisania po "@".
   Przy dłuższej liście zostaje suwak, bo inaczej zasłoniłyby pół kanciapy. */
.podpowiedzi-wzmianek {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
  z-index: 45;
  display: flex; flex-direction: column;
  max-height: 168px; overflow-y: auto;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--kreska);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(0,0,0,.55);
}
.podpowiedzi-wzmianek button {
  background: none; border: 0; cursor: pointer;
  text-align: left;
  padding: 6px 8px;
  border-radius: 5px;
  font: inherit; font-size: 13px;
  color: var(--tekst);
}
.podpowiedzi-wzmianek button:hover { background: rgba(255,255,255,.06); }
.podpowiedzi-wzmianek button.wybrany { background: var(--tasma); color: #1a1206; font-weight: 600; }

/* Paleta emotek nad polem czatu. Wyskakuje w górę, bo pole siedzi przy samym
   dole panelu, i zamyka się kliknięciem gdziekolwiek indziej. */
#czat-forma { position: relative; }
.paleta-emotek {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
  z-index: 40;
  /* Kolumny dobierają się same do szerokości kanciapy: przy sztywnych dziesięciu
     emotki wychodziły poza panel na węższych ekranach. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 2px;
  max-height: 210px; overflow-y: auto;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--kreska);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(0,0,0,.55);
}
.paleta-emotek button {
  background: none; border: 0; cursor: pointer;
  font-size: 19px; line-height: 1;
  padding: 4px 0;
  border-radius: 5px;
}
.paleta-emotek button:hover { background: rgba(255,255,255,.08); }
@media (max-width: 700px) {
  .paleta-emotek { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
  .paleta-emotek button { font-size: 22px; padding: 6px 0; }
}

/* Rozmowa z klientem przy reklamacji: kropki pokazują, jak idzie, a odpowiedzi
   są pełnymi zdaniami, więc muszą się układać jedna pod drugą. */
.rozmowa-punkty { display: flex; align-items: center; gap: 6px; }
.rozmowa-punkty .punkt {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--olej);
  border: 1px solid var(--kreska-jasna);
}
.rozmowa-punkty .punkt.trafiony { background: var(--dobry, #6fbf5b); border-color: var(--dobry, #6fbf5b); }
.rozmowa-punkty .punkt.pudlo { background: var(--zly, #b4433a); border-color: var(--zly, #b4433a); }
.rozmowa-punkty .cichy { margin-left: 8px; font-size: 12px; }
.rozmowa-odpowiedzi { display: flex; flex-direction: column; gap: 8px; }
.rozmowa-odpowiedzi .btn {
  text-align: left;
  white-space: normal;
  line-height: 1.35;
  padding: 10px 12px;
  height: auto;
}

/* Ciężarówka jadąca po szrot. */
/* Scena szrotu: kupa złomu stoi, a mechanik przy niej grzebie. Co kilka sekund
   prostuje się z czymś w ręku, więc widać, że kurs faktycznie do czegoś prowadzi. */
.scena-szrotu { position: relative; height: 138px; }
.scena-szrotu img { position: absolute; bottom: 0; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.scena-szrotu .kupa { right: 0; height: 116px; }
/* Obie sylwetki mają wspólne płótno 260 px, więc jedna wysokość w CSS
   zachowuje właściwe proporcje: schylony jest niższy od stojącego. */
.scena-szrotu .szuka,
.scena-szrotu .znalazl { left: 4%; height: 136px; }
.scena-szrotu .szuka { animation: grzebanie 1.1s ease-in-out infinite, zmiana-szuka 7s linear infinite; }
.scena-szrotu .znalazl { opacity: 0; animation: zmiana-znalazl 7s linear infinite; }

@keyframes grzebanie {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(5px) rotate(-3deg); }
}
/* Przez pierwsze pięć sekund grzebie, potem na chwilę pokazuje zdobycz. */
@keyframes zmiana-szuka {
  0%, 68%   { opacity: 1; }
  72%, 96%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes zmiana-znalazl {
  0%, 68%   { opacity: 0; }
  74%, 94%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* Kurz spod rąk: trzy drobiny lecące w różnym rytmie. */
.scena-szrotu .kurz {
  position: absolute;
  bottom: 26px; left: 34%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(190, 175, 150, .5);
  opacity: 0;
}
.scena-szrotu .k1 { animation: kurz-lot 1.6s ease-out infinite; }
.scena-szrotu .k2 { left: 40%; animation: kurz-lot 1.9s ease-out .5s infinite; }
.scena-szrotu .k3 { left: 30%; animation: kurz-lot 2.2s ease-out .9s infinite; }
@keyframes kurz-lot {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  20%  { opacity: .7; }
  100% { opacity: 0; transform: translate(26px, -34px) scale(1.5); }
}

/* Pasek postępu.
   Napis jest zwykłym dzieckiem w normalnym przepływie, a wypełnienie leży pod
   nim jako warstwa. Dzięki temu wysokość paska bierze się z tekstu i nie da się
   już uciąć liter, co zdarzało się wszędzie, gdzie ktoś ustawił niższy pasek. */
.pasek-roboty {
  position: relative;
  min-height: 24px;
  background: var(--olej);
  border: 1px solid #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
}
.pasek-roboty i {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, var(--tasma) 0 11px, var(--tasma-ciemna) 11px 22px);
  background-size: 31px 100%;
  animation: przesuw 1.1s linear infinite;
  transition: width .45s linear;
  box-shadow: 0 0 18px var(--tasma-blask);
}
/* Pasek, przy którym nic się nie dzieje.
   Kręcące się paski przy skończonym zleceniu i przy aucie czekającym na część
   mówiły, że robota idzie, kiedy nie szła. Płaski kolor znaczy: stoi. */
.pasek-roboty.stoi i {
  animation: none;
  background: var(--tasma-ciemna);
  box-shadow: none;
  opacity: .75;
}
.pasek-roboty.zrobione i {
  animation: none;
  background: var(--dobry, #6cbf84);
  box-shadow: none;
}

.pasek-roboty span {
  position: relative;
  display: block;
  padding: 4px 10px;
  text-align: center;
  font-family: var(--naglowek);
  font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
  line-height: 1.3;
  color: #fff; text-shadow: 0 1px 4px #000, 0 0 10px #000;
}
@keyframes przesuw { to { background-position: 31px 0; } }

.status-rzad { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.status-kafel {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--panel), #1b1f25);
  border: 1px solid var(--kreska);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  box-shadow: var(--cien-maly);
}
.status-kafel .ikona { display: flex; flex: none; }
.status-kafel .tresc { min-width: 0; flex: 1; }
.status-kafel .tresc b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--naglowek); font-weight: 500; }

/* Cztery cechy z siłowni: jeden rząd małych kafli.
   Siatka `.karty` była na to stanowczo za duża: to są cztery liczby, a nie
   cztery ekrany. Ikona jest blokiem, a nie tekstem w linii, bo jako tekst
   siadała na linii pisma i stała krzywo względem podpisu. */
.cechy-rzad { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cecha-kafel {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, var(--panel), #1b1f25);
  border: 1px solid var(--kreska);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 13px;
}
.cecha-kafel img { width: 22px; height: 22px; flex: none; display: block; }
.cecha-kafel .nazwa { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cecha-kafel .nazwa small { display: block; font-size: 10.5px; opacity: .6; }
/* Cecha zjedzona przez ciężką broń: wytrenowana, a na placu warta zero. */
.cecha-kafel.zjedzona { border-color: var(--zly, #b4433a); }
.cecha-kafel.zjedzona b { color: var(--zly, #b4433a); }
.cecha-kafel b {
  margin-left: auto;
  font-family: var(--naglowek); font-weight: 500; font-size: 15px;
  line-height: 1;
}

/* Pasek bez napisu w środku. Napis wpisany w pasek wysoki na kilkanaście
   pikseli obcinał się w połowie liter, więc czas stoi teraz obok nazwy. */
.pasek-cienki {
  height: 6px;
  margin-top: 6px;
  background: var(--olej);
  border: 1px solid #000;
  border-radius: 3px;
  overflow: hidden;
}
.pasek-cienki i {
  display: block; height: 100%;
  background: repeating-linear-gradient(45deg, var(--tasma) 0 8px, var(--tasma-ciemna) 8px 16px);
  transition: width .4s linear;
}

.ostrzezenie {
  margin-top: 12px;
  background: rgba(255,107,107,.10);
  border-left: 3px solid var(--czerwony);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 9px 12px;
  font-size: 13px;
}

/* Ikonki z plików: w nagłówkach kart, kafelkach i pasku sezonu. */
.ikonka { width: 26px; height: 26px; border-radius: 5px; flex: none; vertical-align: middle; }
.ikonka-mala { width: 22px; height: 22px; border-radius: 4px; display: block; }
h3.z-ikona { display: flex; align-items: center; gap: 9px; }
.sezon .ikona .ikonka { width: 34px; height: 34px; border-radius: 6px; }
.status-kafel .ikona .ikonka { width: 26px; height: 26px; }

/* ------------------------------------------------------------------- karty */

.karty { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.karta {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, var(--panel-2), #202429);
  border: 1px solid var(--kreska);
  border-radius: var(--radius-duzy);
  padding: 14px;
  overflow: hidden;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.karta:hover { transform: translateY(-3px); border-color: var(--kreska-jasna); box-shadow: var(--cien-maly); }
.karta.zablokowana { opacity: .56; filter: saturate(.5); }
.karta.zablokowana:hover { transform: none; }
.karta.wybrana { border-color: var(--tasma); box-shadow: inset 0 0 0 1px var(--tasma-ciemna), 0 0 22px var(--tasma-blask); }
.karta.wybrana::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tasma);
}
.karta h3 { font-size: 16px; overflow-wrap: anywhere; }
.karta .opis { font-size: 12.5px; color: var(--tekst-cichy); font-style: italic; line-height: 1.45; }
.karta .staty { display: flex; gap: 13px; flex-wrap: wrap; font-size: 12.5px; }
.karta .staty b { color: var(--tasma); font-family: var(--naglowek); font-weight: 500; }
.karta .stopka { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.karta .stopka > :last-child { margin-left: auto; }
.karta .stopka .btn { white-space: nowrap; }

/* Miniatura auta w karcie kolejki. */
.karta .miniatura {
  display: block;
  width: 100%;
  height: 92px;
  margin: -2px 0 2px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 7px 9px rgba(0,0,0,.5));
  transition: transform .25s;
}
.karta:hover .miniatura { transform: scale(1.04); }

/* Portret w karcie ekipy. */
.karta .portret {
  width: 68px; height: 68px;
  object-fit: cover; object-position: center 18%;
  border-radius: var(--radius);
  border: 1px solid var(--kreska);
  flex: none;
  filter: saturate(.9);
}
.karta .glowka { display: flex; align-items: flex-start; gap: 12px; }
.karta .glowka > div { min-width: 0; flex: 1; }

.plakietka {
  display: inline-block;
  font-family: var(--naglowek);
  font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
  background: var(--panel-3); color: var(--tekst-cichy);
  border: 1px solid var(--kreska);
}
.plakietka.tasma { background: var(--tasma); color: #1a1206; border-color: #d99f14; }
.plakietka.premium { background: linear-gradient(90deg, #f59e0b, #fbbf24); color: #2a1c02; border-color: #d99f14; }

/*
 * Plakietka stanu: „to już masz", a nie „kliknij".
 *
 * W sklepie stała obok przycisku z ceną i wyglądała dokładnie tak samo: oba
 * były wypełnione taśmowym żółtym. Przy czterech kolumnach kart oko widziało
 * pole tekstu z rozsypanymi żółtymi pigułkami i nie dało się jednym spojrzeniem
 * odróżnić tego, co kosztuje, od tego, co się już ma. Stan jest teraz obrysem,
 * a wypełnienie zostaje wyłącznie dla rzeczy, w które się klika.
 */
.plakietka.stan {
  background: transparent; color: var(--tasma); border-color: var(--tasma-ciemna);
}

/*
 * Karta rzeczy, którą już masz. Delikatny zielony kant po lewej wystarcza,
 * żeby oko posortowało półkę bez czytania każdego opisu z osobna.
 */
.karta.moje { border-color: rgba(134, 240, 168, .28); }
.karta.moje::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: rgba(134, 240, 168, .55);
}

/* ----------------------------------------------------------------- magazyn */

.regal { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.czesc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "ilosc nazwa cena" "ilosc przyciski przyciski";
  align-items: center; gap: 5px 11px;
  background: linear-gradient(180deg, var(--panel-2), #202429);
  border: 1px solid var(--kreska);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: border-color .15s;
}
.czesc:hover { border-color: var(--kreska-jasna); }
/* Część, która do niczego nie służy: nadaje się tylko na sprzedaż. */
.czesc.zbedna { opacity: .7; border-style: dashed; }
/* Część z kłódką: ma rzucać się w oczy na liście czterdziestu pozycji. */
.czesc.zamknieta { border-color: var(--tasma-ciemna); background: var(--tasma-blask); opacity: 1; }
.klodka-czesci { font-size: 14px; line-height: 1; padding: 4px 8px; }
.klodka-czesci.wisi { border-color: var(--tasma); color: var(--tasma); }
.czesc .ilosc {
  grid-area: ilosc;
  min-width: 34px; text-align: center;
  background: var(--olej); border: 1px solid #000; border-radius: var(--radius);
  padding: 4px 9px;
  font-family: var(--naglowek); font-weight: 600; font-size: 15px; color: var(--tasma);
}
.czesc .nazwa { grid-area: nazwa; font-size: 13.5px; line-height: 1.3; }
.czesc .cena { grid-area: cena; white-space: nowrap; }
.czesc .przyciski { grid-area: przyciski; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.czesc .przyciski .ile-recznie { width: 64px; padding: 4px 6px; font-size: 12.5px; }

/* ---------------------------------------------------------------- kanciapa */

/* Kolumna dzieli wysokość ekranu między czat i Radio Złom. Wcześniej czat brał
   całą wysokość okna, przez co radio lądowało pod ekranem i trzeba było
   specjalnie scrollować, żeby je zobaczyć. */
.kanciapa-kolumna {
  position: sticky; top: calc(var(--belka) + 8px);
  display: flex; flex-direction: column; gap: 14px;
  height: calc(100vh - var(--belka) - 26px);
}

/* Kanciapa przyklejona na stałe do prawej krawędzi ekranu.
   Przy `sticky` położenie kolumny zależało od wysokości sąsiada: każda zmiana
   w środkowej kolumnie (wskoczył pasek dowózki, zniknął panel podnośnika,
   doszło przypomnienie o reklamacji) przestawiała pojemnik, a razem z nim
   drgał czat i radio pod nim. Widać to było zwłaszcza przy pisaniu, kiedy
   wzrok i tak stoi w tym miejscu. `fixed` odcina to zupełnie: siatka trzyma
   pod spodem zarezerwowany tor o tej samej szerokości, więc treść się nie
   przesuwa, a kolumna nie ma już od czego drgać. */
@media (min-width: 1181px) {
  .kanciapa-kolumna {
    position: fixed;
    top: calc(var(--belka) + 8px);
    right: 18px;
    width: 306px;
  }
}
.kanciapa { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.kanciapa .lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 5px; }
.kanciapa .wiadomosc { font-size: 13px; line-height: 1.45; animation: wjazd-boczny .25s ease-out; }
.kanciapa .wiadomosc .kto { font-family: var(--naglowek); font-weight: 500; color: var(--niebieski); }
.kanciapa .forma { display: flex; gap: 6px; margin-top: 12px; }
.kanciapa .forma input { min-width: 0; }
/*
 * Pole wiadomości jest wielowierszowe wyłącznie po to, żeby telefon nie
 * podsuwał nad nim zapisanego hasła. Ma więc wyglądać i zachowywać się jak
 * jednowierszowe: bez uchwytu do rozciągania, bez paska przewijania i tej
 * samej wysokości co guziki obok.
 */
.kanciapa .forma textarea {
  min-width: 0;
  resize: none;
  /*
   * Oba kierunki na raz. Samo `overflow-y` zostawiało poziomy pasek
   * przewijania, bo tekst w jednej linii wyjeżdża w bok, i ten pasek siadał
   * na wpisywanej treści. Przy schowanym przewijaniu pole i tak przesuwa się
   * za kursorem, dokładnie tak jak zwykłe pole jednowierszowe.
   */
  overflow: hidden;
  height: 38px;
  line-height: 1.25;
  white-space: nowrap;
}
.kanciapa .forma .btn { flex: none; white-space: nowrap; }

/* Radio i historia mają stałą wysokość, a nie taką, jaka wyjdzie z treści.
   Przy `flex: 0 1 auto` panel rósł z każdym nowym wpisem, aż dobił do sufitu,
   a kanciapa nad nim kurczyła się o tyle samo. Ponieważ wpisy dochodzą przy
   każdym zjechanym aucie, czat drgał w kółko, najbardziej widocznie przy
   pisaniu. Teraz oba panele mają swoje miejsce i to treść się w nich przewija,
   a nie panel pod treść. */
.kanciapa-kolumna > .panel:last-child {
  flex: 0 0 36%; min-height: 132px;
  display: flex; flex-direction: column;
}
.radio-zlom { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.radio-zlom div { font-size: 12.5px; color: var(--tekst-cichy); border-left: 2px solid var(--kreska); padding-left: 9px; line-height: 1.4; }
.radio-zlom .ikonka { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.toast .ikonka { width: 17px; height: 17px; vertical-align: -4px; margin-right: 5px; }

/* Zdjęcie Burka jest klikalne: szczeka i tyle, ale ma po sobie pokazać,
   że w ogóle reaguje na dotknięcie. */
.burek-foto { cursor: pointer; transition: transform .12s ease; }
.burek-foto:hover { transform: scale(1.03); }
.burek-foto:active { transform: scale(.97); }

/* --------------------------------------------------------------- radio (muzyka) */

.radio { position: relative; display: flex; align-items: center; }
.radio-btn {
  background: var(--panel-2); border: 1px solid var(--kreska); border-radius: var(--radius);
  padding: 5px 10px; font-size: 16px; line-height: 1;
  transition: border-color .15s;
}
.radio-btn:hover { border-color: var(--tasma); }
.radio-panel {
  /* Element siedzi teraz przy body, a nie w belce (patrz muzyka.js), więc
     pozycję liczymy względem okna. Skrypt podaje, gdzie kończy się belka. */
  position: fixed; top: var(--pod-belka, 68px); right: 18px;
  width: 240px; padding: 14px;
  background: var(--panel); border: 1px solid var(--kreska); border-radius: var(--radius-duzy);
  box-shadow: var(--cien); z-index: 60;
  display: none;
}
/* Otwierany kliknięciem: na hover kursor gubił panel po drodze do suwaka. */
.radio-panel.otwarty { display: block; }
.radio-naglowek {
  font-family: var(--naglowek); font-size: 12px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tasma);
  margin-bottom: 8px;
}
.radio-panel input[type="range"] { width: 100%; accent-color: var(--tasma); padding: 0; background: none; border: none; margin: 4px 0 10px; }
.radio-info { font-size: 12.5px; color: var(--tekst-cichy); margin-bottom: 4px; }
.radio-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-akcje { display: flex; gap: 6px; }
.radio-akcje .btn { flex: 1; }

/* ---------------------------------------------------------- powiadomienia */

.powiadomienia {
  position: fixed; right: 18px; bottom: 92px; z-index: 90;
  display: flex; flex-direction: column; gap: 9px;
  max-width: 350px;
  pointer-events: none;
}
.toast {
  position: relative;
  background: linear-gradient(180deg, var(--panel), #1b1f25);
  border: 1px solid var(--kreska);
  border-left: 3px solid var(--tasma);
  border-radius: var(--radius);
  /* Z prawej luźniej, żeby dłuższa treść nie wchodziła pod krzyżyk. */
  padding: 11px 30px 11px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: var(--cien);
  animation: wjazd-boczny .28s cubic-bezier(.2,.9,.3,1);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: auto;
}

/* Powiadomienia i dolne przypomnienia można zsunąć palcem w obie strony. */
.dymek-do-przesuniecia { touch-action: pan-y; will-change: transform, opacity; }
.dymek-do-przesuniecia.dymek-przesuwany { transition: none !important; }
.dymek-do-przesuniecia.dymek-odjezdza {
  transition: transform .18s ease-out, opacity .18s ease-out !important;
}

/* Gaśnięcie: to samo, czy dymek zszedł sam, czy gracz go zamknął. */
.toast.gasnie { opacity: 0; transform: translateX(20px); }

.toast-x {
  position: absolute; top: 3px; right: 4px;
  /* Kontener dymków przepuszcza kliknięcia na grę pod spodem (pointer-events:
     none), więc krzyżyk trzeba z tego wyjąć: bez tego nie da się w niego trafić. */
  pointer-events: auto;
  width: 22px; height: 22px;
  padding: 0; line-height: 1;
  background: none; border: 0;
  color: var(--tekst-cichy); font-size: 17px;
  opacity: .55;
  transition: opacity .15s, color .15s;
}
.toast-x:hover { opacity: 1; color: var(--tekst); }
.toast.dobry { border-left-color: var(--zielony); }
.toast.zly { border-left-color: var(--czerwony); }
@keyframes wjazd-boczny { from { transform: translateX(26px); opacity: 0; } }

/* Dymek skrócony: jedna linijka, mniejszy, bez rozpychania rogu ekranu. */
.toast.skrocony {
  padding: 7px 28px 7px 11px; font-size: 12.5px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Wybór trybu dymków nad historią. */
.dymki-wybor {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: 12px;
}
.dymki-wybor.hidden { display: none; }
.dymki-wybor button {
  padding: 3px 9px; border-radius: 999px;
  background: transparent; border: 1px solid var(--kreska);
  color: var(--tekst-cichy); font-size: 12px; cursor: pointer;
}
.dymki-wybor button.aktywna { border-color: var(--tasma); color: var(--tasma); }

/*
 * Na telefonie dymek ma całą szerokość ekranu. Wjeżdżał z boku i przez
 * ułamek sekundy wystawał poza ekran, a w aplikacji potrafiło to szarpnąć
 * widokiem. Tu wjeżdża od dołu i gaśnie w miejscu.
 */
@media (max-width: 760px) {
  #powiadomienia .toast { animation-name: wjazd-dolny; }
  #powiadomienia .toast.gasnie { transform: none; }
}
@keyframes wjazd-dolny { from { transform: translateY(14px); opacity: 0; } }

/* Prywatna rozmowa ze znajomym, w panelu Znajomi. */
.pw-naglowek {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px;
  padding: 0 0 8px; background: var(--panel, #1b1f25); border-bottom: 1px solid var(--kreska);
}
.pw-wiadomosci { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.pw-wiadomosc {
  align-self: flex-start; max-width: 85%; padding: 6px 10px; border-radius: 10px;
  background: rgba(255,255,255,.06); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere;
}
.pw-wiadomosc.moja { align-self: flex-end; background: rgba(242,181,47,.16); }
.pw-wiadomosc small { display: block; font-size: 10.5px; margin-top: 2px; }
.znajomy .guziki .licznik.widoczny {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 9px;
  background: var(--zly, #b4433a); color: #fff; font-size: 10.5px; line-height: 15px;
}
#pw-forma textarea { resize: none; overflow: hidden; height: 38px; line-height: 1.25; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
#pw-forma .btn { flex: none; white-space: nowrap; }

/* Czat pokoju wyścigu w Pojedynku. */
.wg-czat { display: flex; flex-direction: column; gap: 8px; }
.wg-czat-lista {
  max-height: 190px; min-height: 70px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 5px; padding: 8px 10px;
  background: rgba(0,0,0,.18); border: 1px solid var(--kreska); border-radius: var(--radius);
  font-size: 13px; line-height: 1.4;
}
.wg-czat-lista .cichy { margin-right: 4px; }
.wg-czat-forma { display: flex; gap: 6px; }
.wg-czat-forma input { flex: 1 1 auto; min-width: 0; }
.wg-czat-forma .btn { flex: none; white-space: nowrap; }

/* Powiadomienia push: jedna linijka nad historią, ustawienia w okienku. */
.push-panel { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; }
.push-panel.hidden { display: none; }
.push-ustaw {
  margin-left: auto; padding: 3px 9px; border-radius: 999px;
  background: transparent; border: 1px solid var(--kreska); color: var(--tekst-cichy); font-size: 12px; cursor: pointer;
}
.push-ustaw:hover { border-color: var(--tasma); color: var(--tasma); }
[data-push-ustawienia] p { margin: 0 0 8px; }
.push-kategorie { display: grid; gap: 4px; margin: 4px 0 8px; }
.push-kategoria { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.push-kategoria input { width: 16px; height: 16px; min-height: 0; accent-color: var(--tasma); }

/* Zwijane grupy zakładek: tylko na komputerze, w bocznym pasku. */
.grupa-nawigacji .strzalka-grupy { display: none; }
@media (min-width: 761px) {
  html:not(.aplikacja-natywna) .grupa-nawigacji { cursor: pointer; user-select: none; }
  html:not(.aplikacja-natywna) .grupa-nawigacji:hover { color: var(--tekst); }
  html:not(.aplikacja-natywna) .grupa-nawigacji .strzalka-grupy {
    display: block; order: 3; flex: none;
    width: 7px; height: 7px; margin-right: 2px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
  }
  html:not(.aplikacja-natywna) .grupa-nawigacji.zwinieta .strzalka-grupy { transform: rotate(-45deg); }
  html:not(.aplikacja-natywna) .grupa-nawigacji.zwinieta.czeka > span::after {
    content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px;
    border-radius: 50%; background: var(--tasma); box-shadow: 0 0 8px var(--tasma);
    vertical-align: 1px;
  }
  html:not(.aplikacja-natywna) .nawigacja button.w-zwinietej:not(.aktywna) { display: none; }
}

/* ---------------------------------------------------------------- modale */

.zaslona {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(6,7,9,.78);
  backdrop-filter: blur(3px);
  animation: pojawienie .18s ease-out;
}
.okno {
  position: relative;
  width: 100%; max-width: 580px; max-height: 86vh;
  /* Treść przewija się w środku, a przycisk zostaje na wierzchu. Przy długim
     oknie (lista zmian, raport z nocy) na telefonie trzeba było inaczej
     przewijać w ciemno do samego dołu, żeby w ogóle je zamknąć. */
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: linear-gradient(180deg, var(--panel), #1b1f25);
  border: 1px solid var(--kreska);
  border-radius: var(--radius-duzy);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
  animation: wjazd-okna .26s cubic-bezier(.2,.9,.3,1);
}
.okno::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  border-radius: var(--radius-duzy) var(--radius-duzy) 0 0;
  background: repeating-linear-gradient(-45deg, var(--tasma) 0 10px, #23262c 10px 20px);
}
.okno h2 { font-size: 23px; margin-bottom: 10px; color: var(--tasma); flex: none; }
.okno-tresc { overflow-y: auto; min-height: 0; }
.okno > .btn, .okno > div:last-child { flex: none; }
.okno p + p { margin-top: 10px; }
.okno ul { margin: 8px 0 8px 18px; }
@keyframes pojawienie { from { opacity: 0; } }
@keyframes wjazd-okna { from { transform: translateY(18px) scale(.97); opacity: 0; } }

.raport { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.raport div { font-size: 13.5px; border-left: 3px solid var(--kreska); padding-left: 11px; line-height: 1.45; }
.raport div.botch { border-left-color: var(--czerwony); }
.raport div.improvised { border-left-color: #d98324; }
.raport div.levelup { border-left-color: var(--tasma); }
.raport div.repair { border-left-color: var(--zielony); }
.raport div.craft { border-left-color: var(--niebieski); }

/* ------------------------------------------------------------------ sezon */

.sezon {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, var(--tasma-blask), transparent 60%), var(--panel-2);
  border: 1px solid var(--kreska);
  border-left: 3px solid var(--tasma-ciemna);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin-bottom: 16px;
}
.sezon .ikona { display: flex; }
.sezon .tresc { flex: 1; font-size: 13.5px; }
.sezon .tresc b { color: var(--tasma); font-family: var(--naglowek); font-weight: 500; letter-spacing: .03em; }

/* ----------------------------------------------------------------- tabele */

table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabela th {
  text-align: left; padding: 7px 9px;
  font-family: var(--naglowek); font-size: 11px; font-weight: 500;
  color: var(--tekst-cichy); text-transform: uppercase; letter-spacing: .09em;
  border-bottom: 1px solid var(--kreska);
}
table.tabela td { padding: 8px 9px; border-bottom: 1px solid rgba(0,0,0,.35); }
table.tabela tbody tr { transition: background .12s; }
table.tabela tbody tr:hover { background: rgba(255,255,255,.03); }
table.tabela tr.ja { background: var(--tasma-blask); }

/* ------------------------------------------------------------------ efekty */

#efekty { position: fixed; inset: 0; pointer-events: none; z-index: 95; }

.kwota-lot {
  position: fixed;
  transform: translate(-50%, -50%);
  font-family: var(--naglowek);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .03em;
  text-shadow: 0 2px 10px #000, 0 0 22px rgba(0,0,0,.9);
  animation: kwota-w-gore 1.15s cubic-bezier(.2,.7,.3,1) forwards;
  white-space: nowrap;
}
.kwota-lot.minus { color: var(--czerwony); }
.kwota-lot.plus { color: var(--zielony); }
@keyframes kwota-w-gore {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  18%  { opacity: 1; transform: translate(-50%, -80%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -230%) scale(1); }
}

.iskra {
  position: fixed;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #ffd97a;
  box-shadow: 0 0 8px 2px rgba(255,190,60,.85);
  animation: iskra-lot .55s ease-out var(--zwloka, 0ms) forwards;
}
@keyframes iskra-lot {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to   { opacity: 0; transform: rotate(var(--kat, -60deg)) translateX(var(--dystans, 50px)) scale(.3); }
}

.blysk { animation: blysk-anim .65s ease-out; }
@keyframes blysk-anim {
  0%   { text-shadow: 0 0 0 transparent; }
  25%  { text-shadow: 0 0 18px currentColor; filter: brightness(1.5); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* Celowo zawężone do #scena. Transform na <body> robi z niego układ odniesienia
   dla elementów `position: fixed`, przez co warstwa tła rozciągała się na całą
   wysokość strony i ekran mrugał na czarno. Zawężony selektor pilnuje, żeby
   nikt tego przypadkiem nie przywrócił. */
#scena.wstrzas { animation: wstrzas-anim .45s ease-out; }
@keyframes wstrzas-anim {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}

/* Lampa nad stanowiskiem: delikatny, powolny oddech światła nad podnośnikiem. */
.podnosnik::before {
  content: '';
  position: absolute;
  top: -60px; right: 6%;
  width: 340px; height: 180px;
  background: radial-gradient(ellipse at 50% 0%, rgba(240,180,41,.20), transparent 70%);
  pointer-events: none;
  animation: oddech-lampy 5s ease-in-out infinite;
}
@keyframes oddech-lampy {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* Delikatne pojawianie się zawartości tylko przy faktycznej zmianie zakładki.
   Przy zwykłym odświeżeniu stanu treść ma się podmienić bez mrugania. */
#scena > div.wjazd { animation: wjazd-sekcji .22s ease-out; }
@keyframes wjazd-sekcji { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- Dowózka od Mietka: pasek na górze Warsztatu ------------------------- */
.dowozka {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px; margin-bottom: 12px;
  border: 1px dashed var(--kreska); border-radius: 7px;
  background: rgba(0, 0, 0, .16);
  font-size: 13px;
}
.dowozka.gra { border-color: var(--tasma); border-style: solid; }
.dowozka img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.dowozka b { font-family: var(--naglowek); font-weight: 500; white-space: nowrap; }
.dowozka .przelacznik {
  flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 6px;
  cursor: pointer; white-space: nowrap;
}
.dowozka .przelacznik input { width: auto; margin: 0; }
.dowozka.gra .przelacznik span { color: var(--tasma); }

/* --- Strefa zagrożenia w panelu admina ------------------------------------ */
.strefa-zagrozenia { border-color: var(--zly, #b4433a); }
.strefa-zagrozenia .tytul { color: var(--zly, #b4433a); }
.strefa-zagrozenia .tytul::before { background: var(--zly, #b4433a); }

/* --- Zakładka z czymś do odebrania --------------------------------------- */
.nawigacja button.gotowe { color: var(--tasma); }
.nawigacja button.gotowe::after {
  content: ''; margin-left: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tasma);
  box-shadow: 0 0 0 0 rgba(240, 180, 40, .65);
  animation: kropka-puls 1.8s ease-out infinite;
}
@keyframes kropka-puls {
  0%   { box-shadow: 0 0 0 0 rgba(240, 180, 40, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(240, 180, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 180, 40, 0); }
}

/* --- Grafiki nie do wyniesienia ------------------------------------------
   Nie da się tego zablokować szczelnie (przeglądarka i tak pobiera plik), ale
   ukręca to drogę na skróty: prawy przycisk, przeciągnięcie na pulpit,
   zaznaczenie i skopiowanie. */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* --- Tablica zleceń przy bramie ------------------------------------------ */
.tablica { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.kartka {
  position: relative;
  padding: 22px 15px 13px;
  background: linear-gradient(180deg, #2b2a24, #24231e);
  border: 1px solid var(--kreska);
  border-radius: 3px;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .3);
}

/* Kartki miały lekki obrót, żeby wyglądały jak przypięte na tablicy. Przy
   kącie poniżej stopnia tekst renderuje się po skosie i litery siadają na
   różnych wysokościach: wygląda to jak zepsuta czcionka. Wrażenie papieru
   robią teraz pinezka, ramka i cień, a tekst stoi prosto. */
.kartka.gotowa { border-color: var(--tasma); }
.kartka .pinezka {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e05b4a, #8d2b20);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}
.kartka h3 { font-size: 15px; margin-bottom: 5px; }
.kartka .opis { font-size: 12.5px; margin-bottom: 9px; }
.kartka .dopisek { font-size: 12px; font-style: italic; color: var(--tekst-cichy); margin: 9px 0 11px; }
.kartka .stopka { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kartka .stopka .btn { margin-left: auto; }

/* --- Kto już złożył ofertę w konkursie ------------------------------------ */
.konkurencja { margin: 12px 0 6px; font-size: 13px; line-height: 2; }
.oferent {
  display: inline-block; padding: 2px 8px; margin-right: 4px;
  border: 1px solid var(--kreska); border-radius: 11px;
  font-size: 12.5px; white-space: nowrap;
  animation: wjazd-boczny .3s ease-out;
}
.oferent.gracz { border-color: var(--tasma); color: var(--tasma); }
.oferent.obcy { color: var(--tekst-cichy); }

/* Wyniki konkursu: pełna lista dopiero po rozstrzygnięciu. */
.wyniki-ofert { width: 100%; margin-top: 10px; font-size: 13px; }
.wyniki-ofert td { padding: 4px 8px; border-bottom: 1px solid var(--kreska); }
.wyniki-ofert tr.zwyciezca td { color: var(--tasma); font-weight: 500; }
.wyniki-ofert td:last-child { text-align: right; white-space: nowrap; }

/* --- Znajomi w kolumnie z czatem ------------------------------------------ */
/* Zakładki w panelach bocznych: kanciapa (czat i znajomi) oraz radio
   (okolica i historia warsztatu). Wyglądają tak samo, ale to dwa osobne
   przełączniki i nie mogą się nawzajem przestawiać. */
/* Zakładki kanciapy i radia.
   Po dojściu trzeciej zakładki (Brygada) rząd przestał się mieścić w kolumnie
   i „Znajomi" razem ze znakiem zapytania spadały do drugiej linijki. To jest
   pasek zakładek, a nie nagłówek panelu, więc czcionka może być mniejsza,
   odstępy ciaśniejsze, a całość ma zostać w jednej linii. */
.zakladki-kanciapy, .zakladki-radia {
  display: flex; gap: 0; align-items: center;
  flex-wrap: nowrap; font-size: 13.5px; letter-spacing: 0;
}
/* Odstęp od żółtej kreski nagłówka. Wspólny `gap` poszedł do zera, żeby trzy
   zakładki zmieściły się w jednej linii, ale wtedy pierwsza z nich siadła
   tuż przy kresce i wyglądało to na sklejone. */
.zakladki-kanciapy::before, .zakladki-radia::before { margin-right: 9px; }
.zakladki-kanciapy button, .zakladki-radia button {
  background: none; border: none; padding: 0 2px; cursor: pointer;
  font: inherit; color: var(--tekst-cichy);
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.zakladki-kanciapy button.aktywna, .zakladki-radia button.aktywna { color: var(--tasma); }
.zakladki-kanciapy button + button, .zakladki-radia button + button { margin-left: 9px; }
/* Znak zapytania stoi przy prawej krawędzi, ale nie ma prawa zepchnąć
   zakładek do następnej linijki, gdy zrobi się ciasno. */
.zakladki-kanciapy .btn-pytajnik { flex: none; margin-left: auto; }
.zakladki-kanciapy .licznik {
  display: none; margin-left: 4px; padding: 0 5px;
  background: var(--zly, #b4433a); color: #fff;
  border-radius: 9px; font-size: 10.5px; line-height: 15px;
}
.zakladki-kanciapy .licznik.widoczny { display: inline-block; }
/* Nowe wiadomości na czacie brygady: zakładka świeci, dopóki ktoś jej nie otworzy. */
.zakladki-kanciapy button.swieci:not(.aktywna) { color: var(--tasma); animation: brygada-pisze 1.6s ease-in-out infinite; }
@keyframes brygada-pisze { 50% { text-shadow: 0 0 10px var(--tasma); } }
html.pw-nowe .mobile-czat::after,
html.czat-brygady-nowe .mobile-czat::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--czerwony, #e0563a); box-shadow: 0 0 0 2px var(--panel, #1b1f25);
}

.kanciapa .kto.klikalny { cursor: pointer; }
.kanciapa .kto.klikalny:hover { text-decoration: underline; }

.grupa-znajomych { margin-bottom: 12px; }
.grupa-znajomych > .cichy { display: block; margin-bottom: 5px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.znajomy {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--kreska);
  font-size: 13px;
}
.znajomy .kropka {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--kreska);
}
.znajomy.online .kropka { background: #6fbf5b; box-shadow: 0 0 6px rgba(111, 191, 91, .6); }
.znajomy .kto { flex: 1 1 auto; min-width: 0; }
.znajomy .kto b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.znajomy .guziki { flex: 0 0 auto; display: flex; gap: 4px; }
#znajomi-forma input { min-width: 0; }

/* --- Mini-gry ------------------------------------------------------------- */
.klient-mowi {
  padding: 12px 14px;
  border-left: 3px solid var(--tasma);
  background: rgba(0, 0, 0, .18);
  font-style: italic;
  line-height: 1.5;
}
.odpowiedzi { display: grid; gap: 7px; }
.odpowiedzi .btn { text-align: left; justify-content: flex-start; }

.pasek-sruby {
  position: relative;
  height: 30px;
  background: var(--olej);
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;
}
.pasek-sruby .strefa {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(111, 191, 91, .55), rgba(111, 191, 91, .28));
  border-left: 1px solid rgba(111, 191, 91, .8);
  border-right: 1px solid rgba(111, 191, 91, .8);
}
.pasek-sruby .wskaznik {
  position: absolute; top: -2px; bottom: -2px;
  width: 3px; margin-left: -1.5px;
  background: var(--tasma);
  box-shadow: 0 0 8px rgba(240, 180, 40, .8);
}

/* Kartka gotowa do odbioru ma być widoczna z drugiego końca ekranu. */
.kartka.gotowa { box-shadow: 0 0 0 1px var(--tasma), 2px 3px 0 rgba(0, 0, 0, .3); }
.kartka .do-odbioru { position: absolute; top: 6px; right: 8px; font-size: 10.5px; }

/* Stawka w mini-grach: widoczna zanim się zacznie. */
.stawka {
  margin-bottom: 12px; padding: 7px 10px;
  border-left: 3px solid var(--tasma);
  background: rgba(0, 0, 0, .16);
  font-size: 13px;
}

/* --- Zwinięty pasek stanu: wszędzie poza Warsztatem ----------------------- */
.pasek-skrot {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 14px; margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .16));
  border: 1px solid var(--kreska);
  border-left: 3px solid var(--tasma);
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s, background .15s;
}
.pasek-skrot:hover { border-color: var(--tasma); }
.pasek-skrot.pusty { border-left-color: var(--kreska); }
.pasek-skrot .ikona { flex: 0 0 auto; display: flex; }
.pasek-skrot .ikona img { width: 22px; height: 22px; }
.pasek-skrot b {
  flex: 0 1 auto; min-width: 0;
  font-family: var(--naglowek); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pasek-skrot .pasek-cienki { flex: 1 1 auto; min-width: 60px; margin-top: 0; }
.pasek-skrot .cichy { flex: 0 0 auto; white-space: nowrap; }
.pasek-skrot .plakietka { flex: 0 0 auto; }

/* --- Pojedynek: klucz i nakrętka ----------------------------------------- */
.srubokret { display: flex; justify-content: center; margin: 6px 0 4px; }
.srubokret svg { overflow: visible; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }

/* Klucz odskakuje przy każdym naciśnięciu spacji. */
.klucz { transform-origin: 62px 65px; }
.klucz.szarpie { animation: szarpniecie .09s ease-out; }
@keyframes szarpniecie {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(11deg); }
  100% { transform: rotate(0deg); }
}

/* Podpowiedź klawisza na przycisku. */
.klawisz {
  display: inline-block; margin-left: 7px; padding: 1px 6px;
  border: 1px solid currentColor; border-radius: 4px;
  font-size: 10.5px; letter-spacing: .06em; opacity: .75;
  text-transform: uppercase;
}

/* --- Dymek chodzący za kursorem ------------------------------------------
   Jeden element na całą stronę, pozycjonowany z JS. Wariant przyklejony do
   kafelka wjeżdżał pod belkę i wystawał poza ekran przy krawędziach. */
/* --- Wyścigi kaszlaków --------------------------------------------------- */

.wyscig-plansza { position: relative; display: flex; justify-content: center; }
.wyscig-plansza canvas {
  display: block;
  border: 1px solid var(--kreska);
  border-radius: var(--radius);
  background: #151719;
  touch-action: none;   /* palec ma sterować autem, a nie przewijać stronę */
}
.wyscig-hud {
  position: absolute; top: 10px; left: 12px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: rgba(12, 14, 16, .72);
  border: 1px solid var(--kreska);
  border-radius: var(--radius);
  font-size: 12px; line-height: 1.35;
  pointer-events: none;
}
.wyscig-hud b { font-family: var(--naglowek); font-size: 17px; }
@media (max-width: 760px) {
  /* Na telefonie licznik zajmował ćwierć planszy: to ma być podpowiedź,
     a nie główna treść ekranu. */
  .wyscig-hud { padding: 5px 7px; font-size: 10.5px; line-height: 1.2; opacity: .9; }
  .wyscig-hud b { font-size: 13px; }
}
.wyscig-turbo { width: 92px; height: 5px; margin-top: 4px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.wyscig-turbo i { display: block; height: 100%; background: var(--tasma); }

/* Kierownica na ekranie.

   Krzyżak z czterech przycisków zastąpiła gałka: skręt jest teraz płynny,
   a nie „zero albo cały wychył", więc na łuku da się prowadzić zamiast
   szarpać. Wszystko siedzi na planszy, a nie pod nią, żeby kciuki nie
   zjeżdżały poza obraz i żeby trzymanie gazu nie przewijało strony.
   Na komputerze niepotrzebne: tam jest klawiatura. */
.wyscig-galka, .wyscig-guziki { display: none; }

@media (hover: none) {
  .wyscig-galka {
    position: absolute; left: 10px; bottom: 10px; z-index: 4;
    display: block; width: 92px; height: 92px;
    opacity: .82;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20,23,28,.62), rgba(12,14,16,.78));
    border: 1px solid var(--kreska);
    touch-action: none; user-select: none; -webkit-user-select: none;
  }
  .wyscig-galka.trzymana { border-color: var(--tasma-ciemna); }
  .wyscig-galka-oczko {
    position: absolute; inset: 20px; border-radius: 50%;
    border: 1px dashed rgba(255,255,255,.14);
    pointer-events: none;
  }
  .wyscig-galka-palec {
    position: absolute; left: 50%; top: 50%;
    width: 42px; height: 42px; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 38% 32%, #4a515c, #23272d 70%);
    border: 1px solid var(--kreska-jasna);
    box-shadow: 0 3px 10px rgba(0,0,0,.6);
    transition: transform .05s linear;
    pointer-events: none;
  }
  .wyscig-galka.trzymana .wyscig-galka-palec {
    background: radial-gradient(circle at 38% 32%, #6a5a24, #2e2a18 70%);
    border-color: var(--tasma-ciemna);
  }

  .wyscig-guziki {
    position: absolute; right: 10px; bottom: 10px; z-index: 4;
    display: flex; flex-direction: column; gap: 8px;
  }
  .wyscig-guzik {
    width: 56px; height: 56px; padding: 0; border-radius: 50%;
    opacity: .86; font-size: 11px;
    background: rgba(12, 14, 16, .8); color: var(--tasma);
    border: 1px solid var(--tasma-ciemna);
    font-family: var(--naglowek); font-size: 13px; letter-spacing: .04em;
    touch-action: none; user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .wyscig-guzik.grat { color: var(--tekst); border-color: var(--kreska-jasna); }
  .wyscig-guzik:active { background: rgba(240, 180, 41, .22); opacity: 1; }
  .wyscig-galka.trzymana { opacity: 1; }
}

/* Odliczanie na środku planszy: w tej chwili gracz patrzy na auto, nie na HUD. */
.wyscig-swiatla {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--naglowek); font-size: clamp(48px, 12vw, 120px);
  color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.85);
  pointer-events: none;
}
.wyscig-swiatla.zielone { color: #7ac74f; }

.wyscig-grat {
  margin-top: 6px; padding: 3px 7px;
  border: 1px solid var(--tasma-ciemna, #7a5c12); border-radius: 5px;
  background: rgba(224, 165, 0, .14);
  font-family: var(--naglowek); font-size: 12px; letter-spacing: .02em;
}
.wyscig-grat.pusty { border-color: var(--kreska); background: none; color: var(--tekst-cichy); }

.wyscig-tabela { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
/* Kolejność wierszy ustawia `order`, żeby zmiana miejsc nie przestawiała węzłów. */
.wyscig-tabela > div, .wyscig-kamery [data-kierowca] { order: 0; }
.wyscig-tabela > div { display: flex; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--panel-2); }
.wyscig-tabela .ja { background: var(--panel-3); border-left: 3px solid var(--tasma); }
.wyscig-tabela > div[data-sledz] { cursor: pointer; transition: background .15s, transform .1s; }
.wyscig-tabela > div[data-sledz]:hover { background: var(--panel-3); transform: translateX(2px); }
.wyscig-wybierz-auto { margin-top: 10px; }
.wyscig-tabela .miejsce { min-width: 22px; color: var(--tasma); font-family: var(--naglowek); }
.wyscig-tabela .kto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Maleńki znak zapytania obok tytułu: pomoc dla tego, kto jej szuka, i nic
   nierzucającego się w oczy dla tego, kto już wie. */
.btn-pytajnik {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 7px; padding: 0;
  border: 1px solid var(--kreska-jasna, #3a4048); border-radius: 50%;
  background: var(--panel-3, #23272d); color: var(--tekst-cichy, #9aa4b2);
  font-family: var(--tresc); font-size: 11.5px; font-weight: 700; line-height: 1;
  text-transform: none; letter-spacing: normal;
  cursor: pointer; vertical-align: middle;
  transition: color .15s, border-color .15s;
}
/* Licznik przy nazwie gniazda w Sklepie: ile narzędzi tam stoi i ile już masz.
   Odsunięty na prawo, żeby nie mieszał się z tytułem. */
/* Guzik rozwijający gniazdo: pełna szerokość, bo to koniec listy kart. */
.rozwin-gniazdo { display: block; width: 100%; margin-top: 8px; }

.licznik-gniazda { margin-left: auto; font-size: 11.5px; text-transform: none; letter-spacing: normal; }

.btn-pytajnik:hover { color: var(--tasma, #e0a500); border-color: var(--tasma, #e0a500); }

/* Ogłoszenie przypięte nad czatem. Ma być widać, że to nie jest zwykły wpis. */
.przypinka {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 8px; padding: 9px 11px;
  background: linear-gradient(180deg, rgba(224, 165, 0, .14), rgba(224, 165, 0, .06));
  border: 1px solid var(--tasma-ciemna, #7a5c12);
  border-left-width: 3px;
  border-radius: var(--radius, 8px);
  font-size: 12.5px; line-height: 1.45;
}
.przypinka .pinezka { flex: none; font-size: 13px; }
.przypinka .tresc-przypinki { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.przypinka .do-kiedy { flex: none; font-size: 11px; white-space: nowrap; }
.przypinka .zdejmij {
  flex: none; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--tekst-cichy, #9aa4b2);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.przypinka .zdejmij:hover { color: var(--zly, #d08b6a); }

.z-dymkiem { cursor: help; }
/* W belce widać, że pod wskaźnikiem kryje się wyjaśnienie: bez tego znaku nikt
   nie zgadnie, że jest w co stuknąć, a to właśnie tam gracze szukali podpowiedzi. */
.belka .z-dymkiem span { border-bottom: 1px dotted rgba(255, 255, 255, 0.28); }

#dymek {
  position: fixed; top: 0; left: 0;
  max-width: 290px;
  padding: 8px 11px;
  background: #15171b;
  border: 1px solid var(--kreska);
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
  color: var(--tekst);
  font-family: var(--tresc);
  font-size: 12.5px; font-weight: 400; line-height: 1.45;
  letter-spacing: normal; text-transform: none; text-align: left;
  white-space: pre-line;
  opacity: 0; pointer-events: none;
  transition: opacity .1s ease-out;
  z-index: 90;
}
#dymek.widoczny { opacity: 1; }

/* ==========================================================================
   TELEFONY

   Blok stoi na końcu arkusza celowo. Wcześniej reguły mobilne siedziały wyżej
   niż odpowiadające im reguły desktopowe o tej samej specyficzności, więc były
   przez nie nadpisywane i na telefonie nawigacja zostawała pionową listą
   czternastu pozycji zajmującą cały ekran.
   ========================================================================== */


/* Kurs Mietka w pasku dowózki. */
.dowozka .kurs { flex: 1 1 220px; min-width: 160px; display: flex; flex-direction: column; gap: 3px; }
.dowozka .kurs .pasek-cienki { margin-top: 0; }
.dowozka.w-drodze { border-color: var(--tasma); border-style: solid; }
/* Mietek stoi, chociaż części brakuje: wyjaśnienie ma się rzucać w oczy. */
.dowozka.postoj [data-dowozka-cena] { color: var(--zly, #d08b6a); }
.dowozka.w-drodze img { animation: dojazd 1.6s ease-in-out infinite; }
@keyframes dojazd {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* --- Lakiernia: kabina lakiernicza ---------------------------------------- */
.kabina {
  position: relative;
  border: 1px solid #000;
  border-radius: 6px;
  background: #15171b;
  overflow: hidden;
}
.kabina canvas {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;          /* bez tego palec przewija stronę zamiast malować */
  user-select: none;
}
.kabina .odliczanie {
  position: absolute; top: 8px; right: 10px;
  padding: 2px 9px;
  background: rgba(0, 0, 0, .62);
  border: 1px solid var(--kreska);
  border-radius: 6px;
  font-family: var(--naglowek); font-weight: 600; font-size: 14px;
  color: var(--tasma);
}

/* --- Wycena --------------------------------------------------------------- */
.wycena-auto { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.wycena-auto img { width: 130px; flex: 0 0 auto; }
.wycena-auto b { font-family: var(--naglowek); font-weight: 500; }

/* --- Panel plików w administracji ----------------------------------------- */
.upuszczalnia {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px;
  border: 2px dashed var(--kreska);
  border-radius: 9px;
  background: rgba(0, 0, 0, .16);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upuszczalnia:hover, .upuszczalnia.nad { border-color: var(--tasma); background: rgba(240, 180, 40, .07); }
.upuszczalnia b { font-family: var(--naglowek); font-weight: 500; }

.lista-plikow {
  display: grid; gap: 8px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.lista-plikow .plik {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--kreska); border-radius: 7px;
  background: rgba(0, 0, 0, .14);
  min-width: 0;
}
.lista-plikow .plik img { width: 54px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.lista-plikow .plik .ikona-pliku { width: 54px; text-align: center; font-size: 11px; color: var(--tekst-cichy); }
.lista-plikow .plik .opis { min-width: 0; font-size: 12.5px; }
.lista-plikow .plik b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Wspólne zlecenie od floty -------------------------------------------- */
.czolowka-floty td { padding: 5px 8px; }
.czolowka-floty td:first-child { width: 30px; color: var(--tekst-cichy); }
.czolowka-floty td:last-child { text-align: right; white-space: nowrap; }
.czolowka-floty tr.ja td { color: var(--tasma); font-weight: 500; }

/* Gwiazdka przy części, bez której roboty nie ma. */
.konieczna { color: var(--tasma); font-weight: 700; cursor: help; }

/* --- Seria dzienna --------------------------------------------------------- */
.panel.do-odbioru { border-color: var(--tasma); }

.cykl-serii { display: flex; gap: 8px; flex-wrap: wrap; }
.dzien-serii {
  position: relative;
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--olej);
  border: 1px solid var(--kreska);
  border-radius: 9px;
  font-family: var(--naglowek); font-weight: 600;
  color: var(--tekst-cichy);
}
.dzien-serii.zaliczony { background: rgba(240, 180, 40, .16); border-color: var(--tasma-ciemna); color: var(--tekst); }
.dzien-serii.dzis {
  border-color: var(--tasma); color: var(--tasma);
  box-shadow: 0 0 0 2px var(--tasma-blask);
}
/* Znacznik dnia z dodatkową nagrodą. Kropka, a nie gwiazdka z tekstu:
   znak w rogu kafelka nie mieścił się w wierszu i wychodził ucięty. */
.dzien-serii .dodatek {
  position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tasma);
}

/* --- Pełny regał: propozycja opylenia ------------------------------------
   Ten sam kształt co pasek dowózki, tylko w kolorze ostrzeżenia: to jest
   pytanie z terminem, a nie przełącznik. */
.opylanie {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-bottom: 8px;
  background: var(--panel);
  border: 1px solid var(--tasma);
  border-left: 4px solid var(--tasma);
  border-radius: var(--radius);
}
.opylanie img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.opylanie b { font-family: var(--naglowek); font-weight: 500; }
.opylanie .powod { font-style: italic; }
.opylanie > .cichy:last-of-type { margin-left: auto; font-family: var(--naglowek); }

/* --- Przełącznik działów w sklepie ----------------------------------------
   Trzy działy plus pomoc. Na wąskim ekranie wiersz się zawija zamiast ściskać
   przyciski: przy ściskaniu nazwy łamały się w środku wyrazu ("NARZĘDZI/A"). */
/* --- Działy sklepu --------------------------------------------------------
   Rząd przycisków i pod nim jedno zdanie o wybranym dziale. Zdanie siedzi
   w tym samym panelu co przyciski: wcześniej wisiało między panelami na
   ujemnym marginesie, doklejało się do ramki niżej i wyglądało na ucięte. */

.przelacznik-sklepu { display: flex; flex-direction: column; gap: 0; }
.dzialy-sklepu { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dzialy-sklepu .btn { white-space: nowrap; }
.znizka-sklepu { margin-left: auto; }
.opis-dzialu {
  margin: 11px 0 0; padding-top: 10px;
  border-top: 1px solid var(--kreska);
  font-size: 12.5px; line-height: 1.5; color: var(--tekst-cichy);
}
.opis-dzialu:empty { display: none; }

/* Treść działu to osobny pojemnik, więc reguła `.panel + .panel` przez niego
   nie przechodzi i pierwszy panel sklejał się z paskiem działów. Ten sam
   odstęp, co między wszystkimi innymi panelami. */
#sklep-tresc { display: block; margin-top: 14px; }

/* Opis gniazda: pełnoprawne zdanie pod nazwą półki, a nie dopisek wciśnięty
   ujemnym marginesem między nagłówek a karty. */
.wskazowka-gniazda {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--tekst-cichy);
}
.wskazowka-gniazda b { color: var(--tekst); }
.opis-dzialu b { color: var(--tekst); }
/* Złamanie wiersza w opisie działu ma robić odstęp, a nie tylko przejść
   do nowej linii: inaczej dwa zdania dalej czytają się jak jedno. */
.opis-dzialu br { content: ''; display: block; margin-top: 6px; }

/* --- Pasek z ceną w konkursie ofert ---------------------------------------
   Na dużym ekranie zwykły wiersz pod opisem roboty. */
.oferta-pasek { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.oferta-pasek input { max-width: 190px; }
.oferta-pasek .oferta-zegar { display: none; }

/* --- Burek na placu -------------------------------------------------------
   Zdjęcie psa obok opisu, a na telefonie jedno pod drugim. Obrazek jest duży
   celowo: to jedyne miejsce w grze, w którym coś ma pysk. */
.burek { display: flex; gap: 16px; align-items: flex-start; }
.burek > img {
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--kreska);
  object-fit: contain;
  background: var(--olej);
}
.burek-tresc { flex: 1 1 260px; min-width: 0; }
.burek-tresc > p:first-child { font-style: italic; }
.burek-robota { margin: 8px 0 0 18px; color: var(--tekst-cichy); font-size: 13px; }
.burek-robota li { margin-bottom: 3px; }
.burek-tresc .staty { margin-top: 8px; }
.burek-tresc .stopka { margin-top: 10px; }

/* --- Zakładka "Dorzuć się" ---------------------------------------------------
   Delikatne wyróżnienie kolorem zamiast zachęt wyskakujących w trakcie gry.
   Ma dać się zauważyć przy przeglądaniu menu i na tym koniec. */
.nawigacja button[data-sekcja="abonament"] {
  color: #d9b866;
}
.nawigacja button[data-sekcja="abonament"]:hover {
  background: rgba(217, 184, 102, .07);
  color: #f0cf85;
}
.nawigacja button[data-sekcja="abonament"].aktywna {
  background: linear-gradient(90deg, rgba(217, 184, 102, .18), transparent);
  color: #f0cf85;
}
.nawigacja button[data-sekcja="abonament"].aktywna::before { background: #d9b866; }
.nawigacja button[data-sekcja="abonament"].aktywna img { box-shadow: 0 0 14px rgba(217, 184, 102, .3); }

/* --- Podwórko i księga wizyt ---------------------------------------------- */
.ksiega { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.wpis-ksiegi {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 6px 9px;
  border-left: 2px solid var(--kreska);
  font-size: 13px;
}
.wpis-ksiegi.udany { border-left-color: var(--zly, #b4433a); }
.wpis-ksiegi b { font-family: var(--naglowek); font-weight: 500; }

/* ===========================================================================
   Telefony i wąskie ekrany.

   Ten blok musi zostać na końcu arkusza. Reguły responsywne mają tę samą
   siłę co zwykłe reguły komponentów, więc o wyniku decyduje kolejność:
   kiedy nowy komponent dopisywano niżej, po cichu wygrywał z wersją na
   telefon i zmiany dla wąskich ekranów po prostu nie działały.
   =========================================================================== */
@media (max-width: 760px) {
  /* --- Belka: jeden rząd na dane, przewijany w poziomie ------------------- */
  .belka {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 8px 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .belka::-webkit-scrollbar { display: none; }

  /* Panel radia musi uciec z belki.
     Rząd wskaźników przewija się w poziomie, a przeglądarka, gdy przycina
     jedną oś, przycina też drugą. Panel rozwijany w dół był więc ucinany na
     krawędzi belki: gracz klikał w głośnik i panel znikał pod zakładkami.
     Pozycja `fixed` liczy się względem okna, a nie względem belki, więc
     przycinanie go nie dotyczy. */
  .radio-panel {
    position: fixed;
    /* Wysokość belki podaje skrypt przy otwieraniu panelu: na sztywno wpisana
       liczba chowała panel za belką na telefonach, gdzie jest ona wyższa. */
    top: var(--pod-belka, 62px);
    right: 10px;
    left: auto;
    width: min(260px, calc(100vw - 20px));
  }
  .belka .znaczek { width: 28px; }
  .przelacznik-warsztatow button { padding: 5px 7px; font-size: 11px; }
  .belka .szyld { font-size: 15px; white-space: nowrap; }
  .belka .szyld small { display: none; }
  .belka .rozpychacz { display: none; }
  .belka .wskaznik { flex: 0 0 auto; }
  /* Na telefonie czcionka jest mniejsza, a wiersz przy 1.15 był niższy niż
     same litery: ogonki i akcenty wychodziły poza swoje pudełko. */
  /* Konkurs ofert na telefonie.
     Pole z ceną wypadało jakieś sto pikseli pod krawędzią ekranu, bo nad nim
     stoi cały opis roboty i kafelki. Klient czeka siedemdziesiąt pięć sekund,
     więc szukanie przycisku przewijaniem kończyło się przegapionym telefonem.
     Przyklejamy pasek z ceną do dołu ekranu na czas trwania konkursu. */
  .oferta-pasek {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    margin: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    flex-wrap: nowrap;
    background: var(--panel);
    border-top: 2px solid var(--tasma);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
  }
  .oferta-pasek input { max-width: none; flex: 1 1 auto; min-width: 0; }
  .oferta-pasek .btn { flex: 0 0 auto; }
  /* Odliczanie siada na krawędzi paska jak zakładka, zamiast walczyć o miejsce
     w wierszu: przy "1 min 13 s" wypychało przycisk poza ekran. */
  .oferta-pasek .oferta-zegar {
    display: block;
    position: absolute;
    right: 12px; top: 0;
    transform: translateY(-100%);
    padding: 2px 9px;
    background: var(--panel);
    border: 2px solid var(--tasma);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    font-family: var(--naglowek);
    font-size: 12px;
    color: var(--tasma);
    white-space: nowrap;
  }
  /* Miejsce pod paskiem, żeby nie zasłaniał ostatniego panelu. */
  body:has(.oferta-pasek) #scena { padding-bottom: 78px; }

  /* Burek zostaje w wierszu także na telefonie: ustawiony w kolumnę zjadał
     cały pierwszy ekran Hali i przyciski ulepszeń wypadały pod krawędź. */
  .burek { gap: 11px; }
  .burek > img { width: 76px; height: 76px; }
  .burek-tresc > p:first-child { font-size: 12.5px; }
  .burek-tresc .status-rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .burek-robota { font-size: 12px; }

  .belka .wskaznik b { font-size: 14px; line-height: 1.3; }
  .belka .wskaznik span { font-size: 8.5px; letter-spacing: .06em; line-height: 1.4; margin-top: 1px; }
  .pasek-xp { width: 74px; }
  #btn-wyloguj { flex: 0 0 auto; padding: 6px 10px; font-size: 11px; }

  /* --- Nawigacja: pasek ikon pod belką, przewijany kciukiem --------------- */
  .hala {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .nawigacja {
    position: sticky;
    top: 56px;
    z-index: 40;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 2px;
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    background: rgba(14, 16, 20, .96);
    border-bottom: 1px solid var(--kreska);
  }
  .nawigacja::-webkit-scrollbar { display: none; }
  .nawigacja button {
    width: auto;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 3px;
    padding: 6px 9px;
    min-width: 62px;
    border-radius: 8px;
    font-size: 9.5px;
    letter-spacing: .02em;
    text-align: center;
  }
  .nawigacja button img { width: 26px; height: 26px; }
  .nawigacja button::before { display: none; }
  /*
   * Grupy w poziomym pasku: sam napis wpadał między kafle jako pionowy klocek
   * tekstu i wyglądał jak błąd. Zostaje po nim kreska, czyli dokładnie to,
   * czego ten pasek potrzebuje: widać, gdzie kończy się jedna grupa.
   */
  .grupa-nawigacji {
    flex: 0 0 auto; align-self: stretch;
    width: 1px; min-width: 1px; padding: 0; margin: 5px 5px;
    background: var(--kreska);
    overflow: hidden; text-indent: -999em;
  }
  .grupa-nawigacji::after { display: none; }
  .grupa-nawigacji:first-child { display: none; }
  .nawigacja button.gotowe::after {
    position: absolute; top: 4px; right: 6px; margin: 0;
  }
  .nawigacja .znacznik { position: absolute; top: 3px; right: 4px; }

  /* --- Treść ------------------------------------------------------------- */
  .panel { padding: 12px; }

  /* Karty na telefonie.
     W jednej kolumnie karta miała ponad 160 px wysokości, przycisk lądował na
     jej dole i na ekran wchodził dokładnie jeden. Kupowanie czegokolwiek
     zaczynało się od przewijania. Przenosimy przycisk do wiersza z nazwą:
     wszystko inne zajmuje całą szerokość, więc układ nie rozjeżdża się nawet
     przy kartach z dodatkowymi wierszami. */
  .karty { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .karta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 10px;
    padding: 11px 12px;
  }
  .karta > * { grid-column: 1 / -1; }
  .karta > h3 { grid-column: 1; grid-row: 1; font-size: 15px; }
  /* Zdjęcie idzie pod nagłówek, a nie w jego wiersz.
     W kodzie miniatura stoi przed nazwą, więc siatka wstawiała ją w pierwszy
     wiersz i tytuł z guzikiem lądowały na niej. Na komisie, gdzie każda karta
     ma zdjęcie auta, wyglądało to jak rozsypana strona. */
  .karta > .miniatura { grid-column: 1 / -1; grid-row: 2; }
  /* Stopka domyślnie bierze własny wiersz pod tytułem.
     Kiedyś było odwrotnie: stopka siadała obok tytułu, a osobny wiersz dostawała
     dopiero wtedy, gdy `:has()` wykrył w niej więcej niż jedną rzecz. Telefony
     bez obsługi `:has()` (starszy Samsung Internet, starszy Firefox) tej reguły
     nie widziały wcale, więc prawa kolumna zabierała całą szerokość, a nazwa
     auta w Komisie łamała się po jednej literze, pionowo przez pół ekranu.
     Teraz bezpieczny układ jest domyślny i nie zależy od niczego, a kompaktowy
     wchodzi tylko tam, gdzie przeglądarka umie sprawdzić, że w stopce stoi sam
     guzik. Kto tego nie umie, dostaje układ nieco wyższy, ale zawsze czytelny. */
  .karta > .stopka {
    grid-column: 1 / -1;
    grid-row: auto;
    margin: 0; padding: 0; border: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .karta > .stopka:not(:has(> :nth-child(2))) {
    grid-column: 2; grid-row: 1;
    justify-content: flex-end;
  }

  /* Podpis w rodzaju "Zatrudniam za 14 000 zł" nie mieści się w jednej linii
     obok nazwy, a z zakazem łamania wychodził poza guzik. Tutaj wolno mu się
     zawinąć: guzik rośnie w dół zamiast wylewać się na kartę. */
  .karta > .stopka .btn { white-space: normal; text-align: center; line-height: 1.2; }
  .karta > .opis { font-size: 12px; line-height: 1.4; }
  .karta:hover { transform: none; }
  /* Kafelki ze statystykami: dwa w rzędzie, jeśli się mieszczą.
     Jedna kolumna robiła z czterech kafli komisu cały ekran do przewinięcia,
     a w każdym z nich stała jedna liczba i pół linijki podpisu. */
  .status-rzad { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .tablica { grid-template-columns: minmax(0, 1fr); }

  /* Podnośnik bez sceny z autem: na tej szerokości i tak by się nie zmieścił. */
  .podnosnik { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'tresc'; }
  .podnosnik h2 { font-size: 18px; }
  .podnosnik .dane { gap: 12px; }
  .podnosnik .dane b { font-size: 14px; }

  /* Tabele szersze niż ekran przewijają się same, zamiast rozpychać stronę. */
  .tabela { display: block; overflow-x: auto; white-space: nowrap; }

  /* Wiersz części: ilość i nazwa w jednej linii, cena obok, przyciski pod
     spodem na całą szerokość. Obszary muszą iść razem z liczbą kolumn,
     inaczej kafelek z ilością wypada z układu. */
  .czesc {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ilosc nazwa cena" "przyciski przyciski przyciski";
    gap: 8px 10px;
  }
  .czesc .przyciski { justify-content: flex-start; }

  .opylanie { gap: 7px 9px; padding: 9px 10px; }
  .opylanie > span:nth-of-type(1),
  .opylanie .powod { flex-basis: 100%; }
  .opylanie > .cichy:last-of-type { margin-left: 0; flex-basis: auto; }
  .opylanie .btn { flex: 1 1 auto; }

  .dowozka { gap: 7px; }
  .dowozka .cichy { flex-basis: 100%; }
  .dowozka .przelacznik { margin-left: auto; }

  /* --- Palec zamiast kursora --------------------------------------------- */
  .btn { min-height: 38px; padding: 9px 14px; }
  .btn.maly { min-height: 38px; min-width: 38px; padding: 7px 12px; }
  /* Systemowy kwadracik ma kilkanaście pikseli i palcem się w niego nie trafia.
     Selektor musi być dość mocny, żeby pobić `.dowozka .przelacznik input`. */
  input[type="checkbox"],
  .dowozka .przelacznik input[type="checkbox"] {
    width: 22px; height: 22px; min-height: 22px; flex: 0 0 auto;
  }
  input, select, textarea { min-height: 38px; font-size: 16px; }  /* 16px: iOS inaczej przybliża stronę */
  .ile-recznie { min-width: 62px; }

  /* Dymek na telefonie: pokazywany po stuknięciu i ustawiany pod wskaźnikiem,
     a nie pod palcem, bo palec by go zasłonił. Kiedyś był tu po prostu
     wyłączony i przez to gracz z komórki nie miał skąd się dowiedzieć, co
     znaczy klasa warsztatu ani gdzie jej szukać. */
  #dymek { max-width: min(320px, calc(100vw - 20px)); font-size: 13px; padding: 10px 12px; }

  /* Powiadomienia nie mogą zakrywać nawigacji. */
  #powiadomienia { left: 10px; right: 10px; bottom: 10px; }
  #powiadomienia .toast { max-width: none; }
}

/* Bardzo wąskie telefony: jeszcze ciaśniej. */
@media (max-width: 380px) {
  .nawigacja button { min-width: 56px; font-size: 9px; }
  .nawigacja button img { width: 23px; height: 23px; }
  .belka .szyld { font-size: 13px; }
}

/* Przycisk, który ma wyglądać jak odnośnik: używany tam, gdzie akcja jest
   drugorzędna i nie ma konkurować z głównym guzikiem, jak „nie pamiętam hasła”
   pod formularzem logowania. */
.btn-tekst {
  background: none; border: 0; padding: 0;
  color: var(--tekst-cichy); font: inherit; font-size: 13px;
  text-decoration: underline; cursor: pointer;
}
.btn-tekst:hover { color: var(--tasma); }

/* Szyld na belce otwiera profil, więc ma o tym mówić kursorem. */
.szyld.klikalny { cursor: pointer; }
.szyld.klikalny:hover { color: var(--tasma); }

/* --- Boks: budowa kaszlaka wyścigowego ------------------------------------
   Cała zabawa dzieje się na jednym zdjęciu auta: gniazda leżą na nim w
   procentach, więc scena skaluje się razem z obrazkiem i nie trzeba niczego
   przeliczać w JS. Na wąskim ekranie scena ma swoje minimum i przewija się
   w bok, bo śruby muszą zostać na tyle duże, żeby dało się je trzymać palcem. */

.boks-zapowiedz {
  display: block; width: 100%; border-radius: var(--radius);
  border: 1px solid var(--kreska);
}

/* Przed pierwszym montażem pełne zdjęcie jest tylko planem tego, co ma
   powstać. Przygaszenie zapobiega wrażeniu, że zakup boksu już dał auto. */
.boks-buda { filter: grayscale(1) opacity(.3); }
.boks-budowa-opis { flex: 1 1 260px; }
.boks-budowa-opis p { margin-top: 7px; }
.boks-budowa-koszt { margin: 14px 0 10px; }

.boks-scena:has(.boks-gniazdo[data-gniazdo^="auto-"]) .boks-auto {
  filter: grayscale(.75) opacity(.48) drop-shadow(0 10px 14px rgba(0, 0, 0, .6));
}

.boks-podglad { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.boks-auto-maly {
  flex: 1 1 260px; min-width: 220px; max-width: 420px;
  border-radius: var(--radius); border: 1px solid var(--kreska);
}

.boks-cechy { flex: 1 1 260px; display: flex; flex-direction: column; gap: 7px; }
.boks-cecha { display: grid; grid-template-columns: 108px 1fr 74px; align-items: center; gap: 9px; font-size: 12.5px; }
.boks-cecha-nazwa { color: var(--tekst-cichy); }
.boks-cecha-zysk { text-align: right; color: var(--tasma); font-family: var(--naglowek); }

.boks-pasek {
  position: relative; display: block; height: 7px;
  background: var(--panel-3); border-radius: 4px; overflow: hidden;
}
.boks-pasek i, .boks-pasek b { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; }
.boks-pasek b { background: var(--tasma); opacity: .85; }
.boks-pasek i { background: var(--kreska-jasna); z-index: 2; }
.boks-pasek.duzy { height: 10px; }

.boks-moduly {
  display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.boks-modul {
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px 13px; background: var(--panel); border: 1px solid var(--kreska);
  border-radius: var(--radius);
}
.boks-modul-glowa { display: flex; align-items: center; gap: 8px; }
.boks-modul-glowa b { font-family: var(--naglowek); font-size: 15.5px; letter-spacing: .02em; }
.boks-poziom {
  margin-left: auto; padding: 2px 6px; border: 1px solid var(--kreska);
  border-radius: 4px; background: var(--panel-2); color: var(--tekst-cichy);
  font-size: 11px; white-space: nowrap;
}
.boks-modul-stan { font-size: 13px; }
.boks-modul-kondycja { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.boks-modul-opis { font-size: 12px; }
.boks-nastepny { font-size: 12px; color: var(--tasma-ciemna); }

.boks-zuzycie { margin-left: auto; width: 54px; height: 5px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.boks-zuzycie i { display: block; height: 100%; background: var(--zielony); }
.boks-zuzycie.ostro i { background: var(--czerwony); }
.boks-zuzycie-liczba { font-size: 11px; min-width: 30px; text-align: right; }

.boks-koszt { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; }
.boks-czesc-znacznik {
  padding: 1px 6px; border: 1px solid var(--kreska); border-radius: 4px;
  background: var(--panel-2); font-size: 11.5px; color: var(--tekst-cichy);
}
.boks-czesc-znacznik.brak { border-color: var(--czerwony); color: var(--czerwony); }

/* --- Scena montażu ------------------------------------------------------- */

.boks-postep { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.boks-postep .boks-pasek { flex: 1; }
.boks-postep-liczba { font-family: var(--naglowek); font-size: 13px; color: var(--tasma); }

/* Scena montażu: kawałek betonu, na nim ten sam kaszlak, którym jeździ się
   na torze. Zapas dookoła jest po to, żeby śruby przy kołach miały gdzie
   wyjść poza obrys auta i nie obcinała ich krawędź panelu. */
.boks-scena {
  position: relative;
  display: flex; justify-content: center;
  padding: 52px 40px;
  border: 1px solid var(--kreska); border-radius: var(--radius);
  background: var(--olej) url('/img/tlo-beton.jpg') center / cover;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .85);
  touch-action: none; user-select: none;
}
.boks-warstwa { position: relative; width: 100%; max-width: 700px; }
.boks-warstwa .boks-auto {
  display: block; width: 100%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6));
}

@media (max-width: 720px) {
  /* Mniej marginesu, bo na telefonie każdy piksel szerokości auta się liczy. */
  .boks-scena { padding: 34px 12px; }

  /*
   * Osiem podpisów naraz zasłania całe auto.
   *
   * Na dużym ekranie mieszczą się obok siebie i pomagają zorientować się, co
   * gdzie idzie. Na telefonie zlewały się w jedną plamę nad maską. Zostaje
   * więc tylko ten jeden, który jest w tej chwili potrzebny: podpis miejsca
   * pasującego do części trzymanej w ręce. Reszty i tak nie da się przeczytać,
   * a krok nad sceną mówi wprost, czego szukać.
   */
  .boks-gniazdo-nazwa { display: none; }
  .boks-gniazdo.czeka .boks-gniazdo-nazwa { display: block; }
}

.boks-gniazdo {
  position: absolute; width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
}
.boks-gniazdo-oko {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px dashed rgba(240, 180, 41, .95);
  background: radial-gradient(circle, rgba(240, 180, 41, .3), rgba(240, 180, 41, .06) 70%);
  box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 0 16px rgba(240, 180, 41, .35);
  animation: boks-puls 1.8s ease-in-out infinite;
}
.boks-gniazdo.wstawiona .boks-gniazdo-oko {
  width: 22px; height: 22px;
  border-style: solid; border-color: rgba(93, 220, 147, .55);
  background: rgba(93, 220, 147, .16); box-shadow: none; animation: none;
}
/* Część wpadająca na swoje miejsce: krótkie, mocne dosiadanie. */
.boks-gniazdo.swieza .boks-gniazdo-oko { animation: boks-wpada .45s ease-out; }
@keyframes boks-wpada {
  0% { transform: scale(2.4); opacity: 0 }
  55% { transform: scale(.82); opacity: 1 }
  100% { transform: scale(1) }
}
.boks-gniazdo.skonczone .boks-gniazdo-oko { opacity: .35; }
.boks-gniazdo.czeka .boks-gniazdo-oko { animation-duration: .55s; }
.boks-gniazdo.celowane .boks-gniazdo-oko {
  border-color: #fff; background: rgba(255,255,255,.25); transform: scale(1.25);
}
.boks-gniazdo.nietam .boks-gniazdo-oko { border-color: var(--czerwony); animation: boks-tryk .4s; }

@keyframes boks-puls { 0%, 100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.18); opacity: 1 } }
@keyframes boks-tryk { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }

.boks-gniazdo { z-index: 1; }
/* Stanowisko, przy którym trwa robota, jest nad wszystkim innym na aucie:
   sąsiednie oczka i podpisy potrafiły przykryć śruby akurat tam, gdzie gracz
   próbuje w nie trafić. */
.boks-gniazdo.czynne { z-index: 8; }
/* Przy stanowisku, na którym trwa robota, podpis znika: leżał dokładnie na
   śrubach i na komputerze je zasłaniał, a na telefonie przechwytywał
   dotknięcia, przez co w ogóle nie dało się w nie trafić. */
.boks-gniazdo.czynne .boks-gniazdo-nazwa { display: none; }

/* Sąsiednie podpisy na czas roboty gasną prawie do zera.
   Auto jest małe, punkty leżą blisko siebie i te dymki tłoczyły się dokładnie
   tam, gdzie trwa robota. Nie znikają całkiem, bo gracz musi wiedzieć, co go
   jeszcze czeka, ale przestają walczyć o uwagę z tym, co robi teraz. */
.boks-scena.w-robocie .boks-gniazdo:not(.czynne) .boks-gniazdo-nazwa {
  opacity: .22;
  transition: opacity .2s;
}
.boks-scena.w-robocie .boks-gniazdo:not(.czynne) .boks-gniazdo-oko { opacity: .5; }
/* Puste stanowisko jest nad wszystkim: to w nie gracz ma jeszcze trafić, a na
   małym ekranie śruby sąsiada potrafiły je przykryć i dotknięcie szło w nie. */
.boks-gniazdo:not(.wstawiona) { z-index: 5; }
/*
 * W trakcie roboty pod spód schodzą tylko te miejsca, w których część już
 * siedzi: to one nachodziły na śruby. Puste zostają klikalne, bo trzeba w nie
 * jeszcze włożyć części. Wyłączenie ich wszystkich zablokowało całą budowę po
 * pierwszej włożonej części.
 */
.boks-scena.w-robocie .boks-gniazdo.wstawiona:not(.czynne) {
  z-index: 1; pointer-events: none;
}

.boks-gniazdo-nazwa {
  position: absolute; top: -26px; z-index: 0; left: 50%; transform: translateX(-50%);
  padding: 1px 6px; white-space: nowrap;
  background: rgba(10, 12, 14, .82); border: 1px solid var(--kreska);
  border-radius: 4px; font-size: 10px; color: var(--tekst);
  pointer-events: none;
}

/* Śruba: sześciokątny łeb, wokół niego pierścień postępu dokręcania.
   Pierścień jest osobnym elementem pod łbem, żeby dało się kręcić samym łbem
   i jednocześnie napełniać obwódkę. */
.boks-sruba {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(var(--tasma) var(--postep, 0deg), rgba(8, 10, 13, .78) 0);
  border: 1px solid rgba(0, 0, 0, .85);
  box-shadow: 0 2px 6px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) inset;
  cursor: pointer; touch-action: none;
}
.boks-sruba::after {
  content: ''; position: absolute; inset: 5px;
  background: linear-gradient(150deg, #aab3c1 8%, #79828f 42%, #454c57 78%, #2b3038);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  transform: rotate(var(--obrot, 0deg));
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
/* Nacięcie na łbie: bez niego obrót przy kręceniu jest niewidoczny. */
.boks-sruba::before {
  content: ''; position: absolute; inset: 10px 8px; z-index: 2;
  background: rgba(20, 24, 30, .75);
  clip-path: polygon(0 42%, 100% 42%, 100% 58%, 0 58%);
  transform: rotate(var(--obrot, 0deg));
  pointer-events: none;
}
.boks-sruba.kreci { box-shadow: 0 0 0 4px rgba(240,180,41,.22), 0 3px 8px rgba(0,0,0,.7); }
.boks-sruba.gotowa {
  background: rgba(93, 220, 147, .5);
  cursor: default;
}
.boks-sruba.gotowa::after { background: linear-gradient(150deg, #7f8f80, #4a5a4c 55%, #2b352d); }
.boks-sruba.puszczona { animation: boks-tryk-sruba .4s; }

/* Trzęsienie śruby musi zachować jej własne przesunięcie, inaczej odskakuje
   na środek gniazda. */
@keyframes boks-tryk-sruba {
  0%, 100% { transform: translate(-50%, -50%) }
  25% { transform: translate(-50%, -50%) translateX(-4px) }
  75% { transform: translate(-50%, -50%) translateX(4px) }
}

/* Instrukcja, która zmienia się razem z robotą. Jeden krok naraz, bo dwa
   naraz to jest to samo co żaden. */
.boks-krok {
  display: flex; gap: 11px; align-items: flex-start;
  margin-bottom: 10px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(240, 180, 41, .12), rgba(240, 180, 41, .04));
  border: 1px solid var(--tasma-ciemna); border-left-width: 3px;
  border-radius: var(--radius);
  font-size: 13px;
}
.boks-krok b { font-weight: 600; }
.boks-krok .cichy { font-size: 12.5px; margin-top: 2px; }
.boks-krok-numer {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--tasma); color: var(--olej);
  font-family: var(--naglowek); font-size: 16px;
}

/* Dymek przy pierwszej śrubie: znika, gdy tylko gracz dokręci pierwszą. */
.boks-dymek {
  position: absolute; left: 50%; top: -62px; transform: translateX(-50%);
  padding: 3px 9px; white-space: nowrap;
  background: var(--tasma); color: var(--olej);
  border-radius: 4px; font-family: var(--naglowek); font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  animation: boks-dymek-skok 1.4s ease-in-out infinite;
  pointer-events: none;
}
.boks-dymek::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--tasma); border-bottom: 0;
}
@keyframes boks-dymek-skok {
  0%, 100% { transform: translateX(-50%) translateY(0) }
  50% { transform: translateX(-50%) translateY(-5px) }
}

/* --- Podłoga z częściami ------------------------------------------------- */

.boks-instrukcja { margin: 9px 0; font-size: 12.5px; }

.boks-stol {
  display: flex; gap: 9px; flex-wrap: wrap; padding: 11px;
  background: var(--panel-2); border: 1px solid var(--kreska);
  border-radius: var(--radius);
  background-image: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18));
}
.boks-stol-pusty { font-size: 12.5px; }

.boks-lezy {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 128px; padding: 8px 11px;
  background: var(--panel); border: 1px solid var(--kreska-jasna);
  border-bottom-width: 3px; border-radius: var(--radius);
  cursor: grab; touch-action: none; user-select: none;
  transition: transform .12s, box-shadow .12s;
}
.boks-lezy:hover { transform: translateY(-2px); box-shadow: var(--cien-maly); }
.boks-lezy.niesiona { opacity: .3; }
/* Część, która siedzi już w aucie: zostaje na stole, żeby lista nie skakała,
   ale nie udaje, że da się ją jeszcze wziąć. */
.boks-lezy.wlozona {
  opacity: .42; cursor: default; border-bottom-color: var(--kreska);
}
.boks-lezy.wlozona:hover { transform: none; box-shadow: none; }
.boks-lezy.wlozona .boks-lezy-ile { color: var(--tekst-cichy); }
.boks-lezy.wlozona .boks-lezy-chwyt { color: var(--zielony); }
.boks-lezy.wlozona .boks-lezy-chwyt::before { content: '✓ '; }
/* Część wzięta do ręki: zostaje na stole, ale widać, że czeka na wskazanie miejsca. */
.boks-lezy.wrece {
  border-color: var(--tasma); border-bottom-color: var(--tasma);
  box-shadow: 0 0 0 1px var(--tasma-ciemna), 0 0 18px rgba(240, 180, 41, .25);
  transform: translateY(-2px);
}
.boks-lezy.wrece .boks-lezy-chwyt::before { content: '✋ '; }
.boks-lezy.wrece .boks-lezy-chwyt { color: var(--tasma); }
.boks-lezy-ile { font-family: var(--naglowek); font-size: 15px; color: var(--tasma); }
.boks-lezy-nazwa { font-size: 12.5px; }
.boks-lezy-gdzie { font-size: 11px; }
.boks-lezy-chwyt {
  margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed var(--kreska);
  font-family: var(--naglowek); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tasma);
}
.boks-lezy-chwyt::before { content: '⇧ '; }

/* Kopia części lecąca za kursorem. */
.boks-duch {
  position: fixed; z-index: 90; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-3deg);
  box-shadow: 0 12px 26px rgba(0,0,0,.6);
  opacity: .95;
}

.wyscig-przelacznik { display: flex; gap: 8px; margin-bottom: 10px; }
.wyscig-przelacznik .btn { flex: 1; }

/* --- Sekcje Brygady -------------------------------------------------------
   Cztery sprawy pod jednym dachem: skład, robota, ustawka i brygadzista.
   Zakładki, a nie rząd grubych guzików: rząd guzików wyglądał jak coś doklejonego
   między panelami, a tak sekcje siedzą w nagłówku, tak samo jak w kanciapie. */

.zakladki-brygady, .podzakladki {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin: 10px -2px -12px; padding: 0 2px;
  border-bottom: 1px solid var(--kreska);
}
.zakladki-brygady button, .podzakladki button {
  background: none; border: none; cursor: pointer;
  padding: 4px 2px 9px; margin-bottom: -1px;
  font: inherit; font-size: 13px; color: var(--tekst-cichy);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid transparent;
}
.zakladki-brygady button:hover, .podzakladki button:hover { color: var(--tekst); }
.zakladki-brygady button.aktywna, .podzakladki button.aktywna { color: var(--tasma); border-bottom-color: var(--tasma); }
/* Dział, w którym coś się właśnie dzieje: ekipa jedzie na wyprawę, stoisz
   na liście do ustawki, kłódka czeka na twoją próbę, trwają wybory. Kropka
   zamiast koloru samej nazwy, żeby nie myliła się z zakładką otwartą teraz. */
.zakladki-brygady button.dzieje-sie { color: var(--tekst); }
.zakladki-brygady button.dzieje-sie::after {
  content: ''; display: inline-block; margin-left: 6px; vertical-align: middle;
  width: 6px; height: 6px; border-radius: 50%; background: var(--tasma);
  animation: pulsKropki 1.6s ease-in-out infinite;
}
@keyframes pulsKropki { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Treść sekcji to osobny pojemnik, więc reguła `.panel + .panel` przez niego
   nie przechodzi i pierwszy panel sekcji sklejał się z nagłówkiem zakładki.
   Odstęp musi być ten sam, co między wszystkimi innymi panelami. */
#brygada-tresc { margin-top: 14px; }

/* Cztery cechy z siłowni to jeden rząd, a nie trzy plus jedna sierota w drugim.
   Na wąskim ekranie schodzą do dwóch kolumn, bo cztery by się nie zmieściły. */
.status-rzad.cztery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .status-rzad.cztery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Paski postępu przy projekcie brygady: dwa obok siebie, każdy podpisany,
   bo dwa gołe paski jeden nad drugim nie mówią nic o tym, co mierzą. */
.pasek-podpisany { margin-top: 10px; }
.pasek-podpisany .podpis {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--tekst-cichy); margin-bottom: 3px;
}
.pasek-podpisany .podpis b { color: var(--tekst); font-size: 13px; }

/* Numerowanie długich list: skład brygady potrafi mieć setkę nazwisk. */
.strony {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--kreska);
}
.strony .cichy { margin: 0 auto; }

/* --- Rajd i obstawianie ---------------------------------------------------
   Dwie zakładki dzielą planszę toru, więc różnią się tylko tym, co jest wokół
   niej: zegarem i listą startową albo kursami. */

.rajd-zegar {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 9px 12px;
  background: var(--panel-2); border: 1px solid var(--kreska);
  border-left: 3px solid var(--tasma); border-radius: var(--radius);
}
.rajd-zegar b { font-family: var(--naglowek); font-size: 22px; color: var(--tasma); }

.rajd-pula { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.rajd-pula > div { display: flex; flex-direction: column; }
.rajd-pula b { font-family: var(--naglowek); font-size: 17px; }
.rajd-pula .cichy { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }

.rajd-nagrody { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 10px; }
.rajd-nagrody > div { display: flex; flex-direction: column; }
.rajd-nagrody b { font-family: var(--naglowek); color: var(--tasma); }
.rajd-nagrody .cichy { font-size: 11.5px; }

.rajd-lista { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }
.rajd-wpis {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 9px; background: var(--panel-2); border-radius: 6px; font-size: 13px;
}
.rajd-numer { min-width: 20px; color: var(--tasma); font-family: var(--naglowek); }
.rajd-kto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rajd-ekipa {
  padding: 1px 7px; border: 1px solid var(--kreska-jasna); border-radius: 4px;
  font-size: 11px; color: var(--tekst-cichy);
}

.rajd-guziki { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.rajd-checkbox { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.rajd-checkbox input { width: 16px; height: 16px; accent-color: var(--tasma); cursor: pointer; }

/* Podgląd ma te same proporcje co jazda. Ograniczenie samej wysokości ściskało
   płótno w pionie i zmieniało okrągłe koła w elipsy. */
.wyscig-plansza.podglad canvas { max-width: 100%; }

.obstaw-siatka {
  display: grid; gap: 9px; margin: 10px 0;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.obstaw-kierowca {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--kreska);
  border-radius: var(--radius);
  transition: border-color .15s, transform .12s;
}
.obstaw-kierowca:hover { transform: translateY(-2px); border-color: var(--kreska-jasna); }
.obstaw-kierowca.wybrany { border-color: var(--tasma); box-shadow: 0 0 0 1px var(--tasma-ciemna); }
.obstaw-kierowca.moj { background: linear-gradient(180deg, rgba(240,180,41,.1), transparent); }
.obstaw-glowa { display: flex; align-items: baseline; gap: 8px; }
.obstaw-glowa b { font-family: var(--naglowek); font-size: 15px; }
.obstaw-kurs { margin-left: auto; font-family: var(--naglowek); font-size: 17px; color: var(--tasma); }
.obstaw-auto { font-size: 12px; }
.obstaw-opis { font-size: 12px; margin: 3px 0 5px; }
.obstaw-stopka { display: flex; gap: 8px; font-size: 11.5px; }
.obstaw-stopka span:last-child { margin-left: auto; }
.obstaw-moj {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--kreska);
  font-family: var(--naglowek); font-size: 12.5px; color: var(--tasma);
}

.obstaw-formularz { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.obstaw-formularz input {
  width: 130px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--kreska); border-radius: var(--radius);
  color: var(--tekst); font-family: var(--tresc); font-size: 14px;
}
.obstaw-podsumowanie {
  padding: 9px 12px; background: var(--panel-2);
  border: 1px solid var(--tasma-ciemna); border-radius: var(--radius); font-size: 13px;
}

/* Przycisk kręcenia w pojedynku. Ma być duży i dobrze widoczny: to jest ten
   moment, w którym gracz wali w niego przez dwadzieścia sekund. */
.duel-kreciolek {
  display: block; width: min(320px, 100%); margin: 10px auto 0;
  padding: 18px 0; font-size: 20px; letter-spacing: .06em;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.duel-kreciolek:active { transform: translateY(2px); }
.duel-kreciolek .klawisz { vertical-align: middle; }

/* Przełącznik kamery w podglądzie wyścigu.
   Siedzi w rogu planszy, bo zmiana auta w trakcie wyścigu nie może wymagać
   przewijania strony: zanim gracz doscrollowałby do tabeli, byłoby po akcji. */
.wyscig-kamery {
  position: absolute; top: 58px; right: 12px; z-index: 3;
  display: flex; flex-direction: column; gap: 2px;
  max-width: min(230px, 46%); padding: 7px 8px;
  background: rgba(12, 14, 16, .78);
  border: 1px solid var(--kreska); border-radius: var(--radius);
  font-size: 12px;
}
.wyscig-kamery-tytul {
  margin-bottom: 3px; display: flex; align-items: center; gap: 8px;
  font-family: var(--naglowek); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-cichy);
}
.wyscig-kamery-tytul span { flex: 1; }
.wyscig-kamery [data-kamery-zwin] {
  display: none; width: 32px; height: 32px; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--kreska); border-radius: 5px;
  background: var(--panel-2); color: var(--tekst); font-size: 20px; line-height: 1;
}
.wyscig-kamery [data-kierowca] {
  display: flex; align-items: baseline; gap: 7px;
  padding: 3px 6px; border-radius: 5px; cursor: pointer;
  transition: background .12s;
}
.wyscig-kamery [data-kierowca]:hover { background: var(--panel-2); }
.wyscig-kamery [data-kierowca].sledzony {
  background: var(--panel-3); box-shadow: inset 3px 0 0 var(--tasma);
}
.wyscig-kamery .miejsce { min-width: 18px; color: var(--tasma); font-family: var(--naglowek); }
.wyscig-kamery .kto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wyscig-kamery .cichy { font-size: 11px; }

@media (max-width: 600px) {
  .wyscig-kamery { top: 52px; right: 6px; padding: 5px 6px; font-size: 11px; max-width: 52%; }
  .wyscig-kamery [data-kamery-zwin] { display: inline-flex; }
  .wyscig-kamery.zwiniete [data-kierowca] { display: none; }
  .wyscig-kamery.zwiniete { width: auto; min-width: 92px; }
  .wyscig-kamery.zwiniete .wyscig-kamery-tytul { margin-bottom: 0; }
}

.wyscig-widzowie {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--kreska); border-radius: var(--radius);
  background: var(--panel-2); font-size: 12px; color: var(--tekst-cichy);
}
.wyscig-widzowie b { color: var(--tekst); font-family: var(--naglowek); font-size: 12px; }

/* Wyciszenie muzyki na torze. Mały, w rogu planszy, żeby nie zabierał miejsca
   temu, co się dzieje na jezdni, ale żeby dało się go trafić palcem. */
/* Wyciszanie siedzi w prawym górnym rogu, bo dół planszy zajmuje gałka
   i przyciski, a lewy górny róg licznik prędkości. */
.wyscig-glosniki {
  position: absolute; right: 12px; top: 12px; z-index: 6;
  display: flex; gap: 6px;
}
.wyscig-glosnik {
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 14, 16, .78); color: var(--tekst);
  border: 1px solid var(--kreska); border-radius: 50%;
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: border-color .15s, opacity .15s;
}
.wyscig-glosnik:hover { border-color: var(--tasma); }
.wyscig-glosnik.cisza { opacity: .45; }
/* Wyciszony przycisk dostaje przekreślenie, żeby dało się to poznać jednym
   spojrzeniem, a nie po samym przygaszeniu. */
.wyscig-glosnik.cisza::after {
  content: ''; position: absolute; left: 6px; right: 6px; top: 50%;
  height: 2px; background: var(--czerwony); transform: rotate(-38deg);
  border-radius: 2px;
}
.wyscig-glosnik { position: relative; }

/* Przypomnienie o flocie na telefonie.
   Wąski pasek nad paskiem nawigacji, tylko dla tych, którzy jeszcze nie są
   podłączeni. Na komputerze niepotrzebny: tam zakładka Flota miga w bocznym
   menu i widać ją z każdego miejsca w grze. */
.flota-pasek {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 60;
  display: none; align-items: stretch; gap: 0;
  background: linear-gradient(180deg, rgba(240, 180, 41, .18), rgba(20, 22, 26, .96));
  border: 1px solid var(--tasma-ciemna); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.flota-pasek-tresc {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; background: none; border: none;
  color: var(--tekst); font: inherit; font-size: 13px; text-align: left;
  cursor: pointer;
}
.flota-pasek-tresc img { flex: none; }
.flota-pasek-tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flota-pasek-tresc::after {
  content: 'Zobacz'; flex: none;
  font-family: var(--naglowek); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tasma);
}
.flota-pasek-zamknij {
  flex: none; width: 40px; padding: 0;
  background: none; border: none; border-left: 1px solid var(--kreska);
  color: var(--tekst-cichy); font-size: 20px; line-height: 1; cursor: pointer;
}
.flota-pasek-zamknij:hover { color: var(--tekst); }

@media (max-width: 760px) { .flota-pasek { display: flex; } }

/* W aplikacji dolne menu ma własną, stałą warstwę. Paski muszą kończyć się
   nad nim, inaczej menu przechwytuje dotknięcie widocznego krzyżyka. */
html.aplikacja-natywna .flota-pasek {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 72;
}
html.aplikacja-natywna .flota-pasek-zamknij {
  width: 52px;
  min-width: 52px;
  min-height: 52px;
  touch-action: manipulation;
}

/* Rajd ma własny pasek, ale ten sam kształt co flota: to jest ta sama sprawa,
   czyli „dzieje się coś, na co możesz zdążyć". Dwa naraz układają się jeden
   nad drugim, zamiast się przykrywać. */
.rajd-pasek { bottom: 66px; }
.rajd-pasek .flota-pasek-tresc::after { content: 'Wchodzę'; }
html.aplikacja-natywna .rajd-pasek {
  bottom: calc(130px + env(safe-area-inset-bottom, 0px));
}
html.aplikacja-natywna.mobile-menu-otwarte .flota-pasek,
html.aplikacja-natywna.mobile-czat-otwarty .flota-pasek {
  visibility: hidden;
  pointer-events: none;
}


/* --- Minigry w boksie -----------------------------------------------------
   Każda część ma swoją robotę zamiast wszędzie tych samych śrub. Wszystko na
   stuknięcia: trzymanie palca przeglądarka na telefonie bierze za zaznaczanie
   tekstu i zamiast dokręcania wychodziło z tego podświetlanie napisów. */

/* Pasek roboty pod autem: miarka, obejma czy rolki nie mieszczą się przy
   samym stanowisku i zasłaniały sąsiednie punkty razem z ich podpisami. */
.boks-robota {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 12;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 12px;
  background: rgba(10, 12, 15, .92);
  border: 1px solid var(--tasma-ciemna); border-radius: var(--radius);
}
.boks-robota-gdzie {
  font-family: var(--naglowek); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tasma);
}
.boks-robota-podpowiedz { font-size: 11.5px; color: var(--tekst-cichy); }
@media (max-width: 720px) {
  .boks-robota { flex-wrap: wrap; gap: 8px; }
  .boks-robota-podpowiedz { width: 100%; text-align: center; font-size: 11px; }
}
.boks-gra {
  display: flex; align-items: center; gap: 10px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  white-space: nowrap;
}

.boks-gra-guzik {
  padding: 9px 14px; min-width: 74px; min-height: 44px;
  background: var(--tasma); color: var(--olej);
  border: none; border-radius: var(--radius);
  font-family: var(--naglowek); font-size: 13px; letter-spacing: .04em;
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.boks-gra-guzik:active { transform: translateY(1px); }

/* Olej: miarka z polem między min a maks. */
.boks-miarka {
  position: relative; width: 34px; height: 74px;
  background: var(--panel-3); border: 1px solid var(--kreska); border-radius: 5px;
  overflow: hidden;
}
.boks-miarka-pole {
  position: absolute; left: 0; right: 0; bottom: 62%; height: 20%;
  background: rgba(93, 220, 147, .18);
  border-top: 1px dashed var(--zielony); border-bottom: 1px dashed var(--zielony);
}
.boks-miarka-poziom {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #6b5a1e, #3a3210);
  transition: height .08s linear;
}
.boks-miarka-poziom.dobrze { background: linear-gradient(180deg, #7ad3a0, #2f6b4b); }
.boks-miarka-poziom.przelane { background: linear-gradient(180deg, #d36b6b, #6b2f2f); }
.boks-miarka-opis {
  position: absolute; right: 2px; font-size: 8px; color: var(--tekst-cichy);
  letter-spacing: .02em;
}
.boks-miarka-opis.min { bottom: 60%; }
.boks-miarka-opis.maks { bottom: 80%; }

/* Opaska: pierścień, który zaciska się przy stukaniu i luzuje sam. */
.boks-obejma {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  border: 3px solid var(--kreska-jasna);
  background: conic-gradient(var(--tasma) var(--zacisk, 0%), rgba(0,0,0,0) 0);
}
.boks-obejma-zacisk {
  position: absolute; left: 50%; top: -6px; width: 8px; height: 14px;
  margin-left: -4px; border-radius: 2px; background: var(--tasma);
  transform-origin: 50% 35px;
}

/* Pasek: rolki w kolejności zakładania. */
.boks-rolki { display: flex; gap: 6px; }
.boks-rolka {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 56px; padding: 7px 4px;
  background: var(--panel-2); color: var(--tekst);
  border: 1px solid var(--kreska); border-radius: var(--radius);
  font: inherit; font-size: 10px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.boks-rolka-numer {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--panel-3); color: var(--tekst-cichy);
  font-family: var(--naglowek); font-size: 12px; line-height: 20px;
}
.boks-rolka.zalozona { border-color: var(--zielony); }
.boks-rolka.zalozona .boks-rolka-numer { background: var(--zielony); color: var(--olej); }

/* Zawieszenie: oko chodzi w bok, drążek stoi na środku. */
.boks-tor-oka {
  position: relative; width: 120px; height: 46px;
  background: var(--panel-3); border: 1px solid var(--kreska); border-radius: 6px;
  overflow: hidden;
}
.boks-tor-oka.trafione { border-color: var(--zielony); }
.boks-tor-oka.pudlo { border-color: var(--czerwony); }
.boks-oko {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
  margin: 0; border-radius: 50%;
  border: 3px solid var(--tasma); transform: translate(-50%, -50%);
}
.boks-drazek {
  position: absolute; left: 50%; top: 6px; bottom: 6px; width: 4px;
  margin-left: -2px; background: var(--tekst); border-radius: 2px;
}

@media (max-width: 720px) {
  .boks-gra { gap: 8px; padding: 6px 8px; }
  .boks-gra-guzik { padding: 10px 12px; min-width: 72px; min-height: 46px; font-size: 12px; }
  .boks-rolka { width: 48px; min-height: 48px; font-size: 9px; }
  .boks-tor-oka { width: 104px; }
}


/* Literka rodzaju w znaczniku odliczania (Wyścigi: R jak rajd, O jak okolica).
   Osobny krój i kolor, bo w wąskim nagłówkowym duże „O" tuż przed liczbą
   czytało się jak zero. */
.znacznik .rodzaj {
  display: inline-block;
  margin-right: 4px; padding: 0 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .28);
  font-family: var(--tresc); font-style: normal; font-weight: 700;
  font-size: .85em; letter-spacing: 0;
}

/*
 * Wypunktowania we wpisach „co nowego”.
 *
 * Wpis o wyścigach wylicza zespoły auta, podział puli i graty. W jednym
 * akapicie to się zlewało w ścianę tekstu, więc lista dostaje wcięcie
 * i ten sam wyszarzony kolor co reszta opisu.
 */
.nowosci-lista {
  margin: 6px 0 0 18px;
  padding: 0;
  color: var(--tekst-cichy);
  font-size: .93em;
  line-height: 1.5;
}
.nowosci-lista li { margin-top: 2px; }


/* --- Brygady ------------------------------------------------------------- */

/*
 * Karta brygady nosi jej barwę, bo obie mają być rozróżnialne jednym rzutem
 * oka, także w tabeli, gdzie stoją obok siebie.
 */
.brygada-karta {
  border-left: 3px solid var(--barwa, var(--kreska));
}
.brygada-karta.moja {
  background: linear-gradient(90deg, color-mix(in srgb, var(--barwa) 12%, transparent), transparent 60%);
}
.brygada-karta .opis { margin-top: 2px; }

/* ==========================================================================
   Interfejs aplikacji mobilnej.

   Reguły są przypięte do klasy nadawanej przez Capacitor albo zainstalowane
   PWA. Strona otwarta w zwykłej przeglądarce zachowuje dotychczasowy układ.
   ========================================================================== */

.mobile-interfejs { display: none; }

/* Wspólna ergonomia aplikacji. Bez wpływu na zwykłą przeglądarkę. */
html.aplikacja-natywna {
  --tekst-cichy: #a7afbd;
  --radius: 8px;
  --radius-duzy: 12px;
  scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
html.aplikacja-natywna #scena { font-size: 14px; line-height: 1.5; }
/* Wymiana treści pod przełącznikiem nie może przesuwać zakładek. */
html.aplikacja-natywna #scena { overflow-anchor: none; }
html.aplikacja-natywna #scena .zakladki-brygady button.dzieje-sie::after {
  position: absolute; right: 4px; top: 4px; margin: 0;
}
html.aplikacja-natywna #scena .panel { padding: 14px; }
html.aplikacja-natywna #scena .karta { padding: 14px; }
html.aplikacja-natywna #scena .regal { grid-template-columns: minmax(0, 1fr); }
html.aplikacja-natywna #scena .karty-minigry { grid-template-columns: minmax(0, 1fr) !important; }
html.aplikacja-natywna #scena .btn-pytajnik { min-width: 44px; min-height: 44px; }
html.aplikacja-natywna #scena :is(.btn, select, input:not([type=checkbox]):not([type=radio]):not([type=range])) {
  min-height: 44px;
}
html.aplikacja-natywna #scena .btn { min-width: 44px; padding: 10px 12px; font-size: 13px; }
html.aplikacja-natywna :is(input, select, textarea) { font-size: 16px; max-width: 100%; }
html.aplikacja-natywna :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--tasma); outline-offset: 3px;
}
html.aplikacja-natywna #scena :is(.zakladki-brygady, .podzakladki, .dzialy-sklepu) {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; padding: 0; border: 0;
}
html.aplikacja-natywna #scena :is(.zakladki-brygady, .podzakladki, .dzialy-sklepu) button {
  flex: 1 1 auto; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--kreska); border-radius: 8px;
  background: var(--panel-2); color: var(--tekst-cichy); font-size: 13px;
}
html.aplikacja-natywna #scena :is(.zakladki-brygady, .podzakladki, .dzialy-sklepu) button.aktywna {
  border-color: var(--tasma); background: var(--tasma-blask); color: var(--tasma);
}
html.aplikacja-natywna #scena .dzialy-sklepu button:not(.wtorny) {
  border-color: var(--tasma); background: var(--tasma-blask); color: var(--tasma);
}
html.aplikacja-natywna #scena .pasek-brygady {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
html.aplikacja-natywna #scena .zakladki-brygady {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
html.aplikacja-natywna #scena .zakladki-brygady button {
  position: relative; min-width: 0; padding-inline: 5px; font-size: 12px;
}
html.aplikacja-natywna #scena .kafel-brygady { flex: 0 0 145px; scroll-snap-align: start; }
html.aplikacja-natywna #scena .kafel-brygady b { font-size: 22px; }

/* Kłódka ma kolejność jak zamek: bębenki są ponumerowane i na telefonie idą
   zawsze od góry do dołu, bez niejednoznacznego układu dwóch kolumn. */
.klodka-bebenki {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin: 12px 0 8px;
}
.klodka-bebenek { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.klodka-bebenek > span {
  font-family: var(--naglowek); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tekst-cichy);
}
.klodka-bebenek select { width: 100%; max-width: none; }
.klodka-akcje { display: flex; align-items: center; margin-bottom: 8px; }
html.aplikacja-natywna .klodka-bebenki { grid-template-columns: minmax(0, 1fr); }
/*
 * Telefon w zwykłej przeglądarce: przycisk okna nie może leżeć przy dolnej krawędzi.
 * Safari (i Chrome na iPhonie) traktuje stuknięcie przy dole ekranu jako
 * „pokaż pasek przeglądarki”: pasek wyjeżdża, okno podskakuje, a „Okej” trzeba
 * klikać drugi raz. Okno wyśrodkowane w 86vh dużego widoku wypadało właśnie tam.
 * Zostawiamy pod oknem pas wolnego miejsca i liczymy wysokość z widocznej części.
 */
@media (max-width: 760px) {
  html:not(.aplikacja-natywna) .zaslona {
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px calc(84px + env(safe-area-inset-bottom, 0px));
  }
  html:not(.aplikacja-natywna) .zaslona .okno {
    max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 20px;
  }
  html:not(.aplikacja-natywna) .zaslona .okno .btn { min-height: 44px; }
}
html.aplikacja-natywna .zaslona { padding: 12px; }
html.aplikacja-natywna .zaslona .okno {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain; border-radius: 16px; padding: 20px;
}
html.aplikacja-natywna .zaslona .okno .btn { min-height: 44px; min-width: 44px; }

html.aplikacja-natywna body {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

html.aplikacja-natywna .mobile-interfejs { display: block; }
html.aplikacja-natywna .mobile-dol > button > b { font-size: 11px; }
html.aplikacja-natywna #nawigacja > button { font-size: 12px; }
html.aplikacja-natywna .mobile-statystyki { min-height: 44px; }
html.aplikacja-natywna .mobile-menu-naglowek button { min-width: 44px; min-height: 44px; }
html.aplikacja-natywna .mobile-czat { min-height: 44px; }
html.aplikacja-natywna .dowozka {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px 8px; padding: 10px;
}
html.aplikacja-natywna .dowozka > b { white-space: normal; font-size: 15px; }
html.aplikacja-natywna .dowozka > .cichy,
html.aplikacja-natywna .dowozka > .kurs { grid-column: 1 / -1; font-size: 12px; }
html.aplikacja-natywna .dowozka > .przelacznik {
  grid-column: 3; grid-row: 1; min-height: 44px; gap: 5px; margin: 0;
}
html.aplikacja-natywna .dowozka > .przelacznik input { width: 24px; height: 24px; }

html.aplikacja-natywna .belka {
  gap: 7px 10px;
  padding: calc(7px + env(safe-area-inset-top, 0px)) 10px 8px;
  overflow: visible;
  flex-wrap: wrap;
}
html.aplikacja-natywna .belka .znaczek { width: 30px; }
html.aplikacja-natywna .belka .szyld {
  flex: 1 1 110px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}
html.aplikacja-natywna .belka .szyld small { display: none; }
html.aplikacja-natywna .belka .rozpychacz,
html.aplikacja-natywna .belka .belka-discord,
html.aplikacja-natywna .belka .belka-aplikacja,
html.aplikacja-natywna .belka #btn-wyloguj,
html.aplikacja-natywna .belka .premium { display: none !important; }
html.aplikacja-natywna .belka #radio.hidden { display: none !important; }
html.aplikacja-natywna .belka #radio:not(.hidden) {
  display: flex !important;
}
html.aplikacja-natywna .belka #radio .radio-btn {
  min-width: 38px;
  min-height: 38px;
  padding: 6px;
}

.mobile-belka-akcje {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* W PWA pasek systemowy ma własne, nieprzezroczyste miejsce. Dodatkowy
   margines pilnuje, żeby pierwszy rząd nie dotykał jego dolnej krawędzi. */
html.aplikacja-pwa .belka {
  padding-top: calc(11px + env(safe-area-inset-top, 0px));
}

html.aplikacja-natywna .belka > .wskaznik {
  display: none;
  order: 10;
  flex: 1 1 calc(33.333% - 7px);
  min-width: 82px;
  padding: 3px 7px;
  border-left: 1px solid var(--kreska);
}
html.aplikacja-natywna .belka > .wskaznik.mobile-glowna-statystyka,
html.aplikacja-natywna.mobile-statystyki-otwarte .belka > .wskaznik {
  display: flex;
}
html.aplikacja-natywna .belka > .wskaznik b { font-size: 14px; }
html.aplikacja-natywna .belka > .wskaznik span { font-size: 8px; }
html.aplikacja-natywna .belka .pasek-xp { width: 100%; max-width: 84px; }
html.aplikacja-natywna .przelacznik-warsztatow:not(.hidden) {
  order: 20;
  width: 100%;
  overflow-x: auto;
}

.mobile-statystyki {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--kreska);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--tekst-cichy);
  font-family: var(--naglowek);
  font-size: 11px;
  text-transform: uppercase;
}
.mobile-statystyki i {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s;
}
html.mobile-statystyki-otwarte .mobile-statystyki {
  color: var(--tasma);
  border-color: var(--tasma-ciemna);
}
html.mobile-statystyki-otwarte .mobile-statystyki i {
  transform: rotate(225deg) translate(-1px, -1px);
}

html.aplikacja-natywna .hala {
  display: block;
  padding: 10px;
}

/* Pełne menu korzysta z tych samych guzików co strona, więc wszystkie
   poziomy odblokowania i znaczniki zdarzeń pozostają jednym źródłem prawdy. */
html.aplikacja-natywna #nawigacja {
  position: fixed;
  z-index: 73;
  left: 8px;
  right: 8px;
  top: auto;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: min(76dvh, 680px);
  margin: 0;
  padding: 12px 12px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--kreska-jasna);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 110px),
    rgba(18, 21, 26, .99);
  box-shadow: 0 -12px 42px rgba(0, 0, 0, .72);
  transform: translateY(calc(100% + 90px));
  visibility: hidden;
  transition: transform .2s ease, visibility 0s linear .2s;
}
html.aplikacja-natywna.mobile-menu-otwarte #nawigacja {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
html.aplikacja-natywna #nawigacja > button {
  width: 100%;
  min-width: 0;
  min-height: 70px;
  padding: 8px 5px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--kreska);
  background: linear-gradient(145deg, rgba(45, 50, 59, .96), rgba(34, 38, 46, .96));
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
}
html.aplikacja-natywna #nawigacja > button img { width: 29px; height: 29px; }
html.aplikacja-natywna #nawigacja > button.aktywna {
  border-color: var(--tasma);
  color: var(--tasma);
  background: linear-gradient(145deg, rgba(97, 72, 17, .58), rgba(49, 41, 25, .72));
  box-shadow: inset 0 0 0 1px rgba(255, 190, 32, .12), 0 5px 16px rgba(0, 0, 0, .25);
}
html.aplikacja-natywna #nawigacja > button.aktywna img {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 190, 32, .34));
}
html.aplikacja-natywna #nawigacja > button::before { display: none; }
html.aplikacja-natywna #nawigacja > button .znacznik {
  position: absolute;
  top: 4px;
  right: 4px;
  max-width: 58px;
  height: 18px;
  padding: 0 5px;
  font-size: 9px;
}

.mobile-menu-naglowek,
.mobile-menu-akcje { grid-column: 1 / -1; }
.mobile-menu-naglowek {
  position: sticky;
  z-index: 2;
  top: -12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -1px -2px 0;
  padding: 7px 4px 10px;
  background: linear-gradient(180deg, #12151a 72%, rgba(18, 21, 26, 0));
}
.mobile-menu-naglowek b {
  display: block;
  font-family: var(--naglowek);
  font-size: 19px;
  color: var(--tasma);
}
.mobile-menu-naglowek small { display: block; color: var(--tekst-cichy); }
.mobile-menu-naglowek button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--kreska);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--tekst);
  font-size: 27px;
  line-height: 1;
}
.mobile-menu-akcje { display: flex; gap: 8px; padding-top: 4px; }
.mobile-menu-akcje a,
.mobile-menu-akcje button {
  flex: 1;
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--kreska);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--tekst);
  font-family: var(--naglowek);
  font-size: 12px;
  text-decoration: none;
}
.mobile-menu-akcje a { border-color: #5865f2; color: #b9bfff; }

/* W pełnym menu nagłówek grupy jest elementem siatki, ale zajmuje cały rząd.
   Krótki opis daje kontekst bez dokładania kolejnego poziomu nawigacji. */
html.aplikacja-natywna #nawigacja > .grupa-nawigacji {
  grid-column: 1 / -1;
  width: auto;
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 5px 9px;
  margin: 10px 1px -1px;
  padding: 8px 4px 7px 13px;
  overflow: visible;
  text-indent: 0;
  border-bottom: 1px solid var(--kreska);
  background: transparent;
  color: var(--tekst);
  font-size: 12px;
  letter-spacing: .14em;
}
html.aplikacja-natywna #nawigacja > .grupa-nawigacji:first-of-type { margin-top: 0; }
html.aplikacja-natywna #nawigacja > .grupa-nawigacji::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 10px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--tasma);
  box-shadow: 0 0 9px var(--tasma-blask);
}
html.aplikacja-natywna #nawigacja > .grupa-nawigacji::after { display: none; }
html.aplikacja-natywna #nawigacja > .grupa-nawigacji > span { color: var(--tasma); }
html.aplikacja-natywna #nawigacja > .grupa-nawigacji > small {
  display: block;
  min-width: 0;
  color: var(--tekst-cichy);
  font: 500 10.5px/1.3 var(--tresc);
  letter-spacing: .02em;
  text-transform: none;
}

/* Toast pod otwartym panelem wyglądał jak część menu i zasłaniał ostatni rząd. */
html.aplikacja-natywna.mobile-menu-otwarte #powiadomienia {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mobile-dol {
  position: fixed;
  z-index: 75;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 4px 6px env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  border-top: 1px solid var(--kreska-jasna);
  background: rgba(17, 20, 24, .985);
  box-shadow: 0 -7px 22px rgba(0, 0, 0, .58);
}
.mobile-dol > button {
  position: relative;
  flex: 1 1 20%;
  min-width: 0;
  max-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tekst-cichy);
}
.mobile-dol > button.hidden { display: none; }
.mobile-dol > button.aktywna { color: var(--tasma); background: var(--tasma-blask); }
.mobile-dol > button > b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--naglowek);
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}
.mobile-ikona { position: relative; width: 28px; height: 28px; display: grid; place-items: center; }
.mobile-ikona img { width: 27px; height: 27px; opacity: .72; border-radius: 5px; }
.mobile-dol > button.aktywna .mobile-ikona img { opacity: 1; filter: drop-shadow(0 0 5px var(--tasma-blask)); }
.mobile-badge {
  position: absolute;
  top: -4px;
  right: -14px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--tasma);
  color: #17130a;
  font: 600 8px/1 var(--naglowek);
  box-shadow: 0 0 8px var(--tasma-blask);
}
.mobile-badge.hidden { display: none; }
.mobile-badge.kropka { right: -3px; min-width: 8px; width: 8px; height: 8px; padding: 0; }
.mobile-ikona-menu {
  grid-template-columns: repeat(2, 7px);
  grid-template-rows: repeat(2, 7px);
  place-content: center;
  gap: 3px;
}
.mobile-ikona-menu > i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.mobile-dol [data-mobile-menu].ma-alarm::after {
  content: '';
  position: absolute;
  top: 5px;
  right: calc(50% - 19px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tasma);
  box-shadow: 0 0 8px var(--tasma);
}

.mobile-zaslona {
  position: fixed;
  z-index: 71;
  inset: 0 0 calc(64px + env(safe-area-inset-bottom, 0px));
  display: block;
  border: 0;
  background: rgba(0, 0, 0, .65);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s, visibility 0s linear .18s;
}
html.mobile-menu-otwarte .mobile-zaslona,
html.mobile-czat-otwarty .mobile-zaslona {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
html.aplikacja-natywna.mobile-menu-otwarte body,
html.aplikacja-natywna.mobile-czat-otwarty body { overflow: hidden; }

.mobile-czat {
  position: fixed;
  z-index: 70;
  right: 10px;
  bottom: calc(75px + env(safe-area-inset-bottom, 0px));
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--tasma-ciemna);
  border-radius: 22px;
  background: var(--panel);
  color: var(--tasma);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .55);
}
.mobile-czat span { font: 600 17px/1 monospace; }
.mobile-czat b { display: none; }
html.aplikacja-natywna .mobile-czat {
  width: 46px; min-width: 46px; height: 46px; min-height: 46px;
  justify-content: center; padding: 0; border-radius: 50%;
}
html.mobile-czat-otwarty .mobile-czat { z-index: 76; background: var(--tasma); color: #1a1206; }

html.aplikacja-natywna .kanciapa-kolumna {
  position: fixed !important;
  z-index: 74;
  left: 8px;
  right: 8px;
  top: calc(8px + env(safe-area-inset-top, 0px));
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  width: auto !important;
  height: auto;
  display: flex !important;
  gap: 8px;
  padding: 0;
  transform: translateY(calc(100% + 90px));
  visibility: hidden;
  transition: transform .2s ease, visibility 0s linear .2s;
}
html.aplikacja-natywna.mobile-czat-otwarty .kanciapa-kolumna {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
html.aplikacja-natywna .kanciapa-kolumna > .panel:first-child { flex: 1 1 62%; }
html.aplikacja-natywna .kanciapa-kolumna > .panel:last-child { flex: 1 1 38%; min-height: 110px; }
html.aplikacja-natywna .kanciapa .lista { overscroll-behavior: contain; }

/* Dymki kończą się przed przyciskiem czatu, więc go nie zasłaniają.
   Wcześniej przycisk znikał przy każdym dymku, a przy taśmowej robocie dymki
   lecą jeden za drugim: żeby coś napisać, trzeba było zamykać je po kolei. */
html.aplikacja-natywna #powiadomienia {
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  right: 66px;
}
/* Pasek floty zajmuje dół ekranu, więc przy nim skrót dalej się chowa. */
html.aplikacja-natywna body:has(.flota-pasek) .mobile-czat {
  opacity: 0; visibility: hidden; pointer-events: none;
}
html.aplikacja-natywna body:has(#flota-pasek) #powiadomienia {
  bottom: calc(138px + env(safe-area-inset-bottom, 0px));
}
html.aplikacja-natywna body:has(#flota-pasek):has(#rajd-pasek) #powiadomienia {
  bottom: calc(196px + env(safe-area-inset-bottom, 0px));
}

/* Raport z nieobecności ma używać całej szerokości okna. Reguła chroni też
   przed klasą zdarzenia, która przypadkiem ma własny układ w innym widoku. */
html.aplikacja-natywna .okno-tresc .raport { display: block; width: 100%; min-width: 0; }
html.aplikacja-natywna .okno-tresc .raport > div {
  display: block; width: 100%; min-width: 0; max-width: none;
  margin: 0 0 8px; white-space: normal; word-break: normal; overflow-wrap: break-word;
}
html.aplikacja-natywna .oferta-pasek {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Podnośniki w aplikacji są kartami stanu, a nie pełnymi panelami opisowymi.
   Mała scena zostaje i nadal się rusza. Pełny tekst jest dostępny po Info. */
html.aplikacja-natywna #status {
  position: relative;
  top: auto;
  z-index: 1;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
html.aplikacja-natywna #status::before { display: none; }
html.aplikacja-natywna .stos-podnosnikow {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: none;
  overflow: visible;
}
html.aplikacja-natywna #status .podnosnik {
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas: "scena tresc";
  column-gap: 10px;
  min-height: 116px;
  margin: 0;
  padding: 9px 10px;
  align-items: center;
  border-radius: 10px;
}
html.aplikacja-natywna #status .podnosnik > .tresc { min-width: 0; }
html.aplikacja-natywna #status .podnosnik h2 {
  max-width: calc(100% - 42px);
  margin: 0 0 5px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html.aplikacja-natywna #status .podnosnik h2 .plakietka {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 3px 0 0;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
}
html.aplikacja-natywna #status .podnosnik .opis { display: none; }
html.aplikacja-natywna #status .podnosnik .pasek-roboty {
  min-height: 24px;
  margin: 0;
}
html.aplikacja-natywna #status .podnosnik .pasek-roboty span {
  padding-inline: 5px;
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html.aplikacja-natywna #status .podnosnik .ostrzezenie,
html.aplikacja-natywna #status .podnosnik .dopisek {
  margin: 5px 0 0;
  padding: 4px 6px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html.aplikacja-natywna #status .podnosnik .dane {
  gap: 5px 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  font-size: 10px;
  line-height: 1.2;
}
html.aplikacja-natywna #status .podnosnik .dane > div {
  min-width: 0;
  white-space: nowrap;
}
html.aplikacja-natywna #status .podnosnik .dane b { font-size: 12px; }
html.aplikacja-natywna #status .podnosnik .dane .btn,
html.aplikacja-natywna #status .podnosnik .dane > .btn {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 9px;
}
html.aplikacja-natywna #status .podnosnik > .scena {
  display: block;
  width: 92px;
  min-height: 72px;
  padding-bottom: 12px;
}
html.aplikacja-natywna #status .podnosnik .scena .auto {
  width: 100%;
  max-height: 68px;
  position: relative;
  top: 30px;
  z-index: 1;
}
html.aplikacja-natywna #status .podnosnik .scena .klucz {
  bottom: 7px;
  font-size: 19px;
}
html.aplikacja-natywna #status .podnosnik .scena-szrotu { height: 78px; }
html.aplikacja-natywna #status .podnosnik .scena-szrotu .kupa { height: 60px; }
html.aplikacja-natywna #status .podnosnik .scena-szrotu .szuka,
html.aplikacja-natywna #status .podnosnik .scena-szrotu .znalazl { height: 72px; }
html.aplikacja-natywna #status .podnosnik .zwijak { display: none; }

.mobile-podnosnik-info { display: none; }
html.aplikacja-natywna #status .mobile-podnosnik-info {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  display: block;
  min-width: 38px;
  min-height: 32px;
  padding: 4px 7px;
  border: 1px solid var(--kreska);
  border-radius: 7px;
  background: rgba(10, 12, 15, .55);
  color: var(--tekst-cichy);
  font: 500 9px/1 var(--naglowek);
  text-transform: uppercase;
}
html.aplikacja-natywna #status .podnosnik.mobile-pelny {
  grid-template-columns: 1fr;
  grid-template-areas: "scena" "tresc";
  padding: 12px;
}
html.aplikacja-natywna #status .podnosnik.mobile-pelny > .scena {
  width: min(190px, 55%);
  min-height: 92px;
  margin: 0 auto;
}
html.aplikacja-natywna #status .podnosnik.mobile-pelny .scena .auto { max-height: 90px; }
html.aplikacja-natywna #status .podnosnik.mobile-pelny h2 {
  max-width: calc(100% - 48px);
  font-size: 19px;
  white-space: normal;
}
html.aplikacja-natywna #status .podnosnik.mobile-pelny .opis {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
}
html.aplikacja-natywna #status .podnosnik.mobile-pelny .ostrzezenie,
html.aplikacja-natywna #status .podnosnik.mobile-pelny .dopisek {
  padding: 8px 9px;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}
html.aplikacja-natywna #status .podnosnik.mobile-pelny .dane {
  gap: 10px 14px;
  margin-top: 10px;
  font-size: 12px;
}
html.aplikacja-natywna #status .podnosnik.mobile-pelny .dane b { font-size: 14px; }

html.aplikacja-natywna #status .podnosnik.puste {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-areas: "scena tresc" !important;
  min-height: 66px;
  padding-block: 8px;
}
html.aplikacja-natywna #status .podnosnik.puste::before {
  content: '🔧';
  grid-area: scena;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background: var(--panel-3);
  font-size: 19px;
}
html.aplikacja-natywna #status .podnosnik.puste h2 { margin: 0; }
html.aplikacja-natywna #status .podnosnik.puste .opis { display: none; }

/* Boks w aplikacji dostaje duże niewidzialne pola dotyku. Widoczne kółka są
   tylko trochę większe, więc nadal widać auto i wiadomo, gdzie leży część. */
html.aplikacja-natywna .boks-gniazdo {
  width: 58px;
  height: 58px;
}
html.aplikacja-natywna .boks-gniazdo-oko {
  width: 38px;
  height: 38px;
  border-width: 3px;
}
html.aplikacja-natywna .boks-gniazdo.wstawiona .boks-gniazdo-oko {
  width: 30px;
  height: 30px;
}
html.aplikacja-natywna .boks-gniazdo.czeka .boks-gniazdo-oko {
  box-shadow: 0 0 0 8px rgba(240, 180, 41, .14), 0 0 22px rgba(240, 180, 41, .7);
}
html.aplikacja-natywna .boks-sruba {
  width: 38px;
  height: 38px;
  border-width: 2px;
}
html.aplikacja-natywna .boks-sruba::after { inset: 7px; }
html.aplikacja-natywna .boks-sruba::before { inset: 15px 11px; }
html.aplikacja-natywna .boks-sruba.kreci {
  box-shadow: 0 0 0 7px rgba(240,180,41,.22), 0 3px 8px rgba(0,0,0,.7);
}
html.aplikacja-natywna .boks-gra-guzik {
  min-width: 112px;
  min-height: 54px;
  touch-action: none;
}
html.aplikacja-natywna .boks-gra-guzik.trzymany {
  color: #fff;
  background: var(--tasma-ciemna);
  box-shadow: inset 0 0 0 2px var(--tasma), 0 0 18px var(--tasma-blask);
  transform: translateY(1px);
}

@media (max-width: 380px) {
  html.aplikacja-natywna #nawigacja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.aplikacja-natywna .belka > .wskaznik { min-width: 74px; padding-inline: 5px; }
  .mobile-dol > button > b { font-size: 8.5px; }
  .mobile-czat b { display: none; }
  .mobile-czat { width: 42px; justify-content: center; padding: 6px; }
}

/* Formularz zamówienia na giełdzie: każde pole ma podpis nad sobą, bo bez
   niego liczby „5" i „912" nic nie mówiły. */
.pola-zamowienia { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.pola-zamowienia label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.pola-zamowienia input, .pola-zamowienia select { margin: 0; }
@media (max-width: 620px) {
  .pola-zamowienia { gap: 8px; }
  .pola-zamowienia label { flex: 1 1 120px; }
  .pola-zamowienia input, .pola-zamowienia select { width: 100% !important; max-width: none !important; }
  .pola-zamowienia .btn { flex: 1 1 100%; }
}

/* Bębenek kłódki odsłonięty Kluczem do wszystkiego: zablokowany, ale ma wyglądać
   na wygraną, a nie na zepsute pole. */
.bebenek-odkryty {
  border-color: var(--tasma);
  color: var(--tasma);
  background: var(--tasma-blask);
  opacity: 1;
  font-weight: 700;
  /* Ma się zmieścić cała nazwa symbolu: to jedyne pole, którego gracz nie
     rozwinie, żeby sprawdzić, co w nim stoi. */
  max-width: none;
  width: auto;
}

/* Ustawka: pora dnia, odliczanie i plan trzech godzin. Wcześniej wszystkie trzy
   wyglądały tak samo i nie było po czym poznać, że w ogóle są trzy. */
.odliczanie-ustawki .zegar-ustawki {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 10px; margin-bottom: 10px;
  background: var(--tasma-blask); border: 1px solid var(--tasma-ciemna); border-radius: var(--radius);
}
.odliczanie-ustawki .zegar-ustawki b {
  font-family: var(--naglowek); font-size: 46px; line-height: 1; color: var(--tasma);
  letter-spacing: .02em;
}
.zasada-pory {
  padding: 9px 12px; border-left: 3px solid var(--tasma);
  background: var(--panel-2); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px;
}
/* Wyzwanie dnia: wynik jednym zdaniem, pod nim dwa słupki. Wcześniej były to
   cztery akapity, z których gracz sam musiał złożyć odpowiedź na pytanie
   „jak dziś stoimy". */
.zawody-wynik {
  font-family: var(--naglowek); font-size: 17px; font-weight: 500;
  margin-bottom: 8px;
}
.zawody-strony { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.zawody-strona > div:first-child { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.zawody-strona b { margin-left: auto; font-family: var(--naglowek); font-weight: 500; }

/* Zapis na ustawkę: guzik zaraz pod zegarem, szeroki na całą szerokość panelu,
   bo to jest jedyna rzecz, którą się tu robi. */
.zapis-na-ustawke { margin: 12px 0 4px; }
.zapis-na-ustawke .btn { width: 100%; padding: 12px; font-size: 15px; }

.plan-ustawek { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pora-ustawki {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border: 1px solid var(--kreska); border-radius: var(--radius);
  background: var(--panel-2);
}
.pora-ustawki.nastepna { border-color: var(--tasma); background: var(--tasma-blask); }
.pora-ustawki b { font-family: var(--naglowek); font-size: 19px; }
.pora-ustawki .nazwa { font-size: 13px; }
.pora-ustawki .cichy { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }

.strona-ustawki { margin-bottom: 10px; }
.strona-ustawki > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.pasek-stron { height: 8px; background: var(--panel-3); border-radius: 4px; overflow: hidden; margin-top: 5px; }
.pasek-stron i { display: block; height: 100%; }

/* Stojak z bronią w sekcji Ustawka. Wiersz, a nie karta: tych rzeczy bywa
   kilkanaście, a przy zapisach liczy się szybkie porównanie, nie okładka. */
/* Wybór strony przy wstępowaniu: dwa szerokie guziki, bo to jest decyzja
   na tydzień, a nie odhaczenie zgody. */
/* Część, która schodzi w aucie stojącym na podnośniku. Zgłoszenie graczy:
   dawało się sprzedać własną robotę, bo nic tego nie odróżniało na regale. */
.plakietka.w-robocie { background: var(--tasma-ciemna); color: var(--tekst); }
.czesc.w-robocie .ilosc { color: var(--tasma); }

/* Zakłady na ustawkę: dwie strony, przy każdej kurs i guzik. */
.zaklad-strony { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.zaklad-strona {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--kreska); border-radius: var(--radius);
  background: var(--panel-2);
}
.zaklad-strona.moja { border-color: var(--tasma); }
.zaklad-strona > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.zaklad-strona .cichy { font-size: 12px; }
.zaklad-kwota { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.zaklad-kwota input { width: 140px; }

/* Zwołanie brygady: pole i guzik w jednej linii, nad składem. */
.zwolanie { display: flex; gap: 8px; margin: 0 0 12px; }
.zwolanie input { flex: 1; min-width: 0; }
@media (max-width: 560px) { .zwolanie { flex-direction: column; } }

/* Skrót brygady przy nazwie gracza: dwie litery w kolorze ekipy. */
.znak-brygady {
  font-family: var(--naglowek); font-size: .85em; font-weight: 500;
  letter-spacing: .04em; opacity: .95;
}

.wybor-brygady { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wybor-brygady .btn { display: flex; flex-direction: column; gap: 2px; padding: 12px; text-align: center; }
.wybor-brygady .btn small { font-family: var(--tresc); text-transform: none; opacity: .75; }

.lista-broni { display: flex; flex-direction: column; gap: 6px; }
.bron-wiersz {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: var(--panel-2); border: 1px solid var(--kreska); border-radius: var(--radius);
}
.bron-wiersz.wybrana { border-color: var(--tasma); box-shadow: inset 0 0 0 1px var(--tasma-ciemna); }
.bron-wiersz .opis-broni { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bron-wiersz .opis-broni b { font-family: var(--naglowek); font-weight: 500; }
.bron-wiersz .opis-broni span { font-size: 12px; }
.bron-wiersz .btn { flex: none; }

/* Pasek „co się dzieje teraz" na górze Brygady. Kafelek jest guzikiem: klik
   przenosi do sekcji, której dotyczy. */
.pasek-brygady { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 2px; }
.kafel-brygady {
  flex: 1 1 150px; display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--kreska); border-radius: var(--radius);
  color: var(--tekst); font: inherit;
}
.kafel-brygady:hover { border-color: var(--kreska-jasna); background: var(--panel-3); }
.kafel-brygady b { font-family: var(--naglowek); font-size: 24px; line-height: 1.1; }
.kafel-brygady .tytul-kafla {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-cichy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kafel-brygady .cichy { font-size: 11.5px; }
.kafel-brygady.dobry { border-color: var(--tasma); background: var(--tasma-blask); }
.kafel-brygady.dobry b { color: var(--tasma); }
.kafel-brygady.cichy b { color: var(--tekst-cichy); }
@media (max-width: 620px) {
  .kafel-brygady { flex: 1 1 calc(50% - 4px); }
  .kafel-brygady b { font-size: 20px; }
}

/* ---------------------------------------------------------------------------
 * Stolik na stawkę: trzy kubki i koło z felgi.
 *
 * Obie gry rysujemy DOM-em i transformacjami, tak jak resztę kanciapy, bo
 * reszta tego widoku też nie używa canvasu i dzięki temu wszystko skaluje się
 * razem z kartami i działa na telefonie bez osobnej ścieżki.
 * ------------------------------------------------------------------------ */

.stol-kubkow {
  position: relative;
  height: 130px;
  margin: 10px 0 4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .08));
  border: 1px solid var(--kreska);
  border-radius: 6px;
  overflow: hidden;
}

.stol-kubkow .kulka {
  position: absolute;
  bottom: 12px;
  width: 33.3%;
  display: flex;
  justify-content: center;
  transition: left .18s ease, opacity .2s ease;
  pointer-events: none;
}
.stol-kubkow .kulka::after {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--tasma) 70%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.stol-kubkow .kubek {
  position: absolute;
  bottom: 10px;
  width: 33.3%;
  display: flex;
  justify-content: center;
  /* Ten sam czas co `tempo` najszybszego poziomu, żeby przy mieszaniu na
     maksymalnej prędkości kubki nadążały, a nie ślizgały się w tle. */
  transition: left .22s ease, transform .22s ease;
}
.stol-kubkow .kubek .czasza {
  width: 62px; height: 74px;
  background: linear-gradient(180deg, #9a5a2c, #6d3d1c);
  border: 1px solid #3c2210;
  border-radius: 8px 8px 4px 4px;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 6px 10px rgba(255, 255, 255, .12), 0 3px 6px rgba(0, 0, 0, .45);
}
/* Podniesły kubek pokazuje kulkę na starcie, a potem opada na nią na oczach gracza. */
.stol-kubkow .kubek.uniesiony { transform: translateY(-52px) rotate(-8deg); }

/*
 * Łuk przy zamianie: jeden kubek obchodzi drugiego górą, drugi dołem.
 *
 * Bez tego dwa kubki przejeżdżałyby przez siebie po tej samej linii i ruch byłby
 * nieczytelny, a całe mieszanie wyglądało jak przeskok.
 */
.stol-kubkow .kubek.gora { transform: translateY(-26px); z-index: 3; }
.stol-kubkow .kubek.dol { transform: translateY(10px); z-index: 1; }
.stol-kubkow .kubek.do-wyboru { cursor: pointer; }
.stol-kubkow .kubek.do-wyboru:hover { transform: translateY(-8px); }

.kolo-felgi {
  position: relative;
  width: 210px; height: 210px;
  margin: 10px auto 4px;
}
.kolo-felgi .tarcza {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 6px solid #2b2b2b;
  background: #161616;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), 0 4px 10px rgba(0, 0, 0, .5);
  overflow: hidden;
}
/* Pole wycinamy stożkiem: bez canvasu i bez obrazków, więc skaluje się samo.
   Margines zerujemy jawnie: ogólne `.pole` z formularzy dokładało 13 px u dołu,
   pole kończyło się przed krawędzią tarczy, a środek stożka wędrował w górę,
   więc przy obrocie w jednym miejscu zostawała czarna, pusta szczelina. */
.kolo-felgi .tarcza .pole {
  position: absolute; inset: 0; margin: 0;
  background: conic-gradient(from var(--od), var(--kolor, #3a3a3a) 0deg calc(var(--do) - var(--od)), transparent 0);
}
.kolo-felgi .tarcza .pole.platne { --kolor: var(--tasma); }
.kolo-felgi .wskazowka {
  position: absolute;
  top: -10px; left: 50%;
  width: 0; height: 0; margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 20px solid var(--dobry, #6fbf5b);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}

/* Kronika: jeden hub dla kampanii, renowacji i frakcji. */
.kronika-pulpit, .kronika-przelaczniki, .kronika-hero, .legenda-aktywna,
.legendy-lista, .frakcje-lista, .inwestycja-hero, .kronika-nagrody {
  --cichy: var(--tekst-cichy); --ramka: var(--kreska); --karta: var(--panel-2);
  --dobry: var(--zielony); --zle: var(--czerwony); --tlo: var(--olej);
}
.kronika-przelaczniki {
  position: sticky;
  top: var(--wysokosc-belki, 0px);
  z-index: 8;
  display: flex;
  gap: 8px;
  padding: 8px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--tlo) 92%, transparent);
  backdrop-filter: blur(10px);
}
.kronika-przelaczniki .btn { flex: 1; }
.kronika-hero { border-top: 3px solid var(--kolor-kampanii, var(--tasma)); }
.kronika-punkty { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 8px; }
.kronika-punkty b { color: var(--tasma); font-size: clamp(28px, 6vw, 48px); }
.kronika-punkty span { color: var(--cichy); }
.kronika-nagrody { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.kronika-nagroda { display: flex; flex-direction: column; gap: 5px; padding: 12px; border: 1px solid var(--ramka); border-radius: 8px; background: var(--karta); }
.kronika-nagroda.dostepna { border-color: var(--tasma); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tasma) 40%, transparent); }
.kronika-nagroda.odebrana { opacity: .65; }
.kronika-nagroda strong { color: var(--dobry); }
.gablota-kroniki .karty { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
.trofeum-kroniki { position: relative; min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-left: 54px; }
.trofeum-kroniki::before { content: '★'; position: absolute; left: 15px; color: var(--tasma); font-size: 27px; text-shadow: 0 0 14px color-mix(in srgb, var(--tasma) 55%, transparent); }
.trofeum-kroniki small { color: var(--cichy); text-transform: uppercase; letter-spacing: .05em; }
.trofeum-kroniki b { color: var(--tasma); font-family: var(--naglowek); font-size: 19px; }
.trofeum-kroniki span { color: var(--cichy); font-size: 12px; }
.turniej-kanciapy { border-top: 3px solid var(--tasma); overflow: hidden; }
.turniej-kanciapy-srodek { display: grid; grid-template-columns: minmax(150px, .45fr) 1fr; gap: 16px; align-items: center; margin: 14px 0; }
.turniej-kanciapy-srodek > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.turniej-kanciapy-srodek > div:first-child b { color: var(--tasma); font-size: 22px; }
.turniej-progi { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 7px; }
.turniej-progi button { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 9px; color: var(--tekst); background: var(--karta); border: 1px solid var(--ramka); border-radius: 7px; text-align: left; }
.turniej-progi button.gotowy:not(.odebrany) { border-color: var(--tasma); cursor: pointer; box-shadow: inset 0 0 16px color-mix(in srgb, var(--tasma) 12%, transparent); }
.turniej-progi button.odebrany { opacity: .52; }
.turniej-progi span, .turniej-progi small { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.turniej-poprzedni { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 10px; border: 1px solid var(--dobry); border-radius: 7px; }
.turniej-ranking { margin-top: 10px; }
.turniej-ranking .moj-wynik { color: var(--tasma); }
.liga-hero { border-top: 3px solid var(--tasma); }
.liga-hero h2 { margin: 10px 0 5px; }
.liga-stan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 15px; }
.liga-stan > div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--ramka); border-radius: 7px; background: var(--karta); }
.liga-stan b { color: var(--tasma); font-size: 22px; }
.liga-stan span { color: var(--cichy); font-size: 12px; text-transform: uppercase; }
.liga-ustawienia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.liga-start { margin-top: 14px; justify-content: space-between; }
.liga-odbior { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-color: var(--dobry); }
.liga-ranking small { display: block; color: var(--cichy); }
.liga-historia { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; color: var(--cichy); }
.liga-historia span { padding: 4px 7px; border-radius: 4px; background: var(--karta); color: var(--tekst); }
.metryka-auta { margin: 9px 0; padding: 8px; border: 1px dashed var(--ramka); border-radius: 6px; background: color-mix(in srgb, var(--karta) 82%, transparent); }
.metryka-auta summary { cursor: pointer; color: var(--tasma); font-weight: 700; }
.metryka-auta p { margin: 7px 0; color: var(--cichy); }
.metryka-auta ol { margin: 0; padding-left: 19px; color: var(--cichy); font-size: 12px; }
.album-progi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 13px 0; }
.album-progi button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px; color: var(--tekst); background: var(--karta); border: 1px solid var(--ramka); border-radius: 7px; text-align: left; }
.album-progi button.gotowy:not(.odebrany) { border-color: var(--tasma); cursor: pointer; }
.album-progi button.odebrany { opacity: .5; }
.album-modele > summary { cursor: pointer; color: var(--tasma); font-weight: 700; }
.album-modele > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 7px; margin-top: 10px; }
.album-modele figure { margin: 0; padding: 7px; border: 1px solid var(--ramka); border-radius: 6px; background: var(--karta); }
.album-modele figure > div { height: 65px; display: grid; place-items: center; overflow: hidden; font-size: 30px; color: var(--cichy); }
.album-modele img { max-width: 100%; max-height: 100%; object-fit: contain; }
.album-modele figcaption { margin-top: 5px; font-size: 11px; color: var(--cichy); }
.album-modele .nieodkryty { opacity: .45; filter: grayscale(1); }
.fachowcy-panel .tytul.mniejszy { margin-top: 18px; font-size: 16px; }
.fachowcy-moje { display: grid; gap: 6px; margin-top: 12px; }
.fachowcy-moje > div { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--ramka); border-radius: 6px; background: var(--karta); }
.fachowcy-moje span { flex: 1; }
.fachowcy-moje small { display: block; margin-top: 2px; color: var(--cichy); }
.fachowcy-nowe { margin-top: 15px; }
.fachowcy-nowe > summary { cursor: pointer; color: var(--tasma); font-weight: 700; }
.fachowcy-nowe > .karty { margin-top: 10px; }
.inwestycja-hero { border-top: 3px solid var(--tasma); }
.inwestycja-hero.ukonczona { border-color: var(--dobry); box-shadow: inset 0 0 30px color-mix(in srgb, var(--dobry) 7%, transparent); }
.inwestycja-moj { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.inwestycja-moj b { color: var(--tasma); font-size: 23px; }
.inwestycja-moj span { color: var(--cichy); }
.inwestycja-wplaty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.inwestycja-czesci { display: grid; grid-template-columns: 1fr 100px auto; gap: 7px; margin-top: 12px; }
.zmiana-hero { border-top: 3px solid var(--tasma); }
.zmiana-ludzie { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.zmiana-ludzie span { padding: 6px 9px; border: 1px solid var(--ramka); border-radius: 99px; background: var(--karta); }
.zmiana-zaloz { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 10px 0 15px; }
.lista-kroniki > div { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--ramka); }
.legenda-robota { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(300px, 1.2fr); gap: 20px; align-items: center; }
.legenda-obraz { position: relative; min-height: 220px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: radial-gradient(circle, #2a2e35, #111318 70%); }
.legenda-obraz img { width: min(100%, 520px); filter: grayscale(1) brightness(.35); opacity: .62; }
.legenda-obraz::after { content: ''; position: absolute; inset: 0; width: var(--odkryte); background: linear-gradient(90deg, rgba(244, 178, 35, .11), transparent); border-right: 2px solid var(--tasma); pointer-events: none; }
.legenda-opis h2 { margin-bottom: 6px; }
.etap-legendy { margin-top: 14px; padding: 14px; border: 1px solid var(--ramka); border-radius: 8px; background: var(--karta); }
.legenda-miniatura { height: 105px; display: grid; place-items: center; overflow: hidden; }
.legenda-miniatura img { max-width: 100%; max-height: 100%; object-fit: contain; }
.przycisk-karta { width: 100%; color: inherit; text-align: left; cursor: pointer; }
.przycisk-karta span, .przycisk-karta small { display: block; margin-top: 5px; color: var(--cichy); }
.frakcja-status { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.frakcja-status b { font-size: 28px; }
.pasek-relacji { height: 8px; margin: 5px 0 10px; overflow: hidden; border-radius: 10px; background: #111; }
.pasek-relacji i { display: block; height: 100%; background: linear-gradient(90deg, var(--zle), var(--tasma), var(--dobry)); }
.historia-frakcji { margin-top: 12px; padding: 12px; border-left: 3px solid var(--tasma); background: color-mix(in srgb, var(--tasma) 8%, var(--karta)); }
.historia-frakcji p { margin-top: 5px; }
.kontrakty-frakcji { display: grid; gap: 7px; margin-top: 12px; }
.kontrakty-frakcji > div { display: flex; gap: 8px; align-items: center; padding-top: 7px; border-top: 1px solid var(--ramka); }
.kontrakty-frakcji span { flex: 1; }
.kontrakty-frakcji small { display: block; color: var(--cichy); margin-top: 2px; }
@media (max-width: 720px) {
  .legenda-robota { grid-template-columns: 1fr; }
  .legenda-obraz { min-height: 160px; }
  .kronika-przelaczniki { overflow-x: auto; }
  .kronika-przelaczniki .btn { min-width: max-content; }
  .turniej-kanciapy-srodek { grid-template-columns: 1fr; }
  .turniej-progi { grid-template-columns: repeat(2, 1fr); }
  .turniej-poprzedni { align-items: stretch; flex-direction: column; }
  .liga-stan, .liga-ustawienia { grid-template-columns: repeat(2, 1fr); }
  .liga-odbior, .liga-start { align-items: stretch; flex-direction: column; }
  .album-progi { grid-template-columns: repeat(2, 1fr); }
  .inwestycja-wplaty { grid-template-columns: repeat(2, 1fr); }
  .inwestycja-czesci { grid-template-columns: 1fr 80px; }
  .inwestycja-czesci .btn { grid-column: 1 / -1; }
}

/* Okładki i mapa kariery używają istniejących ilustracji warsztatu. */
.etykieta-sekcji { margin-left: auto; padding: 2px 4px; color: #f8cb6b; border: 1px solid #71582b; border-radius: 4px; font-size: 8px; }
.kronika-pulpit { position: relative; isolation: isolate; overflow: hidden; padding: 25px; margin-bottom: 12px; border: 1px solid #64502e; border-radius: 12px; background: linear-gradient(115deg,#28231c,#151b23); }
.kronika-pulpit-tresc { position: relative; z-index: 2; max-width: 68%; }
.kronika-kicker { display: block; color: #f4c56a; font: 500 11px/1.5 var(--naglowek); letter-spacing: .14em; }
.kronika-pulpit h1 { font: 600 clamp(25px,3vw,38px)/1.13 var(--naglowek); margin: 8px 0 12px; }
.kronika-pulpit p { color: #bfc5cd; max-width: 55ch; line-height: 1.5; }
.kronika-pulpit-liczby { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; color: #aab2bf; font-size: 12px; }
.kronika-pulpit-liczby b { color: #f4c56a; font: 600 24px var(--naglowek); margin-right: 4px; }
.kronika-pulpit-auto { position: absolute; right: -5%; bottom: 0; width: 46%; opacity: .55; }
.kronika-pulpit-auto img { width: 100%; filter: drop-shadow(0 12px 20px #000); }
.kronika-przelaczniki { position: relative; top: auto; z-index: 1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0; background: transparent; backdrop-filter: none; overflow: visible; }
.kronika-kafelek { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 88px; padding: 12px; text-align: left; color: var(--tekst); border: 1px solid var(--kreska); border-radius: 9px; background: #1b2028; cursor: pointer; }
.kronika-kafelek:hover, .kronika-kafelek:focus-visible { border-color: #e5b455; background: #2b2a26; }
.kronika-kafelek.aktywna { border-color: #edb34b; background: linear-gradient(120deg,#41331e,#25252a); box-shadow: inset 0 2px #edb34b; }
.kronika-kafelek > span:last-child { flex: 1; min-width: 0; }
.kronika-kafelek b { display: block; font: 500 16px var(--naglowek); }
.kronika-kafelek small { display: block; color: #b5bdc9; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 5px 0; }
.kronika-kafelek i { display: block; height: 3px; background: #0d1117; overflow: hidden; border-radius: 3px; }
.kronika-kafelek em { display: block; height: 100%; background: #e9b95c; }
.kronika-kafelek-znak { display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
.kronika-kafelek-znak img { width: 40px; height: 40px; display: block; }
.kronika-hero { overflow: hidden; }
.kampania-okladka { position: relative; min-height: 250px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 12px; padding: 24px; margin: -18px -18px 14px; background: radial-gradient(ellipse at 80% 70%,#70502866,transparent 60%), linear-gradient(110deg,#141a24,#30302c); }
.kampania-okladka h2, .inwestycja-okladka h2 { font: 600 clamp(30px,4vw,54px)/1.1 var(--naglowek); color: #fff0d3; margin: 12px 0; }
.kampania-okladka p { color: #c3c8d1; line-height: 1.55; }
.kampania-auto { min-width: 0; position: relative; }
.kampania-auto img { width: 100%; position: relative; filter: drop-shadow(0 18px 14px #0009); animation: kronika-odsloniecie .65s ease-out both; }
.kampania-auto i { position: absolute; left: 5%; right: 5%; bottom: 0; height: 24%; background: #f2b34522; border-radius: 50%; border: 1px solid #dc9e3455; }
.kampania-meta, .inwestycja-sterowanie { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; color: var(--tekst-cichy); margin-bottom: 15px; }
.kronika-tygodnie { display: grid; grid-template-columns: repeat(6,1fr); margin: 18px 0; }
.kronika-tygodnie > span { position: relative; display: grid; justify-items: center; gap: 6px; color: #9099aa; }
.kronika-tygodnie > span::before { content: ''; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: #414754; }
.kronika-tygodnie i { z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #586170; border-radius: 50%; background: #202630; font: 500 15px var(--naglowek); }
.kronika-tygodnie .teraz i { color: #241807; background: #f0b429; border-color: #f0b429; box-shadow: 0 0 0 5px #f0b42918; }
.kronika-tygodnie .zaliczony i { color: #83eab2; border-color: #52856c; }
.kampania-nastepna { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; padding: 12px; background: #eab34a0c; border-left: 3px solid #d9a641; }
.kampania-nastepna span { color: #b2bac7; font-size: 12px; }
.kampania-nastepna strong { margin-left: auto; color: #edc370; font-size: 12px; }
.cel-kampanii-znak { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; }
.cel-kampanii-znak img { width: 44px; height: 44px; display: block; }
.cel-kampanii.gotowy { border-color: #68b68a; }
.kronika-nagroda { position: relative; padding: 18px 12px; text-align: center; align-items: center; background: linear-gradient(160deg,#2b303a,#171c24); border: 1px solid #414955; }
.kronika-nagroda-medal { display: grid; place-items: center; width: 52px; height: 58px; font-style: normal; font-size: 29px; color: #beaa80; background: linear-gradient(135deg,#584a32,#242831); clip-path: polygon(50% 0,94% 22%,94% 74%,50% 100%,6% 74%,6% 22%); margin-bottom: 7px; }
.kronika-nagroda.dostepna .kronika-nagroda-medal { color: #fff3c9; background: linear-gradient(135deg,#f4cb68,#8b5725); }
.kronika-nagroda .btn { width: 100%; margin-top: auto; }
.legenda-karta { overflow: hidden; background: linear-gradient(155deg,#2b313a,#181d25); }
.legenda-karta .legenda-miniatura { height: 160px; margin: -12px -12px 12px; padding: 15px; background: radial-gradient(ellipse at 50% 85%,#98732a44,transparent 70%),#141a22; }
.legenda-numer { color: #d6ad5f; font: 500 10px var(--naglowek); letter-spacing: .16em; }
.legenda-obraz img { opacity: 1; filter: grayscale(var(--szarosc,1)) brightness(.9) drop-shadow(0 15px 12px #0009); }
.frakcja-glowka { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.frakcja-glowka small { color: #b9c3d4; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.frakcja-emblemat.z-herbem { background: none; clip-path: none; }
.frakcja-emblemat img { width: 55px; height: 55px; display: block; }
.etap-z-ikona { display: flex; align-items: center; gap: 10px; }
.etap-z-ikona img { width: 40px; height: 40px; flex: none; }
.frakcja-emblemat { display: grid; place-items: center; flex: none; width: 55px; height: 62px; color: #f6cc7a; background: linear-gradient(145deg,#685135,#252c35); clip-path: polygon(0 0,100% 0,100% 76%,50% 100%,0 76%); font: 600 20px var(--naglowek); }
.inwestycja-okladka { position: relative; isolation: isolate; overflow: hidden; padding: 24px; margin-bottom: 16px; border-radius: 8px; background: #152128; }
.inwestycja-okladka::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg,#102026 15%,#23353a 70%,#564726); }
.inwestycja-okladka::after { content: ''; position: absolute; z-index: -1; width: 42%; height: 140%; right: -6%; top: -30%; border: 28px solid #cfb16a18; border-radius: 45%; transform: rotate(-25deg); box-shadow: 0 0 0 2px #cfb16a25,inset 0 0 0 2px #cfb16a25; pointer-events: none; }
.inwestycja-okladka-tresc { max-width: 75%; }
.inwestycja-okladka p { color: #ced7dc; }
.inwestycja-premia { display: flex; gap: 10px; align-items: center; margin-top: 20px; }
.inwestycja-premia b { font: 600 40px var(--naglowek); color: #92e6b0; }
.inwestycja-premia span { max-width: 20ch; color: #c3d8cc; }
.inwestycja-maszyna { position: absolute; right: 18px; bottom: 24px; width: 76px; height: 76px; display: grid; place-items: center; border: 3px solid #d6ad5f; border-radius: 50%; background: #12212abc; color: #f0c871; font: 600 25px var(--naglowek); }
.inwestycja-maszyna b { line-height: 1; font-variant-numeric: tabular-nums; }
.liga-hero { background: linear-gradient(110deg,#1a2536f5,#18212adb),url('/img/wyscigi/asfalt.jpg') center/cover; }
.turniej-kanciapy { background: radial-gradient(ellipse at 100% 0,#a67d2b33,transparent 65%),var(--panel); }
.kubki-poziomy { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; margin-top: 16px; }
.kubki-poziomy .kubki-poziom { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 60px; padding: 12px 16px; text-align: left; white-space: normal; }
.kubki-poziom > span { display: grid; gap: 3px; }
.kubki-poziom small { color: #c2ccd7; font-size: 13px; text-transform: none; letter-spacing: normal; }
.kubki-poziom > strong { flex-shrink: 0; color: #ffd064; font-size: 15px; }
.kubki-poziom:focus-visible { outline: 2px solid #ffd064; outline-offset: 3px; }
.szlak-okladka { padding: 24px; border-radius: 8px; background: radial-gradient(ellipse at 100% 0,#ba813e55,transparent 70%),linear-gradient(120deg,#17272d,#20252c); }
.szlak-okladka small { color: #f0c871; letter-spacing: .12em; }
.szlak-okladka h2 { font: 600 clamp(26px,4vw,42px) var(--naglowek); margin: 8px 0; }
.szlak-okladka p { max-width: 65ch; color: #d4dce1; }
.szlak-mapa { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 20px 0; list-style: none; }
.szlak-mapa li { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--kreska); border-radius: 8px; min-width: 0; }
.szlak-mapa li > b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #303844; }
.szlak-mapa small { display: block; font-size: 11px; color: var(--tekst-cichy); }
.szlak-mapa .teraz { border-color: var(--tasma); }
.szlak-mapa .gotowy > b { color: #101e16; background: #87d6a4; }
.szlak-opcje { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.szlak-opcje article { min-width: 0; display: flex; flex-direction: column; padding: 16px; background: var(--panel-2); border: 1px solid var(--kreska); border-radius: 8px; }
.szlak-opcje .wybrana { border-color: var(--tasma); }
.szlak-opcje p { color: #bbc6d0; margin: 8px 0 16px; }
.szlak-opcje article > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: auto; }
.szlak-opcje button { min-height: 44px; }
.szlak-pamiatka,.szlak-wynik { padding: 14px; margin-top: 14px; border-left: 3px solid var(--tasma); background: #d4a23312; }
.szlak-panel details { margin: 12px 0; }
.szlak-panel summary { cursor: pointer; padding: 12px 0; color: #f0c871; }
.szlak-panel details p { margin: 10px 0; }
@media(max-width: 850px) { .szlak-opcje { grid-template-columns: 1fr; } .szlak-mapa { grid-template-columns: 1fr; gap: 6px; } }
.kronika-rozdzialy { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.kronika-rozdzialy article { min-width: 0; padding: 14px; border: 1px solid var(--kreska); border-radius: 8px; background: #151c25; }
.kronika-rozdzialy article.teraz { border-color: #bb944e; background: #42321c55; }
.kronika-rozdzialy small { color: #ebbe6a; text-transform: uppercase; font-size: 10px; }
.kronika-rozdzialy h3 { margin: 6px 0; }
.kronika-rozdzialy p { color: #b9c2cd; font-size: 12px; line-height: 1.5; }
.kronika-uroczystosc { text-align: center; padding: 20px 6px; background: radial-gradient(ellipse at 50% 20%,#d2a44122,transparent 70%); }
.kronika-uroczystosc img { max-width: 100%; max-height: 180px; object-fit: contain; }
.kronika-uroczystosc > b { display: block; font: 600 30px var(--naglowek); color: #f4cf7c; margin: 12px 0; }
@keyframes kronika-odsloniecie { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .kronika-przelaczniki { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) {
  .etykieta-sekcji { position: absolute; top: 1px; right: 2px; font-size: 7px; background: #25231c; }
  .kronika-pulpit { padding: 18px; }
  .kronika-pulpit-tresc { max-width: 100%; }
  .kronika-pulpit p { display: none; }
  .kronika-pulpit-auto { opacity: .12; width: 65%; }
  .kronika-pulpit h1 { max-width: 22ch; font-size: 27px; }
  .kronika-pulpit-liczby { gap: 7px 14px; }
  .kronika-kafelek { padding: 10px; min-height: 88px; }
  .kronika-kafelek-znak { display: none; }
  .kronika-kafelek b { font-size: 16px; }
  .kampania-okladka { grid-template-columns: 1fr; padding: 20px; margin: -12px -12px 12px; gap: 0; }
  .kampania-okladka h2 { font-size: 40px; }
  .kampania-auto { max-width: 280px; width: 80%; justify-self: center; }
  .kampania-okladka .kronika-punkty { margin: 6px 0; }
  .kampania-nastepna { display: grid; }
  .kampania-nastepna strong { margin-left: 0; }
  .kronika-nagrody { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kronika-rozdzialy { grid-template-columns: 1fr; }
  .inwestycja-okladka { padding: 18px; }
  .inwestycja-okladka-tresc { max-width: 100%; }
  .inwestycja-okladka h2 { font-size: 34px; }
  .inwestycja-maszyna { display: none; }
  .cel-kampanii-znak { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .kampania-auto img { animation: none; } }

/* ------------------------------------------------------------------------- */
/* Otwarty warsztat: karta cudzego placu                                     */
/* ------------------------------------------------------------------------- */
[data-karta-warsztatu].klikalny, .gracz.klikalny { cursor: pointer; }
[data-karta-warsztatu].klikalny:hover, .gracz.klikalny:hover { text-decoration: underline; }
.karta-warsztatu { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.karta-gora { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.karta-nazwa { font-family: var(--naglowek); font-size: 20px; }
.karta-gora .staty { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.karta-sekcja { border-top: 1px solid var(--kreska); padding-top: 10px; }
.karta-naglowek {
  font-family: var(--naglowek); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tasma); margin-bottom: 8px;
}
.karta-polecenia {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--tasma-blask); border: 1px solid var(--tasma-ciemna); border-radius: var(--radius); padding: 10px 12px;
}
.karta-licznik { font-size: 22px; color: var(--tasma); margin-right: 4px; }
.karta-podjazd { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.karta-auto {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--kreska); border-radius: var(--radius); padding: 6px;
}
.karta-auto.perla { border-color: var(--tasma); box-shadow: 0 0 8px var(--tasma-blask); }
.karta-auto img { width: 100%; height: 60px; object-fit: contain; }
.karta-auto span { font-size: 12px; line-height: 1.2; }
.karta-auto small { font-size: 11px; color: var(--tekst-cichy); }
.karta-plakietki { display: flex; flex-wrap: wrap; gap: 6px; }
.karta-plakietki [data-karta-warsztatu] { cursor: pointer; }
.plakietka.legenda { border-color: var(--tasma); color: var(--tasma); }
.karta-ksiega { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.karta-wpis {
  position: relative; background: var(--panel-2); border-left: 3px solid var(--tasma-ciemna);
  border-radius: var(--radius); padding: 6px 28px 6px 10px; overflow-wrap: anywhere;
}
.karta-skasuj {
  position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--tekst-cichy);
  font-size: 16px; cursor: pointer;
}
.karta-skasuj:hover { color: var(--czerwony); }
.karta-forma { display: flex; gap: 6px; margin-top: 8px; }
.karta-forma input { flex: 1; min-width: 0; }
@media (max-width: 520px) {
  .karta-forma { flex-direction: column; }
  .karta-warsztatu .tabela td:nth-child(3) { display: none; }
}

/* ------------------------------------------------------------------------- */
/* Pożyczki pod słowo                                                        */
/* ------------------------------------------------------------------------- */
:root {
  --papier: #efe4c6;
  --papier-ciemny: #d9c99f;
  --atrament: #1e1911;
  --atrament-cichy: #43392a;
  --pieczec-czerwona: #b5322a;
}
.pozyczki { display: flex; flex-direction: column; gap: 0; }

.pozyczki-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 38%); align-items: center; gap: 12px;
  border-top: 3px solid var(--tasma);
  background: radial-gradient(ellipse at 85% 50%, rgba(240, 180, 41, .14), transparent 60%), var(--panel);
  overflow: hidden;
}
.pozyczki-hero-tekst small {
  font-family: var(--naglowek); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tasma);
}
.pozyczki-hero-tekst h2 { font-family: var(--naglowek); font-size: clamp(26px, 4vw, 40px); line-height: 1.05; margin: 6px 0 10px; }
.pozyczki-hero-tekst p { color: var(--tekst-cichy); max-width: 560px; margin-bottom: 14px; }
.pozyczki-hero-obraz { width: 100%; max-width: 360px; justify-self: end; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); transform: rotate(-4deg); }
.pozyczki-liczniki { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.pozyczki-liczniki span { color: var(--tekst-cichy); font-size: 13px; }
.pozyczki-liczniki b { font-family: var(--naglowek); font-size: 20px; color: var(--tekst); margin-right: 3px; }
.pozyczki-liczniki .zle b { color: var(--czerwony); }

/* Weksel: kartka papieru z pieczęcią. */
.weksle { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.weksel {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  color: var(--atrament); padding: 14px 16px 12px;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(107, 93, 69, .07) 25px 26px),
    linear-gradient(160deg, var(--papier), var(--papier-ciemny));
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 22px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.weksel::before {
  /* Ząbki po oderwaniu z bloczka. */
  content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 6px;
  background: radial-gradient(circle at 5px 0, transparent 4px, var(--papier) 4.5px) repeat-x;
  background-size: 10px 6px;
}
.weksle .weksel:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 16px 30px rgba(0,0,0,.55); }
.weksel-glowa {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--naglowek); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--atrament-cichy);
  border-bottom: 1px dashed rgba(43, 36, 25, .45); padding-bottom: 6px;
}
.weksel-kwota { font-family: var(--naglowek); font-size: 30px; line-height: 1.1; color: var(--atrament); letter-spacing: .01em; }
.weksel-linia, .weksel-drobny, .weksel-termin { font-size: 14px; color: var(--atrament-cichy); font-weight: 500; }
.weksel-linia b, .weksel-termin b { color: var(--atrament); }
.weksel-drobny { font-size: 12.5px; }
.weksel-naco { font-style: italic; font-size: 15px; color: #33291b; }
.weksel-kto { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 2px; }
.weksel-kto .gracz { color: #16305a; }
.weksel-poziom { font-size: 13px; color: var(--atrament-cichy); font-weight: 500; }
.weksel-historia { display: flex; flex-wrap: wrap; gap: 4px; }
.weksel-stopka {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  border-top: 1px dashed rgba(43, 36, 25, .45); padding-top: 8px; margin-top: 2px; font-size: 14px; font-weight: 500;
}
.weksel-stopka .dobry { color: #15603a; }
.weksel-stopka .zle { color: var(--pieczec-czerwona); }
.weksel-stopka small { color: var(--atrament-cichy); font-size: 12px; }
.weksel-blokada {
  font-size: 13px; font-weight: 600; color: var(--atrament-cichy); border: 1px solid rgba(43,36,25,.45); border-radius: 3px; padding: 4px 8px;
}
.weksel-moj { max-width: 520px; }
.weksel-moj.pilny { box-shadow: 0 0 0 2px var(--pieczec-czerwona), 0 10px 22px rgba(0,0,0,.45); }
.weksel-termin.zle, .weksel-termin.zle b { color: var(--pieczec-czerwona); }

/* Pieczęć: okrągła, krzywo przybita, lekko wytarta. */
.pieczec {
  display: inline-grid; place-items: center; min-width: 58px; height: 58px; padding: 0 6px;
  border: 3px double #13552f; border-radius: 50%;
  color: #13552f; font: 700 18px var(--naglowek); letter-spacing: .02em;
  transform: rotate(-12deg); opacity: .95; margin: -8px -6px -10px 0;
  mask-image: radial-gradient(circle at 30% 70%, rgba(0,0,0,.85), #000 60%);
}
.pieczec-czerwona {
  border-color: var(--pieczec-czerwona); color: var(--pieczec-czerwona);
  border-radius: 6px; height: auto; min-width: 0; padding: 6px 12px; margin: 0;
  font-size: 15px; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-6deg);
}
.pieczec-czerwona.mala { font-size: 11px; padding: 3px 8px; border-width: 2px; }

/* Formularz weksla */
.weksel-formularz { max-width: 560px; gap: 10px; }
.suwak-weksla { display: flex; flex-direction: column; gap: 4px; }
.suwak-weksla > span { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 600; color: var(--atrament); }
.suwak-weksla > span b { font-family: var(--naglowek); font-size: 22px; color: var(--atrament); }
.suwak-weksla small { font-size: 12.5px; font-weight: 500; color: var(--atrament-cichy); }
.suwak-weksla input[type="range"] { width: 100%; accent-color: #7a4c0c; height: 22px; }
.suwak-weksla input[type="text"] {
  background: rgba(255,255,255,.45); border: 1px solid rgba(43,36,25,.35); color: var(--atrament);
  border-radius: 3px; padding: 7px 9px; font: inherit;
}
.weksel-podsumowanie {
  display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 500; color: var(--atrament);
  background: rgba(255,255,255,.55); border-left: 4px solid #7a4c0c; padding: 10px 12px;
}
.weksel-podsumowanie .dobry { color: #15603a; }
.weksel-podsumowanie .zle { color: var(--pieczec-czerwona); }
.weksel-guzik { align-self: flex-start; }

.pozyczka-pasek { height: 7px; border-radius: 4px; background: rgba(0,0,0,.18); overflow: hidden; }
.pozyczka-pasek i { display: block; height: 100%; background: linear-gradient(90deg, #2f8f55, #5ddc93); }
.pozyczka-pasek.czerwony i { background: linear-gradient(90deg, #8e241e, var(--czerwony)); }
.pozyczka-splata { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.pozyczka-splata input { width: 150px; }
.pozyczka-kwoty { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 8px; font-size: 14px; }
.pozyczka-kwoty b { font-family: var(--naglowek); font-size: 19px; }

.znaczek-kredytu {
  display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px;
  background: rgba(43, 36, 25, .12); color: inherit; white-space: nowrap;
}
.panel .znaczek-kredytu { background: var(--panel-3); color: var(--tekst-cichy); }
.znaczek-kredytu.dobry { background: rgba(30, 122, 69, .18) !important; color: #3fb872 !important; }
.panel .weksel .znaczek-kredytu { background: rgba(43, 36, 25, .12); color: var(--atrament); font-weight: 600; }
.weksel .znaczek-kredytu.dobry { color: #1e6a3f !important; }
.znaczek-kredytu.ostrzega { background: rgba(240, 180, 41, .2) !important; color: #c98d0a !important; }
.znaczek-kredytu.zly { background: rgba(181, 50, 42, .2) !important; color: #e0554c !important; }
.weksel .znaczek-kredytu.zly { color: var(--pieczec-czerwona) !important; }

/* Moje pożyczki na mieście */
.inwestycja {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--kreska);
}
.inwestycja:last-child { border-bottom: 0; }
.inwestycja small { display: block; color: var(--tekst-cichy); font-size: 12px; margin-top: 3px; }

/* Komornik */
.komornik-panel {
  position: relative; border-color: var(--pieczec-czerwona);
  background:
    repeating-linear-gradient(-45deg, rgba(181, 50, 42, .09) 0 14px, transparent 14px 28px), var(--panel);
}
.komornik-panel .tytul { color: var(--czerwony); }
.komornik-panel > .pieczec { position: absolute; right: 18px; top: 16px; font-size: 13px; background: rgba(20, 22, 26, .6); }

/* Rejestr dłużników */
.rejestr-dluznikow { border-color: #5e2a26; }
.rejestr-dluznikow::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: repeating-linear-gradient(-45deg, var(--pieczec-czerwona) 0 10px, #111 10px 20px);
}
.rejestr-dluznikow { position: relative; }
.rejestr-dluznikow .tytul { color: var(--czerwony); }
.dluznik {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(140px, 220px); gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--kreska);
}
.dluznik:last-of-type { border-bottom: 0; }
.dluznik > .pieczec { justify-self: start; }
.dluznik-kto small { display: block; color: var(--tekst-cichy); font-size: 12px; margin-top: 3px; }
.dluznik-kwota { text-align: right; }
.dluznik-kwota b { font-family: var(--naglowek); font-size: 20px; color: var(--czerwony); }
.dluznik-kwota small { display: block; color: var(--tekst-cichy); font-size: 11.5px; margin-top: 3px; }
.dluznik-kwota .pozyczka-pasek { margin-top: 4px; }
.rejestr-splacili { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }

/* Znaczek przy nazwie: widać go wszędzie, gdzie pada nazwa dłużnika. */
.znak-dluznika {
  display: inline-block; font: 600 9.5px var(--naglowek); letter-spacing: .1em; line-height: 1;
  color: #fff; background: var(--pieczec-czerwona); border-radius: 2px; padding: 3px 4px 2px;
  vertical-align: 2px; text-shadow: none;
}
.karta-dluznik {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--pieczec-czerwona); background: rgba(181, 50, 42, .12);
}

@media (max-width: 640px) {
  .pozyczki-hero { grid-template-columns: 1fr; }
  .pozyczki-hero-obraz { max-width: 220px; justify-self: center; order: -1; margin-bottom: -6px; }
  .inwestycja { grid-template-columns: 1fr; gap: 6px; }
  .dluznik { grid-template-columns: 1fr; gap: 6px; }
  .dluznik-kwota { text-align: left; }
  .komornik-panel > .pieczec { position: static; margin-bottom: 8px; }
  .pozyczka-splata input { width: 100%; }
}

/* Zakładki w Pożyczkach: te same kafelki co w Kronice. */
.pozyczki-przelaczniki { margin-bottom: 14px; }
.kronika-kafelek.alarm small { color: #ff8a82; }
.kronika-kafelek.alarm em { background: var(--czerwony); }
.pozyczki-alarm {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--tasma-ciemna); background: var(--tasma-blask);
}
.pozyczki-alarm .btn { margin-left: auto; }
.pozyczki-alarm.zly {
  border-color: var(--pieczec-czerwona);
  background: repeating-linear-gradient(-45deg, rgba(181, 50, 42, .16) 0 12px, rgba(181, 50, 42, .08) 12px 24px);
}
.pozyczki-hero { padding-top: 14px; padding-bottom: 14px; }
.pozyczki-hero-tekst h2 { margin: 4px 0 8px; }
.pozyczki-hero-tekst p { margin-bottom: 10px; }
.pozyczki-hero-obraz { max-width: 300px; }

/* Licytacja: lista licytujących i rozkład młotków */
.licytujacy { margin-top: 16px; border-top: 1px solid var(--kreska); padding-top: 12px; }
.licytujacy-glowa {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px;
  font-family: var(--naglowek); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tasma);
}
.licytujacy-glowa .cichy { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; }
.oferta-licytacji {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 76px 76px; gap: 10px; align-items: center;
  padding: 7px 8px; border-radius: var(--radius);
}
.oferta-licytacji + .oferta-licytacji { border-top: 1px solid var(--kreska); }
.oferta-licytacji.prowadzi { background: var(--tasma-blask); border: 1px solid var(--tasma-ciemna); }
.oferta-licytacji.przebita .oferta-kwota { color: var(--tekst-cichy); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.oferta-licytacji.moja .oferta-kto { font-weight: 600; }
.oferta-miejsce { text-align: center; }
.oferta-kto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oferta-kwota { font-family: var(--naglowek); font-size: 17px; text-align: right; }
.oferta-licytacji.prowadzi .oferta-kwota { color: var(--tasma); font-size: 19px; }
.oferta-kiedy, .oferta-stan { font-size: 12px; text-align: right; }
.rozklad-licytacji { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.rozklad-licytacji span {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; font-size: 12.5px;
  border: 1px solid var(--kreska); border-radius: var(--radius); background: var(--panel-2); color: var(--tekst-cichy);
}
.rozklad-licytacji span b { font-family: var(--naglowek); font-size: 18px; color: var(--tekst); }
.rozklad-licytacji span.auto { border-color: var(--tasma-ciemna); background: var(--tasma-blask); color: var(--tekst); }
.rozklad-licytacji span.auto b { color: var(--tasma); }
.rozklad-licytacji small { font-size: 11px; color: var(--tekst-cichy); }
@media (max-width: 640px) {
  .rozklad-licytacji { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oferta-licytacji { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .oferta-kiedy, .oferta-stan { display: none; }
}

/* Mapa okolicy */
.mapa-okolicy { padding-bottom: 14px; }
.mapa-scena { position: relative; margin: 0 -2px 12px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--kreska); }
.mapa-plotno {
  display: block; width: 100%; touch-action: none; cursor: grab; background: #14161a;
  /* Stała wysokość z małego widoku telefonu: pasek adresu przy przewijaniu jej nie rusza. */
  height: clamp(360px, 72vh, 720px);
  height: clamp(360px, 72svh, 720px);
}
.mapa-plotno:active { cursor: grabbing; }
.mapa-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: flex; flex-direction: column; align-items: stretch; width: 52px; padding: 3px; border: 1px solid #b89b5966; border-radius: 12px; background: #151e25f5; box-shadow: 0 5px 18px #0007; }
.mapa-zoom button { display: grid; place-items: center; width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: #ffe0a0; font-size: 29px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.mapa-zoom button:hover:not(:disabled) { background: #f0b42925; color: #fff3d8; }
.mapa-zoom button:focus-visible { outline: 2px solid #f0b429; outline-offset: -2px; }
.mapa-zoom button:disabled { opacity: .3; cursor: default; }
.mapa-zoom output { text-align: center; color: #c7cfce; font: 11px/20px sans-serif; font-variant-numeric: tabular-nums; }
.mapa-zoom .mapa-calosc { font: 600 11px/1.25 sans-serif; border-top: 1px solid #c4ac7033; border-radius: 0 0 8px 8px; margin-top: 3px; }
@media(max-width: 560px) { .mapa-zoom { right: 8px; bottom: 8px; } }
.mapa-okolicy > .tytul { color: #eac783; }
.mapa-scena { border-color: #8d78444d; box-shadow: 0 8px 28px #0004; background: #233236; }
.mapa-panel .mapa-guziki { gap: 8px; }
.mapa-panel .mapa-guziki .btn { min-height: 40px; }
.mapa-dymek {
  position: absolute; pointer-events: none; z-index: 2; max-width: 260px;
  padding: 5px 9px; font-size: 12.5px; border-radius: var(--radius);
  background: rgba(13, 15, 18, .92); border: 1px solid var(--kreska-jasna); color: var(--tekst);
}
.mapa-panel { display: flex; flex-direction: column; gap: 8px; }
.mapa-guziki { display: flex; flex-wrap: wrap; gap: 6px; }
.mapa-podpowiedz { padding: 8px 10px; border-radius: var(--radius); background: var(--tasma-blask); border: 1px solid var(--tasma-ciemna); }
.mapa-miejsce { padding: 10px 12px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--kreska); display: flex; flex-direction: column; gap: 4px; }
.mapa-legenda { font-size: 12.5px; }

/* Wycieczki na mapie */
.mapa-trasa { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--tasma-ciemna); background: var(--tasma-blask); }
.mapa-trasa .btn { align-self: flex-start; }
.mapa-trasa.dojechal { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: #5ddc93; background: rgba(93, 220, 147, .12); }
.mapa-wycieczka { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--kreska); }
.mapa-wycieczka-obraz { width: 140px; height: 105px; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--kolor, var(--tasma)); background: #1b1e24; }
.mapa-wycieczka-obraz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapa-wycieczka-obraz.bez-obrazu { background: radial-gradient(circle, rgba(240,180,41,.18), transparent 70%), #1b1e24; }
.mapa-wycieczka-opis { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mapa-wycieczka-opis p { margin: 0; }
.wycieczka-okno { display: flex; flex-direction: column; gap: 12px; }
.wycieczka-okno-obraz { margin: -6px -6px 0; border-radius: var(--radius); overflow: hidden; max-height: 240px; }
.wycieczka-okno-obraz img { width: 100%; display: block; object-fit: cover; max-height: 240px; }
.wycieczka-historia { font-size: 15.5px; line-height: 1.5; }
.wycieczka-wybory { display: flex; flex-direction: column; gap: 8px; }
.wycieczka-wybory .btn { text-align: left; white-space: normal; line-height: 1.35; padding: 10px 14px; }
.wycieczka-skarb { font-family: var(--naglowek); font-size: 18px; color: #5ddc93; }
.wycieczka-lup { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.album-miejsc { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.album-miejsce { display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--kreska); }
.album-miejsce.komplet { border-color: var(--kolor); box-shadow: 0 0 10px color-mix(in srgb, var(--kolor) 35%, transparent); }
.album-miejsce.nieznane { opacity: .5; }
.album-miejsce.nieznane img { filter: grayscale(1) brightness(.3); }
.album-miejsce-obraz { aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; background: #1b1e24; }
.album-miejsce-obraz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-miejsce small { color: var(--tekst-cichy); font-size: 11px; }
@media (max-width: 560px) {
  .mapa-wycieczka { grid-template-columns: 1fr; }
  .mapa-wycieczka-obraz { width: 100%; height: 150px; }
}

/* Mapa: nakładka ze stanem wycieczki, okno miejsca, znaleziska i gablota */
.mapa-nakladka {
  position: absolute; left: 10px; top: 10px; right: 10px; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
.mapa-nakladka > * { pointer-events: auto; }
.mapa-nakladka .mapa-trasa { max-width: 420px; backdrop-filter: blur(4px); background: rgba(20, 22, 26, .88); }
.mapa-nakladka .mapa-trasa.dojechal { background: rgba(20, 40, 28, .92); }
.mapa-gablota { margin-left: auto; background: rgba(20, 22, 26, .88); }
.wycieczka-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wycieczka-skarb-opis { padding: 10px 12px; border-radius: var(--radius); border: 1px solid #5ddc93; background: rgba(93, 220, 147, .1); }
.wycieczka-skarb-opis ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.wycieczka-znaleziska { display: flex; flex-direction: column; gap: 6px; }
.znalezisko {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--kreska); border-left: 4px solid var(--kolor);
}
.znalezisko small { color: var(--tekst-cichy); font-size: 12px; }
.znalezisko.brak { opacity: .55; }
.znalezisko-nowe {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--radius);
  border: 2px solid var(--kolor); background: color-mix(in srgb, var(--kolor) 14%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--kolor) 35%, transparent);
}
.znalezisko-nowe small { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--kolor); }
.znalezisko-nowe b { font-family: var(--naglowek); font-size: 19px; }
.znalezisko-nowe.duplikat { box-shadow: none; opacity: .8; }
.gablota-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
@media (max-width: 560px) {
  .mapa-nakladka { left: 6px; right: 6px; top: 6px; }
  .mapa-nakladka .mapa-trasa { max-width: none; width: 100%; }
}

/* Instrukcja instalacji na iPhonie. Na górze ekranu, bo dół w Safari należy
   do paska przeglądarki i właśnie przed nim ta instrukcja ma chronić. */
.instalacja-okno {
  position: fixed; z-index: 95;
  top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px;
  margin: 0 auto; max-width: 520px;
  max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, var(--panel), #1b1f25);
  border: 1px solid var(--kreska); border-top: 3px solid var(--tasma);
  border-radius: var(--radius-duzy);
  box-shadow: 0 18px 50px rgba(0,0,0,.7);
  font-size: 14px; line-height: 1.45;
  animation: wjazd-okna .26s cubic-bezier(.2,.9,.3,1);
}
.instalacja-naglowek { display: flex; gap: 12px; align-items: flex-start; padding-right: 26px; }
.instalacja-naglowek > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.instalacja-naglowek b { color: var(--tasma); font-family: var(--naglowek); font-size: 17px; letter-spacing: .02em; }
.instalacja-naglowek span { color: var(--tekst-cichy); font-size: 13px; }
.instalacja-ikona { width: 48px; height: 48px; border-radius: 11px; flex: none; }
.instalacja-kroki { margin: 14px 0 12px; padding: 0; list-style: none; counter-reset: krok; display: flex; flex-direction: column; gap: 10px; }
.instalacja-kroki li { position: relative; padding-left: 36px; counter-increment: krok; }
.instalacja-kroki li::before {
  content: counter(krok);
  position: absolute; left: 0; top: 0;
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tasma); color: #16181b;
  font-family: var(--naglowek); font-weight: 700; font-size: 14px;
}
.instalacja-kroki b { color: var(--tekst); }
.instalacja-kroki small { display: block; margin-top: 3px; color: var(--tekst-cichy); font-size: 12.5px; }
/* Ikonki z iOS: niebieskie jak w arkuszu udostępniania Safari. */
.instalacja-ikonka {
  display: inline-block; width: 22px; height: 22px; vertical-align: -5px;
  margin: 0 1px; padding: 1px;
  background: #f2f2f7; border-radius: 6px;
  fill: none; stroke: #0a84ff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.instalacja-ikonka .pelne { fill: #0a84ff; stroke: none; }
.instalacja-pozniej { width: 100%; min-height: 40px; }
.instalacja-x {
  position: absolute; top: 4px; right: 4px;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; color: var(--tekst-cichy); font-size: 22px;
}

/* Mrugnięcie po stuknięciu: palec zasłania guzik, więc reakcja musi być widoczna wokół niego. */
.stukniete { animation: stukniecie .34s ease-out; }
@keyframes stukniecie {
  0% {
    filter: brightness(1.6) saturate(1.15);
    box-shadow: 0 0 0 2px rgba(240,180,41,.8), 0 0 18px rgba(240,180,41,.5);
  }
}

/* Układanie dolnego paska: przytrzymanie nie zaznacza tekstu ani nie otwiera dymku systemu. */
html.aplikacja-natywna .mobile-dol > button,
html.aplikacja-natywna #nawigacja > button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.mobile-ukladanie-pasek { display: none; }
html.mobile-ukladanie .mobile-ukladanie-pasek {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--tasma); border-radius: 10px;
  background: rgba(240,180,41,.07);
  font-size: 12.5px; line-height: 1.45; color: var(--tekst-cichy);
}
.mobile-ukladanie-pasek b { color: var(--tasma); }
.mobile-ukladanie-pasek > div { display: flex; gap: 8px; justify-content: flex-end; }
.mobile-ukladanie-pasek .btn { min-height: 38px; }
html.mobile-ukladanie .mobile-dol > [data-miejsce] {
  outline: 1px dashed rgba(240,180,41,.65); outline-offset: -3px;
  animation: drgaj-miejsce .9s ease-in-out infinite;
}
html.mobile-ukladanie .mobile-dol > [data-miejsce]:nth-child(even) { animation-delay: -.45s; }
@keyframes drgaj-miejsce { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
html.mobile-ukladanie .mobile-dol > [data-miejsce].cel {
  background: rgba(240,180,41,.25); outline: 2px solid var(--tasma); animation: none;
}
html .mobile-dol > [data-miejsce].wskoczylo { animation: wskocz-miejsce .36s cubic-bezier(.2,.9,.3,1.4); }
@keyframes wskocz-miejsce { from { transform: scale(.55); } }
.mobile-wybrana { box-shadow: inset 0 0 0 2px var(--tasma), 0 0 14px rgba(240,180,41,.35) !important; }
.mobile-duch {
  position: fixed; left: 0; top: 0; z-index: 120;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 10px;
  background: rgba(30,34,40,.96);
  border: 1px solid var(--tasma); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.65);
}
.mobile-duch img { width: 34px; height: 34px; }
.mobile-duch b { font: 600 11px var(--naglowek); color: var(--tasma); white-space: nowrap; }
/* Style przycisków menu przykrywały zwykły wygląd guzika: „Gotowe” ma być głównym działaniem. */
html.mobile-ukladanie .mobile-ukladanie-pasek [data-mobile-ukladanie-gotowe] {
  background: linear-gradient(180deg, #f5c04a, var(--tasma));
  color: #17130a; border: 1px solid #b98512; min-width: 96px;
}

/* Dostawczak w Magazynie: pasek z autem pod bramą, ładowanie paki i kurs w trasie. */
.dostawczak-panel {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(240,180,41,.07), rgba(240,180,41,.02));
  border: 1px solid rgba(240,180,41,.28); border-left: 3px solid var(--tasma);
  border-radius: var(--radius);
}
.dostawczak-panel.cichy { display: block; background: none; border-color: var(--kreska); border-left-color: var(--kreska); }
.dostawczak-ikona { width: 40px; height: 40px; flex: none; }
.dostawczak-tresc { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dostawczak-tresc > b { color: var(--tasma); font-family: var(--naglowek); letter-spacing: .02em; }
.dostawczak-tresc .pasek-roboty { margin-top: 4px; }
.dostawczak-wysylka { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 4px; }
.dostawczak-wysylka select { max-width: 100%; }
.dostawczak-akcje { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.paka-przyciski { align-items: center; }
.paka-przyciski .paka-ile { min-width: 26px; text-align: center; color: var(--tasma); font-family: var(--naglowek); }

/* Instrukcja otwarta z komputera albo Androida: krok zero, czyli iPhone i Safari. */
.instalacja-kroki li.instalacja-zero { counter-increment: none; }
.instalacja-kroki li.instalacja-zero::before { content: '0'; background: #3a3f47; color: #fff; }

/* Android: systemowe okno instalacji Chrome jednym przyciskiem, kroki z menu jako zapas. */
.instalacja-teraz { width: 100%; min-height: 42px; margin-top: 12px; }
.instalacja-albo { margin: 8px 0 -6px; font-size: 12.5px; text-align: center; }

/* Ściąga dla innych przeglądarek Androida: zwinięta, żeby nie przytłaczać głównych kroków. */
.instalacja-przegladarka { margin: 12px 0 -4px; font-size: 12.5px; }
.instalacja-inne { margin: 2px 0 12px; font-size: 13px; }
.instalacja-inne summary { cursor: pointer; color: var(--tasma); padding: 6px 0; }
.instalacja-inne > div { margin: 8px 0 0; }
.instalacja-inne ol { margin: 4px 0 0 20px; color: var(--tekst-cichy); }
.instalacja-inne ol li { margin: 2px 0; }
.instalacja-inne ol b { color: var(--tekst); }
.instalacja-inne p { margin-top: 8px; font-size: 12.5px; }

/*
 * Części w Sklepie na telefonie: karta zamiast wiersza tabeli.
 * Tabela miała ~1150 px szerokości, więc do ceny i guzików kupna trzeba było
 * przewijać w bok. Teraz nazwa i cena u góry, opis w jednej linii, a guziki
 * pełną szerokością pod spodem, duże pod kciuk.
 */
@media (max-width: 760px) {
  .tabela-czesci thead { display: none; }
  .tabela-czesci, .tabela-czesci tbody { display: block; width: 100%; }
  .tabela.tabela-czesci tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px;
    padding: 9px 0; border-bottom: 1px solid var(--kreska);
  }
  .tabela.tabela-czesci td { display: block; padding: 0 !important; border: 0 !important; }
  .tabela-czesci td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
  .tabela-czesci td:nth-child(1) .cichy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  .tabela-czesci td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
  .tabela-czesci td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; font-size: 11px; }
  .tabela-czesci td:nth-child(4) {
    grid-column: 1 / -1; grid-row: 3;
    display: flex !important; gap: 6px; margin-top: 7px;
    text-align: left !important; white-space: normal !important;
  }
  .tabela-czesci td:nth-child(4) .btn { flex: 1 1 0; min-height: 36px; padding: 0 4px; }
  .tabela-czesci td:nth-child(4) .ile-recznie { flex: 0 0 60px; width: 60px !important; min-height: 36px; padding: 0 6px; }
}

/* Pakiet w belce: sam emblemat w złotej pigułce, nazwa w dymku. */
.belka .plakietka-emblemat { padding: 3px 7px; font-size: 15px; line-height: 1.2; cursor: default; }

/* Cyfry o stałej szerokości: „9 h 59 min” i „10 h 0 min” nie przesuwają sąsiadów. */
.belka .wskaznik b { font-variant-numeric: tabular-nums; }

/*
 * Dymki powiadomień pod każdym otwartym okienkiem. Wcześniej leżały nad oknem
 * i trzeba je było odsuwać, żeby cokolwiek w nim przeczytać albo kliknąć.
 * Po zamknięciu okna wracają na wierzch same, nic nie ginie.
 */
body:has(.zaslona) #powiadomienia,
body:has(.instalacja-okno) #powiadomienia { z-index: 70; }
.kariera-tor { background: radial-gradient(ellipse at right top, #79612c55, transparent 65%), linear-gradient(125deg, #252d35, #151b22); border-top: 3px solid var(--tasma); }
.kariera-tor h2 { font-size: clamp(24px, 4vw, 38px); margin: 18px 0 10px; }
.kariera-tor p { max-width: 75ch; margin: 12px 0; }
.kariera-tor .tytul { flex-wrap: wrap; gap: 10px; }
.kariera-tor .btn { min-height: 44px; }
.kariera-liczniki, .kariera-cele { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0; }
.kariera-liczniki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kariera-liczniki > span, .kariera-cele article { display: grid; gap: 8px; padding: 16px; background: #ffffff08; border: 1px solid #ffffff16; border-radius: 12px; }
.kariera-liczniki b { color: var(--tasma); font-size: 28px; }
.kariera-cele progress { width: 100%; height: 8px; accent-color: var(--tasma); }
.kariera-cele span { font-size: 13px; color: #bdc6d0; }
.kariera-tor summary { cursor: pointer; min-height: 44px; padding: 12px 0; }