/* =========================
   RESET & ANTY-OVERFLOW
========================= */
*,
*::before,
*::after { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; }
body { overflow-x: clip; max-width: 100vw; margin: 0; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* =========================
   ZMIENNE / MOTYW
========================= */
:root{
  --ruch-main:#0050b5; --ruch-accent:#00337a;
  --widzew-main:#c00000; --widzew-accent:#900000;
  --wisla-main:#0062b1; --wisla-accent:#003b6f;

  --theme-main:var(--ruch-main);
  --theme-accent:var(--ruch-accent);

  --white:#fff; --gray-bg:#eef4fb; --text:#222; --muted:#184e91;
  --card-shadow:0 4px 16px #0001; --radius:14px; --nav-radius:8px;
  --main-font:'Segoe UI', Arial, sans-serif;
  --navbar-h:56px;
}
body.ruch  { --theme-main:var(--ruch-main);  --theme-accent:var(--ruch-accent); }
body.widzew{ --theme-main:var(--widzew-main); --theme-accent:var(--widzew-accent); }
body.wisla { --theme-main:var(--wisla-main);  --theme-accent:var(--wisla-accent); }

/* =========================
   LAYOUT / BODY
========================= */
html, body { min-height: 100vh; height: 100%; }
body{
  font-family:var(--main-font);
  background:var(--gray-bg);
  display:flex; flex-direction:column;
  color:var(--text);
}

/* =========================
   NAVBAR
========================= */
.navbar{
  position:sticky; top:0; z-index:2000;
  width:100%; max-width:100vw;
  color:#fff; background:var(--theme-main);
  padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.nav-left{display:flex;gap:18px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}

.navbar a{color:#fff;font-weight:700;padding:8px 14px;border-radius:var(--nav-radius);transition:background .2s,filter .2s;display:block;line-height:1.1}
.navbar a.active,.navbar a:hover{background:var(--theme-accent)}

.navbar a.fb{display:inline-flex;align-items:center;gap:8px;background:#1877F2;color:#fff;padding:6px 12px;border-radius:999px;font-weight:600}
.navbar a.fb:hover{filter:brightness(1.06)}
.navbar a.fb svg{width:16px;height:16px;fill:#fff;display:block}
.navbar a.donate{display:inline-flex;align-items:center;gap:8px;background:#f59e0b;color:#111;padding:6px 12px;border-radius:999px;font-weight:700;line-height:1}
.navbar a.donate:hover{filter:brightness(.95)}

.nav-toggle{display:none;border:0;background:transparent;color:#fff;font-size:22px;padding:6px 8px;border-radius:8px;cursor:pointer}
.nav-toggle:focus-visible{outline:2px solid #fff7}
.desktop-only{display:inline-flex}
.mobile-only{display:none}

@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .nav-left{
    position:fixed; left:0; right:0; top:var(--navbar-h);
    max-height:calc(100vh - var(--navbar-h)); overflow:auto;
    background:var(--theme-main); flex-direction:column; gap:8px; padding:12px 16px;
    transform:translateY(-120%); transition:transform .2s ease-out;
    box-shadow:0 10px 20px #0003; z-index:2100; pointer-events:none;
  }
  .nav-left.open{transform:translateY(0);pointer-events:auto}
  .nav-right .fb,.nav-right .donate{display:none}
  .mobile-only{display:inline-flex} .desktop-only{display:none}
  body.menu-open{overflow:hidden}
}

/* =========================
   NAGŁÓWKI
========================= */
h1,h2,h3,h4,h5{margin:0 0 15px;text-align:center;color:var(--muted);font-weight:800;letter-spacing:.5px}
h2{font-size:25px} h3{font-size:21px}

/* =========================
   KONTENERY / KARTY
========================= */
.main-container,.centered-container{
  max-width:900px; width:100%;
  margin:40px auto 0; background:#fff; border-radius:var(--radius);
  box-shadow:var(--card-shadow); padding:32px 24px 28px; text-align:center;
  min-width:0; flex:1 0 auto;
}
.centered-container{max-width:550px}
.card{background:#fff;border-radius:13px;box-shadow:0 2px 12px #0050b525}
.card>.card-body{padding:16px}

/* =========================
   SEKCJA WYJAZDY – PODSUMOWANIE
========================= */
.moje-wyjazdy-header,.wyjazdy-header{
  margin:34px auto 15px;text-align:center;font-size:1.18em;font-weight:600;color:var(--muted);
  display:flex;justify-content:center;align-items:flex-end;gap:14px;flex-wrap:wrap;letter-spacing:.5px;
  padding-inline:12px; max-width:100%;
}
.wyjazdy-count{font-size:2.2em;font-weight:900;color:var(--theme-main);margin:0 7px 0 3px;line-height:1}
.wyjazdy-km{font-size:2em;font-weight:900;color:#208724;margin:0 2px 0 5px;line-height:1}
.wyjazdy-label{font-size:1em;color:var(--muted)}

/* — mini pasek z rankingiem — */
.rank-line{ width:100%; text-align:center; margin-top:6px; font-size:15px; color:#0f2542 }
.rank-badge{ display:inline-block; padding:3px 8px; border-radius:999px; background:#0b4b8c; color:#fff; font-weight:900; font-size:14px; }
.rank-of{ margin-left:6px; color:#54657a; font-weight:700; }
.rank-line .sep{ margin:0 8px; color:#9aa7bb; }

/* =========================
   TABELE
========================= */
.table-holder{
  width:100%; max-width:100%;
  overflow-x:auto; overflow-y:visible !important;
  margin:0 auto; display:flex; justify-content:center;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.table-holder table{
  border-collapse:separate !important; border-spacing:0 !important;
  margin:0 0 24px; background:#fff; border-radius:13px; overflow:hidden;
  box-shadow:0 2px 12px #0050b525; font-size:15.5px;
  width:min(860px,100%);
  min-width:min(420px,100%);
  table-layout:auto;
}
.table-holder th,.table-holder td{
  padding:9px 13px; border:1px solid #dde2ec; text-align:center; white-space:nowrap;
  overflow-wrap:anywhere; word-break:break-word; max-width:100%;
}
.table-holder th{
  background:var(--theme-main); color:#fff; font-weight:700; font-size:16px;
}
.table-holder tr:nth-child(even){ background:#f5f8fc; }
.table-holder tbody tr:hover{ background:#f1f6ff; }

/* Sticky header – tylko dla widoków innych niż „Moje wyjazdy” */
@media (min-width:701px){
  .table-holder thead th{ position:sticky; top:var(--navbar-h); z-index:1; }
}

/* Kolumny „Moje wyjazdy” – desktop */
@media (min-width:701px){
  .table-holder.trips th:nth-child(1),
  .table-holder.trips td:nth-child(1){ width:120px; }
  .table-holder.trips th:nth-child(5),
  .table-holder.trips td:nth-child(5){ width:90px; text-align:right; }
  .table-holder.trips th:nth-child(6),
  .table-holder.trips td:nth-child(6){ width:70px; text-align:center; }
}

/* Sort – pojedyncza ikonka */
.table-holder th.sortable{ position:relative; cursor:pointer; user-select:none; padding-right:26px; }
.table-holder th.sortable::after{ content:none !important; }
.table-holder th.sortable .sort-ind{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:12px; opacity:.9; line-height:1;
}
.table-holder th.sortable .sort-ind::before{ content:attr(data-sym); }

/* Ranking: bez sticky (opcjonalna klasa) */
.table-holder.no-sticky thead th{ position:static !important; top:auto !important; }
.table-holder.no-sticky table{ border-collapse:collapse !important; border-spacing:0 !important; }
.table-holder.ranking th.col-rank,
.table-holder.ranking td:first-child{ width:88px; max-width:88px; text-align:center; }

/* Przywrócenie klasycznego modelu tabel (gdy coś go nadpisze) */
@media (min-width:701px){
  .table-holder table{ border-collapse:separate !important; border-spacing:0 !important; }
  .table-holder thead{ display:table-header-group !important; }
  .table-holder tbody{ display:table-row-group  !important; }
  .table-holder tr   { display:table-row        !important; margin:0 !important; }
  .table-holder th, .table-holder td { display:table-cell !important; }
  .table-holder thead tr{ height:auto !important; }
  .table-holder th{ line-height:1.2; padding-top:10px; padding-bottom:10px; }
}

/* =========================
   „Moje wyjazdy” – akordeon tylko na telefonie
========================= */
.trips-accordion{ display:none; }
@media (max-width:640px){
  .table-holder.trips{ display:none; }
  .trips-accordion{ display:block; max-width:100%; margin:12px auto; padding-inline:12px; }
  .trips-accordion details{
    background:#fff; border:1px solid #e6edf7; border-radius:14px;
    box-shadow:0 2px 10px #184e9112; margin:10px 0; overflow:hidden;
  }
  .trips-accordion summary{
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 14px; list-style:none; cursor:pointer; outline:0;
    font-weight:700; color:#0b4b8c; background:#f7fbff;
    transition:background .15s, color .15s, filter .15s;
  }
  .trips-accordion summary::-webkit-details-marker{ display:none; }
  .trips-accordion summary::after{
    content:"›"; font-size:20px; line-height:1; margin-left:10px;
    transform:rotate(90deg); transition:transform .2s, color .2s; color:var(--theme-main);
  }
  .trips-accordion summary:hover,
  .trips-accordion summary:active,
  .trips-accordion summary:focus-visible{ background:#eef7ff; }
  .trips-accordion details[open] summary{
    background: color-mix(in srgb, var(--theme-main) 12%, #fff); color:#103b74;
  }
  .trips-accordion details[open] summary::after{ transform:rotate(270deg); color:var(--theme-accent); }
  .trips-accordion .acc-table{ width:100%; border-collapse:collapse; }
  .trips-accordion .acc-table th,
  .trips-accordion .acc-table td{
    text-align:left; padding:10px 14px; border-bottom:1px solid #eef3fb;
    overflow-wrap:anywhere; word-break:break-word;
  }
  .trips-accordion .acc-table th{ width:42%; color:var(--muted); font-weight:700; }
  .trips-accordion .acc-table tr:nth-child(even){ background:#f9fbff; }
  .trips-accordion .km{ color:#208724; font-weight:800; }
  .trips-accordion .actions{ display:flex; justify-content:flex-end; gap:10px; }
}

/* =========================
   MAPA
========================= */
.lw-team-map{
  position:relative; width:100%; max-width:100%;
  aspect-ratio:4/3;
  background:radial-gradient(1200px 600px at 20% 10%, #f4faff 0, #eaf5ff 40%, #e1f0fb 100%);
  border-radius:16px; overflow:hidden; box-shadow:0 4px 22px 0 #0092f211;
}
.lw-team-map__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:50% 50%; filter:saturate(.95) contrast(1.02); pointer-events:none; user-select:none; }
.lw-team-pin{
  position:absolute; transform:translate(-50%,-90%); width:68px; height:68px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:999px; border:2px solid #0092f233;
  box-shadow:0 8px 24px #00337a22, 0 2px 8px #00337a12;
  text-decoration:none; transition:transform .12s, box-shadow .12s, border-color .12s;
}
.lw-team-pin img{ width:90%; height:90%; object-fit:contain; image-rendering:-webkit-optimize-contrast; transform-origin:center; animation:lw-pin-bob 3.6s ease-in-out infinite; }
.lw-team-pin::before{ content:""; position:absolute; left:50%; top:50%; width:68px; height:68px; border-radius:999px; border:3px solid #0092f233; transform:translate(-50%,-50%) scale(1); animation:lw-pin-pulse 2.4s ease-out infinite; pointer-events:none; }
.lw-team-pin::after{ content:""; position:absolute; bottom:-6px; left:50%; width:10px; height:10px; background:#0092f2; border:2px solid #fff; border-radius:999px; transform:translateX(-50%); box-shadow:0 0 0 6px #0092f21a; }
.lw-team-pin:hover{ border-color:#0092f277; transform:translate(-50%,-92%) scale(1.03); }
.lw-team-pin:hover img{ animation-play-state:paused; }
@media (max-width:680px){ .lw-team-pin{ width:56px; height:56px; } }
@media (prefers-reduced-motion:reduce){ .lw-team-pin img,.lw-team-pin::before{ animation:none !important; } }
@keyframes lw-pin-bob{ 0%{transform:translateY(0)} 50%{transform:translateY(-4%)} 100%{transform:translateY(0)} }
@keyframes lw-pin-pulse{ 0%{transform:translate(-50%,-50%) scale(.95); opacity:.55 } 70%{opacity:0} 100%{transform:translate(-50%,-50%) scale(1.55); opacity:0} }

.map-fallback{ display:none; gap:10px; justify-content:center; flex-wrap:wrap; }
.map-fallback .btn{ background:#0092f2; color:#fff; padding:8px 14px; border-radius:9px; font-weight:700; text-decoration:none }
.map-fallback .btn:hover{ background:#035fa5 }
@media (max-width:700px){ .lw-team-map{ display:none !important } .map-fallback{ display:flex !important } }

/* =========================
   FIXY sticky/thead dla Chrome/Edge
========================= */
@media (min-width:701px){
  .table-holder table{ border-collapse:separate !important; border-spacing:0 !important; }
  .table-holder thead th{
    position:sticky; top:var(--navbar-h);
    background:var(--theme-main); box-shadow:0 1px 0 #dde2ec; margin:0;
    padding-top:10px; padding-bottom:10px;
  }
  .table-holder thead tr{ height:auto !important; }
}

/* Usunięcie sticky tylko na „Moje wyjazdy” */
.table-holder.trips thead th{ position:static !important; top:auto !important; box-shadow:none !important; }
.table-holder.trips thead{ display:table-header-group !important; }
.table-holder.trips tbody{ display:table-row-group  !important; }
.table-holder.trips tr   { display:table-row        !important; }
.table-holder.trips th,
.table-holder.trips td   { display:table-cell       !important; }
.table-holder.trips th{ line-height:1.2; padding-top:10px; padding-bottom:10px; }

/* =========================
   STOPKA
========================= */
.footer{
  margin-top:auto; width:100%; max-width:100vw;
  background:var(--theme-main); color:#fff; text-align:center;
  padding:18px 16px; font-size:1rem;
  border-top:2px solid var(--theme-accent);
  box-shadow:0 -2px 10px #00337a11;
}
.footer > div{ max-width:900px; margin:0 auto; padding:0 12px; }
.footer p,.footer span{ margin:4px 0; display:block; }
.footer a{ color:#fff; text-decoration:underline; font-weight:600; }
.footer a:hover{ color:#ffd700; }

/* =========================
   PAGINACJA
========================= */
.pagination{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:10px; margin:14px auto 18px; max-width:min(92vw, 560px);
  padding-inline:12px;
}
.pagination a, .pagination span{
  display:inline-block; min-height:40px; padding:8px 14px;
  border-radius:999px; font-weight:700;
  background:#f7fafd;
  border:1px solid color-mix(in srgb, var(--theme-main) 22%, transparent);
  color:var(--theme-main);
  box-shadow:0 2px 6px #184e9114;
  line-height:1; user-select:none;
}
.pagination a:hover{ background:var(--theme-accent); color:#fff; }
.pagination .active{ background:var(--theme-main); color:#fff; border-color:var(--theme-main); }
.pagination .prev, .pagination .next{ padding-inline:14px; }

/* === „MOJE WYJAZDY”: bez poziomego scrolla === */
.table-holder.trips { max-width:100%; overflow-x:hidden; }
.table-holder.trips table{ width:100%; max-width:100%; table-layout:fixed; }
.table-holder.trips th, .table-holder.trips td{
  white-space:normal; word-break:break-word; overflow-wrap:anywhere;
}
.table-holder.trips th:nth-child(1),
.table-holder.trips td:nth-child(1),
.table-holder.trips th:nth-child(4),
.table-holder.trips td:nth-child(4),
.table-holder.trips th:nth-child(5),
.table-holder.trips td:nth-child(5),
.table-holder.trips th:nth-child(6),
.table-holder.trips td:nth-child(6){ white-space:nowrap; }
@media (min-width:701px){
  .table-holder.trips th:nth-child(1),
  .table-holder.trips td:nth-child(1){ width:120px; }
  .table-holder.trips th:nth-child(5),
  .table-holder.trips td:nth-child(5){ width:90px; text-align:right; }
  .table-holder.trips th:nth-child(6),
  .table-holder.trips td:nth-child(6){ width:70px; text-align:center; }
}

/* === HAMBURGER – mobile === */
@media (max-width:900px){
  .nav-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    width:42px; height:42px;
    color:#fff; background:transparent; border:0;
    border-radius:10px; font-size:24px; line-height:1;
    cursor:pointer;
  }
  .nav-left{
    position:fixed; left:0; right:0; top:var(--navbar-h,56px);
    z-index:2100; background:var(--theme-main);
    flex-direction:column; gap:10px; padding:12px 16px;
    max-height:calc(100vh - var(--navbar-h,56px));
    overflow:auto; transform:translateY(-120%); transition:transform .2s ease-out; pointer-events:none;
  }
  .nav-left.open{ transform:translateY(0); pointer-events:auto; }
  .desktop-only{ display:none !important; }
  .mobile-only{ display:inline !important; }
}

/* Utility */
.stack{ display:flex; flex-direction:column; gap:10px; }
.btn.block{ display:block; width:100%; text-align:center; }
.link-like{ background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }

/* ===== Wiersz listy meczów – z kolumną YT =====
   +/- | data | nazwa | YT | km | wynik */
.row{
  display:grid;
  grid-template-columns: 28px 95px 1fr 24px 90px 60px; /* osobna kolumna 24px na YT */
  align-items:center;
  gap:6px;
  padding:8px 6px;
  border-bottom:1px solid #eef5ff;
}
.row:last-child{ border-bottom:none; }

.col-btn  { display:flex; justify-content:center; }
.col-date { color:#40608A; }
.col-name { font-weight:600; display:flex; align-items:center; gap:6px; }

/* NOWE: kolumna YT */
.col-yt   { width:24px; display:flex; align-items:center; justify-content:center; }

/* liczby po prawej */
.col-km   { text-align:right; color:#40608A; white-space:nowrap; }
.col-res  { text-align:right; color:#40608A; }

/* Ikonka YouTube używana w linku .ytlink */
.ytlink{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; }
.ytlink svg{ width:18px; height:18px; display:block; }
.ytlink .body{ fill:#ff0000; }  /* korpus logo */
.ytlink .tri { fill:#fff; }     /* trójkąt play */