@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@100..800&display=swap');

/* ============================================================
   AlfaPadel — TRYB JASNY. Tlo: jasna zielen.
   Trio wiodace: ciemna zielen, zolc, zloto.
   Kontrasty wyliczone wg WCAG 2.1 i zweryfikowane niezaleznie.
   ============================================================ */
:root {
  /* --- powierzchnie --- */
  --ap-bg-page:   #DCEBC8;   /* tlo strony, tekst glowny 12.30:1 */
  --ap-bg-card:   #ECF5DF;   /* karta */
  --ap-bg-raised: #F7FBF0;   /* modal, dropdown */
  --ap-bg-sunken: #DAEAC7;   /* zebra tabeli */

  /* --- linie --- */
  --ap-line:        #B4CE99; /* hairline dekoracyjny */
  --ap-line-strong: #5F8047; /* granica informacyjna, 3.59:1 PASS UI */

  /* --- tekst --- */
  --ap-text:       #0E2A17;  /* 12.30:1 AAA */
  --ap-text-2:     #35513C;  /* 7.00:1 AA */
  --ap-text-muted: #526B58;  /* 4.65:1 AA, zero zapasu */

  /* --- akcenty --- */
  --ap-green:       #14532D; /* 7.27:1 */
  --ap-green-hover: #0E3D22;
  --ap-on-green:    #FFFFFF; /* na zieleni 9.11:1 */

  --ap-gold:      #C79A2E;   /* ZLOTO jako wypelnienie, wymaga obwodki */
  --ap-gold-ink:  #86560F;   /* ZLOTO jako tusz, 5.00:1 */
  --ap-on-gold:   #0E2A17;   /* 5.94:1 */

  --ap-yellow:      #FFD400; /* ZOLC tylko wypelnienie, 1.14:1 jako tusz = niewidoczna */
  --ap-on-yellow:   #0E2A17; /* 10.77:1 */
  --ap-yellow-ring: #14532D; /* obowiazkowa obwodka bloku zoltego */

  --ap-success: #146B33;
  --ap-warning: #9C4A00;
  --ap-danger:  #A31C13;
  --ap-live:    #C8102E;
  --ap-on-live: #FFFFFF;

  /* --- bloki odwrocone (hero, tablica wynikow) --- */
  --ap-inv-bg:      #0E3D22;
  --ap-inv-bg-deep: #092A16;
  --ap-inv-line:    #2A6238;
  --ap-inv-text:    #EAF5D9;   /* 10.86:1 */
  --ap-inv-text-2:  #A8C98D;   /* 6.67:1 */
  --ap-inv-muted:   #8FB878;   /* 5.44:1 */
  --ap-inv-yellow:  #FFD400;   /* 8.58:1 — TU zolc jest tuszem */
  --ap-inv-gold:    #E3C25C;   /* 7.10:1 */
  --ap-inv-live:    #FF4757;

  /* ============================================================
     Mostek zgodnosci: biblioteka odziedziczona (2233 linie)
     uzywa starych nazw. Mapujemy je na palete jasna,
     zeby nie przepisywac dzialajacych komponentow.
     ============================================================ */
  --bg-deep:      var(--ap-bg-page);
  --bg-surface:   var(--ap-bg-card);
  --bg-elevated:  var(--ap-bg-raised);
  --bg-line:      var(--ap-line-strong);
  --bg-line-soft: var(--ap-line);

  --text-primary:   var(--ap-text);
  --text-secondary: var(--ap-text-2);
  --text-muted:     var(--ap-text-muted);
  --text-faint:     #7C9A82;

  --accent-gold:      var(--ap-gold-ink);   /* tusz — bezpieczny na jasnym */
  --accent-gold-soft: rgba(199, 154, 46, 0.20);
  --accent-lime:      var(--ap-gold-ink);
  --accent-lime-soft: rgba(255, 212, 0, 0.28);
  --accent-turf:      var(--ap-success);
  --accent-turf-soft: rgba(20, 107, 51, 0.14);
  --accent-live:      var(--ap-live);
  --accent-live-soft: rgba(200, 16, 46, 0.12);
  --accent-success:   var(--ap-success);
  --accent-electric:  var(--ap-green);
  --accent-junior:    var(--ap-gold-ink);
  --accent-coach:     var(--ap-gold-ink);
  --accent-fan:       var(--ap-success);
  --accent-gold-deep: var(--ap-gold-ink);

  --ff-display: 'Archivo', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;

  --container-w: 1320px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* Typografia sportowa: naglowki szerokie i ciasno zlozone,
   liczby zawsze tabelaryczne — tablica wynikow ma sie nie chwiac. */
h1, h2, h3, h4, .brand__type, .eyebrow, .btn {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.015em;
}
h1, h2 { font-weight: 800; text-transform: uppercase; }
h1 { font-variation-settings: 'wdth' 118; letter-spacing: -0.02em; }
.eyebrow { font-variation-settings: 'wdth' 100; letter-spacing: 0.14em; }
.score, .num, td.num, .stat__value, .table td:last-child {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ap-bg-page); -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--ff-body);
  color: var(--ap-text);
  background: var(--ap-bg-page);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

body::before { content: none; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}

.mono { font-family: var(--ff-mono); font-feature-settings: 'tnum' 1; }
.muted { color: var(--text-muted); }
.dim { color: var(--text-secondary); }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

/* ==================== TOP NAV ==================== */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(236, 245, 223, 0.88);
  border-bottom: 1px solid var(--bg-line-soft);
}

.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-primary);
}

.brand__mark {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  position: relative;
}
.brand__mark svg { width: 100%; height: 100%; display: block; }

.brand__type {
  display: inline-flex;
  align-items: baseline;
}
.brand__type b {
  font-weight: 800;
  letter-spacing: -0.045em;
}
.brand__type i {
  font-style: normal;
  font-weight: 800;
  color: var(--accent-gold);
  letter-spacing: -0.045em;
}
.brand:hover .brand__mark svg .clay-shard {
  transform: translate(2px, -1px) rotate(8deg);
}
.brand__mark svg .clay-shard {
  transform-origin: 70% 30%;
  transition: transform 0.3s ease;
}

.brand__dot {
  width: 6px; height: 6px;
  background: var(--accent-live);
  border-radius: 50%;
  display: inline-block;
  margin-left: -4px;
  vertical-align: super;
}

.nav__list {
  display: flex;
  gap: 4px;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  transition: all 0.18s ease;
}

.nav__link:hover { color: var(--text-primary); background: var(--bg-line-soft); }

.nav__link.is-active {
  color: var(--bg-deep);
  background: var(--text-primary);
}

.nav__link .dot { width: 6px; height: 6px; border-radius: 50%; }
.nav__link.is-zawodnik .dot { background: var(--accent-gold); }
.nav__link.is-klub .dot      { background: var(--accent-electric); }
.nav__link.is-liga .dot      { background: var(--accent-live); }
.nav__link.is-trener .dot    { background: var(--accent-coach); }
.nav__link.is-fan .dot       { background: var(--accent-fan); }

.topnav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.iconbtn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border: 1px solid var(--bg-line-soft);
  transition: all 0.18s ease;
}
.iconbtn:hover { color: var(--text-primary); border-color: var(--bg-line); background: var(--bg-line-soft); }

.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-electric), var(--accent-coach));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
}

/* ==================== PAGE TICKER ==================== */
.ticker {
  border-bottom: 1px solid var(--bg-line-soft);
  background: linear-gradient(90deg, transparent, rgba(110, 164, 255, 0.04), transparent);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  overflow: hidden;
}

.ticker__inner {
  display: flex;
  gap: 56px;
  padding: 10px 0;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
}
.ticker__item .live { color: var(--accent-live); }
.ticker__item .gold { color: var(--accent-gold); }
.ticker__item .pos  { color: var(--accent-success); }
.ticker__item .neg  { color: var(--accent-live); }

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==================== HERO / HEADER ==================== */
.profile-hero {
  position: relative;
  padding: 56px 0 24px;
}

.profile-hero__grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: end;
}

.profile-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));
  box-shadow:
    0 1px 0 rgba(14, 42, 23, 0.06) inset,
    0 30px 80px -20px rgba(14, 42, 23, 0.14);
  isolation: isolate;
}

.profile-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(5, 13, 34, 0.92) 100%);
  z-index: 1;
}

.profile-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(0.85) brightness(0.92);
}
.profile-portrait img[src$=".svg"] {
  object-fit: contain;
  padding: 8%;
  filter: drop-shadow(0 8px 28px rgba(14, 42, 23, 0.14));
}

.profile-portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(14, 61, 34, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

.profile-portrait__corner {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(5, 13, 34, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(14, 42, 23, 0.06);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.profile-portrait__corner .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 0 0 var(--accent-live);
  animation: pulseDot 1.6s ease-out infinite;
}

@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7); }
  100% { box-shadow: 0 0 0 12px rgba(255, 71, 87, 0); }
}

.profile-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 8px;
}

.profile-meta__top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.flag__emoji { font-size: 16px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--ff-mono);
}
.tag--gold     { background: var(--accent-gold-soft); color: var(--accent-gold); border: 1px solid rgba(245,185,66,0.3); }
.tag--junior   { background: rgba(182, 245, 90, 0.12); color: var(--accent-junior); border: 1px solid rgba(182, 245, 90, 0.3); }
.tag--senior   { background: rgba(245, 185, 66, 0.12); color: var(--accent-gold); border: 1px solid rgba(245, 185, 66, 0.3); }
.tag--live     { background: var(--accent-live-soft); color: var(--accent-live); border: 1px solid rgba(255, 71, 87, 0.3); }
.tag--electric { background: rgba(110, 164, 255, 0.12); color: var(--accent-electric); border: 1px solid rgba(110, 164, 255, 0.3); }
.tag--coach    { background: rgba(192, 132, 252, 0.12); color: var(--accent-coach); border: 1px solid rgba(192, 132, 252, 0.3); }
.tag--fan      { background: rgba(56, 189, 248, 0.12); color: var(--accent-fan); border: 1px solid rgba(56, 189, 248, 0.3); }
.tag--mute     { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--bg-line-soft); }

.profile-name {
  font-size: clamp(56px, 8vw, 116px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.profile-name__last {
  display: block;
  background: linear-gradient(180deg, var(--text-primary) 0%, var(--accent-electric) 140%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.profile-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  font-size: 14px;
  color: var(--text-secondary);
}

.profile-sub__item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-sub__item strong { color: var(--text-primary); font-weight: 600; }

.profile-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--text-primary);
  color: var(--bg-deep);
}
.btn--primary:hover { background: var(--accent-gold); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--bg-line);
}
.btn--secondary:hover { background: var(--bg-line-soft); border-color: var(--text-secondary); }

.btn--gold {
  background: var(--accent-gold);
  color: var(--bg-deep);
}
.btn--gold:hover { filter: brightness(1.08); }

.btn--ghost {
  color: var(--text-secondary);
  padding: 10px 14px;
}
.btn--ghost:hover { color: var(--text-primary); background: var(--bg-line-soft); }

/* ==================== KPI BAND ==================== */
.kpi-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 40px;
  background: var(--bg-line-soft);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.kpi {
  background: var(--bg-surface);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.kpi__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.kpi__value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.04em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kpi__value sup { font-size: 18px; color: var(--text-muted); font-weight: 500; }
.kpi__value .unit { font-size: 14px; color: var(--text-muted); font-weight: 500; letter-spacing: 0; }

.kpi__sub {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi__delta { font-family: var(--ff-mono); font-weight: 600; }
.kpi__delta.up   { color: var(--accent-success); }
.kpi__delta.down { color: var(--accent-live); }

.kpi--accent .kpi__value { color: var(--accent-gold); }

/* Ring chart in KPI */
.kpi__ring {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 72px;
}

.ring-svg { transform: rotate(-90deg); }
.ring-track { stroke: var(--bg-line); fill: none; }
.ring-fill { stroke: var(--accent-gold); fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.ring-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-weight: 600; font-size: 12px;
}

/* ==================== TABS ==================== */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--bg-line-soft);
  margin: 48px 0 32px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  padding: 14px 22px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tab:hover { color: var(--text-secondary); }
.tab.is-active {
  color: var(--text-primary);
}
.tab.is-active::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: -1px;
  height: 2px;
  background: var(--accent-gold);
  border-radius: 2px;
}
.tab__count {
  font-family: var(--ff-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--text-muted);
}
.tab.is-active .tab__count { background: var(--accent-gold-soft); color: var(--accent-gold); }

/* ==================== SECTIONS / CARDS ==================== */
.section {
  margin: 48px 0;
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 20px;
  gap: 16px;
}

.section__title {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.section__title .accent-bar {
  width: 28px;
  height: 3px;
  background: var(--accent-gold);
  display: inline-block;
  border-radius: 2px;
  transform: translateY(-4px);
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  padding: 22px;
  position: relative;
  transition: all 0.18s ease;
}
.card:hover {
  border-color: var(--bg-line);
  background: var(--bg-elevated);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-main-aside { display: grid; grid-template-columns: 1fr 360px; gap: 32px; }

/* ==================== AWARDS ==================== */
.medal-rack {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.medal {
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.18s ease;
}
.medal:hover {
  transform: translateY(-3px);
  border-color: var(--bg-line);
}

.medal__ribbon {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-lime));
}
.medal--silver .medal__ribbon { background: linear-gradient(90deg, #cbd5e1, #f1f5f9); }
.medal--bronze .medal__ribbon { background: linear-gradient(90deg, #c2410c, #fdba74); }

.medal__icon {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 20px;
  background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-deep) 100%);
  color: #2a1c00;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(14, 42, 23, 0.16);
}
.medal--silver .medal__icon { background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%); color: #1e293b; }
.medal--bronze .medal__icon { background: linear-gradient(135deg, #fdba74 0%, #9a3412 100%); color: #2a1300; }

.medal__year { font-family: var(--ff-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; }
.medal__event { font-size: 13px; font-weight: 700; margin-top: 4px; line-height: 1.2; }
.medal__discipline { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }

/* ==================== RESULTS LIST ==================== */
.results {
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.result-row {
  display: grid;
  grid-template-columns: 90px 1fr 110px 100px 70px;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--bg-line-soft);
  transition: background 0.15s ease;
}
.result-row:last-child { border-bottom: none; }
.result-row:hover { background: var(--bg-elevated); }

.result-row__date {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.result-row__event {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
}
.result-row__event small {
  display: block;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  margin-top: 2px;
}

.result-row__discipline {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.result-row__score {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.result-row__score .total { color: var(--text-muted); font-weight: 500; font-size: 13px; }

.result-row__pos {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 28px;
  text-align: right;
  letter-spacing: -0.03em;
  line-height: 1;
}
.result-row__pos.gold   { color: var(--accent-gold); }
.result-row__pos.silver { color: #cbd5e1; }
.result-row__pos.bronze { color: #fdba74; }

/* ==================== STAT CHART ==================== */
.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  padding: 24px;
}

.chart-card__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 24px;
}

.chart-card__title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.chart-card__sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.toggle-group {
  display: inline-flex;
  background: var(--bg-deep);
  border: 1px solid var(--bg-line-soft);
  border-radius: 999px;
  padding: 3px;
}
.toggle {
  padding: 6px 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 999px;
  transition: all 0.18s ease;
}
.toggle.is-active { background: var(--text-primary); color: var(--bg-deep); }

.chart {
  width: 100%;
  height: 260px;
}

/* ==================== SUPPORT / SPONSOR ==================== */
.support-card {
  background: linear-gradient(135deg, rgba(245, 185, 66, 0.12), rgba(110, 164, 255, 0.08));
  border: 1px solid rgba(245, 185, 66, 0.25);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.support-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 80% 10%, rgba(245, 185, 66, 0.18), transparent);
  pointer-events: none;
}

.support-card__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.support-card__title {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}

.support-card__progress {
  margin: 24px 0;
  position: relative;
  z-index: 1;
}

.progress-track {
  height: 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-lime));
  border-radius: 999px;
  position: relative;
}
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 8px; height: 100%;
  background: var(--ap-text-2);
  filter: blur(2px);
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--ff-mono);
  font-size: 12px;
}
.progress-meta strong { color: var(--accent-gold); font-weight: 700; font-size: 14px; }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}

.tier {
  background: rgba(5, 13, 34, 0.5);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.tier:hover {
  border-color: var(--accent-gold);
  background: rgba(5, 13, 34, 0.7);
  transform: translateY(-2px);
}

.tier__price {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
}
.tier__name {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-top: 4px;
}
.tier__sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.4;
}

/* Sponsor logos */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.sponsor-logo {
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  padding: 22px 12px;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 16px;
  color: var(--text-secondary);
  transition: all 0.18s ease;
}
.sponsor-logo:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--bg-line);
}

/* ==================== ATHLETE CARD ==================== */
.athlete-card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.18s ease;
  position: relative;
}
.athlete-card:hover {
  border-color: var(--bg-line);
  transform: translateY(-3px);
}

.athlete-card__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-line));
  position: relative;
  overflow: hidden;
}
.athlete-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.08) saturate(0.85) brightness(0.92);
}
.athlete-card__photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14, 61, 34, 0.92) 100%);
  z-index: 1;
}
.athlete-card__photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 13, 34, 0.95) 100%);
}

.athlete-card__rank {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
  padding: 4px 8px;
  background: rgba(5, 13, 34, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  letter-spacing: 0.05em;
  z-index: 2;
}
.athlete-card__rank.top { color: var(--accent-gold); }

.athlete-card__discipline {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--ff-mono);
  font-size: 10px;
  padding: 4px 8px;
  background: rgba(110, 164, 255, 0.18);
  border: 1px solid rgba(110, 164, 255, 0.3);
  color: var(--accent-electric);
  border-radius: 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 2;
}

.athlete-card__info {
  padding: 14px 16px 18px;
  position: relative;
  z-index: 1;
  margin-top: -50px;
}

.athlete-card__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.athlete-card__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ==================== FILTER BAR ==================== */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bg-line-soft);
}

.chip {
  padding: 7px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.18s ease;
  cursor: pointer;
}
.chip:hover { color: var(--text-primary); border-color: var(--bg-line); }
.chip.is-active {
  background: var(--text-primary);
  color: var(--bg-deep);
  border-color: var(--text-primary);
}
.chip__count {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  opacity: 0.7;
}

/* ==================== LIGA TABLE ==================== */
.league-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.league-table th {
  text-align: left;
  padding: 14px 18px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--bg-line-soft);
  background: rgba(0,0,0,0.15);
}
.league-table th.num, .league-table td.num { text-align: right; font-family: var(--ff-mono); }

.league-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--bg-line-soft);
  font-size: 14px;
  vertical-align: middle;
}
.league-table tbody tr:last-child td { border-bottom: none; }
.league-table tbody tr:hover { background: var(--bg-elevated); }

.league-table .pos {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  width: 60px;
}
.league-table .pos.p1 { color: var(--accent-gold); }
.league-table .pos.p2 { color: #cbd5e1; }
.league-table .pos.p3 { color: #fdba74; }

.club-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}
.club-logo {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-deep);
  border: 1px solid var(--bg-line);
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.club-cell strong {
  display: block;
  font-weight: 700;
  font-size: 14px;
}
.club-cell small {
  color: var(--text-muted);
  font-size: 11.5px;
  font-family: var(--ff-mono);
  letter-spacing: 0.05em;
}

.points {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--accent-gold);
}

.delta {
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 12px;
}
.delta.up   { color: var(--accent-success); }
.delta.down { color: var(--accent-live); }
.delta.flat { color: var(--text-muted); }

/* ==================== CALENDAR / SCHEDULE ==================== */
.schedule {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg-line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--bg-line-soft);
}

.schedule-row {
  display: grid;
  grid-template-columns: 100px 1fr 130px 110px;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--bg-surface);
  transition: background 0.15s ease;
}
.schedule-row:hover { background: var(--bg-elevated); }

.schedule-row__date {
  text-align: center;
  font-family: var(--ff-display);
}
.schedule-row__day { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.schedule-row__month { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }

.schedule-row__title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.schedule-row__venue { color: var(--text-muted); font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }

.schedule-row__discipline {
  font-family: var(--ff-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

/* ==================== HOME ==================== */
.home-hero {
  padding: 80px 0 40px;
  position: relative;
}

.home-hero__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(72px, 13vw, 200px);
  line-height: 0.84;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-wrap: balance;
}

.home-hero__title .accent {
  color: var(--accent-gold);
  font-style: italic;
  font-weight: 700;
  font-family: var(--ff-display);
}

.home-hero__sub {
  margin-top: 28px;
  max-width: 580px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.home-hero__cta {
  margin-top: 36px;
  display: flex;
  gap: 12px;
}

.home-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 64px;
  background: var(--bg-line-soft);
  border-top: 1px solid var(--bg-line-soft);
  border-bottom: 1px solid var(--bg-line-soft);
}

.home-stat {
  background: var(--bg-deep);
  padding: 28px 4px;
  text-align: center;
}
.home-stat strong {
  display: block;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 48px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.home-stat span {
  display: block;
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 64px 0;
}

.role-tile {
  position: relative;
  padding: 28px 22px 26px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.22s ease;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.role-tile:hover {
  transform: translateY(-4px);
  border-color: var(--bg-line);
  background: var(--bg-elevated);
}

.role-tile__num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.role-tile__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-top: 18px;
}

.role-tile__desc {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  flex: 1;
}

.role-tile__arrow {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.role-tile--zawodnik { border-top: 3px solid var(--accent-gold); }
.role-tile--klub     { border-top: 3px solid var(--accent-electric); }
.role-tile--liga     { border-top: 3px solid var(--accent-live); }
.role-tile--trener   { border-top: 3px solid var(--accent-coach); }
.role-tile--fan      { border-top: 3px solid var(--accent-fan); }

/* ==================== TRENER ==================== */
.coach-roster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.roster-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  transition: all 0.18s ease;
}
.roster-row:hover { border-color: var(--bg-line); background: var(--bg-elevated); }

.roster-row__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-line), var(--bg-elevated));
  overflow: hidden;
}
.roster-row__avatar img { width: 100%; height: 100%; object-fit: cover; }

.roster-row__name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.roster-row__meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

.roster-row__score {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  text-align: right;
}
.roster-row__score small {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.1em;
}

/* Training plan */
.plan {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--bg-line-soft);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.plan-day {
  background: var(--bg-surface);
  padding: 14px 12px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-day__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--ff-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bg-line-soft);
}
.plan-day__head strong {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 16px;
  letter-spacing: -0.02em;
}
.plan-day.today .plan-day__head strong { color: var(--accent-gold); }

.session {
  padding: 8px 10px;
  background: var(--bg-deep);
  border-radius: 6px;
  border-left: 3px solid var(--accent-electric);
  font-size: 12px;
}
.session.mecz { border-left-color: var(--accent-gold); }
.session.gym   { border-left-color: var(--accent-junior); }
.session.dry   { border-left-color: var(--accent-coach); }
.session strong { display: block; font-size: 12.5px; font-weight: 700; }
.session small { color: var(--text-muted); font-family: var(--ff-mono); font-size: 10px; }

/* ==================== FAN ==================== */
.live-strip {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.14), rgba(255, 71, 87, 0.04));
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}

.live-strip__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--accent-live);
  color: white;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 4px;
}
.live-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: white;
  animation: pulseDot 1.4s ease-out infinite;
}

.live-strip__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.live-scores {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.live-score {
  background: rgba(5, 13, 34, 0.6);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.live-score__series {
  font-family: var(--ff-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.live-score__val {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.04em;
  margin-top: 2px;
}
.live-score.current .live-score__val { color: var(--accent-live); }
.live-score.current .live-score__series { color: var(--accent-live); }

.feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feed-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  transition: all 0.18s ease;
}
.feed-item:hover { border-color: var(--bg-line); }

.feed-item__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-line));
  overflow: hidden;
  flex-shrink: 0;
}

.feed-item__head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.feed-item__head strong { color: var(--text-primary); font-weight: 700; font-size: 13px; }

.feed-item__body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.feed-item__body strong { color: var(--text-primary); font-weight: 700; }
.feed-item__body .score-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 2px;
  background: var(--bg-deep);
  border: 1px solid var(--bg-line);
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--accent-gold);
}

.feed-item__icon {
  margin-right: 6px;
  display: inline-block;
  width: 18px; height: 18px;
  vertical-align: middle;
  color: var(--accent-electric);
}

/* ==================== UTILS ==================== */
.divider { height: 1px; background: var(--bg-line-soft); margin: 32px 0; }

.center { display: flex; align-items: center; justify-content: center; }

footer {
  margin-top: 80px;
  padding: 36px 0;
  border-top: 1px solid var(--bg-line-soft);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* ==================== MOBILE BOTTOM NAV ==================== */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px;
  right: 12px;
  z-index: 60;
  background: rgba(247, 251, 240, 0.94);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--bg-line);
  border-radius: 22px;
  padding: 6px;
  box-shadow:
    0 -1px 0 rgba(245, 211, 66, 0.06) inset,
    0 22px 60px -14px rgba(14, 42, 23, 0.14);
}
.bottom-nav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  gap: 2px;
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9px 2px 8px;
  border-radius: 16px;
  gap: 5px;
  color: var(--text-muted);
  transition: all 0.18s ease;
  min-height: 50px;
  position: relative;
  overflow: hidden;
}
.bottom-nav a:active { transform: scale(0.95); }
.bottom-nav a .bn-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.bottom-nav a span {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
}
.bottom-nav a.is-active {
  color: var(--text-primary);
  background: linear-gradient(180deg, rgba(245, 211, 66, 0.04), rgba(44, 82, 64, 0.6));
}
.bottom-nav a.is-active::before {
  content: '';
  position: absolute;
  top: 0; left: 28%; right: 28%;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: var(--bn-accent, var(--accent-gold));
  box-shadow: 0 0 8px var(--bn-accent, var(--accent-gold));
}
.bottom-nav a.is-liga.is-active     { --bn-accent: var(--accent-live); }
.bottom-nav a.is-klub.is-active     { --bn-accent: var(--accent-electric); }
.bottom-nav a.is-zawodnik.is-active { --bn-accent: var(--accent-gold); }
.bottom-nav a.is-trener.is-active   { --bn-accent: var(--accent-coach); }
.bottom-nav a.is-fan.is-active      { --bn-accent: var(--accent-fan); }
.bottom-nav a.is-active .bn-dot {
  opacity: 1;
  background: var(--bn-accent);
  box-shadow: 0 0 10px var(--bn-accent), 0 0 4px var(--bn-accent);
  transform: scale(1.4);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1280px) {
  .profile-hero__grid { gap: 36px; }
  .grid-main-aside { gap: 24px; }
}

@media (max-width: 1100px) {
  /* Profile hero: portrait above text, much smaller */
  .profile-hero { padding: 40px 0 16px; }
  .profile-hero__grid {
    grid-template-columns: 220px 1fr !important;
    gap: 24px;
    align-items: center !important;
  }
  .profile-portrait {
    max-width: 220px;
    aspect-ratio: 3/4;
  }
  /* Klub & trener overrides: 1:1 keeps for logo/round card */
  .profile-portrait[style*="aspect-ratio: 1"] {
    aspect-ratio: 1 !important;
    max-width: 200px;
  }
  /* Inner SVG (KS Jura logo) auto-fit */
  .profile-portrait svg[width="180"] {
    width: 75%;
    height: auto;
  }

  .grid-main-aside { grid-template-columns: 1fr; }
  .home-hero__stats, .role-grid, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .kpi-band { grid-template-columns: 1fr 1fr; }
  .medal-rack { grid-template-columns: repeat(3, 1fr); }
  .sponsor-grid { grid-template-columns: repeat(3, 1fr); }
  .coach-roster { grid-template-columns: 1fr; }
  .plan { grid-template-columns: repeat(2, 1fr); }
  .nav__list { display: none; }
  .bottom-nav { display: block; }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  main > section[style*="grid-template-columns: 1.6fr 1fr 1fr"],
  main > section[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 880px) {
  .profile-hero__grid {
    grid-template-columns: 140px 1fr !important;
    gap: 18px;
  }
  .profile-portrait { max-width: 140px; }
  .profile-portrait[style*="aspect-ratio: 1"] { max-width: 130px; }
  .profile-name { font-size: clamp(36px, 8vw, 60px) !important; }
  .profile-portrait__corner {
    top: 8px; right: 8px;
    padding: 4px 8px;
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .profile-meta__top { gap: 6px; }
  .profile-meta__top .tag { font-size: 9.5px; padding: 3px 7px; }
  .flag { font-size: 11px; padding: 4px 8px; }
}

@media (max-width: 760px) {
  .container { padding: 0 16px; }

  .topnav__inner { height: 60px; gap: 12px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand__mark { width: 26px; height: 26px; }
  .topnav__actions .iconbtn { width: 34px; height: 34px; }
  .topnav__actions .avatar { width: 34px; height: 34px; font-size: 12px; }
  .topnav__actions .btn { padding: 7px 12px; font-size: 11.5px; }

  .ticker__inner { gap: 36px; padding: 8px 0; font-size: 10.5px; }

  .profile-hero { padding: 32px 0 16px; }
  .profile-meta { gap: 14px; padding-bottom: 0; }
  .profile-meta__top { gap: 8px; }
  .profile-meta__top .tag { font-size: 10px; padding: 4px 9px; }
  .flag { font-size: 11px; padding: 5px 10px; }

  .profile-name { font-size: clamp(46px, 14vw, 72px) !important; }
  .home-hero__title { font-size: clamp(54px, 16vw, 80px); }

  .profile-sub { gap: 14px; font-size: 13px; flex-wrap: wrap; }
  .profile-sub__item { gap: 6px; }

  .profile-actions { flex-wrap: wrap; gap: 8px; }
  .btn { padding: 10px 16px; font-size: 12.5px; }

  /* KPI - 2x2 instead of 1col */
  .kpi-band { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .kpi { padding: 18px 16px; }
  .kpi__value { font-size: 32px; }
  .kpi__ring { width: 54px; height: 54px; right: 14px; }
  .kpi__ring svg { width: 54px; height: 54px; }

  /* Tabs - hide scrollbar, smaller */
  .tabs { margin: 28px -16px 22px; padding: 0 16px; }
  .tab { padding: 12px 14px 14px; font-size: 13px; }
  .tab__count { font-size: 10px; padding: 1px 5px; }

  /* Sections more compact */
  .section { margin: 32px 0; }
  .section__title { font-size: 18px; }
  .section__head { margin-bottom: 14px; }

  /* Medals smaller */
  .medal-rack { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .medal { padding: 16px 12px; }
  .medal__icon { width: 44px; height: 44px; font-size: 16px; margin-bottom: 8px; }
  .medal__event { font-size: 12px; }

  /* Sponsors */
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sponsor-logo { padding: 16px 8px; font-size: 13px; }

  /* Live strip */
  .live-strip { grid-template-columns: 1fr; padding: 18px; gap: 16px; }
  .live-strip__title { font-size: 20px; }
  .live-scores { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .live-score { padding: 8px 6px; }
  .live-score__val { font-size: 20px; }
  .live-score__series { font-size: 9px; letter-spacing: 0.1em; }

  /* Result rows: stack content, hide some columns */
  .result-row {
    grid-template-columns: 1fr auto !important;
    gap: 8px;
    padding: 14px 16px;
  }
  .result-row__date { grid-column: 1; font-size: 11px; }
  .result-row__event { grid-column: 1 / -1; order: 2; }
  .result-row__discipline { grid-column: 1; order: 3; font-size: 10px; padding-top: 4px; }
  .result-row__score { grid-column: 2; order: 4; align-self: end; font-size: 16px; }
  .result-row__pos { grid-column: 2; grid-row: 1; align-self: start; font-size: 22px; }

  /* Schedule rows */
  .schedule-row {
    grid-template-columns: 60px 1fr !important;
    padding: 14px 16px;
    gap: 14px;
  }
  .schedule-row > *:nth-child(n+3) { grid-column: 2; padding-top: 4px; }
  .schedule-row__day { font-size: 24px; }
  .schedule-row__title { font-size: 14px; }
  .schedule-row__venue { font-size: 11px; }

  /* League table - card-like rows on mobile */
  .league-table { font-size: 12px; }
  .league-table th, .league-table td { padding: 10px 8px; }
  .league-table th:nth-child(n+4):nth-child(-n+8),
  .league-table td:nth-child(n+4):nth-child(-n+8),
  .league-table th:nth-child(3),
  .league-table td:nth-child(3) { display: none; }
  .league-table .pos { font-size: 16px; width: auto; }
  .points { font-size: 18px; }
  .club-cell { gap: 10px; }
  .club-logo { width: 30px; height: 30px; font-size: 10px; }

  /* Filter chips - horizontal scroll */
  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; flex-shrink: 0; font-size: 11.5px; padding: 6px 12px; }

  /* Athlete cards: 2 col */
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .athlete-card__name { font-size: 15px; }
  .athlete-card__rank { font-size: 9.5px; padding: 3px 6px; }
  .athlete-card__discipline { font-size: 9px; padding: 3px 6px; }

  /* Plan grid - vertical days on mobile */
  .plan { grid-template-columns: 1fr; }
  .plan-day { min-height: auto; }

  /* Roster */
  .coach-roster { grid-template-columns: 1fr; }
  .roster-row { padding: 12px 14px; gap: 12px; grid-template-columns: 44px 1fr auto; }
  .roster-row__avatar { width: 40px; height: 40px; }
  .roster-row__score { font-size: 16px; }

  /* Newsroom mobile */
  .feed-item { grid-template-columns: 40px 1fr; padding: 14px; gap: 12px; }
  .feed-item__avatar { width: 40px; height: 40px; }
  .feed-item__head { font-size: 11px; flex-wrap: wrap; gap: 4px; }
  .feed-item__head strong { font-size: 12.5px; }
  .feed-item__body { font-size: 13px; }

  /* Single col 2-col internal grids */
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 10px; }

  /* Newsroom top strip */
  main > div[style*="display:flex;justify-content:space-between"][style*="align-items:baseline"] {
    flex-direction: column;
    align-items: start !important;
    gap: 10px !important;
  }

  /* Support card */
  .support-card { padding: 22px 18px; }
  .support-card__title { font-size: 22px; }
  .tier-grid { grid-template-columns: 1fr; gap: 8px; }

  /* Profile hero portrait smaller */
  .profile-portrait { max-width: 100%; aspect-ratio: 4/5; }

  footer { font-size: 10px; padding: 24px 0; flex-direction: column; align-items: start; }
}

@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .home-hero__title, .profile-name { font-size: 44px !important; }
  .kpi__value { font-size: 26px; }
  .live-scores { grid-template-columns: repeat(3, 1fr); }
  .live-score:nth-child(n+4) { display: none; }
  .league-table th:nth-child(n+9), .league-table td:nth-child(n+9) { display: none; }
  .live-strip { padding: 16px 14px; }
}

/* Reduce motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .ticker__inner { animation: none; }
}

/* ========================================================== */
/* Integracja federacji FIP i PZP — federation accent utilities            */
/* ========================================================== */

.fed-fip   { --fed-accent: var(--accent-gold); }   /* gold — FIP (miedzynarodowa) */
.fed-pzp { --fed-accent: var(--accent-turf); }   /* mint — PZP (krajowa) */

/* Chip oznaczający federację (np. obok nazwy zawodów) */
.fed-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--fed-accent);
  border-radius: 999px;
  color: var(--fed-accent);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  background: transparent;
}

/* Tab bar wykorzystujący kolor federacji w underline */
.tabs-fed {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid rgba(14, 42, 23, 0.06);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.tabs-fed [role="tab"] {
  padding: 12px 4px;
  border: 0;
  background: transparent;
  border-bottom: 3px solid transparent;
  color: var(--ap-text-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.tabs-fed [role="tab"]:hover { color: var(--ap-text-2); }
.tabs-fed [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--fed-accent, var(--accent-gold));
  color: #fff;
}
.tabs-fed [role="tab"][aria-selected="true"].fed-fip   { border-bottom-color: var(--accent-gold); }
.tabs-fed [role="tab"][aria-selected="true"].fed-pzp { border-bottom-color: var(--accent-turf); }

/* Tab panel — pokazywany tylko gdy aktywny */
.tabpanel-fed[hidden] { display: none; }

/* Karta z border-left wskazującym federację */
.card-fed {
  border-left: 3px solid var(--fed-accent);
  padding: 14px 18px;
  background: rgba(14, 42, 23, 0.06);
  border-radius: 0 8px 8px 0;
  margin-bottom: 12px;
}

/* Filtr federacji (chipy klikalne) — np. na liga.html */
.fed-filter {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.fed-filter button {
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(14, 42, 23, 0.10);
  color: var(--ap-text-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.fed-filter button[aria-pressed="true"] {
  background: var(--fed-accent, var(--accent-gold));
  color: var(--bg-deep);
  border-color: transparent;
  font-weight: 600;
}
.fed-filter button.fed-fip[aria-pressed="true"]   { background: var(--accent-gold); }
.fed-filter button.fed-pzp[aria-pressed="true"] { background: var(--accent-turf); }
.fed-filter button[data-fed-filter="all"][aria-pressed="true"] {
  background: rgba(14, 42, 23, 0.10);
  color: #fff;
}

/* Mała notka "do weryfikacji" obok niepewnych liczb */
.verify-note {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--ap-text-2);
  border: 1px dashed rgba(14, 42, 23, 0.16);
  border-radius: 4px;
  text-transform: uppercase;
}

/* Tabela porównawcza dyscyplin (responsive) */
.disc-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 8px 0 16px;
}
.disc-compare th, .disc-compare td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(14, 42, 23, 0.06);
  vertical-align: top;
}
.disc-compare thead th {
  color: var(--ap-text-2);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.disc-compare tbody td:first-child {
  color: var(--ap-text-2);
  font-size: 12px;
}

/* ========================================================== */
/* Global toast notifications (scripts/toasts.js)              */
/* ========================================================== */
.b-toast-root {
  position: fixed;
  bottom: 84px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.b-toast {
  pointer-events: auto;
  background: rgba(247, 251, 240, 0.96);
  border: 1px solid rgba(14, 42, 23, 0.10);
  border-left: 3px solid var(--accent-turf);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  max-width: 360px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.b-toast.is-shown { opacity: 1; transform: translateY(0); }
.b-toast--success { border-left-color: var(--accent-turf); }
.b-toast--error   { border-left-color: #ef4444; }
.b-toast--info    { border-left-color: var(--accent-gold); }
@media (max-width: 760px) {
  .b-toast-root { right: 12px; left: 12px; bottom: 80px; }
  .b-toast { max-width: none; }
}

/* ========================================================== */
/* Sparkline (mini bar chart inline)                            */
/* ========================================================== */
.b-sparkline {
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--accent-turf);
  cursor: help;
}

/* ========================================================== */
/* Cookie consent banner (scripts/cookie-banner.js)            */
/* ========================================================== */
#b-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 100px;
  z-index: 999;
  background: rgba(247, 251, 240, 0.97);
  border: 1px solid rgba(14, 42, 23, 0.10);
  border-left: 3px solid var(--accent-turf);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 12px 32px rgba(14, 42, 23, 0.14);
}
#b-cookie-banner.is-shown { opacity: 1; transform: translateY(0); }
#b-cookie-banner .b-cookie-text {
  font-size: 13px;
  color: var(--ap-text-2);
  flex: 1 1 280px;
  line-height: 1.5;
}
#b-cookie-banner .b-cookie-text a { color: var(--accent-turf); }
#b-cookie-banner .b-cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
#b-cookie-banner button {
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(14, 42, 23, 0.10);
  color: var(--ap-text-2);
  font-size: 13px;
  cursor: pointer;
}
#b-cookie-banner button.primary {
  background: var(--accent-turf);
  color: var(--bg-deep);
  border-color: transparent;
  font-weight: 600;
}
@media (max-width: 760px) {
  #b-cookie-banner { bottom: 90px; flex-direction: column; align-items: stretch; }
  #b-cookie-banner .b-cookie-actions { justify-content: stretch; }
  #b-cookie-banner .b-cookie-actions button { flex: 1; }
}

/* ========================================================== */
/* Modal — donation (scripts/modal-donation.js)                 */
/* ========================================================== */
#b-modal-donation { position: fixed; inset: 0; z-index: 1100; pointer-events: none; display: none; }
#b-modal-donation.is-open { display: block; pointer-events: auto; }
#b-modal-donation .b-modal-backdrop { position: absolute; inset: 0; background: rgba(14, 42, 23, 0.14); animation: bfade 0.2s; }
#b-modal-donation .b-modal-panel {
  position: relative;
  margin: 5vh auto;
  max-width: 520px;
  background: var(--bg-deep);
  border: 1px solid rgba(109,214,173,0.3);
  border-radius: 16px;
  padding: 28px 24px 24px;
  color: #fff;
  box-shadow: 0 24px 80px rgba(14, 42, 23, 0.14);
  max-height: 90vh;
  overflow-y: auto;
}
#b-modal-donation .b-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  font-size: 28px;
  color: var(--ap-text-2);
  cursor: pointer;
  line-height: 1;
  padding: 4px 10px;
}
#b-modal-donation h2 { margin: 0 0 16px; font-size: 24px; }
#b-modal-donation h3 { margin: 0 0 12px; font-size: 18px; }
#b-modal-donation .b-modal-step label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--ap-text-2); }
#b-modal-donation input[type="text"],
#b-modal-donation input[type="email"],
#b-modal-donation input[type="tel"],
#b-modal-donation input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  background: rgba(14, 42, 23, 0.06);
  border: 1px solid rgba(14, 42, 23, 0.10);
  border-radius: 8px;
  color: #fff;
  margin-top: 4px;
  margin-bottom: 8px;
  font-size: 14px;
}
#b-modal-donation .b-amount-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0; }
#b-modal-donation .b-amount-grid button {
  padding: 10px 0;
  background: rgba(109,214,173,0.08);
  border: 1px solid rgba(109,214,173,0.3);
  color: var(--accent-turf);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
#b-modal-donation .b-amount-grid button:hover { background: rgba(109,214,173,0.15); }
#b-modal-donation .b-checkbox { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 12px; color: var(--ap-text-2); }
#b-modal-donation .b-checkbox a { color: var(--accent-turf); }
#b-modal-donation .b-modal-hint { font-size: 12px; color: var(--ap-text-2); margin: 0 0 12px; }
#b-modal-donation .b-modal-actions { display: flex; gap: 8px; margin-top: 16px; }
#b-modal-donation .b-modal-actions .btn { flex: 1; justify-content: center; }
#b-modal-donation .b-summary {
  background: rgba(109,214,173,0.08);
  border-left: 3px solid var(--accent-turf);
  padding: 16px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}
@keyframes bfade { from { opacity: 0 } to { opacity: 1 } }

/* ============================================================
   AlfaPadel — dodatki ponad biblioteke odziedziczona z Shootinga
   ============================================================ */

/* Baner prototypu — jawne oddzielenie zrodla od wypelniacza */
.proto-banner {
  border: 1px solid var(--accent-gold);
  border-left-width: 3px;
  background: var(--accent-gold-soft);
  color: var(--text-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 16px;
  margin: 18px 0 6px;
  font-size: 13px;
  line-height: 1.5;
}
.proto-banner strong { color: var(--text-primary); }
.proto-banner a { color: var(--accent-gold); }

/* Tablica wynikow — rdzen jezyka wizualnego ligi */
.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 18px;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.scoreboard + .scoreboard { margin-top: 10px; }
.scoreboard__pair { display: flex; flex-direction: column; gap: 4px; }
.scoreboard__names { font-weight: 650; font-size: 14.5px; }
.scoreboard__meta { font-size: 11.5px; color: var(--text-muted); font-family: var(--ff-mono); letter-spacing: .04em; }
.scoreboard__sets { display: flex; gap: 8px; }
.set-box {
  min-width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--bg-line-soft);
  font-family: var(--ff-mono);
  font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.set-box.is-won { background: var(--accent-lime); color: #08210F; border-color: var(--accent-lime); }
.set-box.is-tb  { position: relative; }
.set-box.is-tb sup { position: absolute; top: 2px; right: 4px; font-size: 9px; color: var(--accent-gold); }

/* Znacznik formatu — Advantage / Star Point / Golden Point */
.fmt {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--bg-line);
  color: var(--text-secondary);
}
.fmt--star   { border-color: var(--accent-gold); color: var(--accent-gold); }
.fmt--golden { border-color: var(--accent-lime); color: var(--accent-lime); }
.fmt--adv    { border-color: var(--bg-line); color: var(--text-muted); }

/* Diagram kortu — wymiary wprost z rulebooka FIP */
.court {
  position: relative;
  aspect-ratio: 10 / 20;
  width: min(260px, 46vw);
  flex: 0 0 auto;
  background: var(--bg-elevated);
  border: 2px solid var(--accent-turf);
  border-radius: 4px;
}
.court__net {
  position: absolute; left: -2px; right: -2px; top: 50%;
  height: 2px; background: var(--text-primary); opacity: .85;
}
.court__serve {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed var(--accent-lime); opacity: .8;
}
.court__serve--a { top: 15.25%; }   /* 6,95 m od siatki na polowie 10 m */
.court__serve--b { bottom: 15.25%; }
.court__center {
  position: absolute; left: 50%; width: 1px;
  background: var(--accent-lime); opacity: .8;
}
/* Linia srodkowa dzieli WYLACZNIE pole miedzy siatka a linia serwisowa
   (FIP: przedluzona o 20 cm poza linie serwisowa) — nie siega tylnej sciany.
   Linia serwisowa: 6,95 m od siatki => 15,25% dlugosci kortu od konca.
   Odcinek srodkowy: 6,95 m + 0,20 m = 35,75% dlugosci kortu. */
.court__center--a { top: 15.25%; height: 35.75%; }
.court__center--b { bottom: 15.25%; height: 35.75%; }
.court__dim {
  position: absolute; font-family: var(--ff-mono); font-size: 10px;
  color: var(--text-muted); letter-spacing: .04em;
}

/* Karta reguly */
.rule-card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-line-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.rule-card__no {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--accent-gold); text-transform: uppercase;
}
.rule-card h3 { font-size: 16px; margin: 6px 0 8px; text-transform: none; }
.rule-card p  { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.rule-card cite {
  display: block; margin-top: 10px; font-style: normal;
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--text-faint);
}

@media (max-width: 720px) {
  .scoreboard { grid-template-columns: 1fr; }
  .court { max-width: 200px; }
}

/* Siatka kart 3-kolumnowa, zwijana na waskim ekranie.
   Zastepuje inline grid-template-columns, ktory nie mial punktu zalamania. */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } }

/* ============================================================
   WARSTWA UKLADU — bloki, rytm, zlamania siatki
   Regula anty-kwadratowosci: dwie sasiadujace sekcje musza
   roznic sie co najmniej w dwoch z trzech wymiarow —
   wysokosc, tlo (jasne/odwrocone), liczba kolumn.
   ============================================================ */

.wrap { max-width: var(--container-w); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

/* Blok odwrocony — hero, tablice, przerywniki */
.slab {
  position: relative;
  padding: 56px 0;
}
.slab--invert {
  background: var(--ap-inv-bg);
  color: var(--ap-inv-text);
}
.slab--invert h1, .slab--invert h2, .slab--invert h3 { color: var(--ap-inv-text); }
.slab--invert .eyebrow { color: var(--ap-inv-gold); }
.slab--invert p { color: var(--ap-inv-text-2); }

/* Skos jako tozsamosc strony. clip-path, nie transform —
   transform obracalby takze tekst i diakrytyki. */
.skew-r  { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }
.skew-l  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw)); }
.skew-up { clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); }
.skew-both { clip-path: polygon(0 0, 100% 3vw, 100% 100%, 0 calc(100% - 3vw)); }
@media (max-width: 640px) { .skew-r, .skew-l, .skew-up, .skew-both { clip-path: none; } }

/* Nachodzenie sekcji — utility, nie komponent (3 linie) */
.overlap-n40 { margin-top: -40px; position: relative; z-index: 2; }
.overlap-n60 { margin-top: -60px; position: relative; z-index: 2; }
.overlap-n80 { margin-top: -80px; position: relative; z-index: 2; }
@media (max-width: 640px) { .overlap-n40, .overlap-n60, .overlap-n80 { margin-top: 0; } }

/* --- .bignum — liczba jako element graficzny, nie tekst.
   .stat zostaje bez zmian i nadal obsluguje geste siatki. --- */
.bignum {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 122;
  font-weight: 900;
  font-size: clamp(64px, 11vw, 200px);
  line-height: .82;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.bignum--ghost {
  position: absolute;
  opacity: .14;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.bignum--yellow { color: var(--ap-inv-yellow); }
.bignum--gold   { color: var(--ap-inv-gold); }
.bignum__unit {
  font-family: var(--ff-body);
  font-size: .22em; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  vertical-align: super; margin-left: .1em;
}

/* --- .hero-cut — obraz przekraczajacy krawedz sekcji.
   Odwrotna logika niz .athlete-card__photo, ktore przycina DO ramki. --- */
.hero-cut {
  position: absolute;
  bottom: 0; right: 0;
  height: 110%;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  z-index: 1;
  pointer-events: none;
}
.hero-slot {                       /* placeholder gdy brak portretu z alfa */
  position: absolute; bottom: 0; right: 0;
  height: 108%; aspect-ratio: 3/4;
  border: 2px dashed var(--ap-inv-line);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: grid; place-items: end center;
  padding-bottom: 18px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ap-inv-muted); text-transform: uppercase;
  background: linear-gradient(180deg, transparent, rgba(255,212,0,.06));
  z-index: 1;
}

/* --- .rank-row — wiersz tabeli ligowej.
   .feed-item nie wyrownuje kolumnowo, .card nie ma sticky ani wyrownania cyfr. --- */
.rank-table { background: var(--ap-bg-card); border: 1px solid var(--ap-line); border-radius: var(--radius-lg); overflow: hidden; }
.rank-head, .rank-row {
  display: grid;
  grid-template-columns: 48px 34px 40px 1fr repeat(4, 64px) 104px;
  gap: 10px; align-items: center;
  padding: 10px 18px;
}
.rank-head {
  position: sticky; top: 0; z-index: 3;
  background: var(--ap-inv-bg); color: var(--ap-inv-text-2);
  font-family: var(--ff-display); font-variation-settings: 'wdth' 100;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.rank-row { border-top: 1px solid var(--ap-line); }
.rank-row:nth-child(even) { background: var(--ap-bg-sunken); }
.rank-row--podium { background: var(--ap-bg-raised); box-shadow: inset 4px 0 0 var(--ap-gold); }
.rank-row--podium:nth-child(even) { background: var(--ap-bg-raised); }
.rank-row__pos { font-family: var(--ff-mono); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.rank-row__delta { font-family: var(--ff-mono); font-size: 11px; }
.rank-row__delta.up { color: var(--ap-success); }
.rank-row__delta.down { color: var(--ap-danger); }
.rank-row__name { font-weight: 650; font-size: 14.5px; }
.rank-row__name small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ap-text-muted); font-family: var(--ff-mono); }
.rank-row .n { text-align: right; font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.rank-row .pts { font-weight: 800; color: var(--ap-gold-ink); font-size: 16px; }

/* --- .heat-grid — warstwa wartosci na siatce.
   Dwa niezalezne uzycia: mapa oblozenia klubu i mapa skutecznosci zawodnika. --- */
.heat-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 3px;
}
.heat-cell {
  aspect-ratio: 1 / .62;
  border-radius: 3px;
  background: var(--ap-bg-sunken);
  border: 1px solid var(--ap-line);
}
.heat-cell.v1 { background: rgba(20,107,51,.16); }
.heat-cell.v2 { background: rgba(20,107,51,.34); }
.heat-cell.v3 { background: rgba(20,107,51,.56); }
.heat-cell.v4 { background: var(--ap-green); }
.heat-cell.vx { background: var(--ap-yellow); border-color: var(--ap-yellow-ring); }
.heat-axis { font-family: var(--ff-mono); font-size: 10px; color: var(--ap-text-muted); letter-spacing: .04em; }

/* Blok zolty ZAWSZE z obwodka — sama zolc nie ma krawedzi na jasnej zieleni (1.14:1) */
.hl-yellow {
  background: var(--ap-yellow);
  color: var(--ap-on-yellow);
  border: 2px solid var(--ap-yellow-ring);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-weight: 700;
}
.hl-gold {
  background: var(--ap-gold);
  color: var(--ap-on-gold);
  border: 2px solid var(--ap-yellow-ring);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-weight: 700;
}

/* Pigulka LIVE — forma, nie tylko barwa */
.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ap-live); color: var(--ap-on-live);
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.live-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Ticker wynikow — pasek 72 px, najostrzejszy kontrast wysokosci */
.ticker {
  background: var(--ap-inv-bg-deep); color: var(--ap-inv-text);
  overflow-x: auto; scrollbar-width: none;
  display: flex; gap: 0; align-items: stretch;
}
.ticker::-webkit-scrollbar { display: none; }
.ticker__item {
  flex: 0 0 auto; padding: 14px 22px;
  border-right: 1px solid var(--ap-inv-line);
  display: flex; flex-direction: column; gap: 3px;
  scroll-snap-align: start;
}
.ticker__pair { font-size: 12px; color: var(--ap-inv-text-2); white-space: nowrap; }
.ticker__score { font-family: var(--ff-mono); font-weight: 700; font-size: 16px; color: var(--ap-inv-yellow); font-variant-numeric: tabular-nums; }

/* Ograniczenie ruchu — obowiazkowe przy rotacjach kart */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .tilt-a, .tilt-b, .tilt-c, .tilt-d { transform: none !important; }
}
.tilt-a { transform: rotate(-1.5deg); }
.tilt-b { transform: rotate(0deg) translateY(-24px); }
.tilt-c { transform: rotate(1.5deg) translateY(-12px); }
.tilt-d { transform: rotate(3deg) translateY(16px); }
@media (max-width: 900px) { .tilt-a,.tilt-b,.tilt-c,.tilt-d { transform: none; } }

/* ============================================================
   WARSTWA TYPOGRAFICZNA
   Metryki zmierzone z pliku zmiennego Archivo, nie z pamieci.
   Zasada nadrzedna: ZAKAZ SRODKA SKALI. Display zyje w wdth
   118-125 i wght 800-900, korpus w Inter 400. Miedzy nimi
   nie ma nic — i ta pustka czyta sie jako energia.
   ============================================================ */
:root {
  --fs-display-xxl: clamp(4.5rem,  1.60rem + 11.6vw, 12rem);
  --fs-display-l:   clamp(2.75rem, 1.35rem + 5.6vw,  6rem);
  --fs-h1:          clamp(2rem,    1.30rem + 2.8vw,  3.5rem);
  --fs-h2:          clamp(1.5rem,  1.24rem + 1.05vw, 2.125rem);
  --fs-h3:          clamp(1.125rem,1.02rem + 0.42vw, 1.375rem);
  --fs-body:        clamp(1rem,    0.97rem + 0.14vw, 1.125rem);
  --fs-label:       0.6875rem;

  /* Progi interlinii wyliczone z obrysow glifow przy wght 900:
     Ó/Ż/Ś siegaja 0,885 em, Ą/Ę schodza do -0,211 em => zasieg 1,096 em.
     Angielski moze miec 0,85 w wersalikach. Polski NIE MOZE. */
  --lh-numeric: 0.78;   /* WYLACZNIE cyfry — ich zasieg to 0,712 em */
  --lh-safe:    1.14;   /* wersaliki mogace zawierac Ą lub Ę — prog twardy */
}

.t-display-xxl {
  font-family: var(--ff-display);
  font-size: var(--fs-display-xxl);
  font-weight: 900; font-stretch: 125%;
  line-height: var(--lh-numeric);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'case' 1;
}
.t-display-l {
  font-family: var(--ff-display);
  font-size: var(--fs-display-l);
  font-weight: 900; font-stretch: 118%;
  line-height: var(--lh-safe);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-feature-settings: 'case' 1;   /* podnosi dywiz do wysokosci wersalika */
  hyphens: none;
}
.t-h1 {
  font-family: var(--ff-display); font-size: var(--fs-h1);
  font-weight: 800; font-stretch: 112%;
  line-height: var(--lh-safe); letter-spacing: -0.02em;
  text-transform: uppercase; font-feature-settings: 'case' 1;
}
.t-h2 { font-family: var(--ff-display); font-size: var(--fs-h2); font-weight: 700;
        font-stretch: 106%; line-height: 1.15; letter-spacing: -0.01em; }
.t-h3 { font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 700;
        font-stretch: 100%; line-height: 1.2; }
.t-body { font-family: var(--ff-body); font-size: var(--fs-body); font-weight: 400;
          line-height: 1.6; font-optical-sizing: auto; text-wrap: pretty; hyphens: manual; }
.t-label {
  font-family: var(--ff-display); font-size: var(--fs-label);
  font-weight: 700; font-stretch: 100%; line-height: 1.2;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-feature-settings: 'case' 1;
}

/* Cyfry Archivo sa PROPORCJONALNE (731-828, jedynka o 13% wezsza od osemki).
   Bez tnum kolumna wynikow dygocze przy kazdej zmianie. */
.num, table, .rank-row, .scoreline, .stat, .bignum, .set-box, .ticker__score {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Ogonek Ą/Ę schodzi 0,211 em ponizej linii bazowej i WYCHODZI POZA tlo elementu.
   Kazda plakietka wersalikowa potrzebuje zapasu u dolu, inaczej "GRĘ" zostanie ucięte. */
.fmt, .t-label, .eyebrow, .rank-badge, .live-pill, .chip { padding-bottom: 0.24em; }

/* Wynik seta — hierarchia mieszka WEWNATRZ liczby: przegrany dostaje
   inna wage, wezsza os i nizsze krycie. */
.scoreline { display: flex; gap: clamp(.5rem, 1.4vw, 1.25rem); align-items: baseline;
             font-family: var(--ff-display); line-height: var(--lh-numeric); }
.scoreline__set { font-size: var(--fs-display-l); font-weight: 900; font-stretch: 125%;
                  letter-spacing: -.045em; min-width: 1.05ch; text-align: center;
                  font-feature-settings: 'case' 1; }
.scoreline__set[data-lost] { font-weight: 500; font-stretch: 100%; opacity: .42; }
.scoreline__tb { font-size: .32em; font-weight: 800; vertical-align: super; opacity: .72; }

/* Znak jednostki w tym samym stopniu co liczba kradnie jej ciezar. */
.bignum__unit { font-size: .30em; font-weight: 800; font-stretch: 100%;
                letter-spacing: 0; opacity: .6; }

/* Wynik nie moze sie zlamac na koncu wiersza.
   JetBrains Mono NIE MA U+2011, wiec rozwiazujemy to opakowaniem, nie znakiem. */
.score-pair, .set-box, .scoreline { white-space: nowrap; }

/* Cudzyslowy wg normy polskiej */
:root { quotes: '„' '”' '»' '«'; }

/* --- Poprawki po przejsciu na motyw jasny --- */

/* Kort ma byc kortem: nawierzchnia zielona (FIP dopuszcza zielona, niebieska,
   terakote), linie jasne. Po zmianie motywu odziedziczyl jasne tlo i znikl. */
.court {
  background: #1E6B3F;
  border-color: #EAF5D9;
}
.court__net { background: #EAF5D9; opacity: 1; height: 3px; }
.court__serve { border-top: 2px dashed rgba(234,245,217,.9); opacity: 1; }
.court__center { background: rgba(234,245,217,.9); width: 2px; opacity: 1; }

/* Przycisk wtorny na bloku odwroconym — ciemny obrys na ciemnym tle znikal */
.slab--invert .btn--secondary {
  color: var(--ap-inv-text);
  border-color: var(--ap-inv-line);
  background: transparent;
}
.slab--invert .btn--secondary:hover {
  border-color: var(--ap-inv-yellow);
  color: var(--ap-inv-yellow);
}

/* Awatary zastepcze — wyciszamy krzykliwe barwy zestawu ilustracji,
   zeby nie rozbijaly palety zielono-zloto-zoltej */
.player__ph img { filter: saturate(.55) contrast(1.05); }

/* Pierscien postepu — tor byl projektowany pod ciemne tlo */
.ring-track { stroke: var(--ap-line); }
.ring-fill  { stroke: var(--ap-gold-ink); transform: rotate(-90deg); transform-origin: center; }

/* Zloto jako WYPELNIENIE ma inna wartosc niz zloto jako tusz.
   Tusz (#86560F) jest bursztynowy, zeby czytac sie na jasnej zieleni;
   wypelnienie (#C79A2E) jest jasniejsze i wymaga ciemnego tekstu. */
.btn--gold {
  background: var(--ap-gold);
  color: var(--ap-on-gold);
  border: 2px solid var(--ap-yellow-ring);
}
.btn--gold:hover { background: var(--ap-yellow); color: var(--ap-on-yellow); }
.slab--invert .btn--gold { border-color: var(--ap-inv-gold); }

/* ============================================================
   WARSTWA WYKRESÓW
   Wartosci przeszly walidator palety (5 sprawdzen: pasmo jasnosci,
   prog chromy, rozroznialnosc przy daltonizmie, prog widzenia
   normalnego, kontrast wzgledem powierzchni).
   ZWERYFIKOWANE maszynowo, nie ocenione na oko.
   ============================================================ */
:root {
  --viz-surface:   var(--ap-bg-card);
  --viz-grid:      #D0DDBD;
  --viz-axis:      #B7C3A4;

  /* Jedna seria / biegun dodatni. 5,88:1 wzgledem karty. */
  --viz-series-1:  #146B33;
  --viz-ink:       #14532D;   /* zielen tuszowa: obwodki, pierscien */

  /* Para rozbiezna. Bieguny cieply/zimny, ΔE 11,5 przy protanopii. */
  --viz-pos:       #146B33;
  --viz-neg:       #b37d24;
  --viz-mid:       #C4D0B1;

  /* Rampa sekwencyjna — SKUTECZNOSC (ciemniej = lepiej) */
  --viz-g1: #6db983; --viz-g2: #56a26d; --viz-g3: #15793f;   /* przestapiony: #35824f nie przechodzil z ZADNYM tuszem (3,27 i 4,19) */
  --viz-g4: #146B33; --viz-g5: #14532D;

  /* Rampa sekwencyjna — OBCIAZENIE. Osobny odcien celowo:
     oblozenie nie jest "dobre" ani "zle", jest duze albo male.
     Ta sama zielen kazalaby czytac ciemniejsze jako lepsze. */
  --viz-y1: #d9a14d; --viz-y2: #be8731; --viz-y3: #8d5c07;   /* przestapiony: #9e6a04 nie przechodzil z zadnym tuszem (3,32 i 4,14) */
  --viz-y4: #86560F; --viz-y5: #674300;

  --viz-track:     #afdfbb;
  --viz-cell-none: #DCEBC8;
}

/* UWAGA: #0E3D22 nie nadaje sie na powierzchnie wykresu — nasycone
   ciemnozielone tlo zjada jedno ramie palety i zielen ze zlotem sie
   na nim nie rozdzielaja. Wykres na tle odwroconym idzie na #0E2A17. */
.slab--invert .panel, .slab--invert .chart-card { background: #0E2A17; }

/* Rampa skutecznosci — podmiana wartosci uzywanych przez mape stref */
.heat-cell.v1 { background: var(--viz-g1); }
.heat-cell.v2 { background: var(--viz-g2); }
.heat-cell.v3 { background: var(--viz-g3); }
.heat-cell.v4 { background: var(--viz-g4); }

/* Pierscien: miernik, nie wykres kolowy. Tor jest jasniejszym stopniem
   tego samego odcienia, nie szaroscia. */
.ring-track { stroke: var(--viz-track); }
.ring-fill  { stroke: var(--viz-series-1); }

/* Slupki sezonowe: JEDEN kolor na wszystkie. Rampa po wartosci
   podwojnie koduje to, co juz mowi wysokosc slupka, i pali
   jedyny wolny kanal. */
.bars rect { fill: var(--viz-series-1); }
.bars rect.is-zero { fill: var(--viz-axis); }

/* Wartosc stoi w komorce, zeby kolor nie byl jedynym nosnikiem.
   Tusz dobrany do jasnosci wypelnienia — ciemny na jasnych stopniach,
   jasny na ciemnych. Progi wyliczone, nie ocenione na oko. */
.heat-cell {
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.heat-cell.v1, .heat-cell.v2, .heat-cell.vx { color: #0E2A17; }  /* 6,55 · 4,98 · 10,77 */
.heat-cell.v3, .heat-cell.v4 { color: #ECF5DF; }                 /* 4,87 · 5,88 */
.heat-cell:not([class*="v"]) { color: var(--ap-text-muted); }

/* ============================================================
   PASEK WYNIKOW NA ZYWO — przewijajacy sie w poprzek
   Wzorzec: pasek gieldowy. Tresc zduplikowana, zeby petla
   byla ciagla bez skoku; kopia ukryta przed czytnikiem ekranu.
   ============================================================ */
.tape {
  position: relative;
  background: var(--ap-inv-bg-deep);
  border-top: 1px solid var(--ap-inv-line);
  border-bottom: 1px solid var(--ap-inv-line);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.tape__label {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--ap-live); color: #fff;
  font-family: var(--ff-display); font-weight: 800; font-stretch: 100%;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 0 16px; z-index: 2;
}
.tape__label::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; animation: tape-blink 1.4s steps(1) infinite;
}
@keyframes tape-blink { 0%,50% { opacity: 1 } 50.01%,100% { opacity: .25 } }

.tape__viewport { overflow: hidden; flex: 1 1 auto; }
.tape__track {
  display: flex; width: max-content;
  animation: tape-scroll 46s linear infinite;
}
.tape:hover .tape__track,
.tape:focus-within .tape__track { animation-play-state: paused; }
@keyframes tape-scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.tape__item {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border-right: 1px solid var(--ap-inv-line);
  white-space: nowrap;
}
.tape__pair  { font-size: 12.5px; color: var(--ap-inv-text-2); }
.tape__score { font-family: var(--ff-mono); font-weight: 700; font-size: 14px;
               color: var(--ap-inv-yellow); font-variant-numeric: tabular-nums; }
.tape__tag   { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .08em;
               text-transform: uppercase; padding: 2px 7px; border-radius: 3px;
               background: var(--ap-inv-bg); color: var(--ap-inv-muted); }
.tape__tag.is-live { background: var(--ap-live); color: #fff; }
.tape__tag.is-fin  { color: var(--ap-inv-text-2); }

/* Ruch wylaczony na zadanie systemu — pasek staje sie zwyklym,
   przewijalnym w poziomie rzedem. Tresc pozostaje dostepna. */
@media (prefers-reduced-motion: reduce) {
  .tape__track { animation: none; }
  .tape__viewport { overflow-x: auto; }
  .tape__label::before { animation: none; }
}
@media (max-width: 640px) {
  .tape__label { padding: 0 10px; font-size: 10px; letter-spacing: .1em; }
  .tape__item { padding: 9px 14px; }
}

/* Mapa oblozenia — tusz dobrany do jasnosci stopnia rampy zlotej.
   l3 i l4 sa zbyt ciemne na ciemny tusz. */
.oc.l0, .oc.l1, .oc.l2 { color: #0E2A17; }
.oc.l3, .oc.l4 { color: #ECF5DF; }

/* Pasek wynikow: element flex domyslnie NIE kurczy sie ponizej zawartosci
   (min-width:auto), przez co przewijajaca sie tasma rozpychala cala strone. */
.tape__viewport { min-width: 0; }

/* Elementy siatki i flexa domyslnie maja min-width:auto i NIE kurcza sie
   ponizej zawartosci. Kazdy kontener, ktory zawiera wlasne przewijanie
   poziome (tabela, mapa cieplna, pasek), musi to jawnie zerowac —
   inaczej rozpycha cala strone zamiast przewijac sie u siebie. */
.two > *, .book > *, .stats-a > *, .stats-b > *, .panel, .grid-wrap, .lgt, .tblwrap { min-width: 0; }

/* Sekcja liczb sezonu na tle jasnym — kolory wewnetrzne byly dobrane
   pod blok odwrocony i na jasnym znikaly. */
.box--light .fig__n { color: var(--ap-green); }
.box--light .fig__l { color: var(--ap-text-2); }
.box--light .fig__n .u, .box--light .fig__u { color: var(--ap-gold-ink); }

/* Wiersz z pozycja 1 wsuwal sie pod przyklejony pasek nawigacji.
   Przyklejony naglowek tabeli tego NIE naprawil — sam zaczal go zaslaniac.
   Wlasciwe rozwiazanie jest na poziomie dokumentu: przewijanie do kotwicy
   zatrzymuje sie o wysokosc paska wyzej, wiec nic pod niego nie wjezdza. */
html { scroll-padding-top: 88px; }
.ladder { scroll-margin-top: 88px; }

/* Liczby sezonu na jasnym tle: naprzemiennie zielen i zloto-tusz.
   Po przeniesieniu z bloku odwroconego straciły energie zoltej —
   naprzemiennosc ja przywraca, a oba kolory przechodza kontrast
   (8,11 i 5,58 wzgledem karty). */
.box--light .fig:nth-child(even) .fig__n { color: var(--ap-gold-ink); }
.box--light .fig__n { -webkit-text-stroke: 0; letter-spacing: -0.045em; }

/* ---- Poprawki kontrastu na stronie zawodow ----
   Wszystkie trzy to kolory przeznaczone na blok odwrocony,
   uzyte na tle jasnym. Zmierzone, nie oszacowane. */

/* Dwukropki licznika: --ap-inv-line na jasnym daje 1,70 */

/* Baner uwagi: tekst wtorny na tle zlotym daje 3,38 */
.proto-banner { color: var(--ap-text); }
.proto-banner strong, .proto-banner b { color: var(--ap-green); }

/* Przypisy do rulebooka i podpisy wykresow: --ap-inv-muted na jasnym daje 4,03 */

/* ============================================================
   PŁYTA KORTU — rysunek zamiast portretu.
   W zbiorze zdjec nie ma ani jednej fotografii kortu ani hali,
   same portrety. Podpisywanie portretu jako "Kort kryty" bylo
   bledem; rysunek mowi prawde i jest zgodny ze specyfikacja FIP.
   ============================================================ */
.plate {
  position: relative; width: 100%; height: 100%;
  background: linear-gradient(160deg, #0E3D22 0%, #092A16 100%);
  overflow: hidden; display: grid; place-items: center;
}
.plate::before {                      /* siatka ogrodzenia */
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(168,201,141,.10) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(168,201,141,.10) 0 1px, transparent 1px 13px);
}
.plate__court {
  position: relative; width: min(62%, 240px); aspect-ratio: 20 / 10;
  background: #1E6B3F; border: 2px solid #EAF5D9; border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.plate__court i, .plate__court b { position: absolute; background: #EAF5D9; }
.plate__court i { left: 50%; top: -2px; bottom: -2px; width: 3px; }      /* siatka */
.plate__court b { top: 50%; height: 1.5px; opacity: .85; }                /* linia srodkowa pola */
.plate__court b.a { left: 0; width: 34.75%; }
.plate__court b.b { right: 0; width: 34.75%; }
.plate__court u {                                                          /* linie serwisowe */
  position: absolute; top: 0; bottom: 0; width: 1.5px;
  background: rgba(234,245,217,.9);
}
.plate__court u.a { left: 15.25%; } .plate__court u.b { right: 15.25%; }
.plate__cap {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ap-inv-text-2);
}
.plate--wide .plate__court { width: min(74%, 320px); }

/* ============================================================
   ANATOMIA KORTU — kort poziomo na pelna szerokosc.
   Pionowy diagram zostawial ogromne puste pola po bokach;
   poziomy wypelnia szerokosc i miesci opisy przy krawedziach.
   ============================================================ */
.anat { padding: clamp(52px, 6vw, 84px) 0; }
.anat__head { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: end; margin-bottom: 30px; }

.anat__court { position: relative; padding: 40px 0 34px; margin-left: 62px; }
.anat__box {
  position: relative; width: 100%; aspect-ratio: 20 / 10;
  max-height: 340px; margin: 0 auto;
  background: #1E6B3F; border: 3px solid #EAF5D9; border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.anat__net { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 4px;
             background: #EAF5D9; transform: translateX(-50%); }
.anat__srv { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(234,245,217,.92); }
.anat__srv--a { left: 15.25%; } .anat__srv--b { right: 15.25%; }
.anat__mid { position: absolute; top: 50%; height: 2px; background: rgba(234,245,217,.92); }
.anat__mid--a { left: 15.25%; width: 34.75%; } .anat__mid--b { right: 15.25%; width: 34.75%; }

.anat__lab { position: absolute; font-family: var(--ff-mono); font-size: 10.5px;
             letter-spacing: .06em; color: #0E2A17; background: var(--ap-yellow);
             border: 2px solid var(--ap-yellow-ring); border-radius: 3px; padding: 2px 8px;
             white-space: nowrap; }
.anat__lab--net  { left: 50%; top: -15px; transform: translateX(-50%); }
.anat__lab--srv  { left: 15.25%; bottom: -14px; transform: translateX(-50%); }
.anat__lab--wall { right: 8px; top: 50%; transform: translateY(-50%);
                   background: transparent; border-color: rgba(234,245,217,.5); color: #EAF5D9; }
.anat__dim { position: absolute; font-family: var(--ff-mono); font-size: 11px;
             color: var(--ap-inv-muted); letter-spacing: .08em; text-transform: uppercase; }
.anat__dim--top  { top: 6px; right: 0; }                       /* w prawo, zeby nie kolidowac z podpisem siatki */
.anat__dim--left { left: -62px; top: 50%; transform: translateY(-50%);
                   line-height: 1.4; text-align: right; width: 52px; }

.anat__strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0;
               border-top: 1px solid var(--ap-inv-line); border-bottom: 1px solid var(--ap-inv-line); }
.anat__s { padding: 16px 14px; border-right: 1px solid var(--ap-inv-line); }
.anat__s:last-child { border-right: none; }
.anat__s b { display: block; font-family: var(--ff-display); font-weight: 900; font-stretch: 114%;
             font-size: 24px; color: var(--ap-inv-yellow); line-height: 1; font-variant-numeric: tabular-nums; }
.anat__s span { display: block; font-family: var(--ff-mono); font-size: 10.5px;
                color: var(--ap-inv-muted); margin-top: 7px; line-height: 1.4; }

.anat__gear { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 18px; margin-top: 28px; }
.gear { background: var(--ap-inv-bg-deep); border: 1px solid var(--ap-inv-line);
        border-radius: var(--radius-lg); padding: 18px 20px; }
.gear__h { font-family: var(--ff-display); font-weight: 800; font-stretch: 106%; font-size: 15px;
           text-transform: uppercase; color: var(--ap-inv-gold); margin-bottom: 12px; }
.gear dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; }
.gear dt { font-family: var(--ff-mono); font-size: 11px; color: var(--ap-inv-muted); }
.gear dd { margin: 0; font-size: 13px; color: var(--ap-inv-text); }
.gear__d { font-size: 13.5px; color: var(--ap-inv-text-2); line-height: 1.65; }
.gear__d b { color: var(--ap-inv-text); }

@media (max-width: 1000px) {
  .anat__head { grid-template-columns: 1fr; }
  .anat__strip { grid-template-columns: repeat(4, 1fr); }
  .anat__s:nth-child(4n) { border-right: none; }
  .anat__s:nth-child(-n+4) { border-bottom: 1px solid var(--ap-inv-line); }
  .anat__gear { grid-template-columns: 1fr; }
  .anat__dim--left { display: none; }
}
@media (max-width: 620px) {
  .anat__strip { grid-template-columns: repeat(2, 1fr); }
  .anat__s:nth-child(2n) { border-right: none; }
  .anat__lab--srv, .anat__lab--wall { display: none; }
}

/* ============================================================
   TABLO ZAWODNIKA — pas wynikowy w duchu amerykanskim
   ============================================================ */
.tablo { position: relative; overflow: hidden; }
.tablo__grid { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: end; position: relative; z-index: 2; }
.tablo__ph { position: relative; aspect-ratio: 3/4; max-height: 360px; border-radius: var(--radius-lg);
             overflow: hidden; background: var(--ap-inv-bg-deep); border: 1px solid var(--ap-inv-line); }
.tablo__ph img { width: 100%; height: 100%; object-fit: cover; }
.tablo__no { position: absolute; right: -6px; bottom: -18px; z-index: 0;
             font-family: var(--ff-display); font-weight: 900; font-stretch: 125%;
             font-size: clamp(120px, 16vw, 250px); line-height: .78; color: var(--ap-inv-yellow);
             opacity: .13; pointer-events: none; user-select: none; }
.tablo__name { font-family: var(--ff-display); font-weight: 900; font-stretch: 120%;
               font-size: clamp(38px, 5.6vw, 78px); line-height: 1.14; letter-spacing: -.035em;
               text-transform: uppercase; color: var(--ap-inv-text); margin: 8px 0 12px; }
.tablo__tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* Pas wynikowy — kluczowe liczby w jednym rzedzie, jak na tablicy */
.board { display: grid; grid-template-columns: repeat(6, 1fr);
         border-top: 1px solid var(--ap-inv-line); border-bottom: 1px solid var(--ap-inv-line);
         margin-top: 26px; }
.board__c { padding: 15px 16px; border-right: 1px solid var(--ap-inv-line); }
.board__c:last-child { border-right: none; }
.board__v { font-family: var(--ff-mono); font-weight: 700; font-size: 26px; line-height: 1;
            color: var(--ap-inv-yellow); font-variant-numeric: tabular-nums; }
.board__v.gold { color: var(--ap-inv-gold); }
.board__l { font-family: var(--ff-display); font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; color: var(--ap-inv-muted); margin-top: 8px; padding-bottom: .24em; line-height: 1.4; }
.board__r { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ap-inv-text-2); margin-top: 4px; }

/* CELE SEZONU */
.goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.goal { background: var(--ap-bg-card); border: 1px solid var(--ap-line); border-radius: var(--radius-lg); padding: 18px 20px; }
.goal--done { border-color: var(--ap-success); }
.goal--risk { border-color: var(--ap-warning); }
.goal__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.goal__t { font-family: var(--ff-display); font-weight: 800; font-stretch: 104%; font-size: 15px; text-transform: uppercase; }
.goal__s { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.goal__s.ok { color: var(--ap-success); } .goal__s.risk { color: var(--ap-warning); } .goal__s.go { color: var(--ap-gold-ink); }
.goal__now { font-family: var(--ff-mono); font-weight: 700; font-size: 27px; margin: 12px 0 2px;
             font-variant-numeric: tabular-nums; }
.goal__of { font-family: var(--ff-mono); font-size: 12px; color: var(--ap-text-muted); }
.goal__bar { height: 8px; border-radius: 99px; background: var(--ap-bg-sunken); overflow: hidden; margin: 12px 0 8px; }
.goal__bar > i { display: block; height: 100%; background: var(--viz-series-1); }
.goal--done .goal__bar > i { background: var(--ap-success); }
.goal--risk .goal__bar > i { background: var(--ap-warning); }
.goal__d { font-size: 12.5px; color: var(--ap-text-2); line-height: 1.5; }

/* SPONSORZY */
.spon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sp { background: var(--ap-bg-card); border: 1px solid var(--ap-line); border-radius: var(--radius-lg);
      padding: 20px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.sp--main { grid-column: span 2; background: var(--ap-inv-bg); border-color: var(--ap-inv-line); }
.sp__logo { height: 44px; display: grid; place-items: center; }
.sp--main .sp__logo { height: 60px; }
.sp__n { font-family: var(--ff-display); font-weight: 800; font-stretch: 104%; font-size: 13px;
         text-transform: uppercase; letter-spacing: .04em; }
.sp--main .sp__n { color: var(--ap-inv-text); font-size: 15px; }
.sp__r { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ap-text-muted); }
.sp--main .sp__r { color: var(--ap-inv-muted); }
.sp__free { border-style: dashed; border-color: var(--ap-line-strong); background: transparent; }
.sp__free .sp__n { color: var(--ap-gold-ink); }

@media (max-width: 1000px) {
  .tablo__grid { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(3, 1fr); }
  .board__c:nth-child(3n) { border-right: none; }
  .board__c:nth-child(-n+3) { border-bottom: 1px solid var(--ap-inv-line); }
  .goals { grid-template-columns: 1fr; }
  .spon { grid-template-columns: repeat(2, 1fr); }
  .sp--main { grid-column: span 2; }
}
@media (max-width: 560px) { .board { grid-template-columns: repeat(2, 1fr); } }

/* Kontekst zakladow — bez tego nie wiadomo, ktorego meczu dotycza */
.ctx { margin-top: 16px; padding: 14px 18px; background: var(--ap-bg-card);
       border: 1px solid var(--ap-line); border-left: 3px solid var(--ap-gold);
       border-radius: 0 var(--radius-md) var(--radius-md) 0; display: grid; gap: 5px; }
.ctx__t { font-family: var(--ff-display); font-weight: 800; font-stretch: 104%; font-size: 14px;
          text-transform: uppercase; letter-spacing: .02em; }
.ctx__d { font-family: var(--ff-mono); font-size: 11.5px; color: var(--ap-text-muted); }
.ctx__m { font-family: var(--ff-mono); font-size: 13px; color: var(--ap-green); font-weight: 700; margin-top: 3px; }
.ctx__l { font-family: var(--ff-mono); font-size: 12px; color: var(--ap-gold-ink); margin-top: 4px; text-decoration: none; }
.ctx__l:hover { text-decoration: underline; }

/* Odnosnik z zawodow do gry kibicow */
.kw-link { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
           margin: 22px 0 6px; padding: 13px 18px; text-decoration: none;
           background: rgba(255,212,0,.10); border: 1px solid var(--ap-inv-yellow);
           border-radius: var(--radius-md); transition: background .18s ease; }
.kw-link:hover { background: rgba(255,212,0,.18); }
.kw-link__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ap-live);
                box-shadow: 0 0 0 4px rgba(255,77,87,.22); }
.kw-link b { display: block; font-family: var(--ff-display); font-weight: 800; font-stretch: 104%;
             font-size: 14px; text-transform: uppercase; color: var(--ap-inv-yellow); letter-spacing: .02em; }
.kw-link em { display: block; font-style: normal; font-family: var(--ff-mono); font-size: 11.5px;
              color: var(--ap-inv-text-2); margin-top: 4px; }
.kw-link__go { font-family: var(--ff-mono); font-size: 12px; color: var(--ap-inv-yellow); white-space: nowrap; }
@media (max-width: 640px) { .kw-link { grid-template-columns: auto 1fr; } .kw-link__go { grid-column: 2; } }

/* ══════════════════════════════════════════════════════════════════════════
   WARSTWA NAPRAW — 20.08.2026
   ──────────────────────────────────────────────────────────────────────────
   Biblioteka odziedziczona po projekcie źródłowym przeszła konwersję na tryb
   jasny przez mostek zmiennych. Mostek nie dotyka wartości wpisanych twardo,
   więc w kilkunastu komponentach zostały ciemne tła i jasne teksty z motywu
   ciemnego. Do 20.08.2026 nikt tego nie widział, bo żadna z tych klas nie
   miała ANI JEDNEGO konsumenta w serwisie - ujawniły je dopiero trzy panele.
   Naprawy powstały niezależnie w panel-turnieju, panel-fana i panel-zawodnika;
   tutaj są scalone, żeby ta sama poprawka nie żyła w trzech plikach, a osiem
   pozostałych stron nie zostało z usterką.
   Każdy kontrast zmierzony na pikselach zrzutu, nie z drzewa CSS.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- 1. Komunikat zwrotny. color:#fff na tle rgba(247,251,240,.96) dawało
       1,03:1 - biel na bieli. Toast jest JEDYNYM kanałem potwierdzania akcji
       w prototypie, więc usterka kasowała całą informację zwrotną serwisu. */
.b-toast { color: var(--ap-text); border-color: var(--ap-line-strong);
           box-shadow: 0 8px 24px rgba(14, 42, 23, .22); }

/* --- 2. Odsyłacz w banerze prototypu: 4,36:1 na KAŻDEJ stronie serwisu. */
.proto-banner a { color: var(--ap-text); text-decoration: underline; }

/* --- 3. Pasek postępu. Brak `display` sprawiał, że na <span> wysokość nie
       działała: pasek istniał w DOM i nie istniał na ekranie. Wypełnienie do
       bieżni dawało 2,39:1, poniżej progu 3:1 dla grafiki niosącej znaczenie.
       Poświata ::after malowała się także przy 0% - czytało się jak wartość. */
.progress-track { display: block; background: var(--ap-bg-sunken);
                  border: 1px solid var(--ap-line); }
.progress-fill  { display: block; background: var(--ap-gold-ink); }
.progress-fill::after { display: none; }

/* --- 4. Karta zawodnika. margin-top:-50px wsuwał ciemny tekst na prawie
       czarny dolny gradient zdjęcia: 1,3:1 na nazwisku. Podpis lądował już
       na jasnym tle, więc jednym tuszem obu wierszy pokryć się nie dało. */
.athlete-card__info { margin-top: 0; background: var(--ap-bg-card); }
.athlete-card__name { color: var(--ap-text); line-height: var(--lh-safe); }
.athlete-card__sub  { color: var(--ap-text-2); }
.athlete-card__rank { background: var(--ap-inv-bg-deep); color: var(--ap-inv-text); }
.athlete-card__discipline { background: var(--ap-inv-bg-deep);
                            border-color: var(--ap-inv-line); color: var(--ap-inv-text-2); }

/* --- 5. Inicjały na gradiencie ciemnej zieleni i bursztynu, tusz jasnego
       motywu: 1,83:1. */
.avatar { color: var(--ap-inv-text); font-weight: 800; }

/* --- 6. Medale. Złoty krążek 1,40:1, brązowy 2,42:1, srebrny w kolorach
       z motywu ciemnego. Żółć wolno tu użyć, bo jest wypełnieniem
       z obwódką, a nie tuszem. */
.medal__icon { background: var(--ap-yellow); color: var(--ap-on-yellow);
               border: 2px solid var(--ap-yellow-ring); box-shadow: none; }
.medal--silver .medal__icon { background: var(--ap-bg-raised); color: var(--ap-text);
                              border-color: var(--ap-line-strong); }
.medal--bronze .medal__icon { background: var(--ap-gold); color: var(--ap-on-gold);
                              border-color: var(--ap-yellow-ring); }

/* --- 7. Poziomy cenowe: tło rgba(5,13,34,.5) z motywu ciemnego pod jasnym
       tuszem - tekst nieczytelny. */
.tier { background: var(--ap-bg-raised); border-color: var(--ap-line); }
.tier:hover { background: var(--ap-bg-card); }

/* --- 8. Znaczniki i liczniki. tag--gold i licznik aktywnej zakładki miały
       ciemnozłoty tusz na wodnistej żółci: 4,01-4,36:1. tag--live 3,84:1. */
.tag--gold { background: var(--ap-yellow); color: var(--ap-on-yellow);
             border: 1px solid var(--ap-yellow-ring); }
.tag--live { background: var(--ap-live); color: var(--ap-on-live); border-color: var(--ap-live); }
.tab.is-active .tab__count { background: var(--ap-yellow); color: var(--ap-on-yellow);
                             border: 1px solid var(--ap-yellow-ring); }
.chip__count { opacity: 1; color: var(--ap-text-muted); }
.chip.is-active .chip__count { color: inherit; }

/* --- 9. Tabela ligowa: pozycje 2 i 3 w kolorach srebra i brązu z motywu
       ciemnego (1,21:1 i 1,90:1), nagłówek 3,67:1. */
.league-table th { color: var(--ap-text-2); background: var(--ap-bg-sunken); }
.league-table .pos.p2 { color: var(--ap-text-2); }
.league-table .pos.p3 { color: var(--ap-warning); }

/* --- 10. Przypis pod kartą reguły: 2,75:1. */
.rule-card cite { color: var(--ap-text-2); }

/* --- 11. Podpis metryki jest flexem z gap. Dopóki mieści się w wierszu,
       wygląda dobrze; po zawinięciu każdy fragment staje się osobnym
       elementem flexa i zdanie rozsypuje się na strzępy. Widoczne przy 390 px. */
.kpi__sub { display: block; line-height: 1.5; }

/* --- 12. Pasek na żywo z display:grid nie chowa się pod atrybutem hidden -
       reguła układu bije regułę przeglądarki. Ta sama pułapka co
       .tabpanel-fed[hidden]. Bez tego pasek wstrzymania jest widoczny od startu. */
.live-strip[hidden] { display: none; }

/* --- 13. Wersaliki z Ą i Ę dziedziczyły nagłówkowe line-height 1.02.
       Ogonek Ą schodzi 0,211 em poniżej linii bazowej - próg to 1,14. */
.section__title, .live-strip__title, .athlete-card__name, .tab { line-height: var(--lh-safe); }

/* --- 14. USTERKA DOSTĘPNOŚCI. W 3137 liniach arkusza nie było ANI JEDNEJ
       reguły :focus-visible (jedyne wystąpienie „focus" to .tape:focus-within).
       Każda strona obsługiwana z klawiatury była nieobsługiwalna. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible, .toggle:focus-visible {
  outline: 3px solid var(--ap-gold-ink);
  outline-offset: 2px;
}

/* --- 15. NAWIGACJA MOBILNA. Arkusz od początku chował .nav__list poniżej 1100 px
       i pokazywał .bottom-nav (l. 1789-1790), ale ŻADEN plik serwisu nie miał jej
       markupu. Skutek: na telefonie portal nie miał nawigacji w ogóle - osiem pozycji
       menu było nieosiągalnych. Pasek ma pięć slotów, a menu ma osiem pozycji, więc
       piąty slot otwiera arkusz z pozostałymi. Bez skryptu - element <details>. */
.bn-more { position: relative; display: flex; }
.bn-more > summary {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; flex: 1; padding: 9px 4px 8px; border-radius: 16px;
  color: var(--ap-text-2); font-family: var(--ff-mono); font-size: 9.5px;
  letter-spacing: .10em; text-transform: uppercase; font-weight: 700; line-height: 1;
}
.bn-more > summary::-webkit-details-marker { display: none; }
.bn-more[open] > summary { background: var(--ap-bg-sunken); color: var(--ap-text); }

/* Arkusz pozostałych sekcji. Kotwiczony do prawej krawędzi paska, nie do komórki -
   inaczej przy pięciu kolumnach wychodzi poza ekran. */
.bn-sheet {
  position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom));
  min-width: 208px; max-width: calc(100vw - 28px);
  background: var(--ap-bg-raised); border: 1px solid var(--ap-line-strong);
  border-radius: 16px; padding: 5px; box-shadow: 0 14px 38px rgba(14, 42, 23, .26);
}
.bn-sheet a {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none;
  color: var(--ap-text); font-family: var(--ff-mono); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 700; line-height: 1.2;
}
.bn-sheet a:hover, .bn-sheet a:focus-visible { background: var(--ap-bg-sunken); }
.bn-sheet a[aria-current="page"] { color: var(--ap-gold-ink); }
.bn-sheet .bn-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
                    opacity: .55; flex-shrink: 0; }
@media (min-width: 1101px) { .bottom-nav { display: none !important; } }

/* --- 16. NAGŁÓWEK: STAŁE POŁOŻENIE MENU.
       `.topnav__inner` był flexem z `space-between`, więc szerokość prawego slotu
       decydowała o położeniu menu. Slot jest na każdej stronie inny („Rezerwuj",
       „Tabela", „Wejdź do gry", plakietka zalogowanego), przez co menu wędrowało
       w poziomie o 60 px - od x=240 do x=300. Przy przechodzeniu między stronami
       dawało to wrażenie przeskoku, mimo że wysokość nagłówka jest zgodna (69 px).
       Siatka 1fr / auto / 1fr trzyma menu w tej samej osi niezależnie od slotu. */
.topnav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: initial;
}
.topnav__inner > :first-child  { justify-self: start; }
.topnav__inner > .nav          { justify-self: center; }
.topnav__inner > :last-child   { justify-self: end; min-width: 0; }
/* Prawy slot nie może rozpychać nagłówka ani zawijać się na drugi wiersz. */
.topnav__inner > :last-child > * { white-space: nowrap; }

/* --- 17. `main` jako własny kontekst formatowania.
       Bez tego margines górny pierwszego dziecka zapada się na zewnątrz i przesuwa
       cały blok treści. Objaw: `panel-fana` zaczynał treść 18 px niżej niż dziesięć
       pozostałych stron, mimo identycznego nagłówka i paska. `flow-root` zatrzymuje
       margines wewnątrz, nie zmieniając niczego tam, gdzie zapadania nie było. */
main { display: flow-root; }