@font-face{
    font-family:"Squarix";
    src: url("assets/fonts/Squarix-Regular.woff") format("woff"),
         url("assets/fonts/Squarix-Regular.ttf") format("truetype");
    font-weight:400; font-style:normal; font-display:swap;
  }
  :root{
    --black:#000000;
    --black-2:#0d0d0d;
    --black-3:#1a1a1a;
    --border:#2b2b2b;
    --yellow:#F8DE7B;
    --yellow-dim:#c8ae4c;
    --white:#ffffff;
    --gray:#a3a3a3;
    --gray-dim:#6f6f6f;
    --danger:#ff6b6b;
    --font-display:"Squarix","Orbitron",Arial,sans-serif;
    --font-body:"Orbitron",Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html, body{overflow-x:hidden;max-width:100vw;}
  body{margin:0;font-family:var(--font-body);background:var(--black);color:var(--white);letter-spacing:0.3px;}
  *{box-sizing:border-box;}
  a{color:inherit;text-decoration:none;cursor:pointer;}
  main{max-width:1200px;margin:0 auto;padding:12px 24px 60px;}

  /* Header */
  header{background:var(--black);border-bottom:1px solid var(--border);padding:0 24px;position:sticky;top:0;z-index:20;}
  .header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px;}
  .logo{font-family:var(--font-display);font-size:26px;letter-spacing:2.5px;cursor:pointer;color:var(--white);display:inline-flex;align-items:center;gap:10px;}
  .logo span{color:var(--yellow);}
  .logo-ring{width:32px;height:32px;display:block;}
  nav.tabs{display:flex;gap:2px;flex-wrap:wrap;}
  nav.tabs a{font-family:var(--font-body);font-weight:600;letter-spacing:1.4px;background:transparent;color:var(--white);font-size:12px;padding:10px 12px;text-transform:uppercase;transition:color .15s ease;border-bottom:2px solid transparent;}
  nav.tabs a:hover{color:var(--yellow);}
  nav.tabs a.active{color:var(--yellow);border-bottom-color:var(--yellow);}
  .admin-area{display:flex;align-items:center;gap:10px;font-size:13px;}
  .admin-area button.logout{background:transparent;color:var(--white);border:1px solid var(--gray);padding:6px 12px;border-radius:0;cursor:pointer;font-family:inherit;font-size:11px;text-transform:uppercase;letter-spacing:1px;}

  /* Hamburger button (mobile menu toggle) */
  .hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;}
  .hamburger span{display:block;width:26px;height:2px;background:var(--yellow);transition:all .2s ease;}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* Mobile (max-width 900px) */
  @media (max-width:900px){
    header{padding:0 12px;}
    .header-inner{height:64px;flex-wrap:nowrap;}
    .hamburger{display:flex;}
    .logo{font-size:20px;letter-spacing:2px;}
    /* Menu ukryte na mobile, ale wysuwa się po kliknięciu hamburgera */
    nav.tabs{display:none;position:fixed;top:64px;left:0;right:0;background:var(--black-2);border-top:1px solid var(--border);border-bottom:1px solid var(--yellow);flex-direction:column;padding:8px 0;z-index:100;max-height:calc(100vh - 64px);overflow-y:auto;gap:0;}
    nav.tabs.mobile-open{display:flex;}
    nav.tabs a{padding:14px 24px;border-bottom:1px solid var(--border);}
    nav.tabs a.active{border-bottom-color:var(--yellow);}
    .admin-area{gap:6px;font-size:10px;}
    /* "Sign in" / "Sign up" nie mieszczą się w jednej linii na wąskim ekranie
       i zawijają się na dwie ("SIGN" / "IN" albo "SIGN" / "UP") - bez
       text-align:center druga linia była przyklejona do lewej krawędzi
       zamiast być wyśrodkowana pod pierwszą. */
    .admin-area a{padding:4px 8px !important;font-size:10px !important;text-align:center;}
    .admin-area button.logout{font-size:9px;padding:5px 8px;}
  }

  /* Section titles */
  h1.page-title{font-family:var(--font-display);letter-spacing:3px;color:var(--white);font-size:48px;margin:0 0 32px;text-transform:uppercase;}
  h2.section-title{font-family:var(--font-display);letter-spacing:2px;color:var(--yellow);font-size:24px;margin:36px 0 20px;text-transform:uppercase;}
  h3.sub-title{font-family:var(--font-display);letter-spacing:1.5px;color:var(--yellow);font-size:16px;margin:24px 0 12px;text-transform:uppercase;}
  strong{color:var(--white);font-weight:700;}
  p{line-height:1.75;color:#e2e2e2;font-size:14px;}

  /* Buttons */
  .btn-primary{font-family:var(--font-body);font-weight:700;letter-spacing:1.5px;background:var(--yellow);color:var(--black);border:none;padding:12px 28px;border-radius:30px;cursor:pointer;font-size:12px;text-transform:uppercase;transition:transform .15s;}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-outline{font-family:var(--font-body);font-weight:600;letter-spacing:1.5px;background:transparent;color:var(--white);border:1px solid var(--white);padding:10px 26px;border-radius:30px;cursor:pointer;font-size:11px;text-transform:uppercase;transition:all .15s;}
  .btn-outline:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow);}

  /* Formularze publiczne (team register, itd.) - spójne label+input.
     form-input ma width:100% i box-sizing:border-box żeby padding nie
     wypychał go poza ekran na mobile. */
  .form-label{display:block;font-size:11px;color:var(--gray);letter-spacing:1.2px;
    text-transform:uppercase;margin-bottom:6px;}
  .form-input{width:100%;box-sizing:border-box;padding:10px 12px;
    background:var(--black);border:1px solid var(--border);color:var(--white);
    font-size:14px;font-family:inherit;transition:border-color .15s;}
  .form-input:focus{outline:none;border-color:var(--yellow);}
  .form-input:disabled{opacity:0.5;cursor:not-allowed;}

  /* HOME hero */
  .hero{position:relative;overflow:hidden;padding:40px 24px 10px;text-align:center;background:radial-gradient(ellipse at center, rgba(248,222,123,0.08), transparent 60%);}
  .hero .fift-logo{position:relative;z-index:1;width:140px;margin:0 auto 24px;display:block;filter:drop-shadow(0 0 30px rgba(248,222,123,0.3));}
  .hero-slogan{position:relative;z-index:1;font-family:var(--font-display);letter-spacing:4px;font-size:44px;color:var(--white);line-height:1.2;margin:0 0 12px;text-transform:uppercase;}
  .hero-slogan span{color:var(--yellow);}
  .hero-sub{color:var(--gray);letter-spacing:2px;font-size:12px;text-transform:uppercase;margin-bottom:32px;}
  .hero-cta{position:relative;z-index:1;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
  /* Dekoracyjne, wolno obracające się pierścienie w tle hero - wypełniają
     puste boki na szerokich ekranach. Tylko na dużych viewportach (na mobile
     treść i tak zajmuje całą szerokość). */
  .hero-bg-ring{display:none;position:absolute;top:50%;width:640px;height:640px;
    opacity:0.22;pointer-events:none;z-index:0;filter:blur(1px);}
  .hero-bg-ring.left{left:-260px;animation:heroRingSpin 100s linear infinite;}
  .hero-bg-ring.right{right:-260px;animation:heroRingSpin 130s linear infinite reverse;}
  @keyframes heroRingSpin{
    from{transform:translateY(-50%) rotate(0deg);}
    to{transform:translateY(-50%) rotate(360deg);}
  }
  @media (min-width:1100px){ .hero-bg-ring{display:block;} }
  @media (min-width:901px){ .hero .fift-logo{width:98px;} }
  /* Na mobile logo+slogan+guziki zajmowały prawie cały ekran, spychając
     pierwszego newsa poniżej fold-a. Logo skaluje się w JS do szerokości
     wyrenderowanego sloganu (patrz HomePage), więc mniejszy font sloganu
     automatycznie zmniejsza też logo - nie trzeba osobno sterować jego
     szerokością tutaj. */
  @media (max-width:600px){
    .hero{padding:30px 20px 20px 20px;}
    .hero .fift-logo{margin:0 auto 14px;}
    .hero-slogan{font-size:22px;letter-spacing:2px;margin:0 0 14px;}
    .hero-cta{gap:8px;}
    .hero-cta .btn-primary{padding:8px 18px;font-size:10px;}
    .hero-cta .btn-outline{padding:7px 16px;font-size:10px;}
  }

  /* Home hero-news */
  .hero-news{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--black-2);border:1px solid var(--border);overflow:hidden;margin-bottom:40px;cursor:pointer;transition:border-color .2s;}
  .hero-news:hover{border-color:var(--yellow);}
  .hero-image{background:linear-gradient(135deg,#1a1a1a,#3a3a1a);min-height:260px;display:flex;align-items:flex-end;padding:20px;}
  .hero-image .kicker{background:var(--yellow);color:var(--black);font-family:var(--font-body);font-weight:700;letter-spacing:1.5px;font-size:11px;padding:5px 14px;text-transform:uppercase;}
  .hero-body{padding:32px;display:flex;flex-direction:column;justify-content:center;}
  .hero-body h2{font-family:var(--font-display);letter-spacing:1.5px;color:var(--white);font-size:24px;margin:0 0 12px;text-transform:uppercase;line-height:1.2;}
  .hero-body p{color:var(--gray);line-height:1.6;margin:0 0 16px;font-size:14px;}
  .hero-meta{font-size:11px;color:var(--gray-dim);letter-spacing:1.5px;text-transform:uppercase;}
  /* Drugi akapit zajawki + "Read post" - dodane bo na szerokich ekranach
     kafelek "Latest news" miał mnóstwo pustej przestrzeni obok zdjęcia
     (tylko tytuł + jedno krótkie zdanie). Na mobile hero-body jest już
     maksymalnie ścieśnione (patrz media query niżej) - tam ten dodatkowy
     tekst tylko wydłużałby kartę, więc go tam ukrywamy. */
  .hero-body-snippet{color:var(--gray);line-height:1.6;margin:0 0 16px;font-size:14px;}
  .hero-read-more{color:var(--yellow);font-weight:700;letter-spacing:0.5px;font-size:13px;text-transform:uppercase;}
  /* Zdjęcie pierwszego newsa (260px min-height z desktopu) było za wysokie -
     na małych telefonach (np. iPhone SE, 568px wysokości) nie było widać
     nawet tytułu artykułu bez przewijania. Niższe zdjęcie + mniejszy
     padding/font w hero-body = tytuł widoczny od razu.
     Musi być PO bazowych regułach .hero-image/.hero-body wyżej - inaczej
     (przy tej samej specyficzności) bazowa reguła zdefiniowana niżej w
     źródle wygrywałaby z tą media-query, nawet na wąskim ekranie. */
  @media (max-width:600px){
    .hero-image{min-height:132px;padding:10px;}
    .hero-body{padding:16px;}
    .hero-body h2{font-size:17px;margin:0 0 6px;}
    .hero-meta{font-size:10px;}
    .hero-body-snippet, .hero-read-more{display:none;}
  }
  .home-section-title{font-family:var(--font-display);letter-spacing:2px;color:var(--yellow);font-size:22px;margin:40px 0 20px;text-transform:uppercase;}

  /* Filters */
  .filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;background:var(--black-2);border:1px solid var(--border);padding:14px;}
  .filters select,.filters input{padding:8px 12px;border:1px solid var(--border);background:var(--black);color:var(--white);font-family:inherit;font-size:13px;letter-spacing:1px;}

  /* Cards */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
  .card{background:var(--black-2);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:border-color .15s ease, transform .15s ease;display:flex;flex-direction:column;}
  .card:hover{border-color:var(--yellow);transform:translateY(-3px);}
  .card-banner{height:110px;background:linear-gradient(120deg,#1a1a1a,#2a2a1a);background-size:cover;background-position:center;position:relative;overflow:hidden;}
  .card-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);pointer-events:none;}
  .card-banner-label{position:absolute;bottom:10px;left:12px;color:var(--yellow);font-family:var(--font-display);letter-spacing:1.5px;text-transform:uppercase;font-size:13px;z-index:1;}
  .status-badge{position:absolute;top:10px;right:10px;background:var(--yellow);color:var(--black);font-family:var(--font-body);font-weight:700;letter-spacing:1px;font-size:10px;padding:4px 10px;text-transform:uppercase;z-index:1;}
  .status-badge.closed{background:var(--border);color:var(--gray);}
  .card-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:6px;}
  .card-body h3{margin:0;font-family:var(--font-display);letter-spacing:1px;font-size:15px;color:var(--white);text-transform:uppercase;}
  .muted{color:var(--gray);font-size:12px;letter-spacing:0.5px;}

  /* Members grid (become-a-*) */
  .member-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:32px;}
  .member-tile{background:var(--black-2);border:1px solid var(--border);padding:24px;display:flex;flex-direction:column;transition:border-color .15s;}
  .member-tile:hover{border-color:var(--yellow);}
  .member-tile h3{font-family:var(--font-display);letter-spacing:1.5px;color:var(--yellow);font-size:22px;margin:0 0 12px;text-transform:uppercase;}
  .member-tile p{color:var(--gray);margin:0 0 16px;flex:1;}
  .member-tile-image{background:linear-gradient(135deg,#2a2a1a,#1a1a2a);height:200px;margin:12px -24px 20px;display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--yellow-dim);background-size:cover;background-position:center top;}

  /* Back link */
  .back-link{color:var(--yellow);font-weight:600;cursor:pointer;display:inline-block;margin-bottom:16px;font-size:12px;letter-spacing:2px;text-transform:uppercase;}
  .detail-hero{background:var(--black-2);border:1px solid var(--border);padding:24px 28px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;position:relative;overflow:hidden;background-size:cover;background-position:center;min-height:220px;}
  .detail-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.25) 100%);pointer-events:none;}
  .detail-hero > *{position:relative;z-index:1;}
  .detail-hero h2{font-family:var(--font-display);letter-spacing:2px;margin:0 0 6px;font-size:24px;color:var(--white);text-transform:uppercase;line-height:1.15;}
  .hero-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .hero-badge{background:var(--yellow);color:var(--black);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 16px;min-width:64px;text-align:center;flex-shrink:0;}
  .hero-badge-big{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.15;white-space:nowrap;}
  .hero-badge-small{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;line-height:1.5;}
  .tourn-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;letter-spacing:1px;color:var(--gray);text-transform:uppercase;}
  .tourn-meta .dot{color:var(--gray-dim);}
  .tourn-meta .hero-status{color:var(--yellow);font-weight:700;}
  .subtabs{display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
  .subtabs button{background:none;border:none;padding:12px 20px;font-weight:600;color:var(--gray);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;}
  .subtabs button.active{color:var(--yellow);border-color:var(--yellow);}
  .info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:24px;}
  .info-box{background:var(--black-2);border:1px solid var(--border);padding:14px;}
  .info-box .label{font-size:10px;text-transform:uppercase;color:var(--gray-dim);letter-spacing:1.5px;font-weight:700;}
  .info-box .value{font-size:14px;color:var(--white);margin-top:6px;}

  /* Tables */
  table{width:100%;border-collapse:collapse;background:var(--black-2);border:1px solid var(--border);}
  thead{background:var(--yellow);color:var(--black);}
  th{padding:12px 14px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;font-family:var(--font-display);font-weight:400;}
  td{padding:11px 14px;text-align:left;font-size:13px;border-top:1px solid var(--border);color:var(--white);}
  tbody tr:hover{background:rgba(248,222,123,0.06);}
  tbody tr.clickable{cursor:pointer;}
  .rank-cell{font-family:var(--font-display);letter-spacing:0.5px;color:var(--yellow);width:60px;font-size:15px;text-align:center;line-height:1.15;vertical-align:middle;}
  .rank-trend{font-size:10px;margin-top:2px;letter-spacing:0.3px;font-family:var(--font-body);font-weight:600;}
  .points-cell{color:var(--yellow);font-weight:700;}
  .player-link{color:var(--white);font-weight:600;transition:color .15s;}
  .player-link:hover{color:var(--yellow);text-decoration:underline;}
  .trend-up{color:#7fe07f;font-weight:700;font-size:12px;}
  .trend-down{color:var(--danger);font-weight:700;font-size:12px;}
  .trend-flat{color:var(--gray-dim);font-size:12px;}

  /* --- Responsywna tabela --- Na mobile każdy <tr> staje się kartą,
     komórki układają się w pionie z etykietą z data-label. */
  .mobile-only{display:none;}
  @media (max-width:700px){
    .hide-mobile{display:none !important;}
    .mobile-only{display:block;}

    /* Formularze - 2-kolumnowy grid (kraj+miasto) na desktop, kolumna na mobile.
       Bez tego pole 'city' wypadało poza ekran przy szerokości ~360px. */
    .form-row-2{grid-template-columns:1fr !important;}

    /* Hero eventu: na mobile kafelek z liczbą zarejestrowanych spada pod
       lewy blok (data+tytuł+meta) zamiast ściskać się obok niego. */
    .detail-hero{flex-direction:column;align-items:flex-start;}

    /* Wariant 1: klasyczna karta (dla tournament history, matches itd.) */
    table.responsive{border:none;background:transparent;}
    table.responsive thead{display:none;}
    table.responsive tbody{display:block;}
    table.responsive tbody tr{
      display:block;
      background:var(--black-2);
      border:1px solid var(--border);
      margin-bottom:10px;
      padding:12px 14px;
    }
    table.responsive tbody tr:hover{background:var(--black-2);}
    table.responsive tbody tr.clickable:hover{background:rgba(248,222,123,0.04);}
    table.responsive td{
      display:block;
      padding:6px 0;
      border:none;
      font-size:13px;
    }
    table.responsive td::before{
      content: attr(data-label);
      display:block;
      color:var(--yellow);
      text-transform:uppercase;
      letter-spacing:1.2px;
      font-size:9px;
      font-family:var(--font-display);
      margin-bottom:2px;
      font-weight:400;
    }
    /* Puste komórki - ukryj wraz z labelem */
    table.responsive td:empty{display:none;}
    table.responsive td[data-label=""]::before,
    table.responsive td:not([data-label])::before{display:none;}
    /* Rank cell - większy i wyeksponowany na karcie */
    table.responsive td.rank-cell{
      font-size:32px;
      color:var(--yellow);
      width:auto;
      display:inline-block;
      padding:0 0 6px;
      margin-right:8px;
    }
    table.responsive td.rank-cell::before{display:none;}

    /* Wariant 2: kompaktowy ranking (World Ranking). Każdy zawodnik to jedna
       zwarta linia (rząd flex zamiast wielowierszowej karty): pozycja+trend,
       nazwisko, flaga+3-literowy kod kraju, punkty. Wcześniej pozycja i trend
       stały jedna pod drugą (dwie linie w jednej komórce), co razem z pełną
       nazwą kraju rozdymało wysokość kafelka - stąd "absurdalnie dużo
       przestrzeni" na jednego zawodnika. Docelowa wysokość: flaga (32px) +
       niewielki padding. */
    table.ranking-compact thead{display:none;}
    table.ranking-compact tbody tr{display:flex;align-items:center;gap:8px;padding:6px 10px;}
    table.ranking-compact td{padding:0;border:none;font-size:12px;}
    table.ranking-compact td.rank-cell{display:flex;align-items:baseline;gap:4px;width:auto;flex:0 0 auto;font-size:15px;line-height:1.1;text-align:left;}
    table.ranking-compact td.rank-cell > div:first-child::before{content:"#";}
    table.ranking-compact .rank-trend{margin-top:0;font-size:9px;letter-spacing:0.3px;}
    table.ranking-compact td:nth-child(2){flex:1 1 auto;min-width:0;overflow:hidden;}
    table.ranking-compact .player-link{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
    /* Kolumna flagi i kolumna punktów muszą mieć STAŁĄ szerokość (nie
       flex:0 0 auto liczone z treści) - inaczej różna liczba cyfr w punktach
       (np. "800" vs "1000") albo różna szerokość kodu kraju zmienia ilość
       miejsca zabieranego przez kolumnę nazwiska (jedyną z flex-grow), co
       przesuwa flagę w prawo/lewo w zależności od wiersza i flagi przestają
       być wyrównane w kolumnie. */
    table.ranking-compact td:nth-child(3){flex:0 0 40px;width:40px;display:flex;align-items:center;gap:5px;}
    /* Na World Ranking wiersz ma już rangę+trend, nazwisko I punkty w jednej
       linii - kod kraju się tam nie mieści (za ciasno). Pokazujemy go tylko
       na szerszych ekranach (patrz @media (min-width:701px) niżej). */
    table.ranking-compact .country-code-mobile{display:none;}
    table.ranking-compact td.points-cell{flex:0 0 46px;width:46px;white-space:nowrap;font-size:13px;text-align:right;}

    /* Wariant 2b: lista "Registered players" na stronie turnieju - ten sam
       zwarty jednoliniowy układ co World Ranking (#, zawodnik, flaga+kod,
       seed/pozycja). Dla deblów/miksta dwa nazwiska zwykle nie mieszczą się
       obok flagi w jednej linii - wtedy komórka z nazwiskami "spada" do
       pełnej szerokości w drugiej linii (order:5 + flex-basis:100%) zamiast
       być obcinana wielokropkiem. */
    table.entries-compact thead{display:none;}
    table.entries-compact{border:none;background:transparent;}
    table.entries-compact tbody{display:block;}
    table.entries-compact tbody tr{
      display:flex;flex-wrap:wrap;align-items:center;gap:8px;
      background:var(--black-2);border:1px solid var(--border);
      margin-bottom:8px;padding:8px 10px;
    }
    table.entries-compact td{padding:0;border:none;font-size:12px;}
    table.entries-compact td.idx-cell{flex:0 0 auto;font-family:var(--font-display);color:var(--yellow);font-size:15px;}
    table.entries-compact td.idx-cell::before{content:"#";}
    table.entries-compact td.category-cell{display:none;}
    table.entries-compact td.athlete-cell{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
    table.entries-compact td.athlete-cell .player-link{font-size:12px;}
    /* Flaga i status muszą mieć stałą szerokość - patrz komentarz przy
       table.ranking-compact wyżej (ten sam efekt "skaczącej" flagi). */
    table.entries-compact td.country-cell{flex:0 0 72px;width:72px;display:flex;align-items:center;justify-content:flex-start;gap:5px;}
    table.entries-compact td.country-cell .country-code-mobile{display:inline;font-size:10px;font-weight:700;letter-spacing:0.5px;color:var(--gray);}
    table.entries-compact td.status-cell{flex:0 0 44px;width:44px;text-align:right;font-size:12px;white-space:nowrap;}
    table.entries-compact tr.entry-row-pair td.athlete-cell{
      order:5;flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip;padding-top:2px;
    }

    /* Wariant 3: kompaktowy ranking history na profilu zawodnika - jeden wpis =
       jeden wiersz z 3 kolumnami (period | rank | points). Znacznie krótsze
       niż klasyczna karta z 3 blokami pod sobą.
       Stałe szerokości kolumn żeby środkowa (RANK) była zawsze w tym samym
       miejscu - inaczej dla różnych wartości "1" vs "3" grid dawał różne
       kolumny (font ma proporcjonalne cyfry). */
    table.responsive.ranking-history-table tbody tr{
      display:grid !important;
      grid-template-columns: 90px 1fr 90px;
      align-items:center;
      gap:12px;
      padding:10px 14px !important;
      margin-bottom:6px !important;
    }
    table.responsive.ranking-history-table td{
      display:block !important;
      padding:0 !important;
      font-size:15px;
    }
    table.responsive.ranking-history-table td::before{
      font-size:8px !important;
      margin-bottom:2px !important;
      letter-spacing:1px !important;
      opacity:0.7;
    }
    /* Rank cell na mobile: label + wartość wycentrowane w środku grid cell */
    table.responsive.ranking-history-table td.rank-cell{
      font-size:22px !important;
      padding:0 !important;
      margin:0 !important;
      width:auto !important;
      display:block !important;
      text-align:center;
    }
    table.responsive.ranking-history-table td.rank-cell::before{
      display:block !important;
      content: attr(data-label);
      font-size:8px;
      color:var(--yellow);
      letter-spacing:1px;
      text-transform:uppercase;
      font-family:var(--font-display);
      font-weight:400;
      margin-bottom:2px;
      opacity:0.7;
      text-align:center;
    }
    /* Points po prawej stronie - zarówno label jak i wartość */
    table.responsive.ranking-history-table td.points-cell{
      text-align:right;
    }
    table.responsive.ranking-history-table td.points-cell::before{
      text-align:right;
    }
  }

  /* Kod kraju obok flagi na laptopach/szerokich ekranach - tam jest już
     miejsce (World Ranking traci swój ciasny kompaktowy wiersz powyżej
     700px i wraca do zwykłej tabeli; Registered players ma pełną tabelę
     przez cały czas powyżej tego breakpointu). Osobny @media zamiast
     zwykłej reguły, żeby nie wchodzić w konflikt kolejności z regułami
     ukrywającymi kod w kompaktowym widoku mobile World Ranking wyżej. */
  @media (min-width:701px){
    /* display:block (zamiast inline-block obok flagi) - tak kod kraju trafia
       na własną linię pod flagą. Gdyby był w tej samej linii co flaga(-i),
       text-align:center centrowałoby CAŁY blok flaga+kod razem, a że kod
       ma różną szerokość w różnych wierszach ("FRA" vs "LUX/GER"), sama
       flaga (i "/" w parach) przesuwała by się względem innych wierszy.
       Osobna linia = flaga i kod centrują się każde niezależnie względem tej
       samej szerokości komórki, więc ich środki zawsze się pokrywają. */
    table.ranking-compact .country-code-mobile,
    table.entries-compact .country-code-mobile{
      display:block;margin-top:4px;font-size:11px;font-weight:700;letter-spacing:0.5px;color:var(--gray);
    }
  }

  /* Ranking cat tabs */
  .cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;align-items:center;}
  .cat-tabs a{font-family:var(--font-display);letter-spacing:1px;background:transparent;border:1px solid var(--border);color:var(--white);padding:8px 16px;font-size:11px;text-transform:uppercase;transition:all .15s;}
  .cat-tabs a:hover{border-color:var(--yellow);color:var(--yellow);}
  .cat-tabs a.active{background:var(--yellow);border-color:var(--yellow);color:var(--black);}

  /* Ranking history table na profilu zawodnika - desktop alignment.
     Nagłówek "PERIOD" po lewej, "RANK" i "POINTS" po prawej, wartości pod nimi
     wyrównane w tej samej osi. Bez tego (na desktopie) wartości numeryczne
     bywały wsunięte w środek kolumny i wyglądało jakby się rozjechały. */
  table.ranking-history-table th{text-align:left;}
  table.ranking-history-table th:nth-child(2){text-align:center;}
  table.ranking-history-table th:nth-child(3){text-align:right;}
  table.ranking-history-table td.rank-cell{text-align:center;font-family:var(--font-display);color:var(--yellow);font-size:16px;}
  table.ranking-history-table td.points-cell{text-align:right;font-family:var(--font-display);color:var(--yellow);font-size:16px;letter-spacing:1px;}
  table.ranking-history-table td:first-child{font-family:var(--font-display);letter-spacing:2px;}

  /* Wykres liniowy "Ranking history" (ostatnie 12 miesięcy) nad tabelą. */
  .ranking-chart{background:var(--black-2);border:1px solid var(--border);padding:12px 8px 4px;margin-bottom:16px;}
  .ranking-chart-svg{width:100%;height:auto;display:block;touch-action:none;}

  /* News */
  .news-card{display:flex;gap:16px;background:var(--black-2);border:1px solid var(--border);padding:16px;margin-bottom:16px;cursor:pointer;transition:border-color .15s;}
  .news-card:hover{border-color:var(--yellow);}
  .news-thumb{width:140px;height:90px;background:linear-gradient(120deg,#2a2a1a,#1a1a1a);background-size:cover;background-position:center top;background-repeat:no-repeat;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--yellow-dim);font-size:32px;}
  .news-thumb.small{width:80px;height:60px;font-size:20px;background-size:cover;background-position:center top;background-repeat:no-repeat;}
  .news-card h3{margin:0 0 6px;font-family:var(--font-display);letter-spacing:1px;color:var(--white);text-transform:uppercase;font-size:16px;}
  /* Na mobile "MORE FROM NEWS" karty (news-card) miały wąską stałą miniaturę
     (140px) po lewej z dużą pustą przestrzenią pod nią, a tekst ściśnięty w
     wąskiej prawej kolumnie. Karta na kolumnę: zdjęcie na całą szerokość na
     górze, potem tytuł/data/excerpt też na całą szerokość pod spodem. */
  @media (max-width:700px){
    .news-card{flex-direction:column;gap:12px;}
    .news-card > .news-thumb{width:100%;height:160px;}
  }
  .news-detail-layout{display:grid;grid-template-columns:2fr 1fr;gap:24px;}
  @media (max-width:900px){ .news-detail-layout{grid-template-columns:1fr;} .hero-news{grid-template-columns:1fr;} }
  .news-article{background:var(--black-2);border:1px solid var(--border);padding:28px;}
  .news-article h1{font-family:var(--font-display);letter-spacing:2px;color:var(--white);margin:0 0 8px;font-size:28px;line-height:1.2;text-transform:uppercase;}
  .news-article .article-meta{color:var(--gray-dim);font-size:11px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);letter-spacing:1.2px;text-transform:uppercase;}
  .news-article .article-content{line-height:1.75;white-space:pre-wrap;color:#e2e2e2;font-size:14px;}
  .related-news h4{font-family:var(--font-display);letter-spacing:1.5px;color:var(--yellow);font-size:14px;margin:0 0 12px;text-transform:uppercase;}
  .related-news-item{display:flex;gap:12px;background:var(--black-2);border:1px solid var(--border);padding:10px;margin-bottom:10px;cursor:pointer;transition:border-color .15s;}
  .related-news-item:hover{border-color:var(--yellow);}
  .related-news-item h5{margin:0 0 4px;color:var(--white);font-size:12px;line-height:1.3;font-family:var(--font-display);letter-spacing:0.5px;font-weight:400;text-transform:uppercase;}
  .related-news-item .related-date{font-size:10px;color:var(--gray-dim);letter-spacing:1px;text-transform:uppercase;}

  /* News list new layout: hero card + sidebar with 3 mini cards + grid below */
  .news-top-layout{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:32px;}
  @media (max-width:900px){ .news-top-layout{grid-template-columns:1fr;} }
  .news-hero-card{background:var(--black-2);border:1px solid var(--border);cursor:pointer;transition:border-color .15s ease, transform .15s ease;display:flex;flex-direction:column;overflow:hidden;}
  .news-hero-card:hover{border-color:var(--yellow);transform:translateY(-2px);}
  .news-hero-image{background:linear-gradient(135deg,#1a1a1a,#3a3a1a);min-height:280px;background-size:cover;background-position:center;position:relative;}
  .news-hero-image .kicker{position:absolute;top:16px;left:16px;background:var(--yellow);color:var(--black);font-family:var(--font-body);font-weight:700;letter-spacing:1.5px;font-size:11px;padding:5px 14px;text-transform:uppercase;}
  .news-hero-body{padding:24px;flex:1;display:flex;flex-direction:column;}
  .news-hero-body h2{font-family:var(--font-display);letter-spacing:1.5px;color:var(--white);font-size:24px;margin:0 0 12px;text-transform:uppercase;line-height:1.2;}
  .news-hero-body p{color:var(--gray);line-height:1.6;margin:0 0 auto;font-size:14px;}
  .news-hero-meta{font-size:11px;color:var(--gray-dim);letter-spacing:1.5px;text-transform:uppercase;margin-top:12px;}
  .news-sidebar{display:flex;flex-direction:column;gap:14px;}
  .news-mini-card{background:var(--black-2);border:1px solid var(--border);padding:0;cursor:pointer;display:flex;flex-direction:column;transition:border-color .15s;flex:1;overflow:hidden;}
  .news-mini-card:hover{border-color:var(--yellow);}
  .news-mini-thumb{width:100%;height:120px;background:linear-gradient(120deg,#2a2a1a,#1a1a1a);background-size:cover;background-position:center 20%;background-repeat:no-repeat;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--yellow-dim);font-size:26px;}
  .news-mini-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:14px;}
  .news-mini-body h5{margin:0 0 6px;font-family:var(--font-display);letter-spacing:0.5px;color:var(--white);font-size:12px;text-transform:uppercase;line-height:1.3;}
  .news-mini-body .date{font-size:10px;color:var(--gray-dim);letter-spacing:1px;text-transform:uppercase;}
  .news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}

  /* Athlete profile */
  .athlete-hero{background:var(--black-2);border:1px solid var(--border);padding:32px;margin-bottom:24px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;}

  /* Ranking tiles na profilu zawodnika (jak na FITEQ) */
  .ranking-tile{background:var(--black);border:1px solid var(--border);padding:14px 18px;min-width:100px;text-align:center;}
  .ranking-tile-label{font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:1.2px;line-height:1.35;font-weight:600;}
  .ranking-tile-value{font-family:var(--font-display);color:var(--yellow);font-size:32px;margin-top:8px;letter-spacing:1px;}
  .ranking-tile-unranked{color:var(--gray-dim);font-size:24px;margin-top:8px;font-family:var(--font-display);}
  /* "Mixed Doubles" + "Ranking" to 3 słowa - w wąskim tile na mobile (3
     równe kolumny) "Mixed Doubles" samo już zawijało się na 2 linie, więc
     kafelek miał 3 linie tekstu zamiast 2 jak Singles/Doubles i się rozjeżdżał.
     Na mobile pokazujemy skrócone "Mixed" zamiast "Mixed Doubles". */
  .tile-label-mobile{display:none;}

  @media (max-width:700px){
    .athlete-hero{padding:20px 16px;gap:16px;}
    .athlete-hero h2{font-size:22px !important;}
    /* Na mobile grid 3 kolumny równej szerokości - każdy tile wypełnia dostępne miejsce */
    .current-rankings-tiles{
      margin-left:0 !important; width:100%;
      display:grid !important;
      grid-template-columns: 1fr 1fr 1fr !important;
      gap:8px !important;
    }
    .ranking-tile{min-width:0;padding:10px 8px;}
    .ranking-tile-label{font-size:9px;letter-spacing:0.8px;}
    .tile-label-desktop{display:none;}
    .tile-label-mobile{display:inline;}
    .ranking-tile-value{font-size:22px;}
    /* Socials na mobile - kolumna, każdy przycisk pełnej szerokości */
    .socials-row{flex-direction:column !important; align-items:stretch !important; gap:8px !important;}
    .socials-label{margin-right:0 !important; margin-bottom:2px;}
    .social-btn{width:100%; justify-content:center; padding:12px !important;}
    .socials-admin-btn{margin-left:0 !important; width:100%;}
  }
  .athlete-avatar{width:110px;height:110px;border-radius:50%;background:var(--yellow);color:var(--black);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:38px;letter-spacing:2px;flex-shrink:0;}
  .athlete-hero h2{font-family:var(--font-display);letter-spacing:2px;margin:0 0 6px;font-size:30px;text-transform:uppercase;color:var(--white);}
  .athlete-hero .athlete-meta{font-size:14px;color:var(--gray);letter-spacing:1px;}

  /* Docs subtabs */
  .doc-section{background:var(--black-2);border:1px solid var(--border);padding:32px;line-height:1.75;}
  .doc-section h2{font-family:var(--font-display);letter-spacing:1.5px;color:var(--yellow);margin-top:32px;font-size:18px;text-transform:uppercase;}
  .doc-section h2:first-child{margin-top:0;}
  .doc-section ul{padding-left:20px;}
  .doc-section li{margin-bottom:8px;color:#e2e2e2;font-size:14px;}
  .doc-section p{color:#e2e2e2;}

  /* Store */
  .store-panel{background:var(--black-2);border:1px solid var(--border);padding:60px 40px;text-align:center;}
  .store-panel h2{font-family:var(--font-display);letter-spacing:3px;color:var(--yellow);font-size:32px;margin:0 0 20px;text-transform:uppercase;}
  .store-panel p{color:var(--gray);max-width:640px;margin:0 auto 24px;font-size:14px;line-height:1.75;}

  /* Forms */
  .panel{background:var(--black-2);border:1px solid var(--border);padding:24px;margin-bottom:24px;}
  .panel h3{font-family:var(--font-display);letter-spacing:1.5px;margin-top:0;color:var(--yellow);text-transform:uppercase;font-size:16px;}
  .form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
  .form-grid label{display:flex;flex-direction:column;font-size:11px;font-weight:600;color:var(--gray);gap:6px;text-transform:uppercase;letter-spacing:1.2px;}
  .form-grid input,.form-grid select,.form-grid textarea{padding:10px;border:1px solid var(--border);background:var(--black);color:var(--white);font-family:inherit;font-size:13px;letter-spacing:0.3px;}
  .form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--yellow);}
  .checkbox-row{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--gray);}
  .checkbox-row input{width:16px;height:16px;accent-color:var(--yellow);}
  .login-box{max-width:360px;margin:80px auto;background:var(--black-2);border:1px solid var(--border);padding:32px;}
  .login-box h2{font-family:var(--font-display);letter-spacing:2px;color:var(--yellow);text-transform:uppercase;margin-top:0;}
  .login-box input{width:100%;padding:10px;margin-bottom:12px;border:1px solid var(--border);background:var(--black);color:var(--white);font-family:inherit;font-size:13px;}
  .error-msg{color:var(--danger);font-size:12px;margin-top:8px;letter-spacing:0.5px;}
  .success-msg{color:#7fe07f;font-size:13px;margin-top:8px;letter-spacing:0.5px;}
  .empty-state{text-align:center;padding:60px 20px;color:var(--gray-dim);letter-spacing:1px;text-transform:uppercase;font-size:12px;}
  .flag{font-size:16px;margin-right:6px;vertical-align:-1px;}

  /* Flag octagon (used in the World Ranking).
     Uses flag-icons library (SVG per country) clipped to an octagon.
     .fi.fis renders a 1:1 square flag; we wrap it in an octagon-shaped mask. */
  .flag-oct-wrap{display:inline-block;position:relative;width:32px;height:32px;background:var(--yellow);
    clip-path:polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);vertical-align:middle;margin-right:6px;
    /* Wewnątrz komórek flex ze stałą szerokością (mobile compact rows) flaga
       nie ma tekstu - jej "min-content" to niemal 0, więc bez flex-shrink:0
       to ona (a nie sąsiedni kod kraju) traciła szerokość, gdy oba razem nie
       mieściły się w komórce - stąd spłaszczone/wydłużone octagony. */
    flex-shrink:0;}
  /* W komórce "Country" (ranking, registered players) flaga jest wyśrodkowana
     przez text-align:center na komórce, z kodem kraju pod spodem (patrz
     .country-code-mobile w media query niżej). Tam margin-right powyżej
     przesuwał wizualny środek flagi o połowę marginesu (3px) w lewo
     względem wyśrodkowanego pod nią kodu kraju - stąd "krzywe" wyrównanie. */
  .country-cell .flag-oct-wrap{margin-right:0;}
  .flag-oct{position:absolute;top:3px;left:3px;right:3px;bottom:3px;overflow:hidden;
    clip-path:polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);}
  .flag-oct .fi{width:100%;height:100%;background-size:cover;background-position:center;display:block;}
  /* Kod kraju (3 litery) obok flagi - flagi same w sobie są mało rozpoznawalne.
     Domyślnie ukryty (desktop ma pełną nazwę kraju w nagłówku kolumny),
     pokazywany tylko w zwartym widoku mobile (patrz media query niżej). */
  .country-code-mobile{display:none;}

  /* Admin panel */
  .admin-shell{padding-bottom:60px;}
  .admin-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
  .admin-tabs button{background:none;border:none;padding:14px 22px;font-family:var(--font-display);color:var(--gray);cursor:pointer;
    border-bottom:2px solid transparent;margin-bottom:-1px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;}
  .admin-tabs button.active{color:var(--yellow);border-color:var(--yellow);}
  .admin-count{display:inline-block;margin-left:8px;background:var(--yellow);color:var(--black);padding:2px 8px;font-size:11px;border-radius:10px;font-weight:700;}
  .reg-card{background:var(--black-2);border:1px solid var(--border);padding:18px;margin-bottom:12px;}
  .reg-card-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
  .reg-card-head h4{margin:0;font-family:var(--font-display);letter-spacing:1px;color:var(--white);font-size:16px;text-transform:uppercase;}
  .reg-status{font-size:10px;letter-spacing:1.5px;padding:3px 10px;text-transform:uppercase;font-weight:700;}
  .reg-status.PENDING{background:#3b3b1a;color:var(--yellow);}
  .reg-status.APPROVED{background:#1a3b1a;color:#7fe07f;}
  .reg-status.REJECTED{background:#3b1a1a;color:var(--danger);}
  .reg-details{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 24px;margin-bottom:14px;font-size:12px;color:#e2e2e2;}
  .reg-details div span{color:var(--gray-dim);text-transform:uppercase;letter-spacing:1px;font-size:10px;margin-right:6px;}
  .reg-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .btn-approve{background:#7fe07f;color:var(--black);border:none;padding:8px 16px;font-family:var(--font-body);font-weight:700;letter-spacing:1px;font-size:11px;text-transform:uppercase;cursor:pointer;}
  .btn-reject{background:transparent;color:var(--danger);border:1px solid var(--danger);padding:7px 15px;font-family:var(--font-body);font-weight:700;letter-spacing:1px;font-size:11px;text-transform:uppercase;cursor:pointer;}
  .btn-delete{background:transparent;color:var(--gray);border:1px solid var(--border);padding:7px 15px;font-family:var(--font-body);font-weight:600;letter-spacing:1px;font-size:11px;text-transform:uppercase;cursor:pointer;}
  .admin-list-item{display:flex;justify-content:space-between;align-items:center;background:var(--black-2);border:1px solid var(--border);padding:14px 18px;margin-bottom:8px;gap:12px;flex-wrap:wrap;}
  .admin-list-item h4{margin:0;font-family:var(--font-display);color:var(--white);font-size:14px;letter-spacing:1px;text-transform:uppercase;}
  .admin-list-item .meta{font-size:11px;color:var(--gray-dim);margin-top:4px;letter-spacing:0.8px;text-transform:uppercase;}

  /* Markdown editor + toolbar */
  .md-toolbar{display:flex;flex-wrap:wrap;gap:4px;background:var(--black);border:1px solid var(--border);padding:6px;margin-bottom:0;}
  .md-toolbar button{background:transparent;color:var(--white);border:1px solid var(--border);padding:6px 10px;font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:0.5px;cursor:pointer;transition:all 0.15s;text-transform:uppercase;}
  .md-toolbar button:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow);}
  .md-editor-split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-top:none;}
  @media (max-width:820px){.md-editor-split{grid-template-columns:1fr;}}
  .md-editor-split textarea{width:100%;min-height:280px;background:var(--black);color:var(--white);border:none;padding:12px;font-family:"Consolas","Monaco",monospace;font-size:13px;line-height:1.6;resize:vertical;letter-spacing:0.3px;}
  .md-editor-split textarea:focus{outline:none;}
  .md-preview{padding:12px 16px;background:var(--black-2);border-left:1px solid var(--border);min-height:280px;max-height:520px;overflow-y:auto;font-size:13px;line-height:1.6;color:#e2e2e2;}
  .md-preview h1{font-family:var(--font-display);letter-spacing:1.5px;color:var(--yellow);font-size:20px;text-transform:uppercase;margin:16px 0 8px;}
  .md-preview h2{font-family:var(--font-display);letter-spacing:1.2px;color:var(--yellow);font-size:16px;text-transform:uppercase;margin:14px 0 8px;}
  .md-preview h3{font-family:var(--font-display);letter-spacing:1px;color:var(--white);font-size:14px;text-transform:uppercase;margin:12px 0 6px;}
  .md-preview p{margin:8px 0;}
  .md-preview strong{color:var(--white);font-weight:700;}
  .md-preview em{font-style:italic;color:var(--yellow);}
  .md-preview img{max-width:100%;height:auto;display:block;margin:12px 0;}
  .md-preview a{color:var(--yellow);text-decoration:underline;}
  .md-preview ul, .md-preview ol{padding-left:20px;}
  .md-preview blockquote{border-left:3px solid var(--yellow);padding-left:12px;margin:12px 0;color:var(--gray);font-style:italic;}
  .md-preview code{background:var(--black);padding:2px 6px;font-family:"Consolas","Monaco",monospace;font-size:12px;color:var(--yellow);}
  .md-hint{font-size:10px;color:var(--gray-dim);letter-spacing:0.5px;padding:6px 10px;background:var(--black);border:1px solid var(--border);border-top:none;text-transform:uppercase;}

  /* Flatpickr overrides - wpasuję kalendarz w motyw czarno-żółty */
  .flatpickr-calendar{background:var(--black-2)!important;border:1px solid var(--yellow)!important;box-shadow:0 4px 12px rgba(0,0,0,0.6);}
  .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange{background:var(--yellow)!important;color:var(--black)!important;border-color:var(--yellow)!important;}
  .flatpickr-day.today{border-color:var(--yellow)!important;}
  .flatpickr-day:hover{background:var(--black)!important;}
  .flatpickr-months .flatpickr-month, .flatpickr-current-month{color:var(--yellow)!important;}
  .flatpickr-weekday{color:var(--gray)!important;}
  .flatpickr-input.form-control input, input.form-control.flatpickr-input{background:var(--black);color:var(--white);}
  .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover{color:rgba(200,200,200,0.2)!important;background:transparent!important;}

  /* Live validation - red error state */
  input.input-invalid, select.input-invalid, .flatpickr-alt.input-invalid{border-color:var(--danger)!important;}
  .validation-error{color:var(--danger);font-size:11px;margin-top:6px;letter-spacing:0.5px;display:flex;align-items:center;gap:4px;}

  /* Multi-select checkboxes for tournament categories */
  .checkbox-group{background:var(--black);border:1px solid var(--border);padding:12px;display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:8px;}
  .checkbox-group label{display:flex;align-items:center;gap:8px;color:var(--white);font-family:var(--font-body);font-size:12px;text-transform:none;letter-spacing:0.3px;font-weight:500;cursor:pointer;padding:6px 8px;border:1px solid transparent;transition:all 0.15s;margin:0;}
  .checkbox-group label:hover{border-color:var(--border);background:rgba(255,255,255,0.02);}
  .checkbox-group label.checked{border-color:var(--yellow);background:rgba(248,222,123,0.05);color:var(--yellow);}
  .checkbox-group input[type="checkbox"]{width:16px;height:16px;accent-color:var(--yellow);cursor:pointer;}

  /* Rendered article (public) - reuses .article-content styles */
  .article-content h1{font-family:var(--font-display);letter-spacing:2px;color:var(--yellow);font-size:24px;text-transform:uppercase;margin:24px 0 12px;}
  .article-content h2{font-family:var(--font-display);letter-spacing:1.5px;color:var(--yellow);font-size:19px;text-transform:uppercase;margin:20px 0 10px;}
  .article-content h3{font-family:var(--font-display);letter-spacing:1.2px;color:var(--white);font-size:16px;text-transform:uppercase;margin:16px 0 8px;}
  .article-content strong{color:var(--white);font-weight:700;}
  .article-content em{font-style:italic;color:var(--yellow);}
  .article-content img{max-width:100%;height:auto;display:block;margin:16px auto;}
  .article-content a{color:var(--yellow);text-decoration:underline;}
  .article-content ul, .article-content ol{padding-left:24px;}
  .article-content blockquote{border-left:3px solid var(--yellow);padding-left:16px;margin:16px 0;color:var(--gray);font-style:italic;}
  .article-content p{margin:10px 0;}
  .article-content div[align="center"]{text-align:center;}
  footer{background:var(--black);border-top:1px solid var(--border);padding:36px 24px 24px;margin-top:60px;}
  .footer-inner{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:center;}
  .footer-brand{font-family:var(--font-display);letter-spacing:2px;font-size:20px;}
  .footer-brand span{color:var(--yellow);}
  .footer-fift{display:flex;align-items:center;gap:12px;color:var(--gray-dim);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;}
  .footer-fift img{height:36px;}
  /* Na desktopie tekst mieści się obok logo w jednej linii - wymuszone
     złamanie linii przydaje się tylko w wąskim, wyśrodkowanym układzie mobile. */
  .footer-fift-break{display:none;}
  .footer-socials{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
  .footer-socials a{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border);padding:8px 14px;font-size:11px;letter-spacing:1px;text-transform:uppercase;transition:all .15s;white-space:nowrap;}
  .footer-socials a:hover{border-color:var(--yellow);color:var(--yellow);}
  /* Ranking filters - search + country na stronie World Ranking */
  .ranking-filters{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center;
    margin-bottom:20px; padding:12px 14px;
    background:var(--black-2); border:1px solid var(--border);
  }
  .ranking-filter-field{position:relative; flex:1; min-width:200px;}
  .ranking-filter-field input,
  .ranking-filter-field select{
    width:100%; padding:10px 14px; padding-right:32px;
    background:var(--black); border:1px solid var(--border);
    color:var(--white); font-size:13px; font-family:var(--font-body);
  }
  .ranking-filter-field input:focus,
  .ranking-filter-field select:focus{border-color:var(--yellow); outline:none;}
  .ranking-filter-field input::placeholder{color:var(--gray-dim);}
  .ranking-filter-clear{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--gray); cursor:pointer;
    font-size:20px; padding:0 6px; line-height:1;
  }
  .ranking-filter-clear:hover{color:var(--yellow);}
  .ranking-filter-info{
    font-size:11px; color:var(--yellow); letter-spacing:1px;
    text-transform:uppercase; font-family:var(--font-display);
    padding:0 8px;
  }
  @media (max-width:700px){
    .ranking-filters{padding:10px; gap:8px;}
    .ranking-filter-field{min-width:0; flex-basis:100%;}
    .ranking-filter-info{width:100%; text-align:center;}
  }

  /* Documents page - katalog PDFów pogrupowanych tematycznie */  .documents-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:12px;}
  .document-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;
    background:var(--black-2);border:1px solid var(--border);
    text-decoration:none;transition:all .15s;color:var(--white);}
  .document-card:hover{border-color:var(--yellow);background:rgba(248,222,123,0.03);}
  .document-icon{font-size:26px;flex-shrink:0;color:var(--yellow);line-height:1;padding-top:2px;}
  .document-info{flex:1;min-width:0;}
  .document-name{font-family:var(--font-display);letter-spacing:1px;font-size:14px;
    text-transform:uppercase;color:var(--white);margin-bottom:4px;line-height:1.35;}
  .document-desc{font-size:12px;color:var(--gray);line-height:1.5;margin-bottom:6px;}
  .document-meta{font-size:10px;color:var(--gray-dim);letter-spacing:1px;text-transform:uppercase;}
  .document-action{font-size:24px;color:var(--yellow-dim);flex-shrink:0;transition:color .15s;padding-top:2px;}
  .document-card:hover .document-action{color:var(--yellow);}
  @media (max-width:700px){
    .documents-grid{grid-template-columns:1fr;}
    .document-card{padding:14px;}
    .document-name{font-size:12px;}
  }

  .footer-note{width:100%;text-align:center;font-size:10px;color:var(--gray-dim);letter-spacing:1.5px;margin-top:16px;text-transform:uppercase;}
  .footer-legal-link{color:var(--gray-dim);transition:color .15s;}
  .footer-legal-link:hover{color:var(--yellow);}
  .footer-legal-sep{color:var(--gray-dim);opacity:0.5;margin:0 4px;}
  @media (max-width:700px){
    .footer-note{line-height:1.9;}
  }

  /* Federations */
  .federations-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:14px;}
  .federation-card{background:var(--black-2);border:1px solid var(--border);padding:16px;display:flex;align-items:flex-start;gap:14px;transition:border-color .15s;}
  .federation-card:hover{border-color:var(--yellow);}
  .federation-flag{flex-shrink:0;}
  .federation-body{flex:1;min-width:0;}
  .federation-country{font-family:var(--font-display);font-size:14px;letter-spacing:1.2px;color:var(--white);text-transform:uppercase;}
  .federation-name{font-size:12px;color:var(--gray);margin-top:4px;line-height:1.4;}
  .federation-short{font-family:monospace;font-size:10px;color:var(--yellow);margin-top:6px;letter-spacing:1px;}
  .federation-links{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
  .federation-link{font-size:10px;color:var(--yellow-dim);text-transform:uppercase;letter-spacing:0.8px;border:1px solid var(--border);padding:4px 8px;transition:all .15s;white-space:nowrap;}
  .federation-link:hover{border-color:var(--yellow);color:var(--yellow);}

  /* Na mobile socials jako 2 równe kolumny (jedna pod drugą już jest zbyt karłowate). */
  @media (max-width:700px){
    /* footer-brand ("FOOT TABLE") i footer-fift (logo FIFT + nazwa) były
       dwoma flex-wrap elementami obok/pod sobą z niezależnym wyrównaniem
       (jeden do lewej, drugi wyśrodkowany) - stąd "rozjechany" wygląd.
       Grid 2 kolumny stawia je obok siebie, oba wyśrodkowane; socials i note
       zajmują pełną szerokość pod spodem. */
    .footer-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;gap:16px 12px;text-align:center;}
    .footer-brand{grid-column:1;}
    .footer-fift{grid-column:2;}
    .footer-socials{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
    .footer-note{grid-column:1/-1;}
    /* @worldfoot_table / @foot_tableeurope są za długie na 9px + gap:8px +
       padding:6px - tekst się obcinał wielokropkiem. Mniejszy font, węższy
       gap między ikoną a tekstem i mniejszy padding dają dość miejsca. */
    .footer-socials a{padding:8px 4px;gap:4px;font-size:8px;justify-content:center;text-align:center;letter-spacing:0.3px;overflow:hidden;text-overflow:ellipsis;}
    .footer-fift{font-size:10px;flex-direction:column;gap:6px;text-align:center;}
    .footer-fift img{height:30px;}
    .footer-fift-break{display:block;}
  }