<!doctype html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#080d18" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="PortowyNews" />
    <meta
      name="description"
      content="PortowyNews — centrum dowodzenia kibica. Najnowsze wiadomości o Pogoni Szczecin zebrane w jednym miejscu."
    />
    <link rel="icon" type="image/png" href="assets/portowynews-logo.png" />
    <link rel="apple-touch-icon" href="assets/icon-192.png" />
    <link rel="manifest" href="manifest.webmanifest" />
    <title>PortowyNews — Centrum Dowodzenia Kibica</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              port: {
                red: '#d52a45',
                dark: '#080d18',
                panel: '#101827',
                line: '#202c3d',
                muted: '#8e9aac',
              },
            },
            fontFamily: {
              sans: ['DM Sans', 'sans-serif'],
              display: ['Space Grotesk', 'sans-serif'],
            },
          },
        },
      }
    </script>
    <style>
      :root {
        color-scheme: dark;
      }

      body {
        background:
          radial-gradient(ellipse at 75% -10%, rgb(98 23 43 / 18%), transparent 36rem),
          #080d18;
        font-family: 'DM Sans', sans-serif;
      }

      .hero-grid {
        background-image:
          linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
          linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
        background-size: 34px 34px;
        mask-image: linear-gradient(to right, black, transparent 85%);
      }

      .news-card {
        animation: rise-in 420ms ease both;
      }

      .news-card:hover .news-arrow {
        transform: translate(3px, -3px);
      }

      .news-arrow {
        transition: transform 180ms ease;
      }

      .editorial-body { color: #cbd5e1; font-family: 'DM Sans', sans-serif; font-size: 1.05rem; line-height: 1.9; }
      .editorial-body h2 { margin: 2rem 0 .75rem; color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 700; line-height: 1.2; }
      .editorial-body h3 { margin: 1.5rem 0 .6rem; color: #f1f5f9; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 600; line-height: 1.3; }
      .editorial-body p { margin: 0 0 1.25rem; }
      .editorial-body ul, .editorial-body ol { margin: 0 0 1.5rem; padding-left: 1.6rem; }
      .editorial-body ul { list-style: disc; }
      .editorial-body ol { list-style: decimal; }
      .editorial-body li { margin: .35rem 0; padding-left: .25rem; }
      .editorial-body blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1rem; border-left: 3px solid #d52a45; color: #aeb9c9; }
      .editorial-body blockquote p:last-child { margin-bottom: 0; }
      .editorial-body a { color: #ff9aab; text-decoration: underline; text-underline-offset: 3px; }
      .editorial-image { overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); border-radius: 1rem; background: #101827; }
      .editorial-image img { display: block; width: 100%; max-height: 680px; object-fit: cover; }
      .editorial-image figcaption { padding: .65rem 1rem; color: #94a3b8; font-size: .75rem; }
      .editorial-prose strong { color: white; font-weight: 700; }

      .headline-viewport::before,
      .headline-viewport::after {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        width: 1.5rem;
        content: '';
        pointer-events: none;
      }

      .headline-viewport::before {
        left: 0;
        background: linear-gradient(90deg, #0b111d, transparent);
      }

      .headline-viewport::after {
        right: 0;
        background: linear-gradient(270deg, #0b111d, transparent);
      }

      .headline-track.is-rolling {
        animation: headline-scroll var(--headline-duration, 45s) linear infinite;
      }

      .headline-viewport:hover .headline-track,
      .headline-viewport:focus-within .headline-track {
        animation-play-state: paused;
      }

      .matchday-viewport {
        position: relative;
        overflow: hidden;
      }

      .matchday-viewport::before,
      .matchday-viewport::after {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        width: 1rem;
        content: '';
        pointer-events: none;
      }

      .matchday-viewport::before {
        left: 0;
        background: linear-gradient(90deg, #0b111d, transparent);
      }

      .matchday-viewport::after {
        right: 0;
        background: linear-gradient(270deg, #0b111d, transparent);
      }

      .matchday-track.is-rolling {
        animation: matchday-scroll var(--matchday-duration, 60s) linear infinite;
      }

      .matchday-viewport:hover .matchday-track,
      .matchday-viewport:focus-within .matchday-track,
      .matchday-viewport.is-paused .matchday-track {
        animation-play-state: paused;
      }

      .skeleton {
        background: linear-gradient(90deg, #121b2a 25%, #1a2636 50%, #121b2a 75%);
        background-size: 200% 100%;
        animation: shimmer 1.4s infinite linear;
      }

      @keyframes shimmer {
        to {
          background-position: -200% 0;
        }
      }

      @keyframes rise-in {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes headline-scroll {
        to {
          transform: translateX(-50%);
        }
      }

      @keyframes matchday-scroll {
        to {
          transform: translateX(-50%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
        }

        #headline-ticker .headline-viewport {
          overflow-x: auto;
        }

        .headline-track.is-rolling {
          animation: none !important;
          transform: none !important;
        }

        .matchday-viewport {
          overflow-x: auto;
        }

        .matchday-track.is-rolling {
          animation: none !important;
          transform: none !important;
        }
      }
    </style>
  </head>
  <body class="min-h-screen text-slate-100 antialiased selection:bg-port-red/40">
    <header class="border-b border-white/[0.07] bg-port-dark/80 backdrop-blur-xl">
      <div class="mx-auto flex max-w-[1440px] items-center justify-between gap-5 px-4 py-4 sm:px-7 lg:px-10">
        <a class="flex items-center gap-3" href="#wiadomosci" aria-label="PortowyNews — strona główna" data-page-link>
          <img class="h-14 w-auto shrink-0 object-contain" src="assets/portowynews-logo.png" alt="" />
          <span class="min-w-0">
            <span class="block whitespace-nowrap font-display text-lg font-bold tracking-tight text-white sm:text-xl">PORTOWY<span class="text-port-red">news</span></span>
            <span class="hidden text-[10px] font-semibold uppercase tracking-[.2em] text-slate-500 sm:block">Centrum dowodzenia kibica</span>
          </span>
        </a>

        <nav class="hidden items-center gap-4 text-sm font-medium text-slate-400 lg:gap-7 xl:flex" aria-label="Nawigacja główna">
          <a class="text-white" href="#wiadomosci" data-page-link>Wiadomości</a>
          <a class="transition hover:text-white" href="#klub" data-page-link>Klub</a>
          <a class="transition hover:text-white" href="#przewodnik" data-page-link>Przewodnik</a>
          <a class="transition hover:text-white" href="#wesprzyj" data-page-link>Wesprzyj</a>
          <a class="transition hover:text-white" href="#ustawienia" data-page-link>Ustawienia</a>
        </nav>

        <a href="#wiadomosci" data-page-link class="hidden items-center gap-2 rounded-lg bg-white/[0.06] px-3 py-2 text-xs font-semibold text-slate-300 transition hover:bg-white/10 sm:inline-flex sm:px-4 sm:text-sm">
          <span class="h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_10px_#34d399]"></span>
          <span class="hidden sm:inline">Centrum aktualne</span>
          <span class="sm:hidden">Na żywo</span>
        </a>
        <button id="install-app-button" class="hidden min-h-10 shrink-0 items-center gap-1.5 rounded-lg border border-red-300/20 bg-port-red/10 px-2.5 text-[10px] font-semibold text-red-100 transition hover:bg-port-red/20 focus:outline-none focus:ring-2 focus:ring-port-red/60 sm:gap-2 sm:px-4 sm:text-xs" type="button" aria-label="Zainstaluj PortowyNews jako aplikację" title="Dodaj PortowyNews do ekranu głównego, aby otwierać go jak aplikację.">
          <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 16v4h14v-4"/></svg>
          <span class="inline sm:hidden">Instaluj</span>
          <span class="hidden sm:inline">Zainstaluj aplikację</span>
        </button>
      </div>
      <nav class="mx-auto flex max-w-[1440px] items-stretch justify-between gap-1 border-t border-white/[0.04] px-3 pt-2 sm:px-7 lg:px-10 xl:hidden" aria-label="Nawigacja główna">
        <a class="flex min-w-0 flex-1 flex-col items-center justify-center rounded-xl px-1 py-1.5 text-center text-white transition hover:bg-white/[0.06] focus:outline-none focus:ring-2 focus:ring-port-red/60" href="#wiadomosci" data-page-link aria-current="page" aria-label="Wiadomości" title="Wiadomości">
          <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7A2.5 2.5 0 0 1 17.5 16H9l-5 4v-3.5A2.5 2.5 0 0 1 4 13.5v-7Z"/><path d="M8 8h8M8 11h5"/></svg>
          <span class="mt-1 text-[9px] font-medium leading-none">Wiadomości</span>
        </a>
        <a class="flex min-w-0 flex-1 flex-col items-center justify-center rounded-xl px-1 py-1.5 text-center text-slate-400 transition hover:bg-white/[0.06] hover:text-white focus:outline-none focus:ring-2 focus:ring-port-red/60" href="#klub" data-page-link aria-label="Klub" title="Klub">
          <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 19v-1a4 4 0 0 0-8 0v1"/><circle cx="12" cy="8" r="3.5"/><path d="M5 19v-1a3 3 0 0 1 3-3M19 19v-1a3 3 0 0 0-3-3"/></svg>
          <span class="mt-1 text-[9px] font-medium leading-none">Klub</span>
        </a>
        <a class="flex min-w-0 flex-1 flex-col items-center justify-center rounded-xl px-1 py-1.5 text-center text-slate-400 transition hover:bg-white/[0.06] hover:text-white focus:outline-none focus:ring-2 focus:ring-port-red/60" href="#przewodnik" data-page-link aria-label="Przewodnik" title="Przewodnik">
          <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4.5A2.5 2.5 0 0 1 8.5 2H18a2 2 0 0 1 2 2v15.5a1.5 1.5 0 0 1-2.3 1.3L12 17.5l-5.7 3.3A1.5 1.5 0 0 1 4 19.5V6.5A2 2 0 0 1 6 4.5Z"/><path d="M8.5 8h7M8.5 11h7"/></svg>
          <span class="mt-1 text-[9px] font-medium leading-none">Przewodnik</span>
        </a>
        <a class="flex min-w-0 flex-1 flex-col items-center justify-center rounded-xl px-1 py-1.5 text-center text-slate-400 transition hover:bg-white/[0.06] hover:text-white focus:outline-none focus:ring-2 focus:ring-port-red/60" href="#wesprzyj" data-page-link aria-label="Wesprzyj" title="Wesprzyj">
          <svg viewBox="0 0 24 24" class="h-4 w-4" fill="currentColor" stroke="currentColor" stroke-width="0.8" aria-hidden="true"><path d="M12 21.35 10.55 20C5.4 15.36 2 12.28 2 8.5A4.5 4.5 0 0 1 6.5 4c1.74 0 3.41.81 4.5 2.09A6.06 6.06 0 0 1 15.5 4 4.5 4.5 0 0 1 20 8.5c0 3.78-3.4 6.86-8.55 11.5L12 21.35Z"/></svg>
          <span class="mt-1 text-[9px] font-medium leading-none">Wesprzyj</span>
        </a>
        <a class="flex min-w-0 flex-1 flex-col items-center justify-center rounded-xl px-1 py-1.5 text-center text-slate-400 transition hover:bg-white/[0.06] hover:text-white focus:outline-none focus:ring-2 focus:ring-port-red/60" href="#ustawienia" data-page-link aria-label="Ustawienia" title="Ustawienia">
          <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1 1 0 0 0 .2 1.1l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1 1 0 0 0-1.1-.2 1 1 0 0 0-.6.9V19a2 2 0 1 1-4 0v-.1a1 1 0 0 0-.6-.9 1 1 0 0 0-1.1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1 1 0 0 0 .2-1.1 1 1 0 0 0-.9-.6H5a2 2 0 1 1 0-4h.1a1 1 0 0 0 .9-.6 1 1 0 0 0-.2-1.1l-.1-.1A2 2 0 1 1 8.5 4.6l.1.1a1 1 0 0 0 1.1.2 1 1 0 0 0 .6-.9V4a2 2 0 1 1 4 0v.1a1 1 0 0 0 .6.9 1 1 0 0 0 1.1-.2l.1-.1A2 2 0 0 1 19.4 6.6l-.1.1a1 1 0 0 0-.2 1.1 1 1 0 0 0 .9.6H20a2 2 0 1 1 0 4h-.1a1 1 0 0 0-.9.6Z"/></svg>
          <span class="mt-1 text-[9px] font-medium leading-none">Ustawienia</span>
        </a>
      </nav>
      <section id="matchday-ticker" class="border-t border-white/[0.05] bg-[#0b111d]/80 px-4 py-2 sm:px-7 lg:px-10" aria-label="Wyniki całej kolejki Ekstraklasy">
        <div class="mx-auto max-w-[1440px]">
          <div class="mb-1.5 flex items-center justify-between gap-3 px-0.5">
            <span class="text-[9px] font-bold uppercase tracking-[.17em] text-red-200/75">Ekstraklasa</span>
            <span id="matchday-round" class="text-[9px] font-medium uppercase tracking-[.12em] text-slate-500">Ładowanie wyników…</span>
          </div>
          <div class="flex items-center gap-3">
            <div id="matchday-list" class="matchday-viewport min-w-0 flex-1 py-0.5" aria-label="Mecze bieżącej kolejki">
              <div id="matchday-track" class="matchday-track flex w-max items-stretch" role="list" aria-live="off"></div>
            </div>
            <a class="hidden shrink-0 text-[9px] font-semibold text-slate-500 underline decoration-white/20 underline-offset-2 transition hover:text-white md:block" href="https://ekstraklasa.org/terminarz/" target="_blank" rel="noopener noreferrer">Terminarz</a>
          </div>
        </div>
        <p id="matchday-status" class="mx-auto mt-1 max-w-[1440px] text-[9px] text-slate-500" role="status">Wyniki i terminy są pobierane automatycznie ze strony Ekstraklasy.</p>
      </section>
      <div id="headline-ticker" class="border-t border-white/[0.05] bg-[#0b111d]/80 px-4 py-2 sm:px-7 lg:px-10" role="region" aria-label="Nowe wiadomości">
        <div class="mx-auto flex max-w-[1440px] items-center gap-3 overflow-hidden rounded-lg border border-red-400/15 bg-[#0b111d]/90">
          <div class="flex shrink-0 items-center gap-2 border-r border-red-400/15 bg-red-500/[0.08] px-3 text-[10px] font-extrabold uppercase tracking-[.14em] text-red-200 sm:px-4">
            <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-port-red"></span>
            <span class="hidden sm:inline">Nowe wiadomości</span>
            <span class="sm:hidden">Nowe</span>
          </div>
          <div class="headline-viewport relative min-w-0 flex-1 overflow-hidden" aria-live="off">
            <div id="headline-track" class="headline-track flex w-max items-center py-3">
              <div class="headline-group flex shrink-0 items-center gap-8 pr-8">
                <span class="text-xs font-medium text-slate-400">Ładowanie nowych wiadomości…</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <aside id="ios-install-hint" class="mx-auto mt-4 hidden max-w-[1440px] px-4 sm:px-7 lg:px-10" role="status" aria-label="Instalacja PortowyNews na iPhonie lub iPadzie">
      <div class="flex items-start gap-3 rounded-xl border border-red-300/15 bg-gradient-to-r from-port-red/[0.12] to-[#101827] px-4 py-3">
        <span class="mt-0.5 grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-red-200/15 bg-red-300/[0.08] text-red-200" aria-hidden="true">
          <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3m0 0L8 7m4-4 4 4"/><path d="M5 11v8h14v-8"/></svg>
        </span>
        <p class="min-w-0 flex-1 text-xs leading-5 text-slate-300">
          <span class="font-semibold text-white">Zainstaluj PortowyNews na swoim telefonie.</span>
          W Safari stuknij <span class="font-semibold text-red-200">Udostępnij</span>, przewiń menu czynności w dół i wybierz „Dodaj do ekranu początkowego”. Nie wybieraj wysyłania ani udostępniania linku.
        </p>
        <button id="dismiss-ios-install-hint" class="-mr-2 -mt-2 grid h-10 w-10 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-white/[0.06] hover:text-white focus:outline-none focus:ring-2 focus:ring-port-red/60" type="button" aria-label="Zamknij podpowiedź instalacji">
          <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m18 6-12 12M6 6l12 12"/></svg>
        </button>
      </div>
    </aside>

    <dialog id="ios-install-dialog" class="w-[calc(100%-2rem)] max-w-lg rounded-2xl border border-white/10 bg-[#101827] p-0 text-white shadow-2xl backdrop:bg-black/70" aria-labelledby="ios-install-dialog-title" aria-describedby="ios-install-dialog-description">
      <div class="p-5 sm:p-6">
        <div class="flex items-start justify-between gap-4">
          <div>
            <p class="text-[10px] font-bold uppercase tracking-[.18em] text-port-red">Instalacja na iPhonie</p>
            <h2 id="ios-install-dialog-title" class="mt-2 font-display text-xl font-bold text-white">Dodaj PortowyNews do ekranu początkowego</h2>
          </div>
          <button id="ios-install-dialog-close" type="button" class="grid h-10 w-10 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-white/[0.06] hover:text-white focus:outline-none focus:ring-2 focus:ring-port-red/60" aria-label="Zamknij instrukcję instalacji">
            <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m18 6-12 12M6 6l12 12"/></svg>
          </button>
        </div>
        <p id="ios-install-dialog-description" class="mt-3 text-xs leading-5 text-slate-300">iPhone nie pozwala stronie uruchomić instalacji bezpośrednio. Dokończ ją w menu Safari:</p>
        <ol class="mt-4 space-y-3 text-xs leading-5 text-slate-300">
          <li class="flex gap-3"><span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-port-red/15 text-[10px] font-bold text-red-200">1</span><span>Otwórz tę stronę w <strong class="text-white">Safari</strong>. Jeśli link otworzył się w innym programie, wybierz w nim „Otwórz w Safari”.</span></li>
          <li class="flex gap-3"><span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-port-red/15 text-[10px] font-bold text-red-200">2</span><span>Stuknij ikonę <strong class="text-white">Udostępnij</strong> — kwadrat ze strzałką w górę.</span></li>
          <li class="flex gap-3"><span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-port-red/15 text-[10px] font-bold text-red-200">3</span><span>W dolnym menu przewiń listę czynności i wybierz <strong class="text-white">Dodaj do ekranu początkowego</strong>, a następnie stuknij <strong class="text-white">Dodaj</strong>. Nie wybieraj „Wiadomości” ani innej opcji wysyłania linku.</span></li>
        </ol>
        <button id="ios-install-dialog-done" type="button" class="mt-5 inline-flex min-h-11 w-full items-center justify-center rounded-lg bg-port-red px-4 py-2.5 text-xs font-bold text-white transition hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-port-red/60">Rozumiem</button>
      </div>
    </dialog>

    <main class="mx-auto max-w-[1440px] px-4 pb-14 sm:px-7 lg:px-10">
      <div id="wiadomosci" data-page-view="wiadomosci">
      <section id="news-home-hero" class="relative isolate mb-8 mt-6 overflow-hidden rounded-2xl border border-white/[0.08] bg-[#0e1624] px-5 py-7 sm:mb-10 sm:px-9 sm:py-10">
        <div class="hero-grid absolute inset-0 -z-10 opacity-60"></div>
        <div class="absolute -right-10 -top-20 -z-10 h-72 w-72 rounded-full bg-port-red/10 blur-3xl sm:right-16"></div>
        <div class="flex flex-col justify-between gap-8 sm:flex-row sm:items-end">
          <div class="max-w-2xl">
            <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-red-400/20 bg-red-500/[0.08] px-3 py-1.5 text-[10px] font-bold uppercase tracking-[.16em] text-red-300">
              <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-port-red"></span>
              Meldunki ze Szczecina
            </div>
            <h1 class="font-display text-4xl font-bold leading-[1.06] tracking-tight text-white sm:text-5xl lg:text-6xl">
              Portowy głos.<br />
              <span class="text-slate-400">Wszystko o</span> <span class="text-port-red">Pogoni.</span>
            </h1>
            <p class="mt-4 max-w-xl text-sm leading-6 text-slate-400 sm:text-base">
              Najnowsze wiadomości o Pogoni, zebrane w jednym miejscu i prowadzące prosto do wydawców.
            </p>
          </div>
          </div>
      </section>

      <div class="grid grid-cols-1 items-start gap-7 lg:gap-8">
        <section id="article-list" class="min-w-0" aria-labelledby="news-heading">
          <div class="mb-5 flex flex-wrap items-end justify-between gap-4">
            <div>
              <div class="mb-1.5 flex items-center gap-2 text-[10px] font-bold uppercase tracking-[.2em] text-port-red">
                <span class="h-px w-5 bg-port-red"></span> <span id="article-list-kicker">Radar kibica</span>
              </div>
              <h2 id="news-heading" class="font-display text-2xl font-bold tracking-tight text-white sm:text-3xl"><span id="news-heading-primary">Najnowsze</span> <span id="news-heading-secondary" class="text-slate-500">artykuły</span></h2>
            </div>
            <button id="refresh-button" type="button" class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] px-3 py-2 text-xs font-semibold text-slate-300 transition hover:border-white/20 hover:bg-white/[0.07] focus:outline-none focus:ring-2 focus:ring-port-red/60" aria-label="Odśwież artykuły">
              <svg id="refresh-icon" viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20 7v5h-5M4 17v-5h5"/><path d="M5.6 9a7 7 0 0 1 11.6-2L20 12M4 12l2.8 5a7 7 0 0 0 11.6-2"/></svg>
              Odśwież
            </button>
          </div>

          <div class="mb-5 flex flex-col gap-3 rounded-xl border border-white/[0.07] bg-white/[0.025] p-3 sm:flex-row sm:items-center sm:justify-between sm:px-4">
            <div class="flex flex-wrap gap-1.5" id="filter-list" aria-label="Filtruj artykuły">
              <button type="button" data-filter="all" class="filter-button rounded-lg px-3 py-2 text-xs font-semibold text-slate-400 transition hover:bg-white/[0.06] hover:text-white" aria-pressed="true">Wszystkie</button>
              <button type="button" data-filter="transfer" class="filter-button rounded-lg px-3 py-2 text-xs font-semibold text-slate-400 transition hover:bg-white/[0.06] hover:text-white" aria-pressed="false">Transfery</button>
              <button type="button" data-filter="match" class="filter-button rounded-lg px-3 py-2 text-xs font-semibold text-slate-400 transition hover:bg-white/[0.06] hover:text-white" aria-pressed="false">Mecze</button>
              <div id="transfer-filter-group" class="relative hidden">
                <div class="flex items-center">
                  <button id="transfer-menu-toggle" type="button" class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-xs font-semibold text-slate-400 transition hover:bg-white/[0.06] hover:text-white focus:outline-none focus:ring-2 focus:ring-port-red/60" aria-label="Pokaż statusy transferów" aria-expanded="false" aria-controls="transfer-status-menu">
                    Status transferu
                    <svg id="transfer-menu-icon" viewBox="0 0 16 16" class="h-3.5 w-3.5 transition-transform" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m3.5 6 4.5 4 4.5-4"/></svg>
                  </button>
                </div>
                <div id="transfer-status-menu" class="absolute left-0 top-full z-20 mt-1 hidden min-w-full rounded-lg border border-white/[0.1] bg-[#111a29] p-1 shadow-xl" aria-label="Filtruj status transferu">
                  <button type="button" data-filter="rumor" class="filter-button block w-full whitespace-nowrap rounded-md px-3 py-2 text-left text-xs font-semibold text-slate-400 transition hover:bg-white/[0.06] hover:text-white">Pogłoski</button>
                  <button type="button" data-filter="confirmed" class="filter-button block w-full whitespace-nowrap rounded-md px-3 py-2 text-left text-xs font-semibold text-slate-400 transition hover:bg-white/[0.06] hover:text-white">Potwierdzone</button>
                  <button type="button" data-filter="official" class="filter-button block w-full whitespace-nowrap rounded-md px-3 py-2 text-left text-xs font-semibold text-slate-400 transition hover:bg-white/[0.06] hover:text-white">Oficjalnie</button>
                </div>
              </div>
              <button id="favorite-filter-button" type="button" data-filter="favorites" class="filter-button rounded-lg px-3 py-2 text-xs font-semibold text-slate-400 transition hover:bg-white/[0.06] hover:text-white" aria-pressed="false">
                <span class="inline-flex items-center gap-1.5">
                  <svg viewBox="0 0 24 24" class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20.8 8.8c0 4.2-8.8 10-8.8 10S3.2 13 3.2 8.8a4.4 4.4 0 0 1 8.8-.3 4.4 4.4 0 0 1 8.8.3Z"/></svg>
                  Ulubione <span id="favorites-count" class="text-[10px] text-slate-500">(0)</span>
                </span>
              </button>
            </div>
            <div class="flex flex-col gap-2 sm:flex-row">
              <button id="sort-button" type="button" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-white/[0.08] bg-port-dark/70 px-3 py-2.5 text-xs font-semibold text-slate-300 transition hover:border-red-400/30 hover:bg-[#111a29] focus:outline-none focus:ring-2 focus:ring-port-red/40" aria-label="Sortowanie: od najnowszych. Zmień na najstarsze">
                <svg viewBox="0 0 20 20" class="h-4 w-4 text-port-red" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M4 5h12M6 10h8m-6 5h4"/><path d="m14 13 2 2 2-2"/></svg>
                <span id="sort-label">Najnowsze</span>
              </button>
            </div>
          </div>
          <p id="share-status" class="sr-only" aria-live="polite"></p>

          <div class="mb-4 text-[11px] text-slate-500" aria-live="polite">
            <div class="flex min-h-5 items-center justify-between gap-3">
              <p id="feed-status">Łączenie z radarem wiadomości…</p>
              <p id="editorial-status" class="mt-1 text-[10px] text-amber-200" aria-live="polite" hidden></p>
              <p id="article-count" class="shrink-0"></p>
            </div>
            <details id="feed-failures" class="mt-2 hidden rounded-lg border border-amber-400/15 bg-amber-400/[0.04] px-3 py-2">
              <summary id="feed-failures-summary" class="cursor-pointer text-[10px] font-semibold text-amber-200"></summary>
              <ul id="feed-failures-list" class="mt-2 list-inside list-disc space-y-1 text-[10px] leading-4 text-slate-400"></ul>
            </details>
          </div>

          <div id="news-grid" class="grid grid-cols-1 gap-4 sm:grid-cols-2" aria-live="polite" aria-busy="true">
            <div class="skeleton h-64 rounded-xl"></div>
            <div class="skeleton h-64 rounded-xl"></div>
            <div class="skeleton h-64 rounded-xl"></div>
            <div class="skeleton h-64 rounded-xl"></div>
          </div>
          <div class="mt-6 flex justify-center">
            <button id="load-more" type="button" class="hidden rounded-lg border border-white/10 px-5 py-2.5 text-xs font-semibold text-slate-300 transition hover:border-port-red/50 hover:text-white">Pokaż więcej artykułów</button>
          </div>
        </section>

      </div>
      </div>

      <section id="ustawienia" data-page-view="ustawienia" hidden class="mx-auto max-w-3xl py-8 sm:py-12" aria-labelledby="settings-heading">
        <div class="mb-6">
          <p class="mb-2 text-[10px] font-bold uppercase tracking-[.2em] text-port-red">Preferencje aplikacji</p>
          <h1 id="settings-heading" class="font-display text-3xl font-bold tracking-tight text-white">Ustawienia</h1>
          <p class="mt-2 text-sm leading-6 text-slate-400">Zarządzaj powiadomieniami PortowyNews na tym urządzeniu.</p>
        </div>
        <section id="push-settings" class="rounded-xl border border-red-300/15 bg-gradient-to-r from-port-red/[0.08] to-[#101827] p-4 sm:p-5" aria-labelledby="push-settings-title">
          <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            <div class="max-w-xl">
              <h2 id="push-settings-title" class="font-display text-base font-bold text-white">Powiadomienia na telefonie</h2>
              <p class="mt-1 text-xs leading-5 text-slate-400">Dostaniesz alert, gdy redakcja opublikuje nowy artykuł w wybranym temacie. Zapisujemy techniczną subskrypcję tego urządzenia i wybrane tematy; wyłączenie powiadomień usuwa subskrypcję.</p>
            </div>
            <button id="push-toggle" type="button" class="inline-flex min-h-11 shrink-0 items-center justify-center rounded-lg bg-port-red px-4 py-2.5 text-xs font-bold text-white transition hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-port-red/60 disabled:cursor-not-allowed disabled:opacity-50" disabled>Włącz powiadomienia</button>
          </div>
          <fieldset id="push-topics" class="mt-4 flex flex-wrap gap-x-5 gap-y-3 text-xs text-slate-300" disabled>
            <legend class="sr-only">Wybierz tematy powiadomień</legend>
            <label class="inline-flex min-h-8 items-center gap-2"><input type="checkbox" data-push-topic="news" checked class="accent-red-500" /> Nowe artykuły</label>
            <label class="inline-flex min-h-8 items-center gap-2"><input type="checkbox" data-push-topic="transfers" checked class="accent-red-500" /> Transfery</label>
            <label class="inline-flex min-h-8 items-center gap-2"><input type="checkbox" data-push-topic="matches" checked class="accent-red-500" /> Mecze</label>
          </fieldset>
          <div class="mt-4 flex flex-wrap items-end gap-3">
            <label for="push-sound" class="text-xs font-semibold text-slate-300">Dźwięk w otwartej aplikacji</label>
            <select id="push-sound" class="min-h-10 rounded-lg border border-white/[0.1] bg-[#0b111d] px-3 text-xs text-white focus:outline-none focus:ring-2 focus:ring-port-red/60">
              <option value="none">Bez dodatkowego dźwięku</option>
              <option value="news1">News 1</option>
              <option value="news2">News 2</option>
            </select>
            <button id="push-sound-preview" type="button" class="min-h-10 rounded-lg border border-white/[0.1] px-3 text-xs font-semibold text-slate-300 transition hover:bg-white/[0.06] focus:outline-none focus:ring-2 focus:ring-port-red/60">Odsłuchaj</button>
            <audio id="push-sound-news1" src="./assets/notification-news-1.mp3" preload="none" hidden></audio>
            <audio id="push-sound-news2" src="./assets/notification-news-2.mp3" preload="none" hidden></audio>
          </div>
          <p class="mt-2 text-[10px] leading-5 text-slate-500">Wybrany MP3 może zagrać, gdy PortowyNews jest otwarty na ekranie. Po zamknięciu aplikacji dźwięk ustawia telefon — PWA nie może narzucić własnego MP3 systemowemu powiadomieniu.</p>
          <p id="push-status" class="mt-3 text-[11px] leading-5 text-slate-400" role="status" aria-live="polite">Sprawdzamy dostępność powiadomień…</p>
        </section>
      </section>

      <div id="klub-view" data-page-view="klub" hidden>
        <section id="klub" class="mx-auto max-w-6xl py-8 sm:py-12" aria-labelledby="club-heading">
          <div class="mb-7 max-w-3xl sm:mb-9">
            <div class="mb-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-[.2em] text-port-red">
              <span class="h-px w-5 bg-port-red"></span> Klub i jego tożsamość
            </div>
            <h1 id="club-heading" class="font-display text-3xl font-bold tracking-tight text-white sm:text-4xl">Pogoń <span class="text-slate-500">Szczecin</span></h1>
            <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-400 sm:text-base">Poznaj klub, jego szczecińskie korzenie i miejsca, w których znajdziesz sprawdzone informacje o drużynie.</p>
          </div>

          <section class="relative isolate overflow-hidden rounded-2xl border border-red-300/15 bg-gradient-to-br from-[#1b2435] via-[#111a29] to-[#21151f] p-5 sm:p-7 lg:p-9" aria-labelledby="club-identity-heading">
            <div class="absolute -right-12 -top-20 -z-10 h-72 w-72 rounded-full bg-port-red/15 blur-3xl" aria-hidden="true"></div>
            <div class="relative grid gap-7 lg:grid-cols-[1fr_auto] lg:items-end">
              <div class="max-w-2xl">
                <p class="text-[10px] font-bold uppercase tracking-[.18em] text-red-200/75">Portowcy od 1948 roku</p>
                <h2 id="club-identity-heading" class="mt-2 font-display text-2xl font-bold leading-tight text-white sm:text-3xl">Szczecińskie barwy.<br class="hidden sm:block" /> Wspólna historia.</h2>
                <p class="mt-3 max-w-xl text-xs leading-6 text-slate-300 sm:text-sm">Pogoń Szczecin to klub piłkarski ze Szczecina, związany z granatowo-bordowymi barwami i Stadionem Miejskim im. Floriana Krygiera.</p>
              </div>
              <a class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-red-200/20 bg-red-300/[0.08] px-4 py-3 text-xs font-bold text-red-100 transition hover:border-red-200/40 hover:bg-red-300/[0.14] focus:outline-none focus:ring-2 focus:ring-red-200/60" href="https://ekstraklasa.org/kluby/pogon-szczecin/?tab=team" target="_blank" rel="noopener noreferrer">
                Zobacz skład i sztab
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>
            </div>
          </section>

          <div class="mt-4 grid gap-3 sm:grid-cols-3">
            <article class="rounded-xl border border-white/[0.08] bg-port-panel/80 p-4 sm:p-5">
              <p class="text-[10px] font-bold uppercase tracking-[.16em] text-slate-500">Początki</p>
              <p class="mt-2 font-display text-xl font-bold text-white">1948</p>
              <p class="mt-1 text-xs leading-5 text-slate-400">Rok założenia klubu.</p>
            </article>
            <article class="rounded-xl border border-white/[0.08] bg-port-panel/80 p-4 sm:p-5">
              <p class="text-[10px] font-bold uppercase tracking-[.16em] text-slate-500">Miasto</p>
              <p class="mt-2 font-display text-xl font-bold text-white">Szczecin</p>
              <p class="mt-1 text-xs leading-5 text-slate-400">Dom Portowców i ich kibiców.</p>
            </article>
            <article class="rounded-xl border border-white/[0.08] bg-port-panel/80 p-4 sm:p-5">
              <p class="text-[10px] font-bold uppercase tracking-[.16em] text-slate-500">Barwy</p>
              <p class="mt-2 font-display text-xl font-bold text-white">Granat i bordo</p>
              <p class="mt-1 text-xs leading-5 text-slate-400">Kolory, które łączą pokolenia.</p>
            </article>
          </div>

          <section class="mt-8 rounded-2xl border border-white/[0.08] bg-white/[0.02] p-4 sm:mt-10 sm:p-6" aria-labelledby="club-resources-heading">
            <div class="mb-5 flex flex-wrap items-end justify-between gap-3">
              <div>
                <p class="text-[10px] font-bold uppercase tracking-[.18em] text-slate-500">Oficjalne źródła</p>
                <h2 id="club-resources-heading" class="mt-1 font-display text-xl font-bold text-white">Przejdź do wybranej sekcji</h2>
              </div>
              <p class="text-[10px] text-slate-500">Każdy skrót otwiera właściwą zakładkę profilu Pogoni</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2">
              <a href="https://ekstraklasa.org/kluby/pogon-szczecin/?tab=team" target="_blank" rel="noopener noreferrer" class="group flex min-h-24 items-center gap-4 rounded-xl border border-white/[0.08] bg-white/[0.025] p-4 transition hover:border-red-300/25 hover:bg-white/[0.05] focus:outline-none focus:ring-2 focus:ring-port-red/50 sm:p-5">
                <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-red-300/10 bg-red-300/[0.07] text-red-200" aria-hidden="true">
                  <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 4 7v5c0 5 3.4 8 8 9 4.6-1 8-4 8-9V7l-8-4Z"/><path d="m9 12 2 2 4-4"/></svg>
                </span>
                <span class="min-w-0 flex-1">
                  <span class="block font-semibold text-white">Skład i sztab</span>
                  <span class="mt-1 block text-xs leading-5 text-slate-400">Zawodnicy oraz sztab szkoleniowy Pogoni</span>
                </span>
                <svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0 text-slate-500 transition group-hover:text-red-200" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>

              <a href="https://ekstraklasa.org/kluby/pogon-szczecin/?tab=stats" target="_blank" rel="noopener noreferrer" class="group flex min-h-24 items-center gap-4 rounded-xl border border-white/[0.08] bg-white/[0.025] p-4 transition hover:border-red-300/25 hover:bg-white/[0.05] focus:outline-none focus:ring-2 focus:ring-port-red/50 sm:p-5">
                <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-red-300/10 bg-red-300/[0.07] text-red-200" aria-hidden="true">
                  <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5m0 14h16M8 15v-3m4 3V8m4 7v-5"/></svg>
                </span>
                <span class="min-w-0 flex-1">
                  <span class="block font-semibold text-white">Statystyki drużyny</span>
                  <span class="mt-1 block text-xs leading-5 text-slate-400">Wyniki i dane zespołu w rozgrywkach</span>
                </span>
                <svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0 text-slate-500 transition group-hover:text-red-200" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>

              <a href="https://ekstraklasa.org/kluby/pogon-szczecin/?tab=about" target="_blank" rel="noopener noreferrer" class="group flex min-h-24 items-center gap-4 rounded-xl border border-white/[0.08] bg-white/[0.025] p-4 transition hover:border-red-300/25 hover:bg-white/[0.05] focus:outline-none focus:ring-2 focus:ring-port-red/50 sm:p-5">
                <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-red-300/10 bg-red-300/[0.07] text-red-200" aria-hidden="true">
                  <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5m0-8h.01"/></svg>
                </span>
                <span class="min-w-0 flex-1">
                  <span class="block font-semibold text-white">O klubie</span>
                  <span class="mt-1 block text-xs leading-5 text-slate-400">Informacje i historia Pogoni Szczecin</span>
                </span>
                <svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0 text-slate-500 transition group-hover:text-red-200" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>

              <a href="https://ekstraklasa.org/kluby/pogon-szczecin/?tab=stadium" target="_blank" rel="noopener noreferrer" class="group flex min-h-24 items-center gap-4 rounded-xl border border-white/[0.08] bg-white/[0.025] p-4 transition hover:border-red-300/25 hover:bg-white/[0.05] focus:outline-none focus:ring-2 focus:ring-port-red/50 sm:p-5">
                <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-red-300/10 bg-red-300/[0.07] text-red-200" aria-hidden="true">
                  <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10 12 4l9 6v10H3V10Z"/><path d="M8 20v-6h8v6M7 10h.01M12 10h.01M17 10h.01"/></svg>
                </span>
                <span class="min-w-0 flex-1">
                  <span class="block font-semibold text-white">Stadion</span>
                  <span class="mt-1 block text-xs leading-5 text-slate-400">Stadion Miejski i informacje praktyczne</span>
                </span>
                <svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0 text-slate-500 transition group-hover:text-red-200" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>
            </div>
            <p class="mt-4 border-t border-white/[0.06] pt-3 text-[10px] leading-5 text-slate-500">Odnośniki prowadzą bezpośrednio do odpowiednich zakładek profilu Pogoni w serwisie Ekstraklasy i otwierają się w nowej karcie.</p>
          </section>

          <section id="club-standings-view" class="mt-5 rounded-2xl border border-white/[0.08] bg-white/[0.02] p-4 sm:mt-6 sm:p-6 lg:p-7" aria-labelledby="standings-heading">
            <div class="mb-5 flex flex-wrap items-end justify-between gap-3">
              <div>
                <p class="text-[10px] font-bold uppercase tracking-[.18em] text-port-red">PKO Bank Polski Ekstraklasa</p>
                <h2 id="standings-heading" class="mt-1 font-display text-2xl font-bold text-white sm:text-3xl">Tabela ligowa</h2>
                <p id="standings-season" class="mt-1 text-xs text-slate-400">Tabela sezonu</p>
              </div>
              <p id="standings-status" class="rounded-full border border-white/[0.08] bg-white/[0.025] px-3 py-1.5 text-[10px] text-slate-400" role="status" aria-live="polite">Pobieranie aktualnej tabeli…</p>
            </div>
            <div class="mb-3 flex flex-wrap gap-x-4 gap-y-2 text-[10px] text-slate-400" aria-label="Oznaczenia miejsc w tabeli">
              <span class="inline-flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-sm bg-sky-400" aria-hidden="true"></span>LM — Liga Mistrzów (1–2)</span>
              <span class="inline-flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-sm bg-rose-900" aria-hidden="true"></span>LE — zdobywca Pucharu Polski; po finale także drużyna zastępująca, jeśli trzeba</span>
              <span class="inline-flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-sm bg-orange-400" aria-hidden="true"></span>LK — dwa kolejne miejsca poza LM i LE</span>
              <span class="inline-flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-sm bg-red-400" aria-hidden="true"></span>Strefa spadkowa (16–18)</span>
            </div>
            <p id="standings-qualification-note" class="mb-3 text-[10px] leading-5 text-slate-400" role="status" aria-live="polite">Oznaczenia miejsc są wstępne do czasu potwierdzenia zdobywcy Pucharu Polski.</p>
            <div class="overflow-hidden rounded-xl border border-white/[0.08] bg-port-panel/80">
              <table class="w-full table-fixed border-collapse text-left text-xs sm:table-auto" aria-describedby="standings-status">
                <thead class="bg-white/[0.035] text-[10px] uppercase tracking-wide text-slate-500">
                  <tr>
                    <th class="w-10 px-2 py-3 text-center font-semibold sm:w-auto sm:px-3" scope="col">Poz.</th>
                    <th class="px-2 py-3 font-semibold sm:px-3" scope="col">Drużyna</th>
                    <th class="hidden px-3 py-3 text-center font-semibold sm:table-cell" scope="col">M</th>
                    <th class="hidden px-3 py-3 text-center font-semibold sm:table-cell" scope="col">W</th>
                    <th class="hidden px-3 py-3 text-center font-semibold sm:table-cell" scope="col">R</th>
                    <th class="hidden px-3 py-3 text-center font-semibold sm:table-cell" scope="col">P</th>
                    <th class="hidden px-3 py-3 text-center font-semibold sm:table-cell" scope="col">Bramki</th>
                    <th class="hidden px-3 py-3 text-center font-semibold sm:table-cell" scope="col">+/−</th>
                    <th class="w-12 px-2 py-3 text-center font-semibold sm:w-auto sm:px-3" scope="col">Pkt</th>
                  </tr>
                </thead>
                <tbody id="standings-rows" class="divide-y divide-white/[0.06]"></tbody>
              </table>
            </div>
            <p class="mt-3 text-[10px] leading-5 text-slate-500">M — mecze, W — wygrane, R — remisy, P — porażki. Po finale zdobywca Pucharu Polski otrzymuje miejsce w LE; jeśli jest już w LM, miejsce LE przypada następnej drużynie. Dwa miejsca LK trafiają do kolejnych najwyżej sklasyfikowanych drużyn. Zdobywca spoza Ekstraklasy nie jest oznaczany jako wiersz tabeli. Dane tabeli: <a id="standings-source" class="underline decoration-white/20 underline-offset-2 hover:text-white" href="https://ekstraklasa.org/tabela/" target="_blank" rel="noopener noreferrer">oficjalna tabela Ekstraklasy</a>.</p>
            <p id="standings-cup-source" class="mt-1 hidden text-[10px] leading-5 text-slate-500">Dane Pucharu Polski: <a class="underline decoration-white/20 underline-offset-2 hover:text-white" href="https://www.api-football.com/" target="_blank" rel="noopener noreferrer">API-FOOTBALL</a>.</p>
          </section>
        </section>
      </div>

      <div id="przewodnik-view" data-page-view="przewodnik" hidden>
        <section id="przewodnik" class="mx-auto max-w-6xl py-8 sm:py-12" aria-labelledby="guide-heading">
          <div class="mb-7 max-w-3xl sm:mb-9">
            <div class="mb-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-[.2em] text-port-red">
              <span class="h-px w-5 bg-port-red"></span> Strefa kibica
            </div>
            <h1 id="guide-heading" class="font-display text-3xl font-bold tracking-tight text-white sm:text-4xl">Zaplanuj <span class="text-slate-500">dzień meczowy</span></h1>
            <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-400 sm:text-base">Najważniejsze informacje o spotkaniu, biletach i stadionie — w jednym miejscu. Aktualne szczegóły organizacyjne potwierdzaj w oficjalnych serwisach.</p>
          </div>

          <section class="relative isolate overflow-hidden rounded-2xl border border-red-300/15 bg-gradient-to-br from-[#1b2435] via-[#111a29] to-[#21151f] p-5 sm:p-7 lg:p-9" aria-labelledby="matchday-heading">
            <div class="absolute -right-10 -top-20 -z-10 h-64 w-64 rounded-full bg-port-red/15 blur-3xl" aria-hidden="true"></div>
            <div class="relative flex flex-col justify-between gap-7 lg:flex-row lg:items-end">
              <div class="max-w-2xl">
                <p class="text-[10px] font-bold uppercase tracking-[.18em] text-red-200/75">Twój mecz w Szczecinie</p>
                <h2 id="matchday-heading" class="mt-2 font-display text-2xl font-bold leading-tight text-white sm:text-3xl">Od pierwszego gwizdka<br class="hidden sm:block" /> dzieli Cię kilka prostych kroków</h2>
                <p class="mt-3 max-w-xl text-xs leading-6 text-slate-300 sm:text-sm">Sprawdź termin i zasady wejścia, przygotuj bilet, a trasę na Stadion Miejski im. Floriana Krygiera zaplanuj przed wyjazdem.</p>
              </div>
              <a class="inline-flex min-h-12 shrink-0 items-center justify-center gap-2 rounded-lg bg-port-red px-5 py-3 text-xs font-bold text-white shadow-lg shadow-red-950/30 transition hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-200/70" href="https://bilety.pogonszczecin.pl/" target="_blank" rel="noopener noreferrer">
                Przejdź do biletów
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>
            </div>
          </section>

          <div class="mt-4 grid gap-3 md:grid-cols-3">
            <article class="rounded-xl border border-white/[0.08] bg-port-panel/80 p-4 sm:p-5">
              <div class="flex items-start gap-3">
                <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-red-300/15 bg-red-300/[0.08] text-xs font-bold text-red-200">01</span>
                <div>
                  <h3 class="font-display text-base font-bold text-white">Sprawdź spotkanie</h3>
                  <p class="mt-1 text-xs leading-5 text-slate-400">Zweryfikuj datę, godzinę, rywala i wynik w terminarzu rozgrywek.</p>
                </div>
              </div>
              <a class="mt-4 inline-flex min-h-10 items-center gap-2 rounded-lg border border-white/10 px-3 text-xs font-semibold text-slate-200 transition hover:border-red-300/30 hover:text-white focus:outline-none focus:ring-2 focus:ring-port-red/50" href="https://ekstraklasa.org/terminarz/" target="_blank" rel="noopener noreferrer">
                Terminarz i wyniki
                <svg viewBox="0 0 24 24" class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>
            </article>

            <article class="rounded-xl border border-white/[0.08] bg-port-panel/80 p-4 sm:p-5">
              <div class="flex items-start gap-3">
                <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-red-300/15 bg-red-300/[0.08] text-xs font-bold text-red-200">02</span>
                <div>
                  <h3 class="font-display text-base font-bold text-white">Przygotuj wejście</h3>
                  <p class="mt-1 text-xs leading-5 text-slate-400">Dostępność biletów, sektory i zasady wejścia sprawdź u klubu.</p>
                </div>
              </div>
              <a class="mt-4 inline-flex min-h-10 items-center gap-2 rounded-lg border border-white/10 px-3 text-xs font-semibold text-slate-200 transition hover:border-red-300/30 hover:text-white focus:outline-none focus:ring-2 focus:ring-port-red/50" href="https://bilety.pogonszczecin.pl/" target="_blank" rel="noopener noreferrer">
                Oficjalny system biletowy
                <svg viewBox="0 0 24 24" class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>
            </article>

            <article class="rounded-xl border border-white/[0.08] bg-port-panel/80 p-4 sm:p-5">
              <div class="flex items-start gap-3">
                <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-red-300/15 bg-red-300/[0.08] text-xs font-bold text-red-200">03</span>
                <div>
                  <h3 class="font-display text-base font-bold text-white">Zaplanuj dojazd</h3>
                  <p class="mt-1 text-xs leading-5 text-slate-400">Otwórz lokalizację stadionu i wybierz trasę odpowiednią dla siebie.</p>
                </div>
              </div>
              <a class="mt-4 inline-flex min-h-10 items-center gap-2 rounded-lg border border-white/10 px-3 text-xs font-semibold text-slate-200 transition hover:border-red-300/30 hover:text-white focus:outline-none focus:ring-2 focus:ring-port-red/50" href="https://www.google.com/maps/search/?api=1&amp;query=Stadion+Miejski+im.+Floriana+Krygiera+Szczecin" target="_blank" rel="noopener noreferrer">
                Pokaż stadion na mapie
                <svg viewBox="0 0 24 24" class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>
            </article>
          </div>

          <section class="mt-9 border-t border-white/[0.08] pt-7 sm:mt-11 sm:pt-9" aria-labelledby="shop-heading">
            <div class="mb-4 flex flex-wrap items-end justify-between gap-3">
              <div>
                <p class="text-[10px] font-bold uppercase tracking-[.18em] text-slate-500">Sklep kibica</p>
                <h2 id="shop-heading" class="mt-1 font-display text-xl font-bold text-white">Dodatki i merch dla fanów Pogoni</h2>
              </div>
              <p class="text-[10px] text-slate-500">Wersje oficjalne i fanowskie</p>
            </div>
            <div class="grid gap-3 md:grid-cols-2">
              <a class="group flex min-h-24 items-center gap-4 rounded-2xl border border-white/[0.08] bg-gradient-to-br from-white/[0.02] to-white/[0.005] p-4 transition hover:border-red-300/25 hover:bg-white/[0.05] focus:outline-none focus:ring-2 focus:ring-port-red/50 sm:p-5" href="https://sklep.pogonszczecin.pl/" target="_blank" rel="noopener noreferrer">
                <span class="grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-white/[0.05] text-red-200" aria-hidden="true"><svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8h14l1 12H4L5 8Z"/><path d="M9 9V6a3 3 0 0 1 6 0v3"/></svg></span>
                <span class="min-w-0 flex-1"><span class="block text-base font-semibold text-white">Sklep klubowy</span><span class="mt-1 block text-xs leading-5 text-slate-500">Oficjalne barwy, koszulki i akcesoria Pogoni Szczecin.</span></span>
                <svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0 text-slate-500 transition group-hover:text-red-200" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>
              <a class="group flex min-h-24 items-center gap-4 rounded-2xl border border-white/[0.08] bg-gradient-to-br from-white/[0.02] to-white/[0.005] p-4 transition hover:border-red-300/25 hover:bg-white/[0.05] focus:outline-none focus:ring-2 focus:ring-port-red/50 sm:p-5" href="https://gbstyl.pl/" target="_blank" rel="noopener noreferrer">
                <span class="grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-white/[0.05] text-red-200" aria-hidden="true"><svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18.5A2.5 2.5 0 0 1 8.5 16H18a2 2 0 0 1 0 4H8.5A2.5 2.5 0 0 1 6 18.5Z"/><path d="M7 16V8.5A2.5 2.5 0 0 1 9.5 6H16a2 2 0 0 1 2 2v8"/><path d="M9 11h8M9 14h6"/></svg></span>
                <span class="min-w-0 flex-1"><span class="block text-base font-semibold text-white">GBStyl</span><span class="mt-1 block text-xs leading-5 text-slate-500">Dodatki, koszulki i produkty z motywem kibica w stylu fan-shopu.</span></span>
                <svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0 text-slate-500 transition group-hover:text-red-200" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>
            </div>
          </section>

          <section class="mt-9 border-t border-white/[0.08] pt-7 sm:mt-11 sm:pt-9" aria-labelledby="guide-links-heading">
            <div class="mb-4 flex flex-wrap items-end justify-between gap-3">
              <div>
                <p class="text-[10px] font-bold uppercase tracking-[.18em] text-slate-500">Oficjalne źródła</p>
                <h2 id="guide-links-heading" class="mt-1 font-display text-xl font-bold text-white">Więcej o Pogoni</h2>
              </div>
              <p class="text-[10px] text-slate-500">Otwierają się w nowej karcie</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              <a class="group flex min-h-20 items-center gap-3 rounded-xl border border-white/[0.08] bg-white/[0.025] p-4 transition hover:border-red-300/25 hover:bg-white/[0.05] focus:outline-none focus:ring-2 focus:ring-port-red/50" href="https://www.pogonszczecin.pl/" target="_blank" rel="noopener noreferrer">
                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-white/[0.05] text-red-200" aria-hidden="true"><svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18m0-18a14 14 0 0 0 0 18"/></svg></span>
                <span class="min-w-0 flex-1"><span class="block text-sm font-semibold text-white">Serwis Pogoni</span><span class="mt-1 block text-[10px] text-slate-500">Komunikaty i informacje klubu</span></span>
                <svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0 text-slate-500 transition group-hover:text-red-200" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>
            </div>
          </section>

          <p class="mt-5 rounded-lg border border-white/[0.06] bg-white/[0.02] px-4 py-3 text-[10px] leading-5 text-slate-500">Godziny otwarcia bram, organizacja wejścia i dostępność biletów mogą różnić się zależnie od spotkania. Przed wyjazdem sprawdź aktualne komunikaty klubu.</p>
        </section>
      </div>
      <div id="wesprzyj-view" data-page-view="wesprzyj" hidden>
        <section id="wesprzyj" class="mt-10 scroll-mt-6" aria-labelledby="support-page-heading">
          <div class="mb-5">
            <div class="mb-1.5 flex items-center gap-2 text-[10px] font-bold uppercase tracking-[.2em] text-port-red">
              <span class="h-px w-5 bg-port-red"></span> Niezależny projekt kibicowski
            </div>
            <h2 id="support-page-heading" class="font-display text-2xl font-bold tracking-tight text-white sm:text-3xl">Wesprzyj <span class="text-slate-500">PortowyNews</span></h2>
            <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-400">PortowyNews powstaje dla kibiców Pogoni — bez zewnętrznych nacisków, bez ukrytych sponsorów i bez sztucznego „podbijania” treści. Jeśli projekt jest dla Ciebie wartościowy, możesz wesprzeć jego dalszy rozwój i utrzymanie niezależnego standardu informacji.</p>
          </div>
          <aside class="relative overflow-hidden rounded-2xl border border-amber-300/20 bg-gradient-to-br from-[#35291d] via-[#241c20] to-[#151326] p-5 shadow-[0_20px_60px_-35px_rgba(253,224,71,0.45)] sm:p-7" aria-label="Wsparcie przez BuyCoffee">
            <div class="absolute -right-10 -top-12 h-36 w-36 rounded-full bg-amber-300/10 blur-3xl" aria-hidden="true"></div>
            <div class="relative flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
              <div class="max-w-2xl">
                <p class="text-[10px] font-bold uppercase tracking-[.2em] text-amber-200/75">Wsparcie od kibiców</p>
                <h3 class="mt-1 font-display text-xl font-bold text-white sm:text-2xl">Postaw kawę dla Grupy KCM1948</h3>
                <p class="mt-2 text-sm leading-6 text-slate-300/80">Każda dobrowolna wpłata pomaga utrzymać niezależny, rzetelny i spójny kanał informacji o Pogoni Szczecin. To wsparcie dla zespołu, który dba o jakość treści i rozwój portalu w zgodzie z potrzebami kibiców.</p>
                <div class="mt-4 flex flex-wrap gap-2 text-[10px] font-semibold uppercase tracking-[.12em] text-slate-200/80">
                  <span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-1.5">Niezależność</span>
                  <span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-1.5">Jakość</span>
                  <span class="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-1.5">Dla kibiców</span>
                </div>
              </div>
              <a href="https://buycoffee.to/kcm1948" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-11 shrink-0 items-center justify-center gap-2 rounded-lg border border-amber-200/20 bg-amber-300/[0.12] px-5 py-3 text-xs font-bold text-amber-100 transition hover:border-amber-200/40 hover:bg-amber-300/[0.2] focus:outline-none focus:ring-2 focus:ring-amber-200/60">
                Przejdź do BuyCoffee
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
              </a>
            </div>
          </aside>
        </section>
      </div>

      <article id="article-detail-view" data-page-view="article" hidden class="mx-auto max-w-4xl py-8 sm:py-12">
        <a href="#wiadomosci" data-page-link class="inline-flex min-h-11 items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] px-4 text-sm font-semibold text-slate-300 transition hover:border-red-300/25 hover:text-white">← Wróć do wiadomości</a>
        <div id="article-detail-content" class="mt-7"></div>
      </article>

      <aside id="strefa-kibica" class="mt-10 flex flex-col gap-4 rounded-xl border border-amber-300/15 bg-gradient-to-r from-[#211a18] via-[#171a25] to-[#101827] p-4 sm:flex-row sm:items-center sm:justify-between sm:px-6" aria-label="Wesprzyj PortowyNews">
        <div>
          <p class="text-[10px] font-bold uppercase tracking-[.18em] text-amber-200/75">Niezależny projekt kibicowski</p>
          <p class="mt-1 text-sm font-semibold text-white">Wesprzyj dalszy rozwój PortowyNews</p>
          <p class="mt-1 text-xs leading-5 text-slate-400">Dzięki wsparciu możemy utrzymać niezależność, rozwijać jakość treści i dopisywać nowe funkcje dla społeczności kibiców.</p>
        </div>
        <a href="https://buycoffee.to/kcm1948" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-11 shrink-0 items-center justify-center gap-2 rounded-lg border border-amber-200/20 bg-amber-300/[0.1] px-4 py-2.5 text-xs font-bold text-amber-100 transition hover:border-amber-200/40 hover:bg-amber-300/[0.16] focus:outline-none focus:ring-2 focus:ring-amber-200/60">
          Wesprzyj projekt
          <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
        </a>
      </aside>
    </main>

    <footer class="border-t border-white/[0.07]">
      <div class="mx-auto flex max-w-[1440px] flex-col gap-2 px-4 py-5 text-[10px] text-slate-600 sm:flex-row sm:items-center sm:justify-between sm:px-7 lg:px-10">
        <p>PortowyNews · Niezależne centrum informacji dla kibiców Pogoni Szczecin.</p>
        <p>Wiadomości z sieci prowadzą do wydawców; artykuły redakcyjne otwierają się w PortowyNews. <a href="/privacy/" class="text-slate-400 underline decoration-white/20 underline-offset-2 transition hover:text-white">Polityka prywatności</a></p>
      </div>
      <div class="border-t border-white/[0.04] px-4 py-3 text-center sm:px-7 lg:px-10">
        <p class="font-display text-[10px] font-bold tracking-[.24em] text-slate-500">Grupa KCM1948</p>
      </div>
    </footer>
    <script src="./rss-config.js?v=3" defer></script>
    <script src="./script.js?v=49" defer></script>
  </body>
</html>
