/* index.css – seitenspezifisches CSS, aus index.html extrahiert (Performance
   Phase 2: kleineres HTML pro Navigation, CSS cache-first via ?v=). */

        /* ===================================================
           ROOT & GLOBAL OVERRIDES FOR INDEX PAGE
           =================================================== */
        :root {
            /* CL-Theming: Grün/Gold als Variablen (Originalwerte = WM);
               im CL-Scope lenkt theme-cl.css sie auf Blau um. */
            --green-light: #4ade80;
            --green-main: #22c55e;
            --green-deep: #16a34a;
            --green-accent: #28a745;
            --gold: #ffd700;
            --gold-light: #fbbf24;
            --gold-dark: #e5a800;
            --gold-amber: #ffb300;
            --gold-amber2: #f59e0b;
            --rgb-green-1: 34, 197, 94;
            --rgb-green-2: 40, 167, 69;
            --rgb-green-3: 22, 163, 74;
            --rgb-gold: 255, 215, 0;
            --rgb-amber: 255, 193, 7;
            --rgb-green-light: 74, 222, 128;
            --rgb-gold-light: 251, 191, 36;
            --rgb-yellow: 250, 204, 21;
            --rgb-orange: 255, 153, 0;
            --rgb-green-dark: 6, 78, 59;
            --rgb-green-darker: 7, 26, 10;
            --rgb-amber-d1: 74, 57, 11;
            --rgb-amber-d2: 92, 64, 16;
            --rgb-amber-d3: 70, 44, 30;
            --gold-cream: #fde68a;
            --yellow-pale: #fef08a;
            --yellow-paler: #fef9c3;
            --green-dark: #15803d;
            --green-bg-1: #0d1f10;
            --green-bg-2: #071a0a;
            --green-bg-3: #0a2010;

            --green-glow: rgba(var(--rgb-green-2), 0.45);
            --gold: #ffd700;
            --gold-dark: #e5a800;
            --glass-bg: rgba(255, 255, 255, 0.06);
            --glass-border: rgba(255, 255, 255, 0.12);
            --dark-bg: #0d1117;
            --dark-surface: #161b22;
            --dark-card: #1c2333;
            --text-main: #e6edf3;
            --text-muted: #8b949e;
        }

        /* Lock horizontal scroll at the viewport level too, so any
           position: fixed decorations (which are positioned against the
           initial containing block and therefore NOT clipped by the
           body's overflow-x: hidden) cannot push the page sideways on
           mobile. Without this, the post-start view's fixed orbs/beams
           extend past the right edge and a small horizontal scroll
           appears, revealing the dark body background. */
        html {
            overflow-x: hidden;
            max-width: 100%;
        }

        body {
            background: var(--dark-bg);
            color: var(--text-main);
            padding-top: 0;
            padding-bottom: 0;
            overflow-x: hidden;
            max-width: 100%;
        }

        /* Top navbar on index: keep the global brand/nav links hidden
           (the hero section already acts as our main entry point) but
           expose the auth icon (Login / Mein Team / Abmelden) in the
           top-right corner so users can log in or manage their team
           directly from the home page – on mobile *and* desktop.

           Die Leiste ist hier durchsichtig und klickdurchlässig, der
           Startbildschirm läuft also bewusst darunter durch – reserviert
           wird nichts. Der knappere Innenabstand (12 statt 15/10px) steht
           trotzdem in `--dt-nav-pad`, damit `--dt-nav-space` auch auf
           dieser Seite die echte Höhe beschreibt. */
        :root {
            --dt-nav-pad: 12px;
        }

        body > nav.navbar {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            padding: var(--dt-nav-pad) 16px !important;
            padding-top: calc(var(--dt-nav-pad) + env(safe-area-inset-top)) !important;
            padding-right: calc(16px + env(safe-area-inset-right)) !important;
            justify-content: flex-end !important;
            pointer-events: none; /* let clicks fall through to hero */
            background-image: none !important;
        }
        body > nav.navbar .navbar-brand,
        body > nav.navbar .nav-links {
            display: none !important;
        }
        body > nav.navbar .nav-actions {
            gap: 0 !important;
            pointer-events: auto; /* re-enable clicks on the auth icon */
        }
        body > nav.navbar #dt-auth-nav-slot,
        body > nav.navbar .dt-auth-nav-slot {
            pointer-events: auto;
        }
        /* Ensure the auth icon is readable on top of the dark hero. */
        body > nav.navbar .dt-auth-nav-icon {
            background: rgba(13, 17, 23, 0.55);
            border-color: rgba(255, 255, 255, 0.25);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        /* =====================================================
           PRE/POST-START VIEW SWITCH (FOUC-frei)
           =====================================================
           Greift bevor das Inline-Script unten am Body
           applyIndexViewMode() aufruft, dank des frühen Head-
           Scripts, das `data-view` auf <html> setzt.
           Das `:not([data-view])` deckt ältere Browser/Edge-
           Cases ab, in denen das Attribut nicht gesetzt wurde –
           dort fällt die Seite auf das alte Verhalten zurück
           (Pre-Start sichtbar, Post-Start verborgen). */
        html[data-view="post"] #indexHomePreStart { display: none !important; }
        html[data-view="pre"]  #indexHomePostStart { display: none !important; }
        html:not([data-view])  #indexHomePostStart { display: none !important; }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ===================================================
           HERO SECTION
           =================================================== */
        .hero {
            position: relative;
            min-height: 100svh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 60px 24px 40px;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* Stadium background atmosphere */
        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 90% 70% at 50% 110%, rgba(var(--rgb-green-2), 0.45) 0%, transparent 65%),
                radial-gradient(ellipse 70% 50% at 50% 80%, rgba(var(--rgb-green-2), 0.25) 0%, transparent 55%),
                radial-gradient(ellipse 60% 40% at 20% 0%, rgba(var(--rgb-gold), 0.07) 0%, transparent 50%),
                radial-gradient(ellipse 60% 40% at 80% 0%, rgba(var(--rgb-green-2), 0.18) 0%, transparent 50%),
                linear-gradient(180deg, #050a0e 0%, #0d1117 30%, var(--green-bg-1) 100%);
            z-index: 0;
        }


        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 820px;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(var(--rgb-green-2), 0.18);
            border: 1px solid rgba(var(--rgb-green-2), 0.4);
            color: var(--green-light);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 6px 16px;
            border-radius: 100px;
            margin-bottom: 28px;
            backdrop-filter: blur(8px);
            animation: fadeSlideDown 0.6s ease both;
        }

        .hero-title {
            font-size: clamp(2.2rem, 6vw, 4rem);
            font-weight: 900;
            line-height: 1.1;
            margin: 0 0 20px;
            letter-spacing: -1px;
            animation: fadeSlideDown 0.7s 0.1s ease both;
        }

        .hero-title .accent {
            background: linear-gradient(135deg, var(--green-light), var(--green-main), var(--green-deep));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-title .gold-text {
            background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold-dark));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-claim {
            font-size: clamp(1rem, 2.5vw, 1.2rem);
            color: var(--text-muted);
            margin: 0 0 36px;
            line-height: 1.6;
            max-width: 560px;
            margin-left: auto;
            margin-right: auto;
            animation: fadeSlideDown 0.7s 0.2s ease both;
        }

        /* Kleiner Saison-Zusatz unter dem Titel (z. B. „Saison 2025/2026"). */
        .hero-season {
            font-size: clamp(0.85rem, 2vw, 1rem);
            font-weight: 700;
            letter-spacing: 0.04em;
            color: var(--text-muted);
            margin: -6px 0 18px;
            animation: fadeSlideDown 0.7s 0.15s ease both;
        }
        .hero-season[hidden] { display: none; }

        /* ===================================================
           HERO STATS BAR
           =================================================== */
        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 32px;
            margin-bottom: 40px;
            flex-wrap: wrap;
            animation: fadeSlideDown 0.7s 0.3s ease both;
        }

        .hero-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .hero-stat-value {
            font-size: 1.6rem;
            font-weight: 900;
            color: var(--green-light);
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }

        .hero-stat-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        a.hero-stat-value {
            cursor: pointer;
            transition: opacity 0.2s ease;
        }

        a.hero-stat-value:hover { opacity: 0.8; }

        .hero-stat-divider {
            width: 1px;
            height: 36px;
            background: var(--glass-border);
            align-self: center;
        }

        /* ===================================================
           CTA BUTTON
           =================================================== */
        .hero-cta-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            margin-bottom: 44px;
            animation: fadeSlideDown 0.7s 0.35s ease both;
        }

        .btn-primary-hero {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, var(--green-main), var(--green-deep));
            color: #fff;
            font-size: 1.15rem;
            font-weight: 800;
            padding: 18px 40px;
            border-radius: 100px;
            text-decoration: none;
            box-shadow: 0 0 0 0 rgba(var(--rgb-green-1), 0.5), 0 8px 32px rgba(var(--rgb-green-1), 0.3);
            transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
            animation: heroPulse 3s 1.2s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }

        .btn-primary-hero::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -60%;
            width: 40%;
            height: 200%;
            background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.25) 50%, transparent 80%);
            transform: skewX(-20deg);
            transition: left 0.6s ease;
        }

        .btn-primary-hero:hover::after { left: 120%; }

        .btn-primary-hero:hover {
            transform: translateY(-3px) scale(1.04);
            box-shadow: 0 0 0 8px rgba(var(--rgb-green-1), 0.15), 0 16px 48px rgba(var(--rgb-green-1), 0.4);
            background: linear-gradient(135deg, var(--green-deep), var(--green-dark));
        }

        .btn-primary-hero:focus-visible {
            outline: 3px solid var(--green-light);
            outline-offset: 4px;
        }

        @keyframes heroPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rgb-green-1), 0.4), 0 8px 32px rgba(var(--rgb-green-1), 0.3); }
            50% { box-shadow: 0 0 0 12px rgba(var(--rgb-green-1), 0.0), 0 8px 32px rgba(var(--rgb-green-1), 0.45); }
        }

        .hero-secondary-btns {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .btn-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-main);
            font-size: 0.85rem;
            font-weight: 600;
            padding: 10px 18px;
            border-radius: 100px;
            text-decoration: none;
            backdrop-filter: blur(10px);
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
        }

        .btn-pill:hover {
            background: rgba(255,255,255,0.12);
            border-color: rgba(255,255,255,0.25);
            transform: translateY(-2px);
            color: #fff;
        }

        .btn-pill:focus-visible {
            outline: 2px solid var(--green-light);
            outline-offset: 3px;
        }


        @media (max-width: 480px) {
            .hero-secondary-btns {
                width: 100%;
                flex-wrap: nowrap;
                gap: 6px;
            }

            .hero-secondary-btns .btn-pill {
                flex: 1 1 0;
                justify-content: center;
                font-size: 0.72rem;
                padding: 9px 8px;
                white-space: nowrap;
            }

            .hero-cta-wrap {
                gap: 12px;
                margin-bottom: 18px;
            }
        }

        /* ===================================================
           HERO PLAYER CARD PREVIEW (Top 5 floating cards)
           =================================================== */
        .hero-cards-preview {
            position: relative;
            height: 220px;
            width: 100%;
            max-width: 700px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeSlideDown 0.8s 0.5s ease both;
        }

        .hero-card-slot {
            position: absolute;
            width: 120px;
            height: 170px;
            border-radius: 12px;
            background: var(--dark-card);
            border: 1px solid var(--glass-border);
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            cursor: pointer;
        }

        .hero-card-slot:hover {
            box-shadow: 0 24px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(var(--rgb-green-light), 0.3);
            border-color: rgba(var(--rgb-green-light), 0.35);
        }

        .hero-card-slot:nth-child(1) {
            left: 0%;
            transform: rotate(-15deg) translateY(28px) scale(0.88);
            z-index: 1;
            opacity: 0.74;
        }

        .hero-card-slot:nth-child(2) {
            left: 20%;
            transform: rotate(-8deg) translateY(12px);
            z-index: 2;
            opacity: 0.92;
        }

        .hero-card-slot:nth-child(3) {
            left: 50%;
            transform: translateX(-50%) rotate(0deg);
            z-index: 5;
            width: 136px;
            height: 192px;
            border-color: rgba(var(--rgb-green-2), 0.5);
            box-shadow: 0 0 30px rgba(var(--rgb-green-2), 0.24), 0 20px 60px rgba(0,0,0,0.55);
        }

        .hero-card-slot:nth-child(4) {
            right: 20%;
            transform: rotate(8deg) translateY(12px);
            z-index: 2;
            opacity: 0.92;
        }

        .hero-card-slot:nth-child(5) {
            right: 0%;
            transform: rotate(15deg) translateY(28px) scale(0.88);
            z-index: 1;
            opacity: 0.74;
        }

        .hero-card-slot img.hcs-photo {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 8px;
            border: 2px solid rgba(255,255,255,0.15);
            background: #2a3040;
        }

        .hero-card-slot:nth-child(3) img.hcs-photo {
            width: 82px;
            height: 82px;
        }

        .hcs-pts {
            position: absolute;
            top: 8px;
            right: 8px;
            background: var(--green-main);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            padding: 3px 7px;
            border-radius: 6px;
        }

        .hcs-name {
            font-size: 11px;
            font-weight: 700;
            text-align: center;
            padding: 0 6px;
            color: var(--text-main);
            line-height: 1.2;
            margin-bottom: 4px;
        }

        .hcs-flag {
            width: 20px;
            height: 14px;
            border-radius: 2px;
            object-fit: cover;
        }

        .hcs-club {
            width: 20px;
            height: 20px;
            margin-top: 4px;
            object-fit: contain;
        }



        @media (max-width: 600px) {
            .hero-cards-preview {
                max-width: 360px;
                height: 200px;
                margin-top: 8px;
            }

            .hero-card-slot {
                width: 96px;
                height: 138px;
            }

            .hero-card-slot:nth-child(1) {
                left: 2%;
                transform: rotate(-12deg) translateY(26px) scale(0.82);
                opacity: 0.84;
            }

            .hero-card-slot:nth-child(2) {
                left: 18%;
                transform: rotate(-6deg) translateY(10px) scale(0.94);
            }

            .hero-card-slot:nth-child(3) {
                width: 112px;
                height: 162px;
            }

            .hero-card-slot:nth-child(4) {
                right: 18%;
                transform: rotate(6deg) translateY(10px) scale(0.94);
            }

            .hero-card-slot:nth-child(5) {
                right: 2%;
                transform: rotate(12deg) translateY(26px) scale(0.82);
                opacity: 0.84;
            }

            .hero-card-slot img.hcs-photo {
                width: 58px;
                height: 58px;
            }

            .hero-card-slot:nth-child(3) img.hcs-photo {
                width: 70px;
                height: 70px;
            }

            .hcs-name {
                font-size: 10px;
                line-height: 1.15;
                padding: 0 5px;
            }
        }
        .hcs-empty {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: rgba(255,255,255,0.05);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: rgba(255,255,255,0.2);
        }
        /* ===================================================
           SCROLL INDICATOR
           =================================================== */
        .scroll-hint {
            position: absolute;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            z-index: 2;
            animation: scrollBounce 2s 2s ease-in-out infinite;
        }

        .scroll-hint-arrow {
            width: 18px;
            height: 18px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg);
        }

        @keyframes scrollBounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(8px); }
        }

        /* ===================================================
           MAIN DASHBOARD AREA
           =================================================== */
        .dashboard-area {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px 80px;
            box-sizing: border-box;
        }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            gap: 12px;
        }

        .section-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
        }

        .section-title-accent {
            display: inline-block;
            width: 4px;
            height: 18px;
            background: linear-gradient(180deg, var(--green-light), var(--green-main));
            border-radius: 2px;
        }

        .section-link {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--green-light);
            text-decoration: none;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .section-link:hover { opacity: 1; }

        /* ===================================================
           TILE GRID
           =================================================== */
        .tile-grid {
            display: grid;
            gap: 16px;
        }

        .tile-grid-3 { grid-template-columns: repeat(3, 1fr); }
        .tile-grid-2 { grid-template-columns: repeat(2, 1fr); }
        .tile-grid-1-2 { grid-template-columns: 1fr 2fr; }
        .tile-grid-2-1 { grid-template-columns: 2fr 1fr; }

        @media (max-width: 1024px) {
            .tile-grid-3 { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 680px) {
            .tile-grid-3,
            .tile-grid-2,
            .tile-grid-1-2,
            .tile-grid-2-1 { grid-template-columns: 1fr; }
        }

        /* ===================================================
           GLASS TILES
           =================================================== */
        .gtile {
            background: var(--dark-card);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 16px;
            padding: 22px;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
            will-change: transform;
        }

        @media (hover: hover) and (pointer: fine) {
            .gtile:hover {
                transform: translateY(-4px);
                box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(var(--rgb-green-light), 0.15);
                border-color: rgba(var(--rgb-green-light), 0.2);
            }

            .gtile::before {
                content: "";
                position: absolute;
                top: -60%;
                left: -60%;
                width: 50%;
                height: 200%;
                background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.04) 50%, transparent 80%);
                transform: skewX(-25deg);
                transition: left 0.5s ease;
                pointer-events: none;
            }

            .gtile:hover::before { left: 150%; }
        }

        .gtile-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .gtile-link:focus-visible {
            outline: 2px solid var(--green-light);
            outline-offset: 4px;
            border-radius: 16px;
        }

        .gtile-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .gtile-title {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .gtile-title-icon {
            font-size: 1rem;
        }

        .gtile-arrow {
            color: var(--text-muted);
            font-size: 0.9rem;
            transition: color 0.2s;
        }

        .gtile:hover .gtile-arrow { color: var(--green-light); }

        /* ===================================================
           TEAM COUNT TILE
           =================================================== */
        .team-count-big {
            font-size: 3.2rem;
            font-weight: 900;
            color: var(--green-light);
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }

        .team-count-sub {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-top: 4px;
        }

        .team-count-glow {
            position: absolute;
            bottom: -20px;
            right: -20px;
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, rgba(var(--rgb-green-1), 0.15) 0%, transparent 70%);
            pointer-events: none;
        }

        /* ===================================================
           PLAYER LIST ITEMS
           =================================================== */
        .player-list { list-style: none; margin: 0; padding: 0; }

        .player-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            cursor: pointer;
            border-radius: 8px;
            padding-left: 6px;
            padding-right: 6px;
            transition: background 0.18s ease, transform 0.18s ease;
            text-decoration: none;
            color: inherit;
        }

        .player-item:last-child { border-bottom: none; }

        @media (hover: hover) and (pointer: fine) {
            .player-item:hover {
                background: rgba(255,255,255,0.05);
                transform: translateX(4px);
            }
        }

        .player-item:focus-visible {
            outline: 2px solid var(--green-light);
            border-radius: 8px;
        }

        .pi-rank {
            font-size: 0.75rem;
            font-weight: 800;
            color: var(--text-muted);
            min-width: 18px;
            text-align: center;
        }

        .pi-rank-1 { color: var(--gold); }
        .pi-rank-2 { color: #c0c0c0; }
        .pi-rank-3 { color: #cd7f32; }

        .pi-avatar-wrap {
            position: relative;
            width: 40px;
            height: 40px;
            flex-shrink: 0;
        }

        .pi-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.1);
            background: #2a3040;
        }

        .pi-flag {
            position: absolute;
            bottom: -2px;
            right: -4px;
            width: 18px;
            height: 12px;
            border-radius: 2px;
            object-fit: cover;
            box-shadow: 0 1px 3px rgba(0,0,0,0.4);
        }

        .pi-info { flex: 1; min-width: 0; }

        .pi-name {
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pi-sub {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pi-pts {
            font-weight: 800;
            font-size: 1rem;
            min-width: 40px;
            text-align: right;
            flex-shrink: 0;
        }

        .pi-pts.pos { color: var(--green-light); }
        .pi-pts.zero { color: var(--text-muted); }
        .pi-pts.neg { color: #f87171; }

        /* ===================================================
           CAPTAIN BADGE ON AVATAR
           =================================================== */
        .pi-captain-badge {
            position: absolute;
            top: -3px;
            left: -3px;
            background: linear-gradient(135deg, var(--gold), var(--gold-amber));
            color: #000;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 900;
            font-size: 8px;
            border: 1px solid #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            z-index: 5;
        }

        /* ===================================================
           NATION ITEMS
           =================================================== */
        .nation-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 6px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            cursor: pointer;
            border-radius: 8px;
            transition: background 0.18s ease, transform 0.18s ease;
            text-decoration: none;
            color: inherit;
        }

        .nation-item:last-child { border-bottom: none; }

        @media (hover: hover) and (pointer: fine) {
            .nation-item:hover {
                background: rgba(255,255,255,0.05);
                transform: translateX(4px);
            }
        }

        .ni-rank {
            font-size: 0.75rem;
            font-weight: 800;
            color: var(--text-muted);
            min-width: 18px;
            text-align: center;
        }

        .ni-flag {
            width: 28px;
            height: 19px;
            border-radius: 3px;
            object-fit: cover;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .ni-info { flex: 1; min-width: 0; }

        .ni-name {
            font-weight: 700;
            font-size: 0.88rem;
            color: var(--text-main);
        }

        .ni-pts {
            font-weight: 800;
            font-size: 0.95rem;
            color: var(--green-light);
            min-width: 40px;
            text-align: right;
        }

        .ni-bar-wrap {
            width: 60px;
            height: 4px;
            background: rgba(255,255,255,0.08);
            border-radius: 2px;
            overflow: hidden;
        }

        .ni-bar-fill {
            height: 100%;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--green-main), var(--green-light));
            transition: width 0.8s ease;
        }

        /* ===================================================
           MANAGER ITEMS
           =================================================== */
        .manager-item-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 6px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            text-decoration: none;
            color: inherit;
            border-radius: 8px;
            transition: background 0.18s ease, transform 0.18s ease;
            cursor: pointer;
        }

        .manager-item-row:last-child { border-bottom: none; }

        @media (hover: hover) and (pointer: fine) {
            .manager-item-row:hover {
                background: rgba(255,255,255,0.05);
                transform: translateX(4px);
            }
        }

        .mir-rank {
            font-size: 0.75rem;
            font-weight: 800;
            color: var(--text-muted);
            min-width: 18px;
        }

        .mir-rank-1 { color: var(--gold); }
        .mir-rank-2 { color: #c0c0c0; }
        .mir-rank-3 { color: #cd7f32; }

        .mir-name {
            flex: 1;
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mir-pts {
            font-weight: 800;
            font-size: 1rem;
            color: var(--green-light);
            min-width: 44px;
            text-align: right;
        }

        .mir-players {
            display: flex;
            margin-left: 4px;
        }

        .mir-player-avatar {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--dark-card);
            margin-left: -6px;
            background: #2a3040;
        }

        .mir-player-avatar:first-child { margin-left: 0; }

        /* ===================================================
           RANK JUMPS / CHANGES
           =================================================== */
        .rank-period-btns {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }

        .rp-btn {
            padding: 4px 10px;
            border-radius: 100px;
            border: 1px solid rgba(255,255,255,0.12);
            background: transparent;
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
        }

        .rp-btn.active, .rp-btn:hover {
            background: rgba(var(--rgb-green-1), 0.18);
            border-color: rgba(var(--rgb-green-1), 0.4);
            color: var(--green-light);
        }

        .jump-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 6px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            transition: background 0.18s ease, transform 0.18s ease;
        }

        .jump-item:last-child { border-bottom: none; }

        @media (hover: hover) and (pointer: fine) {
            .jump-item:hover {
                background: rgba(255,255,255,0.05);
                transform: translateX(4px);
            }
        }

        .ji-name {
            flex: 1;
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ji-rank {
            font-size: 0.78rem;
            color: var(--text-muted);
        }

        .ji-delta {
            display: flex;
            align-items: center;
            gap: 4px;
            font-weight: 800;
            font-size: 0.9rem;
            min-width: 50px;
            justify-content: flex-end;
        }

        .ji-delta.up { color: var(--green-light); }
        .ji-delta.down { color: #f87171; }
        .ji-delta.flat { color: var(--text-muted); }

        .ji-arrow {
            font-size: 0.8rem;
            animation: arrowBounce 1.4s ease-in-out infinite;
        }

        .ji-delta.up .ji-arrow { animation-direction: normal; }
        .ji-delta.down .ji-arrow { animation-direction: reverse; }

        @keyframes arrowBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        /* ===================================================
           CAPTAIN WATCH
           =================================================== */
        .cap-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 6px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            transition: background 0.18s ease, transform 0.18s ease;
        }

        .cap-item:last-child { border-bottom: none; }

        @media (hover: hover) and (pointer: fine) {
            .cap-item:hover {
                background: rgba(255,255,255,0.05);
                transform: translateX(4px);
            }
        }

        .ci-avatar-wrap {
            position: relative;
            width: 42px;
            height: 42px;
            flex-shrink: 0;
        }

        .ci-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--gold);
            background: #2a3040;
        }

        .ci-cap-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: linear-gradient(135deg, var(--gold), var(--gold-amber));
            color: #000;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 900;
            font-size: 9px;
            border: 1.5px solid var(--dark-card);
        }

        .ci-info { flex: 1; min-width: 0; }

        .ci-name {
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ci-sub {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .ci-count {
            font-weight: 800;
            font-size: 1rem;
            color: var(--gold-light);
        }

        /* ===================================================
           NEXT MATCHES
           =================================================== */
        .match-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px;
            border-radius: 10px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
            margin-bottom: 10px;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .match-item:last-child { margin-bottom: 0; }

        @media (hover: hover) and (pointer: fine) {
            .match-item:hover {
                background: rgba(255,255,255,0.06);
                border-color: rgba(var(--rgb-green-light), 0.15);
                transform: translateY(-2px);
            }
        }

        .match-team {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            flex: 1;
            min-width: 0;
        }

        .match-team-flag {
            width: 32px;
            height: 22px;
            border-radius: 3px;
            object-fit: cover;
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        }

        .match-team-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-main);
            text-align: center;
            line-height: 1.2;
        }

        .match-vs {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .match-vs-text {
            font-size: 0.75rem;
            font-weight: 900;
            color: var(--text-muted);
            letter-spacing: 1px;
        }

        .match-vs-date {
            font-size: 0.68rem;
            color: var(--text-muted);
        }

        .match-players-row {
            display: flex;
            margin-left: 8px;
            flex-shrink: 0;
        }

        .match-player-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--dark-card);
            margin-left: -6px;
            background: #2a3040;
        }

        .match-player-avatar:first-child { margin-left: 0; }

        .match-empty {
            text-align: center;
            padding: 32px 16px;
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        /* ===================================================
           QUICK ACCESS TILES
           =================================================== */
        .quick-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        @media (max-width: 600px) {
            .quick-grid { grid-template-columns: repeat(2, 1fr); }
        }

        .quick-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 18px 12px;
            border-radius: 14px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.07);
            text-decoration: none;
            color: var(--text-main);
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
            min-height: 80px;
            text-align: center;
        }

        @media (hover: hover) and (pointer: fine) {
            .quick-tile:hover {
                background: rgba(var(--rgb-green-light), 0.1);
                border-color: rgba(var(--rgb-green-light), 0.3);
                transform: translateY(-3px);
            }
        }

        .quick-tile:focus-visible {
            outline: 2px solid var(--green-light);
            outline-offset: 3px;
        }

        .qt-icon { font-size: 1.5rem; }

        .qt-label {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-muted);
            line-height: 1.2;
        }

        /* ===================================================
           POPULAR PICKS
           =================================================== */
        .pop-picks-scroll {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 8px;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
        }

        .pop-picks-scroll::-webkit-scrollbar { height: 4px; }
        .pop-picks-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

        /* ===================================================
           3D PLAYER CARDS (reuse dashboard style)
           =================================================== */
        @keyframes cardFlyIn {
            0% { opacity: 0; transform: translateY(-24px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .card-wrapper {
            width: 130px;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            scroll-snap-align: start;
            animation: cardFlyIn 0.55s ease-out both;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .card-wrapper .player-card {
            height: 185px;
            width: 130px;
        }

        .card-wrapper:hover { z-index: 100; }

        .player-card {
            background: var(--dark-card);
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.35);
            width: 100%;
            height: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            border: 1px solid rgba(255,255,255,0.08);
            box-sizing: border-box;
            justify-content: flex-start;
            padding-top: 14px;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale3d(1,1,1);
            transform-style: preserve-3d;
            transform-origin: center center;
            transition: transform 0.18s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
            will-change: transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .js-tilt-glare { border-radius: 12px; }

        .player-card.is-captain {
            background: linear-gradient(135deg, #1c1a0e, #261e08);
            border: 1.5px solid rgba(var(--rgb-amber), 0.5);
            box-shadow: 0 8px 20px rgba(var(--rgb-amber), 0.15);
        }

        .captain-badge {
            position: absolute;
            top: 6px;
            left: 6px;
            background: linear-gradient(135deg, var(--gold), var(--gold-amber));
            color: #000;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 900;
            font-size: 11px;
            border: 1.5px solid rgba(255,255,255,0.3);
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            z-index: 30;
            transform: translateZ(28px);
            transition: transform 0.3s ease;
            backface-visibility: hidden;
        }

        .avatar-wrapper {
            width: 72px;
            height: 72px;
            border-radius: 8px;
            overflow: hidden;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 8px;
            transform: translateZ(18px);
            transition: transform 0.3s ease;
            backface-visibility: hidden;
        }

        .card-avatar {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
        }

        .card-info {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 5px;
            box-sizing: border-box;
            transform: translateZ(12px);
            transition: transform 0.3s ease;
            backface-visibility: hidden;
        }

        .card-name {
            font-weight: 700;
            font-size: 11px;
            line-height: 1.2;
            min-height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            color: var(--text-main);
            margin-bottom: 5px;
        }

        .card-sub-info {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-size: 10px;
            width: 100%;
            margin-bottom: 3px;
            font-weight: 700;
            color: var(--text-muted);
            box-sizing: border-box;
        }

        .small-icon {
            width: 18px;
            height: 13px;
            object-fit: cover;
            border-radius: 2px;
        }

        .small-icon.club {
            width: 15px;
            height: 15px;
            object-fit: contain;
        }

        .card-pts {
            position: absolute;
            top: 6px;
            right: 6px;
            background: var(--green-main);
            color: white;
            padding: 3px 7px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 800;
            z-index: 20;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            transform: translateZ(28px);
            transition: transform 0.3s ease;
            backface-visibility: hidden;
        }

        .card-pts.neg { background: #ef4444; }

        .card-draft-label {
            font-size: 11px;
            font-weight: 800;
            color: var(--text-muted);
            text-align: center;
            margin-top: 6px;
            letter-spacing: 0.5px;
        }

        .player-card.is-captain .card-pts {
            background: linear-gradient(135deg, var(--gold), #ff9900);
            color: #000;
            font-weight: 900;
        }


        @media (pointer: coarse) {
            .player-card {
                transform-style: flat;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }

            .avatar-wrapper, .card-info, .card-pts, .captain-badge {
                transform: none !important;
                transition: none !important;
            }

            .player-card:active {
                transform: scale(0.95) !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            }
        }

        /* ===================================================
           EMPTY STATES
           =================================================== */
        .empty-state {
            text-align: center;
            padding: 28px 12px;
            color: var(--text-muted);
            font-size: 0.85rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .empty-state-icon { font-size: 1.8rem; opacity: 0.4; }

        /* ===================================================
           LOADING SKELETON
           =================================================== */
        @keyframes shimmer {
            0% { background-position: -400px 0; }
            100% { background-position: 400px 0; }
        }

        .skel {
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
            background-size: 800px 100%;
            animation: shimmer 1.4s infinite;
        }

        /* ===================================================
           SECTION SPACING
           =================================================== */
        .mb-section { margin-bottom: 32px; }

        /* ===================================================
           BOTTOM NAV DARK OVERRIDE
           =================================================== */
        .bottom-nav {
            background: #161b22 !important;
            border-top-color: rgba(255,255,255,0.07) !important;
        }

        .bottom-nav a { color: var(--text-muted) !important; }
        .bottom-nav a.active { color: var(--green-light) !important; }
        .bottom-nav a .icon { filter: grayscale(100%) brightness(0.7) !important; }
        .bottom-nav a.active .icon { filter: none !important; opacity: 1 !important; }

        /* ===================================================
           ANIMATIONS
           =================================================== */
        @keyframes fadeSlideDown {
            from { opacity: 0; transform: translateY(-18px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fade-in { animation: fadeIn 0.5s ease both; }

        /* Der DEV-Umschalter ist kein Overlay mehr – er lebt im Dev-Bereich
           des Profil-Dropdowns (siehe auth-modal.css → .dt-auth-nav-dev). */

        /* ===================================================
           MANAGER LIST (team count expanded)
           =================================================== */
        .manager-list-compact {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-top: 10px;
        }

        .mgr-chip {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 4px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-main);
        }

        .mgr-chip:last-child { border-bottom: none; }

        .mgr-chip-num {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--text-muted);
            min-width: 16px;
        }

        .mgr-chip-name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ===================================================
           BAROMETER / CLUB / AGE TILES (dark theme)
           =================================================== */
        .dark-bar-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .dark-bar-row:last-child { border-bottom: none; }

        .dark-bar-label {
            font-weight: 700;
            font-size: 0.82rem;
            color: var(--text-main);
            min-width: 120px;
            max-width: 130px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dark-bar-label a {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            width: 100%;
            min-height: 44px;
            color: inherit;
            text-decoration: none;
            transition: color 0.15s;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dark-bar-label a:hover { color: var(--green-light); }

        .dark-bar-track {
            flex: 1;
            background: rgba(255,255,255,0.06);
            height: 6px;
            border-radius: 3px;
            overflow: hidden;
        }

        .dark-bar-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.9s ease;
        }

        .dark-bar-val {
            font-weight: 700;
            font-size: 0.8rem;
            color: var(--text-muted);
            min-width: 36px;
            text-align: right;
        }

        /* Barometer subsection label */
        .dark-sub-label {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 6px 0 4px;
            margin-bottom: 2px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        .dark-sub-label.green { color: var(--green-light); }
        .dark-sub-label.red { color: #f87171; }
        .dark-sub-label.muted { color: var(--text-muted); }

        .dashboard-mini-list .dark-sub-label {
            padding: 4px 0 3px;
            margin: 0 0 1px !important;
            font-size: 0.68rem;
        }

        .dashboard-mini-list .dark-bar-row + .dark-sub-label {
            margin-top: 5px !important;
        }

        .dashboard-mini-list .dark-bar-row {
            min-height: 30px;
            padding: 4px 0;
            gap: 7px;
        }

        .dashboard-mini-list .dark-bar-label {
            min-width: 108px;
            max-width: 126px;
            font-size: 0.78rem;
        }

        .dashboard-mini-list .dark-bar-label a {
            min-height: 0;
            line-height: 1.18;
        }

        .dashboard-mini-list .dark-bar-track {
            height: 5px;
        }

        .dashboard-mini-list .dark-bar-val {
            font-size: 0.76rem;
            min-width: 32px;
        }

        .dashboard-mini-list .age-badge {
            padding: 2px 7px;
            font-size: 0.76rem;
        }

        /* Club row */
        .club-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 4px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            text-decoration: none;
            color: inherit;
            border-radius: 8px;
            transition: background 0.15s ease, transform 0.15s ease;
            cursor: pointer;
        }

        .club-row:last-child { border-bottom: none; }

        @media (hover: hover) and (pointer: fine) {
            .club-row:hover {
                background: rgba(255,255,255,0.05);
                transform: translateX(3px);
            }
        }

        .club-logo-wrap {
            width: 34px;
            height: 34px;
            background: rgba(255,255,255,0.07);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 4px;
            box-sizing: border-box;
        }

        .club-logo-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .club-name-text {
            flex: 1;
            font-weight: 600;
            font-size: 0.86rem;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .club-count-badge {
            font-weight: 800;
            font-size: 0.9rem;
            color: #38bdf8;
            min-width: 28px;
            text-align: right;
        }

        /* Age value badge */
        .age-badge {
            font-weight: 700;
            font-size: 0.8rem;
            padding: 3px 8px;
            border-radius: 6px;
            white-space: nowrap;
        }

        .age-badge.old {
            background: rgba(100, 116, 139, 0.2);
            color: #94a3b8;
        }

        .age-badge.young {
            background: rgba(var(--rgb-green-1), 0.15);
            color: var(--green-light);
        }

        /* ===================================================
           PICKS / FLOP TILES (Live Dashboard)
           =================================================== */
        .picks-list { list-style: none; margin: 0; padding: 0; }

        .pick-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 6px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            text-decoration: none;
            color: inherit;
            border-radius: 8px;
            transition: background 0.15s ease, transform 0.15s ease;
        }

        .pick-item:last-child { border-bottom: none; }

        @media (hover: hover) and (pointer: fine) {
            .pick-item:hover {
                background: rgba(255,255,255,0.05);
                transform: translateX(3px);
            }
        }

        .pick-rank {
            font-size: 0.72rem;
            font-weight: 800;
            color: var(--text-muted);
            min-width: 16px;
        }

        .pick-rank.gold { color: var(--gold); }
        .pick-rank.silver { color: #c0c0c0; }
        .pick-rank.bronze { color: #cd7f32; }

        .pick-avatar-wrap {
            position: relative;
            width: 38px;
            height: 38px;
            flex-shrink: 0;
        }

        .pick-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.1);
            background: #2a3040;
        }

        .pick-flag {
            position: absolute;
            bottom: -2px;
            right: -3px;
            width: 16px;
            height: 11px;
            border-radius: 2px;
            object-fit: cover;
            box-shadow: 0 1px 3px rgba(0,0,0,0.4);
        }

        .pick-info { flex: 1; min-width: 0; }

        .pick-name {
            font-weight: 700;
            font-size: 0.88rem;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pick-meta {
            display: flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            font-size: 0.72rem;
            color: var(--text-muted);
            margin-top: 1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pick-meta-names {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pick-meta-more {
            flex: 0 0 auto;
            color: var(--green-light);
            font-weight: 800;
        }

        .pick-pts {
            font-weight: 800;
            font-size: 0.95rem;
            min-width: 40px;
            text-align: right;
        }

        .pick-pts.pos { color: var(--green-light); }
        .pick-pts.neg { color: #f87171; }
        .pick-pts.zero { color: var(--text-muted); }

        /* ===================================================
           COMPACT PERFECT TEAM
           =================================================== */
        .compact-pt-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .compact-pt-stat {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .compact-pt-stat-val {
            font-size: 1.4rem;
            font-weight: 900;
            color: var(--green-light);
            line-height: 1;
        }

        .compact-pt-stat-label {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }

        .compact-captain-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(var(--rgb-gold), 0.1);
            border: 1px solid rgba(var(--rgb-gold), 0.25);
            border-radius: 100px;
            padding: 5px 12px 5px 5px;
            color: inherit;
            text-decoration: none;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        }

        .compact-captain-pill:hover,
        .compact-captain-pill:focus-visible {
            background: rgba(var(--rgb-gold), 0.16);
            border-color: rgba(var(--rgb-gold), 0.38);
            transform: translateY(-1px);
        }

        .compact-captain-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(var(--rgb-gold), 0.5);
            background: #2a3040;
        }

        .compact-captain-name {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--gold-light);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 120px;
        }

        /* Compact pitch layout */
        .compact-pitch {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .compact-pitch-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .compact-pos-badge {
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            min-width: 28px;
            flex-shrink: 0;
        }

        .compact-players {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .compact-player-chip {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 100px;
            padding: 4px 10px 4px 4px;
            text-decoration: none;
            color: inherit;
            transition: background 0.15s ease, border-color 0.15s ease;
            font-size: 0.8rem;
        }

        .compact-player-chip:hover {
            background: rgba(var(--rgb-green-light), 0.08);
            border-color: rgba(var(--rgb-green-light), 0.2);
        }

        .compact-player-chip.is-captain {
            background: rgba(var(--rgb-gold), 0.1);
            border-color: rgba(var(--rgb-gold), 0.3);
        }

        .compact-chip-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
            background: #2a3040;
            flex-shrink: 0;
        }

        .compact-chip-name {
            font-weight: 600;
            max-width: 90px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .compact-chip-pts {
            font-weight: 800;
            font-size: 0.78rem;
            margin-left: 2px;
        }

        .compact-chip-pts.pos { color: var(--green-light); }
        .compact-chip-pts.neg { color: #f87171; }
        .compact-chip-pts.gold { color: var(--gold-light); }

        /* Bench separator */
        .compact-bench-sep {
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 4px 0 2px;
            padding-top: 6px;
            border-top: 1px solid rgba(255,255,255,0.07);
        }

        /* ===================================================
           TILE GRID ADDITIONAL
           =================================================== */
        .tile-grid-3-auto {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        @media (max-width: 1024px) {
            .tile-grid-3-auto { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 680px) {
            .tile-grid-3-auto { grid-template-columns: 1fr; }
        }

        /* ===================================================
           POST-START WRAPPER – green-tinted atmosphere
           =================================================== */
        #indexHomePostStart {
            position: relative;
            background:
                radial-gradient(ellipse 70% 35% at 50% 0%, rgba(var(--rgb-gold), 0.18) 0%, transparent 60%),
                radial-gradient(ellipse 80% 40% at 50% 50%, rgba(var(--rgb-green-1), 0.30) 0%, transparent 65%),
                radial-gradient(ellipse 50% 30% at 15% 35%, rgba(var(--rgb-green-2), 0.28) 0%, transparent 60%),
                radial-gradient(ellipse 50% 30% at 85% 35%, rgba(var(--rgb-green-2), 0.28) 0%, transparent 60%),
                radial-gradient(ellipse 80% 40% at 50% 100%, rgba(var(--rgb-green-1), 0.30) 0%, transparent 65%),
                radial-gradient(ellipse 50% 30% at 15% 85%, rgba(var(--rgb-green-2), 0.28) 0%, transparent 60%),
                radial-gradient(ellipse 50% 30% at 85% 85%, rgba(var(--rgb-green-2), 0.28) 0%, transparent 60%),
                linear-gradient(180deg, #050a0e 0%, var(--green-bg-2) 40%, var(--green-bg-3) 100%);
            min-height: 100vh;
        }

        /* Dashboard area for post-start – transparent, no heavy tiles */
        #dashboard-post-area {
            position: relative;
            z-index: 1;
        }

        /* Floating glass panel (transparent, no hard tile) */
        .post-panel {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.10);
            border-radius: 24px;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 28px;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }

        .post-panel::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
            pointer-events: none;
        }

        .post-section-label {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .post-section-label-text {
            font-size: 0.75rem;
            font-weight: 800;
            color: rgba(255,255,255,0.45);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .post-section-label-icon {
            font-size: 1rem;
        }

        /* ===================================================
           POST-START HERO – COMPACT VERSION
           =================================================== */
        .hero-post-compact {
            min-height: auto;
            padding: 56px 24px 36px;
            justify-content: flex-start;
            background: transparent;
        }

        .hero-post-compact::before {
            display: none;
        }

        .hero-title-post {
            font-size: clamp(2rem, 5.5vw, 3.4rem);
            margin: 0 0 14px;
        }

        .hero-stats-post {
            margin-bottom: 22px;
        }

        .hero-post-pills-only {
            margin-bottom: 0;
            animation: none;
        }

        .btn-pill-accent {
            background: rgba(var(--rgb-gold), 0.12) !important;
            border-color: rgba(var(--rgb-gold), 0.35) !important;
            color: var(--gold) !important;
        }

        .btn-pill-accent:hover {
            background: rgba(var(--rgb-gold), 0.2) !important;
            border-color: rgba(var(--rgb-gold), 0.55) !important;
        }

        /* ===================================================
           LIVE RANGLISTE PODIUM (3-column podest)
           =================================================== */
        .podium-section {
            position: relative;
        }

        .ranking-live-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.35);
            color: #f87171;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: 100px;
        }

        .ranking-live-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ef4444;
            animation: livePulse 1.4s ease-in-out infinite;
        }

        @keyframes livePulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.7); }
        }

        /* Podium layout */
        .podium-stage {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 12px;
            margin: 20px 0 14px;
        }

        .podium-slot {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            flex: 1;
            max-width: 160px;
            cursor: pointer;
            text-decoration: none;
            position: relative;
        }

        .podium-slot-1 {
            order: 2;
            transform: translateY(0);
        }

        .podium-slot-2 {
            order: 1;
            transform: translateY(18px);
        }

        .podium-slot-3 {
            order: 3;
            transform: translateY(24px);
        }

        .podium-crown {
            font-size: 1.4rem;
            animation: floatCrown 3s ease-in-out infinite;
        }

        @keyframes floatCrown {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        .podium-slot-2 .podium-crown,
        .podium-slot-3 .podium-crown {
            font-size: 1rem;
            animation: none;
        }

        .podium-avatar-ring {
            width: 68px;
            height: 68px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex-shrink: 0;
        }

        .podium-slot-1 .podium-avatar-ring {
            width: 84px;
            height: 84px;
            background: radial-gradient(circle, rgba(var(--rgb-gold), 0.25), rgba(var(--rgb-gold), 0.05));
            box-shadow: 0 0 0 2px rgba(var(--rgb-gold), 0.6), 0 0 30px rgba(var(--rgb-gold), 0.25);
        }

        .podium-slot-2 .podium-avatar-ring {
            background: radial-gradient(circle, rgba(192,192,192,0.2), rgba(192,192,192,0.04));
            box-shadow: 0 0 0 2px rgba(192,192,192,0.5);
        }

        .podium-slot-3 .podium-avatar-ring {
            background: radial-gradient(circle, rgba(205,127,50,0.2), rgba(205,127,50,0.04));
            box-shadow: 0 0 0 2px rgba(205,127,50,0.5);
        }

        .podium-initials {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 900;
            color: rgba(255,255,255,0.85);
            background: rgba(255,255,255,0.08);
            letter-spacing: -0.5px;
        }

        .podium-slot-1 .podium-initials { font-size: 1.5rem; }

        .podium-info {
            text-align: center;
        }

        .podium-name {
            font-size: 0.82rem;
            font-weight: 800;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 130px;
        }

        .podium-slot-1 .podium-name {
            font-size: 0.95rem;
        }

        .podium-pts {
            font-size: 1.1rem;
            font-weight: 900;
            color: var(--green-light);
            font-variant-numeric: tabular-nums;
            line-height: 1;
        }

        .podium-slot-2 .podium-pts,
        .podium-slot-3 .podium-pts {
            font-size: 0.92rem;
        }

        .podium-rank-tag {
            font-size: 0.68rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 100px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .podium-slot-1 .podium-rank-tag {
            background: rgba(var(--rgb-gold), 0.2);
            color: var(--gold);
            border: 1px solid rgba(var(--rgb-gold), 0.4);
        }

        .podium-slot-2 .podium-rank-tag {
            background: rgba(192,192,192,0.12);
            color: #c0c0c0;
            border: 1px solid rgba(192,192,192,0.3);
        }

        .podium-slot-3 .podium-rank-tag {
            background: rgba(205,127,50,0.12);
            color: #cd7f32;
            border: 1px solid rgba(205,127,50,0.3);
        }

        .podium-pedestal {
            width: 100%;
            border-radius: 10px 10px 6px 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .podium-slot-1 .podium-pedestal {
            height: 48px;
            background: linear-gradient(180deg, rgba(var(--rgb-gold), 0.25), rgba(var(--rgb-gold), 0.1));
            border: 1px solid rgba(var(--rgb-gold), 0.3);
        }

        .podium-slot-2 .podium-pedestal {
            height: 36px;
            background: linear-gradient(180deg, rgba(192,192,192,0.18), rgba(192,192,192,0.07));
            border: 1px solid rgba(192,192,192,0.2);
        }

        .podium-slot-3 .podium-pedestal {
            height: 28px;
            background: linear-gradient(180deg, rgba(205,127,50,0.18), rgba(205,127,50,0.07));
            border: 1px solid rgba(205,127,50,0.2);
        }

        .podium-pedestal-num {
            font-size: 1rem;
            font-weight: 900;
        }

        .podium-slot-1 .podium-pedestal-num { color: var(--gold); }
        .podium-slot-2 .podium-pedestal-num { color: #c0c0c0; }
        .podium-slot-3 .podium-pedestal-num { color: #cd7f32; }

        .podium-rest {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 8px;
        }

        .podium-rest-entry {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 10px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
            text-decoration: none;
            transition: background 0.18s ease;
        }

        .podium-rest-entry:hover {
            background: rgba(255,255,255,0.06);
        }

        .podium-rest-rank {
            font-size: 0.78rem;
            font-weight: 800;
            color: var(--text-muted);
            min-width: 18px;
            text-align: center;
        }

        .podium-rest-name {
            flex: 1;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .podium-rest-pts {
            font-size: 0.88rem;
            font-weight: 900;
            color: var(--green-light);
        }

        .rp-avatars {
            display: flex;
            flex-shrink: 0;
        }

        .rp-avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.1);
            margin-left: -5px;
            background: #2a3040;
        }

        .rp-avatar:first-child { margin-left: 0; }

        .ranking-view-all {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 16px;
            padding: 11px;
            border-radius: 12px;
            background: rgba(var(--rgb-gold), 0.06);
            border: 1px solid rgba(var(--rgb-gold), 0.18);
            color: var(--gold);
            font-size: 0.82rem;
            font-weight: 700;
            text-decoration: none;
            transition: background 0.2s ease, border-color 0.2s ease;
        }

        .ranking-view-all:hover {
            background: rgba(var(--rgb-gold), 0.12);
            border-color: rgba(var(--rgb-gold), 0.32);
        }

        /* Legacy rp-* kept for compatibility */
        .ranking-podium-row { display: flex; flex-direction: column; gap: 8px; }
        .rp-entry { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); transition:background 0.2s; text-decoration:none; }
        .rp-entry:hover { background:rgba(255,255,255,0.07); }
        .rp-rank { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:900; flex-shrink:0; background:rgba(255,255,255,0.06); color:var(--text-muted); }
        .rp-rank.rank-1 { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#1a1100; }
        .rp-rank.rank-2 { background:linear-gradient(135deg,#c0c0c0,#9ca3af); color:#1a1a1a; }
        .rp-rank.rank-3 { background:linear-gradient(135deg,#cd7f32,#b45309); color:#fff; }
        .rp-info { flex:1; min-width:0; }
        .rp-manager { font-size:0.9rem; font-weight:700; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .rp-team-name { font-size:0.75rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .rp-score { font-size:1.1rem; font-weight:900; color:var(--green-light); font-variant-numeric:tabular-nums; flex-shrink:0; }

        /* ===================================================
           3D PLAYER CAROUSEL – INFINITE ENDLESS
           =================================================== */

        /* The carousel row has no panel/tile wrapper – cards stand freely */
        .carousel-section-header {
            padding: 0 16px;
            margin-bottom: 12px;
        }

        /* Break out of dashboard-area padding so carousel touches screen edges */
        .player-carousel-section {
            position: relative;
            padding: 0 0 8px;
            margin-left: -20px;
            margin-right: -20px;
        }

        /* The outer clips neighbours and hosts the edge fade overlays */
        .carousel-outer {
            position: relative;
            overflow: hidden;
        }

        /* Subtle fade-out at the very edges to hint at more cards */
        .carousel-outer::before,
        .carousel-outer::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 56px;
            z-index: 20;
            pointer-events: none;
        }

        .carousel-outer::before {
            left: 0;
            background: linear-gradient(to right, rgba(var(--rgb-green-darker), 0.6), transparent);
        }

        .carousel-outer::after {
            right: 0;
            background: linear-gradient(to left, rgba(var(--rgb-green-darker), 0.6), transparent);
        }

        /*
         * Native scroll viewport – the key change for mobile performance.
         * overflow-x: auto  → browser handles all touch physics natively.
         * scroll-snap-type  → proximity snap, doesn't fight the finger.
         * -webkit-overflow-scrolling: touch → momentum on older iOS.
         * scrollbar-width: none → hide scrollbar.
         */
        .carousel-viewport {
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
            padding: 36px 0 40px;
            /* contain keeps repaints inside this box */
            contain: paint;
        }

        .carousel-viewport::-webkit-scrollbar { display: none; }

        .carousel-track {
            display: flex;
            gap: 10px;
            /* width set dynamically by JS to accommodate all cloned slides */
        }

        .carousel-slide {
            flex-shrink: 0;
            width: 160px;
            scroll-snap-align: center;
            position: relative;
            /* GPU layer per slide for smooth 3-D compositing */
            will-change: transform, opacity;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .carousel-slide.is-center {
            z-index: 10;
        }

        .carousel-card {
            position: relative;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 24px;
            padding: 22px 16px 18px;
            text-align: center;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 9px;
            overflow: hidden;
            /* Only animate cheap composited props */
            transition: box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            /* backdrop-filter kept subtle; removed during scroll via JS class */
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            cursor: default;
            pointer-events: none;
            contain: layout paint style;
        }

        .carousel-slide.is-center .carousel-card {
            border-color: rgba(var(--rgb-green-light), 0.5);
            background: rgba(255,255,255,0.09);
            box-shadow:
                0 0 0 1px rgba(var(--rgb-green-light), 0.25),
                0 20px 50px rgba(0,0,0,0.5),
                0 0 30px rgba(var(--rgb-green-light), 0.12);
            cursor: pointer;
            pointer-events: auto;
        }

        /* Reduce expensive effects while scrolling */
        .carousel-viewport.is-scrolling .carousel-card {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
        }
        .carousel-viewport.is-scrolling .carousel-slide.is-center .carousel-card {
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }

        .carousel-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--green-light), var(--green-main), transparent);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .carousel-slide.is-center .carousel-card::before {
            opacity: 1;
        }

        .cc-rank-badge {
            position: absolute;
            top: 10px;
            left: 12px;
            font-size: 0.7rem;
            font-weight: 900;
            padding: 3px 8px;
            border-radius: 100px;
            background: rgba(255,255,255,0.08);
            color: var(--text-muted);
        }

        .cc-rank-badge.rank-1 { background: linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#1a1100; }
        .cc-rank-badge.rank-2 { background: linear-gradient(135deg,#c0c0c0,#9ca3af); color:#1a1a1a; }
        .cc-rank-badge.rank-3 { background: linear-gradient(135deg,#cd7f32,#b45309); color:#fff; }

        .cc-pts-badge {
            position: absolute;
            top: 10px;
            right: 12px;
            font-size: 0.7rem;
            font-weight: 900;
            padding: 3px 8px;
            border-radius: 100px;
            background: linear-gradient(135deg, var(--green-main), var(--green-deep));
            color: #fff;
        }

        /*
         * Photo uses fixed dimensions – no layout shift.
         * Scale change for center card is done via transform only.
         */
        .cc-photo {
            width: 62px;
            height: 78px;
            border-radius: 12px;
            object-fit: contain;
            border: 3px solid rgba(255,255,255,0.1);
            background: #2a3040;
            /* no width/height transition – use transform scale via JS */
        }

        .cc-name {
            font-size: 0.82rem;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.2;
            text-align: center;
        }

        .cc-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .cc-flag {
            width: 18px;
            height: 13px;
            border-radius: 2px;
            object-fit: cover;
        }

        .cc-nation {
            font-size: 0.7rem;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 90px;
        }

        /* Club logo in meta row */
        .cc-club-logo {
            width: 18px;
            height: 18px;
            object-fit: contain;
            border-radius: 2px;
            opacity: 0.85;
        }

        /* Carousel nav arrows */
        .carousel-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-top: 8px;
        }

        .carousel-arrow {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.06);
            color: var(--text-main);
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
            backdrop-filter: blur(8px);
        }

        .carousel-arrow:hover {
            background: rgba(var(--rgb-green-light), 0.15);
            border-color: rgba(var(--rgb-green-light), 0.4);
            transform: scale(1.08);
        }

        .carousel-arrow:active { transform: scale(0.94); }

        /* Hide nav arrows completely on mobile */
        @media (max-width: 600px) {
            .carousel-arrow {
                display: none !important;
            }
        }

        .carousel-dots {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .carousel-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.18);
            cursor: pointer;
            transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
        }

        .carousel-dot.active {
            background: var(--green-light);
            transform: scale(1.4);
            width: 14px;
            border-radius: 3px;
        }

        /* ===================================================
           MANAGER CAROUSEL CARD ELEMENTS
           =================================================== */

        /* Manager carousel slide is wider than player carousel */
        #mgr-carousel-track .carousel-slide {
            width: 200px;
        }

        /* Manager card needs more vertical space so badges don't overlap avatars */
        #mgr-carousel-track .carousel-card {
            padding: 52px 14px 18px;
            min-height: 200px;
            justify-content: flex-start;
        }

        .mc-rank-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            font-size: 0.72rem;
            font-weight: 900;
            padding: 4px 10px;
            border-radius: 100px;
            background: rgba(255,255,255,0.08);
            color: var(--text-muted);
            z-index: 2;
        }

        .mc-rank-badge.rank-1 { background: linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#1a1100; }
        .mc-rank-badge.rank-2 { background: linear-gradient(135deg,#c0c0c0,#9ca3af); color:#1a1a1a; }
        .mc-rank-badge.rank-3 { background: linear-gradient(135deg,#cd7f32,#b45309); color:#fff; }

        .mc-pts-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            font-size: 0.72rem;
            font-weight: 900;
            padding: 4px 10px;
            border-radius: 100px;
            background: linear-gradient(135deg, var(--green-main), var(--green-deep));
            color: #fff;
            z-index: 2;
        }

        /* Avatar group: 3 player photos, center one bigger (like rangliste.html) */
        .mc-avatars {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin-bottom: 4px;
        }

        /* Side avatars (rank-2 and rank-3 by points) */
        .mc-avatar-wrap {
            position: relative;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }

        .mc-avatar-wrap.mc-side {
            width: 46px;
            height: 46px;
            margin-left: -5px;
            z-index: 1;
        }

        .mc-avatar-wrap.mc-center {
            width: 64px;
            height: 64px;
            z-index: 3;
            margin-left: -8px;
            margin-right: -8px;
        }

        .mc-avatar-wrap.mc-side2 {
            width: 46px;
            height: 46px;
            margin-left: -5px;
            z-index: 2;
        }

        .mc-avatar-wrap img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid rgba(255,255,255,0.12);
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
            background: #2a3040;
        }

        .mc-avatar-wrap.mc-center img {
            border-color: rgba(var(--rgb-gold), 0.5);
            box-shadow: 0 0 0 2px rgba(var(--rgb-gold), 0.25), 0 4px 12px rgba(0,0,0,0.4);
        }

        /* Captain badge "C" */
        .mc-avatar-wrap.is-captain img {
            border-color: rgba(var(--rgb-amber), 0.6);
            box-shadow: 0 0 0 2px rgba(var(--rgb-gold), 0.25), 0 4px 12px rgba(0,0,0,0.4);
        }

        .mc-avatar-wrap.is-captain::after {
            content: 'C';
            position: absolute;
            top: -3px;
            right: -3px;
            background: linear-gradient(135deg, var(--gold), var(--gold-amber));
            color: #000;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 900;
            font-size: 9px;
            border: 1.5px solid rgba(255,255,255,0.5);
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            z-index: 20;
        }

        .mc-avatar-placeholder {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            border: 2px solid rgba(255,255,255,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

         .mc-name-link {
            text-decoration: none;
            color: inherit;
        }

        .mc-name-link:hover .mc-name { color: var(--green-light); }

        .mc-meta-links {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
            font-size: 0.73rem;
            gap: 10px;
        }

        .mc-meta-link {
            text-decoration: none;
            color: var(--text-muted);
            font-weight: 700;
        }

        .mc-meta-link:hover { color: var(--green-light); }

        .mc-rank-trend {
            margin-top: 8px;
            width: 100%;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            border-radius: 8px;
            transition: background 0.2s ease;
        }

        .mc-rank-trend:hover { background: rgba(var(--rgb-green-light), 0.08); }
        .mc-rank-trend svg { width: 100%; height: 100%; display: block; overflow: visible; }

        .mc-name {
            font-size: 0.85rem;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.2;
            text-align: center;
            word-break: break-word;
            margin-top: 6px;
        }

        /* Center card gold accent for rank 1 */
        .mgr-carousel-rank-1.is-center .carousel-card {
            border-color: rgba(var(--rgb-gold), 0.5) !important;
            box-shadow:
                0 0 0 1px rgba(var(--rgb-gold), 0.25),
                0 20px 50px rgba(0,0,0,0.5),
                0 0 30px rgba(var(--rgb-gold), 0.12) !important;
        }
        .mgr-carousel-rank-1.is-center .carousel-card::before {
            background: linear-gradient(90deg, transparent, var(--gold), var(--gold-dark), transparent) !important;
        }

        /* ===================================================
           NÄCHSTE SPIELE – MATCH TICKER (transparent)
           =================================================== */
        .match-ticker {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .nm-match-row {
            --nm-center-width: 136px;
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            position: relative;
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .nm-match-row.live {
            padding-left: 10px;
            padding-right: 10px;
            margin-left: -10px;
            margin-right: -10px;
            border-radius: 12px;
            background: linear-gradient(90deg, rgba(248,113,113,0.08), rgba(var(--rgb-green-1), 0.04));
            border-bottom-color: rgba(248,113,113,0.18);
            animation: nmLiveTilePulse 2.2s ease-in-out infinite;
        }

        .nm-match-row.pending {
            padding-left: 10px;
            padding-right: 10px;
            margin-left: -10px;
            margin-right: -10px;
            border-radius: 12px;
            background: linear-gradient(90deg, rgba(var(--rgb-gold-light), 0.08), rgba(255,255,255,0.03));
            border-bottom-color: rgba(var(--rgb-gold-light), 0.18);
        }

        .nm-match-row.finished {
            padding-left: 10px;
            padding-right: 10px;
            margin-left: -10px;
            margin-right: -10px;
            border-radius: 12px;
            background: linear-gradient(90deg, rgba(var(--rgb-green-1), 0.08), rgba(255,255,255,0.025));
            border-bottom-color: rgba(var(--rgb-green-1), 0.18);
        }

        @keyframes nmLiveTilePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
            50% { box-shadow: 0 0 0 4px rgba(248,113,113,0.1); }
        }

        .nm-match-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .nm-match-row:first-child {
            padding-top: 0;
        }

        .nm-match-main {
            display: grid;
            grid-template-columns: minmax(0, 1fr) var(--nm-center-width) minmax(0, 1fr);
            align-items: center;
            gap: 8px;
        }

        .nm-match-toggle-btn {
            position: relative;
            display: block;
            width: 100%;
            padding: 0;
            border: 0;
            background: none;
            color: inherit;
            font: inherit;
            text-align: inherit;
            cursor: pointer;
        }

        .nm-match-toggle-btn .nm-match-main {
            padding-right: 24px;
        }

        .nm-match-toggle-btn:focus-visible {
            outline: 2px solid rgba(var(--rgb-green-light), 0.55);
            outline-offset: 4px;
            border-radius: 10px;
        }

        .nm-detail-toggle {
            position: absolute;
            right: 2px;
            top: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.10);
            font-size: 0.68rem;
            line-height: 1;
            transition: transform 0.16s ease, color 0.16s ease, background 0.16s ease;
        }

        .nm-match-row.is-expanded .nm-detail-toggle {
            transform: translateY(-50%) rotate(180deg);
            color: var(--green-light);
            background: rgba(var(--rgb-green-light), 0.12);
            border-color: rgba(var(--rgb-green-light), 0.28);
        }

        .nm-team-side {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .nm-team-side.right {
            justify-content: flex-start;
            flex-direction: row-reverse;
            text-align: right;
        }

        .nm-team-side.right .nm-team-name {
            text-align: right;
        }

        .nm-team-flag {
            width: 28px;
            height: 20px;
            border-radius: 3px;
            object-fit: cover;
            flex-shrink: 0;
            box-shadow: 0 2px 6px rgba(0,0,0,0.35);
        }

        .nm-team-name {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .nm-center-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            flex-shrink: 0;
            width: 100%;
            min-width: 0;
            text-align: center;
        }

        .nm-time-badge {
            font-size: 0.78rem;
            font-weight: 900;
            color: #fff;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 8px;
            padding: 4px 10px;
            white-space: nowrap;
        }

        .nm-time-badge.today {
            background: rgba(var(--rgb-gold-light), 0.18);
            border-color: rgba(var(--rgb-gold-light), 0.35);
            color: var(--gold-light);
        }

        .nm-time-badge.countdown {
            background: rgba(248,113,113,0.14);
            border-color: rgba(248,113,113,0.32);
            color: #fca5a5;
        }

        .nm-time-badge.live {
            background: rgba(248,113,113,0.18);
            border-color: rgba(248,113,113,0.35);
            color: #f87171;
            animation: livePulse 1.2s infinite;
        }

        .nm-time-badge.pending {
            background: rgba(var(--rgb-gold-light), 0.14);
            border-color: rgba(var(--rgb-gold-light), 0.34);
            color: var(--gold-light);
        }

        .nm-time-badge.finished {
            background: rgba(var(--rgb-green-1), 0.14);
            border-color: rgba(var(--rgb-green-light), 0.32);
            color: var(--green-light);
        }

        .nm-time-sub {
            font-size: 0.7rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        .nm-stage-label {
            margin-top: 2px;
            font-size: 0.68rem;
            color: var(--green-light);
            font-weight: 800;
            letter-spacing: 0.2px;
            white-space: nowrap;
        }

        .nm-venue-inline {
            font-size: 0.62rem;
            max-width: 140px;
            white-space: normal;
            line-height: 1.2;
        }

        .nm-vs {
            font-size: 0.7rem;
            font-weight: 800;
            color: var(--text-muted);
            letter-spacing: 1px;
        }

        .nm-score-display {
            font-size: 1.65rem;
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }

        .nm-score-display.live {
            color: var(--text-main);
            text-shadow: 0 0 18px rgba(248,113,113,0.28);
        }

        .nm-score-display.finished {
            color: var(--green-light);
            text-shadow: 0 0 14px rgba(var(--rgb-green-1), 0.20);
        }

        .nm-score-sep {
            margin: 0 3px;
            color: rgba(255,255,255,0.45);
        }

        .nm-live-points {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 4px;
            padding: 3px 8px;
            border-radius: 999px;
            background: rgba(var(--rgb-green-1), 0.12);
            border: 1px solid rgba(var(--rgb-green-light), 0.22);
            color: var(--text-main);
            font-size: 0.64rem;
            font-weight: 800;
            line-height: 1;
            white-space: nowrap;
        }

        .nm-live-points-label {
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }

        .nm-live-points .neg,
        .nm-player-points.neg { color: #f87171; }

        .nm-live-points .pos,
        .nm-player-points.pos { color: var(--green-light); }

        .nm-venue-line {
            font-size: 0.68rem;
            color: var(--text-muted);
            margin-top: 4px;
            text-align: center;
        }

        .nm-players-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
            column-gap: 6px;
            row-gap: 6px;
            margin-top: 10px;
            padding-right: 24px;
            box-sizing: border-box;
            align-items: flex-start;
        }

        .nm-players-side {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .nm-players-side.left {
            grid-column: 1;
            align-items: flex-start;
        }

        .nm-players-side.right {
            grid-column: 3;
            align-items: flex-end;
            text-align: right;
        }

        .nm-goals-side {
            grid-row: 1;
        }

        .nm-chips-side {
            grid-row: 1;
        }

        .nm-players-row.has-goals .nm-chips-side {
            grid-row: 2;
        }

        .nm-goals-list {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 3px;
            font-size: 0.68rem;
            line-height: 1.22;
            color: rgba(230,237,243,0.82);
        }

        .nm-goal-row {
            display: flex;
            align-items: baseline;
            gap: 5px;
            max-width: 100%;
            min-width: 0;
        }

        .nm-players-side.right .nm-goal-row,
        .nm-detail-team.right .nm-goal-row {
            justify-content: flex-end;
        }

        .nm-goal-minute {
            color: var(--gold-light);
            font-weight: 900;
            flex: 0 0 auto;
        }

        .nm-goal-text {
            min-width: 0;
            max-width: 100%;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            vertical-align: bottom;
        }

        .nm-goal-line {
            display: inline-flex;
            align-items: baseline;
            gap: 3px;
            white-space: nowrap;
        }

        .nm-goal-assist {
            color: var(--text-muted);
        }

        .nm-goal-player,
        .nm-goal-assist-player {
            display: inline-flex;
            align-items: baseline;
            position: relative;
            padding: 0;
            color: inherit;
            font: inherit;
            font-weight: inherit;
            text-decoration: none;
            cursor: pointer;
            line-height: inherit;
        }

        .nm-goal-player:focus-visible,
        .nm-goal-assist-player:focus-visible {
            outline: 2px solid rgba(var(--rgb-green-light), 0.45);
            outline-offset: 2px;
            border-radius: 3px;
        }

        .nm-goal-penalty {
            color: var(--text-muted);
            font-weight: 800;
        }

        .nm-goal-own {
            color: #f87171;
            font-weight: 800;
        }

        @keyframes nmGoalLineScroll {
            0%, 16% { transform: translateX(0); }
            84%, 100% { transform: translateX(-28%); }
        }

        @media (prefers-reduced-motion: reduce) {
            .nm-goal-text.has-scroll .nm-goal-line {
                animation: none;
            }
        }

        .nm-player-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .nm-players-side.right .nm-player-chips {
            justify-content: flex-end;
        }

        .nm-players-divider {
            width: 1px;
            background: rgba(255,255,255,0.08);
            grid-column: 2;
            grid-row: 1;
            align-self: stretch;
            justify-self: center;
            margin: 0;
            flex-shrink: 0;
        }

        .nm-players-row.has-goals.has-chips .nm-players-divider {
            grid-row: 1 / 3;
        }

        .nm-player-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: rgba(var(--rgb-green-light), 0.08);
            border: 1px solid rgba(var(--rgb-green-light), 0.15);
            border-radius: 50%;
            width: 48px;
            height: 48px;
            padding: 0;
            text-decoration: none;
            transition: background 0.15s ease;
            position: relative;
        }

        .nm-player-chip:hover {
            background: rgba(var(--rgb-green-light), 0.16);
        }

        .nm-player-photo {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            background: #2a3040;
            flex-shrink: 0;
        }

        .nm-player-captain-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 1px solid rgba(8,12,18,0.9);
            background: linear-gradient(135deg, var(--gold), var(--gold-amber));
            color: #111827;
            box-shadow: 0 2px 6px rgba(0,0,0,0.35);
            font-size: 8px;
            font-weight: 900;
            line-height: 1;
            pointer-events: none;
            box-sizing: border-box;
        }

        .nm-player-chip.has-points {
            margin-bottom: 12px;
        }

        .nm-player-points {
            position: absolute;
            left: 50%;
            bottom: -10px;
            transform: translateX(-50%);
            min-width: 30px;
            padding: 2px 6px;
            border-radius: 999px;
            background: rgba(8,12,18,0.92);
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: 0 4px 10px rgba(0,0,0,0.28);
            color: var(--text-main);
            font-size: 0.62rem;
            font-weight: 900;
            line-height: 1.1;
            text-align: center;
            letter-spacing: 0;
            white-space: nowrap;
        }

        .nm-match-details {
            margin-top: 12px;
            padding: 12px;
            border-radius: 12px;
            background: rgba(255,255,255,0.035);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .nm-match-details[hidden] {
            display: none;
        }

        .nm-detail-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 10px;
        }

        .nm-detail-team {
            min-width: 0;
        }

        .nm-detail-team-head {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 8px;
            min-width: 0;
        }

        .nm-detail-team.right .nm-detail-team-head {
            justify-content: flex-end;
            text-align: right;
        }

        .nm-detail-team-flag {
            width: 24px;
            height: 17px;
            border-radius: 3px;
            object-fit: cover;
            flex-shrink: 0;
            box-shadow: 0 2px 6px rgba(0,0,0,0.35);
        }

        .nm-detail-team-name {
            font-size: 0.76rem;
            font-weight: 900;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .nm-detail-player-list {
            display: grid;
            gap: 8px;
        }

        .nm-detail-team .nm-goals-list {
            margin: -2px 0 10px;
            padding-bottom: 9px;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }

        .nm-detail-empty {
            display: flex;
            align-items: center;
            min-height: 52px;
            padding: 8px;
            border-radius: 10px;
            background: rgba(255,255,255,0.025);
            border: 1px dashed rgba(255,255,255,0.08);
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 700;
            text-align: center;
            justify-content: center;
        }

        .nm-detail-player-card {
            min-width: 0;
            padding: 8px;
            border-radius: 10px;
            background: rgba(9,14,22,0.42);
            border: 1px solid rgba(var(--rgb-green-light), 0.16);
        }

        .nm-detail-player-main {
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
            color: inherit;
            text-decoration: none;
            min-width: 0;
        }

        .nm-detail-player-main:hover .nm-detail-player-name {
            color: var(--green-light);
        }

        .nm-detail-player-photo {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            background: #2a3040;
            flex-shrink: 0;
        }

        .nm-detail-player-photo-wrap {
            position: relative;
            display: inline-flex;
            width: 38px;
            height: 38px;
            flex-shrink: 0;
        }

        .nm-detail-player-photo-wrap .nm-detail-player-photo {
            width: 100%;
            height: 100%;
        }

        .nm-detail-player-photo-wrap .nm-player-captain-badge {
            top: -3px;
            right: -3px;
        }

        .nm-detail-player-copy {
            min-width: 0;
        }

        .nm-detail-player-name {
            font-size: 0.76rem;
            font-weight: 900;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: color 0.15s ease;
        }

        .nm-detail-player-meta {
            display: block;
            margin-top: 2px;
            font-size: 0.64rem;
            color: var(--text-muted);
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .nm-detail-player-points {
            justify-self: end;
            min-width: 34px;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.10);
            font-size: 0.66rem;
            font-weight: 900;
            text-align: center;
            white-space: nowrap;
        }

        .nm-detail-player-points.pos { color: var(--green-light); }
        .nm-detail-player-points.neg { color: #f87171; }
        .nm-detail-player-points.zero { color: var(--text-muted); }

        .nm-detail-managers {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-top: 7px;
            padding-top: 7px;
            border-top: 1px dashed rgba(255,255,255,0.08);
        }

        .nm-detail-manager-head {
            font-size: 0.6rem;
            font-weight: 800;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .nm-detail-manager-list {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .nm-manager-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            max-width: 100%;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(255,255,255,0.055);
            border: 1px solid rgba(255,255,255,0.12);
            color: var(--text-main);
            text-decoration: none;
            font-size: 0.64rem;
            font-weight: 800;
            line-height: 1.35;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
        }

        .nm-manager-chip:hover {
            background: rgba(var(--rgb-green-light), 0.14);
            border-color: rgba(var(--rgb-green-light), 0.38);
            color: var(--green-light);
            transform: translateY(-1px);
        }

        .nm-manager-chip.is-captain {
            background: rgba(var(--rgb-yellow), 0.10);
            border-color: rgba(var(--rgb-yellow), 0.42);
        }

        .nm-manager-cap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: rgba(var(--rgb-yellow), 0.86);
            color: #1a1a1a;
            font-size: 0.55rem;
            font-weight: 900;
            flex-shrink: 0;
        }

        .nm-manager-name {
            max-width: 116px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        @media (max-width: 640px) {
            .nm-match-row {
                --nm-center-width: 92px;
            }

            .nm-match-toggle-btn .nm-match-main {
                padding-right: 20px;
            }

            .nm-score-display {
                font-size: 1.38rem;
            }

            .nm-detail-grid {
                grid-template-columns: 1fr;
            }

            .nm-detail-team.right .nm-detail-team-head {
                justify-content: flex-start;
                text-align: left;
            }

            .nm-players-row {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
                gap: 6px;
                padding-right: 20px;
                align-items: stretch;
            }

            .nm-players-divider {
                display: block;
                width: 1px;
                min-height: 34px;
                margin: 0;
                grid-column: 2;
                justify-self: center;
            }

            .nm-players-side {
                width: auto;
                min-width: 0;
            }

            .nm-goals-list {
                max-width: 100%;
                font-size: 0.62rem;
                line-height: 1.16;
            }

            @media (prefers-reduced-motion: no-preference) {
                .nm-goal-text.has-scroll .nm-goal-line {
                    animation: nmGoalLineScroll 8s ease-in-out 1.2s infinite alternate;
                }
            }

            .nm-player-chips {
                gap: 3px;
                max-width: 100%;
            }

            .nm-player-chip {
                width: 44px;
                height: 44px;
            }

            .nm-player-photo {
                width: calc(100% - 4px);
                height: calc(100% - 4px);
            }

            .nm-player-chip.has-points {
                margin-bottom: 10px;
            }

            .nm-player-points {
                min-width: 26px;
                bottom: -9px;
                padding: 1px 5px;
                font-size: 0.56rem;
            }

            .nm-detail-player-main {
                grid-template-columns: 36px minmax(0, 1fr);
            }

            .nm-detail-player-photo {
                width: 36px;
                height: 36px;
            }

            .nm-detail-player-points {
                grid-column: 2;
                justify-self: start;
            }
        }


        .nm-more-players {
            font-size: 0.7rem;
            color: var(--text-muted);
            font-weight: 600;
            align-self: center;
        }

        /* Legacy nm-card kept for any code that references it */
        .nm-card { padding: 0; }
        .nm-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
        .nm-teams { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
        .nm-team { display:flex; align-items:center; gap:6px; min-width:0; }
        .nm-time-label { font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--green-light); }
        .nm-time-label.today { color:var(--gold-light); }
        .nm-time-label.live { color:#f87171; }
        .nm-time-val { font-size:0.8rem; color:var(--text-muted); font-weight:600; }
        .nm-empty { font-size:0.8rem; color:var(--text-muted); font-style:italic; padding:4px 0; }

        /* ===================================================
           GTile override inside post-start area
           (makes them match the transparent green dashboard)
           =================================================== */
        #dashboard-post-area .gtile {
            background: rgba(255,255,255,0.04);
            border-color: rgba(255,255,255,0.09);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        #dashboard-post-area .gtile::before {
            display: none;
        }

        @media (hover: hover) and (pointer: fine) {
            #dashboard-post-area .gtile:hover {
                background: rgba(255,255,255,0.07);
                border-color: rgba(var(--rgb-green-light), 0.18);
                box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--rgb-green-light), 0.1);
            }
        }

        .ranking-preview-tile { position:relative; }

        /* ===================================================
           POST-START WOW LAYER
           Stadium atmosphere · floating particles · scroll reveals
           =================================================== */

        #indexHomePostStart {
            background-attachment: fixed;
        }

        /* Touch-Geräte: kein festgehefteter Hintergrund.
           Der Wrapper ist mehrere tausend Pixel hoch. Bleibt sein Verlauf am
           Viewport hängen, muss der Browser ihn bei JEDEM Scroll-Schritt über
           die volle Fläche neu zeichnen – der schnelle Scroll-Pfad entfällt
           damit komplett. (Betrifft in der Praxis die WM-Farbwelt; in der CL
           setzt theme-cl.css den Verlauf per `background`-Kurzschreibweise
           ohnehin auf `scroll` zurück. iOS ignoriert `fixed` hier zudem seit
           je.) Der Vor-Start-Wrapper bekommt dieselbe Regel bei sich unten. */
        @media (hover: none), (pointer: coarse) {
            #indexHomePostStart { background-attachment: scroll; }
        }

        /* Stadium spotlight cones from above */
        .ps-stage-glow {
            pointer-events: none;
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
        }

        .ps-stage-glow::before,
        .ps-stage-glow::after {
            content: "";
            position: absolute;
            top: -10%;
            width: 60%;
            height: 110%;
            background: radial-gradient(ellipse 60% 70% at 50% 0%,
                rgba(var(--rgb-green-light), 0.18) 0%,
                rgba(var(--rgb-green-light), 0.06) 35%,
                transparent 75%);
            filter: blur(20px);
            transform-origin: top center;
            animation: psBeamSweep 9s ease-in-out infinite alternate;
            mix-blend-mode: screen;
        }

        .ps-stage-glow::before {
            left: -10%;
            transform: rotate(-12deg);
        }

        .ps-stage-glow::after {
            right: -10%;
            transform: rotate(12deg);
            animation-delay: 4.5s;
            background: radial-gradient(ellipse 60% 70% at 50% 0%,
                rgba(var(--rgb-gold), 0.10) 0%,
                rgba(var(--rgb-gold), 0.04) 35%,
                transparent 75%);
        }

        @keyframes psBeamSweep {
            0%   { transform: rotate(-14deg) translateX(-2%); opacity: 0.85; }
            50%  { transform: rotate(-8deg)  translateX(2%);  opacity: 1; }
            100% { transform: rotate(-14deg) translateX(-2%); opacity: 0.7; }
        }

        /* Floating ambient orbs */
        .ps-orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(40px);
            pointer-events: none;
            z-index: 0;
            opacity: 0.55;
            mix-blend-mode: screen;
        }

        .ps-orb.o1 {
            width: 320px;
            height: 320px;
            left: -90px;
            top: 18%;
            background: radial-gradient(circle, rgba(var(--rgb-green-light), 0.55), transparent 65%);
            animation: psOrbDrift 14s ease-in-out infinite alternate;
        }

        .ps-orb.o2 {
            width: 380px;
            height: 380px;
            right: -120px;
            top: 55%;
            background: radial-gradient(circle, rgba(var(--rgb-gold), 0.30), transparent 65%);
            animation: psOrbDrift 18s 2s ease-in-out infinite alternate-reverse;
        }

        .ps-orb.o3 {
            width: 260px;
            height: 260px;
            left: 30%;
            bottom: -60px;
            background: radial-gradient(circle, rgba(var(--rgb-green-1), 0.32), transparent 65%);
            animation: psOrbDrift 22s 4s ease-in-out infinite alternate;
        }

        @keyframes psOrbDrift {
            0%   { transform: translate(0, 0) scale(1); }
            50%  { transform: translate(30px, -28px) scale(1.06); }
            100% { transform: translate(-22px, 26px) scale(0.96); }
        }

        @media (prefers-reduced-motion: reduce) {
            .ps-orb, .ps-stage-glow::before, .ps-stage-glow::after { animation: none !important; }
        }

        /* ── Touch-Geräte: Atmosphäre steht still ─────────────────────────
           Die fünf Ebenen (2 Spotlight-Kegel, 3 Orbs) liegen fix über dem
           ganzen Viewport, sind stark weichgezeichnet und animieren endlos.
           Zwei Dinge daran kosten auf dem Telefon dauerhaft Leistung:

           • `mix-blend-mode: screen` zwingt den Compositor, für jedes Bild
             den Untergrund der ganzen Fläche zurückzulesen und neu zu
             verrechnen. Solange darüber ein blendender Layer liegt, kann
             nichts darunter mehr eigenständig auf der GPU laufen – auch die
             Spielerkarten nicht, die nur transform und opacity anfassen.
           • Die Endlos-Animationen halten die Style-Maschinerie permanent
             in Betrieb, auch wenn der Nutzer gar nichts tut. In der Messung
             mit nachgebauter Bühne fielen die Style-Durchläufe pro
             Umschaltvorgang von ~50 auf ~32, sobald die Atmosphäre stillsteht.

           Auf dem Desktop ist beides gratis und bleibt unverändert. Auf
           Touch-Geräten steht dieselbe Bildaufteilung still und blendet
           normal; die etwas höheren Deckkräfte gleichen aus, dass „normal"
           auf dunklem Grund weniger aufhellt als „screen". */
        @media (hover: none), (pointer: coarse) {
            .ps-stage-glow::before,
            .ps-stage-glow::after,
            .ps-orb {
                animation: none !important;
                mix-blend-mode: normal;
            }
            .ps-stage-glow::before,
            .ps-stage-glow::after { opacity: 0.9; }
            .ps-orb { opacity: 0.7; }
        }

        /* Glass/transparent post-start hero */
        .hero-post-compact {
            position: relative;
            z-index: 2;
            min-height: auto;
            padding: 56px 20px 28px;
        }

        .hero-title-post {
            font-size: clamp(2rem, 7vw, 3.6rem);
            margin: 0 0 14px;
        }

        /* Live badge */
        .live-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 100px;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: rgba(239,68,68,0.14);
            border: 1px solid rgba(239,68,68,0.4);
            color: #f87171;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            margin-bottom: 18px;
            animation: fadeSlideDown 0.6s ease both;
        }

        .live-pill .live-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: #ef4444;
            box-shadow: 0 0 10px rgba(239,68,68,0.85);
            animation: livePulse 1.4s infinite ease-in-out;
        }

        /* Hero KPI bar */
        .post-hero-kpis {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            max-width: 760px;
            margin: 22px auto 0;
            animation: fadeSlideDown 0.7s 0.18s ease both;
        }

        .post-hero-kpi {
            position: relative;
            padding: 12px 8px 11px;
            border-radius: 14px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.10);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            text-align: center;
            text-decoration: none;
            color: inherit;
            overflow: hidden;
            transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
        }

        .post-hero-kpi:hover {
            transform: translateY(-3px);
            background: rgba(255,255,255,0.07);
            border-color: rgba(var(--rgb-green-light), 0.32);
        }

        .post-hero-kpi-val {
            font-size: clamp(1.05rem, 3.5vw, 1.55rem);
            font-weight: 900;
            color: var(--green-light);
            line-height: 1.05;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        /* Leader name can be longer; allow it to shrink instead of truncate */
        #hs-post-leader {
            font-size: clamp(0.85rem, 3.2vw, 1.35rem);
        }

        .post-hero-kpi-val.gold { color: var(--gold); }

        .post-hero-kpi-label {
            display: block;
            margin-top: 5px;
            font-size: 0.62rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1.2px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width: 520px) {
            .post-hero-kpis { grid-template-columns: repeat(2, 1fr); }
            .post-hero-kpi-val { font-size: 1.2rem; }
        }

        /* Glass panel: transparent, floating, no hard tile look */
        .glass {
            position: relative;
            background: rgba(255,255,255,0.035);
            border: 1px solid rgba(255,255,255,0.085);
            border-radius: 22px;
            padding: 18px 16px 18px;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.28);
            overflow: hidden;
            animation: glassRise 0.7s ease both;
        }

        @keyframes glassRise {
            from { opacity: 0; transform: translateY(14px) scale(0.985); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        .post-fold > .glass:nth-child(1) { animation-delay: 0.05s; }
        .post-fold > .glass:nth-child(2) { animation-delay: 0.18s; }
        .post-fold > .glass:nth-child(3) { animation-delay: 0.30s; }

        @media (prefers-reduced-motion: reduce) {
            .glass { animation: none; }
        }

        .glass::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
            pointer-events: none;
        }

        @media (min-width: 640px) {
            .glass { padding: 22px 22px 20px; border-radius: 26px; }
        }

        @media (hover: hover) and (pointer: fine) {
            .glass {
                transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
            }
            .glass:hover {
                border-color: rgba(var(--rgb-green-light), 0.18);
                background: rgba(255,255,255,0.05);
                box-shadow: 0 18px 50px rgba(0,0,0,0.34), 0 0 0 1px rgba(var(--rgb-green-light), 0.08);
            }
        }

        /* Decorative floating orb inside a panel */
        .glass-deco {
            position: absolute;
            width: 220px; height: 220px;
            right: -60px; top: -60px;
            background: radial-gradient(circle, rgba(var(--rgb-green-light), 0.18), transparent 65%);
            filter: blur(30px);
            pointer-events: none;
            z-index: 0;
        }

        .glass > *:not(.glass-deco) { position: relative; z-index: 1; }

        /* Section heading inside post panels */
        .post-h {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 16px;
        }

        .post-h-title {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: 0.4px;
        }

        .post-h-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px; height: 30px;
            border-radius: 9px;
            background: linear-gradient(135deg, rgba(var(--rgb-green-light), 0.22), rgba(var(--rgb-green-1), 0.05));
            border: 1px solid rgba(var(--rgb-green-light), 0.28);
            font-size: 1rem;
            box-shadow: 0 4px 14px rgba(var(--rgb-green-1), 0.20) inset;
        }

        .post-h-icon.gold {
            background: linear-gradient(135deg, rgba(var(--rgb-gold), 0.22), rgba(var(--rgb-gold), 0.05));
            border-color: rgba(var(--rgb-gold), 0.32);
        }

        .post-h-icon.red {
            background: linear-gradient(135deg, rgba(248,113,113,0.22), rgba(239,68,68,0.05));
            border-color: rgba(248,113,113,0.32);
        }

        .post-h-icon.cyan {
            background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(14,165,233,0.05));
            border-color: rgba(56,189,248,0.32);
        }

        .post-h-link {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            padding: 0 6px;
            font-size: 0.78rem;
            color: var(--green-light);
            text-decoration: none;
            font-weight: 700;
            opacity: 0.85;
            transition: opacity 0.2s, transform 0.2s;
            white-space: nowrap;
        }

        .post-h-link:hover { opacity: 1; transform: translateX(2px); }

        /* Scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.7s ease, transform 0.7s ease;
            will-change: opacity, transform;
        }

        .reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; transition: none; }
        }

        /* Above-the-fold post layout */
        #dashboard-post-area {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 16px 100px;
            box-sizing: border-box;
            position: relative;
            z-index: 2;
        }

        @media (min-width: 720px) {
            #dashboard-post-area { padding: 0 24px 110px; }
        }

        .post-fold {
            display: grid;
            gap: 16px;
            grid-template-columns: 1fr;
            align-items: start;
        }

        @media (min-width: 980px) {
            .post-fold {
                grid-template-columns: 1fr;
                gap: 18px;
            }
            .post-fold .post-fold-managers  { grid-area: auto; }
            .post-fold .post-fold-players   { grid-area: auto; }
            .post-fold .post-fold-matches   { grid-area: auto; }
        }

        /* Below-the-fold post sections */
        .post-bottom {
            display: grid;
            gap: 16px;
            grid-template-columns: 1fr;
            margin-top: 22px;
        }

        @media (min-width: 880px) {
            .post-bottom { grid-template-columns: 1fr 1fr; gap: 18px; }
            .post-bottom .post-full { grid-column: 1 / -1; }
        }

        /* Top-managers podium-style ranked list */
        .tm-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .tm-row {
            display: grid;
            grid-template-columns: 32px 44px 1fr auto;
            grid-template-rows: auto auto;
            grid-template-areas:
                "rank avatar name pts"
                "rank avatar best best";
            align-items: center;
            gap: 4px 10px;
            padding: 10px 12px;
            border-radius: 14px;
            background: rgba(255,255,255,0.025);
            border: 1px solid rgba(255,255,255,0.06);
            text-decoration: none;
            color: inherit;
            position: relative;
            overflow: hidden;
            transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
        }

        .tm-row::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(var(--rgb-green-light), 0.06), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
            pointer-events: none;
        }

        .tm-row:hover { background: rgba(255,255,255,0.06); border-color: rgba(var(--rgb-green-light), 0.22); transform: translateX(4px); }
        .tm-row:hover::before { transform: translateX(100%); }

        .tm-row.rank-1 {
            background: linear-gradient(135deg, rgba(var(--rgb-gold), 0.10), rgba(var(--rgb-gold), 0.02));
            border-color: rgba(var(--rgb-gold), 0.32);
        }
        .tm-row.rank-2 {
            background: linear-gradient(135deg, rgba(192,192,192,0.08), rgba(192,192,192,0.02));
            border-color: rgba(192,192,192,0.24);
        }
        .tm-row.rank-3 {
            background: linear-gradient(135deg, rgba(205,127,50,0.08), rgba(205,127,50,0.02));
            border-color: rgba(205,127,50,0.24);
        }

        .tm-rank {
            grid-area: rank;
            font-size: 1.05rem;
            font-weight: 900;
            text-align: center;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
        }
        .tm-row.rank-1 .tm-rank { color: var(--gold); text-shadow: 0 0 14px rgba(var(--rgb-gold), 0.45); }
        .tm-row.rank-2 .tm-rank { color: #c0c0c0; }
        .tm-row.rank-3 .tm-rank { color: #cd7f32; }

        .tm-avatar {
            grid-area: avatar;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.14);
            background: #2a3040;
        }

        .tm-row.rank-1 .tm-avatar { border-color: rgba(var(--rgb-gold), 0.55); box-shadow: 0 0 0 2px rgba(var(--rgb-gold), 0.18); }
        .tm-row.rank-2 .tm-avatar { border-color: rgba(192,192,192,0.45); }
        .tm-row.rank-3 .tm-avatar { border-color: rgba(205,127,50,0.45); }

        .tm-name {
            grid-area: name;
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tm-pts {
            grid-area: pts;
            font-size: 1.05rem;
            font-weight: 900;
            color: var(--green-light);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .tm-row.rank-1 .tm-pts { color: var(--gold); }

        .tm-best {
            grid-area: best;
            display: flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            margin-top: 2px;
            font-size: 0.7rem;
            color: var(--text-muted);
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
        }

        .tm-best-label {
            opacity: 0.7;
            margin-right: 2px;
        }

        .tm-best-photo {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid rgba(255,255,255,0.15);
            background: #2a3040;
            flex-shrink: 0;
        }

        .tm-best-name {
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        .tm-best-pts {
            font-weight: 800;
            color: var(--green-light);
            margin-left: auto;
            flex-shrink: 0;
        }

        /* Top players grid with podium feel */
        .tp-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        @media (min-width: 480px) {
            .tp-grid { grid-template-columns: repeat(5, 1fr); }
        }

        .tp-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 12px 6px 10px;
            border-radius: 14px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.07);
            text-decoration: none;
            color: inherit;
            overflow: hidden;
            transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
        }

        .tp-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.06); border-color: rgba(var(--rgb-green-light), 0.3); }

        .tp-card .tp-rank-badge {
            position: absolute;
            top: 6px; left: 6px;
            width: 20px; height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.66rem;
            font-weight: 900;
            background: rgba(255,255,255,0.07);
            color: var(--text-muted);
        }

        .tp-card.rank-1 .tp-rank-badge { background: linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#1a1100; box-shadow: 0 0 14px rgba(var(--rgb-gold), 0.5); }
        .tp-card.rank-2 .tp-rank-badge { background: linear-gradient(135deg,#c0c0c0,#9ca3af); color:#1a1a1a; }
        .tp-card.rank-3 .tp-rank-badge { background: linear-gradient(135deg,#cd7f32,#b45309); color:#fff; }

        .tp-photo-wrap {
            position: relative;
            width: 56px;
            height: 56px;
        }

        .tp-photo {
            width: 56px; height: 56px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.12);
            background: #2a3040;
        }

        .tp-card.rank-1 .tp-photo { border-color: rgba(var(--rgb-gold), 0.55); box-shadow: 0 0 22px rgba(var(--rgb-gold), 0.25); }

        .tp-flag {
            position: absolute;
            bottom: -2px;
            right: -4px;
            width: 20px; height: 14px;
            border-radius: 2px;
            object-fit: cover;
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }

        .tp-name {
            font-size: 0.74rem;
            font-weight: 800;
            color: var(--text-main);
            text-align: center;
            line-height: 1.15;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            width: 100%;
        }

        .tp-pts {
            font-size: 0.92rem;
            font-weight: 900;
            color: var(--green-light);
            line-height: 1;
        }

        .tp-card.rank-1 .tp-pts { color: var(--gold); }

        /* Toggle pill for top-players (Top vs Perfect Team) */
        .pt-toggle {
            display: inline-flex;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 100px;
            padding: 3px;
            gap: 0;
        }

        .pt-toggle-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            padding: 0 12px;
            font-size: 0.72rem;
            font-weight: 700;
            border-radius: 100px;
            cursor: pointer;
            letter-spacing: 0.4px;
            transition: background 0.2s ease, color 0.2s ease;
            white-space: nowrap;
        }

        .pt-toggle-btn.active {
            background: linear-gradient(135deg, rgba(var(--rgb-green-light), 0.22), rgba(var(--rgb-green-1), 0.10));
            color: var(--green-light);
            box-shadow: inset 0 0 0 1px rgba(var(--rgb-green-light), 0.35);
        }

        /* Compact perfect team pitch reused */
        #tile-post-perfect-pitch {
            margin-top: 6px;
        }

        /* Movers tile period-buttons styling overrides */
        #period-post-btns {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }

        /* The Top/Flop dual section */
        .tf-grid {
            display: grid;
            gap: 16px;
            grid-template-columns: minmax(0, 1fr);
        }

        @media (min-width: 720px) {
            .tf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        .tf-grid > * {
            min-width: 0;
        }

        .tf-block-h {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        .tf-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 100px;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .tf-pill.green {
            background: rgba(var(--rgb-green-light), 0.14);
            border: 1px solid rgba(var(--rgb-green-light), 0.32);
            color: var(--green-light);
        }

        .tf-pill.red {
            background: rgba(248,113,113,0.14);
            border: 1px solid rgba(248,113,113,0.32);
            color: #f87171;
        }

        .tf-block-sub {
            min-width: 0;
            font-size: 0.72rem;
            color: var(--text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .picks-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* Hero CTA-pills for post-start */
        .post-hero-pills {
            display: flex;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 22px;
            animation: fadeSlideDown 0.7s 0.32s ease both;
        }

        /* Mobile spacing tweaks */
        @media (max-width: 600px) {
            .post-hero-pills { display: none; }
            .hero-post-compact { padding: 38px 16px 22px; }
            .post-h-title { font-size: 0.88rem; }
            .post-h-link { font-size: 0.72rem; }
            .glass { padding: 16px 14px; border-radius: 20px; }
            .tm-row { padding: 10px 10px; grid-template-columns: 26px 40px 1fr auto; }
            .tm-avatar { width: 40px; height: 40px; }
            .tm-name { font-size: 0.88rem; }
            .tm-pts { font-size: 0.95rem; }
            .tm-best { font-size: 0.66rem; }
            #dashboard-post-area { padding: 0 14px 90px; }
            .post-fold { gap: 14px; }
            .pick-item { gap: 8px; padding: 9px 4px; }
            .pick-rank { min-width: 12px; font-size: 0.68rem; }
            .pick-avatar-wrap,
            .pick-avatar { width: 34px; height: 34px; }
            .pick-pts { min-width: 34px; font-size: 0.86rem; }
            .pick-meta { display: none; }
        }

        /* Scroll cue specifically for post-start */
        .post-scroll-cue {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin: 14px auto 6px;
            color: rgba(255,255,255,0.38);
            font-size: 0.68rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 700;
            animation: scrollCueBounce 2.2s 1s ease-in-out infinite;
        }

        .post-scroll-cue::after {
            content: "↓";
            margin-left: 6px;
            font-size: 0.85rem;
        }

        @keyframes scrollCueBounce {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(8px); }
        }

        /* Counter animation reset (used in JS) */
        .num-roll {
            display: inline-block;
            font-variant-numeric: tabular-nums;
        }

        /* ===================================================
           PRE-START-SPECIFIC LAYOUT/BACKGROUND
           =================================================== */
        #indexHomePreStart.prestart-home {
            position: relative;
            min-height: 100vh;
            background:
                radial-gradient(ellipse 100% 55% at 50% 100%, rgba(var(--rgb-green-2), 0.55) 0%, transparent 65%),
                radial-gradient(ellipse 70% 40% at 50% 70%, rgba(var(--rgb-green-2), 0.28) 0%, transparent 55%),
                radial-gradient(ellipse 60% 35% at 15% 5%, rgba(var(--rgb-gold), 0.07) 0%, transparent 50%),
                radial-gradient(ellipse 60% 35% at 85% 5%, rgba(var(--rgb-green-2), 0.20) 0%, transparent 50%),
                linear-gradient(180deg, #050a0e 0%, var(--green-bg-2) 40%, var(--green-bg-3) 100%);
            background-attachment: fixed;
        }

        /* Touch-Geräte: siehe Begründung beim Post-Start-Wrapper – ein am
           Viewport festgehefteter Verlauf auf einem seitenhohen Element
           kostet bei jedem Scroll-Schritt ein volles Neuzeichnen. */
        @media (hover: none), (pointer: coarse) {
            #indexHomePreStart.prestart-home { background-attachment: scroll; }
        }

        #indexHomePreStart.prestart-home .hero::before {
            background: none;
        }

        #indexHomePreStart.prestart-home .prestart-two-col {
            align-items: stretch;
        }

        #indexHomePreStart.prestart-home .prestart-two-col > .gtile {
            height: 100%;
        }

        /* Transparent tiles for pre-start to match post-start look */
        #indexHomePreStart .gtile {
            background: rgba(255,255,255,0.04);
            border-color: rgba(255,255,255,0.09);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        #indexHomePreStart .gtile::before {
            display: none;
        }

        @media (hover: hover) and (pointer: fine) {
            #indexHomePreStart .gtile:hover {
                background: rgba(255,255,255,0.07);
                border-color: rgba(var(--rgb-green-light), 0.18);
                box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--rgb-green-light), 0.1);
            }
        }


        /* ===================================================================
           TCC-CAROUSEL – Identische 1:1-Kopie des Karussells aus test.html.
           Bewusst eigener `tcc-`-Namespace, damit KEINE globalen Selektoren
           aus dieser index.html (z. B. .player-card, .player-name,
           .captain-badge, .meta-row …) hineinbluten und Animationen
           verlangsamen oder das Layout brechen.
           =================================================================== */
        .test-carousel-copy {
            --card-w: clamp(150px, 34vw, 230px);
            --card-h: clamp(210px, 47vw, 322px);
            --blur: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 6px;
        }
        .tcc-section-title {
            margin: 0 0 2px;
            text-align: center;
            font-size: clamp(1rem, 2.6vw, 1.25rem);
            font-weight: 900;
            letter-spacing: -0.01em;
            line-height: 1.15;
            color: #f8fbff;
            text-shadow: 0 2px 14px rgba(0,0,0,0.42);
            background: linear-gradient(135deg, #ffffff 0%, var(--gold-cream) 55%, var(--gold-light) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        /* ── Coverflow-Bühne: perspektivischer Container, transparenter
              Hintergrund. Die aktive Karte steht aufrecht vorne, die
              Nachbarn kippen in der Tiefe zurück (siehe render() in index.js). */
        .tcc-carousel {
            position: relative;
            z-index: 2;
            width: min(92vw, 760px);
            height: min(52svh, 400px);
            margin-top: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: 1600px;
            perspective-origin: 50% 50%;
            isolation: isolate;
            overflow: hidden;
            outline: none;
            background: transparent;
            touch-action: pan-y;
            user-select: none;
        }
        .tcc-track {
            position: relative;
            width: var(--card-w);
            height: var(--card-h);
            transform-style: preserve-3d;
        }
        .tcc-player-card {
            position: absolute;
            left: 50%;
            top: 50%;
            width: var(--card-w);
            height: var(--card-h);
            /* Ausgangswert; index.js überschreibt transform pro Frame. */
            transform: translate(-50%, -50%);
            transform-origin: center center;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            border-radius: 22px;
            overflow: hidden;
            padding: 11px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
            background:
                linear-gradient(165deg, rgba(29,39,59,0.95) 0%, rgba(19,27,43,0.96) 65%, rgba(13,18,31,0.98) 100%),
                radial-gradient(circle at 20% 0%, rgba(var(--rgb-gold), 0.14), transparent 52%);
            border: 1px solid rgba(255,255,255,0.16);
            box-shadow: 0 22px 55px rgba(0,0,0,0.55);
            backdrop-filter: blur(var(--blur));
            will-change: transform, opacity;
        }
        .tcc-player-card.is-active {
            box-shadow: 0 26px 60px rgba(0,0,0,0.6), 0 0 46px rgba(var(--rgb-gold), 0.22);
            border-color: rgba(var(--rgb-gold), 0.4);
        }
        /* Abdunklungs-Overlay für inaktive Karten (Opazität via JS). */
        .tcc-card-dim {
            position: absolute;
            inset: 0;
            background: #000;
            opacity: 0;
            border-radius: inherit;
            pointer-events: none;
            transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .tcc-player-photo-wrap {
            width: 62%;
            aspect-ratio: 1 / 1;
            align-self: center;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.04);
            display: grid;
            place-items: center;
            padding: 0;
            overflow: hidden;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 10px rgba(8,15,27,0.15);
        }
        .tcc-player-photo {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center center;
            pointer-events: none;
        }
        .tcc-player-info {
            min-height: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            text-align: center;
        }
        .tcc-player-name {
            margin: 0;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            font-size: clamp(0.78rem, 1.9vw, 0.96rem);
            line-height: 1.06;
            font-weight: 900;
            letter-spacing: -0.035em;
            color: #f8fbff;
            display: block;
            text-align: center;
            white-space: nowrap;
            overflow: visible;
            text-overflow: clip;
        }
        /* Badge gross unter dem Profilbild, Label klein zentriert darunter.
           Inhalt ist turnierabhängig (primäre Entität, siehe data.js-Remap):
           WM → Nationalflagge/-wappen + Nation, CL → Klublogo + Klubname. */
        .tcc-badge-wrap {
            width: 100%;
            display: grid;
            place-items: center;
            margin-top: 2px;
        }
        .tcc-badge-img {
            width: clamp(40px, 12vw, 62px);
            height: clamp(40px, 12vw, 62px);
            object-fit: contain;
            object-position: center center;
            filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
            pointer-events: none;
        }
        .tcc-badge-label {
            width: 100%;
            max-width: 100%;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.01em;
            color: rgba(230,237,243,0.9);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tcc-drafts {
            margin-top: 4px;
            width: fit-content;
            max-width: 100%;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 700;
            background: linear-gradient(135deg, rgba(var(--rgb-green-1), 0.26), rgba(var(--rgb-yellow), 0.18));
            color: #e8f7da;
            border: 1px solid rgba(134,239,172,0.42);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tcc-drafts strong { color: var(--yellow-pale); font-weight: 800; }
        .tcc-manager-carousel-card {
            justify-content: space-between;
            padding: 12px 10px 14px;
            gap: 12px;
        }
        .tcc-manager-card-rank {
            position: absolute;
            top: 10px;
            left: 10px;
            min-width: 48px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 0.9rem;
            font-weight: 950;
            letter-spacing: 0.02em;
            color: #0b1020;
            background: linear-gradient(140deg, #fff0a8, var(--gold) 55%, #ca9200);
            border: 2px solid rgba(11,16,32,0.45);
            box-shadow: 0 8px 18px rgba(0,0,0,0.48), 0 0 0 2px rgba(var(--rgb-gold), 0.22);
            z-index: 2;
        }
        .tcc-manager-carousel-card[data-rank="2"] .tcc-manager-card-rank { background: linear-gradient(140deg, #f8fafc, #d3dce9 55%, #7b8ca3); }
        .tcc-manager-carousel-card[data-rank="3"] .tcc-manager-card-rank { background: linear-gradient(140deg, #f6dfca, #d69869 55%, #8d552a); color: #fff; }
        .tcc-manager-card-name {
            margin: 38px 0 4px;
            text-align: center;
            font-weight: 950;
            font-size: clamp(0.92rem, 2.2vw, 1.05rem);
            line-height: 1.06;
            letter-spacing: -0.02em;
            color: #f8fbff;
            text-shadow: 0 0 14px rgba(255,255,255,0.08);
        }
        .tcc-manager-card-points {
            align-self: center;
            padding: 5px 10px;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 900;
            color: var(--gold-cream);
            background: rgba(var(--rgb-yellow), 0.12);
            border: 1px solid rgba(var(--rgb-yellow), 0.42);
        }
        .tcc-manager-card-topplayers {
            margin-top: auto;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 0;
            width: 100%;
            min-height: 82px;
        }
        .tcc-manager-card-player {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            min-width: 0;
            width: 54px;
            position: relative;
        }
        .tcc-manager-card-player-avatar {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            overflow: hidden;
            border: 1.8px solid rgba(255,255,255,0.42);
            box-shadow: 0 4px 10px rgba(0,0,0,0.35);
            position: relative;
            background: #0f172a;
        }
        .tcc-manager-card-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .tcc-manager-card-player.rank-2,
        .tcc-manager-card-player.rank-3 {
            transform: translateY(8px);
            z-index: 1;
        }
        .tcc-manager-card-player.rank-1 {
            width: 76px;
            z-index: 3;
            margin: 0 -8px;
        }
        .tcc-manager-card-player.rank-1 .tcc-manager-card-player-avatar {
            width: 76px;
            height: 76px;
            border-width: 2.2px;
            border-color: rgba(var(--rgb-gold), 0.62);
            box-shadow: 0 0 0 2px rgba(var(--rgb-gold), 0.26), 0 8px 16px rgba(0,0,0,0.44);
        }
        .tcc-manager-card-player.rank-2 { z-index: 2; margin-right: -5px; }
        .tcc-manager-card-player.rank-3 { z-index: 1; margin-left: -5px; }
        .tcc-manager-card-player-name {
            width: 100%;
            font-size: 0.62rem;
            font-weight: 700;
            line-height: 1.05;
            text-align: center;
            color: rgba(230,237,243,0.92);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tcc-manager-card-player-points {
            font-size: 0.62rem;
            font-weight: 800;
            color: #86efac;
            line-height: 1;
        }
        .tcc-captain-badge {
            position: absolute;
            right: -2px;
            bottom: -2px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #f97316;
            color: #fff;
            font-size: 0.66rem;
            font-weight: 900;
            display: grid;
            place-items: center;
            border: 1px solid rgba(0,0,0,0.35);
        }
        .tcc-manager-carousel-card[data-rank="1"] {
            background:
                linear-gradient(165deg, rgba(var(--rgb-amber-d1), 0.95) 0%, rgba(54,39,10,0.96) 62%, rgba(33,24,8,0.98) 100%),
                radial-gradient(circle at 22% 0%, rgba(var(--rgb-gold), 0.34), transparent 54%);
            border-color: rgba(var(--rgb-gold), 0.45);
        }
        .tcc-manager-carousel-card[data-rank="2"] {
            background:
                linear-gradient(165deg, rgba(48,56,70,0.95) 0%, rgba(37,43,58,0.97) 62%, rgba(24,29,43,0.98) 100%),
                radial-gradient(circle at 22% 0%, rgba(226,232,240,0.28), transparent 54%);
            border-color: rgba(203,213,225,0.4);
        }
        .tcc-manager-carousel-card[data-rank="3"] {
            background:
                linear-gradient(165deg, rgba(var(--rgb-amber-d3), 0.95) 0%, rgba(58,36,24,0.97) 62%, rgba(41,26,18,0.98) 100%),
                radial-gradient(circle at 22% 0%, rgba(214,138,82,0.34), transparent 54%);
            border-color: rgba(214,138,82,0.42);
        }
        @media (max-width: 560px) {
            .test-carousel-copy { margin-top: 2px; }
            .tcc-section-title { margin: 0; }
            .tcc-carousel {
                height: min(48svh, 320px);
                margin-top: 0;
            }
            .tcc-player-card { padding: 8px; gap: 6px; }
            .tcc-player-info { gap: 4px; }
            .tcc-player-name {
                font-size: 0.78rem;
                line-height: 1.06;
                letter-spacing: -0.035em;
                white-space: nowrap;
                display: block;
                overflow: visible;
                text-overflow: clip;
            }
            .tcc-badge-img { width: clamp(36px, 13vw, 50px); height: clamp(36px, 13vw, 50px); }
            .tcc-badge-label { font-size: 0.64rem; line-height: 1.15; }
            .tcc-drafts { font-size: 0.62rem; padding: 4px 8px; gap: 4px; }
        }

        /* ================================================================
           HERO: „Live Champions Stage" – Top-Manager-Bereich (Post-Start)
           1:1 portiert aus test.html (Stand: cb58bd6). Eigener Namespace
           `champ-` und `manager-` damit keine globalen Selektoren auf der
           Index-Seite kollidieren.
           ================================================================ */
        .champ-stage {
            position: relative;
            width: 100%;
            /* `box-sizing: border-box` ist hier zwingend: ohne diese Angabe addiert
               sich das horizontale Padding (16px links + 16px rechts) zur 100%-Breite,
               sodass die Bühne 32px breiter wird als der Viewport. Da das Body-Element
               `overflow-x: hidden` setzt, wurde dieser Überstand stillschweigend rechts
               abgeschnitten – die Bühne und damit auch das Podest („Top Manager") waren
               dadurch um 16px nach rechts verschoben (rechts kein Platz, links zu viel). */
            box-sizing: border-box;
            padding: 22px 16px 26px;
            margin: 0 auto;
            overflow: hidden;
            isolation: isolate;
            background: transparent;
        }

        .champ-spotlight {
            position: absolute;
            top: -10%;
            left: 50%;
            transform: translateX(-50%);
            width: 70%;
            height: 60%;
            background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(var(--rgb-gold), 0.28), transparent 70%);
            filter: blur(8px);
            pointer-events: none;
            z-index: 0;
            animation: champ-spotlight-pulse 4s ease-in-out infinite;
        }

        @keyframes champ-spotlight-pulse {
            0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
            50%      { opacity: 0.95; transform: translateX(-50%) scale(1.05); }
        }

        .champ-header {
            position: relative;
            z-index: 2;
            text-align: center;
            margin: 0 auto 14px;
            max-width: 920px;
        }

        .champ-title {
            margin: 10px 0 4px;
            font-size: clamp(1.7rem, 5vw, 3rem);
            font-weight: 900;
            line-height: 1.05;
            letter-spacing: -1px;
        }

        .champ-title .gold-text {
            background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold-dark));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .champ-title .accent {
            background: linear-gradient(135deg, var(--green-light), var(--green-main), var(--green-deep));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Stage – Podest mit 3D-Karten */
        .champ-arena {
            position: relative;
            z-index: 2;
            width: min(94vw, 940px);
            margin: 0 auto;
            perspective: 1600px;
            perspective-origin: 50% 38%;
        }

        .champ-podium {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: clamp(6px, 1.6vw, 22px);
            padding: 64px 4px 28px;
            transform-style: preserve-3d;
        }

        .champ-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            padding: 14px 12px 14px;
            border-radius: 22px;
            user-select: none;
            font-family: inherit;
            color: inherit;
            text-align: center;
            transform-style: preserve-3d;
            background:
                linear-gradient(165deg, rgba(29,39,59,0.96) 0%, rgba(19,27,43,0.97) 60%, rgba(10,18,12,0.98) 100%),
                radial-gradient(circle at 30% 0%, rgba(var(--rgb-green-1), 0.18), transparent 55%);
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow:
                0 24px 50px rgba(0,0,0,0.55),
                0 0 0 1px rgba(255,255,255,0.04) inset;
            backdrop-filter: blur(10px);
            transition: transform 0.35s cubic-bezier(0.22, 0.85, 0.4, 1.05),
                        box-shadow 0.35s ease,
                        border-color 0.35s ease,
                        filter 0.35s ease;
            will-change: transform, opacity;
            opacity: 0;
        }

        .champ-card:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 4px;
        }

        .champ-card .champ-rank-badge {
            position: absolute;
            top: -14px;
            left: -14px;
            min-width: 36px;
            height: 36px;
            padding: 0 10px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            font-weight: 900;
            font-size: 0.95rem;
            color: #0d1117;
            background: linear-gradient(135deg, #ffe97a, var(--gold) 55%, #c79500);
            border: 2px solid rgba(13,17,23,0.55);
            box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 0 3px rgba(var(--rgb-gold), 0.18);
            transform: translateZ(40px);
        }

        .champ-card[data-rank="2"] .champ-rank-badge {
            background: linear-gradient(135deg, #f1f5f9, #cbd5e1 55%, #64748b);
        }
        .champ-card[data-rank="3"] .champ-rank-badge {
            background: linear-gradient(135deg, #fcd9b6, #d68a52 55%, #8a4a26);
            color: #fff;
        }

        /* Platzierungen – Flex-Reihenfolge erzeugt das Podest:
           Rang 2 links, Rang 1 in der Mitte (höchste Karte), Rang 3 rechts. */
        .champ-card[data-rank="1"] {
            order: 2;
            flex: 1 1 0;
            max-width: clamp(190px, 32vw, 280px);
            z-index: 5;
            padding-bottom: 22px;
            border-color: rgba(var(--rgb-gold), 0.55);
            background:
                linear-gradient(165deg, rgba(40,33,18,0.95) 0%, rgba(20,17,8,0.97) 65%, rgba(10,8,4,0.98) 100%),
                radial-gradient(circle at 30% 0%, rgba(var(--rgb-gold), 0.32), transparent 55%);
            box-shadow:
                0 30px 60px rgba(0,0,0,0.6),
                0 0 50px rgba(var(--rgb-gold), 0.35),
                0 0 0 1px rgba(var(--rgb-gold), 0.4) inset;
        }

        .champ-card[data-rank="2"] {
            order: 1;
            flex: 1 1 0;
            max-width: clamp(150px, 25vw, 220px);
            z-index: 4;
        }
        .champ-card[data-rank="3"] {
            order: 3;
            flex: 1 1 0;
            max-width: clamp(150px, 25vw, 220px);
            z-index: 4;
        }

        /* Krone für #1 */
        .champ-crown {
            position: absolute;
            top: -38px;
            left: 50%;
            transform: translate(-50%, 0) translateZ(50px);
            width: clamp(46px, 9vw, 64px);
            height: auto;
            filter: drop-shadow(0 6px 14px rgba(var(--rgb-gold), 0.55));
            pointer-events: none;
        }

        @keyframes champ-crown-bob {
            0%, 100% { transform: translate(-50%, 0) translateZ(50px); }
            50%      { transform: translate(-50%, -6px) translateZ(50px); }
        }

        /* Verfolger-Karten Platz 4–10 (Top 10) */
        .champ-chasers {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: clamp(8px, 2vw, 14px);
            margin: 22px auto 0;
            width: min(94vw, 940px);
        }

        .champ-chaser {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 10px;
            padding: 10px 14px 10px 10px;
            min-width: 0;
            text-align: left;
            color: inherit;
            border-radius: 14px;
            background:
                linear-gradient(135deg, rgba(29,39,59,0.92), rgba(13,18,31,0.95));
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 10px 24px rgba(0,0,0,0.4);
            opacity: 0;
            transform: translateY(18px);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }

        .champ-chaser:hover {
            transform: translateY(-4px);
            border-color: rgba(var(--rgb-gold), 0.35);
            box-shadow: 0 14px 28px rgba(0,0,0,0.45), 0 0 22px rgba(var(--rgb-gold), 0.15);
        }

        .champ-chaser .champ-chaser-team {
            display: grid;
            grid-template-columns: 36px 1fr;
            align-items: center;
            gap: 10px;
            min-width: 0;
            min-height: 44px;
            padding: 0;
            margin: 0;
            background: none;
            border: 0;
            color: inherit;
            font-family: inherit;
            text-align: left;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .champ-chaser .champ-chaser-team:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 3px;
            border-radius: 10px;
        }

        .champ-chaser .champ-rank-mini {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            font-weight: 900;
            font-size: 0.95rem;
            color: #f1f5f9;
            background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
            border: 1px solid rgba(255,255,255,0.15);
        }

        .champ-chaser .champ-chaser-info {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .champ-chaser .champ-chaser-name {
            font-weight: 800;
            font-size: 0.92rem;
            color: #f8fbff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .champ-chaser .champ-chaser-trend {
            font-size: 0.7rem;
            color: rgba(230,237,243,0.7);
        }
        .champ-chaser .champ-chaser-points {
            font-weight: 900;
            color: var(--gold-cream);
            font-size: 1rem;
            font-family: inherit;
            background: rgba(var(--rgb-yellow), 0.08);
            border: 1px solid rgba(var(--rgb-yellow), 0.32);
            border-radius: 999px;
            min-width: 44px;
            min-height: 44px;
            padding: 7px 12px;
            cursor: pointer;
            text-align: right;
            transition: background 0.2s ease, border-color 0.2s ease,
                        box-shadow 0.2s ease, transform 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .champ-chaser .champ-chaser-points:hover {
            background: rgba(var(--rgb-yellow), 0.18);
            border-color: rgba(var(--rgb-yellow), 0.6);
            box-shadow: 0 0 18px rgba(var(--rgb-yellow), 0.2);
            transform: translateY(-1px);
        }
        .champ-chaser .champ-chaser-points:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 3px;
        }
        .champ-chaser .champ-chaser-points small {
            display: block;
            font-size: 0.6rem;
            color: rgba(255,255,255,0.55);
            font-weight: 700;
            text-align: right;
            letter-spacing: 0.06em;
        }

        /* Intro-Animationen */
        .champ-card[data-rank="1"] {
            transform: translateY(140px) translateZ(-320px) scale(0.58);
            transform-origin: 50% 100%;
            animation: champ-fly-in-1 1.55s cubic-bezier(0.22, 0.85, 0.32, 1.05) 1.6s forwards;
        }
        .champ-card[data-rank="2"] {
            transform: translateX(-280px) translateZ(-130px) rotateY(28deg) scale(0.62);
            transform-origin: 100% 100%;
            animation: champ-fly-in-2 1.25s cubic-bezier(0.22, 0.85, 0.32, 1.05) 0.85s forwards;
        }
        .champ-card[data-rank="3"] {
            transform: translateX(280px) translateZ(-130px) rotateY(-28deg) scale(0.62);
            transform-origin: 0% 100%;
            animation: champ-fly-in-3 1.25s cubic-bezier(0.22, 0.85, 0.32, 1.05) 0.25s forwards;
        }

        @keyframes champ-fly-in-1 {
            0%   { opacity: 0; transform: translateY(120px) translateZ(-300px) scale(0.6); }
            55%  { opacity: 1; transform: translateY(-12px) translateZ(60px) scale(1.06); }
            80%  { opacity: 1; transform: translateY(2px) translateZ(40px) scale(0.99); }
            100% { opacity: 1; transform: translateY(0) translateZ(30px) scale(1); }
        }
        @keyframes champ-fly-in-2 {
            0%   { opacity: 0; transform: translateX(-260px) translateZ(-120px) rotateY(28deg) scale(0.65); }
            70%  { opacity: 1; transform: translateX(8px) translateZ(-10px) rotateY(10deg) scale(0.96); }
            100% { opacity: 1; transform: translateX(0) translateZ(-25px) rotateY(14deg) scale(0.92); }
        }
        @keyframes champ-fly-in-3 {
            0%   { opacity: 0; transform: translateX(260px) translateZ(-120px) rotateY(-28deg) scale(0.65); }
            70%  { opacity: 1; transform: translateX(-8px) translateZ(-10px) rotateY(-10deg) scale(0.96); }
            100% { opacity: 1; transform: translateX(0) translateZ(-25px) rotateY(-14deg) scale(0.92); }
        }

        /* Krone erscheint erst, nachdem Rang 1 oben angekommen ist (~3.1s) */
        .champ-crown {
            opacity: 0;
            animation: champ-crown-drop 0.95s cubic-bezier(0.22, 0.85, 0.32, 1.05) 3.1s forwards,
                       champ-crown-bob 2.8s ease-in-out 4.1s infinite;
        }

        @keyframes champ-crown-drop {
            0%   { opacity: 0; transform: translate(-50%, -120px) translateZ(50px) scale(0.4) rotate(-25deg); }
            60%  { opacity: 1; transform: translate(-50%, 8px) translateZ(50px) scale(1.1) rotate(8deg); }
            100% { opacity: 1; transform: translate(-50%, 0) translateZ(50px) scale(1) rotate(0); }
        }

        .champ-chaser {
            animation: champ-chaser-in 0.7s cubic-bezier(0.22, 0.85, 0.32, 1.05) var(--chaser-delay, 3.7s) forwards;
        }

        @keyframes champ-chaser-in {
            from { opacity: 0; transform: translateY(24px) scale(0.94); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        .champ-card.is-ready {
            animation: none !important;
            opacity: 1;
        }
        .champ-card.is-ready[data-rank="1"] {
            transform: translateY(0) translateZ(30px) scale(1);
        }
        .champ-card.is-ready[data-rank="2"] {
            transform: translateX(0) translateZ(-25px) rotateY(14deg) scale(0.92);
        }
        .champ-card.is-ready[data-rank="3"] {
            transform: translateX(0) translateZ(-25px) rotateY(-14deg) scale(0.92);
        }

        /* Hover-Tilt für Top-Karten */
        @media (hover: hover) {
            .champ-card.is-ready[data-rank="1"]:hover {
                transform: translateY(-6px) translateZ(60px) scale(1.04) !important;
                box-shadow: 0 36px 70px rgba(0,0,0,0.65), 0 0 60px rgba(var(--rgb-gold), 0.55), 0 0 0 1px rgba(var(--rgb-gold), 0.5) inset;
            }
            .champ-card.is-ready[data-rank="2"]:hover {
                transform: translateX(0) translateZ(15px) rotateY(6deg) scale(0.97) !important;
                box-shadow: 0 28px 55px rgba(0,0,0,0.6), 0 0 40px rgba(203,213,225,0.35), 0 0 0 1px rgba(203,213,225,0.4) inset;
                border-color: rgba(203,213,225,0.65);
            }
            .champ-card.is-ready[data-rank="3"]:hover {
                transform: translateX(0) translateZ(15px) rotateY(-6deg) scale(0.97) !important;
                box-shadow: 0 28px 55px rgba(0,0,0,0.6), 0 0 40px rgba(214,138,82,0.4), 0 0 0 1px rgba(214,138,82,0.5) inset;
                border-color: rgba(214,138,82,0.65);
            }
        }

        /* ================================================================
           NEW: Manager Hero Card Layout
           Vorname (Hero) ─ Player Constellation ─ Punkte (Link)
           ================================================================ */
        .manager-hero-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: clamp(300px, 38vw, 380px);
            padding: 18px 12px 14px;
        }

        .manager-firstname {
            position: relative;
            display: block;
            margin: 0 0 2px;
            padding: 4px 6px 6px;
            min-height: 44px;
            font-weight: 950;
            line-height: 0.96;
            letter-spacing: -0.04em;
            font-size: clamp(1.6rem, 4.6vw, 2.6rem);
            color: #f8fbff;
            text-shadow: 0 4px 22px rgba(0,0,0,0.55), 0 0 18px rgba(255,255,255,0.06);
            cursor: pointer;
            background: none;
            border: 0;
            font-family: inherit;
            text-align: center;
            width: 100%;
            transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
            opacity: 0;
            transform: translateY(-12px) scale(0.94);
            -webkit-tap-highlight-color: transparent;
            z-index: 6;
            word-break: break-word;
        }
        .manager-firstname::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 38%;
            height: 2px;
            transform: translateX(-50%) scaleX(0);
            transform-origin: 50% 50%;
            background: linear-gradient(90deg, transparent, rgba(var(--rgb-gold), 0.65), transparent);
            transition: transform 0.3s ease, opacity 0.3s ease;
            opacity: 0.6;
            border-radius: 2px;
            pointer-events: none;
        }
        .manager-firstname:hover { transform: translateY(-1px) scale(1.02); }
        .manager-firstname:hover::after { transform: translateX(-50%) scaleX(1); opacity: 1; }
        .manager-firstname:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 4px;
            border-radius: 8px;
        }
        .champ-card[data-rank="1"] .manager-firstname {
            color: #fef3c7;
            font-size: clamp(1.85rem, 5.2vw, 3rem);
            text-shadow: 0 4px 26px rgba(0,0,0,0.6), 0 0 22px rgba(var(--rgb-gold), 0.35);
        }
        .champ-card[data-rank="2"] .manager-firstname { color: #f1f5f9; }
        .champ-card[data-rank="3"] .manager-firstname { color: #fde7d4; }

        /* Player Constellation – Top-Spieler in organischer Anordnung */
        .manager-player-constellation {
            position: relative;
            width: 100%;
            flex: 1 1 auto;
            min-height: clamp(150px, 20vw, 220px);
            margin: 6px 0 8px;
            isolation: isolate;
        }

        .manager-player-orb {
            position: absolute;
            border: 0;
            padding: 0;
            background: transparent;
            font-family: inherit;
            color: inherit;
            cursor: pointer;
            border-radius: 50%;
            transition: transform 0.3s cubic-bezier(0.22, 0.85, 0.4, 1.05),
                        box-shadow 0.3s ease,
                        filter 0.3s ease;
            opacity: 0;
            translate: -50% -50%;
            transform: scale(0.4);
            transform-origin: 50% 50%;
            -webkit-tap-highlight-color: transparent;
            will-change: transform, opacity;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        .manager-player-orb-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            background:
                radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 55%),
                linear-gradient(160deg, #1e293b, #0f172a 70%);
            border: 2px solid rgba(255,255,255,0.4);
            box-shadow:
                0 8px 22px rgba(0,0,0,0.55),
                0 0 0 1px rgba(255,255,255,0.06) inset;
            display: grid;
            place-items: center;
        }
        .manager-player-orb-inner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .manager-player-orb-fallback {
            font-weight: 900;
            color: #f8fbff;
            letter-spacing: -0.03em;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        .manager-player-orb .orb-cap {
            position: absolute;
            right: -2px;
            top: -2px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 0.7rem;
            font-weight: 900;
            color: #0d1117;
            background: linear-gradient(135deg, #ffe97a, var(--gold) 55%, #c79500);
            border: 1.5px solid rgba(13,17,23,0.6);
            box-shadow: 0 3px 8px rgba(0,0,0,0.5);
            z-index: 3;
            pointer-events: none;
        }
        .manager-player-orb .orb-pts {
            position: absolute;
            left: 50%;
            bottom: -8px;
            transform: translateX(-50%);
            padding: 2px 7px;
            border-radius: 999px;
            font-size: 0.62rem;
            font-weight: 900;
            color: #0d1117;
            background: linear-gradient(135deg, var(--yellow-paler), var(--gold-cream));
            border: 1px solid rgba(0,0,0,0.25);
            box-shadow: 0 4px 10px rgba(0,0,0,0.45);
            white-space: nowrap;
            line-height: 1;
            pointer-events: none;
            z-index: 4;
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        .manager-player-orb.has-pts .orb-pts { opacity: 1; }

        .manager-main-player .manager-player-orb-inner {
            border-color: rgba(var(--rgb-gold), 0.7);
            box-shadow:
                0 0 0 3px rgba(var(--rgb-gold), 0.18),
                0 0 28px rgba(var(--rgb-gold), 0.45),
                0 14px 30px rgba(0,0,0,0.6);
        }
        .manager-main-player .manager-player-orb-fallback { font-size: clamp(1.3rem, 3.6vw, 2rem); }

        .manager-player-orb.size-md .manager-player-orb-inner {
            border-color: rgba(255,255,255,0.55);
            box-shadow:
                0 0 0 2px rgba(255,255,255,0.08),
                0 8px 22px rgba(0,0,0,0.55);
        }
        .manager-player-orb.size-md .manager-player-orb-fallback { font-size: clamp(0.85rem, 2.2vw, 1.15rem); }

        .manager-player-orb.size-sm .manager-player-orb-inner {
            border-color: rgba(255,255,255,0.42);
            box-shadow: 0 6px 14px rgba(0,0,0,0.5);
        }
        .manager-player-orb.size-sm .manager-player-orb-fallback { font-size: clamp(0.65rem, 1.6vw, 0.85rem); }

        @media (hover: hover) {
            .manager-player-orb:hover {
                transform: scale(1.08) !important;
                z-index: 9;
                filter: brightness(1.08);
            }
            .manager-main-player:hover {
                transform: scale(1.05) !important;
            }
        }
        .manager-player-orb:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 3px;
        }

        .manager-points-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-height: 44px;
            font-weight: 900;
            color: var(--gold-cream);
            font-size: clamp(0.95rem, 2.4vw, 1.25rem);
            letter-spacing: 0.5px;
            text-shadow: 0 0 18px rgba(var(--rgb-gold), 0.35);
            align-self: center;
            cursor: pointer;
            background: rgba(var(--rgb-yellow), 0.08);
            border: 1px solid rgba(var(--rgb-yellow), 0.32);
            border-radius: 999px;
            padding: 7px 14px;
            text-decoration: none;
            transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
            font-family: inherit;
            opacity: 0;
            -webkit-tap-highlight-color: transparent;
        }
        .manager-points-link:hover {
            background: rgba(var(--rgb-yellow), 0.16);
            border-color: rgba(var(--rgb-yellow), 0.55);
            box-shadow: 0 0 18px rgba(var(--rgb-yellow), 0.18);
            transform: translateY(-1px);
        }
        .manager-points-link:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 3px;
        }
        .manager-points-link small {
            font-size: 0.62em;
            font-weight: 700;
            color: rgba(255,255,255,0.6);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        @keyframes manager-firstname-in {
            0%   { opacity: 0; transform: translateY(-14px) scale(0.92); }
            55%  { opacity: 1; transform: translateY(2px) scale(1.04); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes manager-orb-pop {
            0%   { opacity: 0; transform: scale(0.35); }
            65%  { opacity: 1; transform: scale(1.1); }
            100% { opacity: 1; transform: scale(1); }
        }
        @keyframes manager-orb-float {
            0%   { transform: translate3d(0, 0, 0) scale(1); }
            25%  { transform: translate3d(0, -2px, 0) scale(1); }
            75%  { transform: translate3d(0, 2px, 0) scale(1); }
            100% { transform: translate3d(0, 0, 0) scale(1); }
        }
        @keyframes manager-points-in {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Flacher 2D-Einflug für die Mobilversion (siehe Fix-Block weiter unten).
           Verzichtet bewusst auf translateZ / rotateY, damit die Karten strikt
           innerhalb ihrer Flexbox-Spalten bleiben und sich keine Hit-Areas
           überlappen können. */
        @keyframes champ-card-mobile-in {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes manager-firstname-mobile-in {
            from { opacity: 0; transform: translateY(-10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes manager-orb-mobile-pop {
            from { opacity: 0; transform: scale(1); }
            to   { opacity: 1; transform: scale(1); }
        }

        .champ-card.is-running .manager-firstname {
            animation: manager-firstname-in 0.65s cubic-bezier(0.22, 0.85, 0.4, 1.05) var(--firstname-delay, 0.2s) forwards;
        }
        .champ-card.is-running .manager-player-orb {
            animation: manager-orb-pop 0.55s cubic-bezier(0.22, 0.85, 0.4, 1.05) var(--orb-delay, 0.6s) forwards;
        }
        .champ-card.is-ready .manager-player-orb {
            opacity: 1;
            transform: scale(1);
            animation: manager-orb-float 4.5s ease-in-out var(--orb-float-delay, 0s) infinite;
        }
        .champ-card.is-running .manager-points-link {
            animation: manager-points-in 0.5s ease var(--points-delay, 1.4s) forwards;
        }
        .champ-card.is-ready .manager-firstname {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .champ-card.is-ready .manager-points-link {
            opacity: 1;
        }

        @media (max-width: 560px) {
            .champ-podium {
                gap: 4px;
                padding: 56px 0 22px;
                align-items: flex-end;
            }
            .champ-card { padding: 10px 6px 12px; gap: 6px; border-radius: 18px; min-width: 0; }
            .champ-card[data-rank="1"] { padding-bottom: 18px; }
            .manager-hero-card { padding: 12px 6px 10px; }

            /* Mobil: progressive Größenstaffelung 1 > 2 > 3.
               Auf kleinen Viewports werden die Desktop-`max-width`-Werte nicht
               erreicht, sodass `flex: 1 1 0` alle drei Karten visuell gleich
               breit machen würde. Wir geben Rang 1 einen größeren Flex-Anteil
               und Rang 3 den kleinsten, damit die Hierarchie (Gold > Silber >
               Bronze) auch auf dem Smartphone direkt erkennbar ist. */
            .champ-card[data-rank="1"] {
                flex: 1.5 1 0;
                max-width: none;
            }
            .champ-card[data-rank="2"] {
                flex: 1.05 1 0;
                max-width: none;
            }
            .champ-card[data-rank="3"] {
                flex: 0.8 1 0;
                max-width: none;
            }

            .champ-card[data-rank="1"].manager-hero-card { min-height: clamp(270px, 64vw, 360px); }
            .champ-card[data-rank="2"].manager-hero-card { min-height: clamp(220px, 50vw, 300px); }
            .champ-card[data-rank="3"].manager-hero-card { min-height: clamp(190px, 40vw, 260px); }

            /* Vorname des Managers darf auf Mobil keinen Zeilenumbruch haben.
               Falls der Name doch zu lang ist, wird er per Ellipsis gekürzt –
               das hält die Karte optisch ruhig und verhindert ein Reißen der
               Layout-Höhen zwischen den Karten. */
            .manager-firstname {
                white-space: nowrap;
                word-break: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-left: 4px;
                padding-right: 4px;
            }
            .champ-card[data-rank="1"] .manager-firstname { font-size: clamp(1.3rem, 6.8vw, 1.95rem); }
            .champ-card[data-rank="2"] .manager-firstname { font-size: clamp(1.05rem, 5.2vw, 1.45rem); }
            .champ-card[data-rank="3"] .manager-firstname { font-size: clamp(0.9rem, 4.4vw, 1.2rem); }

            .champ-card[data-rank="1"] .manager-player-constellation { min-height: clamp(140px, 42vw, 200px); margin: 4px 0 6px; }
            .champ-card[data-rank="2"] .manager-player-constellation { min-height: clamp(105px, 32vw, 155px); margin: 4px 0 6px; }
            .champ-card[data-rank="3"] .manager-player-constellation { min-height: clamp(85px, 26vw, 130px); margin: 4px 0 6px; }

            .manager-player-orb {
                min-width: 44px;
                min-height: 44px;
            }

            .champ-card.is-running .manager-firstname {
                animation-name: manager-firstname-mobile-in;
            }

            .champ-card.is-running .manager-player-orb {
                animation-name: manager-orb-mobile-pop;
            }

            .champ-card[data-rank="1"] .manager-points-link { min-height: 44px; padding: 7px 12px; font-size: clamp(0.82rem, 3.4vw, 1rem); }
            .champ-card[data-rank="2"] .manager-points-link { min-height: 44px; padding: 7px 10px; font-size: clamp(0.72rem, 2.9vw, 0.88rem); }
            .champ-card[data-rank="3"] .manager-points-link { min-height: 44px; padding: 7px 10px; font-size: clamp(0.66rem, 2.6vw, 0.8rem); }

            .manager-player-orb .orb-cap { width: 16px; height: 16px; font-size: 0.55rem; }
            .manager-player-orb .orb-pts { font-size: 0.55rem; padding: 1px 5px; bottom: -6px; }
            .champ-chasers {
                grid-template-columns: 1fr;
                gap: 6px;
                margin-top: 16px;
            }
            .champ-chaser { padding: 8px 10px 8px 8px; }
            .champ-chaser .champ-rank-mini { width: 30px; height: 30px; font-size: 0.85rem; }
            .champ-chaser .champ-chaser-name { font-size: 0.85rem; }
            .champ-chaser .champ-chaser-points { font-size: 0.92rem; }

            /* FIX (Mobil): Auf kleinen Screens haben Rang 2 und 3 in der
               Top-Manager-Sektion bislang keine zuverlässig klickbaren
               Trefferflächen mehr gehabt. Ursache war eine Kombination aus
               zwei Effekten:

                 1. Die Bühne nutzt `perspective: 1600px` und die Karten
                    `transform-style: preserve-3d`. Rang 1 erhält in der
                    Ruhelage `translateZ(30px)`, Rang 2/3 bekommen
                    `rotateY(±14deg) translateZ(-25px)`. Dadurch projiziert
                    Rang 1 visuell *über* die Innenkanten von Rang 2 und 3 –
                    und zwar inklusive Hit-Test-Fläche, weil das Browser-
                    Hit-Testing der projizierten 3D-Geometrie folgt.

                 2. Der vorherige Versuch, das Problem mit
                    `pointer-events: none` auf `.champ-card` zu lösen, war
                    unvollständig: `pointer-events: none` deaktiviert nur die
                    Karte selbst als Hit-Test-Ziel. Nachfahren ohne explizit
                    gesetzten Wert (z. B. das `.manager-player-constellation`-
                    `<div>`, das den Großteil der Kartenfläche füllt) bleiben
                    weiterhin trefferbar – sie schlucken Klicks geräuschlos,
                    weil sie kein `[data-action]` tragen.

               Lösung (zweistufig):

                 a) 3D auf Mobil komplett flach legen. Ohne Perspektive und
                    ohne `translateZ`/`rotateY` bleiben die Karten exakt
                    innerhalb ihrer Flexbox-Spalten – Rang 1 kann geometrisch
                    nicht mehr in die Bereiche von Rang 2/3 hineinragen. Der
                    Eintritts-Effekt bleibt als 2D-Fade-Up erhalten.

                 b) Die strukturelle Kartenhülle und insbesondere der
                    Constellation-Wrapper werden für Pointer-Events
                    transparent geschaltet. Klickbar sind dann nur noch die
                    tatsächlich interaktiven Kinder (Manager-Vorname,
                    Punkte-Link, Spieler-Orbs). Klicks landen entweder
                    direkt auf dem Ziel und bubbeln zum delegierten
                    Karten-Listener, oder sie laufen ins Leere statt eine
                    Nachbarkarte zu blockieren. */
            .champ-arena { perspective: none; }
            .champ-podium { transform-style: flat; }
            .champ-card { transform-style: flat; }

            .champ-card[data-rank="1"],
            .champ-card[data-rank="2"],
            .champ-card[data-rank="3"] {
                animation: champ-card-mobile-in 0.6s cubic-bezier(0.22, 0.85, 0.32, 1.05) forwards !important;
                transform: translateY(28px);
            }
            .champ-card[data-rank="1"] { animation-delay: 1s !important; }
            .champ-card[data-rank="2"] { animation-delay: 0.55s !important; }
            .champ-card[data-rank="3"] { animation-delay: 0.2s !important; }

            .champ-card.is-ready[data-rank="1"],
            .champ-card.is-ready[data-rank="2"],
            .champ-card.is-ready[data-rank="3"] {
                transform: none !important;
            }

            .champ-card { pointer-events: none; }
            .champ-card .manager-player-constellation { pointer-events: none; }
            .champ-card [data-action],
            .champ-card .manager-player-orb,
            .champ-card .manager-firstname,
            .champ-card .manager-points-link {
                pointer-events: auto;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .champ-card,
            .champ-chaser,
            .champ-spotlight,
            .champ-crown,
            .manager-firstname,
            .manager-player-orb,
            .manager-points-link {
                animation-duration: 0.001s !important;
                animation-delay: 0s !important;
            }
            .champ-card { opacity: 1 !important; }
            .champ-chaser { opacity: 1 !important; transform: none !important; }
            .manager-firstname,
            .manager-points-link { opacity: 1 !important; transform: none !important; }
            .manager-player-orb { opacity: 1 !important; transform: scale(1) !important; }
        }

        /* ================================================================
           CL: TOP-10-MANAGER – Kachel-Grid + Expand-Detailkarte
           Namespace `cltm-`. Nur in der CL sichtbar (index.js blendet
           #clTopManagers ein und entfernt dafür die Champ-Stage); die WM
           behält das Podest. Farbwelt über die --cl-*-Variablen (mit
           Fallbacks auf die CL-Palette), Medaillenfarben fest kodiert.

           Performance-Prinzip: Öffnen/Schliessen und der Positions-/
           Punkte-Wechsel animieren ausschliesslich transform + opacity
           (Compositor); das Popup selbst kommt aus dem gemeinsamen
           `clpop-`-Block (einfacher Zoom + Fade, bewusst ohne
           Backdrop-Blur und ohne Ghost-Morph – siehe dort).
           ================================================================ */
        .cltm-stage {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 10px 16px 6px;
            box-sizing: border-box;
        }
        @media (min-width: 720px) {
            .cltm-stage { padding: 10px 24px 6px; }
        }
        .cltm-stage[hidden] { display: none; }

        /* Toolbar mit dezentem Ansichts-Toggle („Top | Alle"). */
        .cltm-list-toolbar {
            display: flex;
            justify-content: flex-start;
            margin: 2px 0 10px;
        }
        .cltm-view-toggle { opacity: 0.9; }
        .cltm-view-toggle .pt-toggle-btn {
            min-height: 30px;
            padding: 4px 14px;
            font-size: 0.72rem;
        }

        /* Kachel-Bühne: Kacheln sind absolut positioniert und werden von
           der Layout-Engine (index.js → cltmLayoutTiles) rein über
           transform platziert – Ansicht-Wechsel „Top | Alle" animieren wie
           der Position/Punkte-Toggle im Popup (Karussell-Kurve + Stagger).
           Höhe/min-height setzt die Engine (min-height reserviert die
           Fläche unsichtbar, solange noch keine Daten da sind). */
        .cltm-list {
            position: relative;
            margin-top: 2px;
            transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .cltm-list.cltm-no-anim,
        .cltm-list.cltm-no-anim .cltm-tile {
            transition: none !important;
        }

        .cltm-empty {
            text-align: center;
            padding: 26px 16px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.04);
            color: var(--cl-text-muted, #9db6e8);
        }

        /* ── Manager-Kachel ──────────────────────────────────────────────
           Grösse kommt von der Engine (width/height + --tw inline); alle
           Innengrössen skalieren über calc(var(--tw) * …) mit der Kachel-
           breite – so passt derselbe Aufbau vom grossen Podest-Rang-1 bis
           zur kleinen „Alle"-Kachel. WICHTIG: transform gehört der Engine –
           Hover/Verstecken ändern nur Farben bzw. Opacity. */
        .cltm-tile {
            --tw: 200px;
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: top left;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: calc(var(--tw) * 0.055) calc(var(--tw) * 0.04);
            border-radius: clamp(12px, calc(var(--tw) * 0.08), 20px);
            box-sizing: border-box;
            background: linear-gradient(165deg, var(--cl-surface, #132347) 0%, var(--cl-surface-alt, #0f1c3d) 100%);
            border: 1px solid rgba(125, 180, 255, 0.16);
            color: inherit;
            font-family: inherit;
            text-align: center;
            cursor: pointer;
            will-change: transform;
            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                        opacity 0.35s ease,
                        border-color 0.22s ease,
                        box-shadow 0.22s ease;
        }
        @media (hover: hover) and (pointer: fine) {
            .cltm-tile:hover {
                border-color: rgba(125, 180, 255, 0.45);
                box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
            }
        }
        .cltm-tile:focus-visible {
            outline: 2px solid var(--cl-accent, #7db4ff);
            outline-offset: 2px;
        }
        /* Ausgeblendete Kacheln (Top-Ansicht: Ränge hinter der ersten
           Reihe) – bleiben im DOM und faden beim Wechsel auf „Alle" ein. */
        .cltm-tile.is-hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* Verbleibende Transfers („T:2") – bewusst dezent oben links in der
           Ecke. Absolut positioniert, damit der zentrierte Kachelinhalt
           (Rang, Name, Punkte, Top-3) exakt an seinem Platz bleibt; die
           Grösse skaliert wie alles andere über --tw mit der Kachelbreite. */
        .cltm-tile-transfers {
            position: absolute;
            top: calc(var(--tw) * 0.05);
            left: calc(var(--tw) * 0.055);
            font-size: clamp(7px, calc(var(--tw) * 0.048), 12px);
            font-weight: 800;
            line-height: 1;
            letter-spacing: 0.02em;
            color: var(--cl-text-muted, #9db6e8);
            opacity: 0.5;
            pointer-events: none;
        }

        .cltm-tile-head {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(var(--tw) * 0.02);
            min-width: 0;
            max-width: 100%;
        }

        /* Basis-Rang-Badge (auch im Kopf der Detailkarte verwendet). */
        .cltm-rank {
            width: 34px;
            height: 34px;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 0.95rem;
            background: rgba(255, 255, 255, 0.08);
            color: var(--cl-text-muted, #9db6e8);
            flex-shrink: 0;
        }
        .cltm-tile .cltm-rank {
            width: clamp(20px, calc(var(--tw) * 0.145), 42px);
            height: clamp(20px, calc(var(--tw) * 0.145), 42px);
            border-radius: clamp(7px, calc(var(--tw) * 0.045), 13px);
            font-size: clamp(11px, calc(var(--tw) * 0.07), 20px);
        }
        .cltm-rank.r1 {
            background: linear-gradient(135deg, #fde68a, #ffd700 55%, #e5a800);
            color: #241a00;
            box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35);
        }
        .cltm-rank.r2 {
            background: linear-gradient(135deg, #f1f5f9, #c7ced9 55%, #9ca3af);
            color: #1f2430;
        }
        .cltm-rank.r3 {
            background: linear-gradient(135deg, #fcd9b8, #e8a06a 55%, #c2703d);
            color: #2b1608;
        }

        .cltm-name {
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 800;
            font-size: clamp(10px, calc(var(--tw) * 0.075), 21px);
            letter-spacing: -0.01em;
        }

        .cltm-tile-pts {
            display: flex;
            align-items: baseline;
            gap: calc(var(--tw) * 0.02);
            font-weight: 900;
            font-size: clamp(12px, calc(var(--tw) * 0.098), 28px);
            color: #fff;
            white-space: nowrap;
        }
        .cltm-tile-pts small {
            font-size: clamp(8px, calc(var(--tw) * 0.045), 13px);
            font-weight: 700;
            color: var(--cl-text-muted, #9db6e8);
        }

        .cltm-top3 {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: clamp(4px, calc(var(--tw) * 0.035), 14px);
        }
        .cltm-top3-player {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            min-width: 0;
        }
        .cltm-top3-avatar {
            width: clamp(20px, calc(var(--tw) * 0.16), 48px);
            height: clamp(20px, calc(var(--tw) * 0.16), 48px);
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid rgba(125, 180, 255, 0.4);
            background: var(--cl-surface-alt, #0f1c3d);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cltm-top3-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            display: block;
        }
        .cltm-avatar-fallback {
            font-size: 0.62rem;
            font-weight: 800;
            color: var(--cl-text-muted, #9db6e8);
        }
        .cltm-tile .cltm-avatar-fallback {
            font-size: clamp(7px, calc(var(--tw) * 0.05), 13px);
        }
        .cltm-top3-pts {
            font-size: clamp(8px, calc(var(--tw) * 0.048), 13px);
            font-weight: 800;
            color: var(--cl-accent, #7db4ff);
            white-space: nowrap;
        }

        /* ================================================================
           GEMEINSAMES POPUP (`clpop-`) – Overlay + Expand-Detailkarte
           Wird von BEIDEN CL-Bereichen genutzt: „Top Manager" (Kachel →
           Manager-Karte) und „Aktuelle Spiele" (Kachel → Spiel-Karte).
           Der Controller dazu steht in index.js (clpopOpen/clpopClose);
           bereichsspezifisch sind nur die Inhalte im Karten-Body.
           ================================================================ */
        /* Harter Scroll-Lock: `overflow: hidden` allein reicht auf iOS
           Safari nicht – der Hintergrund scrollt beim Wischen im Popup
           sichtbar mit. `position: fixed` friert den Body komplett ein;
           index.js kompensiert die Scroll-Position über `top: -scrollY`
           und stellt sie beim Schliessen wieder her. */
        body.clpop-lock {
            position: fixed;
            left: 0;
            right: 0;
            width: 100%;
            overflow: hidden;
        }

        .clpop-overlay {
            position: fixed;
            inset: 0;
            /* 100vw schliesst die reservierte Scrollbar-Rinne mit ein –
               ohne das blieb rechts ein unabgedunkelter Streifen sichtbar,
               solange das Popup offen ist (Body eingefroren → keine
               Scrollbar, aber scrollbar-gutter reserviert die Spur). */
            width: 100vw;
            right: auto;
            /* Über der mobilen Bereichsleiste (.bottom-nav, z-index 1500):
               das Popup deckt die ganze App ab, die Aktions-Buttons unten
               bleiben klickbar. */
            z-index: 1600;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
            box-sizing: border-box;
        }
        .clpop-overlay[hidden] { display: none; }

        /* Backdrop: einziges Hintergrund-Element. Bewusst OHNE
           backdrop-filter – der Blur war auf Mobile eine Dauerquelle von
           Flackern/Aufblitzen (Re-Rasterung ganzer Ebenen, mehrere
           Bugfix-Runden); die etwas höhere Deckkraft ersetzt ihn. */
        .clpop-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(3, 8, 22, 0.82);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .clpop-overlay.is-open .clpop-backdrop { opacity: 1; }

        /* Waehrend der Rueck-Animation ist der Body bereits entsperrt
           (Re-Layout hinter dem Backdrop, s. index.js clpopClose): weicher
           Lock statt position:fixed – kein Scrollen, kein Layout-Sprung. */
        body.clpop-lock-soft { overflow: hidden; }
        .clpop-overlay.is-closing { pointer-events: none; touch-action: none; }

        .clpop-modal {
            position: relative;
            z-index: 1;
            /* Nur so breit, dass 5 Chips (4 Starter + Bank) in eine Reihe
               passen: Gutter 44 + 4×~117 Chips + Gaps + Bank-Spalte + Body-
               Padding – die Chip-Layout-Engine füllt die Breite dann exakt. */
            width: min(760px, 100%);
            max-height: min(90vh, 900px);
            max-height: min(92dvh, 900px);
            display: flex;
            flex-direction: column;
            border-radius: 24px;
            background: linear-gradient(170deg, var(--cl-surface, #132347), var(--cl-surface-alt, #0f1c3d));
            border: 1px solid rgba(125, 180, 255, 0.28);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
            overflow: hidden;
            will-change: transform, opacity;
            /* Einfache, robuste Bewegung: UNIFORMES scale + fade. Der
               transform-origin zeigt auf die angeklickte Kachel (setzt
               index.js → clpopOpen), die Karte wächst also aus der
               richtigen Richtung – ohne Geometrie-Morph, ohne verzerrte
               Inhalte, ohne zusätzliche Ebenen. Dauer muss zu
               CLPOP_OPEN_MS/CLPOP_CLOSE_MS in index.js passen. */
            opacity: 0;
            transform: scale(0.94);
            transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
        }
        .clpop-overlay.is-open .clpop-modal {
            opacity: 1;
            transform: none;
        }
        .clpop-overlay.is-closing .clpop-modal {
            opacity: 0;
            transform: scale(0.96);
            transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
        }

        .clpop-modal-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 16px;
            border-bottom: 1px solid rgba(125, 180, 255, 0.15);
            flex-shrink: 0;
            flex-wrap: wrap;
        }
        .cltm-modal-title {
            display: flex;
            flex-direction: column;
            min-width: 0;
            flex: 1;
        }
        .cltm-modal-name {
            font-weight: 900;
            font-size: 1.15rem;
            letter-spacing: -0.01em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* Kopf-Deeplinks: Rang → Rangliste, Name → Team. Bewusst dezent
           (keine Dauer-Unterstreichung), aber mit klarem Hover/Fokus –
           die Karte soll nicht wie ein Linkverzeichnis aussehen. */
        .cltm-modal-name-link {
            display: block;
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        .cltm-rank-link {
            text-decoration: none;
            transition: box-shadow 0.2s ease, filter 0.2s ease;
        }
        @media (hover: hover) and (pointer: fine) {
            .cltm-modal-name-link:hover {
                color: var(--cl-accent, #7db4ff);
                text-decoration: underline;
                text-underline-offset: 3px;
            }
            .cltm-rank-link:hover {
                box-shadow: 0 0 0 2px rgba(125, 180, 255, 0.45);
                filter: brightness(1.12);
            }
        }
        .cltm-modal-name-link:focus-visible,
        .cltm-rank-link:focus-visible {
            outline: 2px solid var(--cl-accent, #7db4ff);
            outline-offset: 2px;
            border-radius: 8px;
        }
        .cltm-modal-pts {
            font-weight: 800;
            color: var(--cl-accent, #7db4ff);
        }
        .cltm-modal-pts small {
            font-weight: 700;
            color: var(--cl-text-muted, #9db6e8);
        }
        .cltm-mode-toggle { flex-shrink: 0; }
        .cltm-mode-toggle .pt-toggle-btn { min-height: 38px; }
        /* Flex-Zeilenumbruch-Helfer: bricht auf schmalen Screens die Zeile
           VOR dem Toggle, ohne dass der Toggle-Pill selbst auf volle Breite
           gestreckt wird (er bleibt so breit wie seine beiden Buttons). */
        .cltm-head-break { display: none; }
        /* Schmale Screens: Toggle in eigene Zeile (zentriert, intrinsische
           Breite), damit der Manager-Name im Kopf nicht bis zur
           Unkenntlichkeit gekürzt wird. */
        @media (max-width: 640px) {
            .clpop-modal-head { row-gap: 8px; }
            .cltm-head-break {
                display: block;
                flex-basis: 100%;
                height: 0;
                order: 4;
            }
            .cltm-mode-toggle {
                order: 5;
                margin: 0 auto;
            }
        }
        .clpop-close {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.06);
            color: inherit;
            font-size: 0.9rem;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.2s ease, border-color 0.2s ease;
        }
        .clpop-close:hover {
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.35);
        }
        .clpop-close:focus-visible {
            outline: 2px solid var(--cl-accent, #7db4ff);
            outline-offset: 2px;
        }

        /* Innenleben blendet leicht verzögert ein, während die Karte wächst
           (nur Opacity – kein zusätzliches Layout/Painting während des FLIP). */
        .clpop-modal-body {
            padding: 12px 18px 18px;
            overflow-y: auto;
            /* Verhindert den Breiten-Sprung, wenn während der Expand-
               Animation die Scrollbar auftaucht (Chip-Layout misst clientWidth). */
            scrollbar-gutter: stable;
            /* Scroll-Kette kappen: am Ende des Popup-Scrollens darf der
               Schwung nicht auf den Hintergrund übergehen. */
            overscroll-behavior: contain;
            /* Kein eigenes Opacity-Staging mehr: das Ein-/Ausblenden des
               ganzen Modals (Crossfade mit dem Ghost) übernimmt das – eine
               Animationsebene weniger = flüssiger. */
        }
        @media (max-width: 640px) {
            .clpop-modal-body { padding: 10px 10px 14px; }
        }

        /* ── Spieler-Bereich (JS-Layout, animierte Chips) ────────────── */
        .cltm-players {
            position: relative;
            transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .cltm-players > .cltm-chip {
            position: absolute;
            left: 0;
            top: 0;
            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform;
        }
        .cltm-players.cltm-no-anim,
        .cltm-players.cltm-no-anim > .cltm-chip {
            transition: none !important;
        }

        /* Chip = Rahmen (div) mit zwei Zielen darin: `-main` öffnet die
           Spieler-Analyse, das Klub-Badge filtert die Analyse auf den
           Klub. Weil das Badge deshalb NEBEN dem Button steht (statt in
           ihm), hängt es am Chip-Rahmen und wird über die drei Masse
           unten an die Avatar-Ecke gerechnet. */
        .cltm-chip {
            --chip-pad-top: 8px;
            --chip-avatar: 44px;
            --chip-badge: 21px;   /* inkl. 1px Rand (border-box) */
            position: relative;
            border-radius: 14px;
            box-sizing: border-box;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(125, 180, 255, 0.18);
            color: inherit;
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        .cltm-chip-main {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            width: 100%;
            padding: var(--chip-pad-top) 4px 7px;
            box-sizing: border-box;
            background: none;
            border: 0;
            border-radius: inherit;
            color: inherit;
            font-family: inherit;
            cursor: pointer;
        }
        /* Kein transform beim Hover: die Position der Feld-Chips lebt im
           transform – ein Hover-Transform würde sie verschieben. */
        @media (hover: hover) and (pointer: fine) {
            .cltm-chip:hover {
                border-color: rgba(125, 180, 255, 0.55);
                background: rgba(255, 255, 255, 0.09);
            }
        }
        .cltm-chip-main:focus-visible {
            outline: 2px solid var(--cl-accent, #7db4ff);
            outline-offset: 2px;
            border-radius: inherit;
        }
        .cltm-chip-avatar {
            position: relative;
            width: var(--chip-avatar);
            height: var(--chip-avatar);
            flex-shrink: 0;
        }
        .cltm-chip-avatar > img,
        .cltm-chip-avatar > .cltm-avatar-fallback {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            object-position: top;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.08);
        }
        /* Sitzt an der unteren rechten Avatar-Ecke, 5px/3px darüber
           hinaus – identisch zur früheren Platzierung im Avatar. */
        .cltm-chip-club {
            position: absolute;
            top: calc(var(--chip-pad-top) + var(--chip-avatar) + 3px - var(--chip-badge));
            left: calc(50% + var(--chip-avatar) / 2 + 5px - var(--chip-badge));
            width: var(--chip-badge);
            height: var(--chip-badge);
            box-sizing: border-box;
            border-radius: 50%;
            background: var(--cl-surface-alt, #0f1c3d);
            border: 1px solid rgba(255, 255, 255, 0.28);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .cltm-chip-club img {
            width: 13px;
            height: 13px;
            object-fit: contain;
            display: block;
        }
        /* Als Link etwas grösser antippbar, ohne den Namen darunter zu
           verdecken (die Fläche bleibt in der Avatar-Zeile). `overflow`
           muss dafür offen sein, sonst schneidet das Badge seine eigene
           Trefferfläche weg – das Logo darin ist mit festen 13px ohnehin
           kleiner als der Kreis. */
        a.cltm-chip-club {
            overflow: visible;
        }
        a.cltm-chip-club::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
        }
        @media (hover: hover) and (pointer: fine) {
            a.cltm-chip-club:hover {
                border-color: var(--cl-accent, #7db4ff);
                box-shadow: 0 0 0 2px rgba(125, 180, 255, 0.35);
            }
        }
        a.cltm-chip-club:focus-visible {
            outline: 2px solid var(--cl-accent, #7db4ff);
            outline-offset: 2px;
        }
        .cltm-chip-name {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.62rem;
            font-weight: 700;
        }
        .cltm-chip-pts {
            font-size: 0.74rem;
            font-weight: 900;
            color: var(--cl-accent, #7db4ff);
        }
        .cltm-chip-bench {
            border-style: dashed;
            background: rgba(255, 255, 255, 0.03);
        }

        /* Dekor: Reihen-Labels, Bank-Beschriftung, Trennlinie. */
        .cltm-row-label,
        .cltm-bench-caption {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 0.6rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--cl-text-muted, #9db6e8);
            text-align: center;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .cltm-row-label {
            width: 38px;
            text-align: left;
        }
        .cltm-bench-divider {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            border-left: 1px dashed rgba(125, 180, 255, 0.35);
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .cltm-players.mode-points .cltm-row-label,
        .cltm-players.mode-points .cltm-bench-caption,
        .cltm-players.mode-points .cltm-bench-divider,
        .cltm-players:not(.cltm-inrow) .cltm-row-label,
        .cltm-players:not(.cltm-inrow) .cltm-bench-divider {
            opacity: 0;
        }

        /* ── Transfers (ausgetauschte Spieler) ───────────────────────── */
        .cltm-transfers {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(125, 180, 255, 0.14);
        }
        .cltm-transfers-label {
            display: block;
            text-align: center;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--cl-text-muted, #9db6e8);
            margin-bottom: 8px;
        }
        .cltm-transfers-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }
        .cltm-transfers-row .cltm-chip { width: 96px; }
        .cltm-chip-out {
            opacity: 0.78;
            border-style: dashed;
        }

        .clpop-modal-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 14px;
        }

        /* ================================================================
           CL: „AKTUELLE SPIELE" – Kachel-Bühne + Inhalt der Detailkarte
           Namespace `clcm-`. Nur in der CL sichtbar (index.js blendet
           #clCurrentMatches ein und entfernt dafür das Ticker-Panel); die
           WM behält ihren Ticker. Overlay, Morph-Animation und Karten-
           Chrome kommen aus dem gemeinsamen `clpop-`-Block oben – hier
           steht ausschliesslich Bereichsspezifisches.

           Grössen: die Layout-Funktion (index.js → clcmSyncTileScale)
           setzt Spaltenzahl (--clcm-cols), Abstand (--clcm-gap) und
           Kachelbreite (--ctw) auf der Bühne; alle Innengrössen der
           Kachel skalieren über calc(var(--ctw) * …) mit – derselbe
           Mechanismus wie --tw bei den Manager-Kacheln.
           ================================================================ */
        .clcm-stage {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1280px;
            margin: 26px auto 0;
            padding: 10px 16px 6px;
            box-sizing: border-box;
        }
        @media (min-width: 720px) {
            .clcm-stage { padding: 10px 24px 6px; }
        }
        .clcm-stage[hidden] { display: none; }

        .clcm-list-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin: 2px 0 10px;
            /* „Abgeschlossen"/„Kommend" sind breiter als die alten Labels –
               auf schmalen Screens darf der Spielplan-Link umbrechen. */
            flex-wrap: wrap;
        }
        .clcm-view-toggle { opacity: 0.9; }
        .clcm-view-toggle .pt-toggle-btn {
            min-height: 30px;
            padding: 4px 12px;
            font-size: 0.7rem;
        }
        /* Nur wenn ÜBERHAUPT keine Spiele vorliegen → kein Toggle. Eine
           leere Einzelseite blendet ihn nicht aus, sie bekommt einen
           Hinweis (siehe .clcm-empty). */
        .clcm-list-toolbar.is-single-view .clcm-view-toggle { visibility: hidden; }
        .clcm-list-link {
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: var(--cl-accent, #7db4ff);
            text-decoration: none;
            white-space: nowrap;
        }
        .clcm-list-link:hover { text-decoration: underline; }

        .clcm-list {
            /* Höhe wird beim Ansichts-Wechsel kurzzeitig von JS gesetzt und
               animiert (Grid animiert seine Auto-Höhe nicht selbst). */
            transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
            display: grid;
            grid-template-columns: repeat(var(--clcm-cols, 2), minmax(0, 1fr));
            gap: var(--clcm-gap, 10px);
            --ctw: 180px;
        }
        .clcm-empty {
            grid-column: 1 / -1;
            text-align: center;
            padding: 26px 16px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.04);
            color: var(--cl-text-muted, #9db6e8);
            transition: opacity 0.35s ease;
        }
        /* Hinweis der gerade nicht gewählten Ansicht – wie die Kacheln
           raus aus dem Raster (siehe .clcm-tile.is-hidden). */
        .clcm-empty.is-hidden { display: none; }

        /* ── Spiel-Kachel ──────────────────────────────────────────────── */
        .clcm-tile {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: space-between;
            gap: calc(var(--ctw) * 0.04);
            padding: calc(var(--ctw) * 0.07) calc(var(--ctw) * 0.045) calc(var(--ctw) * 0.055);
            min-height: calc(var(--ctw) * 0.9);
            border-radius: clamp(12px, calc(var(--ctw) * 0.08), 20px);
            box-sizing: border-box;
            background: linear-gradient(165deg, var(--cl-surface, #132347) 0%, var(--cl-surface-alt, #0f1c3d) 100%);
            border: 1px solid rgba(125, 180, 255, 0.16);
            color: inherit;
            font-family: inherit;
            text-align: center;
            cursor: pointer;
            transition: opacity 0.35s ease,
                        border-color 0.22s ease,
                        box-shadow 0.22s ease;
        }
        @media (hover: hover) and (pointer: fine) {
            .clcm-tile:hover {
                border-color: rgba(125, 180, 255, 0.45);
                box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
            }
        }
        .clcm-tile:focus-visible {
            outline: 2px solid var(--cl-accent, #7db4ff);
            outline-offset: 2px;
        }
        /* Kacheln der gerade nicht gewählten Ansicht („Abgeschlossen" bzw.
           „Kommend") bleiben im DOM, verlassen aber das Raster – der
           Wechsel ist damit eine reine Opacity-Animation. */
        .clcm-tile.is-hidden { display: none; }
        /* Laufende Spiele bekommen einen dezenten Rahmen-Akzent. */
        .clcm-tile.is-live {
            border-color: rgba(255, 92, 92, 0.45);
            box-shadow: 0 0 0 1px rgba(255, 92, 92, 0.12) inset;
        }

        /* Spielart ganz unten („Ligaphase · Spiel 3", „Achtelfinal Hinspiel",
           „Final"). Feste Mindesthöhe, damit alle Kacheln einer Reihe gleich
           hoch bleiben, auch wenn zu einem Spiel keine Runde bekannt ist. */
        .clcm-tile-type {
            display: block;
            min-height: 1.2em;
            font-size: clamp(8px, calc(var(--ctw) * 0.052), 12px);
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--cl-text-muted, #9db6e8);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .clcm-tile-main {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: calc(var(--ctw) * 0.02);
            flex: 1;
        }
        /* Klubnamen in eigener Zeile: so steht jedem Namen die halbe
           Kachelbreite zur Verfügung (statt der schmalen Aussenspalte
           neben dem Resultat) und lange Namen bleiben lesbar. */
        .clcm-tile-names {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: calc(var(--ctw) * 0.03);
            align-items: start;
        }
        .clcm-logo {
            justify-self: center;
            width: clamp(26px, calc(var(--ctw) * 0.27), 64px);
            height: clamp(26px, calc(var(--ctw) * 0.27), 64px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .clcm-logo-img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }
        .clcm-club {
            max-width: 100%;
            /* Bis zu zwei Zeilen, danach Ellipsis – volle Klubnamen ohne
               eigene Kürzungsheuristik. */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.16;
            font-size: clamp(9px, calc(var(--ctw) * 0.07), 16px);
            font-weight: 800;
            letter-spacing: -0.01em;
            word-break: break-word;
        }

        .clcm-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1px;
            padding: 0 calc(var(--ctw) * 0.02);
        }
        .clcm-score {
            display: flex;
            align-items: baseline;
            font-size: clamp(15px, calc(var(--ctw) * 0.155), 40px);
            font-weight: 900;
            color: #fff;
            letter-spacing: -0.02em;
            white-space: nowrap;
        }
        .clcm-score i {
            font-style: normal;
            padding: 0 calc(var(--ctw) * 0.012);
            color: var(--cl-text-muted, #9db6e8);
        }
        .clcm-score.is-live { color: #ff9b9b; }
        /* „n.V." / „n.E." – klein und dezent unter dem Schlussresultat. */
        .clcm-score-note {
            font-size: clamp(7px, calc(var(--ctw) * 0.05), 12px);
            font-weight: 800;
            letter-spacing: 0.03em;
            color: var(--cl-text-muted, #9db6e8);
            white-space: nowrap;
        }
        .clcm-kick-time {
            font-size: clamp(12px, calc(var(--ctw) * 0.115), 30px);
            font-weight: 900;
            color: #fff;
            white-space: nowrap;
        }
        .clcm-kick-date {
            font-size: clamp(8px, calc(var(--ctw) * 0.055), 13px);
            font-weight: 700;
            color: var(--cl-text-muted, #9db6e8);
            white-space: nowrap;
        }

        /* Status-Badge – auf der Kachel nur noch bei laufenden Spielen bzw.
           offenem Update; abgeschlossene Spiele erkennt man am weissen
           Resultat, kommende an Zeit + Datum. */
        .clcm-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: clamp(8px, calc(var(--ctw, 180px) * 0.052), 12px);
            font-weight: 800;
            letter-spacing: 0.02em;
            white-space: nowrap;
            background: rgba(255, 255, 255, 0.08);
            color: var(--cl-text-muted, #9db6e8);
        }
        .clcm-badge.live {
            background: rgba(255, 92, 92, 0.18);
            color: #ff9b9b;
        }
        .clcm-badge.finished {
            background: rgba(125, 180, 255, 0.16);
            color: var(--cl-accent, #7db4ff);
        }
        .clcm-badge.pending,
        .clcm-badge.countdown {
            background: rgba(255, 196, 84, 0.16);
            color: #ffcf7a;
        }
        .clcm-badge.today {
            background: rgba(110, 231, 168, 0.16);
            color: #6ee7a8;
        }

        /* ── Detailkarte: Kopf ─────────────────────────────────────────── */
        .clpop-modal.clcm-modal { width: min(940px, 100%); }
        .clpop-modal-head.clcm-modal-head {
            display: block;
            position: relative;
            padding: 16px 54px 14px;
            text-align: center;
        }
        .clcm-modal-head .clpop-close {
            position: absolute;
            top: 12px;
            right: 12px;
        }
        .clcm-head-teams {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 10px;
        }
        .clcm-head-side {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }
        /* Wappen + Klubname führen in die Analyse (Filter auf den Klub).
           Padding nur für die Hover-Fläche; das negative Margin nimmt es
           wieder zurück, damit der Kopf exakt gleich hoch bleibt. */
        .clcm-head-side-link {
            color: inherit;
            text-decoration: none;
            border-radius: 12px;
            padding: 4px 2px;
            margin: -4px -2px;
            transition: background 0.2s ease, color 0.2s ease;
        }
        @media (hover: hover) and (pointer: fine) {
            .clcm-head-side-link:hover {
                background: rgba(125, 180, 255, 0.12);
                color: var(--cl-accent, #7db4ff);
            }
        }
        .clcm-head-side-link:focus-visible {
            outline: 2px solid var(--cl-accent, #7db4ff);
            outline-offset: 2px;
        }
        .clcm-head-logo {
            width: clamp(44px, 11vw, 72px);
            height: clamp(44px, 11vw, 72px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .clcm-head-logo-img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }
        .clcm-head-club {
            max-width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.18;
            font-size: clamp(0.82rem, 2.6vw, 1.05rem);
            font-weight: 900;
            letter-spacing: -0.01em;
            word-break: break-word;
        }
        .clcm-head-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 0 6px;
        }
        .clcm-head-score,
        .clcm-head-kick {
            display: flex;
            align-items: baseline;
            font-size: clamp(1.6rem, 6vw, 2.6rem);
            font-weight: 900;
            color: #fff;
            letter-spacing: -0.02em;
            line-height: 1;
        }
        .clcm-head-score i {
            font-style: normal;
            padding: 0 6px;
            color: var(--cl-text-muted, #9db6e8);
        }
        /* „n.V." / „n.E." unter dem Resultat im Kopf der Detailkarte. */
        .clcm-head-note {
            margin-top: -2px;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: var(--cl-text-muted, #9db6e8);
        }
        .clcm-head-meta {
            margin-top: 10px;
            font-size: 0.74rem;
            font-weight: 700;
            color: var(--cl-text-muted, #9db6e8);
        }

        /* ── Detailkarte: Blöcke ───────────────────────────────────────── */
        .clcm-block {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(125, 180, 255, 0.14);
        }
        /* Der erste Block sitzt direkt unter dem Kopf – dort wäre die
           Trennlinie ein doppelter Strich. */
        .clpop-modal-body > .clcm-block:first-child {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }
        .clcm-block-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }
        .clcm-block-title {
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--cl-text-muted, #9db6e8);
            margin-bottom: 8px;
        }
        .clcm-block-head .clcm-block-title { margin-bottom: 0; }
        .clcm-mode-toggle .pt-toggle-btn {
            min-height: 30px;
            padding: 4px 14px;
            font-size: 0.72rem;
        }
        .clcm-note {
            font-size: 0.72rem;
            color: rgba(157, 182, 232, 0.8);
        }

        /* Torschützen beider Teams nebeneinander. */
        .clcm-goals {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .clcm-goals-side.right { text-align: right; }
        .clcm-goals-none {
            font-size: 0.74rem;
            color: rgba(157, 182, 232, 0.65);
        }
        .clcm-goal-row {
            display: flex;
            align-items: baseline;
            gap: 6px;
            font-size: 0.78rem;
            line-height: 1.45;
        }
        .clcm-goals-side.right .clcm-goal-row { flex-direction: row-reverse; }
        .clcm-goal-minute {
            flex-shrink: 0;
            font-weight: 800;
            font-size: 0.68rem;
            color: var(--cl-text-muted, #9db6e8);
        }
        .clcm-goal-text { min-width: 0; }
        .clcm-goal-player,
        .clcm-goal-assist-player {
            color: inherit;
            text-decoration: none;
            font-weight: 700;
        }
        .clcm-goal-player:hover,
        .clcm-goal-assist-player:hover { text-decoration: underline; }
        .clcm-goal-assist,
        .clcm-goal-own,
        .clcm-goal-penalty {
            color: var(--cl-text-muted, #9db6e8);
            font-weight: 600;
        }

        /* ── Detailkarte: Spieler & Punkte ─────────────────────────────── */
        .clcm-players {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        @media (max-width: 620px) {
            .clcm-players { grid-template-columns: 1fr; }
        }
        /* Ansicht „Gewählt" blendet alles aus, was kein Manager im Team
           hat; „Alle" zeigt zusätzlich jeden Spieler mit Punkte-Eintrag. */
        .clcm-players.mode-drafted .clcm-player.is-extra { display: none; }
        .clcm-players.mode-drafted .clcm-col-empty.only-all { display: none; }
        .clcm-players.mode-all .clcm-col-empty.only-drafted { display: none; }

        .clcm-players-col { min-width: 0; }
        .clcm-col-head {
            display: flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 8px;
            margin-bottom: 8px;
            border-bottom: 1px solid rgba(125, 180, 255, 0.12);
        }
        /* Logo + Klubname der Spaltenüberschrift sind ein Ziel, die
           Zählung rechts bleibt Anzeige (deshalb ausserhalb des Links). */
        .clcm-col-link {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            color: inherit;
            text-decoration: none;
            border-radius: 9px;
            transition: color 0.2s ease;
        }
        @media (hover: hover) and (pointer: fine) {
            a.clcm-col-link:hover { color: var(--cl-accent, #7db4ff); }
            a.clcm-col-link:hover .clcm-col-name {
                text-decoration: underline;
                text-underline-offset: 3px;
            }
        }
        a.clcm-col-link:focus-visible {
            outline: 2px solid var(--cl-accent, #7db4ff);
            outline-offset: 3px;
        }
        .clcm-col-logo {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .clcm-col-logo-img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }
        .clcm-col-name {
            font-weight: 900;
            font-size: 0.86rem;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .clcm-col-count {
            margin-left: auto;
            flex-shrink: 0;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--cl-text-muted, #9db6e8);
        }
        .clcm-col-players {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }
        .clcm-col-empty {
            font-size: 0.74rem;
            color: rgba(157, 182, 232, 0.7);
            padding: 6px 2px;
        }

        .clcm-player {
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(125, 180, 255, 0.12);
            overflow: hidden;
        }
        /* Gewählte Spieler heben sich klar von den übrigen ab. */
        .clcm-player.is-drafted {
            background: rgba(125, 180, 255, 0.09);
            border-color: rgba(125, 180, 255, 0.3);
        }
        .clcm-player-main {
            display: flex;
            align-items: center;
            gap: 9px;
            width: 100%;
            padding: 7px 9px;
            background: none;
            border: 0;
            color: inherit;
            font-family: inherit;
            text-align: left;
            cursor: pointer;
        }
        .clcm-player-main:focus-visible {
            outline: 2px solid var(--cl-accent, #7db4ff);
            outline-offset: -2px;
        }
        .clcm-player-photo {
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            border-radius: 50%;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .clcm-player-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            display: block;
        }
        .clcm-player-copy {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            flex: 1;
        }
        .clcm-player-name {
            font-size: 0.8rem;
            font-weight: 800;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .clcm-player-meta {
            font-size: 0.62rem;
            font-weight: 700;
            color: var(--cl-text-muted, #9db6e8);
        }
        .clcm-player-events {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 2px;
        }
        .clcm-event-chip {
            font-size: 0.6rem;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.07);
            color: var(--cl-text, #dce8ff);
            white-space: nowrap;
        }
        .clcm-player-pts {
            flex-shrink: 0;
            font-size: 0.88rem;
            font-weight: 900;
            color: var(--cl-text-muted, #9db6e8);
        }
        .clcm-player-pts.pos { color: #6ee7a8; }
        .clcm-player-pts.neg { color: #ff8b8b; }
        .clcm-player-pts.none { opacity: 0.5; }

        .clcm-player-mgrs {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            padding: 0 9px 8px 52px;
        }
        .clcm-mgr-chip {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.62rem;
            font-weight: 800;
            text-decoration: none;
            color: var(--cl-text, #dce8ff);
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(125, 180, 255, 0.2);
        }
        .clcm-mgr-chip:hover { border-color: rgba(125, 180, 255, 0.5); }
        .clcm-mgr-chip.is-captain {
            background: rgba(255, 215, 0, 0.16);
            border-color: rgba(255, 215, 0, 0.4);
        }
        .clcm-mgr-cap {
            font-size: 0.55rem;
            font-weight: 900;
            color: #ffd700;
        }

        /* ================================================================
           CL: „TOP SPIELER" – Karten-Bühne (Top 20 | Perfect 15)
           Namespace `clts-`. Nur in der CL sichtbar (index.js blendet
           #clTopPlayers ein und entfernt dafür das Glass-Panel „Top
           Spieler"); die WM behält ihr Panel.

           Die Karte ist bewusst die SPIELERKARTE AUS „TEAMS"
           (.player-card): gleicher dunkler Verlauf, gleicher Radial-
           Akzent, gleiches Foto-Fenster, gleiches grosses Badge unter dem
           Namen, gleiche Punkte-Kapsel oben rechts. Unterschied: sämtliche
           Innengrössen skalieren über calc(var(--cw) * …) mit der
           Kartenbreite mit (wie --tw bei den Manager-Kacheln), damit
           dieselbe Karte vom breiten Desktop-Raster bis zur schmalen
           Perfect-15-Reihe funktioniert.

           Performance-Prinzip wie bei „Top Manager": Die Karten sind
           absolut positioniert, der Ansichts-Wechsel ändert nur transform
           (Compositor) – kein Layout-Thrash pro Frame.
           ================================================================ */
        .clts-stage {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1280px;
            margin: 26px auto 0;
            padding: 10px 16px 6px;
            box-sizing: border-box;
        }
        @media (min-width: 720px) {
            .clts-stage { padding: 10px 24px 6px; }
        }
        .clts-stage[hidden] { display: none; }

        .clts-list-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin: 2px 0 10px;
        }
        .clts-view-toggle { opacity: 0.9; }
        .clts-view-toggle .pt-toggle-btn {
            min-height: 30px;
            padding: 4px 14px;
            font-size: 0.72rem;
        }
        .clts-toolbar-right {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }
        /* Kennzahl der aktiven Ansicht (Perfect 15 → maximal mögliche
           Punkte). Blendet beim Ansichts-Wechsel weich ein/aus. */
        .clts-meta {
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            white-space: nowrap;
            color: var(--cl-text-muted, #9db6e8);
            transition: opacity 0.3s ease;
        }
        .clts-meta b { color: var(--cl-accent, #7db4ff); }
        .clts-meta.is-hidden { opacity: 0; }
        .clts-list-link {
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: var(--cl-accent, #7db4ff);
            text-decoration: none;
            white-space: nowrap;
        }
        .clts-list-link:hover { text-decoration: underline; }
        @media (max-width: 560px) {
            .clts-list-toolbar { flex-wrap: wrap; }
            .clts-list-link { display: none; }
        }

        /* Bühne: Höhe setzt die Engine (min-height reserviert die Fläche
           unsichtbar, solange noch keine Daten da sind). */
        .clts-board {
            position: relative;
            margin-top: 2px;
            transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .clts-board.clts-no-anim,
        .clts-board.clts-no-anim > * {
            transition: none !important;
        }
        .clts-empty {
            text-align: center;
            padding: 26px 16px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.04);
            color: var(--cl-text-muted, #9db6e8);
        }

        /* ── Spielerkarte (Teams-Look, mit --cw skalierend) ───────────── */
        .clts-card {
            --cw: 150px;
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: top left;
            width: var(--cw);
            height: calc(var(--cw) * 1.44);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: calc(var(--cw) * 0.055);
            padding: calc(var(--cw) * 0.075) calc(var(--cw) * 0.06) calc(var(--cw) * 0.07);
            box-sizing: border-box;
            border-radius: clamp(10px, calc(var(--cw) * 0.112), 18px);
            background:
                linear-gradient(165deg, rgba(29, 39, 59, 0.95) 0%, rgba(19, 27, 43, 0.96) 65%, rgba(13, 18, 31, 0.98) 100%),
                radial-gradient(circle at 20% 0%, rgba(var(--rgb-gold), 0.14), transparent 52%);
            border: 1px solid rgba(255, 255, 255, 0.16);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
            color: inherit;
            text-decoration: none;
            overflow: hidden;
            will-change: transform;
            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                        opacity 0.35s ease,
                        border-color 0.22s ease,
                        box-shadow 0.22s ease;
        }
        /* Glanz-Overlay wie auf der Teams-Karte. */
        .clts-card::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 50%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
            pointer-events: none;
        }
        /* WICHTIG: Kein transform beim Hover – die Position der Karte lebt
           im transform (Layout-Engine). Hover ändert nur Farben/Schatten. */
        @media (hover: hover) and (pointer: fine) {
            .clts-card:hover {
                border-color: rgba(var(--rgb-green-light), 0.45);
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--rgb-green-light), 0.35);
            }
            .clts-card:hover .clts-photo img { transform: scale(1.08); }
        }
        .clts-card:focus-visible {
            outline: 2px solid var(--cl-accent, #7db4ff);
            outline-offset: 2px;
        }
        /* Karten, die in der aktiven Ansicht nicht vorkommen (z. B. ein
           Perfect-15-Spieler ausserhalb der Top 20). */
        .clts-card.is-hidden {
            opacity: 0;
            pointer-events: none;
        }

        .clts-photo {
            width: 72%;
            aspect-ratio: 1 / 1;
            border-radius: clamp(8px, calc(var(--cw) * 0.1), 16px);
            overflow: hidden;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 10px rgba(8, 15, 27, 0.15);
            display: grid;
            place-items: center;
            flex-shrink: 0;
        }
        .clts-photo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center center;
            transition: transform 0.3s ease;
        }
        .clts-photo-fallback {
            font-weight: 900;
            font-size: calc(var(--cw) * 0.2);
            color: rgba(255, 255, 255, 0.55);
        }

        .clts-info {
            width: 100%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(var(--cw) * 0.03);
        }
        .clts-name {
            width: 100%;
            font-weight: 900;
            font-size: clamp(9px, calc(var(--cw) * 0.086), 14px);
            line-height: 1.08;
            letter-spacing: -0.02em;
            text-align: center;
            color: #f8fbff;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .clts-badge {
            width: 100%;
            display: grid;
            place-items: center;
        }
        .clts-badge img {
            width: clamp(18px, calc(var(--cw) * 0.25), 40px);
            height: clamp(18px, calc(var(--cw) * 0.25), 40px);
            object-fit: contain;
            filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
        }
        .clts-club {
            width: 100%;
            font-size: clamp(7px, calc(var(--cw) * 0.066), 11px);
            font-weight: 700;
            line-height: 1.15;
            color: rgba(230, 237, 243, 0.9);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Sehr kleine Karten (schmale Screens): Klubname weg, Logo bleibt. */
        .clts-board.is-tiny .clts-club { display: none; }

        .clts-pts {
            position: absolute;
            top: calc(var(--cw) * 0.05);
            right: calc(var(--cw) * 0.05);
            padding: calc(var(--cw) * 0.026) calc(var(--cw) * 0.054);
            border-radius: clamp(5px, calc(var(--cw) * 0.047), 8px);
            font-size: clamp(8px, calc(var(--cw) * 0.08), 13px);
            font-weight: 800;
            color: #fff;
            background: rgba(var(--rgb-green-1), 0.85);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(var(--rgb-green-1), 0.3);
            z-index: 2;
        }
        .clts-pts.neg {
            background: rgba(239, 68, 68, 0.85);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(239, 68, 68, 0.3);
        }
        .clts-pts.zero {
            background: rgba(255, 255, 255, 0.14);
            color: var(--cl-text-muted, #9db6e8);
            box-shadow: none;
        }

        /* Rang-Badge oben links – nur in der Top-20-Ansicht sichtbar. */
        .clts-rank {
            position: absolute;
            top: calc(var(--cw) * 0.05);
            left: calc(var(--cw) * 0.05);
            min-width: clamp(17px, calc(var(--cw) * 0.17), 30px);
            height: clamp(17px, calc(var(--cw) * 0.17), 30px);
            padding: 0 calc(var(--cw) * 0.022);
            border-radius: clamp(5px, calc(var(--cw) * 0.05), 9px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(9px, calc(var(--cw) * 0.088), 15px);
            font-weight: 900;
            background: rgba(255, 255, 255, 0.1);
            color: var(--cl-text-muted, #9db6e8);
            z-index: 2;
            transition: opacity 0.3s ease;
        }
        .clts-rank.r1 {
            background: linear-gradient(135deg, #fde68a, #ffd700 55%, #e5a800);
            color: #241a00;
            box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35);
        }
        .clts-rank.r2 {
            background: linear-gradient(135deg, #f1f5f9, #c7ced9 55%, #9ca3af);
            color: #1f2430;
        }
        .clts-rank.r3 {
            background: linear-gradient(135deg, #fcd9b8, #e8a06a 55%, #c2703d);
            color: #2b1608;
        }
        /* Medaillen-Rahmen für die ersten drei – dezent statt Podest.
           Nur in der Top-20-Ansicht: in der Perfect 15 geht es um die Elf,
           nicht um die Rangfolge (dort ist auch das Rang-Badge aus). */
        .clts-board.mode-top .clts-card.medal-1 { border-color: rgba(255, 215, 0, 0.5); }
        .clts-board.mode-top .clts-card.medal-2 { border-color: rgba(203, 213, 225, 0.45); }
        .clts-board.mode-top .clts-card.medal-3 { border-color: rgba(232, 160, 106, 0.45); }

        /* ── Perfect-15-Ansicht ───────────────────────────────────────── */
        .clts-board.mode-perfect .clts-rank { opacity: 0; }
        .clts-board.mode-perfect .clts-card.is-bench {
            border-style: dashed;
            border-color: rgba(125, 180, 255, 0.32);
        }

        /* Dekor: Reihen-Labels, Bank-Beschriftung, Trennlinie – exakt wie
           in der Positions-Ansicht der Top-Manager-Detailkarte. */
        .clts-row-label,
        .clts-bench-caption {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--cl-text-muted, #9db6e8);
            text-align: center;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .clts-row-label {
            width: 38px;
            text-align: left;
        }
        .clts-bench-divider {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            border-left: 1px dashed rgba(125, 180, 255, 0.35);
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .clts-board.mode-top .clts-row-label,
        .clts-board.mode-top .clts-bench-caption,
        .clts-board.mode-top .clts-bench-divider,
        .clts-board:not(.clts-inrow) .clts-row-label,
        .clts-board:not(.clts-inrow) .clts-bench-divider {
            opacity: 0;
        }

        /* ── Touch-Geräte: Bühnenhöhe springt, statt zu animieren ─────────
           Die vier Bühnen (Top Manager, Aktuelle Spiele, Top Spieler und die
           Spielerreihen im Popup) setzen ihre Höhe per JS und lassen sie über
           `transition: height` weichgleiten. `height` ist aber kein
           Compositor-Wert: Der Browser muss dafür in JEDEM Bild der 0,6 s
           neu umbrechen – und weil die Bühnen mitten auf der Startseite
           liegen, wandert dieser Umbruch durch ALLES, was darunter steht
           (die Glass-Panels mit `backdrop-filter` inklusive, deren Weichzeichner
           dabei jedes Mal neu gerechnet wird).

           Gemessen an einer nachgebauten Bühne mit 24 Karten und dem üblichen
           Inhalt darunter: 50 Layout-Durchläufe pro Umschaltvorgang mit
           Höhen-Animation, 6 ohne. Auf dem Desktop fällt das nicht auf, auf
           dem Telefon ist es der Grund, warum die Karten in Stufen springen
           statt zu gleiten.

           Auf Touch-Geräten steht die Höhe deshalb sofort auf dem Zielwert.
           Die Karten selbst gleiten unverändert weiter (reines transform), nur
           der Platz darunter richtet sich in einem Schritt ein. */
        @media (hover: none), (pointer: coarse) {
            .clts-board,
            .cltm-list,
            .clcm-list,
            .cltm-players {
                transition: none;
            }
        }

        /* Die Spielerkarte ist eine in sich geschlossene Box fester Grösse
           (`--cw`) und schneidet ihren Inhalt ohnehin ab (`overflow: hidden`).
           `contain` sagt das dem Browser zu: Ändert sich beim Ansichtswechsel
           die Kartenbreite, rechnet er den Umbruch nur noch innerhalb der
           Karte und reicht ihn nicht durch die restliche Seite weiter.
           Bewusst nur hier – die Manager- und Spiel-Kacheln zeichnen Teile
           ausserhalb ihres Rahmens, dort würde `contain: paint` beschneiden. */
        .clts-card {
            contain: layout paint;
        }

        /* ── Reduzierte Bewegung: nur Ein-/Ausblenden, keine Transforms ── */
        @media (prefers-reduced-motion: reduce) {
            .cltm-tile { transition: opacity 0.2s ease; }
            .clcm-tile { transition: opacity 0.2s ease; }
            .clts-card { transition: opacity 0.2s ease; }
            .clts-board { transition: none; }
            .cltm-list { transition: none; }
            .clpop-modal {
                transform: none;
                transition: opacity 0.25s ease;
            }
            .clpop-overlay.is-closing .clpop-modal { transform: none; }
            .clpop-backdrop { transition: opacity 0.2s ease; }
            .cltm-players,
            .cltm-players > .cltm-chip {
                transition: none !important;
            }
            .cltm-chip, .clpop-close { transition: none; }
        }