/* PlayZeek — app.css. Plik generowany przez `php artisan pz:build-css`.
   NIE EDYTUJ RĘCZNIE — zmiany wprowadzaj w resources/css/. */

/* ===== resources/css/fonts.css ===== */
/* ==========================================================================
   PlayZeek — fonty (self-hosted)
   Pliki woff2 leżą w public/fonts/, subsety latin + latin-ext (polskie znaki).
   Bez Google Fonts: zero zewnętrznych zapytań, zero problemu z RODO,
   zero zależności od CDN przy braku sieci.

   Archivo        — display (nagłówki, przyciski, nazwy drużyn), font zmienny
                    o osiach wdth 75–125 i wght 400–900.
   IBM Plex Sans  — treść, font zmienny wght 100–700.
   IBM Plex Mono  — liczby (wyniki, odliczania, sloty, pule, ID meczów),
                    statyczne wagi 500 i 600.
   ========================================================================== */

/* --- Archivo (zmienny: wdth 75–125, wght 400–900) ------------------------ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- IBM Plex Sans (zmienny: wght 100–700) ------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- IBM Plex Mono (statyczny: 500, 600) --------------------------------- */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== resources/css/tokens.css ===== */
/* ==========================================================================
   PlayZeek — tokeny systemu projektowego
   Źródło prawdy: design/tokens/tokens.css (v0.7). Ten plik jest jego kopią
   rozszerzoną o wartości potrzebne w responsywności (marginesy, wysokości
   pasków, breakpointy).

   ZASADA: w żadnym innym pliku CSS ani w widoku nie wpisujemy kolorów
   ani rodzin fontów wprost — wyłącznie przez var(--pz-*).
   ========================================================================== */

:root {
  /* --- Podłoże i powierzchnie --- */
  --pz-bg:            #0A0B0F;
  --pz-bg-alt:        #0D0F14;
  --pz-bg-deep:       #08090C;   /* pasek górny, stopka, sidebar CMS */
  --pz-surface:       #12141A;
  --pz-surface-2:     #171A22;
  --pz-surface-3:     #1F2430;

  /* --- Tekst --- */
  --pz-text-1:        #F4F6FA;
  --pz-text-2:        #A6AFC2;
  --pz-text-3:        #79839A;
  --pz-text-4:        #5F677C;

  /* --- Linie --- */
  --pz-line:          #252935;
  --pz-line-soft:     #1E212A;
  --pz-line-faint:    #1A1D25;
  --pz-line-strong:   #323848;
  --pz-line-active:   #4A5165;
  --pz-line-hover:    #3A4156;

  /* --- Akcent i stany --- */
  --pz-accent:        #C3F53C;   /* WYŁĄCZNIE „można teraz działać” */
  --pz-accent-hover:  #9ACC1F;
  --pz-live:          #FF3B4E;   /* WYŁĄCZNIE live i błędy */
  --pz-live-text:     #FF6B78;
  --pz-live-bg:       #2A1519;
  --pz-live-line:     #4A2029;
  --pz-warn:          #F5A524;   /* ostrzeżenia, rezerwa */
  --pz-warn-text:     #F5B75A;
  --pz-warn-bg:       #14140F;
  --pz-warn-line:     #4A3A1E;
  --pz-ok-text:       #A9D45E;
  --pz-muted:         #4A5165;
  --pz-disabled-bg:   #1A1D25;

  /* --- Gry: kolor jest wtórny, identyfikuje KOD --- */
  --pz-game-valorant: #FF4655;  /* VAL  */
  --pz-game-cs2:      #F5A524;  /* CS2  */
  --pz-game-lol:      #C8AA6E;  /* LOL  */
  --pz-game-dota2:    #E0553E;  /* DOTA */
  --pz-game-fortnite: #8B5CF6;  /* FN   */
  --pz-game-eafc:     #2ED4A5;  /* FC   */
  --pz-game-ow2:      #E8629B;  /* OW   */
  --pz-game-apex:     #FF6B3D;  /* APEX */
  --pz-game-sc2:      #4DA3FF;  /* SC2  */
  --pz-game-wot:      #8E9B6B;  /* WOT  */
  --pz-game-wc3:      #26C6DA;  /* WC3  */

  /* --- Medale --- */
  --pz-gold:          #F0C14B;
  --pz-silver:        #C6CEDA;
  --pz-bronze:        #C97A42;

  /* Strony CS2 w analizie dem (DEMO5) — zawsze razem z kształtem/literą, nigdy sam kolor */
  --pz-side-ct:       #5B9BFF;
  --pz-side-t:        #F0C14B;

  /* --- Typografia --- */
  --pz-font-display:  'Archivo', system-ui, sans-serif;
  --pz-font-body:     'IBM Plex Sans', system-ui, sans-serif;
  --pz-font-mono:     'IBM Plex Mono', ui-monospace, monospace;
  --pz-display-stretch: 112%;
  --pz-display-weight:  800;

  /* --- Odstępy --- */
  --pz-space-1: 4px;  --pz-space-2: 8px;  --pz-space-3: 12px;
  --pz-space-4: 16px; --pz-space-5: 24px; --pz-space-6: 32px;
  --pz-space-7: 48px; --pz-space-8: 64px;

  /* --- Promienie --- */
  --pz-radius-badge: 2px;
  --pz-radius-input: 4px;
  --pz-radius-card:  8px;

  /* --- Siatka --- */
  --pz-page-width:   1440px;
  --pz-grid-cols:    12;
  --pz-grid-gap:     24px;
  --pz-gamebar-max:  6;   /* maks. gier na pasku strony głównej */

  /* --- Wartości responsywne (nadpisywane w breakpointach niżej) ---------
     Mobile-first: zaczynamy od 360 px i rośniemy do 1440+.               */
  --pz-page-gutter:      16px;
  --pz-header-height:    56px;
  --pz-gamebar-height:   46px;
  --pz-topbar-height:    0px;    /* pasek górny ukryty na mobile */
  --pz-bottomnav-height: 64px;   /* dolna nawigacja tylko na mobile */
  --pz-admin-sidebar:    0px;    /* sidebar CMS w szufladzie na mobile */
  --pz-admin-gutter:     16px;

  /* --- Minimalny cel dotykowy --- */
  --pz-tap-target: 44px;

  /* --- Warstwy --- */
  --pz-z-dropdown: 50;
  --pz-z-drawer:   80;
  --pz-z-overlay:  90;
  --pz-z-toast:    100;
}

/* Breakpointy: 390 / 768 / 1024 / 1440.
   Wartości pikselowe poniżej są celowo poza tokenami — media query
   nie przyjmuje var(). Trzymamy je w jednym miejscu, tutaj.            */

@media (min-width: 768px) {
  :root {
    --pz-page-gutter:      32px;
    --pz-header-height:    68px;
    --pz-gamebar-height:   52px;
    --pz-topbar-height:    36px;
    --pz-bottomnav-height: 0px;   /* dolna nawigacja znika */
    --pz-admin-gutter:     24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --pz-page-gutter:   48px;
    --pz-header-height: 76px;
    --pz-admin-sidebar: 248px;    /* sidebar CMS na stałe widoczny */
    --pz-admin-gutter:  32px;
  }
}

@media (min-width: 1440px) {
  :root {
    --pz-page-gutter: 80px;       /* margines z makiety 1440 px */
  }
}

/* ===== resources/css/base.css ===== */
/* ==========================================================================
   PlayZeek — reset i podstawy typograficzne
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Kontrolki rysowane przez przeglądarkę mają być ciemne: ikona kalendarza
     w `datetime-local`, lista rozwijana `select`, pasek przewijania. Bez tego
     Chrome rysuje je pod jasne tło — a wtedy czarna ikonka kalendarza na
     ciemnym polu jest ledwo widoczna. */
  color-scheme: dark;
  background: var(--pz-bg);
  /* Bez poziomego scrolla strony — twarda reguła nr 1.
     Wyjątek (drabinka) przewija się we własnym kontenerze. */
  overflow-x: hidden;
  /* `clip` zamiast `hidden`: tnie tak samo, ale nie robi z html/body kontenera
     przewijania — inaczej `position: sticky` (pasek CMS, pasek meczu, „Zapisz”
     w ustawieniach) nie działał nigdzie (UXF5). `hidden` zostaje dla starych
     przeglądarek. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--pz-bg);
  color: var(--pz-text-1);
  font-family: var(--pz-font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip; /* jak przy `html` wyżej */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--pz-font-display);
  font-stretch: var(--pz-display-stretch);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--pz-text-1);
  /* Długie nazwy turniejów i drużyn nie mogą rozpychać strony. */
  overflow-wrap: anywhere;
}

h1 { font-size: clamp(28px, 6vw, 46px); }
h2 { font-size: clamp(22px, 4vw, 30px); }
h3 { font-size: clamp(17px, 2.4vw, 19px); font-weight: 800; font-stretch: 110%; }
h4 { font-size: 15px; font-weight: 800; font-stretch: 110%; letter-spacing: 0.04em; }

p { margin: 0 0 var(--pz-space-4) 0; color: var(--pz-text-2); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--pz-text-2);
  text-decoration: none;
  transition: color 0.12s ease;
}
a:hover { color: var(--pz-text-1); }

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

/* Wszystkie liczby w IBM Plex Mono — twarda reguła nr 13.
   Klasa pomocnicza + element <data> dla wartości maszynowych. */
.pz-num,
data {
  font-family: var(--pz-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-style: normal;
}

/* Widoczny focus — nie usuwamy go, tylko podmieniamy na czytelny. */
:focus-visible {
  outline: 2px solid var(--pz-accent);
  outline-offset: 2px;
}

/* Tekst tylko dla czytników ekranu. */
.pz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skok do treści — pierwszy element w <body>. */
.pz-skip-link {
  position: absolute;
  top: -100px;
  left: var(--pz-space-4);
  z-index: var(--pz-z-toast);
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-accent);
  color: var(--pz-bg);
  font-weight: 700;
  transition: top 0.15s ease;
}
.pz-skip-link:focus { top: var(--pz-space-4); color: var(--pz-bg); }

/* Kontener strony: margines rośnie z breakpointami. */
.pz-container {
  width: 100%;
  max-width: var(--pz-page-width);
  margin-inline: auto;
  padding-inline: var(--pz-page-gutter);
}

/* Alpine.js: ukryj elementy do czasu inicjalizacji, żeby nie mrugały. */
[x-cloak] { display: none !important; }

/* Szanuj ustawienie systemowe „ogranicz animacje”. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== resources/css/components.css ===== */
/* ==========================================================================
   PlayZeek — komponenty bazowe (design/standalone/System.html)
   Każda klasa ma odpowiednik w komponencie Blade w resources/views/components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Przyciski
   Primary ma ścięty róg (clip-path) — znak rozpoznawczy systemu.
   -------------------------------------------------------------------------- */

.pz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pz-space-2);
  min-height: var(--pz-tap-target);
  padding-inline: var(--pz-space-4);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--pz-font-display);
  font-stretch: 110%;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.pz-btn--sm { min-height: 38px; font-size: 11px; padding-inline: var(--pz-space-3); }
/* Najmniejszy — tylko w główce wiadomości, gdzie obok nie ma innych przycisków. */
.pz-btn--xs { min-height: 26px; font-size: 10px; padding-inline: var(--pz-space-2); gap: 6px; }
.pz-btn__icon { flex-shrink: 0; }
.pz-btn--block { width: 100%; }

.pz-btn--primary {
  background: var(--pz-accent);
  color: var(--pz-bg);
  font-weight: 800;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.pz-btn--primary:hover { background: var(--pz-accent-hover); color: var(--pz-bg); }

.pz-btn--secondary {
  border-color: var(--pz-line-hover);
  color: var(--pz-text-1);
}
.pz-btn--secondary:hover { border-color: var(--pz-line-active); color: var(--pz-text-1); }

.pz-btn--outline {
  border-color: var(--pz-accent);
  color: var(--pz-accent);
  font-weight: 800;
}
.pz-btn--outline:hover { background: var(--pz-accent); color: var(--pz-bg); }

.pz-btn--live {
  background: var(--pz-live);
  color: #FFFFFF;
  font-weight: 800;
}
.pz-btn--live:hover { background: #E42F41; color: #FFFFFF; }

.pz-btn--ghost { color: var(--pz-text-2); }
.pz-btn--ghost:hover { color: var(--pz-text-1); }

/* Drugorzędny ostrzegawczy — „Zgłoś” (<x-report-button>) i „Opuść drużynę”.
   Czerwień dopiero przy najechaniu: to akcja wyjątkowa, a nie stan live/błąd. */
.pz-btn--caution { color: var(--pz-text-2); }
.pz-btn--caution:hover,
.pz-btn--caution:focus-visible { border-color: var(--pz-live-line); color: var(--pz-live-text); }

.pz-btn:disabled,
.pz-btn[aria-disabled="true"] {
  background: var(--pz-disabled-bg);
  border-color: var(--pz-line);
  color: var(--pz-text-4);
  cursor: default;
  clip-path: none;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Status turnieju — 6 wyliczanych stanów (nigdy wpisywanych ręcznie)
   -------------------------------------------------------------------------- */

.pz-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding-inline: 10px;
  border: 1px solid transparent;
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* „Można teraz działać” — jedyne miejsce na akcent. */
.pz-status--registration { background: var(--pz-accent); color: var(--pz-bg); }

.pz-status--live { background: var(--pz-live); color: #FFFFFF; }
.pz-status--live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.pz-status--waitlist { border-color: var(--pz-warn); color: var(--pz-warn-text); }
.pz-status--soon     { border-color: var(--pz-line-strong); color: var(--pz-text-2); }
.pz-status--checkin  { border-color: var(--pz-line-strong); color: var(--pz-text-2); }
.pz-status--finished { background: #1C2029; color: var(--pz-text-3); }

/* --------------------------------------------------------------------------
   Pasek slotów
   -------------------------------------------------------------------------- */

.pz-slots__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 11px;
  color: var(--pz-text-3);
}
.pz-slots__count { font-family: var(--pz-font-mono); color: var(--pz-text-2); }

.pz-slots__track { height: 4px; background: #1C1F28; }
.pz-slots__fill  { height: 100%; background: var(--pz-accent); transition: width 0.3s ease; }

/* Wypełnienie zmienia kolor wraz z zapełnieniem: spokojnie → uwaga → prawie pełny. */
.pz-slots__fill--warn { background: var(--pz-warn); }
.pz-slots__fill--full { background: var(--pz-live); }

/* --------------------------------------------------------------------------
   Token gry — KOD identyfikuje grę, kolor jest wtórny
   -------------------------------------------------------------------------- */

.pz-game-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 38px;
  padding-inline: 6px;
  background: var(--pz-game-color, var(--pz-muted));
  color: var(--pz-bg);
  font-family: var(--pz-font-mono);
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.pz-game-token--lg { height: 24px; min-width: 36px; font-size: 10px; }
.pz-game-token--hidden { opacity: 0.55; }

/* Kropka koloru gry — używana na paskach zakładek. */
.pz-game-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--pz-game-color, var(--pz-muted));
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Węzeł drabinki (wspólny dla turniejów i własnych drabinek)
   -------------------------------------------------------------------------- */

.pz-node {
  border: 1px solid var(--pz-line-strong);
  background: var(--pz-surface-2);
  border-radius: var(--pz-radius-input);
  overflow: hidden;
}

.pz-node__head {
  display: flex;
  justify-content: space-between;
  gap: var(--pz-space-2);
  padding: 5px 10px;
  background: var(--pz-surface-3);
  border-bottom: 1px solid var(--pz-line-strong);
  font-family: var(--pz-font-mono);
  font-size: 10px;
  color: var(--pz-text-3);
}

.pz-node__side {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-left: 3px solid transparent;
}
.pz-node__side + .pz-node__side { border-top: 1px solid var(--pz-line); }

.pz-node__logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--pz-surface-3);
  border: 1px solid var(--pz-line-strong);
}

.pz-node__team {
  flex-grow: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--pz-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-node__score {
  font-family: var(--pz-font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--pz-text-3);
}

.pz-node__side--winner { border-left-color: var(--pz-accent); }
.pz-node__side--winner .pz-node__team  { color: var(--pz-text-1); font-weight: 700; }
.pz-node__side--winner .pz-node__score { color: var(--pz-accent); }

.pz-node--live { border-color: var(--pz-live); }
.pz-node--live .pz-node__head {
  background: var(--pz-live-bg);
  border-bottom-color: var(--pz-live-line);
  color: var(--pz-live-text);
}
.pz-node--live .pz-node__team,
.pz-node--live .pz-node__score { color: var(--pz-text-1); font-weight: 700; }

.pz-node--pending {
  border: 1px dashed var(--pz-line-strong);
  background: var(--pz-bg-alt);
  padding: 16px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--pz-text-4);
}

/* --------------------------------------------------------------------------
   Karty i panele
   -------------------------------------------------------------------------- */

.pz-card {
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
}
.pz-card__body { padding: var(--pz-space-5); }

.pz-panel {
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
  overflow: hidden;
}
.pz-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  min-height: 42px;
  padding: var(--pz-space-2) var(--pz-space-4);
  background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-line);
}
.pz-panel__body { padding: var(--pz-space-4); }

/* Etykieta sekcji — wersaliki, rozstrzelone, przygaszone. */
.pz-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

/* Kafel KPI (pulpit CMS, katalog gier). */
.pz-kpi {
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
  padding: var(--pz-space-4) var(--pz-space-5);
}
.pz-kpi__label { margin-bottom: var(--pz-space-2); }
.pz-kpi__value {
  font-family: var(--pz-font-display);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  color: var(--pz-text-1);
}
.pz-kpi__value small { font-size: 14px; color: var(--pz-text-3); }
.pz-kpi__note { margin-top: var(--pz-space-2); font-size: 12px; color: var(--pz-text-2); }

.pz-kpi--accent  .pz-kpi__value { color: var(--pz-accent); }
.pz-kpi--warn    { border-color: #3D3520; background: var(--pz-warn-bg); }
.pz-kpi--warn    .pz-kpi__label { color: var(--pz-gold); }
.pz-kpi--danger  { border-color: var(--pz-live-line); background: #171114; }
.pz-kpi--danger  .pz-kpi__label,
.pz-kpi--danger  .pz-kpi__note  { color: var(--pz-live-text); }

/* --------------------------------------------------------------------------
   Formularze
   -------------------------------------------------------------------------- */

.pz-field { display: block; margin-bottom: var(--pz-space-4); }
.pz-field:last-child { margin-bottom: 0; }

.pz-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--pz-text-2);
}
.pz-field__label .pz-required { color: var(--pz-live-text); }

.pz-input,
.pz-select,
.pz-textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  background: var(--pz-bg-alt);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-input);
  color: var(--pz-text-1);
  font-size: 13px;
  line-height: 1.4;
}
.pz-textarea { min-height: 120px; resize: vertical; }

.pz-input:focus,
.pz-select:focus,
.pz-textarea:focus {
  border-color: var(--pz-accent);
  outline: none;
}

.pz-input::placeholder,
.pz-textarea::placeholder { color: var(--pz-text-4); }

/* Ikona kalendarza w polach `date` i `datetime-local`. `color-scheme: dark`
   (base.css) rysuje ją już jasną, ale domyślnie jest przygaszona i na ciemnym
   tle ledwo ją widać — w polu, w które TRZEBA kliknąć, żeby wybrać termin. */
.pz-input::-webkit-calendar-picker-indicator {
  opacity: 0.75;
  cursor: pointer;
}

.pz-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.pz-input--mono { font-family: var(--pz-font-mono); font-weight: 600; }

/* Stan błędu. */
.pz-input--invalid,
.pz-select--invalid,
.pz-textarea--invalid { border-color: var(--pz-live); }

.pz-field__error {
  margin-top: 6px;
  font-size: 11px;
  color: var(--pz-live-text);
}
.pz-field__hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--pz-text-3);
}

/* Przełącznik (uprawnienia, flagi w ustawieniach). */
.pz-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-3);
  min-height: var(--pz-tap-target);
  cursor: pointer;
}
.pz-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pz-switch__track {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  background: var(--pz-surface-3);
  border: 1px solid var(--pz-line-strong);
  border-radius: 11px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pz-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pz-text-3);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.pz-switch input:checked + .pz-switch__track {
  background: var(--pz-accent);
  border-color: var(--pz-accent);
}
.pz-switch input:checked + .pz-switch__track::after {
  transform: translateX(16px);
  background: var(--pz-bg);
}
.pz-switch input:focus-visible + .pz-switch__track {
  outline: 2px solid var(--pz-accent);
  outline-offset: 2px;
}
.pz-switch__label { font-size: 13px; color: var(--pz-text-1); }

/* Przełącznik z długim oświadczeniem w formularzu (dobra wiara, zgody) —
   tekst jak podpowiedzi pól, przełącznik przy pierwszej linijce. */
.pz-switch--statement { display: flex; align-items: flex-start; }
.pz-switch--statement .pz-switch__track { margin-top: 1px; }
.pz-switch--statement .pz-switch__label {
  font-size: 12px;
  line-height: 1.5;
  color: var(--pz-text-2);
}

/* Zakładki PL | EN nad polem tłumaczonym. */
.pz-i18n__tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--pz-space-2);
}
.pz-i18n__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding-inline: 10px;
  background: transparent;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  color: var(--pz-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pz-i18n__tab[aria-selected="true"] {
  background: var(--pz-surface-3);
  border-color: var(--pz-line-active);
  color: var(--pz-text-1);
}
/* Znacznik „brak tłumaczenia EN” — ostrzeżenie, nie błąd. */
.pz-i18n__missing {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pz-warn);
}

/* --------------------------------------------------------------------------
   Przełącznik języka (pasek górny i menu mobilne)
   Bez flag: flaga oznacza kraj gracza, nie język.
   Bez akcentu: to ustawienie, nie akcja.
   -------------------------------------------------------------------------- */

.pz-lang {
  display: inline-flex;
  align-items: stretch;
  height: 22px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  overflow: hidden;
}
.pz-lang__item {
  display: flex;
  align-items: center;
  padding-inline: 7px;
  color: var(--pz-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pz-lang__item + .pz-lang__item { border-left: 1px solid var(--pz-line-strong); }
.pz-lang__item[aria-current="true"] {
  background: var(--pz-surface-3);
  color: var(--pz-text-1);
}

/* Wariant mobilny: pełna szerokość, cel dotykowy 44 px. */
.pz-lang--lg { height: var(--pz-tap-target); width: 100%; border-radius: var(--pz-radius-input); }
.pz-lang--lg .pz-lang__item { flex: 1; justify-content: center; font-size: 13px; }

/* --------------------------------------------------------------------------
   Tabela CMS
   Na wąskich ekranach każdy wiersz staje się kartą (bez poziomego scrolla).
   -------------------------------------------------------------------------- */

.pz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pz-table th {
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-line);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-3);
  text-align: left;
  white-space: nowrap;
}
.pz-table td {
  padding: var(--pz-space-3) var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line-soft);
  color: var(--pz-text-2);
  vertical-align: middle;
}
.pz-table tbody tr:last-child td { border-bottom: 0; }
.pz-table__num { text-align: right; font-family: var(--pz-font-mono); }
.pz-table__name { color: var(--pz-text-1); font-weight: 600; }

/* Wiersz wyróżniony: nowy rekord / rekord wymagający uwagi. */
.pz-table tr.is-new    td { background: #14171F; }
.pz-table tr.is-locked td { background: #12100C; }

.pz-table__empty {
  padding: var(--pz-space-7) var(--pz-space-4);
  text-align: center;
  color: var(--pz-text-3);
}

@media (max-width: 767px) {
  .pz-table thead { display: none; }
  .pz-table, .pz-table tbody, .pz-table tr, .pz-table td { display: block; width: 100%; }
  .pz-table tr {
    padding: var(--pz-space-3) 0;
    border-bottom: 1px solid var(--pz-line);
  }
  .pz-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pz-space-4);
    padding: 6px var(--pz-space-4);
    border: 0;
    text-align: left;
  }
  /* Etykieta kolumny wraca jako prefiks komórki. */
  .pz-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pz-text-3);
  }
  .pz-table td:empty { display: none; }
  .pz-table__num { text-align: right; }
}

/* --------------------------------------------------------------------------
   Kolejka „wymaga uwagi”
   -------------------------------------------------------------------------- */

.pz-queue__item {
  display: flex;
  align-items: flex-start;
  gap: var(--pz-space-3);
  padding: var(--pz-space-3) var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line-soft);
}
.pz-queue__item:last-child { border-bottom: 0; }
.pz-queue__marker {
  width: 6px;
  height: 6px;
  margin-top: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pz-warn);
}
.pz-queue__item--urgent .pz-queue__marker { background: var(--pz-live); }
.pz-queue__body { flex-grow: 1; min-width: 0; }
.pz-queue__title { font-size: 13px; font-weight: 600; color: var(--pz-text-1); }
.pz-queue__meta  { font-size: 11px; color: var(--pz-text-3); }
.pz-queue__time  { flex-shrink: 0; font-family: var(--pz-font-mono); font-size: 11px; color: var(--pz-text-3); }

/* --------------------------------------------------------------------------
   Pionowy rytm strony
   --------------------------------------------------------------------------

   Sekcje, karty i formularze ułożone jedno pod drugim. Bez tego nagłówek
   sekcji („ZAPISANI”, „PODGLĄD”) przykleja się do paska przycisków nad nim:
   `.pz-section-head` ma wyłącznie margines DOLNY, bo zwykle stoi pierwszy
   w swoim kontenerze.

   Ten sam rytm co na profilu i w drużynie (`.pz-profile-sections`) — tylko
   bez wiązania z konkretnym ekranem. */

.pz-page-sections {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-7);
  padding-block: var(--pz-space-5) var(--pz-space-8);
}

/* Odstępy własne elementów są tu zbędne — rytm daje `gap` kontenera.
   (Wyjątek dla `.pz-section-head` siedzi w layout-profile.css, bo ta klasa
   jest tam zdefiniowana i tamten arkusz wczytuje się później.) */
.pz-page-sections > .pz-wizard__nav { margin-top: 0; }

.pz-page-sections > .pz-lead { margin-block: 0; }

/* Wiersze filtrów mają stać blisko siebie, a nie 48 px od siebie —
   to jeden pasek narzędzi, nie trzy osobne sekcje. */
.pz-filter-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
}

/* Karty jedna pod drugą wewnątrz sekcji (mecze w panelu organizatora). */
.pz-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-4);
}

/* --------------------------------------------------------------------------
   Kreator krokowy
   -------------------------------------------------------------------------- */

.pz-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Pasek akcji pod krokiem. Wspólny dla kreatora w CMS i kreatora turnieju
   społeczności na froncie (etap 5) — stąd w components, a nie w layoucie. */
.pz-wizard__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin-top: var(--pz-space-5);
}
.pz-wizard__spacer { flex-grow: 1; }

/* Wyjaśnienie, dlaczego przycisku nie ma („Do drabinki potrzeba dwóch
   uczestników”), idzie do WŁASNEGO wiersza. Wciśnięte między przyciski
   robiło się nieczytelnym paskiem tekstu przy prawej krawędzi. */
.pz-wizard__nav .pz-field__hint {
  flex-basis: 100%;
  margin: 0;
}
.pz-step {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-height: 34px;
  padding-inline: var(--pz-space-3);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  font-size: 12px;
  color: var(--pz-text-3);
}
.pz-step__num {
  font-family: var(--pz-font-mono);
  font-size: 11px;
  color: var(--pz-text-4);
}
.pz-step--current {
  border-color: var(--pz-accent);
  color: var(--pz-text-1);
}
.pz-step--current .pz-step__num { color: var(--pz-accent); }
.pz-step--done { border-color: var(--pz-line-active); color: var(--pz-text-2); }

/* --------------------------------------------------------------------------
   Komunikaty (flash)
   -------------------------------------------------------------------------- */

.pz-alert {
  display: flex;
  gap: var(--pz-space-3);
  padding: var(--pz-space-3) var(--pz-space-4);
  border: 1px solid var(--pz-line-strong);
  border-left-width: 3px;
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
  font-size: 13px;
  color: var(--pz-text-2);
}
.pz-alert--success { border-left-color: var(--pz-accent); }
.pz-alert--error   { border-left-color: var(--pz-live); color: var(--pz-live-text); }
.pz-alert--warn    { border-left-color: var(--pz-warn); color: var(--pz-warn-text); }
.pz-alert ul { margin: 0; padding-left: var(--pz-space-4); }

/* Odznaka licznikowa (powiadomienia, kolejki w sidebarze). */
.pz-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: 9px;
  background: var(--pz-accent);
  color: var(--pz-bg);
  font-family: var(--pz-font-mono);
  font-size: 10px;
  font-weight: 600;
}
.pz-badge--live { background: var(--pz-live); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Pojedyncza zgoda / przełącznik w formularzu
   --------------------------------------------------------------------------
   Klasa była używana w CMS giełdy od etapu 1, ale nigdy nie miała stylów —
   zgoda RODO na formularzu zgłoszenia (etap 4) jest pierwszym miejscem,
   w którym to widać, bo od niej zależy wysłanie formularza.

   Pole dotykowe ma `--pz-tap-target`: zaznaczenie zgody na telefonie nie
   może wymagać celowania w kwadrat 13 × 13 px.
   -------------------------------------------------------------------------- */

.pz-check {
  display: flex;
  align-items: flex-start;
  gap: var(--pz-space-3);
  min-height: var(--pz-tap-target);
  padding: var(--pz-space-2) 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pz-text-2);
  cursor: pointer;
}

.pz-check input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--pz-accent);
  cursor: pointer;
}

.pz-check a { color: var(--pz-accent); }

/* --------------------------------------------------------------------------
   Lista wypunktowana w komunikacie
   -------------------------------------------------------------------------- */

.pz-list {
  margin: var(--pz-space-2) 0 0;
  padding-left: var(--pz-space-5);
  font-size: 13px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Lista wyboru wielokrotnego (np. identyfikatory paszportu wymagane przez grę)
   -------------------------------------------------------------------------- */

.pz-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
  padding: var(--pz-space-2);
}
.pz-checklist__item {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
  min-height: 34px;
  padding-inline: var(--pz-space-2);
  border-radius: var(--pz-radius-input);
  font-size: 13px;
  color: var(--pz-text-1);
  cursor: pointer;
}
.pz-checklist__item:hover { background: var(--pz-surface-2); }
.pz-checklist__item input { accent-color: var(--pz-accent); }
.pz-checklist__meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--pz-text-2);
  text-align: right;
}

/* Edytor slownika rol w grze: dwie kolumny (PL, EN) na wiersz. */
.pz-rolelist {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-3);
}
.pz-rolelist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pz-space-2);
}

/* Edytor puli map: klucz, dwie nazwy i przelacznik aktywnosci. */
.pz-vetolist {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-3);
}
.pz-vetolist__head,
.pz-vetolist__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr) 96px;
  gap: var(--pz-space-2);
  align-items: center;
}
.pz-vetolist__head {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pz-text-2);
}

/* Naglowek szablonu weta: cztery pola obok siebie, zawijane na wezszym ekranie. */
.pz-vetogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--pz-space-3);
  align-items: end;
  margin-bottom: var(--pz-space-3);
}

/* Sekwencja krokow weta. Numer wiersza rysuje licznik CSS, a nie znacznik
   listy: wiersz jest siatka (display: grid), a taki element nie jest juz
   list-item i przegladarka nie narysuje mu markera. Numer idzie IBM Plex Mono
   (twarda regula nr 5) i jest wprost tym samym numerem, ktory pokazuja
   komunikaty bledow z VetoTemplate::problems(). */
.pz-steplist {
  list-style: none;
  counter-reset: pz-step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
}
.pz-steplist__row {
  counter-increment: pz-step;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pz-space-2);
  align-items: center;
}
.pz-steplist__row::before {
  content: counter(pz-step);
  font-family: var(--pz-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--pz-text-2);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Kafelek mapy w wecie (Mecz.html)

   Oba warianty — z miniatura i bez niej — maja TE SAMA wysokosc i ten sam
   uklad. Wariant bez grafiki jest domyslny, bo grafiki map naleza do wydawcow
   (docs/LICENCJE.md) i kolumna image_path zostaje pusta az do wgrania
   wlasnych zrzutow. Bez grafiki kafelek wyglada jak token gry: nazwa plus
   kolor, a nie pusta ramka z ikona "brak obrazka".
   -------------------------------------------------------------------------- */

.pz-map-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 92px;
  padding: var(--pz-space-2) 10px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface-2);
  overflow: hidden;
  transition: border-color 0.12s ease, opacity 0.12s ease;
}

/* Bez grafiki: ukosny pas w kolorze gry, ten sam jezyk co key art placeholder. */
.pz-map-tile--plain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--pz-game-color, var(--pz-muted)) 22%, transparent) 0%,
    transparent 62%
  );
}

.pz-map-tile__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.pz-map-tile__badge {
  position: relative;
  align-self: flex-start;
  margin-bottom: auto;
  padding: 2px 6px;
  background: var(--pz-game-color, var(--pz-muted));
  color: var(--pz-bg);
  font-family: var(--pz-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pz-map-tile__name {
  position: relative;
  font-family: var(--pz-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--pz-text-1);
  line-height: 1.2;
}

.pz-map-tile__side {
  position: relative;
  font-size: 11px;
  color: var(--pz-text-2);
}

/* Zbanowana: przekreslona i wygaszona, ale CZYTELNA — log weta ma sie dac
   przeczytac po meczu. */
.pz-map-tile--banned { opacity: 0.4; border-style: dashed; }
.pz-map-tile--banned .pz-map-tile__name { text-decoration: line-through; }

/* Mapa wybrana do gry: obramowanie w kolorze GRY, nie akcentem. Twarda
   regula nr 5 rezerwuje akcent dla "mozna teraz dzialac", a wybrana mapa
   to stan, nie zaproszenie do kliknięcia. */
.pz-map-tile--picked  { border-color: var(--pz-game-color, var(--pz-line-active)); }
.pz-map-tile--decider { border-color: var(--pz-line-active); border-style: dashed; }

/* Jedyny wariant z akcentem: kafelek, ktory kapitan moze TERAZ kliknac. */
.pz-map-tile--actionable { border-color: var(--pz-accent); cursor: pointer; }
.pz-map-tile--actionable:hover { border-color: var(--pz-accent-hover); }

/* "Nic tu teraz nie zrobisz" — bez akcentu, zgodnie z makieta. */
.pz-map-tile--disabled { opacity: 0.55; }

/* Komunikaty warstwy "na zywo": wstrzymanie po bezczynnosci i koniec meczu. */
.pz-realtime__notice:empty { display: none; }
/* Scope Alpine strony wewnątrz pollera — sam w sobie nie ma pudełka. */
.pz-realtime__scope { display: contents; }
.pz-realtime__paused {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  padding: var(--pz-space-2) var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface-2);
  font-size: 12px;
  color: var(--pz-text-2);
}
.pz-realtime__stopped {
  margin: 0;
  padding: var(--pz-space-2) var(--pz-space-3);
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-legend { margin: 0; font-size: 12px; }
.pz-legend dt {
  font-weight: 600;
  color: var(--pz-text-1);
  margin-top: var(--pz-space-2);
}
.pz-legend dt:first-child { margin-top: 0; }
.pz-legend dd {
  margin: 2px 0 0 0;
  color: var(--pz-text-2);
}

@media (max-width: 767px) {
  .pz-checklist__meta { display: none; }
  .pz-rolelist__row { grid-template-columns: minmax(0, 1fr); }
  .pz-vetolist__head { display: none; }
  /* Cztery pola jedno pod drugim zlewaja sie w jedna kolumne i nie widac,
     gdzie konczy sie jedna mapa, a zaczyna nastepna — stad kreska. */
  .pz-vetolist__row {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--pz-space-2);
    border-bottom: 1px solid var(--pz-line-soft);
  }
  .pz-vetolist__row:last-child { padding-bottom: 0; border-bottom: 0; }
  /* Numer kroku zostaje w kolumnie, oba pola ida pod soba. */
  .pz-steplist__row { grid-template-columns: 24px minmax(0, 1fr); }
  .pz-steplist__row::before { grid-row: span 2; align-self: start; padding-top: 10px; }
}

/* --------------------------------------------------------------------------
   Flaga kraju (rozdz. 3.2) i avatar
   -------------------------------------------------------------------------- */

.pz-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.pz-flag__img {
  display: block;
  flex-shrink: 0;
  /* Cienka obwodka ratuje biale flagi (PL, JP) na ciemnym tle. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  border-radius: 1px;
  object-fit: cover;
}
.pz-flag__fallback {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: var(--pz-surface-3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  border-radius: 1px;
  font-family: var(--pz-font-mono);
  font-size: 8px;
  line-height: 1;
  color: var(--pz-text-2);
}
.pz-flag__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--pz-avatar-size, 40px);
  height: var(--pz-avatar-size, 40px);
  background: var(--pz-surface-3);
  border: 1px solid var(--pz-line-strong);
  overflow: hidden;
}
.pz-avatar--round { border-radius: 50%; }
.pz-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pz-avatar__initials {
  font-family: var(--pz-font-display);
  font-weight: 800;
  /* Inicjaly skaluja sie razem z kafelkiem, zeby 24 px i 124 px wygladaly tak samo. */
  font-size: calc(var(--pz-avatar-size, 40px) * 0.36);
  letter-spacing: 0.04em;
  color: var(--pz-text-2);
  user-select: none;
}

/* --------------------------------------------------------------------------
   Pusty stan sekcji (x-empty-state) - uzywany na froncie i w panelu
   -------------------------------------------------------------------------- */

.pz-empty {
  padding: var(--pz-space-5);
  border: 1px dashed var(--pz-line-strong);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
}
.pz-empty__title {
  margin: 0 0 var(--pz-space-2);
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pz-text-1);
}
.pz-empty__text {
  margin: 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--pz-text-2);
}
.pz-empty__note {
  margin: var(--pz-space-3) 0 0;
  max-width: 68ch;
  font-size: 11px;
  line-height: 1.6;
  color: var(--pz-text-4);
}

/* --------------------------------------------------------------------------
   Znacznik przy nicku i w tabelach (odznaki, statusy paszportu)
   -------------------------------------------------------------------------- */

.pz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding-inline: 10px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  background: var(--pz-surface-3);
  font-size: 11px;
  white-space: nowrap;
  color: var(--pz-text-2);
}
/* Kolor niesie znaczenie: limonka = mozna dzialac, czerwien = live i bledy,
   pomarancz = ostrzezenie (twarda regula nr 12). */
.pz-chip--ok     { border-color: var(--pz-ok-text); color: var(--pz-ok-text); background: transparent; }
.pz-chip--accent { border-color: var(--pz-accent);  color: var(--pz-accent);  background: transparent; }
.pz-chip--warn   { border-color: var(--pz-warn);    color: var(--pz-warn-text); background: transparent; }
.pz-chip--live   { border-color: var(--pz-live);    color: var(--pz-live-text); background: transparent; }

/* Decyzja w jednej komorce tabeli (kolejki paszportu w CMS). */
.pz-passport-decision,
.pz-passport-decision__reject {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  align-items: center;
}
.pz-passport-decision__reject .pz-input {
  min-width: 140px;
  height: 32px;
  min-height: 32px;
  padding-block: 0;
}

/* Decyzja moderatora w kolejce komunikatora (krok B4). Notatka nad
   przyciskami, bo na 360 px trzy elementy w rzedzie robia sie nieklikalne. */
.pz-moderation-decision {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
}

.pz-moderation-decision .pz-input {
  min-width: 140px;
  height: 32px;
  min-height: 32px;
  padding-block: 0;
}

.pz-moderation-decision__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  align-items: center;
}

/* Kontekst zamrozonej kopii w kolejce moderacji (krok B4). Zwiniety,
   bo to material pomocniczy, a nie tresc, o ktora toczy sie sprawa. */
.pz-moderation-context { margin-top: var(--pz-space-2); font-size: 12px; }
.pz-moderation-context > summary { color: var(--pz-text-3); cursor: pointer; }
.pz-moderation-context ol {
  margin: var(--pz-space-2) 0 0;
  padding-left: var(--pz-space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--pz-text-2);
}

/* Sekcja wygaszona - gablota pucharow przy banie permanentnym (rozdz. 3.3). */
.is-dimmed {
  opacity: 0.45;
  filter: grayscale(1);
}

/* --------------------------------------------------------------------------
   Kreator turnieju (etap 2, makieta AdminTurniej.html)
   -------------------------------------------------------------------------- */

/* Krok klikalny — dopiero w zapisanym szkicu. */
.pz-step__link { color: inherit; }
.pz-step__link:hover { color: var(--pz-accent); }

/* Checklista gotowości: pozycja zrobiona i znacznik przed nią. */
.pz-checklist__item--done { color: var(--pz-text-2); }
.pz-checklist__mark {
  width: 16px;
  flex-shrink: 0;
  font-family: var(--pz-font-mono);
  font-size: 12px;
  color: var(--pz-text-4);
  text-align: center;
}
.pz-checklist__item--done .pz-checklist__mark { color: var(--pz-accent); }

/* Tabela w formularzu (Bo per runda) — węższa niż tabela modułu. */
.pz-table--compact th,
.pz-table--compact td {
  padding: var(--pz-space-2) var(--pz-space-2);
  font-size: 12px;
}
.pz-table--compact .pz-select { min-width: 96px; }

/* Podgląd key artu nad polem pliku. */
.pz-keyart-preview {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-bottom: var(--pz-space-2);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
}

/* Grafika turnieju w kreatorze (GAL1): cztery zrodla jako przelaczniki
   i siatka miniatur z galerii tel. */
.pz-artsource { border: 0; padding: 0; margin: 0 0 var(--pz-space-4); min-width: 0; }
.pz-artsource__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2) var(--pz-space-4);
  margin-bottom: var(--pz-space-3);
}
.pz-artsource__option {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-height: var(--pz-tap-target);
  font-size: 13px;
  cursor: pointer;
}
.pz-artsource__option input { accent-color: var(--pz-accent); width: 18px; height: 18px; }

.pz-bggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-2);
}
.pz-bggrid__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
  cursor: pointer;
  min-width: 0;
}
.pz-bggrid__item:has(input:checked) { border-color: var(--pz-accent); }
.pz-bggrid__item input { position: absolute; top: 8px; left: 8px; accent-color: var(--pz-accent); }
.pz-bggrid__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1240 / 700;
  object-fit: cover;
  border-radius: 2px;
}
.pz-bggrid__name {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.pz-bggrid__name small { display: block; color: var(--pz-text-2); }

/* Tabela galerii tel w CMS. */
.pz-bgtable__thumb {
  display: block;
  width: 120px;
  max-width: 100%;
  aspect-ratio: 1240 / 700;
  object-fit: cover;
  border-radius: 2px;
}
.pz-bgtable__position { width: 88px; }
.pz-bgtable tr.is-muted .pz-bgtable__thumb { opacity: 0.45; }
/* Na telefonie pola formularza ida pod etykieta — obok niej przy 360 px
   etykieta „Kadr na stronie turnieju” i select nie mieszcza sie w wierszu. */
@media (max-width: 767px) {
  .pz-bgtable td:has(.pz-input, .pz-select) {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .pz-bgtable td .pz-input,
  .pz-bgtable td .pz-select { width: 100%; min-width: 0; }
}

/* Miniatura mapy pod wierszem puli weta (GAL1): podglad 16 : 9, plik,
   „usun miniature” i — w puli standardowej — numer w Warsztacie. */
.pz-vetolist__extra {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
}
.pz-vetolist__thumb {
  display: block;
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--pz-line);
  border-radius: 2px;
}
.pz-vetolist__file { flex: 1 1 200px; min-width: 0; }
.pz-vetolist__workshop { flex: 0 1 200px; min-width: 0; }
.pz-vetolist__extra .pz-check { padding: 0; min-height: 0; }

/* --------------------------------------------------------------------------
   Drabinka: rundy jako kolumny w kontenerze z własnym scrollem
   --------------------------------------------------------------------------
   To jedyny wyjątek od zakazu poziomego scrolla strony (zasada bezwzględna
   nr 1). Przy 64 uczestnikach drabinka ma sześć kolumn i musi gdzieś się
   zmieścić — przewijamy JĄ, nie całą stronę.
*/

.pz-bracket {
  display: flex;
  gap: var(--pz-space-4);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--pz-space-3);
  scrollbar-width: thin;
}
.pz-bracket:focus-visible { outline: 2px solid var(--pz-accent); outline-offset: 2px; }

.pz-bracket__round {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  min-width: 220px;
}

.pz-bracket__round-head {
  font-family: var(--pz-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

/* Węzeł jako link do meczu i „Twój mecz” (UX-C). */
a.pz-node {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.pz-node:hover,
a.pz-node:focus-visible { border-color: var(--pz-line-active); }
.pz-node--mine { border-color: var(--pz-text-2); }
.pz-node__mine {
  display: block;
  padding: 2px 10px;
  background: var(--pz-surface-3);
  color: var(--pz-text-1);
  font-family: var(--pz-font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== resources/css/layout-public.css ===== */
/* ==========================================================================
   PlayZeek — layout publiczny (design/standalone/Main.html + Mobile.html)
   Mobile-first: od 360 px. Pasek górny i pełna nawigacja pojawiają się
   od 768 px, dolna nawigacja znika w tym samym miejscu.
   ========================================================================== */

.pz-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.pz-main {
  flex-grow: 1;
  /* Zapas na dolną nawigację, żeby nie zasłaniała treści na mobile. */
  padding-bottom: var(--pz-bottomnav-height);
}

/* --------------------------------------------------------------------------
   Pasek górny: region, język, Discord, pomoc, licznik meczów na żywo
   Na mobile ukryty — jego zawartość jest w menu użytkownika.
   -------------------------------------------------------------------------- */

.pz-topbar { display: none; }

@media (min-width: 768px) {
  .pz-topbar {
    display: block;
    height: var(--pz-topbar-height);
    background: var(--pz-bg-deep);
    border-bottom: 1px solid var(--pz-line-faint);
  }
  .pz-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pz-space-4);
    height: 100%;
  }
  .pz-topbar__left,
  .pz-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--pz-space-4);
    font-size: 12px;
    color: var(--pz-text-2);
  }
  .pz-topbar__sep { color: var(--pz-line-strong); }
  .pz-topbar__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pz-live);
    display: inline-block;
  }
  .pz-topbar__live strong { color: var(--pz-text-1); font-weight: 600; }
}

/* Poniżej 1024 px chowamy drugorzędne linki, zostaje region + język. */
@media (min-width: 768px) and (max-width: 1023px) {
  .pz-topbar__optional { display: none; }
}

/* --------------------------------------------------------------------------
   Nagłówek
   -------------------------------------------------------------------------- */

.pz-header {
  height: var(--pz-header-height);
  background: var(--pz-bg);
  border-bottom: 1px solid var(--pz-line);
}
.pz-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-4);
  height: 100%;
}
.pz-header__left {
  display: flex;
  align-items: center;
  gap: var(--pz-space-5);
  /* Menu się nie przycina — ustępuje wyszukiwarka (niżej). Wcześniej
     obcięcie zjadało „Aktualności” po zalogowaniu, gdy kontener miał
     1280 px przy szerokim oknie (otwarty panel boczny). */
  flex-shrink: 0;
}

.pz-logo {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  flex-shrink: 0;
  color: var(--pz-text-1);
}
.pz-logo__text {
  font-family: var(--pz-font-display);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--pz-text-1);
}
.pz-logo__text em { color: var(--pz-accent); font-style: normal; }
.pz-logo:hover .pz-logo__text { color: var(--pz-text-1); }

@media (min-width: 1024px) {
  .pz-logo__text { font-size: 22px; }
}

/* Nawigacja główna — dopiero od 1280 px.
   Osiem pozycji Archivo w wersalikach plus logo, wyszukiwarka i dwa przyciski
   konta nie mieszczą się w 1024 px: nawigacja nachodziłaby na wyszukiwarkę.
   Niżej wszystko siedzi w szufladzie pod hamburgerem. */
.pz-nav { display: none; }

@media (min-width: 1280px) {
  .pz-nav {
    display: flex;
    align-items: center;
    /* Ciaśniej niż w makiecie: przy 1280 px sześć pozycji, logo, wyszukiwarka
       i dwa przyciski konta ledwo się mieszczą. Pełny odstęp z makiety
       wraca przy 1440 px, dla którego była rysowana. */
    gap: var(--pz-space-4);
  }
  .pz-nav__link {
    font-family: var(--pz-font-display);
    font-stretch: 108%;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pz-text-2);
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
  }
  .pz-nav__link:hover { color: var(--pz-text-1); }
  .pz-nav__link[aria-current="page"] {
    color: var(--pz-text-1);
    border-bottom-color: var(--pz-accent);
  }
}

.pz-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pz-space-2);
  flex: 1 1 auto;
  min-width: 0;
}

/* Wyszukiwarka — razem z nawigacją, od 1280 px. */
.pz-search { display: none; }

@media (min-width: 1280px) {
  .pz-search {
    display: flex;
    align-items: center;
    gap: var(--pz-space-2);
    height: 40px;
    /* Szerokość z miejsca, nie z okna: kontener bywa węższy niż okno
       (panel boczny), więc pole się zwęża, zamiast spychać menu. */
    flex: 0 1 210px;
    min-width: 120px;
    padding-inline: var(--pz-space-3);
    background: var(--pz-surface);
    border: 1px solid var(--pz-line);
    border-radius: var(--pz-radius-input);
  }
  .pz-search__input {
    flex-grow: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--pz-text-1);
    font-size: 13px;
  }
  .pz-search__input::placeholder { color: var(--pz-text-3); }
}

/* Wartości z makiety (1440 px) — pełne odstępy w menu.
   Liczone od szerokości NAGŁÓWKA, nie okna: przy otwartym panelu bocznym
   szerokie okno ma kontener 1280 px, a wtedy pełne odstępy wypychały
   ostatnią pozycję menu pod wyszukiwarkę. */
.pz-header__inner { container-type: inline-size; }

/* Pełne odstępy tylko bez konta: zalogowany ma po prawej dzwonek,
   wiadomości, nick i (sztab) przycisk CMS — z nimi menu mieści się
   wyłącznie w ciaśniejszym układzie. */
@container (min-width: 1280px) {
  .pz-header__inner:not(:has(.pz-header__right--account)) .pz-nav { gap: var(--pz-space-5); }
}

/* Lupa-odnośnik do /szukaj. Poniżej 1280 px (bez menu i pola) to zwykłe
   przejście do wyszukiwarki — widoczna także dla gościa (UXM1 pkt 24;
   wcześniej `display: none` przegrywało z `.pz-icon-btn` niżej, a skrypt
   blokował kliknięcie). Od 1280 px zalogowany rozwija nią pole nad menu,
   a gość ma pole w nagłówku, więc lupy nie potrzebuje. */

@media (min-width: 1280px) {
  .pz-header__inner { position: relative; }
  .pz-header__right--account .pz-search { display: none; }
  .pz-header__right--account .pz-search-link { display: inline-flex; }
  .pz-header__right:not(.pz-header__right--account) .pz-search-link { display: none; }

  /* Rozwinięte pole przykrywa menu — od jego początku do lupy. */
  .pz-header__right--account .pz-search.is-open {
    display: flex;
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    /* left/right z pozycji menu i lupy — liczone przy otwarciu (Alpine). */
    width: auto;
    background: var(--pz-surface);
  }
}

/* Treść nagłówka poniżej 1280 px (okno 1280–1439): drobniejsze menu. */
@container (max-width: 1279px) {
  .pz-header__inner .pz-nav { gap: var(--pz-space-3); }
  .pz-nav__link { font-size: 12px; letter-spacing: 0.04em; }
  .pz-header__inner .pz-usermenu__name { max-width: 100px; }
}

/* Przycisk ikonowy — zawsze 44 px celu dotykowego. */
.pz-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pz-tap-target);
  height: var(--pz-tap-target);
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--pz-text-2);
}
.pz-icon-btn:hover { color: var(--pz-text-1); }
.pz-icon-btn--bordered {
  width: 36px;
  height: 36px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
}

/* Przyciski „Zaloguj / Załóż konto” — na mobile w szufladzie. */
.pz-header__auth { display: none; }
@media (min-width: 768px) {
  .pz-header__auth { display: flex; align-items: center; gap: var(--pz-space-3); flex-shrink: 0; }
}

/* --------------------------------------------------------------------------
   Menu konta w nagłówku

   Na desktopie hamburger znika, więc to jedyna droga do ustawień konta
   i do wylogowania. Pozycje są te same co w szufladzie mobilnej (Mobile.html).

   Nazwa celowo `pz-usermenu`, a NIE `pz-account`: ta druga jest już zajęta
   przez kontener strony ustawień konta (layout-profile.css) i ma własny
   `padding-block`, który rozpychał przycisk w nagłówku o 96 px.
   -------------------------------------------------------------------------- */

.pz-usermenu { position: relative; }

.pz-usermenu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
}
/* Długi nick (do 20 znaków) nie rozpycha nagłówka — pełny w podpowiedzi. */
.pz-usermenu__name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-usermenu__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--pz-z-dropdown);
  min-width: 220px;
  padding: var(--pz-space-2);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line-hover);
  border-radius: var(--pz-radius-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

.pz-usermenu__link {
  display: block;
  width: 100%;
  padding: 10px var(--pz-space-3);
  border: 0;
  border-radius: var(--pz-radius-input);
  background: transparent;
  color: var(--pz-text-1);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
}

.pz-usermenu__link:hover,
.pz-usermenu__link:focus-visible {
  background: var(--pz-surface-2);
  color: var(--pz-text-1);
}

.pz-usermenu__form {
  margin-top: var(--pz-space-2);
  padding-top: var(--pz-space-2);
  border-top: 1px solid var(--pz-line-faint);
}

/* Wylogowanie odcina od konta — ma wyglądać inaczej niż zwykłe przejście. */
.pz-usermenu__link--logout { color: var(--pz-text-2); }

/* Hamburger — wszędzie tam, gdzie nie ma pełnej nawigacji. */
.pz-header__menu-btn { display: inline-flex; }
@media (min-width: 1280px) {
  .pz-header__menu-btn { display: none; }
}

/* --------------------------------------------------------------------------
   Pasek gier — maks. 6 pozycji + „Więcej gier”
   Na mobile przewija się poziomo WE WŁASNYM kontenerze (strona nie).
   -------------------------------------------------------------------------- */

.pz-gamebar {
  position: relative;
  height: var(--pz-gamebar-height);
  background: var(--pz-bg-alt);
  border-bottom: 1px solid var(--pz-line);
}
.pz-gamebar__inner {
  display: flex;
  align-items: stretch;
  gap: var(--pz-space-4);
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pz-gamebar__inner::-webkit-scrollbar { display: none; }

.pz-gamebar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--pz-text-2);
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pz-gamebar__item:hover { color: var(--pz-text-1); }
.pz-gamebar__item[aria-current="true"] {
  color: var(--pz-text-1);
  border-bottom-color: var(--pz-text-1);
}
.pz-gamebar__count {
  font-family: var(--pz-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--pz-text-3);
}

.pz-gamebar__spacer { flex-grow: 1; }

/* Telefon (UXM1 pkt 22): cień przy krawędzi, za którą są jeszcze gry,
   i „Więcej gier” jako licznik przyklejony do prawej krawędzi paska. */
.pz-gamebar::before,
.pz-gamebar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 32px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.pz-gamebar::before { left: 0; background: linear-gradient(to right, var(--pz-bg-alt), transparent); }
.pz-gamebar::after { right: 0; background: linear-gradient(to left, var(--pz-bg-alt), transparent); }
.pz-gamebar.is-scrolled::before,
.pz-gamebar.has-more:not(.pz-gamebar--menu)::after { opacity: 1; }

.pz-gamebar__more {
  position: sticky;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-block: 8px;
  padding-inline: var(--pz-space-3);
  background: var(--pz-surface-3);
  border: 1px solid var(--pz-line-active);
  border-radius: var(--pz-radius-input);
  /* Cień w lewo zastępuje gradient — gry chowają się „pod” przyciskiem;
     pełny cień w prawo zakrywa margines strony za przyciskiem. */
  box-shadow: -18px 0 14px -6px var(--pz-bg-alt), var(--pz-page-gutter) 0 0 0 var(--pz-bg-alt);
  color: var(--pz-text-1);
}
.pz-gamebar__more .pz-gamebar__count { color: var(--pz-text-1); }
.pz-gamebar__more-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .pz-gamebar__more .pz-gamebar__count { color: var(--pz-text-3); }
  .pz-gamebar__more-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }

  /* Pasek zostaje przewijalny także tutaj. Przy sześciu grach i przycisku
     „Więcej gier” zawartość nie mieści się poniżej ~1200 px, a wtedy przycisk
     wypadłby poza ekran i stałby się nieosiągalny (strona nie ma poziomego
     scrolla). Gdy wszystko się mieści, paska przewijania i tak nie widać. */
  .pz-gamebar__inner { gap: 0; }
  .pz-gamebar__item { padding-inline: var(--pz-space-4); font-size: 12px; letter-spacing: 0.08em; }
  .pz-gamebar__item:first-child { padding-left: 0; }

  .pz-gamebar__more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    margin-block: 6px;
    padding-inline: var(--pz-space-4);
    background: var(--pz-surface-3);
    border: 1px solid var(--pz-line-active);
    border-radius: var(--pz-radius-input);
    color: var(--pz-text-1);
    font-family: var(--pz-font-display);
    font-stretch: 108%;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* Rozwijane menu „Więcej gier”. */
.pz-gamebar__menu {
  position: absolute;
  top: 100%;
  right: var(--pz-page-gutter);
  z-index: var(--pz-z-dropdown);
  width: min(640px, calc(100vw - 2 * var(--pz-page-gutter)));
  padding: var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line-hover);
  border-top: 0;
  border-radius: 0 0 var(--pz-radius-card) var(--pz-radius-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}
.pz-gamebar__menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-3);
  padding-inline: var(--pz-space-3);
}
.pz-gamebar__menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pz-space-1);
}
@media (min-width: 768px) {
  .pz-gamebar__menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pz-gamebar__menu-item {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
  padding: 11px var(--pz-space-3);
  border-radius: var(--pz-radius-input);
  color: inherit;
}
.pz-gamebar__menu-item:hover { background: var(--pz-surface-2); }
.pz-gamebar__menu-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pz-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pz-gamebar__menu-modes { display: block; font-size: 11px; color: var(--pz-text-3); }

/* --------------------------------------------------------------------------
   Szuflada mobilna (menu użytkownika + nawigacja + język)
   -------------------------------------------------------------------------- */

.pz-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--pz-z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--pz-bg);
}
.pz-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--pz-header-height);
  padding-left: var(--pz-space-4);
  padding-right: 6px;
  border-bottom: 1px solid var(--pz-line);
  flex-shrink: 0;
}
.pz-drawer__title {
  font-family: var(--pz-font-display);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 17px;
}
.pz-drawer__body { flex-grow: 1; overflow-y: auto; }
.pz-drawer__foot { flex-shrink: 0; padding: var(--pz-space-4); }

.pz-drawer__user {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
  padding: 18px var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line);
}
.pz-drawer__avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--pz-surface-3);
  border: 1px solid var(--pz-line-hover);
}
.pz-drawer__nick { font-size: 16px; font-weight: 700; color: var(--pz-text-1); }
.pz-drawer__sub  { font-size: 12px; color: var(--pz-text-3); }

.pz-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  min-height: 52px;
  padding-inline: var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line-soft);
  font-size: 15px;
  color: var(--pz-text-1);
}
.pz-drawer__link:hover { background: var(--pz-surface); color: var(--pz-text-1); }
.pz-drawer__chev { color: var(--pz-muted); }

.pz-drawer__section {
  padding: var(--pz-space-5) var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line-soft);
}
.pz-drawer__section .pz-label { display: block; margin-bottom: var(--pz-space-3); }

@media (min-width: 1280px) {
  .pz-drawer { display: none; }
}

/* --------------------------------------------------------------------------
   Dolna nawigacja (tylko mobile)
   -------------------------------------------------------------------------- */

.pz-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--pz-z-dropdown);
  height: var(--pz-bottomnav-height);
  display: flex;
  align-items: stretch;
  background: var(--pz-bg-alt);
  border-top: 1px solid var(--pz-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.pz-bottomnav__item {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--pz-text-3);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pz-bottomnav__item[aria-current="page"] { color: var(--pz-accent); }

@media (min-width: 768px) {
  .pz-bottomnav { display: none; }
}

/* --------------------------------------------------------------------------
   Stopka
   -------------------------------------------------------------------------- */

.pz-footer {
  margin-top: var(--pz-space-7);
  padding-block: var(--pz-space-7) var(--pz-space-6);
  background: var(--pz-bg-deep);
  border-top: 1px solid var(--pz-line);
}
.pz-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pz-space-6);
  padding-bottom: var(--pz-space-6);
  border-bottom: 1px solid var(--pz-line-faint);
}
@media (min-width: 768px) {
  .pz-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pz-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
}

.pz-footer__about { max-width: 290px; font-size: 13px; line-height: 1.65; color: var(--pz-text-3); }
.pz-footer__head {
  margin-bottom: var(--pz-space-3);
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-1);
}
.pz-footer__links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
}
.pz-footer__links a { color: var(--pz-text-3); }
.pz-footer__links a:hover { color: var(--pz-text-1); }

.pz-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  padding-top: var(--pz-space-5);
  font-size: 12px;
  color: var(--pz-text-4);
}
.pz-footer__version { font-family: var(--pz-font-mono); }

/* Osadzanie i overlay OBS (etap 10D) — zwinięty panel z adresami. */
.pz-embed-share {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
}

.pz-embed-share > summary {
  cursor: pointer;
  font-family: var(--pz-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--pz-text-2);
}

.pz-embed-share[open] > summary {
  margin-bottom: 8px;
}

/* ── Pasek „Check-in otwarty” (UX-B) ─────────────────────────────────────
   Na każdej stronie dla zapisanych, pod paskiem gier. Akcent tylko na
   kropce i przycisku — to jedyne „możesz teraz działać” w pasku. */
.pz-checkin-bar {
  background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-line);
  border-left: 3px solid var(--pz-accent);
}
.pz-checkin-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-4);
  padding-block: var(--pz-space-3);
}
.pz-checkin-bar__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--pz-accent);
}
.pz-checkin-bar__text {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  color: var(--pz-text-2);
  font-size: var(--pz-text-sm, 14px);
}
.pz-checkin-bar__text strong { color: var(--pz-text-1); }
.pz-checkin-bar__text a { color: var(--pz-text-1); text-decoration: underline; }
.pz-checkin-bar__action { flex: 1 1 100%; }
.pz-checkin-bar__action form { margin: 0; }
.pz-checkin-bar__note { color: var(--pz-text-3); font-size: var(--pz-text-sm, 14px); }

@media (min-width: 768px) {
  .pz-checkin-bar__action { flex: 0 0 auto; }
  .pz-checkin-bar__action .pz-btn--block { width: auto; }
}

/* ── „Twój mecz” w nagłówku (UX-C) ─────────────────────────────────────
   Pigułka z najpilniejszym zadaniem gracza (PlayerDuty). Akcent tylko,
   gdy gracz może teraz działać — inaczej zwykła ramka. Nagłówek z kontem
   jest od 768 px; poniżej to samo robi pozycja w dolnym pasku. */
.pz-mymatch {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  height: 36px;
  padding: 0 var(--pz-space-3);
  border: 1px solid var(--pz-line-strong);
  color: var(--pz-text-1);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
}
.pz-mymatch:hover { border-color: var(--pz-line-active); color: var(--pz-text-1); }
.pz-mymatch.is-action { border-color: var(--pz-accent); }
.pz-mymatch__title {
  font-family: var(--pz-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}
.pz-mymatch.is-action .pz-mymatch__label { color: var(--pz-accent); }
.pz-mymatch__count {
  padding: 1px 6px;
  background: var(--pz-surface-3);
  color: var(--pz-text-2);
  font-size: 11px;
}
/* Nagłówek przy 1280 px ledwo się mieści — etykieta przycinana, tytuł
   „Twój mecz” dopiero od 1440 px (przegląd zastępczy: ryzyko poziomego
   scrolla przy najdłuższym wariancie). */
.pz-mymatch { min-width: 0; max-width: 260px; }
.pz-mymatch__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1439px) {
  .pz-mymatch__title { display: none; }
}

.pz-bottomnav__item { position: relative; }
.pz-bottomnav__dot {
  position: absolute;
  top: 8px;
  right: calc(50% - 16px);
  width: 8px;
  height: 8px;
  background: var(--pz-accent);
}

/* --------------------------------------------------------------------------
   Sygnały „Twój mecz” (UX-E): ustawienia powiadomień i pytanie o zgodę
   -------------------------------------------------------------------------- */

.pz-prefs__heading {
  margin: var(--pz-space-5) 0 var(--pz-space-1);
  font-size: 14px;
  color: var(--pz-text-1);
}

.pz-prefs__volume {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  margin: var(--pz-space-3) 0;
}

/* Suwak głośności rysowany samodzielnie (UXM1 pkt 13): w Operze domyślny
   wyglądał jak dwa szare paski bez uchwytu. Ścieżka, wyraźny uchwyt
   i obwódka fokusu — Chromium/Opera/Safari (-webkit-) i Firefox (-moz-). */
.pz-prefs__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 320px;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.pz-prefs__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--pz-line-strong);
}
.pz-prefs__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid var(--pz-bg);
  background: var(--pz-text-1);
}
.pz-prefs__range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--pz-line-strong);
}
.pz-prefs__range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--pz-bg);
  background: var(--pz-text-1);
}
.pz-prefs__range:focus { outline: none; }
.pz-prefs__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--pz-line-strong); }
.pz-prefs__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--pz-line-strong); }

/* Ustawienia powiadomień zwinięte pod listą (UXM1 pkt 12). */
.pz-prefs-panel {
  margin-top: var(--pz-space-5);
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
}
.pz-prefs-panel__summary {
  min-height: var(--pz-tap-target);
  display: flex;
  align-items: center;
  padding: 0 var(--pz-space-4);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-2);
  cursor: pointer;
}
.pz-prefs-panel__body { padding: 0 var(--pz-space-4) var(--pz-space-4); }

.pz-prefs__preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
}

.pz-prefs__permission { margin: var(--pz-space-2) 0 var(--pz-space-4); }

.pz-notify-prompt {
  padding: var(--pz-space-3) var(--pz-space-4);
  border: 1px solid var(--pz-line-strong);
  background: var(--pz-surface);
}

.pz-notify-prompt__title { margin: 0; font-weight: 600; color: var(--pz-text-1); }
.pz-notify-prompt__body { margin: var(--pz-space-1) 0 var(--pz-space-3); font-size: 13px; color: var(--pz-text-2); }

.pz-notify-prompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
}

/* ===== resources/css/layout-tournaments.css ===== */
/* ==========================================================================
   PlayZeek — lista turniejów i karta turnieju
   Makiety: Turnieje.html, TurniejKarta.html, Mobile.html

   Mobile-first: makieta jest rysowana na 1440 px, ale układ startuje
   w jednej kolumnie na 360 px. Żadnych kolorów spoza tokenów.

   Jedyny poziomy scroll w całym module to kontener drabinki (.pz-bracket) —
   dozwolony wyjątek od zasady bezwzględnej nr 1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nagłówek strony z okruszkami
   -------------------------------------------------------------------------- */

.pz-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  margin: 0 0 var(--pz-space-3);
  padding: 0;
  list-style: none;
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--pz-text-3);
}

.pz-crumbs li + li::before {
  content: "/";
  margin-right: var(--pz-space-2);
  color: var(--pz-muted);
}

.pz-crumbs a { color: var(--pz-text-3); }
.pz-crumbs a:hover { color: var(--pz-text-1); }
.pz-crumbs [aria-current="page"] { color: var(--pz-text-2); }

.pz-page-head {
  padding-block: var(--pz-space-5) var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line);
  background: var(--pz-bg-alt);
}

.pz-page-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pz-space-4);
}

.pz-page-head h1 { margin: 0 0 var(--pz-space-2); }

.pz-page-head__count {
  margin: 0;
  font-size: 14px;
  color: var(--pz-text-2);
}

.pz-page-head__count strong { color: var(--pz-text-1); font-weight: 600; }
.pz-page-head__count .pz-open { color: var(--pz-accent); }

/* --------------------------------------------------------------------------
   Układ: filtry + wyniki
   -------------------------------------------------------------------------- */

.pz-tour-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--pz-space-5);
  padding-block: var(--pz-space-5) var(--pz-space-7);
}

/* --------------------------------------------------------------------------
   Panel filtrów

   Na telefonie zwinięty pod przyciskiem „Filtry”, od 1024 px rozwinięty
   na stałe jako kolumna. Rozwijanie idzie przez ukryty checkbox, nie przez
   JavaScript: filtry muszą działać także wtedy, gdy Alpine się nie wczyta.
   -------------------------------------------------------------------------- */

.pz-tour-filters {
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  overflow: hidden;
}

.pz-tour-filters__toggle { position: absolute; opacity: 0; pointer-events: none; }

.pz-tour-filters__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  min-height: var(--pz-tap-target);
  padding-inline: var(--pz-space-4);
  background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-line);
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-1);
  cursor: pointer;
}

.pz-tour-filters__summary::after {
  content: "+";
  font-family: var(--pz-font-mono);
  font-size: 16px;
  color: var(--pz-text-3);
}

.pz-tour-filters__toggle:checked ~ .pz-tour-filters__summary::after { content: "–"; }

.pz-tour-filters__toggle:focus-visible ~ .pz-tour-filters__summary {
  outline: 2px solid var(--pz-accent);
  outline-offset: -2px;
}

.pz-tour-filters__body { display: none; }
.pz-tour-filters__toggle:checked ~ .pz-tour-filters__body { display: block; }

.pz-tour-filters__group {
  /* Reset elementu fieldset: domyślna ramka "groove" i wcięcie legendy
     rysowałyby pudełko w pudełku. */
  margin: 0;
  padding: var(--pz-space-4);
  border: 0;
  border-bottom: 1px solid var(--pz-line-soft);
}

.pz-tour-filters__group:last-of-type { border-bottom: 0; }

.pz-tour-filters__legend {
  display: block;
  margin-bottom: var(--pz-space-3);
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-tour-filters__foot {
  padding: var(--pz-space-4);
  border-top: 1px solid var(--pz-line);
  background: var(--pz-surface-2);
}

.pz-tour-filters__clear {
  display: inline-block;
  margin-top: var(--pz-space-3);
  font-size: 12px;
  color: var(--pz-text-2);
  text-decoration: underline;
}

/* Pola wyboru z licznikiem: „Valorant 128”. */
.pz-facet {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
  min-height: 34px;
  cursor: pointer;
}

.pz-facet input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--pz-accent); margin: 0; }

.pz-facet__label {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  flex-grow: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--pz-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-facet input:checked + .pz-facet__label { color: var(--pz-text-1); }

.pz-facet__dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: var(--pz-game-color, var(--pz-muted));
}

.pz-facet__count {
  flex-shrink: 0;
  font-family: var(--pz-font-mono);
  font-size: 11px;
  color: var(--pz-text-3);
}

/* Przełączniki „Darmowe / Z wpisowym” i tryby — jeden rząd przycisków. */
.pz-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
}

.pz-segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 34px;
  padding-inline: var(--pz-space-3);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  background: transparent;
  color: var(--pz-text-2);
  font-size: 12px;
  white-space: nowrap;
}

.pz-segmented__item:hover { border-color: var(--pz-line-active); color: var(--pz-text-1); }

.pz-segmented__item.is-on {
  background: var(--pz-surface-3);
  border-color: var(--pz-line-active);
  color: var(--pz-text-1);
  font-weight: 600;
}

.pz-range { width: 100%; accent-color: var(--pz-accent); margin: 0; }

.pz-range-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-3);
}

.pz-range-head__value {
  font-family: var(--pz-font-mono);
  font-size: 11px;
  color: var(--pz-text-1);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Pasek narzędzi nad wynikami: chipsy + sortowanie
   -------------------------------------------------------------------------- */

.pz-tour-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-4);
}

.pz-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.pz-chips__label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-chips__item {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-height: 28px;
  padding-inline: var(--pz-space-3);
  background: var(--pz-surface-3);
  border: 1px solid var(--pz-line-hover);
  border-radius: var(--pz-radius-badge);
  font-size: 12px;
  color: var(--pz-text-1);
  white-space: nowrap;
}

.pz-chips__item:hover { border-color: var(--pz-line-active); color: var(--pz-text-1); }
.pz-chips__item span { color: var(--pz-text-3); }

/* Filtr włączony. Lista społeczności (rozdz. 3.12) filtruje ODNOŚNIKAMI,
   bez JavaScriptu, więc stan „zaznaczony” musi być widoczny w samym HTML-u. */
.pz-chips__item--on {
  border-color: var(--pz-line-active);
  background: var(--pz-surface-2);
  color: var(--pz-text-1);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Pasek organizatora na karcie turnieju społeczności
   -------------------------------------------------------------------------- */

.pz-organizer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  min-width: 0;
}

.pz-organizer__who { min-width: 0; }

.pz-organizer__nick {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pz-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reputacja: „12 turniejów · ocena 4,6” albo „nowy organizator”. */
.pz-organizer__rep {
  display: block;
  font-size: 11px;
  color: var(--pz-text-3);
}

/* Kolorowa linia gry zamiast key artu — turniej gracza rzadko ma grafikę. */
.pz-tour-card__rule {
  height: 4px;
  background: var(--pz-game-color, var(--pz-line-strong));
}

.pz-tour-card__tag--warn {
  border-color: var(--pz-warn);
  color: var(--pz-warn-text);
}

/* „Powiadom o starcie” i „Zgłoś turniej” pod kartą — rząd małych przycisków
   (właściciel 29.09.2026: „Zgłoś” jako przycisk, nie goły napis). */
.pz-tour-card__report {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin-top: var(--pz-space-2);
}

.pz-tour-card__report form { margin: 0; }

.pz-sort {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  flex-shrink: 0;
}

.pz-sort label { font-size: 12px; color: var(--pz-text-3); }
.pz-sort .pz-select { min-height: 38px; width: auto; }

/* --------------------------------------------------------------------------
   Lista turniejów

   Na telefonie karta (nagłówek + fakty w dwóch kolumnach), od 1024 px
   wiersz tabeli z makiety. To ten sam kod HTML — reguła nr 4 mówi, że karta
   i wiersz renderują jeden rekord, a nie dwa osobne widoki.
   -------------------------------------------------------------------------- */

.pz-tour-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  overflow: hidden;
}

.pz-tour-list__head { display: none; }

.pz-tour-row {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  border-bottom: 1px solid var(--pz-line-soft);
}

.pz-tour-list > li:last-child .pz-tour-row { border-bottom: 0; }

.pz-tour-row__color { background: var(--pz-game-color, var(--pz-muted)); }

.pz-tour-row__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-3);
  padding: var(--pz-space-4);
}

.pz-tour-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin: 0 0 var(--pz-space-2);
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--pz-text-1);
}

.pz-tour-row__title a { color: inherit; }
.pz-tour-row__title a:hover { color: var(--pz-accent); }

.pz-tour-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin: 0;
  font-size: 11px;
  color: var(--pz-text-3);
}

.pz-tour-row__meta .pz-game-name { font-weight: 600; color: var(--pz-text-2); }
.pz-tour-row__meta .pz-sep { color: var(--pz-line-strong); }

.pz-tour-row__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pz-space-3);
}

.pz-tour-row__fact {
  min-width: 0;
  font-size: 13px;
  color: var(--pz-text-2);
}

.pz-tour-row__fact dt {
  margin-bottom: var(--pz-space-1);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-tour-row__fact dd { margin: 0; }
.pz-tour-row__fact small { display: block; font-size: 11px; color: var(--pz-text-3); }

.pz-tour-row__prize {
  font-family: var(--pz-font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--pz-accent);
  white-space: nowrap;
}

.pz-tour-row__prize small { color: var(--pz-text-3); font-weight: 500; }

.pz-tour-row--finished .pz-tour-row__title { color: var(--pz-text-2); }
.pz-tour-row--finished .pz-tour-row__prize { color: var(--pz-text-3); }

.pz-tour-row__action { display: flex; }
.pz-tour-row__action .pz-btn { width: 100%; }

/* Fee — ten sam token co w makiecie: zielona ramka „Darmowy”,
   złota „Wpisowe 50 PLN”. */
.pz-fee {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding-inline: var(--pz-space-2);
  border: 1px solid #2C4A1E;
  border-radius: var(--pz-radius-badge);
  color: var(--pz-ok-text);
  font-size: 11px;
  white-space: nowrap;
}

.pz-fee--paid { border-color: var(--pz-warn-line); color: var(--pz-warn-text); }

.pz-pagination-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  margin-top: var(--pz-space-5);
  font-size: 12px;
  color: var(--pz-text-3);
}

@media (min-width: 768px) {
  .pz-tour-row__body {
    grid-template-columns: minmax(0, 1fr) 160px;
    align-items: center;
    gap: var(--pz-space-4);
  }

  .pz-tour-row__facts { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .pz-tour-row__action { justify-content: flex-end; }
  .pz-tour-row__action .pz-btn { width: auto; }
}

@media (min-width: 1024px) {
  .pz-tour-layout { grid-template-columns: 284px minmax(0, 1fr); }

  .pz-tour-filters__summary { display: none; }
  .pz-tour-filters__body { display: block; }

  /* Nagłówek tabeli pojawia się dopiero tam, gdzie wiersz ma kolumny. */
  .pz-tour-list__head {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) 132px 92px 128px 96px 132px;
    align-items: center;
    min-height: 42px;
    background: var(--pz-surface-2);
    border-bottom: 1px solid var(--pz-line);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pz-text-3);
  }

  .pz-tour-list__head > span { padding-inline: var(--pz-space-3); }
  .pz-tour-list__head > span:first-child { padding: 0; }
  .pz-tour-list__head > .pz-right { text-align: right; }

  .pz-tour-row { grid-template-columns: 4px minmax(0, 1fr); }

  .pz-tour-row__body {
    grid-template-columns: minmax(0, 1fr) 132px 92px 128px 96px 132px;
    align-items: center;
    gap: 0;
    padding: var(--pz-space-3) 0;
  }

  .pz-tour-row__main { padding-inline: var(--pz-space-3); min-width: 0; }

  .pz-tour-row__facts {
    display: contents;
  }

  .pz-tour-row__fact {
    padding-inline: var(--pz-space-3);
    min-width: 0;
  }

  /* W układzie kolumnowym etykiety są w nagłówku tabeli, więc znikają
     z wierszy — ale zostają dla czytników ekranu. */
  .pz-tour-row__fact dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .pz-tour-row__fact--prize { text-align: right; }
  .pz-tour-row__action { padding-inline: var(--pz-space-3); }
}

/* ==========================================================================
   Karta turnieju (TurniejKarta.html)
   ========================================================================== */

.pz-tour-hero {
  position: relative;
  border-bottom: 1px solid var(--pz-line);
}

/* Pas key artu. Bez grafiki zostaje kolor gry przykryty ukośnymi pasami —
   ten sam zabieg co w zaślepkach key artu, żeby brak grafiki wyglądał
   na brak grafiki, a nie na zepsuty layout. */
.pz-tour-hero__art {
  height: 132px;
  background-color: var(--pz-game-color, var(--pz-surface-3));
  background-size: cover;
  background-position: center;
  /* Bez powielania, gdy grafika nie pokryje pasa (UX-A). */
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--pz-line);
}

.pz-tour-hero__art--empty {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(10, 11, 15, 0.86) 0px,
    rgba(10, 11, 15, 0.86) 3px,
    rgba(10, 11, 15, 0.62) 3px,
    rgba(10, 11, 15, 0.62) 18px
  );
}

.pz-tour-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
  padding-block: var(--pz-space-4) var(--pz-space-5);
}

.pz-tour-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-3);
}

.pz-tour-hero__tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-inline: var(--pz-space-3);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-tour-hero h1 { margin: 0 0 var(--pz-space-3); }

.pz-tour-hero__org {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin: 0;
  font-size: 13px;
  color: var(--pz-text-2);
}

.pz-tour-hero__org a { color: var(--pz-text-1); font-weight: 600; }

/* Discord i „Zgłoś” turnieju społeczności — rząd przycisków. */
.pz-tour-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  margin-top: var(--pz-space-3);
}

/* Pasek faktów pod nagłówkiem — sześć pozycji z makiety. */
.pz-tour-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pz-space-4);
  margin: 0;
  padding-block: var(--pz-space-5);
  border-top: 1px solid var(--pz-line);
}

.pz-tour-facts > div {
  min-width: 0;
  border-left: 1px solid var(--pz-line);
  padding-left: var(--pz-space-4);
}

/* Ten sam pasek faktów w wąskiej kolumnie (podgląd w kreatorze, akta
   zgłoszenia). Sześć kolumn z karty turnieju łamie tu daty w połowie —
   w 720 px mieszczą się dwie, a od tabletu trzy. */
.pz-tour-facts--narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pz-tour-facts dt {
  margin-bottom: var(--pz-space-2);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-tour-facts dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--pz-text-1);
}

.pz-tour-facts dd small {
  display: block;
  margin-top: var(--pz-space-1);
  font-size: 11px;
  font-weight: 400;
  color: var(--pz-text-3);
}

/* Zakładki są kotwicami na tej samej stronie: drabinka, uczestnicy
   i regulamin to jeden rekord i jedno żądanie, a nie cztery adresy. */
.pz-tour-tabs {
  border-bottom: 1px solid var(--pz-line);
  background: var(--pz-bg-alt);
}

.pz-tour-tabs__inner {
  display: flex;
  gap: var(--pz-space-5);
  overflow-x: auto;
  scrollbar-width: none;
}

.pz-tour-tabs__inner::-webkit-scrollbar { display: none; }

.pz-tour-tabs__link {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  flex-shrink: 0;
  min-height: 48px;
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pz-text-2);
  border-bottom: 2px solid transparent;
}

.pz-tour-tabs__link:hover { color: var(--pz-text-1); }

.pz-tour-tabs__count {
  font-family: var(--pz-font-mono);
  font-weight: 500;
  font-size: 11px;
  color: var(--pz-text-4);
}

.pz-tour-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--pz-space-5);
  padding-block: var(--pz-space-5) var(--pz-space-7);
}

.pz-tour-body section { margin-bottom: var(--pz-space-7); }
.pz-tour-body section:last-child { margin-bottom: 0; }

/* Kotwica z zakładek nie może chować nagłówka pod paskiem gier. */
.pz-tour-body section[id] { scroll-margin-top: var(--pz-space-6); }

.pz-tour-aside {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-4);
}

/* Lista rezerwowa stoi w kolumnie szerokiej na 340 px — siatka uczestników
   rozjeżdża się tam na trzy kolumny po 96 px. W kolumnie bocznej zawsze
   jedna pozycja w wierszu, jak w makiecie. */
.pz-tour-aside .pz-entrants { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   Panel zapisu — jedyne miejsce na karcie z akcentem "można teraz działać"
   -------------------------------------------------------------------------- */

.pz-entry {
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  padding: var(--pz-space-4);
}

.pz-entry__title {
  margin: 0 0 var(--pz-space-3);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-entry__note {
  margin: var(--pz-space-3) 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--pz-text-2);
}

.pz-entry__bars { margin-top: var(--pz-space-4); display: grid; gap: var(--pz-space-3); }

.pz-entry__roster {
  margin: var(--pz-space-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--pz-space-2);
}

.pz-entry__player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-entry__player strong { color: var(--pz-text-1); font-weight: 600; }
.pz-entry__player .pz-role { color: var(--pz-text-3); }

.pz-entry__issue {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding-inline: var(--pz-space-2);
  border: 1px solid var(--pz-live-line);
  border-radius: var(--pz-radius-badge);
  color: var(--pz-live-text);
  font-size: 11px;
}

.pz-entry__fix {
  display: inline-block;
  margin-top: var(--pz-space-2);
  color: var(--pz-accent);
  font-size: 12px;
  text-decoration: underline;
}

.pz-entry__fix:hover { color: var(--pz-accent-hover); }

.pz-entry__countdown {
  display: block;
  margin-top: var(--pz-space-2);
  font-size: 18px;
  color: var(--pz-text-1);
}

/* --------------------------------------------------------------------------
   Uczestnicy, rezerwy, sędziowie
   -------------------------------------------------------------------------- */

.pz-entrants {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-2);
}

/* Flex z zawijaniem, nie grid o stałych kolumnach: ta sama karta stoi
   w trzykolumnowej siatce uczestników i w wąskiej kolumnie bocznej.
   Przy gridzie `40px 1fr auto` nazwa dostawała tam 0 px szerokości,
   a znacznik check-inu wychodził poza kartę. */
.pz-entrant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
  min-height: 46px;
  padding: var(--pz-space-2) var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
}

/* Nazwa (albo rozwijany skład) zajmuje resztę wiersza i wolno jej się
   skurczyć; znacznik check-inu zawija się do drugiej linii, gdy zabraknie
   miejsca, zamiast wystawać poza kartę. */
.pz-entrant > .pz-roster,
.pz-entrant > .pz-entrant-name {
  flex: 1 1 120px;
  min-width: 0;
}

.pz-entrant__seed {
  flex: 0 0 auto;
  min-width: 24px;
  font-family: var(--pz-font-mono);
  font-size: 12px;
  color: var(--pz-text-3);
}

.pz-entrant__name {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pz-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-entrant__meta {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  color: var(--pz-text-3);
  white-space: nowrap;
}
.pz-entrant__meta--ok { color: var(--pz-ok-text); }

.pz-reserve-note {
  margin: var(--pz-space-3) 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--pz-text-3);
}

.pz-referee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pz-space-3);
  padding-block: var(--pz-space-2);
}

.pz-referee__name { font-size: 13px; font-weight: 600; color: var(--pz-text-1); }

/* Harmonogram faz — pionowa oś z makiety. */
.pz-timeline { margin: 0; padding: 0; list-style: none; }

.pz-timeline li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--pz-space-3);
  padding-block: var(--pz-space-2);
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-timeline__dot {
  margin-top: 6px;
  width: 8px;
  height: 8px;
  background: var(--pz-muted);
}

.pz-timeline li.is-now .pz-timeline__dot { background: var(--pz-live); border-radius: 50%; }
.pz-timeline li.is-now { color: var(--pz-text-1); font-weight: 600; }
.pz-timeline__time { font-family: var(--pz-font-mono); font-size: 11px; color: var(--pz-text-3); }

/* Podium turnieju zakończonego. */
.pz-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--pz-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-podium__item {
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  text-align: center;
}

.pz-podium__place {
  display: block;
  margin-bottom: var(--pz-space-2);
  font-family: var(--pz-font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pz-podium__item--1 { border-color: #3D3520; background: var(--pz-warn-bg); }
.pz-podium__item--1 .pz-podium__place { color: var(--pz-gold); }
.pz-podium__item--2 .pz-podium__place { color: var(--pz-silver); }
.pz-podium__item--3 .pz-podium__place { color: var(--pz-bronze); }

.pz-podium__name {
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--pz-text-1);
}

/* Treść opisowa z CMS (opis, regulamin, nagrody). */
.pz-prose {
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pz-text-2);
  white-space: pre-line;
}

@media (min-width: 768px) {
  .pz-tour-hero__art { height: 168px; }
  .pz-tour-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pz-entrants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pz-tour-hero__art { height: 196px; }

  .pz-tour-hero__inner {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: end;
  }

  .pz-tour-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pz-tour-facts--narrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pz-tour-body { grid-template-columns: minmax(0, 1fr) 340px; }

  .pz-entrants { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Strona główna (Main.html)
   ========================================================================== */

.pz-hero {
  position: relative;
  border-bottom: 1px solid var(--pz-line);
  background: #101219;
  overflow: hidden;
}

/* Key art wybranego turnieju. Na telefonie jest pasem nad treścią,
   od 1024 px kolumną po prawej — jak w makiecie. */
.pz-hero__art {
  height: 140px;
  background-color: var(--pz-game-color, var(--pz-surface-3));
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--pz-line);
}

.pz-hero__art--empty {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(10, 11, 15, 0.86) 0px,
    rgba(10, 11, 15, 0.86) 3px,
    rgba(10, 11, 15, 0.62) 3px,
    rgba(10, 11, 15, 0.62) 18px
  );
}

.pz-hero__inner { padding-block: var(--pz-space-6) var(--pz-space-7); }

.pz-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-4);
}

.pz-hero__flag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: var(--pz-space-3);
  background: var(--pz-accent);
  color: var(--pz-bg);
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pz-hero h1 {
  margin: 0 0 var(--pz-space-4);
  font-size: clamp(32px, 7vw, 68px);
  line-height: 0.98;
  max-width: 18ch;
}

.pz-hero__lead {
  max-width: 56ch;
  margin: 0 0 var(--pz-space-5);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pz-text-2);
}

/* Pasek faktów hero: pula, format, start, odliczanie. */
.pz-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 var(--pz-space-5);
  max-width: 720px;
  border: 1px solid var(--pz-line);
  background: rgba(10, 11, 15, 0.72);
}

.pz-hero__facts > div {
  padding: var(--pz-space-3) var(--pz-space-4);
  border-right: 1px solid var(--pz-line);
  border-bottom: 1px solid var(--pz-line);
  min-width: 0;
}

.pz-hero__facts dt {
  margin-bottom: var(--pz-space-2);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-hero__facts dd {
  margin: 0;
  font-family: var(--pz-font-display);
  font-stretch: 110%;
  font-weight: 800;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.2;
  color: var(--pz-text-1);
  /* break-word, NIE anywhere: "Pojedyncza" ma się zawinąć w całości,
     a nie rozpaść na "Pojedyncz" i "a". */
  overflow-wrap: break-word;
}

.pz-hero__facts dd.pz-accent { color: var(--pz-accent); }

.pz-hero__slots { max-width: 720px; margin-bottom: var(--pz-space-5); }

.pz-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-3);
}

/* Pasek liczników platformy. */
.pz-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--pz-line);
  background: var(--pz-bg-alt);
}

.pz-stats > div {
  padding: var(--pz-space-4) var(--pz-page-gutter);
  border-right: 1px solid var(--pz-line);
  border-bottom: 1px solid var(--pz-line);
  min-width: 0;
}

.pz-stats__value {
  font-family: var(--pz-font-display);
  font-stretch: 112%;
  font-weight: 900;
  font-size: clamp(22px, 4vw, 30px);
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

/* Kafli bywa 1–4 (HOME1: zera są ukryte) — siatka bez dziur na telefonie:
   jeden kafel na całą szerokość, przy trzech ostatni rozciągnięty. */
.pz-stats--1 { grid-template-columns: minmax(0, 1fr); }
.pz-stats--3 > div:last-child { grid-column: 1 / -1; }

.pz-stats__value--accent { color: var(--pz-accent); }

.pz-stats__label {
  margin-top: var(--pz-space-1);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

/* Sekcje strony głównej. */
.pz-home-section { padding-block: var(--pz-space-7); }

.pz-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-tour-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  overflow: hidden;
}

.pz-tour-card__art {
  position: relative;
  height: 120px;
  background-color: var(--pz-game-color, var(--pz-surface-3));
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--pz-line);
}

.pz-tour-card__art--empty {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(10, 11, 15, 0.88) 0px,
    rgba(10, 11, 15, 0.88) 3px,
    rgba(10, 11, 15, 0.66) 3px,
    rgba(10, 11, 15, 0.66) 16px
  );
}

.pz-tour-card__status { position: absolute; top: var(--pz-space-3); left: var(--pz-space-3); }

.pz-tour-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  flex-grow: 1;
  padding: var(--pz-space-4);
}

.pz-tour-card__title {
  margin: 0;
  font-family: var(--pz-font-display);
  font-stretch: 110%;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  text-transform: uppercase;
}

.pz-tour-card__title a { color: var(--pz-text-1); }
.pz-tour-card__title a:hover { color: var(--pz-accent); }

.pz-tour-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-tour-card__tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-inline: var(--pz-space-2);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  font-size: 11px;
  color: var(--pz-text-2);
}

.pz-tour-card__split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pz-space-3);
  padding-top: var(--pz-space-3);
  border-top: 1px solid var(--pz-line-soft);
}

.pz-tour-card__split dt {
  margin-bottom: var(--pz-space-1);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-tour-card__split dd { margin: 0; font-family: var(--pz-font-mono); font-size: 13px; color: var(--pz-text-1); }
.pz-tour-card__split .pz-right { text-align: right; }
.pz-tour-card__split .pz-accent { color: var(--pz-accent); }

.pz-tour-card__action { margin-top: auto; }

/* Lista „Najbliższe starty” — kalendarz w jednej kolumnie. */
.pz-upcoming {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  overflow: hidden;
}

.pz-upcoming li + li { border-top: 1px solid var(--pz-line-soft); }

.pz-upcoming__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--pz-space-3);
  padding: var(--pz-space-3) var(--pz-space-4);
}

.pz-upcoming__date {
  font-family: var(--pz-font-mono);
  font-size: 13px;
  color: var(--pz-text-1);
}

.pz-upcoming__date small { display: block; font-size: 11px; color: var(--pz-text-3); }

.pz-upcoming__name {
  min-width: 0;
  font-weight: 600;
  color: var(--pz-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-upcoming__meta { font-size: 11px; color: var(--pz-text-3); }

/* CTA dla organizatorów. */
.pz-organizer-cta {
  display: grid;
  gap: var(--pz-space-4);
  padding: var(--pz-space-6) var(--pz-space-5);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
}

.pz-organizer-cta h2 { margin: 0; }
.pz-organizer-cta p { margin: 0; max-width: 64ch; }

@media (min-width: 768px) {
  .pz-hero__art { height: 180px; }
  .pz-hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pz-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pz-stats--1 { grid-template-columns: minmax(0, 1fr); }
  .pz-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pz-stats--3 > div:last-child { grid-column: auto; }
  .pz-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-upcoming__row { grid-template-columns: 96px minmax(0, 1fr) auto; }

  .pz-organizer-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  /* Od tego progu key art wraca na prawą stronę hero, jak w makiecie. */
  .pz-hero__art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42%;
    height: auto;
    border-bottom: 0;
    border-left: 1px solid var(--pz-line);
  }

  .pz-hero__inner {
    position: relative;
    max-width: calc(var(--pz-page-width) - 2 * var(--pz-page-gutter));
    padding-block: var(--pz-space-8);
  }

  .pz-hero__inner > * { max-width: 56%; }

  .pz-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Rozwijany skład drużyny (tabela ligi, lista uczestników, podium)

   Rozwijanie robi element details, nie JavaScript: to informacja dodatkowa,
   a nie funkcja portalu, więc ma działać także bez Alpine.
   -------------------------------------------------------------------------- */

.pz-entrant-name {
  color: var(--pz-text-1);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pz-entrant-name:hover { color: var(--pz-accent); }

/* `display: block` jawnie: poniżej 768 px komórka tabeli staje się
   kontenerem flex (patrz `.pz-table` w components.css), a rozwijany skład
   ma tam być zwykłym blokiem na całą szerokość komórki. */
.pz-roster {
  display: block;
  min-width: 0;
  /* Rozwinięty skład ma się zawijać także wtedy, gdy kontener nazwy
     uczestnika przycina tekst do jednej linii. */
  white-space: normal;
}

.pz-table td > .pz-roster { flex: 1 1 auto; }

.pz-roster__summary {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-height: 28px;
  cursor: pointer;
  /* Domyślny trójkącik znika — mamy własny, który się obraca. */
  list-style: none;
}

.pz-roster__summary::-webkit-details-marker { display: none; }

.pz-roster__summary:focus-visible {
  outline: 2px solid var(--pz-accent);
  outline-offset: 2px;
}

.pz-roster__chev {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--pz-text-3);
  transition: transform 0.15s ease;
}

.pz-roster[open] > .pz-roster__summary .pz-roster__chev {
  transform: rotate(180deg);
  color: var(--pz-text-1);
}

.pz-roster__summary:hover .pz-roster__chev { color: var(--pz-text-1); }

.pz-roster__count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--pz-text-4);
}

.pz-roster__list {
  display: grid;
  gap: var(--pz-space-1);
  margin: var(--pz-space-2) 0 0;
  /* Wcięcie równe szerokości strzałki plus odstęp — skład wisi pod nazwą. */
  padding: 0 0 0 calc(10px + var(--pz-space-2));
  list-style: none;
}

.pz-roster__player {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-height: 26px;
  min-width: 0;
  font-size: 12px;
  color: var(--pz-text-3);
}

/* Miejsce po fladze u gracza bez kraju — nicki mają stać w jednej linii. */
.pz-roster__noflag {
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  border: 1px solid var(--pz-line-strong);
}

.pz-roster__nick {
  min-width: 0;
  /* Kontener nazwy uczestnika bywa jednolinijkowy (lista uczestników),
     a nick i tak ma się urwać wielokropkiem, nie wyjść poza kartę. */
  white-space: nowrap;
  color: var(--pz-text-2);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-roster__nick:hover { color: var(--pz-accent); }

.pz-roster__role {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 11px;
  color: var(--pz-text-4);
  white-space: nowrap;
}

.pz-roster__note {
  margin: var(--pz-space-2) 0 0;
  padding-left: calc(10px + var(--pz-space-2));
  font-size: 11px;
  line-height: 1.5;
  color: var(--pz-text-4);
}

/* Na podium nazwa jest duża i wyśrodkowana — skład idzie pod nią. */
.pz-podium__item .pz-roster__summary { justify-content: center; }
.pz-podium__item .pz-roster__list,
.pz-podium__item .pz-roster__note { padding-left: 0; text-align: left; }

.pz-podium__item .pz-entrant-name {
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
}

/* Rozwinięty skład zajmuje całą kartę, a numer i znacznik check-inu
   idą do góry — inaczej wisiałyby na środku wysokiej karty. */
.pz-entrant:has(.pz-roster[open]) {
  align-items: flex-start;
  padding-block: var(--pz-space-3);
}

/* Check-in na górze strony turnieju (UX-B). */
.pz-tour-hero__checkin {
  display: grid;
  gap: var(--pz-space-2);
  max-width: 420px;
  margin-block: var(--pz-space-3);
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-surface-1, var(--pz-surface));
  border: 1px solid var(--pz-accent);
}
.pz-tour-hero__checkin form { margin: 0; }

/* „Twój następny mecz” w panelu „Twój udział” (UX-C). */
.pz-entry__next {
  display: grid;
  gap: var(--pz-space-2);
  padding-top: var(--pz-space-3);
  border-top: 1px solid var(--pz-line);
}

/* ===== resources/css/layout-matches.css ===== */
/* ==========================================================================
   Mecze: strona meczu, pokoj meczowy, centrum meczow (etap 3, sesja C)
   Makiety: Mecz.html, MeczMobile.html, Czat.html, CzatMobile.html

   TELEFON JEST TU WAZNIEJSZY NIZ KOMPUTER i ten plik jest tak napisany:
   wartosci bazowe opisuja 360 px, a komputer dostaje je w breakpointach.
   Kapitan zglasza wynik z telefonu, trzymajac gre na drugim ekranie —
   wiec kazde pole dotykowe ma co najmniej var(--pz-tap-target).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pasek meczu — przyklejony u gory (makieta Mecz.html)
   -------------------------------------------------------------------------- */

.pz-match-bar {
  position: sticky;
  top: 0;
  z-index: var(--pz-z-dropdown);
  border-bottom: 1px solid var(--pz-line);
  background: var(--pz-bg-alt);
}

.pz-match-bar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--pz-space-2);
  padding: var(--pz-space-3) 0;
}

.pz-match-bar__side {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-width: 0;
}

.pz-match-bar__side--away { justify-content: flex-end; text-align: right; }
.pz-match-bar__side--away .pz-match-bar__team { order: -1; }

.pz-match-bar__logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--pz-line-hover);
  background: var(--pz-surface-3);
}

.pz-match-bar__team { min-width: 0; }

.pz-match-bar__name {
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--pz-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-match-bar__meta {
  font-size: 11px;
  color: var(--pz-text-3);
}

.pz-match-bar__score {
  font-family: var(--pz-font-mono);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  color: var(--pz-text-1);
  white-space: nowrap;
}

.pz-match-bar__score span { color: var(--pz-muted); }

/* Wynik z serwera, który czeka na przegranego — pod liczbami, drobnym
   pismem, kolorem ostrzeżenia (nie akcentem: nic tu jeszcze nie jest
   rozstrzygnięte). */
.pz-match-bar__score .pz-match-bar__pending {
  display: block;
  margin-top: 4px;
  font-family: var(--pz-font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--pz-warn-text);
  text-align: center;
  white-space: normal;
  max-width: 11ch;
  margin-inline: auto;
}

/* Jeden licznik, nie cztery — makieta mowi to wprost: "licznik pokazuje
   zawsze jedno: check-in -> ruch w wecie -> auto-akceptacja -> spor". */
.pz-match-bar__clock {
  grid-column: 1 / -1;
  display: flex;
  /* Zawijamy: etykieta bywa krótka („Na ruch w wecie”), a bywa calym zdaniem
     („Nic nie rozstrzygnie sie samo…”) i na 360 px nie ma go gdzie scisnac. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-2);
  margin-top: var(--pz-space-3);
  padding: var(--pz-space-2) var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-match-bar__clock > span:first-child { flex: 1 1 auto; min-width: 0; }

.pz-clock {
  flex-shrink: 0;
  font-family: var(--pz-font-mono);
  font-weight: 600;
  font-size: 18px;
  color: var(--pz-warn-text);
}

.pz-clock--veto { color: var(--pz-accent); }
.pz-clock--checkin { color: var(--pz-text-1); }

.pz-match-bar__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--pz-space-2);
  margin-top: var(--pz-space-2);
}

.pz-match-bar__actions > * { flex: 1 1 0; }

.pz-match-bar__crumbs {
  display: none;
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--pz-text-3);
}

@media (min-width: 768px) {
  .pz-match-bar__crumbs { display: block; padding-top: var(--pz-space-3); }
  .pz-match-bar__logo { width: 48px; height: 48px; }
  .pz-match-bar__name { font-size: 18px; }
  .pz-match-bar__score { font-size: 34px; }
}

@media (min-width: 1024px) {
  .pz-match-bar__inner {
    grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr) 300px;
    padding: var(--pz-space-4) 0;
  }
  .pz-match-bar__clock,
  .pz-match-bar__actions { grid-column: auto; margin-top: 0; }
  .pz-match-bar__clock { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pz-match-bar__actions { flex-direction: column; }
  .pz-match-bar__name { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Uklad strony meczu
   -------------------------------------------------------------------------- */

.pz-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-5);
  padding: var(--pz-space-5) 0 var(--pz-space-7);
  align-items: start;
}

.pz-match__main {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-6);
  min-width: 0;
}

.pz-match__aside {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-4);
  min-width: 0;
}

@media (min-width: 1024px) {
  .pz-match { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* --------------------------------------------------------------------------
   Weto map (Mecz.html, MeczMobile.html) — krok C3
   -------------------------------------------------------------------------- */

.pz-veto { border: 1px solid var(--pz-line); border-radius: var(--pz-radius-card); background: var(--pz-bg-alt); overflow: hidden; }

.pz-veto__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  padding: var(--pz-space-3) var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line-soft);
  background: var(--pz-surface);
}

.pz-veto__turn {
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--pz-text-1);
}

.pz-veto__hint { font-size: 12px; color: var(--pz-text-2); margin-top: 2px; }

/* "Twoj ruch" to jedyne miejsce w wecie z akcentem (twarda regula nr 5). */
.pz-veto__mine {
  padding: var(--pz-space-3);
  margin: var(--pz-space-3) var(--pz-space-4) 0;
  border: 1px solid var(--pz-accent);
  border-radius: var(--pz-radius-input);
  background: color-mix(in srgb, var(--pz-accent) 8%, var(--pz-surface));
  font-size: 13px;
  font-weight: 600;
  color: var(--pz-text-1);
}

.pz-veto__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pz-space-2);
  padding: var(--pz-space-3) var(--pz-space-4);
}

/* Kafelek jest przyciskiem w formularzu: cale pole dotykowe, nie ikonka. */
.pz-veto__tile {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  min-height: var(--pz-tap-target);
}

.pz-veto__tile[disabled] { cursor: default; }

.pz-veto__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  padding: 0 var(--pz-space-4) var(--pz-space-3);
}

.pz-veto__options .pz-btn { flex: 1 1 140px; min-height: var(--pz-tap-target); }

/* Pasek sekwencji: jedenascie pol, z ktorych czesc jest wypelniona. */
.pz-veto__seq {
  display: flex;
  gap: 3px;
  padding: 0 var(--pz-space-4) var(--pz-space-3);
}

.pz-veto__step {
  flex: 1 1 0;
  height: 4px;
  background: var(--pz-surface-3);
}

.pz-veto__step--done { background: var(--pz-muted); }
.pz-veto__step--now { background: var(--pz-accent); }

.pz-veto__log {
  padding: var(--pz-space-3) var(--pz-space-4);
  border-top: 1px solid var(--pz-line-soft);
  font-size: 11px;
  line-height: 1.7;
  color: var(--pz-text-3);
}

.pz-veto__log del { color: var(--pz-text-3); }

@media (min-width: 768px) {
  .pz-veto__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pz-veto__tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Mapy meczu — tabela na komputerze, karty na telefonie
   -------------------------------------------------------------------------- */

.pz-maps { display: flex; flex-direction: column; gap: var(--pz-space-2); }

.pz-maps__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pz-space-3);
  padding: var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
}

.pz-maps__no { font-family: var(--pz-font-mono); font-size: 12px; color: var(--pz-text-3); }
.pz-maps__name { font-size: 14px; font-weight: 600; color: var(--pz-text-1); }
.pz-maps__pick { font-size: 11px; color: var(--pz-text-3); }
.pz-maps__score { font-family: var(--pz-font-mono); font-weight: 600; font-size: 15px; color: var(--pz-text-1); white-space: nowrap; }
.pz-maps__score span { color: var(--pz-muted); }
.pz-maps__state { grid-column: 2 / -1; font-family: var(--pz-font-mono); font-size: 11px; color: var(--pz-text-3); }
.pz-maps__state--done { color: var(--pz-ok-text); }

@media (min-width: 768px) {
  .pz-maps__row { grid-template-columns: 40px minmax(0, 1fr) 90px 150px; }
  .pz-maps__state { grid-column: auto; text-align: right; }
}

/* --------------------------------------------------------------------------
   Zgloszenie wyniku: karta w watku i formularz (kroki C2, C4)
   -------------------------------------------------------------------------- */

.pz-report {
  border: 1px solid var(--pz-warn);
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
  overflow: hidden;
}

.pz-report--confirmed { border-color: var(--pz-accent); }
.pz-report--rejected { border-color: var(--pz-live-line); }

.pz-report__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-2);
  padding: var(--pz-space-2) var(--pz-space-3);
  border-bottom: 1px solid var(--pz-line);
  background: var(--pz-surface-2);
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pz-warn-text);
}

.pz-report--confirmed .pz-report__head { color: var(--pz-accent); }

.pz-report__score {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
  padding: var(--pz-space-3);
}

.pz-report__team { flex: 1 1 0; min-width: 0; font-size: 13px; font-weight: 600; color: var(--pz-text-1); }
.pz-report__team--home { text-align: right; }

.pz-report__value {
  font-family: var(--pz-font-mono);
  font-weight: 600;
  font-size: 20px;
  color: var(--pz-text-1);
  white-space: nowrap;
}

.pz-report__maps {
  padding: 0 var(--pz-space-3) var(--pz-space-3);
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-report__maps li { margin-top: 2px; }

/* Na telefonie przyciski ida jeden pod drugim i maja 48 px — to sa dwie
   decyzje, ktorych nie da sie cofnac, klikane w biegu (MeczMobile.html). */
.pz-report__actions {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  padding: 0 var(--pz-space-3) var(--pz-space-3);
}

.pz-report__actions .pz-btn { min-height: 48px; }

.pz-report__deadline {
  padding: 0 var(--pz-space-3) var(--pz-space-3);
  font-size: 11px;
  color: var(--pz-warn-text);
}

@media (min-width: 768px) {
  .pz-report__actions { flex-direction: row; }
  .pz-report__actions .pz-btn { flex: 0 0 auto; min-height: 40px; }
}

/* Formularz zgloszenia: wiersz na mape. */
.pz-resultform__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-2);
  padding: var(--pz-space-3) 0;
  border-bottom: 1px solid var(--pz-line-soft);
}

.pz-resultform__row:last-of-type { border-bottom: 0; }

.pz-resultform__map {
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--pz-text-1);
}

.pz-resultform__rounds { display: flex; align-items: center; gap: var(--pz-space-2); }
.pz-resultform__rounds input { min-height: var(--pz-tap-target); text-align: center; }

/* Wybor zwyciezcy mapy to dwa duze pola, nie lista rozwijana: na telefonie
   trafia sie w nie kciukiem bez patrzenia. */
.pz-resultform__winner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pz-space-2); }

.pz-resultform__winner label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pz-space-2);
  min-height: var(--pz-tap-target);
  padding: 0 var(--pz-space-2);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
  font-size: 13px;
  color: var(--pz-text-2);
  cursor: pointer;
  text-align: center;
}

.pz-resultform__winner input { position: absolute; opacity: 0; pointer-events: none; }
.pz-resultform__winner input:checked + span { color: var(--pz-text-1); }
.pz-resultform__winner label:has(input:checked) { border-color: var(--pz-accent); background: color-mix(in srgb, var(--pz-accent) 10%, var(--pz-surface)); }
.pz-resultform__winner label:has(input:focus-visible) { outline: 2px solid var(--pz-accent); outline-offset: 2px; }

@media (min-width: 768px) {
  .pz-resultform__row { grid-template-columns: 120px 150px minmax(0, 1fr); align-items: center; }
}

/* --------------------------------------------------------------------------
   Dowody: miniatura i slad po pliku, ktorego juz nie ma (krok C4, uwaga 4)
   -------------------------------------------------------------------------- */

.pz-evidence { display: flex; flex-wrap: wrap; gap: var(--pz-space-2); }

.pz-evidence__item {
  width: 100%;
  max-width: 260px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
  overflow: hidden;
}

.pz-evidence__thumb {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: var(--pz-disabled-bg);
}

.pz-evidence__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-2);
  padding: 6px var(--pz-space-3);
  border-top: 1px solid var(--pz-line);
  font-size: 11px;
  color: var(--pz-text-2);
}

.pz-evidence__size { font-family: var(--pz-font-mono); color: var(--pz-text-3); }

/* Plik zabrany przez retencje albo administratora. NIE jest to bledem
   i nie wyglada jak blad: wiersz zostaje, bo "dowod usuniety" i "dowodu
   nie bylo" to w sporze dwie rozne rzeczy. */
.pz-evidence__gone {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  padding: var(--pz-space-3);
  border: 1px dashed var(--pz-line-strong);
  border-radius: var(--pz-radius-input);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pz-text-3);
}

/* --------------------------------------------------------------------------
   Protest Log (krok C5)
   -------------------------------------------------------------------------- */

.pz-protest { display: flex; flex-direction: column; }

.pz-protest__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: var(--pz-space-3) 0;
  border-bottom: 1px solid var(--pz-line-soft);
}

.pz-protest__row:last-child { border-bottom: 0; }
.pz-protest__row--open { border-left: 2px solid var(--pz-live); padding-left: var(--pz-space-3); }

.pz-protest__when { font-family: var(--pz-font-mono); font-size: 11px; color: var(--pz-text-3); }
.pz-protest__what { font-size: 13px; color: var(--pz-text-1); }
.pz-protest__who { font-size: 11px; color: var(--pz-text-3); }
.pz-protest__body { font-size: 13px; line-height: 1.55; color: var(--pz-text-2); }

.pz-protest__decision {
  padding: var(--pz-space-2) var(--pz-space-3);
  border-left: 2px solid var(--pz-game-sc2);
  background: var(--pz-surface-2);
  font-size: 12px;
  line-height: 1.55;
  color: var(--pz-text-2);
}

@media (min-width: 768px) {
  .pz-protest__row { grid-template-columns: 76px minmax(0, 1fr) 160px; gap: var(--pz-space-3); align-items: start; }
  .pz-protest__status { text-align: right; }
}

/* --------------------------------------------------------------------------
   Sklad meczowy (protokol) — kolumna boczna
   -------------------------------------------------------------------------- */

/* Odstep miedzy blokami w panelach meczu. Lokalny, bo nie chcemy siatki
   klas narzedziowych w calym portalu — tu potrzebny jest jeden odstep. */
.pz-mt { margin-top: var(--pz-space-3); }

.pz-lineup { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }

.pz-lineup__row {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-height: 28px;
}

.pz-lineup__nick { flex-grow: 1; min-width: 0; color: var(--pz-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-lineup__role { color: var(--pz-text-3); font-size: 11px; }
.pz-lineup__empty { font-size: 12px; color: var(--pz-text-3); }

/* Wybor skladu: pola z duzym celem dotykowym, bo kapitan klika je na telefonie. */
.pz-lineup__pick {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-height: var(--pz-tap-target);
  padding: 0 var(--pz-space-2);
  border: 1px solid var(--pz-line-soft);
  border-radius: var(--pz-radius-input);
  cursor: pointer;
}

.pz-lineup__pick:has(input:checked) { border-color: var(--pz-accent); background: color-mix(in srgb, var(--pz-accent) 8%, transparent); }
.pz-lineup__pick:has(input:focus-visible) { outline: 2px solid var(--pz-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Pokoj meczowy (Czat.html, CzatMobile.html) — krok C2
   -------------------------------------------------------------------------- */

.pz-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
  padding: var(--pz-space-4) 0 var(--pz-space-6);
  align-items: start;
}

.pz-room__list, .pz-room__context { display: none; }

.pz-room__thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-bg-alt);
  overflow: hidden;
}

.pz-room__head {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
  padding: var(--pz-space-3);
  border-bottom: 1px solid var(--pz-line);
  background: var(--pz-surface);
}

.pz-room__title {
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--pz-text-1);
}

.pz-room__sub { font-size: 11px; color: var(--pz-text-3); }

.pz-room__messages {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-4);
  padding: var(--pz-space-4);
  /* Watek przewija sie WEWNATRZ, strona nie jezdzi w poziomie ani w pionie
     razem z nim (zasada bezwzgledna nr 1). */
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pz-msg { display: flex; flex-direction: column; gap: 4px; }

.pz-msg__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
}

.pz-msg__author { font-size: 12px; font-weight: 700; color: var(--pz-text-1); }
.pz-msg__time { font-size: 10px; color: var(--pz-text-4); }

/* „Zglos” przy wiadomosci (krok B2) — wspolny <x-report-button> w rozmiarze
   xs, przy prawej krawedzi glowki. Widoczny ZAWSZE, takze bez najechania:
   na telefonie hover nie istnieje. */
.pz-msg__report { margin-left: auto; }
.pz-msg__body { font-size: 14px; line-height: 1.5; color: var(--pz-text-2); overflow-wrap: anywhere; }
.pz-msg__body--hidden { font-style: italic; color: var(--pz-text-4); }

.pz-msg--system {
  padding: var(--pz-space-2) var(--pz-space-3);
  border-left: 2px solid var(--pz-line-hover);
  background: var(--pz-surface);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pz-text-2);
}

/* „Przeczytane” pod ostatnią własną wiadomością (sesja E) — bez akcentu. */
.pz-msg__read {
  margin: calc(-1 * var(--pz-space-1)) 0 0;
  font-size: 11px;
  color: var(--pz-text-4);
  text-align: right;
}

/* Odnośnik przy komunikacie systemowym („Zgłoś ogłoszenie”, sesja E). */
.pz-msg__link { color: var(--pz-text-1); text-decoration: underline; white-space: nowrap; }

.pz-msg__badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--pz-line-strong);
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pz-text-2);
}

.pz-msg__badge--staff { border-color: var(--pz-game-sc2); color: var(--pz-game-sc2); }
.pz-msg__badge--captain { border-color: var(--pz-accent); color: var(--pz-accent); }

.pz-room__day {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
  font-family: var(--pz-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-4);
}

.pz-room__day::before, .pz-room__day::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--pz-line-soft);
}

/* Kompozytor: pasek akcji przewija sie w poziomie WE WLASNYM kontenerze. */
.pz-composer {
  border-top: 1px solid var(--pz-line);
  background: var(--pz-surface);
  padding: var(--pz-space-3);
}

.pz-composer__actions {
  display: flex;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.pz-composer__actions::-webkit-scrollbar { display: none; }
.pz-composer__actions .pz-btn { flex-shrink: 0; min-height: 36px; }

/* Zdanie w miejscu przycisku, którego w tym meczu nie ma — dziś: „PlayZeek
   nie sędziuje turniejów społeczności” (rozdz. 3.12). */
.pz-composer__note {
  margin: 0;
  align-self: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pz-text-3);
}

.pz-composer__line { display: flex; align-items: center; gap: var(--pz-space-2); }
.pz-composer__line input[type="text"] { flex-grow: 1; min-width: 0; min-height: var(--pz-tap-target); }
.pz-composer__line .pz-btn { min-height: var(--pz-tap-target); }

.pz-composer__file { display: flex; align-items: center; gap: var(--pz-space-2); margin-top: var(--pz-space-2); font-size: 12px; color: var(--pz-text-3); }

@media (min-width: 1024px) {
  .pz-room { grid-template-columns: 280px minmax(0, 1fr) 300px; }
  .pz-room__list, .pz-room__context { display: flex; flex-direction: column; gap: var(--pz-space-3); }
  .pz-room__messages { max-height: 62vh; }
}

/* Lista rozmow (zapowiedz komunikatora z etapu 5). */
.pz-convo {
  display: flex;
  gap: var(--pz-space-2);
  padding: var(--pz-space-3);
  border: 1px solid var(--pz-line-soft);
  border-left: 3px solid transparent;
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
}

.pz-convo--current { border-left-color: var(--pz-accent); background: var(--pz-surface-2); }
.pz-convo__name { font-size: 13px; font-weight: 600; color: var(--pz-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-convo__meta { font-size: 11px; color: var(--pz-text-3); }

/* --------------------------------------------------------------------------
   Centrum meczow (krok C6)
   -------------------------------------------------------------------------- */

.pz-matchlist { display: flex; flex-direction: column; gap: var(--pz-space-2); }

.pz-matchcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--pz-space-2);
  padding: var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
  color: inherit;
}

.pz-matchcard:hover { border-color: var(--pz-line-hover); color: inherit; }

.pz-matchcard__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  font-size: 11px;
  color: var(--pz-text-3);
}

.pz-matchcard__team { font-size: 13px; font-weight: 600; color: var(--pz-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-matchcard__team--away { text-align: right; }
.pz-matchcard__score { font-family: var(--pz-font-mono); font-weight: 600; font-size: 16px; color: var(--pz-text-1); white-space: nowrap; }
.pz-matchcard__score span { color: var(--pz-muted); }

.pz-matchstate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 7px;
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--pz-line-strong);
  color: var(--pz-text-2);
}

.pz-matchstate--live { background: var(--pz-live); border-color: var(--pz-live); color: #fff; }
.pz-matchstate--disputed { border-color: var(--pz-live-line); color: var(--pz-live-text); }
.pz-matchstate--awaiting { border-color: var(--pz-warn-line); color: var(--pz-warn-text); }

/* --- Serwer meczowy CS2 (etap 5.5) ------------------------------------ */
.pz-server-card { display: grid; gap: var(--pz-space-2); }
.pz-server-card__cmd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pz-space-2);
}
.pz-server-card code {
    padding: var(--pz-space-1) var(--pz-space-2);
    border: 1px solid var(--pz-line);
    border-radius: var(--pz-radius-input);
    background: var(--pz-surface-2);
    /* Adres IP:port nie może rozepchnąć karty na 360 px. */
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Statystyki z serwera i oś meczu (etap 5.5, sesja E). Zakładki map to
   przyciski — wyglądają jak zakładki profilu (.pz-tabs__item). Tabele
   przewijają się we własnym kontenerze: strona nie ma poziomego scrolla. */
.pz-tabs__item--button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.pz-table-scroll {
  overflow-x: auto;
  margin-bottom: var(--pz-space-4);
}

.pz-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pz-space-2);
}
.pz-timeline li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--pz-space-3);
  font-size: 13px;
  color: var(--pz-text-2);
}
.pz-timeline time {
  font-family: var(--pz-font-mono);
  color: var(--pz-text-3);
}

/* Transmisja przy meczu (KONSPEKT 3.27, sesja G 5.5). Link u dostawcy — bez
   czerwieni: nie wiemy, czy kanał nadaje (czerwień tylko dla „na żywo”). */
.pz-match-bar__stream {
  color: var(--pz-text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pz-match-bar__stream:hover { color: var(--pz-text-1); }

.pz-broadcast__value {
  text-align: right;
  overflow-wrap: anywhere;
}
.pz-broadcast__row {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-2);
}
.pz-broadcast__row .pz-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Lobby meczu (UX-D, makieta UxGracza.html): kroki, karta dzialania, czat
   -------------------------------------------------------------------------- */

.pz-eyebrow {
  margin: 0;
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-steps {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--pz-line);
  overflow: hidden;
}

.pz-steps__item {
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-width: 0;
  padding: var(--pz-space-3) var(--pz-space-3) var(--pz-space-3) 0;
  margin-right: var(--pz-space-2);
  border-bottom: 2px solid transparent;
  font-size: 13px;
  color: var(--pz-text-4);
}

.pz-steps__mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--pz-line-strong);
  font-size: 11px;
}

/* Telefon: numery, podpis tylko przy kroku biezacym. */
.pz-steps__label { display: none; }
.pz-steps__item--now .pz-steps__label { display: inline; }

.pz-steps__item--done { color: var(--pz-text-2); }
.pz-steps__item--done .pz-steps__mark { border-color: var(--pz-ok-text); color: var(--pz-ok-text); }
.pz-steps__item--now { color: var(--pz-text-1); border-bottom-color: var(--pz-accent); }
.pz-steps__item--now .pz-steps__mark { border-color: var(--pz-accent); color: var(--pz-accent); }
.pz-steps__item--skipped { color: var(--pz-text-4); text-decoration: line-through; }

@media (min-width: 768px) {
  .pz-steps__label { display: inline; }
  .pz-steps__item { padding-right: var(--pz-space-5); margin-right: var(--pz-space-4); }
}

.pz-lobby {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-5);
  padding: var(--pz-space-4) 0 var(--pz-space-7);
  align-items: start;
}

.pz-lobby__main,
.pz-lobby__aside {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-5);
  min-width: 0;
}

.pz-lobby__chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-bg-alt);
  overflow: hidden;
}

/* Miejsce na Strefe gier (13D) — puste nie zajmuje miejsca. */
.pz-lobby__zone:not(:has(*)) { display: none; }

/* Telefon: zakladki „Mecz | Czat” — jedna kolumna naraz. */
.pz-lobby-tabs {
  display: flex;
  margin-top: var(--pz-space-3);
  border-bottom: 1px solid var(--pz-line);
}

.pz-lobby-tabs__tab {
  flex: 1 1 0;
  min-height: var(--pz-tap-target);
  border: 0;
  background: none;
  color: var(--pz-text-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.pz-lobby-tabs__tab--on {
  color: var(--pz-text-1);
  box-shadow: inset 0 -2px 0 var(--pz-text-1);
}

.pz-lobby--chat.pz-lobby--tab-match .pz-lobby__chat,
.pz-lobby--chat.pz-lobby--tab-chat .pz-lobby__main { display: none; }

.pz-lobby__stale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-2);
  margin-top: var(--pz-space-3);
  padding: var(--pz-space-2) var(--pz-space-3);
  border: 1px solid var(--pz-line-strong);
  background: var(--pz-surface);
  font-size: 13px;
  color: var(--pz-text-2);
}

@media (min-width: 1024px) {
  .pz-lobby { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--pz-space-6); }
  .pz-lobby--chat { grid-template-columns: minmax(0, 1fr) 340px; }
  /* Lewa kolumna obok czatu jest węższa niż cała strona — kafelki weta w dwóch rzędach. */
  .pz-lobby--chat .pz-veto__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pz-lobby-tabs { display: none; }
  .pz-lobby--chat.pz-lobby--tab-match .pz-lobby__chat,
  .pz-lobby--chat.pz-lobby--tab-chat .pz-lobby__main { display: flex; }
  .pz-lobby__chat { position: sticky; top: var(--pz-space-4); }
}

/* Karta aktywnego dzialania. Akcent tylko, gdy ogladajacy moze TERAZ dzialac. */
.pz-action {
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
}

.pz-action--go { border-color: var(--pz-accent); }

.pz-action__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-4);
}

.pz-action__heading { min-width: 0; }

.pz-action__title {
  margin: var(--pz-space-1) 0 0;
  font-family: var(--pz-font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--pz-text-1);
}

.pz-action__clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.pz-action__clock .pz-clock { font-size: 30px; line-height: 1; color: var(--pz-text-1); }

.pz-action__body {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-4);
  min-width: 0;
}

.pz-action__score {
  margin: 0;
  font-size: 18px;
  color: var(--pz-text-1);
}

@media (min-width: 768px) {
  .pz-action { padding: var(--pz-space-5) var(--pz-space-5); }
  .pz-action__title { font-size: 24px; }
  .pz-action__clock .pz-clock { font-size: 40px; }
}

/* Gotowosc: obie strony obok siebie. */
.pz-lobby-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-3);
}

@media (min-width: 390px) {
  .pz-lobby-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pz-lobby-side {
  min-width: 0;
  padding: var(--pz-space-3);
  border: 1px solid var(--pz-line-soft);
  font-size: 13px;
  color: var(--pz-text-2);
}

.pz-lobby-side--mine { border-color: var(--pz-line-strong); }

.pz-lobby-side__name {
  margin: 0 0 var(--pz-space-1);
  font-weight: 600;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-lobby-side__state { margin: 0; }
.pz-lobby-side__state--ok { color: var(--pz-ok-text); font-weight: 600; }

@media (min-width: 768px) {
  .pz-lobby-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pz-space-2); }
}

.pz-lobby-reason,
.pz-lobby-note {
  margin: var(--pz-space-2) 0 0;
  font-size: 12px;
  color: var(--pz-text-3);
}

.pz-lobby-reason:empty { display: none; }

/* Reczny wynik przy serwerze z puli — zwiniety, na awarie serwera (UXM1 pkt 2). */
.pz-lobby-manual { margin-top: var(--pz-space-3); }
.pz-lobby-manual > summary {
  min-height: var(--pz-tap-target);
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--pz-text-2);
  cursor: pointer;
}
.pz-lobby-manual[open] > summary { margin-bottom: var(--pz-space-3); }

/* Szczegoly meczu — zwiniete pod karta (gracz), otwarte w prawej kolumnie (kibic). */
.pz-lobby__more > summary {
  min-height: var(--pz-tap-target);
  display: flex;
  align-items: center;
  padding: 0 var(--pz-space-3);
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  font-size: 13px;
  color: var(--pz-text-2);
  cursor: pointer;
}

.pz-lobby__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
  margin-top: var(--pz-space-4);
}

@media (min-width: 1440px) {
  .pz-lobby__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Czat w lobby. */
.pz-lobby-chat__head {
  padding: var(--pz-space-3) var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line);
}

.pz-lobby-chat__title { margin: 0; font-weight: 600; color: var(--pz-text-1); }
.pz-lobby-chat__sub { margin: 2px 0 0; font-size: 12px; color: var(--pz-text-3); }
.pz-lobby-chat__sub a { color: var(--pz-text-2); }

.pz-lobby-chat__people {
  padding: var(--pz-space-2) var(--pz-space-4) var(--pz-space-3);
  border-top: 1px solid var(--pz-line);
  font-size: 13px;
  color: var(--pz-text-2);
}

.pz-lobby-chat__people > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }

.pz-lineup__nick--end { text-align: right; }

@media (min-width: 1440px) {
  .pz-lobby--chat { grid-template-columns: minmax(0, 1fr) 380px; }
  .pz-lobby--chat .pz-veto__tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Dema meczu (DEMO2, ekran 08): wiersz na mape — nazwa, stan, przycisk.
   Na telefonie stan pod nazwa, przycisk na cala szerokosc. */
.pz-demos__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pz-demos__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-1) var(--pz-space-3);
  align-items: center;
  padding: var(--pz-space-3) 0;
  border-bottom: 1px solid var(--pz-line);
  font-size: 13px;
}
.pz-demos__map { color: var(--pz-text-1); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pz-demos__state { color: var(--pz-text-2); min-width: 0; }
.pz-demos__action { justify-self: stretch; }
.pz-demos__note { margin: var(--pz-space-3) 0 0; font-size: 12px; color: var(--pz-text-3); }

@media (min-width: 768px) {
  .pz-demos__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
  .pz-demos__action { justify-self: end; }
}

/* Analiza meczu (DEMO4, ekrany 04 i 12). Na telefonie tabele we wlasnym kontenerze z przewijaniem,
   filtry jeden pod drugim, karty rund na cala szerokosc. Kolory tylko z tokenow; strona wygranej
   oznaczona slowem, nie samym kolorem. */
.pz-analysis__maps { display: flex; flex-wrap: wrap; gap: var(--pz-space-2); margin: var(--pz-space-3) 0; }
.pz-analysis__maps .pz-chip { height: auto; min-height: 32px; cursor: pointer; background: transparent; color: var(--pz-text-2); }
.pz-analysis__maps .pz-chip[aria-pressed="true"] { border-color: var(--pz-text-1); color: var(--pz-text-1); }
.pz-analysis__team { margin-top: var(--pz-space-4); }
.pz-analysis__team-name { display: flex; flex-wrap: wrap; gap: var(--pz-space-2) var(--pz-space-3); align-items: baseline; margin: 0 0 var(--pz-space-2); font-size: 15px; color: var(--pz-text-1); }
.pz-analysis__result, .pz-analysis__avg { font-size: 12px; font-weight: 400; color: var(--pz-text-2); }
.pz-analysis__sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-transform: inherit; }
.pz-analysis__sort[aria-pressed="true"] { color: var(--pz-text-1); text-decoration: underline; }
.pz-analysis__table .pz-chip { margin-left: var(--pz-space-1); height: 20px; font-size: 10px; }
/* Na telefonie zostaje tabelą (nie kartami jak .pz-table): 10 graczy × 10 kolumn w kartach to kilka ekranów.
   Przewija się we własnym kontenerze .pz-table-scroll, kolumna gracza jest przyklejona. */
@media (max-width: 767px) {
  .pz-analysis__table { display: table; width: max-content; min-width: 100%; }
  .pz-analysis__table thead { display: table-header-group; }
  .pz-analysis__table tbody { display: table-row-group; }
  .pz-analysis__table tr { display: table-row; padding: 0; }
  .pz-analysis__table th, .pz-analysis__table td { display: table-cell; width: auto; padding: 8px 10px; border-bottom: 1px solid var(--pz-line); white-space: nowrap; }
  .pz-analysis__table td::before { content: none; }
  .pz-analysis__table th:first-child, .pz-analysis__table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--pz-bg); }
  .pz-analysis__table td:first-child { white-space: normal; min-width: 120px; max-width: 150px; }
  .pz-analysis__table td:first-child .pz-chip { margin: 4px 0 0; }
}
.pz-analysis__note { display: block; font-size: 11px; color: var(--pz-text-3); }
.pz-analysis__chart { margin: var(--pz-space-5) 0 0; }
.pz-analysis__chart figcaption { font-size: 13px; font-weight: 600; color: var(--pz-text-1); margin-bottom: var(--pz-space-2); }
.pz-analysis__chart svg { width: 100%; height: auto; display: block; }
.pz-analysis__chart-axis { stroke: var(--pz-line-strong); stroke-width: 1; }
.pz-analysis__chart-switch { stroke: var(--pz-line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.pz-analysis__chart-home { stroke: var(--pz-text-1); stroke-width: 2; }
.pz-analysis__chart-away { stroke: var(--pz-text-3); stroke-width: 2; stroke-dasharray: 6 3; }
.pz-analysis__chart-pistol { fill: var(--pz-text-3); font-size: 10px; font-family: var(--pz-font-mono, monospace); }
.pz-analysis__legend { display: flex; flex-wrap: wrap; gap: var(--pz-space-3); margin: var(--pz-space-2) 0 0; font-size: 12px; color: var(--pz-text-3); }
.pz-analysis__key::before { content: ""; display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--pz-text-1); margin-right: 6px; vertical-align: middle; }
.pz-analysis__key--away::before { border-top: 2px dashed var(--pz-text-3); }
.pz-analysis__foot { margin: var(--pz-space-3) 0 0; font-size: 12px; color: var(--pz-text-3); }
.pz-analysis__filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pz-space-2); margin: var(--pz-space-3) 0; font-size: 12px; color: var(--pz-text-2); }
.pz-analysis__filters label { display: flex; flex-direction: column; gap: 4px; }
.pz-analysis__rounds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pz-space-2); }
.pz-analysis__round { padding: var(--pz-space-3); border: 1px solid var(--pz-line); border-radius: var(--pz-radius-card); font-size: 13px; }
.pz-analysis__round-head { display: flex; flex-wrap: wrap; gap: var(--pz-space-2); align-items: baseline; }
.pz-analysis__round-no { color: var(--pz-text-3); }
.pz-analysis__round-winner { color: var(--pz-text-1); font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pz-analysis__round-score { color: var(--pz-text-2); }
.pz-analysis__round-meta { margin: var(--pz-space-1) 0 0; font-size: 12px; color: var(--pz-text-2); overflow-wrap: anywhere; }
.pz-analysis__kills { margin-top: var(--pz-space-2); font-size: 12px; color: var(--pz-text-2); }
.pz-analysis__kills summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.pz-analysis__kills ul { margin: var(--pz-space-1) 0 0; padding-left: var(--pz-space-4); }
.pz-analysis__kills .pz-chip { height: 18px; font-size: 10px; margin-left: 4px; }
.pz-analysis__weapon { color: var(--pz-text-3); }

@media (min-width: 768px) {
  .pz-analysis__filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Demo 2D, heatmapa, ruch (DEMO5, ekrany 00, 03, 04). Mobile-first: mapa na pełną szerokość, panele pod nią.
   CT i T zawsze kształtem i literą (koło C / romb T), kolor tylko pomaga. Akcent i czerwień — nie tutaj.
   ========================================================================== */
.pz-analysis__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pz-space-2) var(--pz-space-4); }
.pz-analysis__bar .pz-tabs { margin-bottom: 0; }
.pz-analysis__motion { background: none; border: 1px solid var(--pz-line); border-radius: var(--pz-radius-badge); padding: 4px 10px; color: var(--pz-text-2); font: inherit; font-size: 12px; cursor: pointer; }
.pz-analysis__motion[aria-pressed="true"] { color: var(--pz-text-1); border-color: var(--pz-line-strong); }
.pz-analysis__motion-bar { margin: var(--pz-space-3) 0 0; padding: var(--pz-space-2) var(--pz-space-3); border: 1px solid var(--pz-line); border-radius: var(--pz-radius-card); background: var(--pz-surface-2); font-size: 13px; color: var(--pz-text-2); }
.pz-analysis__link { background: none; border: 0; padding: 0; color: var(--pz-text-1); font: inherit; text-decoration: underline; cursor: pointer; }
.pz-analysis__to-replay { display: inline-block; margin: 4px 0; font-size: 12px; }
.pz-analysis__empty { margin: var(--pz-space-4) 0; color: var(--pz-text-2); font-size: 14px; }
.pz-analysis__row--pick { cursor: pointer; }

/* Ruch: wykres rysuje się linią (dashDraw z próbki 00); bez animacji — od razu gotowy. */
@keyframes pz-dash-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@keyframes pz-fade-in { from { opacity: 0; } to { opacity: 1; } }
.pz-analysis[data-motion="on"] .pz-analysis__chart-home { stroke-dasharray: 1200; animation: pz-dash-draw 1.2s ease-out both; }
.pz-analysis[data-motion="off"] *, .pz-analysis[data-motion="off"] *::before, .pz-analysis[data-motion="off"] *::after { animation: none !important; transition: none !important; }

/* Odtwarzacz */
.pz-replay { margin-top: var(--pz-space-4); outline: none; }
.pz-replay:focus-visible { box-shadow: 0 0 0 2px var(--pz-line-strong); border-radius: var(--pz-radius-card); }
.pz-replay__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pz-space-2); margin-bottom: var(--pz-space-2); }
.pz-replay__title { margin: 0; font-family: var(--pz-font-display); font-size: 15px; color: var(--pz-text-1); }
.pz-replay__muted { color: var(--pz-text-3); }
.pz-replay__levels { display: flex; gap: var(--pz-space-2); }
.pz-replay__stage, .pz-heat__stage { position: relative; background: var(--pz-bg); border: 1px solid var(--pz-line); border-radius: var(--pz-radius-card); overflow: hidden; }
.pz-replay__map, .pz-heat__map { display: block; width: 100%; height: auto; }
.pz-replay__state { position: absolute; inset: auto 0 0; margin: 0; padding: var(--pz-space-3); background: var(--pz-surface-2); color: var(--pz-text-2); font-size: 13px; }

.pz-replay__dot circle, .pz-replay__dot rect:not(.pz-replay__carrier) { stroke: var(--pz-bg); stroke-width: 3; }
.pz-replay__dot--ct circle, .pz-replay__dot--ct rect:not(.pz-replay__carrier) { fill: var(--pz-side-ct); }
.pz-replay__dot--t circle, .pz-replay__dot--t rect:not(.pz-replay__carrier) { fill: var(--pz-side-t); }
.pz-replay__dot line { stroke: var(--pz-text-1); stroke-width: 4; stroke-linecap: round; }
.pz-replay__dot text { fill: var(--pz-bg); font: 700 15px var(--pz-font-mono); text-anchor: middle; pointer-events: none; }
.pz-replay__dot circle.pz-replay__blind { fill: none; stroke: var(--pz-text-1); stroke-width: 2; stroke-dasharray: 3 2; }
.pz-replay__carrier { fill: var(--pz-text-1); }
.pz-replay__dot.is-other-level, .is-other-level { opacity: 0.3; }
.pz-replay__dead path { stroke-width: 5; stroke-linecap: round; }
.pz-replay__dead--ct path { stroke: var(--pz-side-ct); }
.pz-replay__dead--t path { stroke: var(--pz-side-t); }
.pz-replay__shot { stroke: var(--pz-text-1); stroke-width: 3; }
.pz-replay__trail { fill: none; stroke-width: 4; opacity: 0.5; }
.pz-replay__trail--ct { stroke: var(--pz-side-ct); }
.pz-replay__trail--t { stroke: var(--pz-side-t); }
.pz-replay__nade-path { fill: none; stroke: var(--pz-text-2); stroke-width: 3; stroke-dasharray: 8 6; }
.pz-replay__smoke circle { fill: var(--pz-text-3); fill-opacity: 0.45; stroke: var(--pz-text-2); stroke-width: 1; }
.pz-replay__smoke text, .pz-replay__bomb-time { fill: var(--pz-text-1); font: 600 18px var(--pz-font-mono); text-anchor: middle; }
.pz-replay__fire { fill: var(--pz-warn); }
.pz-replay__flash { fill: var(--pz-text-1); }
.pz-replay__he { fill: none; stroke: var(--pz-text-1); stroke-width: 3; }
.pz-replay__bomb rect { fill: var(--pz-surface-3); stroke: var(--pz-text-1); stroke-width: 1.5; }
.pz-replay__bomb text { fill: var(--pz-text-1); font: 700 12px var(--pz-font-mono); text-anchor: middle; }

.pz-replay__legend, .pz-heat__legend { display: flex; flex-wrap: wrap; gap: 4px var(--pz-space-3); margin: var(--pz-space-2) 0; font-size: 12px; color: var(--pz-text-2); }
.pz-replay__key::before, .pz-heat__lg::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.pz-replay__key--ct::before { border-radius: 50%; background: var(--pz-side-ct); }
.pz-replay__key--t::before { transform: rotate(45deg) scale(0.85); background: var(--pz-side-t); }
.pz-replay__key--dead::before { content: "×"; width: auto; height: auto; color: var(--pz-text-1); font-weight: 700; }

.pz-replay__timeline { margin-top: var(--pz-space-3); }
.pz-replay__track { position: relative; height: 28px; }
.pz-replay__range { width: 100%; margin: 6px 0 0; accent-color: var(--pz-text-1); }
.pz-replay__mark { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; padding: 0; border: 2px solid var(--pz-bg); border-radius: 50%; background: var(--pz-text-2); cursor: pointer; }
.pz-replay__mark--bomb { border-radius: 2px; background: var(--pz-warn); }
.pz-replay__mark:hover, .pz-replay__mark:focus-visible { background: var(--pz-text-1); }
.pz-replay__time { margin: 0; font-size: 12px; color: var(--pz-text-2); text-align: right; }
.pz-replay__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pz-space-2); margin-top: var(--pz-space-2); }
.pz-replay__speed { display: inline-flex; gap: 4px; }
.pz-replay__speed .pz-chip, .pz-heat__modes .pz-chip, .pz-replay__levels .pz-chip { cursor: pointer; background: transparent; color: var(--pz-text-2); }
.pz-replay__speed .pz-chip[aria-pressed="true"], .pz-heat__modes .pz-chip[aria-pressed="true"], .pz-replay__levels .pz-chip[aria-pressed="true"] { border-color: var(--pz-text-1); color: var(--pz-text-1); }
.pz-replay__check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pz-text-2); }

.pz-replay__panels { display: grid; gap: var(--pz-space-4); margin-top: var(--pz-space-4); }
.pz-replay__panel { min-width: 0; }
.pz-replay__panel h4 { margin: 0 0 var(--pz-space-2); color: var(--pz-text-2); }
.pz-replay__rounds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 4px; }
.pz-replay__rounds button { width: 100%; display: grid; gap: 2px; padding: 6px 4px; border: 1px solid var(--pz-line); border-radius: var(--pz-radius-badge); background: var(--pz-surface-2); color: var(--pz-text-1); font: inherit; font-size: 12px; cursor: pointer; }
.pz-replay__rounds button[aria-current="true"] { border-color: var(--pz-text-1); }
.pz-replay__events, .pz-replay__alive { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.pz-replay__events button { width: 100%; text-align: left; background: none; border: 0; padding: 4px 0; color: var(--pz-text-2); font: inherit; font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }
.pz-replay__events button:hover, .pz-replay__events button:focus-visible { color: var(--pz-text-1); }
.pz-replay__eco { margin: 0 0 var(--pz-space-3); display: grid; gap: var(--pz-space-2); }
.pz-replay__eco dt { font-weight: 600; color: var(--pz-text-1); font-size: 13px; }
.pz-replay__eco dd { margin: 0; font-size: 12px; color: var(--pz-text-2); }
.pz-replay__alive li { display: flex; align-items: center; gap: var(--pz-space-2); font-size: 13px; min-width: 0; }
.pz-replay__side { font: 700 10px var(--pz-font-mono); padding: 1px 4px; border-radius: 3px; color: var(--pz-bg); }
.pz-replay__side--ct { background: var(--pz-side-ct); }
.pz-replay__side--t { background: var(--pz-side-t); }
.pz-replay__hp { margin-left: auto; color: var(--pz-text-2); }
.pz-replay__hint { margin: var(--pz-space-3) 0 0; font-size: 12px; color: var(--pz-text-3); }

/* Heatmapa — skala w kolorze gry (CS2), jaśniej = częściej */
.pz-heat { margin: var(--pz-space-5) 0 0; }
.pz-heat figcaption { font-size: 13px; font-weight: 600; color: var(--pz-text-1); margin-bottom: var(--pz-space-2); }
.pz-heat__filters { display: grid; gap: var(--pz-space-2); margin-bottom: var(--pz-space-3); font-size: 12px; color: var(--pz-text-2); }
.pz-heat__filters label { display: grid; gap: 4px; }
.pz-heat__modes { display: flex; flex-wrap: wrap; gap: 4px; }
.pz-heat__spot { fill: var(--pz-game-cs2); fill-opacity: 0.22; }
.pz-heat__dot { fill: var(--pz-text-1); }
.pz-heat__cell { fill: var(--pz-game-cs2); }
.pz-heat__nade path, .pz-heat__nade circle, .pz-heat__nade rect { stroke-width: 2; }
.pz-heat__nade--smoke circle { fill: var(--pz-text-3); stroke: var(--pz-text-2); }
.pz-heat__nade--flash circle { fill: none; stroke: var(--pz-text-1); }
.pz-heat__nade--fire path { fill: var(--pz-warn); stroke: var(--pz-bg); }
.pz-heat__nade--he path { stroke: var(--pz-text-1); stroke-linecap: round; }
.pz-heat__nade--decoy rect { fill: var(--pz-text-3); }
.pz-heat .is-anim { animation: pz-fade-in 0.4s ease-out both; }
.pz-heat__meta { margin: var(--pz-space-2) 0 0; font-size: 12px; color: var(--pz-text-2); }
.pz-heat__lg--smoke::before { border-radius: 50%; background: var(--pz-text-3); }
.pz-heat__lg--flash::before { border-radius: 50%; border: 2px solid var(--pz-text-1); width: 6px; height: 6px; }
.pz-heat__lg--fire::before { background: var(--pz-warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pz-heat__lg--he::before { content: "×"; width: auto; height: auto; color: var(--pz-text-1); font-weight: 700; }

@media (min-width: 768px) {
  .pz-heat__filters { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: end; }
  .pz-replay__panels { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .pz-replay__panels { grid-template-columns: 1fr 1.4fr 1.2fr; }
}

/* ===== resources/css/layout-profile.css ===== */
/* ==========================================================================
   PlayZeek — profil gracza i profil drużyny (Profil.html, Druzyna.html)

   Mobile-first: makieta jest rysowana na 1440 px, ale układ zaczyna się
   od jednej kolumny na 360 px i rozjeżdża się dopiero w breakpointach.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nagłówek profilu
   -------------------------------------------------------------------------- */

.pz-profile-hero {
  position: relative;
  border-bottom: 1px solid var(--pz-line);
}

/* Banner 2880 × 264 z makiety. Bez wgranego pliku zostaje sam gradient,
   żeby nagłówek nie wyglądał na zepsuty. */
.pz-profile-hero__banner {
  height: 96px;
  background-color: var(--pz-surface);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--pz-line);
}

.pz-profile-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
  padding-bottom: var(--pz-space-5);
}

/* Avatar wchodzi na banner, jak w makiecie. */
.pz-profile-hero__avatar {
  margin-top: calc(var(--pz-avatar-size) / -2);
  border-width: 2px;
}

.pz-profile-hero__identity { min-width: 0; }

.pz-profile-hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-3);
}
.pz-profile-hero__title h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.pz-profile-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--pz-text-2);
}
/* Kropka rozdzielająca — tylko dekoracja, więc nie ma jej w treści.
   Doklejamy ją do pozycji POPRZEDNIEJ, nie następnej: przy zawijaniu
   na telefonie kropka na końcu linii wygląda naturalnie, a na początku
   nowej linii wygląda jak błąd. */
.pz-profile-hero__meta li:not(:last-child)::after {
  content: "·";
  margin-left: var(--pz-space-3);
  color: var(--pz-line-strong);
}
.pz-profile-hero__realname { font-weight: 600; color: var(--pz-text-1); }

.pz-profile-hero__team {
  margin: var(--pz-space-3) 0 0;
  font-size: 13px;
  color: var(--pz-text-3);
}

.pz-profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-3);
}

/* Przyciski kontaktu w jednym rzędzie (makieta Profil.html). Na telefonie
   zawijają się, a formularze i komponent znajomych nie mogą rozbijać rzędu. */
.pz-profile-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
}
.pz-profile-hero__buttons form { margin: 0; }
.pz-profile-hero__buttons .pz-friend-actions {
  display: contents;
}
.pz-profile-hero__buttons .pz-friend-actions form { flex: 0 0 auto; }
.pz-profile-hero__buttons .pz-friend-actions .pz-btn { width: auto; }

.pz-profile-hero__rank {
  display: flex;
  align-items: center;
  gap: var(--pz-space-4);
  padding: var(--pz-space-3) var(--pz-space-4);
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
}
.pz-profile-hero__rank .pz-label { display: block; margin-bottom: var(--pz-space-1); }
.pz-profile-hero__rank-value {
  font-family: var(--pz-font-display);
  font-stretch: var(--pz-display-stretch);
  font-weight: 900;
  font-size: 20px;
  color: var(--pz-text-1);
}
.pz-profile-hero__rank-sep {
  width: 1px;
  height: 38px;
  background: var(--pz-line);
}

/* --------------------------------------------------------------------------
   Sekcje profilu
   -------------------------------------------------------------------------- */

.pz-profile-stats {
  border-bottom: 1px solid var(--pz-line);
  background: var(--pz-bg-alt);
  padding-block: var(--pz-space-5);
}

.pz-profile-sections {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-7);
  padding-block: var(--pz-space-6) var(--pz-space-8);
}

.pz-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-4);
}

/* Nagłówek stojący W ŚRODKU sekcji (np. „Lista rezerwowa” pod listą
   zapisanych) potrzebuje odstępu OD GÓRY — sam margines dolny zostawiał go
   przyklejonego do tego, co nad nim. Nagłówek pierwszy w kontenerze ma
   odstęp od układu strony i niczego nie dokłada. */
.pz-section-head:not(:first-child) { margin-top: var(--pz-space-6); }

/* …chyba że stoi bezpośrednio w stosie sekcji — tam rytm daje `gap`
   kontenera i własny margines tylko by go podwoił. */
.pz-page-sections > .pz-section-head { margin-top: 0; }

/* Nagłówek strony (h1) pierwszy w gołym kontenerze strony — Ligi, Rankingi,
   Bany, Strefa gier — stał 0 px pod paskiem gier. Ten sam odstęp co starsze
   strony (Turnieje, Aktualności, Partnerzy: 24 px). Kontenery z własnym
   odstępem od góry (stos sekcji, giełda, drużyny, wiadomości, status,
   zarządzanie i historia drużyny) zostają bez zmian (UXF3) — nowy kontener
   z własnym `padding-top` dopisz do wyjątków. */
.pz-main > .pz-container:not(.pz-page-sections, .pz-lfg, .pz-teams, .pz-inbox, .pz-status-page, .pz-team-manage, .pz-team-history) > .pz-section-head:first-child:has(.pz-section-head__title:is(h1)) {
  margin-top: var(--pz-space-5);
}
.pz-section-head__kicker {
  margin: 0 0 var(--pz-space-2);
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pz-accent);
}
.pz-section-head__title {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.pz-section-head__aside {
  font-size: 12px;
  color: var(--pz-text-3);
}

/* Pusty stan (.pz-empty) i znacznik (.pz-chip) siedzą w components.css —
   używa ich także panel administracyjny, a ten arkusz wchodzi tylko do app.css. */

/* --------------------------------------------------------------------------
   Breakpointy
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .pz-profile-hero__banner { height: 132px; }

  .pz-profile-hero__inner {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--pz-space-5);
    align-items: start;
  }
  .pz-profile-hero__avatar { grid-row: span 2; }
  .pz-profile-hero__actions { grid-column: 2; }

  .pz-profile-hero__title h1 { font-size: 34px; }
  .pz-section-head__title { font-size: 26px; }
}

@media (min-width: 1024px) {
  /* Układ z makiety: avatar | dane | ranking i akcje po prawej. */
  .pz-profile-hero__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .pz-profile-hero__avatar { grid-row: 1; }
  .pz-profile-hero__actions {
    grid-column: 3;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
  }
  .pz-profile-hero__buttons { justify-content: flex-end; }

  .pz-profile-hero__title h1 { font-size: 40px; }
  .pz-section-head__title { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   Ustawienia konta (rozdz. 3.1)
   -------------------------------------------------------------------------- */

.pz-account { padding-block: var(--pz-space-6) var(--pz-space-8); }

.pz-account__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
}
.pz-account__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-3);
}
.pz-account__narrow { max-width: 520px; }

.pz-account__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--pz-space-5);
}

.pz-account__media {
  display: flex;
  align-items: flex-start;
  gap: var(--pz-space-4);
}
.pz-account__media > div { flex-grow: 1; min-width: 0; }

.pz-account__banner {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
}

/* Zakladki ustawien. Na telefonie przewijaja sie poziomo we wlasnym
   kontenerze - strona nadal nie ma poziomego scrolla. */
.pz-tabs {
  display: flex;
  gap: var(--pz-space-1);
  margin-bottom: var(--pz-space-5);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--pz-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.pz-tabs::-webkit-scrollbar { display: none; }
.pz-tabs__item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: var(--pz-tap-target);
  padding-inline: var(--pz-space-4);
  border-bottom: 2px solid transparent;
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pz-text-2);
  white-space: nowrap;
}
.pz-tabs__item:hover { color: var(--pz-text-1); }
.pz-tabs__item[aria-current="page"] {
  color: var(--pz-text-1);
  border-bottom-color: var(--pz-accent);
}

/* Pas informacyjny z akcja po prawej (eksport gotowy, konto do usuniecia). */
.pz-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-4);
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
}
.pz-notice > div { flex-grow: 1; min-width: 200px; }
.pz-notice__title {
  margin: 0 0 var(--pz-space-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--pz-text-1);
}
.pz-notice__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--pz-text-2);
}
.pz-notice--live {
  border-color: var(--pz-live-line);
  background: var(--pz-live-bg);
}
.pz-notice--live .pz-notice__title { color: var(--pz-live-text); }
.pz-notice--warn {
  border-color: var(--pz-warn-line);
  background: var(--pz-warn-bg);
}
.pz-notice--warn .pz-notice__title { color: var(--pz-warn-text); }

@media (min-width: 768px) {
  .pz-account__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  .pz-account__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Paszport gracza (rozdz. 3.2) - karty identyfikatorow z makiety Profil.html
   -------------------------------------------------------------------------- */

.pz-passport-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
}

.pz-passport-card {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
}
/* Kolor ramki niesie stan weryfikacji. Czerwien tylko dla odrzucenia
   i banow VAC - twarda regula nr 12. */
.pz-passport-card--ok   { border-color: var(--pz-ok-text); }
.pz-passport-card--warn { border-color: var(--pz-warn-line); background: var(--pz-warn-bg); }
.pz-passport-card--live { border-color: var(--pz-live-line); background: var(--pz-live-bg); }

.pz-passport-card__head {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
  min-width: 0;
}
.pz-passport-card__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--pz-line-strong);
  background: var(--pz-surface-3);
  font-family: var(--pz-font-mono);
  font-weight: 600;
  font-size: 10px;
  color: var(--pz-text-2);
}
.pz-passport-card__name {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--pz-text-1);
}
.pz-passport-card__value {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--pz-text-1);
}
.pz-passport-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  padding-top: var(--pz-space-3);
  border-top: 1px solid var(--pz-line-soft);
  font-size: 11px;
  color: var(--pz-text-3);
}
.pz-passport-card__foot > span:first-child { min-width: 0; }
.pz-passport-card__ban {
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--pz-live-line);
  border-radius: var(--pz-radius-badge);
  background: var(--pz-live-bg);
  font-size: 11px;
  color: var(--pz-live-text);
}

.pz-passport-card__form {
  display: flex;
  gap: var(--pz-space-2);
}
.pz-passport-card__form .pz-input { min-width: 0; }
.pz-passport-card__window {
  margin: 0;
  font-size: 11px;
  color: var(--pz-text-3);
}
.pz-passport-card__remove {
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  color: var(--pz-text-3);
  text-decoration: underline;
}
.pz-passport-card__remove:hover { color: var(--pz-live-text); }

.pz-countdown { color: var(--pz-warn-text); }

.pz-passport-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-3);
  align-items: end;
}

/* Decyzje w kolejkach CMS (.pz-passport-decision) siedzą w components.css —
   ten arkusz wchodzi tylko do app.css, a kolejki są w panelu. */

@media (min-width: 768px) {
  .pz-passport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-passport-add { grid-template-columns: 220px minmax(0, 1fr) auto; }
}

@media (min-width: 1024px) {
  .pz-passport-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Panel "Unikalnosc konta" (rozdz. 3.2)
   -------------------------------------------------------------------------- */

.pz-passport-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
  align-items: start;
}

.pz-passport-connect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-4);
}

.pz-uniqueness {
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  overflow: hidden;
}
.pz-uniqueness__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  min-height: 44px;
  padding-inline: var(--pz-space-4);
  background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-line);
}
.pz-uniqueness__level--ok   { color: var(--pz-ok-text); }
.pz-uniqueness__level--warn { color: var(--pz-warn-text); }
.pz-uniqueness__level--live { color: var(--pz-live-text); }

.pz-uniqueness__list {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  margin: 0;
  padding: var(--pz-space-4);
  list-style: none;
}
.pz-uniqueness__item {
  display: flex;
  align-items: flex-start;
  gap: var(--pz-space-3);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pz-accent);
}
.pz-uniqueness__item span { color: var(--pz-text-1); }
/* Brak sygnalu to informacja, nie blad - stad pomarancz, nie czerwien. */
.pz-uniqueness__item.is-missing { color: var(--pz-warn); }
.pz-uniqueness__item.is-missing span { color: var(--pz-text-2); }
.pz-uniqueness__item svg { flex-shrink: 0; margin-top: 2px; }

.pz-uniqueness__note {
  margin: 0;
  padding: var(--pz-space-3) var(--pz-space-4) var(--pz-space-4);
  border-top: 1px solid var(--pz-line-soft);
  font-size: 11px;
  line-height: 1.6;
  color: var(--pz-text-3);
}

@media (min-width: 1024px) {
  /* Uklad z makiety: karty po lewej, panel unikalnosci po prawej. */
  .pz-passport-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .pz-passport-layout .pz-passport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bez panelu unikalności (gość, inny gracz — decyzja 29.09.2026) karty
     zajmują całą szerokość. */
  .pz-passport-layout--single { grid-template-columns: minmax(0, 1fr); }
  .pz-passport-layout--single .pz-passport-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Gablota pucharów i historia turniejów (Profil.html, Druzyna.html)
   ========================================================================== */

.pz-trophy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-trophy-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
}

.pz-trophy-legend strong { color: var(--pz-text-1); font-weight: 600; }

.pz-trophy-legend__dot { width: 10px; height: 10px; display: inline-block; }
.pz-trophy-legend__dot--1 { background: var(--pz-gold); }
.pz-trophy-legend__dot--2 { background: var(--pz-silver); }
.pz-trophy-legend__dot--3 { background: var(--pz-bronze); }

.pz-trophies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: var(--pz-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-trophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pz-space-3);
  padding: var(--pz-space-5) var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  text-align: center;
}

.pz-trophy--1 { border-color: #3D3520; background: var(--pz-warn-bg); }
.pz-trophy--3 { border-color: #38271A; }

.pz-trophy__place {
  font-family: var(--pz-font-display);
  font-stretch: 110%;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pz-trophy--1 .pz-trophy__place { color: var(--pz-gold); }
.pz-trophy--2 .pz-trophy__place { color: var(--pz-silver); }
.pz-trophy--3 .pz-trophy__place { color: var(--pz-bronze); }

.pz-trophy__name {
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-trophy__name:hover { color: var(--pz-accent); }
.pz-trophy__meta { font-size: 11px; line-height: 1.6; color: var(--pz-text-3); }

/* --------------------------------------------------------------------------
   Historia turniejów

   Na telefonie każdy start jest kartą, od 1024 px wierszem tabeli —
   ten sam kod, inny układ. Bez poziomego scrolla strony.
   -------------------------------------------------------------------------- */

.pz-starts {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  overflow: hidden;
}

.pz-starts__head { display: none; }

.pz-starts__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
  padding: var(--pz-space-3) var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line-soft);
}

.pz-starts > li:last-child { border-bottom: 0; }
.pz-starts__row:last-child { border-bottom: 0; }

.pz-starts__place {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-width: 56px;
}

.pz-starts__rank {
  font-family: var(--pz-font-display);
  font-weight: 900;
  font-size: 17px;
  color: var(--pz-text-3);
}

.pz-starts__rank--1 { color: var(--pz-gold); }
.pz-starts__rank--2 { color: var(--pz-silver); }
.pz-starts__rank--3 { color: var(--pz-bronze); }

.pz-starts__color { display: none; }

.pz-starts__tournament { min-width: 0; }

.pz-starts__tournament a {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--pz-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-starts__tournament a:hover { color: var(--pz-accent); }
.pz-starts__tournament small { display: block; font-size: 11px; color: var(--pz-text-3); }

.pz-starts__team,
.pz-starts__date,
.pz-starts__format,
.pz-starts__record {
  grid-column: 2;
  font-size: 12px;
  color: var(--pz-text-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-starts__team a { color: inherit; }
.pz-starts__team a:hover { color: var(--pz-accent); }

.pz-starts__more {
  margin: var(--pz-space-3) 0 0;
  font-size: 12px;
  color: var(--pz-text-3);
}

@media (min-width: 1024px) {
  .pz-starts__head {
    display: grid;
    grid-template-columns: 104px 4px minmax(0, 1fr) 96px 124px 104px;
    align-items: center;
    min-height: 42px;
    padding-inline: var(--pz-space-4);
    background: var(--pz-surface-2);
    border-bottom: 1px solid var(--pz-line);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pz-text-3);
  }

  .pz-starts__row {
    grid-template-columns: 104px 4px minmax(0, 1fr) 96px 124px 104px;
    gap: var(--pz-space-3);
    min-height: 62px;
  }

  /* Wariant z kolumną drużyny (profil gracza). */
  .pz-starts--with-team .pz-starts__head,
  .pz-starts--with-team .pz-starts__row {
    grid-template-columns: 104px 4px minmax(0, 1fr) 160px 96px 124px 104px;
  }

  .pz-starts__color {
    display: block;
    width: 4px;
    align-self: stretch;
    background: var(--pz-game-color, var(--pz-muted));
  }

  .pz-starts__team,
  .pz-starts__date,
  .pz-starts__format,
  .pz-starts__record { grid-column: auto; }
}

/* ==========================================================================
   Logowanie dwuskładnikowe (krok B6)
   ========================================================================== */

/* Kod QR na białym tle: czytniki radzą sobie z ciemnym motywem różnie,
   a to jest ten jeden element, który MUSI dać się zeskanować za pierwszym
   razem — inaczej człowiek rezygnuje z konfiguracji. */
.pz-2fa-qr {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin-block: var(--pz-space-3);
  padding: var(--pz-space-3);
  background: #FFFFFF;
  border-radius: var(--pz-radius-card);
}

.pz-2fa-secret {
  margin: 0 0 var(--pz-space-4);
  padding: var(--pz-space-3);
  background: var(--pz-bg-alt);
  border: 1px solid var(--pz-line-soft);
  border-radius: var(--pz-radius-input);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

/* Kody zapasowe: duże, monospace, do przepisania z ekranu na kartkę. */
.pz-2fa-codes__list {
  margin: var(--pz-space-3) 0;
  padding: var(--pz-space-4);
  list-style: none;
  display: grid;
  gap: var(--pz-space-2);
  background: var(--pz-bg-alt);
  border: 1px solid var(--pz-line-soft);
  border-radius: var(--pz-radius-card);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--pz-text-1);
}

@media (min-width: 560px) {
  .pz-2fa-codes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Podtytuł statystyk CS2 z serwerów turniejowych (etap 5.5, sesja E). */
.pz-profile-stats__sub {
  margin: var(--pz-space-5) 0 var(--pz-space-3);
  font-family: var(--pz-font-display);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pz-text-2);
}

/* Osiągnięcia (Profil.html, etap 7C). Odblokowane — ramka złotem z tokenów
   (makieta ma tu akcent, ale akcent jest tylko dla akcji — zasada 5);
   zablokowane — wygaszone, z kłódką i paskiem postępu. */
.pz-achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--pz-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-achievement {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-1);
  min-width: 0;
  padding: var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface-2);
}

.pz-achievement.is-locked { background: var(--pz-bg-deep); }

.pz-achievement__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--pz-space-2);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-badge);
  color: var(--pz-text-3);
}

.pz-achievement.is-unlocked .pz-achievement__icon {
  border-color: var(--pz-gold);
  color: var(--pz-gold);
}

.pz-achievement__name {
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-achievement.is-locked .pz-achievement__name { color: var(--pz-text-2); }

.pz-achievement__desc {
  font-size: 11px;
  color: var(--pz-text-3);
  overflow-wrap: anywhere;
}

.pz-achievement__bar {
  display: block;
  height: 4px;
  margin-top: var(--pz-space-2);
  border-radius: 2px;
  background: var(--pz-line);
  overflow: hidden;
}

.pz-achievement__bar > span {
  display: block;
  height: 100%;
  background: var(--pz-text-2);
}

.pz-achievement__meta {
  font-size: 11px;
  color: var(--pz-text-3);
}

/* Statystyki z dem (DEMO4, ekran 05): mapy z odsetkiem wygranych i ostatnie mecze z analizą.
   Pasek wygranych w kolorze gry (CS2), nie akcentem — akcent jest tylko dla akcji (zasada 5). */
.pz-demo-stats__grid {
  display: grid;
  gap: var(--pz-space-5);
  margin: var(--pz-space-5) 0 var(--pz-space-3);
}
.pz-demo-stats__head { margin: 0 0 var(--pz-space-3); color: var(--pz-text-2); }
.pz-demo-stats__maps,
.pz-demo-stats__recent { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pz-space-2); }
.pz-demo-stats__map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--pz-space-3);
  padding: var(--pz-space-3);
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
}
.pz-demo-stats__map-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pz-demo-stats__map-meta { font-family: var(--pz-font-mono); font-size: 12px; color: var(--pz-text-2); }
.pz-demo-stats__bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--pz-surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.pz-demo-stats__bar > span { display: block; height: 100%; background: var(--pz-game-cs2, var(--pz-text-2)); }
.pz-demo-stats__match {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px var(--pz-space-3);
  align-items: center;
  padding: var(--pz-space-3);
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  color: inherit;
  text-decoration: none;
}
.pz-demo-stats__match:hover,
.pz-demo-stats__match:focus-visible { border-color: var(--pz-line-strong); }
.pz-demo-stats__result {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--pz-radius-badge);
  font-family: var(--pz-font-mono);
  font-weight: 700;
  font-size: 13px;
  background: var(--pz-surface-3);
  color: var(--pz-text-2);
}
.pz-demo-stats__result--win { color: var(--pz-text-1); border: 1px solid var(--pz-game-cs2, var(--pz-line-strong)); }
.pz-demo-stats__match-main { display: grid; gap: 2px; min-width: 0; }
.pz-demo-stats__match-title { font-weight: 600; overflow-wrap: anywhere; }
.pz-demo-stats__match-meta { font-size: 12px; color: var(--pz-text-2); overflow-wrap: anywhere; }
.pz-demo-stats__match-line { grid-column: 2; font-size: 13px; color: var(--pz-text-2); }
@media (min-width: 768px) {
  .pz-demo-stats__match { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pz-demo-stats__match-line { grid-column: auto; }
}
@media (min-width: 1024px) {
  .pz-demo-stats__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* ===== resources/css/layout-team.css ===== */
/* ==========================================================================
   PlayZeek — drużyny, giełda drużyn i powiadomienia (Druzyna.html)

   Mobile-first, tak jak reszta: makieta jest rysowana na 1440 px, ale układ
   startuje w jednej kolumnie na 360 px i rozjeżdża się w breakpointach
   390 / 768 / 1024 / 1440. Żadnych kolorów spoza tokenów.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Drobiazgi wspólne dla tych ekranów
   -------------------------------------------------------------------------- */

.pz-lead {
  max-width: 72ch;
  margin: 0 0 var(--pz-space-5);
  color: var(--pz-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.pz-muted {
  color: var(--pz-text-3);
  font-size: 12px;
}

.pz-h3 {
  margin: 0 0 var(--pz-space-3);
  font-family: var(--pz-font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pz-narrow { max-width: 720px; }

.pz-panel__lead,
.pz-panel__note {
  margin: 0 0 var(--pz-space-4);
  color: var(--pz-text-3);
  font-size: 12px;
  line-height: 1.6;
}

.pz-panel__note {
  margin: var(--pz-space-4) 0 0;
}

/* Filtry nad listą. Na telefonie jedna kolumna, od 768 px w rzędzie. */
.pz-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-5);
}

.pz-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--pz-space-2);
}

.pz-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  margin: var(--pz-space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Nagłówek profilu drużyny
   -------------------------------------------------------------------------- */

.pz-team-hero {
  position: relative;
  border-bottom: 1px solid var(--pz-line);
}

/* Banner 2880 × 280 z makiety. Bez wgranego pliku zostaje samo tło —
   nagłówek ma wyglądać tak samo z obrazkiem i bez niego. */
.pz-team-hero__banner {
  height: 96px;
  background-color: var(--pz-surface);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--pz-line);
}

.pz-team-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
  padding-bottom: var(--pz-space-5);
}

.pz-team-hero__logo {
  margin-top: calc(var(--pz-avatar-size) / -2);
  border-width: 2px;
}

.pz-team-hero__identity { min-width: 0; }

.pz-team-hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-3);
}

.pz-team-hero__title h1 {
  margin: 0;
  font-family: var(--pz-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.pz-team-hero__tag {
  color: var(--pz-text-3);
  font-size: 14px;
}

.pz-team-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-4);
  margin: 0;
  padding: 0;
  color: var(--pz-text-2);
  font-size: 13px;
  list-style: none;
}

.pz-team-hero__notice { margin-top: var(--pz-space-4); }

.pz-team-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
}

.pz-team > * + * { margin-top: var(--pz-space-6); }
.pz-team { padding-block: var(--pz-space-6); }

.pz-team__request { margin-bottom: var(--pz-space-5); }

.pz-team-manage { padding-block: var(--pz-space-6); }
.pz-team-manage > * + * { margin-top: var(--pz-space-5); }

.pz-teams,
.pz-lfg { padding-block: var(--pz-space-6); }

/* --------------------------------------------------------------------------
   Lista drużyn
   -------------------------------------------------------------------------- */

.pz-team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-team-card {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  color: inherit;
}

.pz-team-card:hover { border-color: var(--pz-line-hover); }

.pz-team-card__body { min-width: 0; }

.pz-team-card__name {
  margin: 0 0 var(--pz-space-1);
  font-weight: 600;
  font-size: 14px;
}

.pz-team-card__name .pz-num {
  color: var(--pz-text-3);
  font-size: 12px;
}

.pz-team-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin: 0 0 var(--pz-space-1);
  color: var(--pz-text-2);
  font-size: 12px;
}

.pz-team-card__roster {
  margin: 0;
  color: var(--pz-text-3);
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Skład: karty zawodników
   -------------------------------------------------------------------------- */

.pz-roster-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-3);
  margin-top: var(--pz-space-4);
}

.pz-roster-card {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
}

/* Sztab nie gra — przygaszony, żeby wzrok najpierw trafiał w podstawę. */
.pz-roster-card--staff {
  background: var(--pz-bg-alt);
  border-style: dashed;
}

/* Czerwień WYŁĄCZNIE przy aktywnej karze (twarda reguła nr 5). */
.pz-roster-card--penalty { border-color: var(--pz-live-line); }

.pz-roster-card__head {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
}

.pz-roster-card__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}

.pz-roster-card__nick {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}

.pz-roster-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pz-space-2);
  margin: 0;
}

.pz-roster-card__facts dt {
  color: var(--pz-text-4);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pz-roster-card__facts dd {
  margin: 2px 0 0;
  color: var(--pz-text-1);
  font-size: 12px;
}

.pz-roster-card__slot {
  margin: 0;
  color: var(--pz-text-4);
  font-size: 11px;
}

.pz-roster-card__penalty {
  margin: 0;
  padding: var(--pz-space-2);
  border: 1px solid var(--pz-live-line);
  border-radius: var(--pz-radius-badge);
  background: var(--pz-live-bg);
  color: var(--pz-live-text);
  font-size: 11px;
}

/* Token roli w składzie. Akcent tylko dla kapitana — to on „może działać”. */
.pz-role-token {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  color: var(--pz-text-2);
  font-family: var(--pz-font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pz-role-token--captain {
  border-color: var(--pz-accent);
  color: var(--pz-accent);
}

.pz-role-token--substitute {
  border-color: var(--pz-warn);
  color: var(--pz-warn-text);
}

.pz-role-token--staff {
  border-style: dashed;
  border-color: var(--pz-line-active);
  color: var(--pz-text-3);
}

/* --------------------------------------------------------------------------
   Blokady składu
   -------------------------------------------------------------------------- */

.pz-lock-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-lock {
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-bg-alt);
}

.pz-lock--blocked {
  border-color: var(--pz-warn-line);
  background: var(--pz-warn-bg);
}

.pz-lock__kind {
  margin: 0 0 var(--pz-space-1);
  color: var(--pz-text-4);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pz-lock__reason {
  margin: 0 0 var(--pz-space-2);
  font-family: var(--pz-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pz-lock__text {
  margin: 0;
  color: var(--pz-text-2);
  font-size: 12px;
  line-height: 1.6;
}

.pz-lock__meta {
  margin: var(--pz-space-2) 0 0;
  color: var(--pz-text-3);
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Zarządzanie składem
   -------------------------------------------------------------------------- */

.pz-member-list,
.pz-request-list,
.pz-invite-list,
.pz-lfg-list,
.pz-notification-list,
.pz-history {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
  padding-bottom: var(--pz-space-3);
  border-bottom: 1px solid var(--pz-line-faint);
}

.pz-member__nick {
  margin: 0;
  margin-right: auto;
  font-weight: 600;
  font-size: 13px;
}

.pz-member__form { margin: 0; }

.pz-invite-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin: 0 0 var(--pz-space-2);
  word-break: break-all;
  font-size: 12px;
}

/* Potwierdzenie skopiowania linku. Akcent, bo to reakcja na akcję. */
.pz-copied {
  color: var(--pz-accent);
  font-family: var(--pz-font-body);
  font-size: 12px;
  font-weight: 600;
}

.pz-request {
  display: grid;
  gap: var(--pz-space-3);
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-bg-alt);
}

.pz-request__who {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
}

.pz-request__message {
  margin: 0;
  color: var(--pz-text-2);
  font-size: 13px;
  font-style: italic;
}

.pz-request__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
}

/* --------------------------------------------------------------------------
   Zaproszenia
   -------------------------------------------------------------------------- */

.pz-invite {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pz-space-3) var(--pz-space-4);
  align-items: start;
}

.pz-invite__body { min-width: 0; }

.pz-invite__title {
  margin: 0 0 var(--pz-space-2);
  font-weight: 600;
  font-size: 14px;
}

.pz-invite__message {
  margin: var(--pz-space-2) 0 0;
  color: var(--pz-text-2);
  font-size: 13px;
  font-style: italic;
}

.pz-invite__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
}

/* --------------------------------------------------------------------------
   Wyzwania drużyn (etap 11B) — karta jak zaproszenie, a pod nią na całą
   szerokość wybór terminu i kontrpropozycja.
   -------------------------------------------------------------------------- */

.pz-challenge__accept,
.pz-challenge__counter {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--pz-space-3);
  justify-items: start;
  padding-top: var(--pz-space-3);
  border-top: 1px solid var(--pz-line-faint);
}

.pz-challenge__counter { justify-items: stretch; }
.pz-challenge__counter .pz-btn { justify-self: start; }

.pz-challenge__slots {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2) var(--pz-space-4);
}

.pz-challenge__slots legend { margin-bottom: var(--pz-space-2); }

.pz-challenge__slot {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-height: 32px;
  cursor: pointer;
}

.pz-challenge-form__slots {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--pz-space-2);
}

/* --------------------------------------------------------------------------
   Historia składu
   -------------------------------------------------------------------------- */

.pz-history__item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--pz-space-3);
  padding-bottom: var(--pz-space-2);
  border-bottom: 1px solid var(--pz-line-faint);
  font-size: 13px;
}

.pz-history__date {
  color: var(--pz-text-4);
  font-size: 11px;
}

.pz-history__sign {
  color: var(--pz-text-3);
  font-weight: 700;
}

.pz-history__text { min-width: 0; }

/* --------------------------------------------------------------------------
   Giełda drużyn
   -------------------------------------------------------------------------- */

.pz-lfg-post {
  display: grid;
  gap: var(--pz-space-3);
}

/* „Zgłoś” — drugorzędne, jak przy wiadomości w komunikatorze. */

/* Archiwum — tylko do czytania, więc przygaszone (sesja E). */
.pz-lfg-post--archived { opacity: 0.72; }

/* Filtr gry pod chipami: lista rozwijana i przycisk w jednym rzędzie od 390 px. */
.pz-lfg-game-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pz-space-2) var(--pz-space-3);
  margin-bottom: var(--pz-space-5);
}
.pz-lfg-game-filter > :first-of-type { flex: 1 1 200px; margin-bottom: 0; }

/* Wyzwania otwarte (11C) — filtry jak na Tablicy, kilka list obok siebie. */
.pz-open-challenges__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pz-space-2) var(--pz-space-3);
}
.pz-open-challenges__filters > .pz-field { flex: 1 1 160px; margin-bottom: 0; }

.pz-lfg-post__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
}

.pz-lfg-post__author {
  margin-left: auto;
  font-weight: 600;
  font-size: 13px;
}

.pz-lfg-post__role,
.pz-lfg__headline {
  margin: 0;
  font-size: 14px;
}

.pz-lfg-post__text {
  margin: 0;
  color: var(--pz-text-2);
  font-size: 13px;
  line-height: 1.6;
}

.pz-lfg-post__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-3);
  padding-top: var(--pz-space-3);
  border-top: 1px solid var(--pz-line-faint);
}

/* --------------------------------------------------------------------------
   Powiadomienia
   -------------------------------------------------------------------------- */

.pz-notification {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pz-space-2) var(--pz-space-3);
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
}

/* Nieprzeczytane wyróżnia lewa krawędź w akcencie: to jedyne miejsce,
   w którym „jest coś do zrobienia”. */
.pz-notification--unread {
  border-left: 2px solid var(--pz-accent);
}

.pz-notification__title {
  margin: 0 0 var(--pz-space-1);
  font-weight: 600;
  font-size: 13px;
}

.pz-notification__text {
  margin: 0;
  color: var(--pz-text-2);
  font-size: 12px;
  line-height: 1.6;
}

.pz-notification__time {
  color: var(--pz-text-4);
  font-size: 11px;
  white-space: nowrap;
}

/* Dzwonek w nagłówku. Liczba nieprzeczytanych w akcencie — to jedyne
   miejsce w pasku, w którym „można teraz działać”. */
.pz-bell { position: relative; }

.pz-bell__dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--pz-accent);
  color: var(--pz-bg);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Breakpointy
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .pz-team-hero__banner { height: 160px; }

  .pz-team-hero__inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
  }

  .pz-team-hero__actions { grid-column: 1 / -1; }

  .pz-team-hero__title h1 { font-size: 32px; }

  .pz-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pz-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pz-roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pz-lock-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pz-invite { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pz-invite__actions { grid-column: auto; }
}

@media (min-width: 1024px) {
  .pz-team-hero__banner { height: 200px; }

  .pz-team-hero__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .pz-team-hero__actions {
    grid-column: auto;
    justify-content: flex-end;
  }

  .pz-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pz-roster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pz-lock-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
  .pz-team-hero__banner { height: 240px; }

  .pz-roster-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Historia meczów drużyny (Druzyna.html)

   Wiersz zawija się na telefonie zamiast wyjeżdżać poza kartę — ten sam
   powód co przy liście uczestników.
   -------------------------------------------------------------------------- */

.pz-matches {
  display: grid;
  gap: var(--pz-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
  padding: var(--pz-space-2) var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-left-width: 3px;
  border-radius: var(--pz-radius-input);
  background: var(--pz-surface);
}

/* Kolor niesie wynik, a nie dekorację: akcent przy wygranej,
   czerwień przy porażce (twarda reguła nr 5 — czerwień tylko live i błędy,
   a przegrany mecz jest tu najbliższym odpowiednikiem stanu negatywnego). */
.pz-match--win { border-left-color: var(--pz-accent); }
.pz-match--loss { border-left-color: var(--pz-live); }
.pz-match--draw { border-left-color: var(--pz-line-active); }

.pz-match__result {
  flex: 0 0 auto;
  width: 20px;
  font-family: var(--pz-font-display);
  font-weight: 900;
  font-size: 13px;
  text-align: center;
  color: var(--pz-text-3);
}

.pz-match--win .pz-match__result { color: var(--pz-accent); }
.pz-match--loss .pz-match__result { color: var(--pz-live-text); }

.pz-match__body {
  flex: 1 1 160px;
  min-width: 0;
}

.pz-match__rival {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pz-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-match__body small {
  display: block;
  font-size: 11px;
  color: var(--pz-text-3);
}

.pz-match__body small a { color: var(--pz-text-2); }
.pz-match__body small a:hover { color: var(--pz-accent); }

.pz-match__score {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--pz-text-1);
}

.pz-match__date {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--pz-text-3);
}

/* Pasek statystyk drużyny — sześć kafelków, od jednej kolumny w górę. */
.pz-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--pz-space-3);
}

/* --------------------------------------------------------------------------
   Historia drużyny — osobny widok (rozdz. 3.4, sesja E)

   Mobile-first: poniżej 768 px każdy wiersz tabeli jest kartą z etykietami
   z `data-label` (cztery kolumny przy 360 px to cztery kolumny po jednym
   słowie). Od 768 px ta sama treść wraca do zwykłej tabeli.
   -------------------------------------------------------------------------- */

.pz-team-history { padding-block: var(--pz-space-5) var(--pz-space-7); }
.pz-team-history .pz-tabs { margin-bottom: var(--pz-space-4); }
.pz-team-history .pz-chips { margin-bottom: var(--pz-space-5); }

.pz-event-icon {
  display: inline-flex;
  flex: none;
  color: var(--pz-text-2);
  vertical-align: -3px;
}
/* „+” z makiety Druzyna.html jest zielony — dołączenie. */
.pz-event-icon--joins      { color: var(--pz-ok-text); }
.pz-event-icon--departures { color: var(--pz-text-4); }

.pz-history-month { margin-bottom: var(--pz-space-6); }
.pz-history-month__title {
  margin: 0 0 var(--pz-space-3);
  font-family: var(--pz-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-history-table,
.pz-history-table tbody,
.pz-history-table tr,
.pz-history-table td { display: block; }

.pz-history-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pz-history-table tbody { display: grid; gap: var(--pz-space-2); }

.pz-history-table tr {
  padding: var(--pz-space-3) var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
}

.pz-history-table td {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  gap: var(--pz-space-3);
  padding: var(--pz-space-1) 0;
  border: 0;
  overflow-wrap: anywhere;
}

.pz-history-table td::before {
  content: attr(data-label);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-4);
  padding-top: 2px;
}

.pz-history-table__date { color: var(--pz-text-3); font-size: 12px; }
.pz-history-table__what { display: inline-flex; gap: var(--pz-space-2); align-items: baseline; color: var(--pz-text-1); }
.pz-history-table__reason {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--pz-text-3);
}

.pz-history-person { font-weight: 600; }
.pz-history-person--deleted { font-weight: 400; font-style: italic; color: var(--pz-text-3); }
.pz-history-staff { color: var(--pz-text-1); font-weight: 600; }

.pz-panel__more { margin: var(--pz-space-3) 0 0; font-size: 13px; }

/* Okresy składu — oś czasu kart. Trwający okres ma mocniejszą linię,
   bez akcentu: to informacja, nie akcja. */
.pz-periods {
  display: grid;
  gap: var(--pz-space-4);
  margin: 0 0 var(--pz-space-5);
  padding: 0;
  list-style: none;
}

.pz-period {
  display: grid;
  gap: var(--pz-space-3);
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-left: 3px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
}
.pz-period--current { border-left-color: var(--pz-text-2); }
.pz-period--unassigned { margin-bottom: var(--pz-space-5); border-left-style: dashed; }

.pz-period__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pz-space-2);
}
.pz-period__dates { margin: 0; color: var(--pz-text-1); font-size: 14px; }
.pz-period__now { color: var(--pz-text-2); }
.pz-period__length,
.pz-period__none,
.pz-period__staff { margin: 0; font-size: 12px; color: var(--pz-text-3); }
.pz-period__subtitle { margin: 0; font-size: 14px; color: var(--pz-text-1); }

.pz-period__roster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pz-period__member {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  background: var(--pz-surface-2);
  font-size: 13px;
}
.pz-period__member small { color: var(--pz-text-3); font-size: 11px; }

.pz-period__trophies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-4);
  margin: 0;
  font-size: 13px;
  color: var(--pz-text-2);
}
.pz-period__trophy { display: inline-flex; align-items: center; gap: 6px; }

.pz-period__starts {
  display: grid;
  gap: var(--pz-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pz-period__start {
  display: grid;
  grid-template-columns: 56px auto minmax(0, 1fr);
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
  font-size: 13px;
}
.pz-period__start a { overflow-wrap: anywhere; }
.pz-period__start-date { grid-column: 3; color: var(--pz-text-4); font-size: 11px; }
.pz-period__place { display: inline-flex; align-items: center; gap: 4px; color: var(--pz-text-1); }

@media (min-width: 768px) {
  .pz-history-table { display: table; }
  .pz-history-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
  .pz-history-table tbody { display: table-row-group; }
  .pz-history-table tr { display: table-row; padding: 0; border: 0; background: none; }
  .pz-history-table td {
    display: table-cell;
    padding: var(--pz-space-3) var(--pz-space-4);
    border-bottom: 1px solid var(--pz-line-soft);
    vertical-align: top;
  }
  .pz-history-table td::before { content: none; }
  .pz-history-table__date { width: 150px; white-space: nowrap; }
  .pz-history-table__player { width: 22%; }
  .pz-history-table__actor { width: 26%; }

  .pz-period__start { grid-template-columns: 56px auto minmax(0, 1fr) auto; }
  .pz-period__start-date { grid-column: auto; }
}

/* ===== resources/css/layout-support.css ===== */
/* ==========================================================================
   Pomoc, kontakt i zgłoszenia (makieta Kontakt.html) — etap 4
   ==========================================================================
   Siatka działów, formularz zgłoszenia i potwierdzenie z numerem sprawy.
   Mobile-first: jedna kolumna do 768 px, dwie do 1024 px, trzy wyżej —
   dokładnie jak w makiecie przy 1440 px.
   ========================================================================== */

.pz-departments__title {
  display: block;
  margin: var(--pz-space-7) 0 var(--pz-space-3);
}

.pz-departments {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-7);
}

.pz-department {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  padding: var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
}

.pz-department__name {
  margin: 0;
  font-family: var(--pz-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--pz-text-1);
}

.pz-department__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pz-text-2);
}

/* Czas odpowiedzi trzyma się dołu karty, żeby w rzędzie kart wszystkie
   obietnice były na jednej wysokości niezależnie od długości opisu. */
.pz-department__sla {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pz-space-2);
  margin: auto 0 0;
  padding-top: var(--pz-space-3);
  border-top: 1px solid var(--pz-line);
  font-size: 12px;
  color: var(--pz-text-1);
}

/* --- Formularz ---------------------------------------------------------- */

.pz-contact-form {
  max-width: 860px;
}

/* Dwa pola obok siebie od 768 px; niżej jedno pod drugim, bo pole e-mail
   na telefonie i tak zajmuje całą szerokość. */
.pz-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--pz-space-4);
}

.pz-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-3);
  margin-top: var(--pz-space-5);
}

.pz-form-actions .pz-field__hint { margin: 0; }

.pz-file {
  padding: var(--pz-space-2);
  font-size: 13px;
  line-height: 1.4;
}

.pz-file::file-selector-button {
  margin-right: var(--pz-space-3);
  padding: 6px var(--pz-space-3);
  font: inherit;
  color: var(--pz-text-1);
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-input);
  cursor: pointer;
}

.pz-file::file-selector-button:hover { border-color: var(--pz-line-active); }

/* Pułapka na roboty: musi być NIEWIDOCZNA, ale nie przez `display: none` —
   część botów pomija pola ukryte w ten sposób. Stąd wyjazd poza ekran. */
.pz-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pz-contact-note {
  margin-top: var(--pz-space-4);
}

/* --- Potwierdzenie z numerem sprawy ------------------------------------- */

.pz-ticket-sent {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pz-space-2) var(--pz-space-3);
}

/* Numer zgłoszenia jest przepisywany ręcznie — większy, monospace
   i w akcencie, żeby dało się go znaleźć wzrokiem na ekranie telefonu. */
.pz-ticket-sent__reference {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pz-accent);
}

@media (min-width: 768px) {
  .pz-departments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pz-departments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Lista „Moje zgłoszenia” -------------------------------------------- */

.pz-ticket-list {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-ticket-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
}

.pz-ticket-row__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pz-space-3);
  flex: 1 1 260px;
  color: var(--pz-text-1);
}

.pz-ticket-row__link:hover .pz-ticket-row__subject { color: var(--pz-accent); }

.pz-ticket-row__reference {
  font-size: 12px;
  color: var(--pz-text-3);
}

.pz-ticket-row__subject { font-weight: 600; }

.pz-ticket-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  font-size: 12px;
  color: var(--pz-text-2);
}

/* --- Stan zgłoszenia ----------------------------------------------------- */

.pz-ticket-status {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: var(--pz-space-2);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  font-family: var(--pz-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pz-text-2);
  white-space: nowrap;
}

/* Akcent tylko tam, gdzie piłka jest po stronie patrzącego (reguła nr 5). */
.pz-ticket-status--waiting {
  border-color: var(--pz-accent);
  color: var(--pz-accent);
}

.pz-ticket-status--new,
.pz-ticket-status--open { color: var(--pz-text-1); }

.pz-ticket-status--resolved { color: var(--pz-ok-text); }

.pz-ticket-status--closed { color: var(--pz-text-3); }

/* --- Wątek zgłoszenia ---------------------------------------------------- */

.pz-ticket-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
  margin-bottom: var(--pz-space-5);
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-ticket-facts__reference {
  font-size: 14px;
  font-weight: 600;
  color: var(--pz-accent);
}

.pz-ticket-thread {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  margin: 0 0 var(--pz-space-6);
  padding: 0;
  list-style: none;
}

.pz-ticket-thread__item {
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
}

/* Wpis systemowy nie jest niczyją wypowiedzią, więc nie dostaje karty. */
.pz-ticket-thread__item--system {
  padding: 0 var(--pz-space-4);
  background: none;
  border: 0;
}

.pz-ticket-thread__system {
  margin: 0;
  font-size: 12px;
  color: var(--pz-text-3);
  /* Kopia ogłoszenia w zgłoszeniu (sesja E) ma wiersze — nie sklejamy ich. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.pz-ticket-thread__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-2);
}

.pz-ticket-thread__author {
  font-size: 13px;
  font-weight: 600;
  color: var(--pz-text-1);
}

.pz-ticket-thread__time {
  font-size: 11px;
  color: var(--pz-text-3);
}

.pz-ticket-thread__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pz-text-1);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.pz-ticket-thread__hidden,
.pz-ticket-thread__file-gone {
  font-size: 13px;
  font-style: italic;
  color: var(--pz-text-3);
}

.pz-ticket-thread__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2) var(--pz-space-4);
  margin: var(--pz-space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

/* --- Kolejka zgłoszeń w CMS --------------------------------------------- */

.pz-ticket-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-4);
}

.pz-ticket-count {
  display: flex;
  align-items: baseline;
  gap: var(--pz-space-2);
  padding: var(--pz-space-2) var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-ticket-count .pz-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--pz-text-1);
}

/* Czerwień wyłącznie dla przekroczonego terminu — to jedyna z tych liczb,
   która znaczy problem (twarda reguła nr 5: czerwień to live albo błąd). */
.pz-ticket-count--alert .pz-num { color: var(--pz-live-text); }

.pz-ticket-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--pz-space-4);
  align-items: end;
  margin-bottom: var(--pz-space-4);
}

.pz-ticket-filters .pz-button { margin-bottom: var(--pz-space-4); }

/* --- Termin odpowiedzi --------------------------------------------------- */

.pz-sla {
  font-family: var(--pz-font-mono);
  font-size: 11px;
  color: var(--pz-text-2);
  white-space: nowrap;
}

.pz-sla--overdue { color: var(--pz-live-text); font-weight: 600; }

/* Ostrzeżenie PRZED terminem — bursztyn, nie czerwień: czerwień w portalu
   znaczy „live albo błąd”, a tu nic jeszcze nie jest błędem. */
.pz-sla--nearing { color: var(--pz-warn-text); }
.pz-sla--answered { color: var(--pz-text-3); }

/* Wiersz po terminie: sama liczba w czerwieni gubi się w tabeli
   na kilkadziesiąt wierszy, więc zaznaczamy cały wiersz krawędzią. */
.pz-row--alert td:first-child { box-shadow: inset 2px 0 0 var(--pz-live); }

/* --- Sprawa w CMS -------------------------------------------------------- */

.pz-desk-main,
.pz-desk-side {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-4);
  min-width: 0;
}

/* Notatka wewnętrzna wygląda INACZEJ niż odpowiedź — pomyłka w tę stronę
   kosztuje najwięcej, więc różnica ma być widoczna kątem oka. */
.pz-ticket-thread__item--note {
  background: var(--pz-bg-alt);
  border-style: dashed;
  border-color: var(--pz-warn);
}

.pz-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pz-space-2) var(--pz-space-4);
  margin: 0;
  font-size: 13px;
}

.pz-facts dt {
  color: var(--pz-text-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pz-facts dd {
  margin: 0;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .pz-ticket-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
}

@media (min-width: 1280px) {
  .pz-ticket-filters { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
}

/* ==========================================================================
   Pomoc: wyszukiwarka, baza wiedzy, wpis (Kontakt.html) — krok B1
   ========================================================================== */

.pz-help-search {
  margin-block: var(--pz-space-5);
}

.pz-help-search__label {
  display: block;
  margin-bottom: var(--pz-space-2);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

/* Na telefonie pole i przycisk stoją jedno pod drugim — pasek wysokości
   52 px z makiety zmieściłby się, ale przycisk „Szukaj” zrobiłby się
   wtedy wąski na tyle, że trudno w niego trafić kciukiem. */
.pz-help-search__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--pz-space-3);
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line-hover);
  border-radius: var(--pz-radius-card);
}

.pz-help-search__row .pz-btn {
  grid-column: 1 / -1;
  justify-self: start;
}

.pz-help-search__icon {
  color: var(--pz-text-3);
  flex-shrink: 0;
}

.pz-help-search__input {
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--pz-text-1);
  font-family: inherit;
  font-size: 14px;
}

.pz-help-search__input::placeholder { color: var(--pz-text-3); }

.pz-help-search__clear {
  margin-block: var(--pz-space-4);
  font-size: 13px;
}

.pz-help-grid {
  display: grid;
  gap: var(--pz-space-5);
  margin-block: var(--pz-space-5);
}

.pz-help-grid__side {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-4);
  min-width: 0;
}

.pz-kb-group + .pz-kb-group { margin-top: var(--pz-space-5); }

.pz-kb-group__title {
  margin: 0 0 var(--pz-space-2);
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 17px;
  text-transform: uppercase;
  color: var(--pz-text-1);
}

.pz-kb-group__lead {
  margin: 0 0 var(--pz-space-3);
  font-size: 13px;
  line-height: 1.6;
  color: var(--pz-text-2);
}

.pz-kb-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pz-line-soft);
}

.pz-kb-item {
  padding-block: var(--pz-space-3);
  border-bottom: 1px solid var(--pz-line-soft);
}

.pz-kb-item__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--pz-text-1);
}

.pz-kb-item__title:hover { color: var(--pz-accent); }

.pz-kb-item__lead {
  margin: var(--pz-space-2) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pz-text-2);
}

.pz-kb-item__meta {
  display: inline-block;
  margin-top: var(--pz-space-2);
  font-family: var(--pz-font-mono);
  font-size: 11px;
  color: var(--pz-text-3);
}

/* Lista „Najczęstsze pytania” z kolumny bocznej makiety. */
.pz-faq-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-faq-list li + li { border-top: 1px solid var(--pz-line-soft); }

.pz-faq-list a {
  display: block;
  padding-block: var(--pz-space-3);
  font-size: 13px;
  line-height: 1.45;
  color: var(--pz-text-1);
}

.pz-faq-list a:hover { color: var(--pz-accent); }

/* --- Wpis bazy wiedzy, Regulamin, Polityka prywatności ------------------ */

.pz-article { padding-block: var(--pz-space-5); }

.pz-article__title {
  margin: 0 0 var(--pz-space-3);
  max-width: 24ch;
  font-family: var(--pz-font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--pz-text-1);
}

.pz-article__meta {
  margin: 0 0 var(--pz-space-5);
  font-size: 11px;
  color: var(--pz-text-3);
}

/* Treść wpisu. Znacznikowanie jest wąskie (`ArticleBody`), więc i style
   są wyliczone — wszystko, co może się tu pojawić, jest niżej. */
.pz-article__body {
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--pz-text-2);
}

.pz-article__body p { margin: 0 0 var(--pz-space-4); }

.pz-article__body h2,
.pz-article__body h3 {
  margin: var(--pz-space-6) 0 var(--pz-space-3);
  font-family: var(--pz-font-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--pz-text-1);
}

.pz-article__body h2 { font-size: 19px; }
.pz-article__body h3 { font-size: 15px; }

.pz-article__body ul,
.pz-article__body ol {
  margin: 0 0 var(--pz-space-4);
  padding-left: var(--pz-space-5);
}

.pz-article__body li { margin-bottom: var(--pz-space-2); }

.pz-article__body a { color: var(--pz-accent); }
.pz-article__body strong { color: var(--pz-text-1); }

.pz-article__body code {
  padding: 1px 5px;
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-line-soft);
  border-radius: 3px;
  font-family: var(--pz-font-mono);
  font-size: 0.92em;
  color: var(--pz-text-1);
}

.pz-article__body blockquote {
  margin: 0 0 var(--pz-space-4);
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-bg-alt);
  border-left: 2px solid var(--pz-line-strong);
  color: var(--pz-text-2);
}

.pz-article__related {
  margin-top: var(--pz-space-6);
  padding-top: var(--pz-space-4);
  border-top: 1px solid var(--pz-line);
}

.pz-article__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-3);
  margin-top: var(--pz-space-6);
  padding: var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  font-size: 14px;
  color: var(--pz-text-2);
}

@media (min-width: 768px) {
  .pz-help-search__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pz-help-search__row .pz-btn { grid-column: auto; }

  .pz-article__title { font-size: 40px; }
}

@media (min-width: 1024px) {
  .pz-help-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .pz-article__title { font-size: 46px; }
}

/* ==========================================================================
   Status systemu (Kontakt.html, kolumna boczna) — krok B2
   ========================================================================== */

/* Kropka stanu z makiety: 8 px, pełne koło. Zieleń akcentu dla OK, żółć
   ostrzeżenia dla opóźnień, czerwień WYŁĄCZNIE dla awarii — czerwony punkt
   na stronie pomocy ma znaczyć „nie działa”, a nie „coś wolniej”. */
.pz-status-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-block;
  background: var(--pz-muted);
}

.pz-status-dot--ok   { background: var(--pz-accent); }
.pz-status-dot--warn { background: var(--pz-warn); }
.pz-status-dot--down { background: var(--pz-live); }
.pz-status-dot--none { background: var(--pz-text-4); }

.pz-status-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-status-row {
  display: flex;
  align-items: flex-start;
  gap: var(--pz-space-3);
  padding: var(--pz-space-3) var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line-soft);
}

.pz-status-row:last-child { border-bottom: 0; }
.pz-status-row .pz-status-dot { margin-top: 5px; }

.pz-status-row__name {
  flex-grow: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--pz-text-1);
}

.pz-status-row__note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--pz-text-3);
}

.pz-status-row__state {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--pz-text-3);
}

.pz-status-row__state--ok   { color: var(--pz-text-3); }
.pz-status-row__state--warn { color: var(--pz-warn-text); }
.pz-status-row__state--down { color: var(--pz-live-text); }
.pz-status-row__state--none { color: var(--pz-text-3); }

/* Jedno zdanie na górze strony statusu: odpowiedź na pytanie, z którym
   ktoś tu wchodzi („czy to ja, czy wy”). */
.pz-status-overall {
  display: flex;
  align-items: center;
  gap: var(--pz-space-3);
  margin-block: var(--pz-space-4);
  padding: var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  font-size: 15px;
  color: var(--pz-text-1);
}

.pz-status-overall--warn { border-color: var(--pz-warn-line); background: var(--pz-warn-bg); }
.pz-status-overall--down { border-color: var(--pz-live-line); background: var(--pz-live-bg); }

.pz-status-page { padding-block: var(--pz-space-5); }

.pz-status-grid {
  display: grid;
  gap: var(--pz-space-5);
  margin-block: var(--pz-space-5);
}

.pz-status-grid__side {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-4);
  min-width: 0;
}

.pz-status-events {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
}

.pz-status-event {
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-left-width: 2px;
  border-radius: var(--pz-radius-card);
}

.pz-status-event--warn { border-left-color: var(--pz-warn); }
.pz-status-event--down { border-left-color: var(--pz-live); }

.pz-status-event__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-2);
}

.pz-status-event__component {
  font-size: 13px;
  font-weight: 600;
  color: var(--pz-text-1);
}

.pz-status-event__state {
  font-family: var(--pz-font-mono);
  font-size: 11px;
}

.pz-status-event__note {
  margin: var(--pz-space-2) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pz-text-2);
}

.pz-status-event__meta {
  margin: var(--pz-space-2) 0 0;
  font-size: 11px;
  color: var(--pz-text-3);
}

/* Odnośnik w nagłówku panelu („Historia →” z makiety). */
.pz-panel__link {
  font-size: 11px;
  color: var(--pz-accent);
}

/* Edycja nazwy i sondy: robi się ją raz, a stan wpisuje pod presją —
   więc jest zwinięta. */
.pz-details {
  margin-top: var(--pz-space-4);
  padding-top: var(--pz-space-3);
  border-top: 1px solid var(--pz-line-soft);
}

.pz-details > summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-details > summary:hover { color: var(--pz-text-1); }

@media (min-width: 1024px) {
  .pz-status-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

/* --- Baza wiedzy na dole strony pomocy (krok B3) ------------------------ */

/* Na dole strony liczy się przegląd, a nie czytanie zajawek — stąd same
   tytuły w kolumnach. Na telefonie jedna kolumna, jak wszędzie. */
.pz-kb-columns {
  display: grid;
  gap: var(--pz-space-5);
  margin-bottom: var(--pz-space-6);
}

.pz-kb-columns .pz-kb-group + .pz-kb-group { margin-top: 0; }

/* Dane operatora z kolumny bocznej makiety. */
.pz-operator {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  font-style: normal;
  font-size: 12px;
  line-height: 1.7;
  color: var(--pz-text-2);
}

.pz-operator strong { color: var(--pz-text-1); }

.pz-operator__links {
  margin: var(--pz-space-3) 0 0;
  padding: var(--pz-space-3) 0 0;
  border-top: 1px solid var(--pz-line-soft);
  list-style: none;
  font-size: 12px;
  line-height: 1.9;
}

@media (min-width: 768px) {
  .pz-kb-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pz-kb-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Grafik dyżurów sędziowskich (krok B4) ------------------------------ */

/* Trwająca zmiana w akcencie, bo to jedyny wiersz, na który patrzy się
   w trakcie turnieju. Akcent = „można teraz działać”, a nie ostrzeżenie. */
.pz-row--accent td:first-child { box-shadow: inset 2px 0 0 var(--pz-accent); }

.pz-duty-now {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
}

.pz-duty-now li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pz-space-2) var(--pz-space-3);
  font-size: 14px;
  color: var(--pz-text-2);
}

.pz-duty-now strong { color: var(--pz-text-1); }
.pz-duty-now .pz-status-dot { align-self: center; }

/* Podpowiedź dyżurnego w kolejce zgłoszeń i przy sprawie. */
.pz-duty-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
  margin-bottom: var(--pz-space-4);
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  font-size: 13px;
  color: var(--pz-text-2);
}

.pz-duty-hint strong { color: var(--pz-text-1); }
.pz-duty-hint__label {
  font-family: var(--pz-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

/* --- Dokumenty prawne: wersje, archiwum, akceptacja (docs/prawne) ------ */

/* Komunikaty o zmianie dokumentu pod nagłówkiem. */
.pz-legal-notices { padding-top: var(--pz-space-4); }
.pz-legal-notices .pz-notice:last-child { margin-bottom: 0; }
.pz-legal-notice form { flex-shrink: 0; }

/* Podsumowanie zmian nad treścią wersji i na ekranie akceptacji. */
.pz-legal-summary {
  max-width: 72ch;
  margin: 0 0 var(--pz-space-5);
  padding: var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  font-size: 14px;
  line-height: 1.6;
  color: var(--pz-text-2);
}
.pz-legal-summary p { margin: var(--pz-space-2) 0 0; white-space: pre-line; }

.pz-legal-upcoming { max-width: 72ch; }

/* Archiwum wersji. */
.pz-legal-versions {
  display: grid;
  gap: var(--pz-space-3);
  max-width: 72ch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pz-legal-versions__item {
  padding: var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
}
.pz-legal-versions__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
}
.pz-legal-versions__label {
  font-family: var(--pz-font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--pz-text-1);
}
.pz-legal-versions__date {
  margin: var(--pz-space-2) 0 0;
  font-size: 12px;
  color: var(--pz-text-3);
}
.pz-legal-versions__summary {
  margin: var(--pz-space-2) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pz-text-2);
  white-space: pre-line;
}

/* Ekran akceptacji nowej wersji Regulaminu. */
.pz-legal-accept > p { max-width: 72ch; color: var(--pz-text-2); line-height: 1.6; }
.pz-legal-accept__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-3);
  margin: var(--pz-space-5) 0;
}

/* Formularz „Opublikuj jako nową wersję” w CMS. */
.pz-legal-form {
  display: grid;
  gap: var(--pz-space-3);
  margin-top: var(--pz-space-5);
  padding-top: var(--pz-space-5);
  border-top: 1px solid var(--pz-line);
}

/* Wysyłka e-maili o zmianie dokumentu w CMS (statystyki, kwarantanna). */
.pz-legal-mailing {
  margin-top: var(--pz-space-4);
  padding-top: var(--pz-space-4);
  border-top: 1px solid var(--pz-line-soft);
  font-size: 13px;
  color: var(--pz-text-2);
}
.pz-legal-mailing .pz-table { margin-top: var(--pz-space-3); }

/* „Punkty kontaktowe” (DSA art. 11–12) — tekst w skali kolumny bocznej
   i listy FAQ, nie nagłówków strony. */
.pz-contact-points p {
  margin: 0 0 var(--pz-space-3);
  font-size: 13px;
  line-height: 1.55;
  color: var(--pz-text-2);
}

.pz-contact-points p:last-child { margin-bottom: 0; }

.pz-contact-points__head {
  margin: var(--pz-space-4) 0 var(--pz-space-2);
  font-family: var(--pz-font-body);
  line-height: 1.4;
  text-transform: none;
  font-size: 13px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--pz-text-1);
}

.pz-contact-points__head:first-child { margin-top: 0; }

/* ===== resources/css/layout-friends.css ===== */
/* ==========================================================================
   PlayZeek — znajomi i komunikator (Znajomi.html, Czat.html)

   Mobile-first jak reszta portalu: jedna kolumna od 360 px, rozjazd
   w breakpointach 390 / 768 / 1024 / 1440. Żadnych kolorów spoza tokenów.

   Krok A2 to sam ekran „Znajomi”. Rail przy prawej krawędzi i okienka
   czatu przy dolnej dokłada krok A7 — do tego samego arkusza.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ekran „Znajomi”
   -------------------------------------------------------------------------- */

.pz-friends__section {
  margin-bottom: var(--pz-space-5);
}

.pz-friends__note {
  margin: 0 0 var(--pz-space-4);
  color: var(--pz-text-3);
  font-size: 12px;
  line-height: 1.6;
}

.pz-friends-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 | Wiersz listy. Na telefonie awatar i nick w jednej linii, a przyciski
 | schodzą pod spód i rozciągają się na całą szerokość — kciukiem trafia
 | się w pasek, a nie w kwadracik 24 px.
 */
.pz-friends-list__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pz-space-3);
  align-items: center;
  padding: var(--pz-space-3) 0;
  border-bottom: 1px solid var(--pz-line-faint);
}

.pz-friends-list__row:last-child {
  border-bottom: 0;
}

.pz-friends-list__who {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  align-items: baseline;
  min-width: 0;
}

.pz-friends-list__who a {
  overflow: hidden;
  color: var(--pz-text-1);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-friends-list__who a:hover {
  color: var(--pz-accent);
}

.pz-friends-list__note {
  color: var(--pz-text-3);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Przyciski relacji (komponent friend-button)
   -------------------------------------------------------------------------- */

.pz-friend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  grid-column: 1 / -1;
}

.pz-friend-actions form {
  margin: 0;
  flex: 1 1 auto;
}

.pz-friend-actions .pz-btn {
  width: 100%;
}

.pz-friend-actions__note {
  align-self: center;
  color: var(--pz-text-3);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Rail znajomych przy prawej krawędzi (krok A7, makieta Znajomi.html)

   Zwinięty 56 px (same awatary ze statusem), rozwinięty 272 px. Poniżej
   1024 px znika CAŁKIEM: na telefonie 272 px to trzy czwarte ekranu,
   a pełna lista stoi pod /znajomi i działa bez skryptów.
   -------------------------------------------------------------------------- */

.pz-rail { display: none; }

@media (min-width: 1024px) {
  .pz-rail {
    position: fixed;
    top: 76px;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--pz-bg-alt);
    border-left: 1px solid var(--pz-line);
    overflow: hidden;
    transition: width 120ms ease;
  }

  .pz-rail--mini { width: 56px; }
  .pz-rail--open { width: 272px; }

  /* Strona nie chowa się pod railem — rezerwujemy mu miejsce.
     Zwinięty rail zabiera 56 px zawsze. */
  .pz-page { padding-right: 56px; }

  /* Pasek górny, nagłówek i pasek gier idą na PEŁNĄ szerokość nad railem
     (makieta Znajomi.html, UXM1 pkt 6): tło do krawędzi okna, treść
     w tym samym miejscu co reszta strony. Rail zaczyna się pod nimi —
     `top` ustawia skrypt railu z dolnej krawędzi paska gier. */
  .pz-page > .pz-topbar,
  .pz-page > .pz-header,
  .pz-page > .pz-gamebar {
    margin-right: -56px;
    padding-right: 56px;
  }
}

/*
 | Rozwinięty rail zabiera 272 px, ale miejsce rezerwujemy mu dopiero od
 | 1280 px. Między 1024 a 1280 px odebranie kolumnie treści ćwierci
 | szerokości zrobiłoby z listy turniejów harmonijkę — tam rail wysuwa
 | się NAD stronę, bo i tak rozwija się go na chwilę, żeby kogoś znaleźć.
 */
@media (min-width: 1024px) {
  .pz-rail--open { box-shadow: -12px 0 24px rgba(0, 0, 0, 0.45); }
}

@media (min-width: 1280px) {
  html[data-rail="open"] .pz-page { padding-right: 272px; }
  html[data-rail="open"] .pz-page > .pz-topbar,
  html[data-rail="open"] .pz-page > .pz-header,
  html[data-rail="open"] .pz-page > .pz-gamebar {
    margin-right: -272px;
    padding-right: 272px;
  }
  html[data-rail="open"] .pz-rail--open { box-shadow: none; }
  html[data-rail="open"] .pz-chatdock { right: calc(272px + var(--pz-space-3)); }
}

.pz-rail__toggle {
  flex-shrink: 0;
  height: 32px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pz-line-faint);
  color: var(--pz-text-3);
  cursor: pointer;
}

.pz-rail__toggle:hover { color: var(--pz-text-1); }

/* Zwinięty rail: etykieta i liczba online w 56 px (UXM1 pkt 6). */
.pz-rail__mini-head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--pz-space-2) 2px;
  border-bottom: 1px solid var(--pz-line-faint);
  color: var(--pz-text-3);
  text-decoration: none;
}
.pz-rail__mini-head:hover { color: var(--pz-text-1); }
.pz-rail__mini-label {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}
.pz-rail__mini-count {
  font-size: 12px;
  color: var(--pz-text-1);
}

.pz-rail--open .pz-rail__toggle-icon { display: inline-block; transform: rotate(180deg); }

.pz-rail__head {
  display: flex;
  gap: var(--pz-space-2);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--pz-space-3);
  border-bottom: 1px solid var(--pz-line-faint);
}

.pz-rail__title {
  color: var(--pz-text-1);
  font-family: var(--pz-font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pz-rail__count { color: var(--pz-text-3); font-size: 11px; }

.pz-rail__body { flex-grow: 1; overflow-y: auto; padding: var(--pz-space-2) 0; }

.pz-rail__empty,
.pz-rail__offline {
  margin: 0;
  padding: var(--pz-space-3);
  color: var(--pz-text-4);
  font-size: 11px;
}

.pz-rail__group-label {
  margin: var(--pz-space-3) 0 var(--pz-space-1);
  padding: 0 var(--pz-space-3);
  color: var(--pz-text-4);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pz-rail__friend {
  display: flex;
  gap: var(--pz-space-2);
  align-items: center;
  width: 100%;
  padding: var(--pz-space-2) var(--pz-space-3);
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.pz-rail__friend:hover { background: var(--pz-surface-2); }

.pz-rail__avatar {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--pz-surface-3);
  border-radius: var(--pz-radius-input);
  color: var(--pz-text-2);
  font-size: 11px;
  font-weight: 700;
}

.pz-rail__avatar img { width: 32px; height: 32px; border-radius: var(--pz-radius-input); }

/* Kropka statusu. Kolor gry jest zarezerwowany dla gier, akcent dla
   „można działać”, więc obecność dostaje neutralną zieleń tekstu. */
/* Licznik nieprzeczytanych od znajomego (UXM1 pkt 17). Czerwien tylko dla
   live/bledow — tu akcent „mozna teraz dzialac”. */
.pz-rail__unread {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--pz-accent);
  color: var(--pz-bg);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.pz-rail__dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--pz-bg-alt);
  border-radius: 50%;
  background: var(--pz-muted);
}

.pz-rail__dot--available { background: var(--pz-ok-text); }
.pz-rail__dot--in_game   { background: var(--pz-warn); }
.pz-rail__dot--away      { background: var(--pz-text-4); }

.pz-rail__who { min-width: 0; }

.pz-rail__nick {
  display: block;
  overflow: hidden;
  color: var(--pz-text-1);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-rail__note {
  display: block;
  overflow: hidden;
  color: var(--pz-text-4);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Telefon i tablet: przycisk nad nawigacją dolną i arkusz na cały ekran

   Poniżej 1024 px raila nie ma. Zamiast niego jeden przycisk z licznikiem
   i arkusz — ta sama lista, tylko na całą szerokość, żeby dało się w nią
   trafić kciukiem.
   -------------------------------------------------------------------------- */

.pz-rail-fab-wrap {
  position: fixed;
  right: var(--pz-space-3);
  bottom: calc(var(--pz-bottomnav-height) + env(safe-area-inset-bottom) + var(--pz-space-2));
  z-index: 44;
}
.pz-rail-fab-wrap.is-tucked { right: 0; }

/* Zapas pod treścią, żeby ostatnia karta dała się wyciągnąć spod dymka
   (UXM1 pkt 23). Schowany dymek zapasu nie potrzebuje. */
@media (max-width: 1023px) {
  body:has(.pz-rail-fab-wrap:not(.is-tucked)) .pz-main {
    padding-bottom: calc(var(--pz-bottomnav-height) + var(--pz-tap-target) + var(--pz-space-5));
  }
}

.pz-rail-fab__hide {
  position: absolute;
  top: -10px;
  left: -10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--pz-surface-3);
  border: 1px solid var(--pz-line-strong);
  border-radius: 50%;
  color: var(--pz-text-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
/* Mały krzyżyk, ale cel dotyku 44 px. */
.pz-rail-fab__hide::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.pz-rail-tab {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: var(--pz-tap-target);
  padding: 0;
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-line-strong);
  border-right: 0;
  border-radius: var(--pz-radius-input) 0 0 var(--pz-radius-input);
  color: var(--pz-text-2);
  cursor: pointer;
  font-size: 16px;
}
/* Cel dotyku szerszy niż widoczna zakładka. */
.pz-rail-tab::after {
  content: "";
  position: absolute;
  inset: 0 0 0 -14px;
}
.pz-rail-tab__dot {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
  background: var(--pz-ok-text);
  border-radius: 50%;
}

.pz-rail-fab {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--pz-tap-target);
  height: var(--pz-tap-target);
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-line-strong);
  border-radius: 50%;
  color: var(--pz-text-2);
  cursor: pointer;
  font-size: 18px;
}

.pz-rail-fab__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  padding: 1px 4px;
  background: var(--pz-accent);
  border-radius: 9px;
  color: var(--pz-bg);
  font-size: 10px;
  font-weight: 700;
}

.pz-rail-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--pz-bg);
}

.pz-rail-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line);
}

.pz-rail-sheet__body { flex-grow: 1; overflow-y: auto; padding-bottom: var(--pz-space-5); }

@media (min-width: 1024px) {
  .pz-rail-fab-wrap,
  .pz-rail-sheet { display: none !important; }
}

/* --------------------------------------------------------------------------
   Okienka czatu przy dolnej krawędzi (krok A7)
   -------------------------------------------------------------------------- */

.pz-chatdock {
  position: fixed;
  right: var(--pz-space-3);
  bottom: 0;
  z-index: 45;
  display: flex;
  gap: var(--pz-space-3);
  align-items: flex-end;
}

@media (min-width: 1024px) {
  .pz-chatdock { right: calc(56px + var(--pz-space-3)); }
}

.pz-chatbox {
  display: flex;
  flex-direction: column;
  width: 280px;
  max-height: 60vh;
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-bottom: 0;
  border-radius: var(--pz-radius-card) var(--pz-radius-card) 0 0;
}

/* Na telefonie jedno okienko na całą szerokość — dwa obok siebie przy
   360 px to dwa nieczytelne paski. */
@media (max-width: 767px) {
  .pz-chatdock { left: 0; right: 0; bottom: 56px; }
  .pz-chatbox { width: 100%; }
  .pz-chatbox:not(:last-child) { display: none; }
}

.pz-chatbox__head {
  display: flex;
  gap: var(--pz-space-2);
  align-items: center;
  padding: var(--pz-space-2) var(--pz-space-3);
  background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-line-faint);
  border-radius: var(--pz-radius-card) var(--pz-radius-card) 0 0;
}

.pz-chatbox__title {
  flex-grow: 1;
  overflow: hidden;
  background: transparent;
  border: 0;
  color: var(--pz-text-1);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-chatbox__open,
.pz-chatbox__close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--pz-text-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.pz-chatbox__open:hover,
.pz-chatbox__close:hover { color: var(--pz-text-1); }

.pz-chatbox__body {
  flex-grow: 1;
  overflow-y: auto;
  padding: var(--pz-space-3);
}

.pz-chatbox__msg {
  margin: 0 0 var(--pz-space-2);
  color: var(--pz-text-2);
  font-size: 13px;
  line-height: 1.5;
}

.pz-chatbox__msg--mine { color: var(--pz-text-1); }

.pz-chatbox__link { margin-left: var(--pz-space-1); color: var(--pz-text-1); text-decoration: underline; }

/* „Przeczytane” (sesja E) — informacja, bez akcentu. */
.pz-chatbox__read {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--pz-text-4);
  text-align: right;
}

.pz-chatbox__author {
  margin-right: var(--pz-space-1);
  color: var(--pz-text-4);
  font-size: 11px;
  font-weight: 600;
}

.pz-chatbox__form {
  display: flex;
  gap: var(--pz-space-2);
  padding: var(--pz-space-2);
  border-top: 1px solid var(--pz-line-faint);
}

.pz-chatbox__form input {
  flex-grow: 1;
  min-width: 0;
  min-height: 32px;
  padding: 0 var(--pz-space-2);
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
  color: var(--pz-text-1);
  font-family: inherit;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Lista rozmów (krok A5)
   -------------------------------------------------------------------------- */

.pz-inbox {
  padding-top: var(--pz-space-5);
  padding-bottom: var(--pz-space-6);
}

/* Zakładki są linkami i na telefonie przewijają się w poziomie — w swoim
   kontenerze, nie razem ze stroną. */
.pz-inbox__tabs {
  display: flex;
  gap: var(--pz-space-1);
  margin-bottom: var(--pz-space-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--pz-line);
  scrollbar-width: none;
}

.pz-inbox__tabs::-webkit-scrollbar { display: none; }

.pz-inbox__tab {
  flex-shrink: 0;
  padding: var(--pz-space-3) var(--pz-space-4);
  border-bottom: 2px solid transparent;
  color: var(--pz-text-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pz-inbox__tab:hover { color: var(--pz-text-1); }

.pz-inbox__tab--on {
  border-bottom-color: var(--pz-accent);
  color: var(--pz-text-1);
}

.pz-inbox__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-inbox__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--pz-space-3);
  align-items: center;
  padding: var(--pz-space-3);
  border-bottom: 1px solid var(--pz-line-faint);
  color: inherit;
}

.pz-inbox__row:hover { background: var(--pz-surface-2); }

/* Nieprzeczytana rozmowa różni się GRUBOŚCIĄ i jasnością, nie kolorem:
   akcent limonkowy zostaje na liczniku, czyli na tym, co da się kliknąć. */
.pz-inbox__row--unread .pz-inbox__title { color: var(--pz-text-1); }
.pz-inbox__row--unread .pz-inbox__preview { color: var(--pz-text-2); }

.pz-inbox__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pz-inbox__title {
  overflow: hidden;
  color: var(--pz-text-1);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-inbox__muted {
  margin-left: var(--pz-space-2);
  color: var(--pz-text-4);
  font-size: 11px;
  font-weight: 400;
}

.pz-inbox__preview {
  overflow: hidden;
  color: var(--pz-text-3);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-inbox__meta {
  display: flex;
  gap: var(--pz-space-2);
  align-items: center;
  justify-self: end;
}

.pz-inbox__time {
  color: var(--pz-text-4);
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Wątek rozmowy (krok A3)

   Klasy wiadomości (.pz-msg, .pz-room__messages, .pz-composer) są wspólne
   z pokojem meczowym i leżą w layout-matches.css — tutaj jest wyłącznie
   ramka ekranu komunikatora.
   -------------------------------------------------------------------------- */

.pz-thread {
  padding-top: var(--pz-space-5);
  padding-bottom: var(--pz-space-6);
}

.pz-thread__panel {
  display: flex;
  flex-direction: column;
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
}

.pz-thread__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line);
}

.pz-thread__who {
  display: flex;
  gap: var(--pz-space-3);
  align-items: center;
  min-width: 0;
}

.pz-thread__title {
  margin: 0;
  font-family: var(--pz-font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pz-thread__sub {
  margin: 2px 0 0;
  color: var(--pz-text-3);
  font-size: 12px;
}

.pz-thread__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
}

.pz-thread__actions form {
  margin: 0;
}

.pz-thread__closed {
  margin: 0;
  padding: var(--pz-space-4);
  border-top: 1px solid var(--pz-line);
  color: var(--pz-text-3);
  font-size: 13px;
}

/* „Odpowiadasz na ogłoszenie” nad kompozytorem (sesja E). */
.pz-thread__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin: 0;
  padding: var(--pz-space-2) var(--pz-space-4);
  border-top: 1px solid var(--pz-line);
  color: var(--pz-text-3);
  font-size: 12px;
}

/* Kompozytor komunikatora jest jednym wierszem: pole i „Wyślij”. Pokój
   meczowy ma nad nim dodatkowy pasek akcji, dlatego tam `.pz-composer`
   zostaje blokiem. */
.pz-thread__panel .pz-composer {
  display: flex;
  gap: var(--pz-space-2);
  align-items: flex-end;
}

.pz-composer__input {
  flex-grow: 1;
  min-width: 0;
  min-height: var(--pz-tap-target);
  padding: var(--pz-space-2) var(--pz-space-3);
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
  color: var(--pz-text-1);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

.pz-composer__input:focus {
  border-color: var(--pz-line-active);
  outline: none;
}

@media (min-width: 768px) {
  .pz-friends-list__row {
    grid-template-columns: auto 1fr auto;
  }

  /* Od tabletu przyciski wracają do wiersza i mają szerokość treści. */
  .pz-friend-actions {
    grid-column: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .pz-friend-actions form {
    flex: 0 0 auto;
  }

  .pz-friend-actions .pz-btn {
    width: auto;
  }
}

/* ===== resources/css/layout-brackets.css ===== */
/* ==========================================================================
   Własne drabinki (rozdz. 3.13): kreator, kafelek na /spolecznosc, ekran /d/.
   Makiety: BracketNowa.html, Bracket.html. Mobile-first.
   ========================================================================== */

/* --- Wspólne drobiazgi --------------------------------------------------- */

.pz-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
}

.pz-break { overflow-wrap: anywhere; word-break: break-word; }

.pz-panel-box {
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
  overflow: hidden;
}

.pz-panel-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  min-height: 42px;
  padding: 0 var(--pz-space-4);
  background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-line);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-panel-box__head .pz-num {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pz-text-2);
}

.pz-panel-box__body {
  padding: var(--pz-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  font-size: 12px;
}

/* --- Kreator --------------------------------------------------------------- */

.pz-bracket-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-5);
}

.pz-bracket-create__main,
.pz-bracket-create__aside {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-5);
  min-width: 0;
}

.pz-bracket-create__aside { gap: var(--pz-space-4); }

.pz-bracket-create__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
}

.pz-bracket-create__count {
  align-self: flex-end;
  margin-top: calc(-1 * var(--pz-space-5));
  font-size: 12px;
  color: var(--pz-accent);
}

.pz-bracket-create__url {
  margin: 0;
  padding: 10px 12px;
  background: var(--pz-bg-deep);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-input);
  font-size: 12px;
  color: var(--pz-text-2);
  overflow-wrap: anywhere;
}

.pz-bracket-create__note {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--pz-text-4);
  text-align: center;
}

.pz-bracket-create__note a { color: var(--pz-accent); }

@media (min-width: 768px) {
  .pz-bracket-create__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  .pz-bracket-create { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .pz-bracket-create__aside { position: sticky; top: calc(var(--pz-header-height) + var(--pz-space-4)); }
}

/* Karty formatu: radio w środku etykiety, cała karta klikalna. */
.pz-format-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-3);
}

@media (min-width: 390px) {
  .pz-format-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pz-format-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--pz-space-4) var(--pz-space-3);
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
  cursor: pointer;
  min-height: var(--pz-tap-target);
}

.pz-format-card:hover { border-color: var(--pz-line-hover); }

.pz-format-card:has(input:checked) {
  border-color: var(--pz-accent);
  background: var(--pz-bg-alt);
}

.pz-format-card:has(input:focus-visible) { outline: 2px solid var(--pz-accent); outline-offset: 2px; }

.pz-format-card__head { display: flex; align-items: center; gap: 9px; }

.pz-format-card__head input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--pz-accent);
  flex-shrink: 0;
}

.pz-format-card__name { font-size: 13px; font-weight: 600; color: var(--pz-text-1); }

.pz-format-card__icon {
  width: 100%;
  height: 42px;
  stroke: var(--pz-text-4);
  stroke-width: 1.6;
}

.pz-format-card:has(input:checked) .pz-format-card__icon { stroke: var(--pz-accent); }

.pz-format-card__hint { font-size: 11px; line-height: 1.5; color: var(--pz-text-3); }

/* Rozstawienie: radia wyglądające jak przełącznik segmentowy. */
.pz-segmented--radio .pz-segmented__item { cursor: pointer; gap: 6px; }

.pz-segmented--radio input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.pz-segmented--radio .pz-segmented__item:has(input:checked) {
  background: var(--pz-surface-3);
  border-color: var(--pz-line-active);
  color: var(--pz-text-1);
  font-weight: 600;
}

.pz-segmented--radio .pz-segmented__item:has(input:focus-visible) {
  outline: 2px solid var(--pz-accent);
  outline-offset: 2px;
}

/* Opcje: wiersze z opisem i przełącznikiem. */
.pz-option-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  overflow: hidden;
  background: var(--pz-line);
}

.pz-option-list__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pz-space-3) var(--pz-space-4);
  padding: 14px var(--pz-space-4);
  background: var(--pz-surface);
}

.pz-option-list__row > div:first-child { flex: 1 1 200px; min-width: 0; }

.pz-option-list__title { display: block; font-size: 13px; color: var(--pz-text-1); margin-bottom: 3px; }

.pz-option-list__hint { font-size: 11px; color: var(--pz-text-3); }

.pz-option-list__select { width: auto; min-width: 160px; }

/* Podgląd pierwszej rundy. */
.pz-preview-pairs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pz-preview-pairs__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--pz-line-strong);
  background: var(--pz-bg-deep);
  border-radius: var(--pz-radius-input);
  font-size: 11px;
  color: var(--pz-text-2);
}

.pz-preview-pairs__item > span {
  padding: 5px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-preview-pairs__vs { border-left: 1px solid var(--pz-line); color: var(--pz-text-3); }

/* --- Kafelek na /spolecznosc ------------------------------------------------ */

.pz-cb-tile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-3) var(--pz-space-4);
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
  color: var(--pz-text-1);
  text-decoration: none;
}

.pz-cb-tile:hover { border-color: var(--pz-line-hover); }

.pz-cb-tile__icon {
  width: 72px;
  height: 26px;
  flex-shrink: 0;
  stroke: var(--pz-text-3);
  stroke-width: 1.8;
}

.pz-cb-tile__body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; min-width: 0; }

.pz-cb-tile__title { font-weight: 700; font-size: 14px; }

.pz-cb-tile__text { font-size: 12px; color: var(--pz-text-3); }

.pz-cb-tile__cta { font-size: 12px; font-weight: 600; color: var(--pz-text-2); white-space: nowrap; }

/* --- Drabinka /d/{kod} ------------------------------------------------------ */

.pz-cb-section { display: flex; flex-direction: column; gap: var(--pz-space-2); }

/* Kolumny tej samej wysokości — dzięki temu węzeł rundy wyżej wypada
   dokładnie między swoimi dwoma poprzednikami, a łączniki się schodzą. */
.pz-cb { align-items: stretch; gap: 0; }

.pz-cb__round { min-width: 208px; gap: var(--pz-space-2); }

.pz-cb__round + .pz-cb__round { margin-left: 28px; }

.pz-cb__matches {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pz-cb__slot {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 0;
}

/* Łączniki. Każdy węzeł ma kreskę w prawo do połowy odstępu; przy „parach”
   nieparzysty rysuje pionową kreskę w dół do połowy swojego miejsca,
   parzysty — w górę. Obie schodzą się na wysokości węzła rundy wyżej. */
.pz-cb__round--pairs .pz-cb__slot::after,
.pz-cb__round--straight .pz-cb__slot::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 14px;
  border-top: 1px solid var(--pz-line-strong);
}

.pz-cb__round--pairs .pz-cb__slot:nth-child(odd)::before,
.pz-cb__round--pairs .pz-cb__slot:nth-child(even)::before {
  content: "";
  position: absolute;
  right: -14px;
  width: 14px;
  border-right: 1px solid var(--pz-line-strong);
}

.pz-cb__round--pairs .pz-cb__slot:nth-child(odd)::before { top: 50%; bottom: 0; }
.pz-cb__round--pairs .pz-cb__slot:nth-child(even)::before { top: 0; bottom: 50%; }

/* Kreska wchodząca do węzła z lewej — od zbiegu łączników. */
.pz-cb__round--pairs + .pz-cb__round .pz-cb__slot::before,
.pz-cb__round--straight + .pz-cb__round .pz-cb__slot::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 14px;
  border-top: 1px solid var(--pz-line-strong);
}

/* Następna runda sama też bywa „parami” — jej ::before służy wtedy dwóm
   celom. Kreskę wejściową przenosimy na węzeł, żeby nie gryzła się z pionem. */
.pz-cb__round--pairs + .pz-cb__round--pairs .pz-cb__slot::before,
.pz-cb__round--straight + .pz-cb__round--pairs .pz-cb__slot::before {
  left: auto;
}

.pz-cb__round--pairs + .pz-cb__round--pairs .pz-cb__slot > :first-child,
.pz-cb__round--straight + .pz-cb__round--pairs .pz-cb__slot > :first-child,
.pz-cb__round--pairs + .pz-cb__round--straight .pz-cb__slot > :first-child,
.pz-cb__round--straight + .pz-cb__round--straight .pz-cb__slot > :first-child {
  position: relative;
}

.pz-cb__round--pairs + .pz-cb__round--pairs .pz-cb__slot > :first-child::before,
.pz-cb__round--straight + .pz-cb__round--pairs .pz-cb__slot > :first-child::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 14px;
  border-top: 1px solid var(--pz-line-strong);
}

.pz-cb__bye { padding: 10px; }

/* Terminarz „każdy z każdym”. */
.pz-cb-fixtures { list-style: none; margin: 0; padding: 0; }

.pz-cb-fixtures__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--pz-space-2);
  padding: 10px var(--pz-space-4);
  border-top: 1px solid var(--pz-line);
  font-size: 13px;
}

.pz-cb-fixtures__item:first-child { border-top: 0; }

.pz-cb-fixtures__label { font-size: 11px; color: var(--pz-text-4); }

.pz-cb-fixtures__name {
  color: var(--pz-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pz-cb-fixtures__name:last-child { text-align: right; }

.pz-cb-fixtures__name.is-winner { color: var(--pz-text-1); font-weight: 700; }

.pz-cb-fixtures__score { text-align: center; color: var(--pz-text-2); }

/* Ekran po utworzeniu: oba adresy jeden pod drugim. */
.pz-cb-created { display: flex; flex-direction: column; gap: var(--pz-space-2); min-width: 0; }
.pz-cb-created p { margin: 0; }

/* --- Ekran /d/{kod}: nagłówek, panel boczny, układ ------------------------- */

.pz-cb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin: calc(-1 * var(--pz-space-3)) 0 0;
}

.pz-cb-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  font-size: 11px;
  font-weight: 600;
  color: var(--pz-text-2);
}

.pz-cb-status--finished { color: var(--pz-text-1); border-color: var(--pz-line-active); }

.pz-cb-mode { flex-wrap: nowrap; }
.pz-cb-mode .pz-segmented__item { text-decoration: none; min-height: var(--pz-tap-target); }

.pz-cb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-5);
}

/* Na telefonie najpierw drabinka, potem panel — po to się tu przychodzi. */
.pz-cb-side { order: 2; display: flex; flex-direction: column; gap: var(--pz-space-4); min-width: 0; }
.pz-cb-main { order: 1; display: flex; flex-direction: column; gap: var(--pz-space-4); min-width: 0; }

@media (min-width: 1024px) {
  .pz-cb-layout { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .pz-cb-side { order: 0; }
  .pz-cb-main { order: 0; }
}

.pz-cb-entrants { list-style: none; margin: 0; padding: var(--pz-space-2) 0; }

.pz-cb-entrants__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--pz-space-4);
  font-size: 13px;
  color: var(--pz-text-1);
}

.pz-cb-entrants__seed { width: 22px; flex-shrink: 0; font-size: 11px; color: var(--pz-text-4); text-align: right; }

.pz-cb-entrants__name { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pz-cb-entrants__item.is-out .pz-cb-entrants__name { color: var(--pz-text-4); text-decoration: line-through; }

.pz-cb-entrants__out { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pz-text-4); }

.pz-cb-progress { margin: 0; font-size: 20px; color: var(--pz-text-1); }

.pz-cb-progress__bar { height: 4px; background: var(--pz-surface-3); border-radius: 2px; overflow: hidden; }
.pz-cb-progress__bar span { display: block; height: 100%; background: var(--pz-text-2); }

.pz-cb-progress__note { margin: 0; font-size: 12px; color: var(--pz-text-3); }

.pz-cb-link { display: flex; gap: var(--pz-space-2); }
.pz-cb-link__url { flex-grow: 1; min-width: 0; font-size: 12px; }

.pz-cb-facts p { margin: 0; color: var(--pz-text-3); }

.pz-cb-footnote { margin: 0; font-size: 12px; line-height: 1.6; color: var(--pz-text-3); }

/* Puste miejsce w węźle: „zwycięzca M4” szarym, nie jak nazwa gracza. */
.pz-cb__node.is-waiting .pz-node__side:not(.pz-node__side--winner) .pz-node__team { font-style: italic; }

.pz-cb-champion {
  padding: 16px 12px;
  border: 1px dashed var(--pz-line-strong);
  border-radius: var(--pz-radius-input);
  text-align: center;
  font-size: 12px;
  color: var(--pz-text-4);
  overflow-wrap: anywhere;
}

.pz-cb-champion.is-known {
  border-style: solid;
  border-color: var(--pz-gold);
  color: var(--pz-text-1);
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
}

/* --- Tryb edycji: wynik przy węźle, akcje, uczestnicy ---------------------- */

.pz-cb-result { margin-top: 6px; }

.pz-cb-result__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px dashed var(--pz-accent);
  border-radius: var(--pz-radius-input);
  font-size: 11px;
  font-weight: 600;
  color: var(--pz-accent);
  cursor: pointer;
  list-style: none;
}

.pz-cb-result__toggle::-webkit-details-marker { display: none; }

.pz-cb-result[open] > .pz-cb-result__toggle { border-style: solid; }

.pz-cb-result__form {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  margin-top: var(--pz-space-2);
  padding: var(--pz-space-3);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-input);
  background: var(--pz-bg-alt);
}

.pz-cb-result__winners { display: flex; flex-direction: column; gap: 6px; }

.pz-cb-result__winners .pz-btn { justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pz-cb-result__sets { display: flex; align-items: flex-end; gap: var(--pz-space-2); }

.pz-cb-result__side { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }

.pz-cb-result__side .pz-input { width: 100%; }

.pz-cb-result__name { font-size: 11px; color: var(--pz-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pz-cb-result__colon { padding-bottom: 10px; color: var(--pz-text-3); }

.pz-cb-result__warn { margin: 0; font-size: 11px; line-height: 1.5; color: var(--pz-warn-text); }

.pz-cb-actions form { margin: 0; }

.pz-cb-edit-entrants {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  padding: var(--pz-space-3) var(--pz-space-4) var(--pz-space-4);
  border-top: 1px solid var(--pz-line);
}

.pz-cb-edit-entrants__row { display: flex; gap: 6px; }

.pz-cb-edit-entrants__row .pz-input { min-width: 0; flex-grow: 1; }

.pz-cb-edit-entrants__seed { flex: 0 0 64px !important; }

.pz-cb-edit-entrants__add { display: flex; gap: 6px; }

.pz-cb-edit-entrants__add .pz-input { flex-grow: 1; min-width: 0; }

.pz-cb-fixtures__edit { grid-column: 1 / -1; }

/* --- Eksport i osadzenie (D6) ---------------------------------------------- */

.pz-cb-meta__tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--pz-space-2); margin-left: auto; }

.pz-cb-embed { width: 100%; font-size: 11px; resize: vertical; }

/* --- Konto: wygasanie, przypięcie, „Moje drabinki” (D7) -------------------- */

.pz-cb-expiry {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  padding-bottom: var(--pz-space-3);
  border-bottom: 1px solid var(--pz-line);
}

.pz-cb-expiry p { margin: 0; }

.pz-cb-expiry__date { font-family: var(--pz-font-mono); font-size: 13px; color: var(--pz-warn-text); }

.pz-cb-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pz-line); border-radius: var(--pz-radius-card); }

.pz-cb-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-2) var(--pz-space-4);
  padding: var(--pz-space-3) var(--pz-space-4);
  border-top: 1px solid var(--pz-line);
}

.pz-cb-list__item:first-child { border-top: 0; }

.pz-cb-list__link { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 240px; color: var(--pz-text-1); text-decoration: none; }

.pz-cb-list__name { font-weight: 700; overflow-wrap: anywhere; }

.pz-cb-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--pz-text-3); }

.pz-cb-list__date { font-size: 12px; color: var(--pz-text-4); }

/* ===== resources/css/layout-news.css ===== */
/* ==========================================================================
   Aktualności (rozdz. 3.14, makiety News.html, Artykul.html, AdminNews.html)
   — etap 6A. Mobile-first: 360 px → 768 → 1024 → 1440.

   Kolor = gra: kafel artykułu dostaje `--pz-game-color` z gry artykułu
   (twarda reguła nr 12). Akcent limonkowy tylko tam, gdzie „można teraz
   działać” — tutaj nigdzie; spełnione punkty listy SEO są w kolorze „ok”.
   ========================================================================== */

/* --- Lista ---------------------------------------------------------------- */

.pz-news { padding-block: var(--pz-space-5); }

.pz-news__head { margin: var(--pz-space-4) 0 var(--pz-space-5); }

.pz-news__title,
.pz-news-article__title {
  margin: 0 0 var(--pz-space-3);
  font-family: var(--pz-font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-news-tabs {
  display: flex;
  gap: var(--pz-space-2);
  overflow-x: auto;
  padding-bottom: var(--pz-space-2);
  margin-bottom: var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line);
  scrollbar-width: thin;
}

.pz-news-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-height: var(--pz-tap-target);
  padding: 0 var(--pz-space-3);
  border-radius: var(--pz-radius-input);
  color: var(--pz-text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.pz-news-tab .pz-num { color: var(--pz-text-3); font-size: 11px; }
.pz-news-tab:hover { color: var(--pz-text-1); }
.pz-news-tab.is-active { background: var(--pz-surface-2); color: var(--pz-text-1); }

.pz-news-games,
.pz-news-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-5);
}

.pz-news-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-left: 3px solid var(--pz-game-color, var(--pz-line-strong));
  border-radius: var(--pz-radius-badge);
  color: var(--pz-text-2);
  font-size: 12px;
  text-decoration: none;
}

.pz-news-chip:hover { border-color: var(--pz-line-hover); color: var(--pz-text-1); }
.pz-news-chip.is-active { background: var(--pz-surface-2); color: var(--pz-text-1); }

.pz-news-filter { margin: 0 0 var(--pz-space-4); color: var(--pz-text-2); font-size: 13px; }

.pz-news__layout,
.pz-news-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-6);
  align-items: start;
}

.pz-news__side {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-4);
  min-width: 0;
}

.pz-news-list,
.pz-news-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-news__shown { margin: var(--pz-space-5) 0 var(--pz-space-3); color: var(--pz-text-3); font-size: 12px; }

/* --- Kafel artykułu -------------------------------------------------------- */

.pz-news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--pz-line);
  border-top: 3px solid var(--pz-game-color, var(--pz-line-strong));
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  overflow: hidden;
}

.pz-news-card__art {
  display: block;
  aspect-ratio: 2240 / 880;
  background: var(--pz-surface-3);
}

.pz-news-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pz-news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  flex: 1;
  padding: var(--pz-space-4);
}

.pz-news-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin: 0;
  color: var(--pz-text-3);
  font-size: 11px;
}

.pz-news-card__category {
  color: var(--pz-text-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pz-news-card__title {
  margin: 0;
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pz-news-card__title a { color: var(--pz-text-1); text-decoration: none; }
.pz-news-card__title a:hover { text-decoration: underline; }

.pz-news-card__lead { margin: 0; color: var(--pz-text-2); font-size: 14px; line-height: 1.55; }

.pz-news-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-3);
  margin: auto 0 0;
  padding-top: var(--pz-space-2);
  color: var(--pz-text-3);
  font-size: 11px;
}

.pz-news-card--lead .pz-news-card__title { font-size: 24px; }

.pz-news-popular {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  margin: 0;
  padding-left: var(--pz-space-5);
  font-size: 13px;
}

.pz-news-popular a { color: var(--pz-text-1); }
.pz-news-popular .pz-num { display: block; font-size: 11px; }

/* --- Artykuł -------------------------------------------------------------- */

.pz-news-article__head { margin: var(--pz-space-4) 0 var(--pz-space-5); max-width: 860px; }

.pz-news-article__lead {
  margin: 0 0 var(--pz-space-4);
  color: var(--pz-text-2);
  font-size: 17px;
  line-height: 1.6;
}

.pz-news-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-4);
  color: var(--pz-text-3);
  font-size: 12px;
}

.pz-news-article__author { color: var(--pz-text-1); font-weight: 700; }

.pz-news-share a { color: var(--pz-text-1); font-weight: 700; }

.pz-news-hero { margin: 0 0 var(--pz-space-6); }

.pz-news-hero img,
.pz-news-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface-3);
}

.pz-news-hero figcaption,
.pz-news-figure figcaption {
  margin-top: var(--pz-space-2);
  color: var(--pz-text-3);
  font-size: 12px;
}

.pz-news-body { max-width: 72ch; }

.pz-news-figure { margin: 0 0 var(--pz-space-5); }

.pz-news-quote { margin: 0 0 var(--pz-space-5); }
.pz-news-quote blockquote { margin: 0; font-size: 17px; color: var(--pz-text-1); }
.pz-news-quote figcaption { margin-top: var(--pz-space-2); color: var(--pz-text-3); font-size: 12px; }

/* Bloki rekordowe — ramka w kolorze gry turnieju. */
.pz-news-record {
  margin: 0 0 var(--pz-space-5);
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-left: 3px solid var(--pz-game-color, var(--pz-line-strong));
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  font-size: 13px;
}

.pz-news-record--gone { color: var(--pz-text-3); font-style: italic; }

.pz-news-record__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-3);
  color: var(--pz-text-3);
  font-size: 12px;
}

.pz-news-record__head a { margin-left: auto; color: var(--pz-text-1); }
.pz-news-record__link { color: var(--pz-text-1); font-weight: 700; }

.pz-news-match__score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--pz-space-3);
}

.pz-news-match__team { color: var(--pz-text-1); font-weight: 700; overflow-wrap: anywhere; }
.pz-news-match__team--away { text-align: right; }

.pz-news-match__result {
  font-size: 22px;
  font-weight: 700;
  color: var(--pz-text-1);
  text-align: center;
  white-space: nowrap;
}

.pz-news-match__result small { display: block; font-size: 10px; color: var(--pz-text-3); }

.pz-news-match__maps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2) var(--pz-space-4);
  margin: var(--pz-space-3) 0 0;
  padding: var(--pz-space-3) 0 0;
  border-top: 1px solid var(--pz-line-soft);
  list-style: none;
  color: var(--pz-text-2);
  font-size: 12px;
}

.pz-news-match__maps li { display: flex; gap: var(--pz-space-2); }

.pz-news-tournament__name { margin: 0 0 var(--pz-space-3); font-weight: 800; font-size: 15px; }
.pz-news-tournament__name a { color: var(--pz-text-1); }

.pz-news-tournament__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pz-space-3);
  margin: 0 0 var(--pz-space-3);
}

.pz-news-tournament__facts dt { color: var(--pz-text-3); font-size: 11px; }
.pz-news-tournament__facts dd { margin: 0; color: var(--pz-text-1); }

.pz-news-clip a { color: var(--pz-text-1); font-weight: 700; }

/* Treść artykułu dziedziczy style bazy wiedzy (`.pz-article__body`), gdzie
   odnośnik w tekście ma akcent. Bloki rekordowe i tagi to nawigacja, nie
   „można teraz działać” — zostają w kolorze tekstu (twarda reguła nr 12). */
.pz-news-body .pz-news-record a,
.pz-news-body .pz-news-chip { color: var(--pz-text-1); }
.pz-news-body .pz-news-chip { color: var(--pz-text-2); }

.pz-news-body .pz-news-match__maps { padding-left: 0; }
.pz-news-body .pz-news-match__maps li { margin: 0; }

/* --- CMS ------------------------------------------------------------------ */

.pz-news-byline { display: block; font-size: 11px; }

.pz-news-state {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-badge);
  color: var(--pz-text-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pz-news-state--review { border-color: var(--pz-warn); color: var(--pz-warn-text); }
.pz-news-state--scheduled { border-color: var(--pz-line-strong); color: var(--pz-text-1); }
.pz-news-state--published { border-color: var(--pz-ok-text); color: var(--pz-ok-text); }

.pz-news-category { border-bottom: 1px solid var(--pz-line-soft); padding: var(--pz-space-2) 0; }
.pz-news-category summary {
  display: flex;
  justify-content: space-between;
  gap: var(--pz-space-2);
  min-height: var(--pz-tap-target);
  align-items: center;
  cursor: pointer;
}

.pz-news-category-list {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-news-category-list li { display: flex; justify-content: space-between; }

.pz-news-editor__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-4);
}

.pz-news-editor__status { color: var(--pz-text-3); font-size: 11px; }
.pz-news-editor__stats { margin-left: auto; color: var(--pz-text-3); font-size: 11px; }

.pz-news-editor__title { font-size: 18px; font-weight: 700; }

.pz-news-ok { color: var(--pz-ok-text); }
.pz-news-warn { color: var(--pz-warn-text); }

.pz-news-blocks { display: flex; flex-direction: column; gap: var(--pz-space-3); margin-top: var(--pz-space-4); }

.pz-news-blocks__empty {
  padding: var(--pz-space-4);
  border: 1px dashed var(--pz-line);
  border-radius: var(--pz-radius-card);
  color: var(--pz-text-3);
}

.pz-news-block {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  padding: var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-bg-alt);
}

.pz-news-block--match,
.pz-news-block--tournament,
.pz-news-block--clip { border-style: dashed; }

.pz-news-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pz-space-2); }

.pz-news-block__type {
  color: var(--pz-text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pz-news-block__tools { display: flex; gap: var(--pz-space-1); }
.pz-news-block__row { display: flex; gap: var(--pz-space-2); }
.pz-news-block__level { width: auto; flex: none; }

.pz-news-block__preview {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--pz-space-2);
  border-radius: var(--pz-radius-input);
}

.pz-news-blocks__add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  padding-top: var(--pz-space-3);
  border-top: 1px solid var(--pz-line-soft);
}

.pz-news-blocks__add .pz-field__label { width: 100%; }

.pz-news-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-1);
  margin: var(--pz-space-3) 0 0;
  padding: 0;
  list-style: none;
  color: var(--pz-text-3);
  font-size: 12px;
}

.pz-news-checklist li::before { content: "○ "; }
.pz-news-checklist li.is-ok { color: var(--pz-text-1); }
.pz-news-checklist li.is-ok::before { content: "● "; color: var(--pz-ok-text); }

.pz-news-history {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.pz-news-history li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2) var(--pz-space-3);
  align-items: baseline;
  padding-bottom: var(--pz-space-2);
  border-bottom: 1px solid var(--pz-line-soft);
}

.pz-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pz-text-1);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Szersze ekrany -------------------------------------------------------- */

@media (min-width: 768px) {
  .pz-news__title,
  .pz-news-article__title { font-size: 40px; }

  .pz-news-list,
  .pz-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pz-news-list__lead { grid-column: 1 / -1; }

  .pz-news-card--lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .pz-news-card--lead .pz-news-card__art { aspect-ratio: auto; min-height: 260px; }
}

@media (min-width: 1024px) {
  .pz-news__layout,
  .pz-news-article__layout { grid-template-columns: minmax(0, 1fr) 320px; }

  .pz-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pz-news-article__title { font-size: 48px; }
}

/* Blok „Zdjęcie” przed pierwszym zapisem artykułu (UXM1 pkt 25). */
.pz-news-block__locked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-2);
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-surface-2);
  border: 1px dashed var(--pz-line-strong);
  border-radius: var(--pz-radius-input);
  color: var(--pz-text-1);
  font-size: 13px;
}
.pz-news-block__locked p { flex: 1 1 220px; margin: 0; }

/* ===== resources/css/layout-search.css ===== */
/* ==========================================================================
   Wspólna wyszukiwarka (`/szukaj`, rozdz. 3.20) — etap 6B.
   Mobile-first: 360 px → 768 → 1024. Zakładki rodzajów to te same
   `.pz-news-tabs` co w aktualnościach. Kolor = gra tylko w tokenie gry.
   ========================================================================== */

.pz-search-page { padding-block: var(--pz-space-5); }

.pz-search-page__head { margin: var(--pz-space-4) 0 var(--pz-space-5); }

.pz-search-page__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  max-width: 720px;
}

.pz-search-page__form .pz-input { flex: 1 1 220px; min-width: 0; }

.pz-search-page__summary { margin: 0 0 var(--pz-space-5); font-size: 13px; }

.pz-search-group { margin-bottom: var(--pz-space-6); }

.pz-search-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-3);
}

.pz-search-group__title {
  margin: 0;
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pz-text-1);
}

.pz-search-group__title .pz-num { margin-left: var(--pz-space-2); font-size: 12px; }

.pz-search-group__more { font-size: 13px; color: var(--pz-text-2); }
.pz-search-group__more:hover { color: var(--pz-text-1); }

.pz-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pz-space-2);
}

.pz-search-hit {
  display: flex;
  align-items: flex-start;
  gap: var(--pz-space-3);
  min-height: var(--pz-tap-target);
  padding: var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface);
  color: var(--pz-text-1);
  text-decoration: none;
}

.pz-search-hit:hover { border-color: var(--pz-line-hover); background: var(--pz-surface-2); }

.pz-search-hit__body {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-1);
  min-width: 0;
}

.pz-search-hit__title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
  font-weight: 600;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.pz-search-hit__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-1) var(--pz-space-3);
  color: var(--pz-text-3);
  font-size: 12px;
}

.pz-search-hit__text {
  color: var(--pz-text-2);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .pz-search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pole „Szukaj w archiwum…” w bocznej kolumnie aktualności (News.html). */
.pz-news-search { display: flex; gap: var(--pz-space-2); }
.pz-news-search .pz-input { flex: 1 1 auto; min-width: 0; }

/* ===== resources/css/layout-partners.css ===== */
/* ==========================================================================
   Partnerzy, sponsorzy i banery (rozdz. 3.16, makieta Partnerzy.html, Main.html)
   — etap 6D. Mobile-first: 360 px → 768 → 1024 → 1440.

   Partner tytularny w złotej ramce (`--pz-gold` z makiety). Akcent limonkowy
   tylko na „Zostań partnerem” (akcja) — liczby i kwoty w kolorze tekstu.
   Logo zawsze w ramce o stałych proporcjach (`object-fit: contain`), żeby
   cudza grafika nie rozpychała siatki.
   ========================================================================== */

.pz-partners { padding-block: var(--pz-space-5); }

.pz-partners__head { margin: var(--pz-space-4) 0 var(--pz-space-5); }

.pz-partners__title,
.pz-partners__subtitle {
  margin: 0 0 var(--pz-space-3);
  font-family: var(--pz-font-display);
  font-stretch: var(--pz-display-stretch);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-partners__subtitle { font-size: 24px; margin-bottom: var(--pz-space-4); }

.pz-partners__section { margin-top: var(--pz-space-6); }

.pz-partners__kicker {
  margin: 0 0 var(--pz-space-4);
  font-family: var(--pz-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-partner-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 22px;
  padding: 0 var(--pz-space-2);
  background: var(--pz-gold);
  color: var(--pz-bg);
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Logo: obrazek albo nazwa w jego miejscu (bez atrapy „[ logo ]”). */
.pz-partner-hero__logo,
.pz-partner-card__logo,
.pz-partner-tile__logo,
.pz-partner-strip__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.pz-partner-hero__logo img,
.pz-partner-card__logo img,
.pz-partner-tile__logo img,
.pz-partner-strip__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pz-partner-name-mark {
  padding: 0 var(--pz-space-3);
  font-family: var(--pz-font-display);
  font-stretch: var(--pz-display-stretch);
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  text-transform: uppercase;
  color: var(--pz-text-2);
  overflow-wrap: anywhere;
}

/* --- Partner tytularny ----------------------------------------------------- */

.pz-partner-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--pz-warn-line);
  background: var(--pz-warn-bg);
  border-radius: var(--pz-radius-card);
  overflow: hidden;
}

.pz-partner-hero + .pz-partner-hero { margin-top: var(--pz-space-4); }

.pz-partner-hero__logo {
  aspect-ratio: 9 / 5;
  background: var(--pz-bg-alt);
  border-bottom: 1px solid var(--pz-warn-line);
}

.pz-partner-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  padding: var(--pz-space-5) var(--pz-space-4);
  min-width: 0;
}

.pz-partner-hero__meta { display: flex; align-items: center; gap: var(--pz-space-3); flex-wrap: wrap; }

.pz-partner-hero__name {
  margin: 0;
  font-family: var(--pz-font-display);
  font-stretch: var(--pz-display-stretch);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-partner-hero__text { margin: 0; max-width: 640px; font-size: 14px; line-height: 1.65; color: var(--pz-text-2); }

.pz-partner-hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pz-space-4) var(--pz-space-6);
  margin-top: var(--pz-space-2);
}

.pz-partner-hero__facts > div { display: flex; flex-direction: column; gap: var(--pz-space-1); font-size: 13px; color: var(--pz-text-1); }

/* --- Partnerzy technologiczni ---------------------------------------------- */

.pz-partner-cards,
.pz-partner-logos,
.pz-partner-strip {
  display: grid;
  gap: var(--pz-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-partner-cards { grid-template-columns: minmax(0, 1fr); }

.pz-partner-card {
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
  overflow: hidden;
}

.pz-partner-card__logo {
  aspect-ratio: 220 / 108;
  background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-line);
}

.pz-partner-card__body { padding: var(--pz-space-4); }

.pz-partner-card__name { margin: 0 0 var(--pz-space-2); font-size: 14px; font-weight: 600; color: var(--pz-text-1); }
.pz-partner-card__name a { color: inherit; }
.pz-partner-card__name a:hover { text-decoration: underline; }
.pz-partner-card__text { margin: 0 0 var(--pz-space-2); font-size: 12px; line-height: 1.55; color: var(--pz-text-3); }

/* --- Logo partnerów medialnych i pasek na stronie głównej ------------------- */

.pz-partner-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pz-partner-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pz-space-1);
  height: 100%;
  min-height: 92px;
  padding: var(--pz-space-2);
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
  text-align: center;
  text-decoration: none;
}

a.pz-partner-tile:hover { border-color: var(--pz-line-hover); }

.pz-partner-tile__logo { width: 100%; height: 72px; }

.pz-partner-tile--free { border-style: dashed; border-color: var(--pz-line-hover); background: var(--pz-bg-alt); }

.pz-partner-tile__cta {
  font-family: var(--pz-font-display);
  font-stretch: 108%;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pz-accent);
}

.pz-partner-tile--free .pz-muted { font-size: 11px; }

.pz-partner-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pz-partner-strip__lead { grid-column: 1 / -1; }

.pz-partner-strip__card {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  height: 100%;
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-warn-line);
  background: var(--pz-warn-bg);
  border-radius: var(--pz-radius-card);
  text-decoration: none;
}

.pz-partner-strip__logo { height: 64px; }
.pz-partner-strip__note { font-size: 11px; color: var(--pz-text-2); }

/* --- Co dostaje partner ---------------------------------------------------- */

.pz-partners__offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-5);
  align-items: start;
}

.pz-partner-reach {
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
  overflow: hidden;
}

.pz-partner-reach__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.pz-partner-reach__stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--pz-space-2);
  padding: var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line);
  min-width: 0;
}

.pz-partner-reach__stats > div:nth-child(odd) { border-right: 1px solid var(--pz-line); }

.pz-partner-reach__stats dd {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-partner-reach__stats dt {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-partner-reach__benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-3);
  margin: 0;
  padding: var(--pz-space-4);
  list-style: none;
}

.pz-partner-reach__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--pz-space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--pz-text-2);
}

.pz-partner-reach__benefits svg { flex-shrink: 0; margin-top: 3px; color: var(--pz-ok-text); }

.pz-partner-join {
  padding: var(--pz-space-5);
  border: 1px solid var(--pz-line-strong);
  background: var(--pz-surface);
  border-radius: var(--pz-radius-card);
}

.pz-partner-join__title {
  margin: 0 0 var(--pz-space-3);
  font-family: var(--pz-font-display);
  font-stretch: 110%;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--pz-text-1);
}

.pz-partner-join__lead { margin: 0 0 var(--pz-space-4); font-size: 13px; line-height: 1.65; color: var(--pz-text-2); }

.pz-partner-join__facts { display: flex; flex-direction: column; gap: var(--pz-space-3); margin: 0 0 var(--pz-space-5); }

.pz-partner-join__facts > div { display: flex; align-items: baseline; gap: var(--pz-space-3); font-size: 13px; color: var(--pz-text-1); min-width: 0; }
.pz-partner-join__facts dt { flex: 0 0 84px; font-family: var(--pz-font-mono); font-size: 11px; color: var(--pz-text-3); }
.pz-partner-join__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* --- Baner w slocie -------------------------------------------------------- */

.pz-ad { display: flex; flex-direction: column; gap: var(--pz-space-1); min-width: 0; }

.pz-ad__label {
  align-self: flex-start;
  font-family: var(--pz-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-3);
}

.pz-ad__link {
  display: block;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  overflow: hidden;
  background: var(--pz-surface);
}

.pz-ad__link:hover { border-color: var(--pz-line-hover); }

.pz-ad__link img { display: block; width: 100%; height: auto; }

.pz-ad--home .pz-ad__link img { aspect-ratio: 8 / 1; object-fit: cover; }
.pz-ad--news .pz-ad__link img { aspect-ratio: 6 / 5; object-fit: cover; }

/* Podgląd grafiki w CMS. */
.pz-partner-preview {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-bottom: var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-input);
  background: var(--pz-bg-alt);
}

/* --- Szersze ekrany -------------------------------------------------------- */

@media (min-width: 768px) {
  .pz-partners__title { font-size: 40px; }
  .pz-partners__subtitle { font-size: 30px; }

  .pz-partner-hero { grid-template-columns: 300px minmax(0, 1fr); }
  .pz-partner-hero__logo { aspect-ratio: auto; min-height: 200px; border-bottom: 0; border-right: 1px solid var(--pz-warn-line); }
  .pz-partner-hero__body { padding: var(--pz-space-5) var(--pz-space-6); }
  .pz-partner-hero__name { font-size: 30px; }

  .pz-partner-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-partner-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pz-partner-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pz-partner-reach__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pz-partner-reach__stats > div { border-bottom: 0; border-right: 1px solid var(--pz-line); }
  .pz-partner-reach__stats > div:last-child { border-right: 0; }
  .pz-partner-reach__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--pz-line); padding: var(--pz-space-5); }
}

@media (min-width: 1024px) {
  .pz-partners__title { font-size: 46px; }

  .pz-partner-hero { grid-template-columns: 360px minmax(0, 1fr); }

  .pz-partner-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pz-partner-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .pz-partner-strip { grid-template-columns: 300px repeat(5, minmax(0, 1fr)); }
  .pz-partner-strip__lead { grid-column: auto; }

  .pz-partners__offer-grid { grid-template-columns: minmax(0, 1fr) 380px; }
}

@media (min-width: 1440px) {
  .pz-partners__offer-grid { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* ===== resources/css/layout-streams.css ===== */
/* ==========================================================================
   Transmisje (rozdz. 3.15, makiety Streamy.html i AdminStreamy.html) — etap 6C.
   Mobile-first: 360 px → 768 → 1024 → 1440.

   Kolor kafelka = gra turnieju (`--pz-game-color`); platforma to neutralna
   etykieta. Czerwień tylko przy „Na żywo”, akcent tylko na „Włącz
   odtwarzacz” i „Powiadom mnie” (akcje). Ramka dostawcy pojawia się
   dopiero po kliknięciu — do tego czasu „miniatura” jest nasza.
   ========================================================================== */

.pz-streams { padding-block: var(--pz-space-5); }

.pz-streams__head {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-4);
  margin: var(--pz-space-4) 0 var(--pz-space-5);
}

.pz-streams__title,
.pz-streams__subtitle {
  margin: 0 0 var(--pz-space-2);
  font-family: var(--pz-font-display);
  font-stretch: var(--pz-display-stretch);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-streams__subtitle { font-size: 22px; margin-bottom: var(--pz-space-4); }

.pz-streams__counts {
  display: inline-block;
  font-family: var(--pz-font-mono);
  color: var(--pz-text-1);
}

.pz-streams__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2) var(--pz-space-3);
}

.pz-streams__chips { display: flex; flex-wrap: wrap; gap: var(--pz-space-2); }

.pz-streams__chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--pz-space-3);
  border: 1px solid var(--pz-line-strong);
  border-radius: var(--pz-radius-badge);
  color: var(--pz-text-2);
  font-family: var(--pz-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.pz-streams__chip:hover { color: var(--pz-text-1); border-color: var(--pz-line-active); }

.pz-streams__chip[aria-current="true"] {
  background: var(--pz-surface-3);
  border-color: var(--pz-line-active);
  color: var(--pz-text-1);
}

.pz-streams__game { width: auto; min-width: 180px; max-width: 100%; }

.pz-streams__section { margin-top: var(--pz-space-7); }

.pz-streams__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pz-space-2) var(--pz-space-4);
  margin-bottom: var(--pz-space-4);
}

.pz-streams__section-head .pz-streams__subtitle { margin-bottom: 0; }

.pz-streams__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  margin-bottom: var(--pz-space-1);
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pz-live-text);
}

.pz-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pz-live);
  flex-shrink: 0;
}

.pz-streams__note {
  margin: var(--pz-space-7) 0 0;
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
  font-size: 13px;
  line-height: 1.6;
  color: var(--pz-text-3);
}

/* --- Scena: odtwarzacz + czat -------------------------------------------- */

.pz-streams__stage {
  display: grid;
  gap: var(--pz-space-4);
  min-width: 0;
}

.pz-stream-main {
  min-width: 0;
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
}

.pz-stream-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pz-game-color, var(--pz-line-strong)) 22%, transparent), transparent 60%),
    var(--pz-surface-2);
  overflow: hidden;
}

.pz-stream-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pz-stream-player__poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pz-space-3);
  padding: var(--pz-space-4);
  text-align: center;
}

.pz-stream-player__badges {
  position: absolute;
  top: var(--pz-space-3);
  left: var(--pz-space-3);
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
}

.pz-stream-player__title {
  margin: 0;
  max-width: 36ch;
  font-family: var(--pz-font-display);
  font-stretch: var(--pz-display-stretch);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-stream-player__consent {
  margin: 0;
  max-width: 52ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pz-text-3);
}

/* Na najwęższych ekranach zgoda pod przyciskiem nie mieści się w 16:9. */
@media (max-width: 479px) {
  .pz-stream-player { aspect-ratio: auto; min-height: 240px; }
  .pz-stream-player:has(iframe) { aspect-ratio: 16 / 9; min-height: 0; }
  .pz-stream-player__poster { position: static; min-height: 240px; padding-top: var(--pz-space-7); }
}

.pz-stream-viewers {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--pz-space-2);
  background: color-mix(in srgb, var(--pz-bg) 80%, transparent);
  font-size: 12px;
  color: var(--pz-text-1);
}

.pz-stream-main__info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pz-space-3) var(--pz-space-4);
  padding: var(--pz-space-4);
  border-top: 1px solid var(--pz-line);
}

.pz-stream-main__stripe {
  align-self: stretch;
  width: 4px;
  min-height: 40px;
  background: var(--pz-game-color, var(--pz-line-strong));
}

.pz-stream-main__text { flex: 1 1 240px; min-width: 0; }

.pz-stream-main__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-2);
}

.pz-stream-main__title {
  margin: 0;
  font-family: var(--pz-font-display);
  font-stretch: var(--pz-display-stretch);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-stream-main__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-1) var(--pz-space-3);
  margin-top: var(--pz-space-2);
  font-size: 13px;
  color: var(--pz-text-3);
}

.pz-stream-main__actions { display: flex; flex-wrap: wrap; gap: var(--pz-space-2); }

.pz-stream-game {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  font-size: 12px;
  color: var(--pz-text-2);
}

/* Pasek meczu pod odtwarzaczem — wynik z rekordu meczu. */
.pz-stream-bar {
  display: grid;
  gap: 1px;
  margin: 0;
  background: var(--pz-line);
  border-top: 1px solid var(--pz-line);
}

.pz-stream-bar > div {
  padding: var(--pz-space-3) var(--pz-space-4);
  background: var(--pz-surface);
  min-width: 0;
}

.pz-stream-bar dt {
  font-family: var(--pz-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pz-text-4);
}

.pz-stream-bar dd {
  margin: var(--pz-space-1) 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-stream-bar__score { padding-inline: var(--pz-space-1); color: var(--pz-text-1); }

.pz-stream-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
}

.pz-stream-chat__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pz-space-2);
  padding: var(--pz-space-3) var(--pz-space-4);
  border-bottom: 1px solid var(--pz-line);
  font-size: 12px;
}

.pz-stream-chat__title {
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pz-text-1);
}

.pz-stream-chat__frame {
  position: relative;
  flex: 1;
  background: var(--pz-surface-2);
}

/* Przed kliknięciem panel czatu to jedno zdanie — wysokość dostaje
   dopiero ramka (na desktopie i tak rozciąga go wiersz siatki). */
.pz-stream-chat__frame:has(iframe) { min-height: 420px; }

.pz-stream-chat__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pz-stream-chat__placeholder {
  margin: 0;
  padding: var(--pz-space-5) var(--pz-space-4);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pz-text-3);
}

.pz-stream-chat__note {
  margin: 0;
  padding: var(--pz-space-3) var(--pz-space-4);
  border-top: 1px solid var(--pz-line);
  font-size: 11px;
  line-height: 1.5;
  color: var(--pz-text-4);
}

/* --- Kafelki --------------------------------------------------------------- */

.pz-stream-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
}

.pz-stream-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
}

.pz-stream-card:hover,
.pz-stream-card:focus-within { border-color: var(--pz-line-active); }

.pz-stream-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pz-space-2);
  aspect-ratio: 3 / 1;
  padding: var(--pz-space-3);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pz-game-color, var(--pz-line-strong)) 28%, transparent), transparent 70%),
    var(--pz-surface-2);
  border-bottom: 3px solid var(--pz-game-color, var(--pz-line-strong));
}

.pz-stream-card__body { padding: var(--pz-space-3) var(--pz-space-4) var(--pz-space-4); }

.pz-stream-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pz-space-2); }

.pz-stream-card__title {
  margin: var(--pz-space-2) 0 var(--pz-space-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pz-stream-card__title a { color: var(--pz-text-1); text-decoration: none; }

/* Cały kafelek klikalny, a link jeden (dla czytników ekranu). */
.pz-stream-card__title a::after { content: ""; position: absolute; inset: 0; }

.pz-stream-card__meta { margin: 0; font-size: 12px; color: var(--pz-text-3); overflow-wrap: anywhere; }

/* --- Zaplanowane ------------------------------------------------------------ */

.pz-stream-schedule {
  border: 1px solid var(--pz-line);
  background: var(--pz-surface);
}

.pz-stream-schedule__head { display: none; }

.pz-stream-schedule__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pz-space-1) var(--pz-space-3);
  align-items: center;
  padding: var(--pz-space-3) var(--pz-space-4);
  border-top: 1px solid var(--pz-line);
  border-left: 3px solid var(--pz-game-color, var(--pz-line-strong));
}

.pz-stream-schedule__row:first-of-type { border-top: 0; }

.pz-stream-schedule__time { display: flex; gap: var(--pz-space-2); align-items: baseline; }

.pz-stream-schedule__title {
  grid-column: 1 / -1;
  font-weight: 600;
  color: var(--pz-text-1);
  overflow-wrap: anywhere;
}

.pz-stream-schedule__row > [role="cell"] { min-width: 0; font-size: 13px; }

.pz-stream-schedule__action { grid-column: 2; grid-row: 1; justify-self: end; }

@media (min-width: 768px) {
  .pz-streams__title { font-size: 40px; }
  .pz-stream-card__top { aspect-ratio: 16 / 9; }
  .pz-stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-stream-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pz-streams__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .pz-streams__stage--chat { grid-template-columns: minmax(0, 1fr) 360px; }
  .pz-stream-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .pz-stream-schedule__head,
  .pz-stream-schedule__row {
    display: grid;
    grid-template-columns: 110px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) 90px 170px;
    gap: var(--pz-space-3);
    align-items: center;
  }

  .pz-stream-schedule__head {
    padding: var(--pz-space-3) var(--pz-space-4) var(--pz-space-3) calc(var(--pz-space-4) + 3px);
    border-bottom: 1px solid var(--pz-line);
    font-family: var(--pz-font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pz-text-4);
  }

  .pz-stream-schedule__row:first-of-type { border-top: 1px solid var(--pz-line); }
  .pz-stream-schedule__head + .pz-stream-schedule__row { border-top: 0; }
  .pz-stream-schedule__title { grid-column: auto; }
  .pz-stream-schedule__action { grid-column: auto; grid-row: auto; }
}

/* --- CMS -------------------------------------------------------------------- */

.pz-stream-check {
  display: flex;
  align-items: flex-start;
  gap: var(--pz-space-2);
  margin-top: var(--pz-space-2);
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-stream-check--ok { color: var(--pz-ok-text); }
.pz-stream-check--error { color: var(--pz-live-text); }

.pz-stream-admin-channel { display: flex; flex-direction: column; gap: 2px; }
.pz-stream-admin-channel small { color: var(--pz-text-3); }

.pz-stream-tabs { display: flex; flex-wrap: wrap; gap: var(--pz-space-2); margin-bottom: var(--pz-space-4); }

/* ===== resources/css/layout-rankings.css ===== */
/*
 | Rankingi (KONSPEKT 3.6, etap 7 sesja B): /rankingi, sekcja na stronie
 | głównej (Main.html), strona serii. Lista zamiast tabeli — na telefonie
 | wiersz zwija się do dwóch linii, strona nie przewija się w bok.
 | Miejsce #1 złotem z tokenów (nie akcentem — akcent tylko dla akcji).
 */
.pz-rankings-preview {
  background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-line);
  padding: var(--pz-space-2) 0;
  font-size: 13px;
  color: var(--pz-text-2);
}

.pz-rankings__games,
.pz-rankings__views {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  margin: var(--pz-space-4) 0 var(--pz-space-3);
}

.pz-rankings__game,
.pz-rankings__view {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  padding: var(--pz-space-2) var(--pz-space-3);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-badge);
  background: transparent;
  color: var(--pz-text-2);
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

.pz-rankings__game.is-active,
.pz-rankings__view.is-active {
  border-color: var(--pz-line-active);
  color: var(--pz-text-1);
  background: var(--pz-surface-2);
}

.pz-rankings__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  margin-bottom: var(--pz-space-4);
}

.pz-rankings__country {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pz-space-2);
}

.pz-rankings__country .pz-field { margin: 0; min-width: 0; flex: 1 1 200px; }

.pz-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  overflow: hidden;
}

.pz-rank-list__head { display: none; }

.pz-rank-list__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas:
    "rank name points"
    "rank meta meta";
  align-items: center;
  column-gap: var(--pz-space-3);
  row-gap: var(--pz-space-1);
  padding: var(--pz-space-3) var(--pz-space-4);
  border-top: 1px solid var(--pz-line-soft);
}

.pz-rank-list__row:first-child { border-top: 0; }

.pz-rank-list__rank {
  grid-area: rank;
  font-size: 15px;
  color: var(--pz-text-2);
}

.pz-rank-list__row.is-first .pz-rank-list__rank { color: var(--pz-gold); }

.pz-rank-list__name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--pz-text-1);
}

.pz-rank-list__name a { color: inherit; text-decoration: none; }
.pz-rank-list__name a:hover { text-decoration: underline; }

.pz-rank-list__meta {
  font-size: 12px;
  color: var(--pz-text-3);
}

/* Na telefonie mecze i bilans w drugiej linii, z etykietą. */
.pz-rank-list__row > .pz-rank-list__meta:nth-of-type(3) { grid-area: meta; }
.pz-rank-list__row > .pz-rank-list__meta:nth-of-type(4) { display: none; }
.pz-rank-list__meta::before { content: attr(data-label) " "; }
.pz-rank-list__meta:empty { display: none; }

.pz-rank-list__points {
  grid-area: points;
  font-size: 15px;
  color: var(--pz-text-1);
  text-align: right;
}

.pz-rankings__foot {
  margin-top: var(--pz-space-3);
  font-size: 12px;
  color: var(--pz-text-3);
}

/* Ranking wyzwań (11E): nazwa okresu nad listą. */
.pz-rankings__period {
  margin: var(--pz-space-3) 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--pz-text-1);
}

@media (min-width: 768px) {
  .pz-rankings__toolbar { flex-direction: row; justify-content: space-between; align-items: flex-end; }

  .pz-rank-list__head,
  .pz-rank-list__row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 90px 90px 96px;
    grid-template-areas: none;
    align-items: center;
    column-gap: var(--pz-space-3);
    padding: var(--pz-space-3) var(--pz-space-4);
  }

  .pz-rank-list__head {
    font-family: var(--pz-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pz-text-3);
    background: var(--pz-surface-2);
  }

  .pz-rank-list__head > span:nth-child(n+3) { text-align: right; }

  .pz-rank-list__row { min-height: 52px; }
  .pz-rank-list__rank,
  .pz-rank-list__name,
  .pz-rank-list__points,
  .pz-rank-list__row > .pz-rank-list__meta:nth-of-type(3),
  .pz-rank-list__row > .pz-rank-list__meta:nth-of-type(4) { grid-area: auto; }

  .pz-rank-list__row > .pz-rank-list__meta:nth-of-type(4) { display: block; }
  .pz-rank-list__meta { text-align: right; font-size: 13px; color: var(--pz-text-2); }
  .pz-rank-list__meta::before { content: none; }
  .pz-rank-list__meta:empty { display: block; }
}

/* Gablota: grupa serii i strona serii (Hall of Fame). */
.pz-series-editions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pz-space-3);
}

.pz-series-edition {
  display: grid;
  gap: var(--pz-space-2);
  padding: var(--pz-space-3) var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
}

.pz-series-edition__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pz-space-2);
}

.pz-series-edition__podium {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pz-space-1);
  font-size: 14px;
}

/* Head-to-head na stronie meczu (Mecz.html). */
.pz-h2h__score { font-size: 18px; color: var(--pz-text-1); }

.pz-h2h__list {
  list-style: none;
  margin: var(--pz-space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--pz-space-2);
  font-size: 13px;
}

.pz-h2h__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--pz-space-2);
  align-items: baseline;
}

.pz-h2h__row time { color: var(--pz-text-3); }

/* ===== resources/css/layout-leagues.css ===== */
/*
 | Ligi (rozdz. 3.8, etap 8A): /ligi i strona ligi. Tabela dywizji używa
 | listy rankingowej (`pz-rank-list`); tu tylko karty lig, pasek sezonu
 | i strzałki awansu/spadku. Strefy BEZ kolorów (decyzja L11): kolor = gra,
 | akcent tylko dla akcji, czerwień tylko live/błędy — strzałka i tekst.
 */
.pz-league-list {
  list-style: none;
  margin: var(--pz-space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--pz-space-3);
}

.pz-league-card {
  display: grid;
  gap: var(--pz-space-2);
  padding: var(--pz-space-3) var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-left: 3px solid var(--pz-game-color, var(--pz-line));
  border-radius: var(--pz-radius-card);
}

.pz-league-card__name {
  font-size: 16px;
  color: var(--pz-text-1);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pz-league-card__name:hover { text-decoration: underline; }

.pz-league-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2);
  align-items: center;
  font-size: 13px;
  color: var(--pz-text-2);
}

.pz-league-season {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-space-2) var(--pz-space-4);
  align-items: center;
  margin: var(--pz-space-3) 0;
  font-size: 13px;
  color: var(--pz-text-2);
}

.pz-league-zone {
  font-family: var(--pz-font-mono);
  font-size: 12px;
  color: var(--pz-text-2);
}

.pz-league-legend {
  margin-top: var(--pz-space-2);
  font-size: 12px;
  color: var(--pz-text-3);
}

.pz-league-section { margin-top: var(--pz-space-6); }

.pz-league-entry {
  display: grid;
  gap: var(--pz-space-3);
  padding: var(--pz-space-4);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
}

.pz-league-entry form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pz-space-2);
}

.pz-league-entry .pz-field { margin: 0; min-width: 0; flex: 1 1 220px; }

.pz-league-fixtures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pz-space-2);
  font-size: 14px;
}

.pz-league-fixtures li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--pz-space-2);
  align-items: baseline;
}

.pz-league-fixtures li > :last-child { text-align: right; }

@media (min-width: 768px) {
  .pz-league-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Termin meczu w pokoju meczowym (etap 8B). */
.pz-schedule { margin-bottom: var(--pz-space-3); }

.pz-schedule__time { margin: 0 0 var(--pz-space-2); }

.pz-schedule__proposal { margin-top: var(--pz-space-3); }

.pz-schedule__propose { margin-top: var(--pz-space-3); }

.pz-schedule__propose .pz-field { margin: 0; min-width: 0; flex: 1 1 200px; }

/* ===== resources/css/layout-minigames.css ===== */
/*
 | Strefa gier (KONSPEKT 3.28, etap 13A): lista gier i strona gry.
 | Mobile-first: plansza na całą szerokość, ranking pod nią; od 1024 px
 | ranking w kolumnie bocznej. Plansza skaluje się do kontenera (JS), więc
 | strona nie przewija się w bok (zasada bezwzględna nr 1).
 */
.pz-mg { padding-bottom: var(--pz-space-7); }

.pz-mg__back { margin: var(--pz-space-4) 0 0; font-size: 13px; }

.pz-mg__grid {
  list-style: none;
  margin: var(--pz-space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-4);
}

.pz-mg__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pz-space-3);
  padding: var(--pz-space-5);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
}

.pz-mg__name {
  margin: 0;
  font-family: var(--pz-font-display);
  font-size: 20px;
}

.pz-mg__desc { margin: 0; color: var(--pz-text-2); font-size: 14px; flex-grow: 1; }

/* Ikona gry — własny kształt z CSS, bez grafik. */
.pz-mg__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--pz-radius-card);
  background: var(--pz-surface-3);
  position: relative;
}

.pz-mg__icon::before,
.pz-mg__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
}

.pz-mg__icon::before { left: 7px; background: var(--pz-silver); }
.pz-mg__icon::after { right: 7px; background: var(--pz-bronze); }

.pz-mg__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pz-space-5);
  margin-top: var(--pz-space-4);
}

.pz-mg__help { margin: 0 0 var(--pz-space-3); color: var(--pz-text-2); font-size: 14px; }

.pz-mg__stage {
  position: relative;
  width: 100%;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  overflow: hidden;
  background: var(--pz-bg-alt);
  /* Dotyk na planszy to atak, nie przewijanie ani powiększanie. */
  touch-action: manipulation;
}

.pz-mg__canvas { display: block; max-width: 100%; touch-action: none; }

.pz-mg__canvas:focus-visible { outline: 2px solid var(--pz-line-active); outline-offset: -2px; }

.pz-mg__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pz-bg) 60%, transparent);
}

.pz-mg__overlay[hidden] { display: none; }

.pz-mg__overlay .pz-btn { min-height: var(--pz-tap-target); min-width: 120px; }

.pz-mg__controls { margin-top: var(--pz-space-3); font-size: 13px; color: var(--pz-text-2); }

.pz-mg__slow {
  display: inline-flex;
  align-items: center;
  gap: var(--pz-space-2);
  min-height: var(--pz-tap-target);
}

.pz-mg__result {
  min-height: 1.5em;
  margin-top: var(--pz-space-2);
  font-size: 14px;
}

.pz-mg__side { display: flex; flex-direction: column; gap: var(--pz-space-4); min-width: 0; }

.pz-mg__side-title {
  margin: 0 0 var(--pz-space-3);
  font-family: var(--pz-font-display);
  font-size: 16px;
}

.pz-mg__own { margin: 0 0 var(--pz-space-2); display: grid; gap: var(--pz-space-2); }
.pz-mg__own div { display: flex; justify-content: space-between; gap: var(--pz-space-3); }
.pz-mg__own dt { color: var(--pz-text-2); }
.pz-mg__own dd { margin: 0; text-align: right; }

.pz-mg__board {
  list-style: none;
  margin: 0 0 var(--pz-space-3);
  padding: 0;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  overflow: hidden;
}

.pz-mg__board-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--pz-space-2);
  align-items: center;
  padding: var(--pz-space-2) var(--pz-space-3);
  border-top: 1px solid var(--pz-line-soft);
  font-size: 14px;
}

.pz-mg__board-row:first-child { border-top: 0; }
.pz-mg__board-row.is-own { background: var(--pz-surface-2); }
.pz-mg__board-rank { color: var(--pz-text-3); }
.pz-mg__board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 768px) {
  .pz-mg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pz-mg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pz-mg__layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

/*
 | Czwórki (etap 13B): plansza z 7 przycisków-kolumn po 6 pól. Na 360 px
 | kolumna ma ok. 46 px — cel dotykowy ≥ 44 px. Żeton bota ma ciemny
 | środek (rozróżnienie nie tylko kolorem), czwórka obrysowana tekstem.
 */
.pz-c4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pz-space-3);
}

.pz-c4__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  max-width: 480px;
  padding: 2px;
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
}

.pz-c4__col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: var(--pz-tap-target);
  padding: var(--pz-space-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--pz-radius-input);
  cursor: pointer;
}

.pz-c4__col:not(:disabled):hover,
.pz-c4__col:focus-visible {
  border-color: var(--pz-line-active);
  outline: none;
}

.pz-c4__col:disabled { cursor: default; }

.pz-c4__cell {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pz-bg-alt);
  box-shadow: inset 0 0 0 1px var(--pz-line);
}

.pz-c4__cell.is-human { background: var(--pz-silver); }

.pz-c4__cell.is-bot {
  background: radial-gradient(circle, var(--pz-bg-alt) 0 28%, var(--pz-bronze) 30%);
}

.pz-c4__cell.is-win { box-shadow: 0 0 0 3px var(--pz-text-1); }

.pz-c4__status { margin: 0; min-height: 1.5em; font-size: 14px; }

.pz-c4 [hidden] { display: none; }

/* Czwórki PvP (etap 13C): poczekalnia, gracze nad planszą. */
.pz-mg__lobby { display: flex; flex-direction: column; gap: var(--pz-space-3); }
.pz-mg__lobby-actions { display: flex; flex-wrap: wrap; gap: var(--pz-space-2); align-items: center; }
.pz-mg__lobby-actions form { margin: 0; }
.pz-mg__lobby-actions [hidden] { display: none; }
.pz-mg__lobby-status { margin: 0; min-height: 1.5em; font-size: 14px; }
.pz-mg__players { display: flex; flex-wrap: wrap; gap: var(--pz-space-2); align-items: center; margin: 0; font-size: 14px; }
.pz-mg__players > span { display: inline-flex; align-items: center; gap: var(--pz-space-1); min-width: 0; overflow-wrap: anywhere; }
.pz-c4__chip { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; }
.pz-c4__chip--human { background: var(--pz-silver); }
.pz-c4__chip--bot { background: radial-gradient(circle, var(--pz-bg-alt) 0 28%, var(--pz-bronze) 30%); }

/*
 | Okienko Strefy gier w turnieju (etap 13D): karta w lobby / na karcie
 | turnieju i nakładka z grą (iframe). Na telefonie nakładka na cały ekran,
 | od 768 px — wyśrodkowane okno. Kolory z tokenów.
 */
.pz-mg-dock {
  display: flex;
  flex-direction: column;
  gap: var(--pz-space-3);
  padding: var(--pz-space-4);
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-card);
  margin-bottom: var(--pz-space-4);
}

.pz-mg-dock__head { display: flex; gap: var(--pz-space-3); align-items: center; }
.pz-mg-dock__title { margin: 0; font-family: var(--pz-font-display); font-size: 16px; }
.pz-mg-dock__lead { margin: var(--pz-space-1) 0 0; font-size: 13px; color: var(--pz-text-2); }
.pz-mg-dock__games { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pz-space-2); }
.pz-mg-dock__games .pz-btn { min-height: var(--pz-tap-target); }
.pz-mg-dock[hidden] { display: none; }

.pz-mg-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--pz-z-overlay);
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: color-mix(in srgb, var(--pz-bg) 80%, transparent);
}

.pz-mg-overlay__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--pz-bg-alt);
}

.pz-mg-overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pz-space-2);
  padding: var(--pz-space-2) var(--pz-space-3);
  border-bottom: 1px solid var(--pz-line);
}

.pz-mg-overlay__title { font-size: 14px; color: var(--pz-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-mg-overlay__frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--pz-bg); }

body.pz-mg-overlay-open { overflow: hidden; }

/* Strona w trybie okienka: sama plansza, bez marginesów portalu. */
.pz-mg-window { margin: 0; background: var(--pz-bg); color: var(--pz-text-1); font-family: var(--pz-font-body); }
.pz-mg-window__main { padding: var(--pz-space-3) 0; }
.pz-mg-window .pz-mg { padding-bottom: var(--pz-space-4); }

@media (min-width: 768px) {
  .pz-mg-overlay { align-items: center; padding: var(--pz-space-5); }
  .pz-mg-overlay__box {
    max-width: 900px;
    height: min(90vh, 760px);
    border: 1px solid var(--pz-line);
    border-radius: var(--pz-radius-card);
    overflow: hidden;
  }
}