/* =====================================================================
   lost-section.com  |  style.css  (wspólne style wszystkich podstron)
   ===================================================================== */

        /* Reset i ogólne ustawienia */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        img {
    display: block;
    max-width: none;
       }
        
        body {
            background-color: #000000;
            font-family: monospace;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            overflow-x: auto;
            min-width: 1080px;
            padding-top: 0;
            position: relative;
        }

        /* Tło po bokach bloku grafik: zapętlony (kafelkowany) GIF 300x300,
           czarno-biały (filter: grayscale) i z 75% krycia. Przewija się razem ze stroną. */
        body::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            pointer-events: none;
            background-image: url('images/ls_bg_pattern.gif');
            background-repeat: repeat;
            background-size: 300px 300px;
            filter: grayscale(100%);
            opacity: 0.20;
        }

        @media (hover: hover) {
        }

        @keyframes marqueeText {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .side-banners-left {
            display: none;
            position: fixed;
            left: 20px;
            top: 35px;
            width: 88px;
        }

        @keyframes pulseFade {
            0% { opacity: 0.72; }
            50% { opacity: 0.92; }
            100% { opacity: 0.72; }
        }

        @keyframes buttonGlowPulse {
            0% { box-shadow: 0 5px 12px 0 rgba(3, 24, 14, 0.42); }
            50% { box-shadow: 0 8px 17px 1px rgba(6, 41, 23, 0.68); }
            100% { box-shadow: 0 5px 12px 0 rgba(3, 24, 14, 0.42); }
        }

        @keyframes mobileLevitate {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-4px); }
            100% { transform: translateY(0px); }
        }

        .main-container {
            width: 1080px;
            max-width: 1080px;
            min-width: 1080px;
            background-color: #000000;
            position: relative;
            padding: 0;
            flex-shrink: 0;; /* Brak wewnętrznych marginesów – grafiki mają równe 1080px */
        }

        /* Efekt fade po bokach bloku 1080px */
        .main-container::before,
        .main-container::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 65px;
            z-index: 100;
            pointer-events: none;
            animation: pulseFade 4s ease-in-out infinite;
        }
        .main-container::before {
            left: -65px;
            background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(2, 12, 8, 0.90));
        }
        .main-container::after {
            right: -65px;
            background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(2, 12, 8, 0.90));
        }

        .banner-gora img {
            width: 100%;
            height: auto;
            max-height: 246px;
            object-fit: cover;
            display: block;
            cursor: pointer;
        }

        .nav-bar {
            background-color: #000000;
            height: 65px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 80px;
        }

        .nav-bar a {
            display: block;
            border-radius: 4px;
            animation: buttonGlowPulse 4s ease-in-out infinite;
            will-change: transform;
        }

        .nav-bar a img {
            width: 116px;
            height: 50px;
            object-fit: contain;
            display: block;
            transition: opacity 0.2s;
        }

        .nav-bar a img:hover {
            opacity: 0.8;
        }

        .margin-box {
            height: 28px;
            background-color: #000000;
        }

        .main-design img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            display: block;
        }
        .main-design {
            margin-bottom: 50px;
        }

        .micro-banners-section {
            width: 100%;
            background-color: #000000;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 65px;
            margin-bottom: 25px;
            padding-left: 60px;
            padding-right: 60px;
        }

        .micro-banner-item img {
            height: 35px;
            width: auto;
            display: block;
            border: none;
        }

        .ls-partners img {
            width: 100%;
            height: auto;
            max-height: 79px;
            object-fit: cover;
            display: block;
        }

        .ls-dol img {
            width: 100%;
            height: auto;
            max-height: 148px;
            object-fit: cover;
            display: block;
        }

        #lightbox {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.92);
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        #lightbox img {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
            border: none;
        }

        @media (max-width: 768px) {
            /* Na telefonie nic nie ma sztywnych 1080px - blok grafik rozciąga się
               na całą szerokość ekranu (przeglądarka sama skaluje grafiki 1080px) */
            *, img {
                max-width: 100%;
            }
            body::before {
                display: none;
            }
            body {
                padding-top: 6px;
                min-width: 0;
                overflow-x: hidden;
            }
            .main-container {
                width: 100%;
                min-width: 0;
                max-width: 100%;
            }
            .main-container::before,
            .main-container::after {
                display: none;
            }
            .main-container {
                padding: 0;
            }
            .nav-bar a img {
                width: 52px;
                height: 22px;
            }
            .nav-bar {
                gap: 20px;
                height: 45px;
            }
            .nav-bar a:nth-child(1) {
                animation: buttonGlowPulse 4s ease-in-out infinite, mobileLevitate 3.2s ease-in-out infinite;
            }
            .nav-bar a:nth-child(2) {
                animation: buttonGlowPulse 4s ease-in-out infinite, mobileLevitate 3.8s ease-in-out infinite 0.5s;
            }
            .nav-bar a:nth-child(3) {
                animation: buttonGlowPulse 4s ease-in-out infinite, mobileLevitate 3.5s ease-in-out infinite 1s;
            }
            .nav-bar a:nth-child(4) {
                animation: buttonGlowPulse 4s ease-in-out infinite, mobileLevitate 3.3s ease-in-out infinite 1.5s;
            }
            .margin-box {
                height: 10px;
            }
            .micro-banners-section {
                margin-top: 55px;
                margin-bottom: 35px;
                padding-left: 15px;
                padding-right: 15px;
            }
            .micro-banner-item img {
                height: 24px; 
            }
        }

        @media (min-width: 1084px) {
            .side-banners-left {
                display: block;
            }
        }

        /* ================= IN PROGRESS (sekcje w budowie) ================= */
        .in-progress {
            --ip-green: #264935;
            --ip-mid: #5f9a7a;
            --ip-light: #d4eadd;
            position: relative;
            background:
                radial-gradient(ellipse at center, rgba(2, 12, 8, 0.95) 0%, #000000 72%);
            padding: 46px 44px;
            overflow: hidden;
        }

        .ip-frame {
            position: relative;
            min-height: 500px;
            border: 1px solid rgba(38, 73, 53, 0.55);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 26px;
            padding: 40px 24px;
            text-align: center;
            font-family: monospace;
        }

        /* delikatne linie CRT */
        .ip-frame::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
        }

        /* narożniki ramki w stylu HUD */
        .ip-corner {
            position: absolute;
            width: 20px;
            height: 20px;
            border: 2px solid var(--ip-green);
        }
        .ip-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
        .ip-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
        .ip-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
        .ip-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

        .ip-label {
            font-size: 13px;
            letter-spacing: 4px;
            color: var(--ip-mid);
            text-transform: uppercase;
        }
        .ip-label .ip-jp {
            margin-left: 12px;
            letter-spacing: 2px;
            color: var(--ip-green);
        }

        .ip-title {
            position: relative;
            font-size: 76px;
            font-weight: bold;
            letter-spacing: 12px;
            line-height: 1;
            color: var(--ip-light);
            text-shadow: 0 0 6px var(--ip-green), 0 0 20px var(--ip-green), 0 0 44px rgba(38, 73, 53, 0.85);
            animation: ipFlicker 5s linear infinite;
            padding-left: 12px; /* wyrównanie przez letter-spacing */
        }

        /* subtelny "glitch" - dwie przesunięte kopie napisu */
        .ip-title::before,
        .ip-title::after {
            content: attr(data-text);
            position: absolute;
            left: 12px;
            top: 0;
            width: 100%;
            overflow: hidden;
            text-shadow: none;
            pointer-events: none;
        }
        .ip-title::before {
            color: var(--ip-mid);
            animation: ipGlitchA 4.2s steps(1) infinite;
        }
        .ip-title::after {
            color: var(--ip-green);
            animation: ipGlitchB 4.2s steps(1) infinite;
        }

        /* segmentowy pasek "ładowania" - ten sam wzór segmentów co w playerze */
        .ip-bar {
            position: relative;
            width: 100%;
            max-width: 479px;
            height: 12px;
            background: repeating-linear-gradient(90deg, rgba(38, 73, 53, 0.30) 0 3px, transparent 3px 4px);
        }
        .ip-bar-fill {
            height: 100%;
            width: 0;
            background: repeating-linear-gradient(90deg, var(--ip-green) 0 3px, transparent 3px 4px);
            animation: ipLoad 4s steps(60) infinite;
        }

        .ip-sub {
            font-size: 15px;
            letter-spacing: 6px;
            color: var(--ip-mid);
        }
        .ip-cursor {
            animation: ipBlink 1s steps(1) infinite;
        }

        @keyframes ipLoad {
            0%   { width: 0; }
            85%  { width: 100%; }
            100% { width: 100%; }
        }
        @keyframes ipBlink {
            0%, 49%   { opacity: 1; }
            50%, 100% { opacity: 0; }
        }
        @keyframes ipFlicker {
            0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
            20%  { opacity: 0.78; }
            63%  { opacity: 0.86; }
        }
        @keyframes ipGlitchA {
            0%, 91%, 100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
            92% { clip-path: inset(12% 0 58% 0); transform: translateX(-4px); }
            94% { clip-path: inset(60% 0 14% 0); transform: translateX(3px); }
            96% { clip-path: inset(30% 0 40% 0); transform: translateX(-2px); }
        }
        @keyframes ipGlitchB {
            0%, 91%, 100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
            93% { clip-path: inset(45% 0 20% 0); transform: translateX(4px); }
            95% { clip-path: inset(8% 0 70% 0); transform: translateX(-3px); }
        }

        @media (prefers-reduced-motion: reduce) {
            .ip-title, .ip-title::before, .ip-title::after, .ip-bar-fill, .ip-cursor {
                animation: none;
            }
            .ip-bar-fill { width: 60%; }
        }

        @media (max-width: 768px) {
            .in-progress {
                padding: 14px 12px;
            }
            .ip-frame {
                min-height: 270px;
                gap: 16px;
                padding: 24px 10px;
            }
            .ip-corner { width: 14px; height: 14px; }
            .ip-label { font-size: 10px; letter-spacing: 2px; }
            .ip-title {
                font-size: 30px;
                letter-spacing: 5px;
                padding-left: 5px;
            }
            .ip-title::before, .ip-title::after { left: 5px; }
            .ip-bar { height: 8px; }
            .ip-sub { font-size: 11px; letter-spacing: 3px; }
        }

        /* =====================================================================
           WSPÓLNE: segmentowy suwak (głośność, przewijanie)
           segment 3px + 1px przerwy, szerokość = n*4-1 px
           ===================================================================== */
        .seg-bar {
            position: relative;
            width: 47px;
            height: 8px;
            flex-shrink: 0;
            cursor: pointer;
            touch-action: none;
            background: repeating-linear-gradient(90deg, rgba(38, 73, 53, 0.30) 0 3px, transparent 3px 4px);
        }
        /* niewidoczny, powiększony obszar dotyku */
        .seg-bar::after {
            content: "";
            position: absolute;
            top: -9px;
            bottom: -9px;
            left: -4px;
            right: -4px;
        }
        .seg-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0;
            pointer-events: none;
            background: repeating-linear-gradient(90deg, #4d8f6a 0 3px, transparent 3px 4px);
        }
        .seg-bar:focus-visible {
            outline: 1px solid #4d8f6a;
            outline-offset: 3px;
        }
        @media (hover: hover) {
            .seg-bar:hover .seg-fill {
                background: repeating-linear-gradient(90deg, #ffffff 0 3px, transparent 3px 4px);
            }
        }

        /* =====================================================================
           GÓRNY PASEK INFORMACYJNY (czarne tło, fosforowa zieleń, osobne boxy)
           ===================================================================== */
        .topbar-wrap {
            --tb-box-h: 20px;
            --tb-h: 26px;
            --ph: #00ff00;
            --ph-dim: #0a7d0a;
            --tb-line: #0b3a0b;
            width: 1080px;
            min-width: 1080px;
            max-width: 1080px;
            height: var(--tb-h);
            flex-shrink: 0;
            background: #000000;
            border: 1px solid var(--tb-line);
            font-family: monospace;
            font-size: 10px;
            color: var(--ph-dim);
            overflow: hidden;
            position: relative;
            z-index: 10;
        }
        body[data-topbar="off"] .topbar-wrap {
            display: none;
        }
        .tb-scroll {
            height: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;
        }
        .tb-fixed {
            display: flex;
            align-items: center;
            gap: 5px;
            flex: none;
        }
        .tb-ticker {
            height: 100%;
            min-width: 0;
            flex: 1;
            display: flex;
            align-items: center;
            overflow: hidden;
            margin-left: 6px;
        }
        .tb-row {
            display: flex;
            align-items: center;
            gap: 0;
            width: 100%;
            flex: none;
            padding: 0 3px;
            white-space: nowrap;
        }
        .tb-loop-set {
            display: flex;
            align-items: center;
            gap: 5px;
            width: 100%;
            flex: none;
        }
        .tb-loop-copy,
        .tb-counter-ghost {
            display: none;
        }
        /* pojedynczy box */
        .tb-box {
            flex: none;
            height: var(--tb-box-h);
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 10px;
            border: 1px solid var(--tb-line);
            background: linear-gradient(#010801, #000000);
            box-shadow: inset 0 0 0 1px #021402;
        }
        .tb-brand {
            color: var(--ph);
            font-weight: bold;
            letter-spacing: 3px;
            border-color: #0f7a0f;
            text-shadow: 0 0 6px rgba(0, 255, 0, 0.75);
            box-shadow: inset 0 0 8px rgba(0, 255, 0, 0.16);
        }
        .tb-val {
            color: var(--ph);
            text-shadow: 0 0 5px rgba(0, 255, 0, 0.55);
        }
        .tb-colon {
            animation: tbBlink 1s steps(1) infinite;
        }
        @keyframes tbBlink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0.15; }
        }
        .tb-moon-text {
            color: var(--ph);
            text-shadow: 0 0 5px rgba(0, 255, 0, 0.45);
        }
        #tbMoonIcon {
            display: flex;
            align-items: center;
        }
        #tbMoonIcon svg {
            filter: drop-shadow(0 0 3px rgba(0, 255, 0, 0.5));
        }
        .tb-visits a {
            display: block;
            line-height: 0;
        }
        .tb-visits img {
            width: 27px;
            height: 13px;
            image-rendering: pixelated;
            display: block;
        }
        .tb-counter-ghost {
            width: 27px;
            height: 13px;
            align-items: center;
            justify-content: center;
            background: #000000;
            color: var(--ph);
            font-size: 7px;
            line-height: 1;
            text-shadow: 0 0 4px rgba(0, 255, 0, 0.55);
        }

        /* box z mottem: zamknięty, a w środku jedzie tekst w pętli */
        .tb-motto-box {
            flex: 1;
            min-width: 0;
            gap: 9px;
        }
        .tb-label {
            flex: none;
            font-size: 8px;
            letter-spacing: 2px;
            color: var(--ph-dim);
            padding-right: 9px;
            border-right: 1px solid var(--tb-line);
            line-height: 1;
        }
        .tb-motto {
            flex: 1;
            min-width: 0;
            height: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            position: relative;
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
        }
        .tb-motto-inner {
            display: inline-block;
            padding-left: 100%;
            color: var(--ph);
            text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
            animation: tbMotto var(--tb-dur, 40s) linear var(--tb-delay, 0s) infinite;
            animation-play-state: paused; /* rusza dopiero, gdy skrypt ustawi parametry (klasa tb-ready) */
        }
        .topbar-wrap.tb-ready .tb-motto-inner {
            animation-play-state: running;
        }
        @keyframes tbMotto {
            from { transform: translateX(0); }
            to   { transform: translateX(-100%); }
        }

        /* =====================================================================
           PLAYER (szeroki panel w stylu Winampa)
           ===================================================================== */
        .ls-deck {
            width: 100%;
        }
        .ls-player,
        .ls-gallery {
            --pl-green: #264935;
            --pl-lit: #4d8f6a;
            position: relative;
            width: 100%;
            background: linear-gradient(#112219, #0d1a13 45%, #0a140f);
            border-top: 1px solid #3a6a4f;
            border-bottom: 1px solid #050b08;
            box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(0, 0, 0, 0.6);
            font-family: monospace;
            color: var(--pl-green);
            user-select: none;
            -webkit-user-select: none;
        }
        .ls-player {
            --pl-lit: #7dc79c;
            background: linear-gradient(#193d29, #102219 48%, #09140d);
            border-top: 2px solid #7dc79c;
            box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08), inset -1px 0 0 rgba(0, 0, 0, 0.6), 0 0 14px rgba(77, 143, 106, 0.2);
        }

        .lp-titlebar {
            height: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 8px;
            background: linear-gradient(#1d3d2d, #0f2218);
            border-bottom: 1px solid #050b08;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
        }
        .lp-grip {
            flex: 1;
            height: 7px;
            background: repeating-linear-gradient(0deg, #3d6b52 0 1px, transparent 1px 3px);
        }
        .lp-title {
            font-size: 9px;
            letter-spacing: 3px;
            color: var(--pl-lit);
            white-space: nowrap;
        }
        .ls-player .lp-titlebar {
            background: linear-gradient(#28563b, #173321);
        }

        .lp-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 9px 12px 11px;
        }

        /* wyświetlacz LCD */
        .lp-display {
            position: relative;
            display: flex;
            align-items: stretch;
            gap: 14px;
            height: 48px;
            padding: 5px 10px;
            background: #000000;
            border: 1px solid #050b08;
            box-shadow: inset 0 0 0 1px #14281d, inset 0 2px 7px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.07);
            overflow: hidden;
        }
        .lp-display::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px);
        }
        .lp-time {
            flex: none;
            display: flex;
            align-items: center;
            gap: 9px;
        }
        .lp-state {
            width: 12px;
            height: 12px;
            color: var(--pl-lit);
            display: flex;
        }
        .lp-state svg {
            width: 100%;
            height: 100%;
            fill: currentColor;
        }
        .lp-digits {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .lp-digit {
            width: 20px;
            height: 34px;
        }
        .lp-colon {
            width: 6px;
            height: 34px;
        }
        .lp-digit polygon {
            fill: rgba(38, 73, 53, 0.30);
        }
        .lp-digit polygon.on {
            fill: var(--pl-lit);
            filter: drop-shadow(0 0 2px rgba(77, 143, 106, 0.8));
        }
        .lp-colon rect {
            fill: var(--pl-lit);
        }
        .is-idle .lp-colon rect,
        .is-paused .lp-colon rect {
            fill: rgba(38, 73, 53, 0.55);
        }
        .is-playing .lp-colon {
            animation: tbBlink 1s steps(1) infinite;
        }
        .lp-total {
            font-size: 8px;
            letter-spacing: 1px;
            color: var(--pl-green);
            white-space: nowrap;
            align-self: flex-end;
            margin-bottom: 3px;
        }
        .lp-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 6px;
        }
        .lp-marquee {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            font-size: 13px;
            color: var(--pl-lit);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
        }
        .ls-player .lp-marquee {
            color: #00ff00;
            text-shadow: 0 0 5px rgba(0, 255, 0, 0.55);
        }
        .lp-marquee-text {
            display: block;
            flex: none;
            padding-right: 36px;
        }
        .lp-marquee-track {
            display: flex;
            width: max-content;
            gap: 0;
            animation: marqueeText 10s linear infinite;
        }
        .lp-meta {
            display: flex;
            gap: 14px;
            font-size: 9px;
            letter-spacing: 1px;
            color: var(--pl-green);
            white-space: nowrap;
        }
        .lp-meta b {
            font-weight: normal;
            color: var(--pl-lit);
        }
        .lp-spectrum {
            flex: none;
            align-self: center;
            width: 180px;
            height: 42px;
        }

        /* przyciski, diody, suwaki */
        .lp-controls {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .lp-btns {
            display: flex;
            gap: 5px;
            flex: none;
        }
        .lp-btn {
            width: 40px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid #050b08;
            background: linear-gradient(#21432f, #12261b);
            color: var(--pl-lit);
            box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.13), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 1px 0 rgba(0, 0, 0, 0.6);
            cursor: pointer;
            transition: color 0.15s;
        }
        .lp-btn svg {
            width: 10px;
            height: 10px;
            fill: currentColor;
        }
        .lp-btn:active,
        .lp-btn.on {
            background: linear-gradient(#0b1810, #14281d);
            box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.85);
            transform: translateY(1px);
        }
        .lp-btn.on {
            color: #7dc79c;
        }
        @media (hover: hover) {
            .lp-btn:hover {
                color: #ffffff;
            }
        }
        .lp-btn:focus-visible {
            outline: 1px solid #4d8f6a;
            outline-offset: 2px;
        }
        .lp-leds {
            display: flex;
            gap: 11px;
            flex: none;
            font-size: 8px;
            letter-spacing: 1px;
        }
        .lp-led {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .lp-led i {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #0b160f;
            border: 1px solid #050b08;
            box-shadow: inset 0 0 2px #000;
        }
        .lp-led-loop i {
            background: #2f5f46;
        }
        .is-playing .lp-led-play i {
            background: #7dc79c;
            box-shadow: 0 0 5px 1px rgba(77, 143, 106, 0.9);
        }
        .is-loading .lp-led-load i {
            background: #7dc79c;
            box-shadow: 0 0 5px 1px rgba(77, 143, 106, 0.9);
            animation: tbBlink 0.5s steps(1) infinite;
        }
        .seg-bar.lp-seek {
            flex: 1;
            width: auto;
            height: 9px;
        }
        .lp-vol {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: none;
            font-size: 9px;
            letter-spacing: 1px;
        }
        .lp-vol .seg-bar {
            width: 79px;
            height: 9px;
        }
        #lpVolNum {
            color: var(--pl-lit);
            min-width: 2ch;
        }

        /* =====================================================================
           GALERIA (okno-playlista zadokowane pod playerem)
           ===================================================================== */
        .lg-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 9px 12px 11px;
        }
        .lg-screen {
            position: relative;
            height: 340px;
            background: #000000;
            border: 1px solid #050b08;
            box-shadow: inset 0 0 0 1px #14281d, inset 0 2px 9px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.07);
            overflow: hidden;
            touch-action: pan-y;
            outline: none;
        }
        .lg-screen:focus-visible {
            box-shadow: inset 0 0 0 1px #4d8f6a, inset 0 2px 9px rgba(0, 0, 0, 0.9);
        }
        /* linie CRT + przyciemnione rogi */
        .lg-screen::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 20;
            background:
                radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
        }
        .lg-track {
            position: absolute;
            inset: 0;
        }
        .lg-item {
            --lg-step: 380px;
            position: absolute;
            left: 50%;
            top: 50%;
            height: 292px;
            aspect-ratio: 4 / 3;
            margin-top: -146px;
            transform: translateX(calc(-50% + var(--d, 0) * var(--lg-step))) scale(var(--s, 1));
            transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s, filter 0.5s;
            cursor: pointer;
            border: 1px solid #264935;
            background: #05100a;
            box-shadow: 0 0 0 1px #000000, 0 8px 22px rgba(0, 0, 0, 0.7);
        }
        .lg-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            pointer-events: none;
        }
        .lg-item.is-side {
            filter: brightness(0.6) saturate(0.7);
        }
        .lg-item.is-active {
            border-color: #4d8f6a;
            box-shadow: 0 0 0 1px #000000, 0 0 14px rgba(77, 143, 106, 0.45), 0 8px 22px rgba(0, 0, 0, 0.7);
        }
        .lg-empty {
            position: absolute;
            inset: 0;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 20px;
            font-size: 12px;
            letter-spacing: 3px;
            color: var(--pl-lit);
        }

        .lg-controls {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .lp-btn.lg-auto {
            width: 52px;
            font-family: monospace;
            font-size: 9px;
            letter-spacing: 1px;
        }
        .lg-counter,
        .lg-file {
            display: flex;
            align-items: center;
            background: #000000;
            border: 1px solid #050b08;
            box-shadow: inset 0 0 0 1px #14281d, inset 0 1px 4px rgba(0, 0, 0, 0.9);
        }
        .lg-counter {
            flex: none;
            gap: 8px;
            padding: 4px 10px;
        }
        .lg-digits {
            display: flex;
            gap: 3px;
        }
        .lg-digits .lp-digit {
            width: 14px;
            height: 24px;
        }
        .lg-total {
            font-size: 10px;
            letter-spacing: 1px;
            color: var(--pl-lit);
            white-space: nowrap;
        }
        .lg-file {
            flex: 1;
            min-width: 0;
            height: 32px;
            padding: 0 12px;
            font-size: 10px;
            letter-spacing: 1px;
            color: var(--pl-lit);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .is-single .lp-btns .lp-btn:not(.lg-auto) {
            opacity: 0.4;
            pointer-events: none;
        }

        /* lista miniatur (jak playlista w Winampie) */
        .lg-playlist {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            padding: 7px;
            background: #000000;
            border: 1px solid #050b08;
            box-shadow: inset 0 0 0 1px #14281d, inset 0 1px 4px rgba(0, 0, 0, 0.9);
            scrollbar-width: thin;
            scrollbar-color: #264935 #05100a;
        }
        .lg-playlist::-webkit-scrollbar {
            height: 6px;
        }
        .lg-playlist::-webkit-scrollbar-track {
            background: #05100a;
        }
        .lg-playlist::-webkit-scrollbar-thumb {
            background: #264935;
        }
        .lg-thumb {
            position: relative;
            flex: none;
            width: 66px;
            height: 50px;
            padding: 0;
            border: 1px solid #14281d;
            background: #05100a;
            opacity: 0.55;
            cursor: pointer;
            transition: opacity 0.2s, border-color 0.2s;
        }
        .lg-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .lg-num {
            position: absolute;
            left: 1px;
            top: 1px;
            padding: 0 3px;
            font-family: monospace;
            font-size: 8px;
            line-height: 1.3;
            color: #ffffff;
            background: rgba(0, 0, 0, 0.7);
        }
        .lg-thumb.on {
            opacity: 1;
            border-color: #7dc79c;
            box-shadow: 0 0 6px rgba(77, 143, 106, 0.85);
        }
        @media (hover: hover) {
            .lg-thumb:hover {
                opacity: 1;
            }
        }
        .lg-thumb:focus-visible {
            outline: 1px solid #4d8f6a;
            outline-offset: 2px;
        }

        /* =====================================================================
           PRZEJŚCIE MIĘDZY PODSTRONAMI
           ===================================================================== */
        #pageContent {
            display: block;
        }
        .pc-enter {
            animation: pcEnter 0.28s ease-out;
        }
        @keyframes pcEnter {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* =====================================================================
           MOBILE (nadpisania dla nowych elementów)
           ===================================================================== */
        @media (max-width: 768px) {
            body {
                padding-top: 0;
            }

            /* Nazwa marki i godzina zostają z lewej, pozostałe boxy jadą jako ticker. */
            .topbar-wrap {
                --tb-box-h: 16px;
                --tb-h: 22px;
                width: 100%;
                min-width: 0;
                max-width: 100%;
                font-size: 9px;
            }
            /* max-width: none, bo globalna reguła "* { max-width: 100% }" przycinałaby wiersz do szerokości ekranu */
            .tb-row {
                width: max-content;
                max-width: none;
                flex: none;
                gap: 0;
                padding: 0;
                animation: tbMobile var(--tb-dur-m, 12s) linear infinite;
                animation-play-state: paused;
            }
            .topbar-wrap.tb-ready .tb-row {
                animation-play-state: running;
            }
            .tb-fixed {
                gap: 3px;
            }
            .tb-fixed .tb-box {
                padding: 0 4px;
                gap: 3px;
                font-size: 8px;
            }
            .tb-loop-set {
                width: max-content;
                gap: 6px;
                padding-right: 12px;
            }
            .tb-loop-copy {
                display: flex;
            }
            .tb-counter-ghost {
                display: flex;
            }
            .tb-box {
                padding: 0 7px;
                gap: 5px;
            }
            .tb-brand {
                letter-spacing: 1px;
            }
            .tb-moon {
                display: none;
            }
            .tb-motto-box {
                flex: none;
            }
            .tb-label {
                font-size: 7px;
                padding-right: 6px;
            }
            .tb-motto {
                flex: none;
                overflow: visible;
                -webkit-mask-image: none;
                mask-image: none;
            }
            .tb-motto-inner {
                padding-left: 0;
                max-width: none;
                animation: none;
            }
            .lp-marquee-text {
                max-width: none;
            }
            @keyframes tbMobile {
                from { transform: translateX(0); }
                to   { transform: translateX(var(--tb-loop-offset, -100%)); }
            }

            /* player: kompaktowy, dwurzędowy */
            .lp-titlebar,
            .lp-leds,
            .lp-total {
                display: none;
            }
            .lp-body {
                gap: 4px;
                padding: 4px 6px 5px;
            }
            .lp-display {
                height: 28px;
                gap: 8px;
                padding: 3px 6px;
            }
            .lp-time {
                gap: 6px;
            }
            .lp-state {
                width: 9px;
                height: 9px;
            }
            .lp-digit {
                width: 10px;
                height: 18px;
            }
            .lp-colon {
                width: 4px;
                height: 18px;
            }
            .lp-digits {
                gap: 2px;
            }
            .lp-info {
                gap: 2px;
            }
            .lp-marquee {
                font-size: 9px;
            }
            .lp-marquee-track {
                max-width: none;
                animation-duration: 8s;
            }
            .lp-marquee-text {
                padding-right: 20px;
            }
            .lp-meta {
                font-size: 7px;
                gap: 6px;
            }
            .lp-spectrum {
                width: 72px;
                height: 24px;
            }
            .lp-controls {
                gap: 8px;
            }
            .lp-btns {
                gap: 3px;
            }
            .lp-btn {
                width: 30px;
                height: 16px;
            }
            .lp-btn svg {
                width: 8px;
                height: 8px;
            }
            .lp-vol {
                gap: 5px;
                font-size: 8px;
            }
            .lp-vol .seg-bar {
                width: 55px;
                height: 7px;
            }
            .seg-bar.lp-seek {
                height: 7px;
                pointer-events: none; /* na telefonie pasek postępu jest tylko wskaźnikiem */
                cursor: default;
            }
            .seg-bar.lp-seek::after {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .lg-body {
                gap: 5px;
                padding: 4px 6px 6px;
            }
            .lg-screen {
                height: 214px;
            }
            .lg-item {
                --lg-step: 158px;
                height: 180px;
                margin-top: -90px;
            }
            .lg-empty {
                font-size: 9px;
                letter-spacing: 2px;
            }
            .lg-controls {
                gap: 6px;
            }
            .lp-btn.lg-auto {
                width: 38px;
                font-size: 7px;
            }
            .lg-counter {
                gap: 4px;
                padding: 2px 6px;
            }
            .lg-digits {
                gap: 2px;
            }
            .lg-digits .lp-digit {
                width: 10px;
                height: 18px;
            }
            .lg-total {
                font-size: 8px;
            }
            .lg-file {
                height: 22px;
                padding: 0 7px;
                font-size: 8px;
                letter-spacing: 0;
            }
            .lg-playlist {
                gap: 4px;
                padding: 4px;
            }
            .lg-thumb {
                width: 46px;
                height: 34px;
            }
            .lg-num {
                font-size: 7px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .tb-colon, .tb-motto-inner, .lp-marquee-track, .pc-enter {
                animation: none;
            }
            .tb-row { animation: none !important; }
            .tb-loop-copy,
            .lp-marquee-copy { display: none; }
        }
/* Lost Section: spacing and muted top-bar refinements */
.main-design { margin-bottom: 35px !important; }
.micro-banners-section { margin-top: 55px !important; }

@media (max-width: 700px) {
  .micro-banners-section { margin-top: 45px !important; }
  .tb-ticker { border-left: 1px solid #264935; padding-left: 5px; }
}

:root { --ph: #7dc79c !important; --ph-dim: #4d8f6a !important; --tb-line: #264935 !important; }
.tb-brand { border-color: #264935 !important; color: #7dc79c !important; text-shadow: 0 0 5px rgba(125,199,156,.25) !important; box-shadow: 0 0 5px rgba(77,143,106,.2) !important; }
.tb-val, .tb-moon-text, .tb-motto-inner { color: #7dc79c !important; text-shadow: 0 0 4px rgba(125,199,156,.25) !important; }
#tbMoonIcon svg { filter: saturate(.55) brightness(.8) !important; }
.tb-counter-ghost { color: #7dc79c !important; text-shadow: 0 0 4px rgba(125,199,156,.25) !important; }
.tb-visits a { position: relative; display: inline-block; }
.tb-visits img { filter: sepia(1) hue-rotate(65deg) saturate(.55) brightness(.72) contrast(.9); opacity: .82; }
.tb-visits a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
}

@media (min-width: 701px) {
  .lp-marquee-track { animation: lpDesktopEnter 1.8s linear 1 both, marqueeText 10s linear 1.8s infinite; }
}
@keyframes lpDesktopEnter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@media (max-width: 700px) {
  .lp-marquee-track { animation: marqueeText 8s linear infinite; }
}