/* ============================================
   ZIPEEK · Glass + Neumorphic Design System
   ============================================ */

:root {
    /* === Accent (brand red kept) === */
    --accent: #ff1744;
    --accent-hover: #e0143b;
    --accent-soft: rgba(255, 23, 68, 0.1);
    --accent-glow: rgba(255, 23, 68, 0.22);

    /* === Pastel palette (neumorphic accents) === */
    --pastel-blue: #a3c9f4;
    --pastel-blue-deep: #5b8def;
    --pastel-purple: #b8a8e8;
    --pastel-purple-deep: #8e7dd1;
    --pastel-mint: #7be0bc;
    --pastel-mint-deep: #3fbf94;
    --pastel-peach: #ffc8a3;
    --pastel-peach-deep: #ff9b6b;
    --pastel-pink: #ffb3c8;
    --pastel-coral: #ff9b8a;
    --pastel-yellow: #ffe39b;

    /* === Soft surface base (neumorphism needs uniform tone) === */
    --bg-base: #e8edf3;
    --bg-elevated: #edf1f7;
    --bg-deeper: #dde3eb;

    /* === Text hierarchy === */
    --text: #2a2a35;
    --text-secondary: rgba(42, 42, 53, 0.72);
    --text-tertiary: rgba(42, 42, 53, 0.5);
    --text-quaternary: rgba(42, 42, 53, 0.35);

    /* === Border (mostly replaced by neumorphic shadows) === */
    --border: rgba(120, 130, 160, 0.08);
    --border-strong: rgba(120, 130, 160, 0.16);

    /* === Glassmorphism (frosted card bg) === */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-hover: rgba(255, 255, 255, 0.7);
    --glass-bg-strong: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-blur: blur(14px) saturate(140%);

    /* === Neumorphism shadow primitives ===
       Light source: top-left. Dark: bottom-right.
       Use combined for raised effect. Inset variants for "pressed in" look. */
    --nm-light: #ffffff;
    --nm-dark: #c8d0dc;

    /* Raised, default elevation */
    --nm-shadow:
        -8px -8px 18px rgba(255, 255, 255, 0.92),
        8px 8px 18px rgba(163, 177, 198, 0.42);
    --nm-shadow-sm:
        -3px -3px 8px rgba(255, 255, 255, 0.92),
        3px 3px 8px rgba(163, 177, 198, 0.38);
    --nm-shadow-md:
        -5px -5px 12px rgba(255, 255, 255, 0.9),
        5px 5px 12px rgba(163, 177, 198, 0.4);
    --nm-shadow-lg:
        -12px -12px 28px rgba(255, 255, 255, 0.92),
        12px 12px 28px rgba(163, 177, 198, 0.42);

    /* Pressed (inset) */
    --nm-inset-sm:
        inset 2px 2px 5px rgba(163, 177, 198, 0.5),
        inset -2px -2px 5px rgba(255, 255, 255, 0.92);
    --nm-inset:
        inset 4px 4px 10px rgba(163, 177, 198, 0.45),
        inset -4px -4px 10px rgba(255, 255, 255, 0.92);
    --nm-inset-deep:
        inset 6px 6px 14px rgba(163, 177, 198, 0.5),
        inset -6px -6px 14px rgba(255, 255, 255, 0.92);

    /* Combined: glass card with neumorphic edges */
    --glass-nm-shadow:
        -10px -10px 22px rgba(255, 255, 255, 0.85),
        10px 10px 26px rgba(163, 177, 198, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --glass-nm-shadow-hover:
        -14px -14px 30px rgba(255, 255, 255, 0.92),
        14px 14px 36px rgba(163, 177, 198, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    /* Legacy mapping (older rules reference these) */
    --glass-shadow: var(--nm-shadow);
    --glass-shadow-hover: var(--nm-shadow-lg);

    /* === Radius scale === */
    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --radius-xl: 40px;
    --radius-pill: 100px;

    /* === Easing curves === */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring-soft: cubic-bezier(0.2, 0.85, 0.4, 1.2);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

    /* Duration tokens */
    --duration-fast: 0.18s;
    --duration-base: 0.32s;
    --duration-slow: 0.55s;
    --duration-reveal: 0.7s;
}

html {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "tnum" 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    color: var(--text);
    background: var(--bg-base);
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

body.loaded {
    opacity: 1;
}

/* Selection styling */
::selection {
    background: var(--accent);
    color: white;
}

/* Focus visible - Apple-style soft ring */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
    transition: outline-offset 0.18s var(--ease-out);
}

button:focus-visible,
a:focus-visible {
    outline-offset: 4px;
}

/* Tactile press feedback — universal */
button:active,
.link-btn:active,
.card-link:active,
.standings-tab:active,
.suno-play:active,
.cosmic-video-player:active,
.scroll-top:active,
.menu-toggle:active {
    transition-duration: 0.08s !important;
}

/* Smooth font rendering at all sizes */
h1, h2, h3, h4 {
    text-rendering: geometricPrecision;
    font-feature-settings: "kern" 1, "ss01" 1;
}

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

/* ============================================
   ANIMATED BACKGROUND
   ============================================ */
.bg-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(163, 201, 244, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 90% 70% at 100% 100%, rgba(184, 168, 232, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 70% 80% at 50% 30%, rgba(255, 179, 200, 0.12) 0%, transparent 70%),
        var(--bg-base);
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    will-change: transform;
    mix-blend-mode: multiply;
}

.orb-1 {
    width: 550px;
    height: 550px;
    background: var(--pastel-coral);
    top: -10%;
    left: -5%;
    opacity: 0.32;
    animation: orbMove1 28s ease-in-out infinite;
}

.orb-2 {
    width: 650px;
    height: 650px;
    background: var(--pastel-blue);
    bottom: -15%;
    right: -10%;
    opacity: 0.28;
    animation: orbMove2 32s ease-in-out infinite;
}

.orb-3 {
    width: 450px;
    height: 450px;
    background: var(--pastel-peach);
    top: 30%;
    right: 15%;
    opacity: 0.22;
    animation: orbMove3 24s ease-in-out infinite;
}

.orb-4 {
    width: 400px;
    height: 400px;
    background: var(--pastel-purple);
    bottom: 20%;
    left: 30%;
    opacity: 0.2;
    animation: orbMove4 30s ease-in-out infinite;
}

@keyframes orbMove1 {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(40vw, 30vh) scale(1.15); }
    50% { transform: translate(60vw, 60vh) scale(0.9); }
    75% { transform: translate(20vw, 40vh) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes orbMove2 {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-30vw, -40vh) scale(0.95); }
    50% { transform: translate(-60vw, -20vh) scale(1.2); }
    75% { transform: translate(-20vw, -50vh) scale(1); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes orbMove3 {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40vw, 30vh) scale(1.2); }
    66% { transform: translate(-20vw, 60vh) scale(0.85); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes orbMove4 {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30vw, -40vh) scale(1.1); }
    50% { transform: translate(-20vw, -20vh) scale(1.25); }
    75% { transform: translate(20vw, -50vh) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

/* ============================================
   GLASS UTILITY
   ============================================ */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ============================================
   NAVIGATION
   ============================================ */
/* Frosted blur strip pod navbarem - iOS-like efekt */
.nav-blur {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 170px;
    z-index: 999;
    pointer-events: none;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 45%,
        rgba(0, 0, 0, 0.7) 70%,
        rgba(0, 0, 0, 0.3) 90%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 45%,
        rgba(0, 0, 0, 0.7) 70%,
        rgba(0, 0, 0, 0.3) 90%,
        rgba(0, 0, 0, 0) 100%
    );
}

.navbar {
    position: fixed;
    top: 12px;
    left: 50%;
    /* translateZ promotes the navbar to its own compositor layer so the
       backdrop-filter blur doesn't get forced to re-rasterise when content
       animates underneath (critical for mobile Safari + iOS GPU). */
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1000;
    max-width: calc(100% - 32px);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    box-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 8px 32px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.4s var(--ease-out);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 12px 40px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.05);
}

.nav-container {
    padding: 0 6px 0 18px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    transition: opacity 0.2s var(--ease);
    flex-shrink: 0;
}

.nav-logo:hover {
    opacity: 0.85;
}

.nav-logo:hover img {
    transform: scale(1.1) rotate(-3deg);
}

.nav-logo img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(255, 23, 68, 0.2));
    transition: transform 0.4s var(--ease-spring);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 8px;
    align-items: center;
}

/* Apple-clean glass nav pills — minimal, just text with a soft hover wash
   and a tinted accent state for the current section. */
.nav-links a {
    display: inline-block;
    padding: 7px 13px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    border-radius: 100px;
    background: transparent;
    transition:
        color 0.22s var(--ease-out),
        background-color 0.22s var(--ease-out),
        transform 0.18s var(--ease-spring-soft);
    position: relative;
}

.nav-links a:hover {
    color: var(--text);
    background: rgba(0, 0, 0, 0.04);
}

.nav-links a:active {
    transform: scale(0.96);
}

.nav-links a.active {
    color: var(--accent);
    background: rgba(255, 23, 68, 0.08);
}

.nav-links a.active:hover {
    background: rgba(255, 23, 68, 0.12);
}

/* === Dice shortcut to the film roulette === */
.nav-dice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 6px;
    border-radius: 50%;
    color: var(--accent);
    background: rgba(255, 23, 68, 0.10);
    text-decoration: none;
    transition:
        background 0.25s var(--ease-out),
        color 0.25s var(--ease-out),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* Gentle attention-grab every ~12s */
    animation: nav-dice-wobble 12s ease-in-out infinite;
}

.nav-dice:hover,
.nav-dice:focus-visible {
    color: white;
    background: var(--accent);
    transform: rotate(-15deg) scale(1.08);
    animation-play-state: paused;
}

.nav-dice:active {
    transform: rotate(-25deg) scale(0.96);
    transition: transform 0.15s var(--ease-out);
}

.nav-dice-icon {
    width: 19px;
    height: 19px;
    pointer-events: none;
}

/* Tooltip — fades in on hover/focus, points to the dice */
.nav-dice-tooltip {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    padding: 6px 11px;
    border-radius: 8px;
    background: #1d1d1f;
    color: white;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
    box-shadow: 0 6px 16px rgba(20, 20, 40, 0.25);
}

.nav-dice-tooltip::before {
    content: "";
    position: absolute;
    top: -4px;
    right: 12px;
    width: 8px;
    height: 8px;
    background: #1d1d1f;
    transform: rotate(45deg);
    border-radius: 1px;
}

.nav-dice:hover .nav-dice-tooltip,
.nav-dice:focus-visible .nav-dice-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Subtle wobble — a hint that the dice is interactive, not constant */
@keyframes nav-dice-wobble {
    0%, 85%, 100%   { transform: rotate(0deg); }
    87%             { transform: rotate(-8deg); }
    89%             { transform: rotate(7deg); }
    91%             { transform: rotate(-5deg); }
    93%             { transform: rotate(3deg); }
    95%             { transform: rotate(0deg); }
}

html.lowperf .nav-dice {
    animation: none;
}

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

/* Scroll target offset — keep heading visible below the fixed navbar */
#filmova-ruleta {
    scroll-margin-top: 96px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-right: 4px;
    flex-direction: column;
    gap: 4px;
    border-radius: 50%;
    transition: background 0.2s var(--ease);
}

.menu-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}

.menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: 0.3s var(--ease);
    transform-origin: center;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu dropdown */
.nav-links.mobile-open {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 12px;
    gap: 2px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    animation: mobileMenuSlide 0.3s var(--ease-out);
}

.nav-links.mobile-open li {
    width: 100%;
}

.nav-links.mobile-open a {
    display: block;
    width: 100%;
    padding: 12px 18px;
    font-size: 15px;
    text-align: left;
    border-radius: 12px;
}

@keyframes mobileMenuSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   HERO - MINIMALIST APPLE STYLE
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 80px 24px;
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    animation: heroFadeIn 1.2s var(--ease-out);
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-logo {
    width: clamp(100px, 14vw, 150px);
    height: clamp(100px, 14vw, 150px);
    margin-bottom: 32px;
    filter: drop-shadow(0 12px 32px rgba(255, 23, 68, 0.25));
    animation: floatLogo 6s ease-in-out infinite;
}

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

.hero-title {
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--text);
    margin: 0 0 32px 0;
}

.hero-tags {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 22px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    box-shadow: var(--glass-shadow);
    margin-bottom: 64px;
    animation: fadeInDelayed 1.2s var(--ease-out) 0.6s both;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-tag {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.02em;
}

.hero-tag-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-tertiary);
}

@keyframes fadeInDelayed {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-scroll {
    display: flex;
    justify-content: center;
    animation: fadeInDelayed 1.2s var(--ease-out) 0.8s both;
}

.scroll-mouse {
    width: 24px;
    height: 38px;
    border: 1.5px solid var(--text-tertiary);
    border-radius: 12px;
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.scroll-wheel {
    width: 3px;
    height: 6px;
    background: var(--text-tertiary);
    border-radius: 2px;
    animation: scrollWheel 1.8s ease-in-out infinite;
}

@keyframes scrollWheel {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ============================================
   SECTIONS
   ============================================ */
.section {
    padding: clamp(72px, 9vw, 110px) 0;
    position: relative;
}

.section + .section {
    padding-top: clamp(32px, 4vw, 48px);
}

/* Sections flow seamlessly - no divider line for smooth background */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* Retro friendly brush cursive section label — Pacifico (rounded, characterful) */
.section-label {
    display: inline-block;
    font-family: 'Pacifico', 'Brush Script MT', cursive;
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 400;
    font-style: normal;
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 4px;
    transform-origin: left center;
    transition:
        opacity 0.6s var(--ease-out),
        transform 0.6s var(--ease-spring-soft);
}

.section-label::before {
    display: none;
}

/* Big bold section title — solid dark, no gradient text */
.section-title {
    font-size: clamp(40px, 5.6vw, 68px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin: 0;
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    background: none;
    text-shadow: none;
    position: relative;
    transition:
        opacity 0.85s var(--ease-out) 0.1s,
        transform 0.85s var(--ease-out) 0.1s,
        filter 0.85s var(--ease-out) 0.1s;
}

/* Decorative animated line under title */
.section-title::after {
    content: "";
    display: block;
    width: 88px;
    height: 4px;
    margin: 22px auto 0;
    background: linear-gradient(to right, var(--accent) 0%, #ff6e2e 60%, rgba(255, 23, 68, 0) 100%);
    border-radius: 100px;
    box-shadow: 0 2px 10px rgba(255, 23, 68, 0.22);
    transition: width 1.1s var(--ease-out) 0.35s;
}

.section-subtitle {
    font-size: 17px;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 6px auto 0;
    line-height: 1.55;
    transition:
        opacity 0.7s var(--ease-out) 0.55s,
        transform 0.7s var(--ease-out) 0.55s;
}

/* === Hidden initial state ONLY for elements with .reveal class (not yet active) === */
.section-header.reveal:not(.active) .section-label,
.about-content.reveal:not(.active) .section-label {
    opacity: 0;
    transform: translateY(-8px);
}

.section-header.reveal:not(.active) .section-title,
.about-content.reveal:not(.active) .section-title {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
}

.section-header.reveal:not(.active) .section-title::after,
.about-content.reveal:not(.active) .section-title::after {
    width: 0;
}

.section-header.reveal:not(.active) .section-subtitle,
.about-content.reveal:not(.active) .section-subtitle {
    opacity: 0;
    transform: translateY(10px);
}

/* === Left-align variant (About uses about-content not section-header) === */
.about-content .section-title::after {
    margin-left: 0;
    margin-right: auto;
}

.subsection-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 28px;
    margin-top: 72px;
    padding-top: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

/* Decentní oddělovací linka nad subsekcí - fade z accentu doprava */
.subsection-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 72px;
    background: linear-gradient(to right, var(--accent), rgba(255, 23, 68, 0));
    border-radius: 2px;
}

/* Even when first in a section, keep some breathing room above the accent line */
.subsection-title:first-of-type {
    margin-top: 48px;
}

.subsection-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(255, 23, 68, 0.08);
}

.subsection-icon svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   ABOUT
   ============================================ */
.about-grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 80px;
    align-items: center;
}

.about-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
    padding: 0;
    background: transparent !important;
}

.about-image:hover {
    transform: scale(1.02);
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
}

/* Override the .glass dual neumorphic shadow on the photo so there's no white frame */
.about-image.glass {
    box-shadow:
        0 18px 36px -18px rgba(20, 30, 60, 0.25) !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.about-signature {
    position: absolute;
    inset: 6px;
    border-radius: calc(var(--radius-lg) - 6px);
    background: radial-gradient(
        ellipse 75% 55% at 100% 100%,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.35) 35%,
        rgba(0, 0, 0, 0.12) 65%,
        rgba(0, 0, 0, 0) 90%
    );
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 14px 12px 0;
    pointer-events: none;
    opacity: 0;
    transform: translate(6px, 6px);
    transition: opacity 0.9s var(--ease-out) 0.25s, transform 0.9s var(--ease-out) 0.25s;
}

.about-image.is-revealed .about-signature,
.about-image.reveal.active .about-signature {
    opacity: 1;
    transform: translate(0, 0);
}

.about-signature-img {
    width: auto !important;
    height: auto;
    max-width: 22%;
    max-height: 17%;
    opacity: 0.95;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    border-radius: 0 !important;
}

.about-content .section-label,
.about-content .section-title {
    text-align: left;
}

.about-content .section-label {
    display: inline-flex;
    width: auto;
    align-self: flex-start;
    margin-bottom: 24px;
}

.about-content .section-title {
    margin-bottom: 32px;
    font-size: clamp(28px, 3vw, 42px);
    white-space: nowrap;
}

/* Decorative line under About title aligned left */
.about-content .section-title::after {
    margin: 18px 0 0;
}

/* Paragraph spacing */
.about-content p {
    margin-bottom: 18px;
}

.about-content p:last-of-type {
    margin-bottom: 0;
}

.about-content .lead {
    margin-top: 6px;
    margin-bottom: 22px;
    font-size: 17px;
    color: var(--text);
    font-weight: 500;
}

.about-content .about-quote {
    margin-top: 32px;
}

@media (max-width: 520px) {
    .about-content .section-title {
        white-space: normal;
        font-size: clamp(28px, 7.5vw, 36px);
    }
}

.lead {
    font-size: 21px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.about-content p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.6;
}

.about-content a {
    color: var(--accent);
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    transition: background-size 0.3s var(--ease-out), color 0.2s var(--ease);
}

.about-content a:hover {
    color: var(--accent-hover);
    background-size: 100% 2px;
}

.about-content a.plain-link {
    color: inherit;
    background-image: none;
    font-weight: 600;
    transition: color 0.2s var(--ease);
}

.about-content a.plain-link:hover {
    color: var(--accent);
}

.about-content strong {
    color: var(--text);
    font-weight: 600;
}

/* === Quote === */
.about-quote {
    margin-top: 32px;
    padding: 28px 32px 24px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.04), rgba(255, 23, 68, 0.01));
    border-left: 3px solid var(--accent);
    position: relative;
    overflow: hidden;
}

.about-quote::before {
    content: '"';
    position: absolute;
    top: -30px;
    right: 12px;
    font-size: 140px;
    font-weight: 900;
    line-height: 1;
    color: var(--accent);
    opacity: 0.08;
    pointer-events: none;
    font-family: Georgia, serif;
}

.quote-text {
    font-size: 17px;
    line-height: 1.55;
    color: var(--text);
    font-style: italic;
    font-weight: 500;
    margin: 0 0 14px 0;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.quote-author {
    font-size: 13.5px;
    color: var(--text-tertiary);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.quote-author cite {
    font-style: italic;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ============================================
   STUDIO SHOWCASE  ·  Big hero + horizontal scroll strip
   ============================================ */
.studio-showcase {
    margin-top: 4px;
}

/* === Hero photo (big, prominent) === */
.studio-hero {
    position: relative;
    margin: 0 0 16px;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 24px 50px -22px rgba(20, 20, 40, 0.25);
    background: #18181b;
    isolation: isolate;
}

.studio-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-hero:hover img {
    transform: scale(1.025);
}

.studio-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 35%, transparent 60%);
    pointer-events: none;
}

.studio-hero-cap {
    position: absolute;
    left: 24px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: white;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-hero:hover .studio-hero-cap {
    transform: translateY(-3px);
}

.studio-hero-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.studio-hero-title {
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: white;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    line-height: 1.15;
}

/* === Horizontal scroll strip === */
.studio-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 210px;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 16px 4px;
    scroll-snap-type: x mandatory;
    scroll-padding: 4px;
    /* Edge fade mask */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
    /* Slim, Apple-clean scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.studio-strip::-webkit-scrollbar {
    height: 6px;
}

.studio-strip::-webkit-scrollbar-track {
    background: transparent;
}

.studio-strip::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
}

.studio-strip::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.22);
}

.strip-card {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(160deg, #fafafa 0%, #efeff2 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 6px 14px -8px rgba(20, 20, 40, 0.1);
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.strip-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 16px 28px -12px rgba(20, 20, 40, 0.2);
    border-color: rgba(0, 0, 0, 0.1);
}

.strip-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 12px 12px 0;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(160deg, #f5f5f8 0%, #e8eaef 100%);
    box-shadow:
        inset 1px 1px 2px rgba(163, 177, 198, 0.15),
        inset -1px -1px 2px rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.strip-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    border-radius: 14px;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.strip-card:hover .strip-photo img {
    transform: scale(1.04);
}

.strip-card figcaption {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.5);
}

.strip-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.strip-sub {
    font-size: 11px;
    color: var(--text-tertiary, rgba(29, 29, 31, 0.55));
    font-weight: 500;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .studio-hero { aspect-ratio: 4 / 3; }
    .studio-hero-cap { left: 16px; bottom: 16px; }
    .studio-strip { grid-auto-columns: 170px; }
    .strip-photo { padding: 4px; }
    .strip-photo img { padding: 10px; }
}

/* ============================================
   EUC (Elektrické jednokolky)  ·  2-card collection
   ============================================ */
.euc-collection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 4px;
    align-items: stretch;
}

@media (max-width: 880px) {
    .euc-collection {
        grid-template-columns: 1fr;
    }
}

.euc-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

.euc-card:hover {
    transform: translateY(-4px);
}

/* === Featured card (KingSong) — clean, no boxy photo bg === */
.euc-card--featured {
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) 1fr;
    gap: 28px;
    padding: 28px;
    background: linear-gradient(155deg, #fcfcfd 0%, #f3f3f7 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 18px 40px -22px rgba(20, 20, 40, 0.16);
}

.euc-card--featured:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 26px 50px -22px rgba(99, 102, 241, 0.2);
}

@media (max-width: 640px) {
    .euc-card--featured {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px;
    }
}

.euc-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Single soft accent shadow under the photo — no box, no glow ring */
.euc-photo::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 6%;
    height: 18%;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.22) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.euc-photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(20, 30, 60, 0.22)) drop-shadow(0 6px 10px rgba(99, 102, 241, 0.18));
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.euc-card--featured:hover .euc-photo img {
    transform: translateY(-4px) scale(1.02);
}

/* Odometer chip — positioned at the BOTTOM of the photo column (fills empty space) */
.euc-photo {
    flex-direction: column;
    justify-content: flex-start;
}

.euc-photo img {
    flex: 0 1 auto;
    max-height: 78%;
}

.euc-odo {
    margin-top: auto;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 100px;
    background: var(--bg-elevated);
    box-shadow: var(--nm-shadow-sm);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.5s var(--ease-spring-soft), box-shadow 0.5s var(--ease-out);
}

.euc-card--featured:hover .euc-odo {
    transform: translateY(-3px);
    box-shadow: var(--nm-shadow-md);
}

.euc-odo svg {
    width: 14px;
    height: 14px;
    color: #6366f1;
}

.euc-odo-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: -0.01em;
}

.euc-odo-unit {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* === Incoming photo (Begode Blitz Pro) === */
.euc-photo--incoming {
    aspect-ratio: 4 / 5;
}

.euc-photo--incoming::after {
    background: radial-gradient(ellipse at center, rgba(255, 110, 46, 0.28) 0%, transparent 70%);
}

.euc-photo--incoming img {
    border-radius: 0;  /* PNG is transparent, no need to round */
    filter: drop-shadow(0 16px 24px rgba(255, 110, 46, 0.22)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
    /* Animate float */
    animation: blitz-float 4.5s ease-in-out infinite;
}

@keyframes blitz-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.euc-card--incoming:hover .euc-photo--incoming img {
    animation-play-state: paused;
    transform: translateY(-6px) scale(1.03);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.euc-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 4px;
    justify-content: center;
}

.euc-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.euc-status--current {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: #6366f1;
}

.euc-status--current .pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    animation: euc-pulse-indigo 2s ease-in-out infinite;
}

@keyframes euc-pulse-indigo {
    0%, 100% { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
    50% { box-shadow: 0 0 0 7px rgba(99, 102, 241, 0.04); }
}

.euc-name {
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 0;
    color: var(--text);
}

.euc-tagline {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

.euc-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 4px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 14px;
}

.euc-spec {
    text-align: left;
    padding-right: 12px;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    min-width: 0;
}

.euc-spec:last-child {
    border-right: none;
    padding-right: 0;
}

.euc-spec dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    color: #6366f1;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.euc-spec .spec-unit {
    font-size: 0.6em;
    font-weight: 600;
    color: rgba(99, 102, 241, 0.7);
    margin-left: 1px;
}

.euc-spec dd {
    margin: 6px 0 0;
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Incoming card (Begode Blitz Pro) === */
.euc-card--incoming {
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) 1fr;
    gap: 24px;
    padding: 28px;
    background: linear-gradient(165deg, #1a1a1d 0%, #0d0d10 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 18px 40px -22px rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {
    .euc-card--incoming {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px;
    }
}

.euc-card--incoming::before {
    content: "";
    position: absolute;
    top: -25%;
    right: -20%;
    width: 70%;
    height: 90%;
    background: radial-gradient(circle, rgba(255, 110, 46, 0.22) 0%, transparent 65%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.euc-card--incoming::after {
    content: "";
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 50%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 23, 68, 0.16) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.euc-card--incoming:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 50px -22px rgba(255, 110, 46, 0.32);
}

.euc-card--incoming .euc-content {
    position: relative;
    z-index: 1;
    gap: 14px;
}

.euc-status--incoming {
    background: rgba(255, 23, 68, 0.12);
    border: 1px solid rgba(255, 23, 68, 0.3);
    color: #ff6e2e;
}

.dot-incoming {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6e2e;
    box-shadow: 0 0 0 3px rgba(255, 110, 46, 0.25);
    animation: euc-pulse-warm 2s ease-in-out infinite;
}

@keyframes euc-pulse-warm {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 110, 46, 0.25); }
    50% { box-shadow: 0 0 0 7px rgba(255, 110, 46, 0.05); }
}

.euc-card--incoming .euc-name {
    color: white;
}

.euc-card--incoming .euc-tagline {
    color: rgba(255, 255, 255, 0.7);
}

.euc-incoming-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.euc-incoming-meta span {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.04em;
}

/* ============================================
   CARDISTRY  ·  Apple-clean storytelling
   ============================================ */
.cardistry-collection {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 4px;
}

/* === Hero card: cardistry photo + intro text === */
.cardistry-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(250, 248, 245, 0.7) 100%);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 18px 40px -22px rgba(20, 20, 40, 0.18);
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    align-items: stretch;
}

.cardistry-hero:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 22px 46px -20px rgba(255, 110, 46, 0.22);
}

@media (max-width: 720px) {
    .cardistry-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px;
    }
    /* On mobile the Peaky/backdrop image was bleeding through the text gradient
       (gradient drops to 8% opacity at the bottom). Hide the backdrop on small
       screens and keep the text container with a clean solid background. */
    .cardistry-peaky {
        display: none;
    }
    .cardistry-hero-text {
        min-height: 0;
        padding: 14px 14px 4px;
    }
    .cardistry-hero-text::before {
        background: linear-gradient(to bottom,
            rgba(255, 245, 238, 0.95) 0%,
            rgba(255, 245, 238, 0.85) 100%);
    }
}

.cardistry-hero-photo {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    position: relative;
    background: linear-gradient(135deg, #1a1a1d, #0d0d10);
}

.cardistry-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
}

.cardistry-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.cardistry-hero:hover .cardistry-hero-photo img {
    transform: scale(1.04);
}

.cardistry-hero-text {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 14px;
    padding: 16px 12px 0;
    min-height: 100%;
}

.cardistry-hero-text-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    padding-bottom: 18px;
}

/* Peaky Blinders cast as backdrop , dramatic, bottom-anchored */
.cardistry-peaky {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: auto;
    max-height: 75%;
    object-fit: contain;
    object-position: bottom center;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
    filter: contrast(1.05) brightness(0.92) saturate(0.85) drop-shadow(0 8px 22px rgba(40, 20, 10, 0.18));
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cardistry-hero:hover .cardistry-peaky {
    transform: translateX(-50%) translateY(-4px);
    opacity: 0.95;
}

/* Soft gradient overlay  ,  fades from card bg at top down to transparent so text stays legible */
.cardistry-hero-text::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(255, 245, 238, 0.92) 0%,
        rgba(255, 245, 238, 0.78) 20%,
        rgba(255, 245, 238, 0.4) 50%,
        rgba(255, 245, 238, 0.08) 75%,
        transparent 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: 14px;
}

.cardistry-eyebrow {
    display: inline-block;
    align-self: flex-start;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ff6e2e;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 110, 46, 0.08);
    border: 1px solid rgba(255, 110, 46, 0.2);
}

.cardistry-hero-text p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

.cardistry-hero-text p strong {
    color: var(--text);
    font-weight: 700;
}

.cardistry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cardistry-tags span {
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cardistry-tags span:hover {
    background: rgba(255, 110, 46, 0.08);
    border-color: rgba(255, 110, 46, 0.22);
    color: #ff6e2e;
    transform: translateY(-1px);
}

/* === Featured deck (Bee · Erdnase) ,  card bg blends seamlessly with photo === */
.cardistry-deck {
    position: relative;
    display: grid;
    grid-template-columns: 220px minmax(260px, 1.05fr) minmax(280px, 1fr);
    gap: 32px;
    padding: 28px 32px;
    border-radius: 24px;
    /* Pure white anchored where photo sits, smooth fade to card cream beyond */
    background:
        radial-gradient(ellipse 95% 130% at 22% 50%,
            #ffffff 0%,
            #ffffff 38%,
            #fbfaf6 70%,
            #f3f1ed 100%);
    color: var(--text);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 18px 40px -22px rgba(20, 20, 40, 0.16);
    align-items: center;
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cardistry-deck:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 48px -22px rgba(120, 80, 40, 0.22);
}

/* Soft warm glow on right side */
.cardistry-deck::before {
    content: "";
    position: absolute;
    top: -25%;
    right: -15%;
    width: 50%;
    height: 80%;
    background: radial-gradient(circle, rgba(255, 110, 46, 0.07) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

/* Below ~1080px collapse to 2 rows: deck on top, video below */
@media (max-width: 1080px) {
    .cardistry-deck {
        grid-template-columns: 220px 1fr;
        grid-template-areas:
            "photo info"
            "video video";
        gap: 24px 28px;
    }
    .cardistry-deck-photo { grid-area: photo; }
    .cardistry-deck-info  { grid-area: info; }
    .cardistry-deck-video { grid-area: video; }
}

@media (max-width: 720px) {
    .cardistry-deck {
        grid-template-columns: 1fr;
        grid-template-areas:
            "photo"
            "info"
            "video";
        gap: 20px;
        padding: 20px;
    }
}

.cardistry-deck-photo {
    position: relative;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    aspect-ratio: 7 / 12;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cardistry-deck:hover .cardistry-deck-photo {
    transform: translateY(-2px) rotate(-1deg);
}

.cardistry-deck-photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(60, 80, 40, 0.22));
}

.cardistry-deck-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cardistry-deck-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 110, 46, 0.08);
    border: 1px solid rgba(255, 110, 46, 0.22);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c25a1e;
}

.cardistry-deck-eyebrow .dot-warm {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6e2e;
    box-shadow: 0 0 0 3px rgba(255, 110, 46, 0.2);
    animation: euc-pulse-warm 2s ease-in-out infinite;
}

.cardistry-deck-title {
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0;
    color: var(--text);
}

.cardistry-deck-sub {
    font-size: 14px;
    color: #c25a1e;
    font-style: italic;
    margin: 0;
    font-weight: 500;
}

.cardistry-deck-note {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.cardistry-deck-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.deck-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 12px;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.deck-meta-item:not(:first-child) {
    padding-left: 12px;
}

.deck-meta-item:last-child {
    border-right: none;
}

/* ===== Vertical video panel — sits in the right column of the deck card.
   Thumbnail on top (16:9 large), text block underneath. ===== */
.cardistry-deck-video {
    position: relative;
    z-index: 1;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(248, 245, 240, 0.78));
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 10px 28px -14px rgba(20, 20, 40, 0.18);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cardistry-deck-video:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 110, 46, 0.28);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 22px 44px -16px rgba(255, 110, 46, 0.34);
}

.cardistry-deck-video:hover .deck-video-play {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
        0 10px 24px rgba(255, 23, 68, 0.5),
        0 0 0 6px rgba(255, 255, 255, 0.2);
}

.deck-video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1d, #0d0d10);
    box-shadow:
        0 6px 18px rgba(20, 20, 40, 0.24),
        0 2px 6px rgba(20, 20, 40, 0.1);
}

.deck-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s var(--ease-out);
    /* YouTube auto-thumbs have black bars top/bottom — slight crop hides them */
    transform: scale(1.18);
}

.cardistry-deck-video:hover .deck-video-thumb img {
    transform: scale(1.24);
    filter: brightness(1.05);
}

.deck-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #ff6e2e 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 18px rgba(255, 23, 68, 0.5),
        0 0 0 4px rgba(255, 255, 255, 0.18);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s var(--ease-out);
    pointer-events: none;
}

.deck-video-play svg {
    width: 22px;
    height: 22px;
    margin-left: 3px;
}

.deck-video-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 0 2px;
}

.deck-video-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ff6e2e;
}

.deck-video-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.deck-video-sub {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-secondary);
    opacity: 0.78;
}

/* ===== YouTube lightbox modal ===== */
.yt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
}

.yt-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.yt-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 18, 0.85);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.yt-lightbox-frame {
    position: relative;
    width: 100%;
    max-width: 1080px;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 80px);
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 30px 80px -10px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.yt-lightbox.is-open .yt-lightbox-frame {
    transform: scale(1);
}

.yt-lightbox-player {
    width: 100%;
    height: 100%;
}

.yt-lightbox-player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.yt-lightbox-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    color: #1a1a1d;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    z-index: 2;
    transition: transform 0.25s var(--ease-spring-soft), background 0.25s var(--ease-out);
}

.yt-lightbox-close svg {
    width: 18px;
    height: 18px;
}

.yt-lightbox-close:hover {
    transform: scale(1.06) rotate(90deg);
    background: var(--accent);
    color: white;
}

@media (max-width: 640px) {
    .yt-lightbox {
        padding: 12px;
    }
    .yt-lightbox-close {
        top: 8px;
        right: 8px;
    }
}

.deck-meta-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary, rgba(29, 29, 31, 0.55));
}

.deck-meta-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
}

/* ============================================
   CARDS GRID (INTERESTS)
   ============================================ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.card {
    padding: 32px 28px;
    border-radius: var(--radius-md);
    transition: 
        background 0.3s var(--ease),
        box-shadow 0.4s var(--ease-out),
        transform 0.5s var(--ease-spring);
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-8px) scale(1.015);
    background: var(--glass-bg-hover);
    box-shadow: var(--glass-shadow-hover);
}

.card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 14px;
    margin-bottom: 20px;
    transition: 
        background 0.3s var(--ease),
        color 0.3s var(--ease),
        transform 0.5s var(--ease-spring),
        box-shadow 0.3s var(--ease);
}

.card-icon svg {
    width: 24px;
    height: 24px;
}

.card:hover .card-icon {
    background: var(--accent);
    color: white;
    transform: scale(1.12) rotate(-3deg);
    box-shadow: 0 8px 24px var(--accent-glow);
}

.card h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

.card p {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 16px;
    flex: 1;
}

.card-link {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: gap 0.25s var(--ease);
    margin-top: auto;
    gap: 4px;
    position: relative;
}

.card-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s var(--ease-out);
}

.card-link:hover {
    gap: 8px;
}

.card-link:hover::after {
    width: 100%;
}

/* ============================================
   GAMING
   ============================================ */
.gaming-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

/* Steam profil button centering */
.gaming-links {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.gaming-feature {
    padding: 0;
    border-radius: var(--radius-lg);
    transition: all 0.5s var(--ease-out);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gaming-img {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.08), rgba(74, 144, 226, 0.08));
}

/* Atmosférická výzdoba na levé straně - velký dekorativní text */
.gaming-img::before {
    position: absolute;
    top: 50%;
    left: -4px;
    transform: translateY(-50%);
    font-size: 78px;
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.04em;
    color: rgba(0, 0, 0, 0.07);
    pointer-events: none;
    white-space: pre;
    font-family: 'Inter', sans-serif;
    z-index: 0;
    text-transform: uppercase;
    transition: transform 0.7s var(--ease-out), color 0.5s var(--ease);
}

.gaming-feature[data-game="hunt"] .gaming-img::before {
    content: 'HUNT\A DOWN';
}

.gaming-feature[data-game="gta"] .gaming-img::before {
    content: 'GRAND\A THEFT';
}

.gaming-feature[data-game="clonehero"] .gaming-img::before {
    content: 'ROCK\A ON';
}

.gaming-feature:hover .gaming-img::before {
    transform: translateY(-50%) translateX(3px);
    color: rgba(0, 0, 0, 0.11);
}

.gaming-img img {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 105%;
    width: auto;
    object-fit: contain;
    object-position: bottom right;
    transition: transform 0.7s var(--ease-out);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
    z-index: 1;
    /* Jemný mask - spodek se decentně rozpouští */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
}

.gaming-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--glass-bg));
    pointer-events: none;
}

.gaming-feature:hover .gaming-img img {
    transform: scale(1.08) translateY(-4px);
}

.gaming-feature-body {
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.feature-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}

.gaming-feature h3 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.feature-desc {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Featured (GTA) - tmavé téma */
.gaming-feature.featured .gaming-img::before {
    color: rgba(255, 255, 255, 0.08);
}

.gaming-feature.featured:hover .gaming-img::before {
    color: rgba(255, 255, 255, 0.13);
}

.gaming-feature.featured .gaming-feature-body {
    background: rgba(29, 29, 31, 0.92);
    color: white;
}

.gaming-feature.featured .feature-desc {
    color: rgba(255, 255, 255, 0.7);
}

.gaming-feature.featured .gaming-img::after {
    background: linear-gradient(to bottom, transparent, rgba(29, 29, 31, 0.92));
}

/* === GTA VI Countdown === */
.gta-countdown {
    margin-top: 24px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.15), rgba(255, 165, 0, 0.08));
    border: 1px solid rgba(255, 165, 0, 0.25);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.gta-countdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 165, 0, 0.1),
        transparent
    );
    animation: countdownShine 4s ease-in-out infinite;
    pointer-events: none;
}

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

.countdown-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #ffa500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.countdown-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffa500;
    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7);
    animation: countdownPulse 2s ease-out infinite;
}

@keyframes countdownPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 165, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); }
}

.countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 4px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s var(--ease);
}

.countdown-unit:hover {
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.5);
}

.countdown-num {
    font-size: 26px;
    font-weight: 800;
    color: white;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 8px rgba(255, 165, 0, 0.3);
    margin-bottom: 4px;
    font-feature-settings: "tnum";
}

.countdown-text {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.countdown-date {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
}

.gta-countdown.released .countdown-grid {
    opacity: 0.5;
}

.gta-countdown.released .countdown-label {
    color: #4ade80;
}

.gta-countdown.released .countdown-pulse {
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation-name: countdownPulseGreen;
}

@keyframes countdownPulseGreen {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* === Game stats blocks (Hunt MMR, Clone Hero Full Combo) === */
.game-stat {
    margin-top: 24px;
    padding: 16px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    border: 1px solid;
}

/* Hunt theme - dark grungy */
.game-stat--hunt {
    background: linear-gradient(135deg, rgba(60, 40, 30, 0.08), rgba(120, 90, 60, 0.04));
    border-color: rgba(120, 90, 60, 0.25);
}

.game-stat--hunt .game-stat-dot {
    background: #c97b3f;
    box-shadow: 0 0 0 0 rgba(201, 123, 63, 0.7);
    animation: gameStatPulseHunt 2.5s ease-out infinite;
}

.game-stat--hunt .game-stat-label {
    color: #8b5a3c;
}

@keyframes gameStatPulseHunt {
    0% { box-shadow: 0 0 0 0 rgba(201, 123, 63, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(201, 123, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 123, 63, 0); }
}

/* Clone Hero theme - purple/blue rhythm */
.game-stat--clonehero {
    background: linear-gradient(135deg, rgba(140, 60, 180, 0.08), rgba(60, 100, 200, 0.06));
    border-color: rgba(140, 60, 180, 0.25);
}

.game-stat--clonehero .game-stat-dot {
    background: #c77dff;
    box-shadow: 0 0 0 0 rgba(199, 125, 255, 0.7);
    animation: gameStatPulseCH 2.5s ease-out infinite;
}

.game-stat--clonehero .game-stat-label {
    color: #7b2cbf;
}

@keyframes gameStatPulseCH {
    0% { box-shadow: 0 0 0 0 rgba(199, 125, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(199, 125, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(199, 125, 255, 0); }
}

/* Shared elements */
.game-stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
}

.game-stat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.game-stat-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.4s var(--ease-out);
}

.game-stat:hover .game-stat-img {
    transform: scale(1.02);
}

.game-stat-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Specifické pozadí pro každou hru */
/* Specifické pozadí pro každou hru - tematické gradients */
.gaming-feature[data-game="hunt"] .gaming-img {
    background: 
        radial-gradient(circle at 25% 50%, rgba(180, 130, 80, 0.18), transparent 60%),
        linear-gradient(135deg, rgba(230, 210, 180, 0.5), rgba(180, 155, 125, 0.35));
}

.gaming-feature[data-game="clonehero"] .gaming-img {
    background: 
        radial-gradient(circle at 25% 50%, rgba(199, 125, 255, 0.15), transparent 60%),
        linear-gradient(135deg, rgba(140, 60, 180, 0.12), rgba(60, 100, 200, 0.15));
}

.gaming-feature.featured .gaming-img {
    background: 
        radial-gradient(circle at 25% 50%, rgba(255, 215, 0, 0.06), transparent 60%),
        linear-gradient(135deg, #2a2a2c, #1d1d1f);
}

.gaming-feature:hover {
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow-hover);
}

.gaming-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out);
}

.gaming-feature:hover::before {
    transform: scaleX(1);
}

.gaming-feature:hover {
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow-hover);
}

.gaming-feature.featured {
    background: rgba(29, 29, 31, 0.85);
    color: white;
    border-color: rgba(255, 255, 255, 0.1);
}

.gaming-feature.featured .feature-desc {
    color: rgba(255, 255, 255, 0.7);
}

.feature-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
}

.gaming-feature h3 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.feature-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ============================================
   TOP 10 GAMES
   ============================================ */
.subsection-lead {
    font-size: 16px;
    color: var(--text-secondary);
    margin: -8px 0 28px;
    max-width: 620px;
    line-height: 1.55;
}

.top10-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 64px;
}

.top10-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s var(--ease-spring), box-shadow 0.4s var(--ease-out);
    cursor: default;
}

.top10-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 22px 50px rgba(0, 0, 0, 0.14),
        0 6px 16px rgba(0, 0, 0, 0.06);
}

.top10-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #1a1a1a;
}

.top10-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-spring);
}

.top10-card:hover .top10-cover img {
    transform: scale(1.06);
}

.top10-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 22, 0.78);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    transition: transform 0.4s var(--ease-spring);
}

.top10-rank::before {
    content: '#';
    margin-right: 1px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.top10-card[data-rank="1"] .top10-rank {
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.95), rgba(255, 175, 0, 0.95));
    color: #1d1d1f;
    border-color: rgba(255, 230, 100, 0.6);
    box-shadow:
        0 4px 14px rgba(255, 175, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

.top10-card[data-rank="1"] .top10-rank::before {
    color: rgba(29, 29, 31, 0.55);
}

.top10-card:hover .top10-rank {
    transform: scale(1.06);
}

.top10-info {
    padding: 14px 16px 16px;
    background: var(--glass-bg-strong);
    position: relative;
    z-index: 1;
}

.top10-info h4 {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 3px;
    line-height: 1.25;
}

.top10-meta {
    font-size: 11.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
}

/* Stagger reveal animation pro top10 */
.top10-grid .reveal:nth-child(1) { transition-delay: 0s; }
.top10-grid .reveal:nth-child(2) { transition-delay: 0.05s; }
.top10-grid .reveal:nth-child(3) { transition-delay: 0.1s; }
.top10-grid .reveal:nth-child(4) { transition-delay: 0.15s; }
.top10-grid .reveal:nth-child(5) { transition-delay: 0.2s; }
.top10-grid .reveal:nth-child(6) { transition-delay: 0.05s; }
.top10-grid .reveal:nth-child(7) { transition-delay: 0.1s; }
.top10-grid .reveal:nth-child(8) { transition-delay: 0.15s; }
.top10-grid .reveal:nth-child(9) { transition-delay: 0.2s; }
.top10-grid .reveal:nth-child(10) { transition-delay: 0.25s; }

/* ============================================
   FROMSOFTWARE / SOULS SHOWCASE
   ============================================ */
.souls-showcase {
    --souls-bg: #0c0a09;
    --souls-bg-soft: #15110d;
    --souls-amber: #d9a86c;
    --souls-amber-glow: rgba(217, 168, 108, 0.22);
    --souls-amber-soft: rgba(217, 168, 108, 0.08);
    --souls-cream: #f4ead9;
    --souls-cream-soft: rgba(244, 234, 217, 0.7);
    --souls-cream-dim: rgba(244, 234, 217, 0.5);
    --souls-border: rgba(217, 168, 108, 0.18);

    position: relative;
    border-radius: var(--radius-lg);
    padding: 64px 56px 56px;
    margin: 64px 0 56px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(217, 168, 108, 0.06), transparent 70%),
        radial-gradient(ellipse 70% 45% at 50% 100%, rgba(255, 130, 40, 0.12) 0%, rgba(180, 70, 30, 0.06) 40%, transparent 75%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(180, 70, 30, 0.05), transparent 70%),
        var(--souls-bg);
    color: var(--souls-cream);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.18),
        0 0 0 1px var(--souls-border) inset;
}

/* Subtle film grain / texture + warm hearth glow at bottom */
.souls-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(217, 168, 108, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(217, 168, 108, 0.04) 0%, transparent 30%);
    pointer-events: none;
    z-index: 0;
}

/* Pulsating hearth at the bottom - the embers' implied source */
.souls-showcase::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    background: radial-gradient(ellipse 60% 100% at 50% 100%,
        rgba(255, 130, 40, 0.18) 0%,
        rgba(217, 100, 40, 0.08) 30%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: hearthPulse 6s ease-in-out infinite;
}

@keyframes hearthPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Embers - floating amber particles */
.souls-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.souls-embers span {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    background: #ffb45c;
    border-radius: 50%;
    opacity: 0;
    box-shadow:
        0 0 8px #ffb45c,
        0 0 18px rgba(255, 145, 50, 0.75),
        0 0 32px rgba(255, 100, 30, 0.4);
    animation: emberRise 8s linear infinite;
    will-change: transform, opacity;
}

/* Some embers larger / brighter for variety */
.souls-embers span:nth-child(3n) {
    width: 5px;
    height: 5px;
    background: #ffd28a;
    box-shadow:
        0 0 10px #ffd28a,
        0 0 22px rgba(255, 165, 60, 0.8),
        0 0 40px rgba(255, 110, 40, 0.45);
}

.souls-embers span:nth-child(4n) {
    width: 3px;
    height: 3px;
    background: #ff9038;
    box-shadow:
        0 0 6px #ff9038,
        0 0 14px rgba(255, 110, 30, 0.7);
}

.souls-embers span:nth-child(1)  { left: 6%;  animation-delay: 0s;   animation-duration: 9s;  }
.souls-embers span:nth-child(2)  { left: 16%; animation-delay: 1.6s; animation-duration: 7.5s; }
.souls-embers span:nth-child(3)  { left: 26%; animation-delay: 3.2s; animation-duration: 10s;  }
.souls-embers span:nth-child(4)  { left: 36%; animation-delay: 0.8s; animation-duration: 8.5s; }
.souls-embers span:nth-child(5)  { left: 46%; animation-delay: 4.1s; animation-duration: 11s;  }
.souls-embers span:nth-child(6)  { left: 54%; animation-delay: 2.3s; animation-duration: 9.5s; }
.souls-embers span:nth-child(7)  { left: 64%; animation-delay: 5.5s; animation-duration: 8s;   }
.souls-embers span:nth-child(8)  { left: 74%; animation-delay: 1.1s; animation-duration: 10.5s;}
.souls-embers span:nth-child(9)  { left: 84%; animation-delay: 3.7s; animation-duration: 9s;   }
.souls-embers span:nth-child(10) { left: 92%; animation-delay: 6.2s; animation-duration: 11.5s;}

@keyframes emberRise {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }
    8% {
        opacity: 1;
        transform: translateY(-8vh) translateX(4px) scale(1.1);
    }
    40% {
        transform: translateY(-40vh) translateX(-14px) scale(1);
        opacity: 0.85;
    }
    75% {
        opacity: 0.4;
        transform: translateY(-75vh) translateX(18px) scale(0.75);
    }
    100% {
        transform: translateY(-105vh) translateX(-10px) scale(0.3);
        opacity: 0;
    }
}

.souls-header {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin-bottom: 48px;
}

.souls-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--souls-amber);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    margin-bottom: 18px;
    padding: 4px 14px;
    border: 1px solid var(--souls-border);
    border-radius: 100px;
    background: var(--souls-amber-soft);
}

.souls-brand {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.souls-brand-logo {
    height: 22px;
    width: auto;
    filter: brightness(0) saturate(100%) invert(82%) sepia(28%) saturate(434%) hue-rotate(347deg) brightness(95%) contrast(88%);
    opacity: 0.85;
    transition: opacity 0.4s var(--ease), filter 0.4s var(--ease);
}

.souls-brand-logo:hover {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(90%) sepia(48%) saturate(534%) hue-rotate(347deg) brightness(100%) contrast(92%);
}

.souls-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--souls-cream) 0%, var(--souls-amber) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--souls-cream); /* fallback */
}

.souls-lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--souls-cream-soft);
    font-weight: 400;
}

.souls-games {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.souls-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(30, 24, 18, 0.85), rgba(20, 16, 12, 0.9));
    border: 1px solid var(--souls-border);
    transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.5s var(--ease);
    position: relative;
    isolation: isolate;
    min-height: 320px;
}

.souls-card:hover {
    transform: translateY(-4px);
    border-color: rgba(217, 168, 108, 0.4);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(217, 168, 108, 0.08),
        0 0 0 1px rgba(217, 168, 108, 0.25) inset;
}

.souls-card--reverse {
    grid-template-columns: 1fr 1.1fr;
}

.souls-card--reverse .souls-card-image {
    order: 2;
}

.souls-card--reverse .souls-card-body {
    order: 1;
}

.souls-card-image {
    position: relative;
    overflow: hidden;
    min-height: 320px;
}

.souls-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out), filter 0.6s var(--ease);
    filter: saturate(0.92) contrast(1.05);
}

.souls-card:hover .souls-card-image img {
    transform: scale(1.05);
    filter: saturate(1.05) contrast(1.08);
}

.souls-card-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 80% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.45) 100%),
        linear-gradient(to right, transparent 70%, rgba(20, 16, 12, 0.6) 100%);
    pointer-events: none;
}

.souls-card--reverse .souls-card-vignette {
    background:
        radial-gradient(ellipse 90% 80% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.45) 100%),
        linear-gradient(to left, transparent 70%, rgba(20, 16, 12, 0.6) 100%);
}

.souls-card-body {
    padding: 44px 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    position: relative;
}

.souls-card-logo {
    height: 64px;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.souls-card-logo img {
    max-height: 100%;
    max-width: 70%;
    width: auto;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(82%) sepia(28%) saturate(434%) hue-rotate(347deg) brightness(95%) contrast(88%);
    transition: filter 0.5s var(--ease);
}

/* Demon's Souls má SVG black logo - invertujeme jinak */
.souls-card[data-souls="demons-souls"] .souls-card-logo img {
    filter: brightness(0) saturate(100%) invert(82%) sepia(28%) saturate(434%) hue-rotate(347deg) brightness(95%) contrast(88%);
}

.souls-card:hover .souls-card-logo img {
    filter: brightness(0) saturate(100%) invert(90%) sepia(48%) saturate(534%) hue-rotate(347deg) brightness(100%) contrast(92%);
}

.souls-card-text {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--souls-cream-soft);
    font-weight: 400;
}

.souls-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.souls-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--souls-amber);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 12px;
    border: 1px solid var(--souls-border);
    border-radius: 100px;
    background: var(--souls-amber-soft);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.souls-card:hover .souls-tag {
    background: rgba(217, 168, 108, 0.14);
    border-color: rgba(217, 168, 108, 0.35);
}

/* Final quote */
.souls-quote {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 56px auto 0;
    max-width: 600px;
    padding-top: 36px;
    border-top: 1px solid var(--souls-border);
}

.souls-quote p {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 400;
    font-style: italic;
    color: var(--souls-amber);
    letter-spacing: -0.005em;
    line-height: 1.4;
    text-shadow: 0 0 30px rgba(217, 168, 108, 0.25);
}

.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    color: var(--text);
    text-decoration: none;
    border-radius: 100px;
    font-size: 14.5px;
    font-weight: 500;
    transition: 
        background 0.3s var(--ease),
        color 0.3s var(--ease),
        border-color 0.3s var(--ease),
        transform 0.4s var(--ease-spring),
        box-shadow 0.3s var(--ease);
}

.link-btn:hover {
    background: var(--accent);
    color: white;
    transform: scale(1.04) translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 12px 30px rgba(255, 23, 68, 0.25);
}

.link-btn:active {
    transform: scale(0.98);
    transition: transform 0.1s var(--ease);
}

.link-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.4s var(--ease-spring);
}

.link-btn:hover svg {
    transform: translate(3px, -3px);
}

/* ============================================
   MOVIES
   ============================================ */
.movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.movie-card {
    border-radius: var(--radius-md);
    transition: transform 0.5s var(--ease-spring), box-shadow 0.4s var(--ease-out);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    cursor: default;
}

.movie-card:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 20px 50px rgba(0, 0, 0, 0.12),
        0 6px 16px rgba(0, 0, 0, 0.06);
}

/* === Poster zone (top) === */
.movie-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #1a1a1a;
    flex-shrink: 0;
}

.movie-poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s var(--ease-spring);
}

.movie-card:hover .movie-poster-img {
    transform: scale(1.05);
}

/* Fade k bílé dole pro plynulý přechod na info zónu */
.movie-poster::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.3) 85%,
        rgba(255, 255, 255, 0.6) 100%
    );
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s var(--ease);
}

/* Rating overlay - top right s glass pillbox */
.movie-rating {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px 5px 8px;
    background: rgba(20, 20, 22, 0.78);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.movie-rating::before {
    content: '★';
    color: #ffd60a;
    font-size: 13px;
    filter: drop-shadow(0 0 4px rgba(255, 214, 10, 0.6));
}

/* Karty bez plakátu - velký gradient s letterovkou */
.movie-card:not([style*="background-image"]) .movie-poster,
.movie-poster:not([style*="background-image"]) {
    background: linear-gradient(135deg, #f0f0f3, #e8e8eb);
}

.movie-poster .movie-letters {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 140px;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.08em;
    color: rgba(0, 0, 0, 0.08);
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    transition: transform 0.6s var(--ease-spring), color 0.4s var(--ease);
}

.movie-card:hover .movie-letters {
    transform: translate(-50%, -50%) scale(1.08) rotate(-3deg);
    color: rgba(0, 0, 0, 0.14);
}

/* === Info zone (bottom) === */
.movie-info {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    background: var(--glass-bg-strong);
    position: relative;
    z-index: 1;
}

.movie-card h4 {
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--text);
    margin: 0;
}

.movie-original {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
    font-style: italic;
    margin: 0;
}

.movie-meta {
    margin-top: 10px;
    margin-bottom: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.movie-meta-tag {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 100px;
}

.movie-meta-tag--year {
    background: var(--accent-soft);
    color: var(--accent);
}

.movie-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.movies-cta {
    text-align: center;
    margin-top: 48px;
}

/* === LEGACY support pro karty s data-theme (oddstraňujeme barevné overlay) === */
.movie-card[data-theme]::after { display: none; }

/* ============================================
   KOMEDIOVÁ RULETA
   ============================================ */
.roulette {
    max-width: 760px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Filter pills --- */
.roulette-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.roulette-pill {
    appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.7);
    color: rgba(29, 29, 31, 0.65);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 2px rgba(20, 20, 40, 0.04);
}

.roulette-pill:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 20, 40, 0.08);
}

.roulette-pill.is-active {
    color: white;
    background: linear-gradient(135deg, var(--accent) 0%, #e6164a 100%);
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(255, 23, 68, 0.32);
}

.roulette-pill.is-active:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255, 23, 68, 0.38);
}

.roulette-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* --- Stage (display card) --- */
.roulette-stage {
    position: relative;
    /* The cinema wrapper inside now owns the visual identity (border + bg).
       Stage is just a transparent positioning shell — no padding, no glass. */
    padding: 0;
    height: auto;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    transition: box-shadow 0.5s var(--ease-out);
}


/* Subtle ambient glows in corners */
.roulette-stage::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle at 30% 50%, rgba(255, 23, 68, 0.18) 0%, transparent 65%);
    opacity: 0.6;
    transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
    pointer-events: none;
    filter: blur(40px);
}

.roulette-stage::after {
    content: "";
    position: absolute;
    bottom: -40%;
    right: -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle at 70% 50%, rgba(255, 200, 120, 0.18) 0%, transparent 65%);
    opacity: 0.5;
    transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
    pointer-events: none;
    filter: blur(40px);
}

.roulette-stage.is-spinning::before {
    opacity: 1;
    animation: roulette-pulse-left 1.8s var(--ease-out);
}

.roulette-stage.is-spinning::after {
    opacity: 0.9;
    animation: roulette-pulse-right 1.8s var(--ease-out);
}

@keyframes roulette-pulse-left {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(20%) scale(1.15); }
}

@keyframes roulette-pulse-right {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(-20%) scale(1.15); }
}

/* Win state */
/* No is-revealed visual on the stage anymore — the cinema wrapper inside
   owns the visual identity. Empty rule kept as anchor / for JS class detection. */
.roulette-stage.is-revealed {
    /* intentionally empty */
}

/* --- Display content --- */
.roulette-display {
    position: relative;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.roulette-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.roulette-idle-icon {
    width: 56px;
    height: 56px;
    color: var(--accent);
    opacity: 0.85;
    filter: drop-shadow(0 6px 16px rgba(255, 23, 68, 0.25));
    animation: roulette-idle-float 4s var(--ease-in-out) infinite;
}

@keyframes roulette-idle-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-3deg); }
}

.roulette-idle-text {
    font-size: 16px;
    color: rgba(29, 29, 31, 0.55);
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.roulette-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
    animation: roulette-reveal 0.9s var(--ease-spring-soft) both;
}

@keyframes roulette-reveal {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.55);
        filter: blur(10px);
    }
    35% {
        opacity: 1;
        filter: blur(0);
    }
    62% {
        transform: translateY(-3px) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Title glow shimmer that settles into resting state */
.roulette-pick-title {
    animation: roulette-title-shimmer 1.4s var(--ease-out) 0.15s both;
}

@keyframes roulette-title-shimmer {
    0% {
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    25% {
        text-shadow:
            0 0 24px rgba(255, 23, 68, 0.55),
            0 0 60px rgba(255, 23, 68, 0.25),
            0 1px 0 rgba(255, 255, 255, 0.6);
    }
    100% {
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    }
}

/* Year & CSFD link cascade in slightly later */
.roulette-pick-year {
    animation: roulette-fade-up 0.55s var(--ease-spring) 0.25s both;
}

.roulette-pick-eyebrow {
    animation: roulette-fade-up 0.55s var(--ease-spring) 0.05s both;
}

.roulette-csfd {
    animation: roulette-fade-up 0.55s var(--ease-spring) 0.4s both;
}

@keyframes roulette-fade-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Flash burst when winner is revealed === */
.roulette-flash {
    position: absolute;
    inset: -10%;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 220, 230, 0.7) 22%,
        rgba(255, 23, 68, 0.4) 45%,
        rgba(255, 23, 68, 0.05) 70%,
        transparent 88%);
    filter: blur(14px);
    mix-blend-mode: screen;
    animation: roulette-flash-burst 0.7s var(--ease-out) forwards;
}

@keyframes roulette-flash-burst {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }
    18% {
        opacity: 1;
        transform: scale(1);
    }
    55% {
        opacity: 0.55;
        transform: scale(1.18);
    }
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

/* Secondary, slower "halo" pulse that ripples outward */
.roulette-flash::after {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    border: 1px solid rgba(255, 23, 68, 0.4);
    animation: roulette-flash-ring 0.9s var(--ease-out) forwards;
}

@keyframes roulette-flash-ring {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    30% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: scale(2.2);
        border-color: rgba(255, 23, 68, 0);
    }
}

.roulette-pick-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent) 0%, #ff6e2e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);
}

.roulette-pick-title {
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    color: #1d1d1f;
    max-width: 620px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.roulette-pick-year {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(20, 20, 40, 0.06);
}

.roulette-csfd {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(29, 29, 31, 0.65);
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s var(--ease-out);
}

.roulette-csfd:hover {
    color: var(--accent);
    background: rgba(255, 23, 68, 0.06);
    border-color: rgba(255, 23, 68, 0.18);
    transform: translateY(-1px);
}

.roulette-csfd svg {
    width: 12px;
    height: 12px;
    transition: transform 0.3s var(--ease-spring);
}

.roulette-csfd:hover svg {
    transform: translate(2px, -2px);
}

/* ===== Enriched pick layout (when poster + metadata are available) ===== */
.roulette-pick--rich {
    flex-direction: row;
    align-items: stretch;
    gap: 28px;
    max-width: 720px;
    width: 100%;
    text-align: left;
    padding: 4px;
}

.roulette-pick--text {
    /* Falls back to centered single-column layout (existing styles handle it). */
    text-align: center;
}

.roulette-poster {
    flex: 0 0 auto;
    width: 168px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #d6dce5 0%, #e8edf3 100%);
    box-shadow:
        -6px -6px 14px rgba(255, 255, 255, 0.85),
        8px 10px 24px rgba(20, 30, 60, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    align-self: center;
    position: relative;
    z-index: 2;
    /* Staged reveal — runs only in the rich layout; the text-only fallback
       keeps its own simple fade-up via roulette-fade-up. */
    animation: poster-step-and-slide 850ms cubic-bezier(0.18, 0.88, 0.28, 1) both;
    transform-origin: center center;
}

/* 1) Poster appears centered horizontally in the card, scales up briefly
      (the "step forward" beat), then slides to its final left position. */
@keyframes poster-step-and-slide {
    0% {
        transform: translateX(var(--poster-center-x, 0)) scale(0.92);
        opacity: 0;
    }
    18% {
        transform: translateX(var(--poster-center-x, 0)) scale(1.08);
        opacity: 1;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* 2) Info column emerges from BEHIND the poster, sliding right + fading in,
      with a delay timed to start once the poster begins its leftward move. */
.roulette-pick--rich .roulette-pick-info {
    animation: info-slide-from-behind 650ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
    position: relative;
    z-index: 1;
}

@keyframes info-slide-from-behind {
    0% {
        opacity: 0;
        transform: translateX(-90px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* The individual child fade-ups (on title/year/meta/etc) would fight the
   parent slide-in — disable them in the rich layout. Title keeps its shimmer
   highlight, just bumped to fire after the info has slid into place. */
.roulette-pick--rich .roulette-pick-eyebrow,
.roulette-pick--rich .roulette-pick-year,
.roulette-pick--rich .roulette-pick-meta,
.roulette-pick--rich .roulette-genres,
.roulette-pick--rich .roulette-providers,
.roulette-pick--rich .roulette-actions-row .roulette-csfd,
.roulette-pick--rich .roulette-actions-row .roulette-trailer {
    animation: none;
}

.roulette-pick--rich .roulette-pick-title {
    animation: roulette-title-shimmer 1.2s var(--ease-out) 920ms both;
}

@media (prefers-reduced-motion: reduce) {
    .roulette-pick--rich .roulette-poster,
    .roulette-pick--rich .roulette-pick-info,
    .roulette-pick--rich .roulette-pick-title {
        animation: none !important;
    }
}

.roulette-poster img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.roulette-pick-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.roulette-pick--rich .roulette-pick-eyebrow {
    margin-bottom: -2px;
}

.roulette-pick--rich .roulette-pick-title {
    text-align: left;
    font-size: clamp(22px, 2.6vw, 32px);
    max-width: 100%;
    margin: 0;
}

.roulette-pick-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    animation: roulette-fade-up 0.55s var(--ease-spring) 0.22s both;
}

.roulette-pick--rich .roulette-pick-year {
    margin: 0;
    animation: none;  /* parent .roulette-pick-meta carries the entrance */
}

.roulette-rating,
.roulette-runtime {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(20, 30, 60, 0.07);
    box-shadow:
        -2px -2px 5px rgba(255, 255, 255, 0.9),
        2px 2px 6px rgba(20, 30, 60, 0.06);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #1d1d1f;
    letter-spacing: 0.01em;
}

.roulette-rating svg {
    width: 12px;
    height: 12px;
    color: #f59e0b;
}

.roulette-runtime svg {
    width: 12px;
    height: 12px;
    color: rgba(29, 29, 31, 0.55);
}

.roulette-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    animation: roulette-fade-up 0.55s var(--ease-spring) 0.28s both;
}

.roulette-genre {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 23, 68, 0.85);
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 23, 68, 0.07);
    border: 1px solid rgba(255, 23, 68, 0.16);
}

.roulette-providers {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    animation: roulette-fade-up 0.55s var(--ease-spring) 0.34s both;
}

.roulette-providers-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(29, 29, 31, 0.55);
}

.roulette-providers-list {
    display: flex;
    gap: 6px;
    align-items: center;
}

.roulette-providers-list img {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    object-fit: cover;
    background: #fff;
    border: 1px solid rgba(20, 30, 60, 0.08);
    box-shadow: 0 2px 4px rgba(20, 30, 60, 0.08);
    display: block;
}

.roulette-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.roulette-pick--rich .roulette-csfd {
    margin-top: 0;
    animation: roulette-fade-up 0.55s var(--ease-spring) 0.4s both;
}

.roulette-trailer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent) 0%, #ff6e2e 100%);
    box-shadow:
        0 2px 6px rgba(255, 23, 68, 0.28),
        0 8px 18px -6px rgba(255, 23, 68, 0.35);
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-out);
    animation: roulette-fade-up 0.55s var(--ease-spring) 0.36s both;
}

.roulette-trailer:hover {
    transform: translateY(-1px);
    box-shadow:
        0 3px 8px rgba(255, 23, 68, 0.32),
        0 12px 24px -8px rgba(255, 23, 68, 0.42);
}

.roulette-trailer svg {
    width: 12px;
    height: 12px;
    margin-left: -1px;
}

/* Reel items: small thumbnail on the left, text on the right */
.roulette-reel-item-thumb {
    width: 54px;
    height: 80px;
    flex: 0 0 auto;
    border-radius: 7px;
    object-fit: cover;
    background: linear-gradient(135deg, #d6dce5, #eef2f7);
    box-shadow: 0 2px 6px rgba(20, 30, 60, 0.14);
}

.roulette-reel-item-thumb--blank {
    background: linear-gradient(135deg, #e3e8ef 0%, #f1f4f9 100%);
}

.roulette-reel-item-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.roulette-reel-item-text .roulette-reel-item-title {
    text-align: left;
    font-size: clamp(18px, 2.6vw, 26px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (max-width: 640px) {
    .roulette-pick--rich {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    .roulette-poster {
        width: 130px;
    }
    .roulette-pick--rich .roulette-pick-info {
        align-items: center;
    }
    .roulette-pick--rich .roulette-pick-title {
        text-align: center;
    }
    .roulette-pick-meta,
    .roulette-genres,
    .roulette-actions-row {
        justify-content: center;
    }
    .roulette-reel-item-thumb {
        width: 44px;
        height: 66px;
    }
    .roulette-reel-item-text .roulette-reel-item-title {
        font-size: 18px;
    }
}

/* ===== Spin state — vertical slot-machine reel ===== */
/* Cinema wrapper — film strip top/bottom + reel in the middle.
   No max-width — stretches to fill the stage (which sits inside .container, max 1200px).
   CSS containment isolates the reel's heavy transforms from the rest of the page —
   the navbar and other elements won't be re-painted during spin. */
.roulette-cinema {
    position: relative;
    width: 100%;
    margin: 0 auto;
    contain: layout style paint;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Recess the wrapper into the stage with an inset shadow groove */
    background: linear-gradient(180deg, #1c1d22 0%, #131419 100%);
    border-radius: 14px;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.35),
        inset 0 -1px 4px rgba(0, 0, 0, 0.25),
        0 2px 0 rgba(255, 255, 255, 0.55);
    padding: 0;
    overflow: hidden;
    z-index: 1;
}

/* Spotlight glow behind the center slot — warm halo on the active item */
.roulette-cinema::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: calc(50% - 130px);
    width: 260px;
    background: radial-gradient(ellipse 50% 70% at 50% 50%,
        rgba(255, 220, 180, 0.30) 0%,
        rgba(255, 110, 46, 0.10) 35%,
        transparent 75%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

/* Edge vignette on the cinema — darker towards left/right ends */
.roulette-cinema::after {
    content: "";
    position: absolute;
    inset: 22px 0;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0) 18%,
        rgba(0, 0, 0, 0) 82%,
        rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
    z-index: 2;
}

/* 35mm film strip with punched-out sprocket holes */
.roulette-film-strip {
    height: 22px;
    width: 100%;
    background:
        linear-gradient(180deg,
            #0e0f12 0%,
            #1b1c20 20%,
            #1b1c20 80%,
            #0e0f12 100%);
    -webkit-mask-image: repeating-linear-gradient(
        90deg,
        black 0 30px,
        transparent 30px 44px
    );
    mask-image: repeating-linear-gradient(
        90deg,
        black 0 30px,
        transparent 30px 44px
    );
    position: relative;
    z-index: 4;  /* over reel mask edges, above vignette */
    pointer-events: none;
}

.roulette-film-strip.is-top {
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}
.roulette-film-strip.is-bottom {
    box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.18);
}

/* Horizontal poster reel — items slide right-to-left, center slot showcases the pick */
.roulette-reel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 320px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 6%,
        black 22%,
        black 78%,
        rgba(0, 0, 0, 0.4) 94%,
        transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 6%,
        black 22%,
        black 78%,
        rgba(0, 0, 0, 0.4) 94%,
        transparent 100%);
}

/* Center slot marker — single vertical line + arrow caps, CS:GO style */
.roulette-reel-frame {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 23, 68, 0.0) 4%,
        var(--accent) 14%,
        var(--accent) 86%,
        rgba(255, 23, 68, 0.0) 96%,
        transparent 100%);
    pointer-events: none;
    z-index: 3;
    box-shadow:
        0 0 6px rgba(255, 23, 68, 0.45),
        0 0 14px rgba(255, 23, 68, 0.22);
    border-radius: 2px;
}

/* Top arrow pointing down */
.roulette-reel-frame::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--accent);
    filter: drop-shadow(0 1px 3px rgba(255, 23, 68, 0.55));
}

/* Bottom arrow pointing up */
.roulette-reel-frame::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid var(--accent);
    filter: drop-shadow(0 -1px 3px rgba(255, 23, 68, 0.55));
}

.roulette-reel-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    will-change: transform;
}

/* Vintage cinema marquee — shown in idle state. Two chasing-bulb rows wrap a
   big blinking headline. Sits inside the .roulette-cinema frame instead of
   the reel, so the dark theatrical container stays consistent. */
.roulette-marquee {
    position: relative;
    z-index: 2;
    height: 320px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 22px 36px;
    gap: 14px;
}

.roulette-marquee-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    width: 100%;
}

.roulette-marquee-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #f6c987;
    text-shadow:
        0 0 6px rgba(246, 201, 135, 0.6),
        0 0 14px rgba(255, 130, 40, 0.4);
    animation: marquee-eyebrow-pulse 2.4s ease-in-out infinite;
}

.roulette-marquee-headline {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 0.95;
    text-transform: uppercase;
    color: #fff5e6;
    text-shadow:
        0 0 6px rgba(255, 245, 220, 0.85),
        0 0 16px rgba(255, 200, 120, 0.55),
        0 0 36px rgba(255, 110, 46, 0.35),
        0 0 70px rgba(255, 23, 68, 0.25);
    animation: marquee-headline-flicker 6.5s linear infinite;
}

.roulette-marquee-sub {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 245, 220, 0.7);
    letter-spacing: 0.04em;
}

/* Headline neon flicker — mostly steady with a brief burst near the end */
@keyframes marquee-headline-flicker {
    0%, 84%, 100% {
        opacity: 1;
        text-shadow:
            0 0 6px rgba(255, 245, 220, 0.85),
            0 0 16px rgba(255, 200, 120, 0.55),
            0 0 36px rgba(255, 110, 46, 0.35),
            0 0 70px rgba(255, 23, 68, 0.25);
    }
    85% {
        opacity: 0.45;
        text-shadow: 0 0 3px rgba(255, 245, 220, 0.4);
    }
    85.5%, 86.5%, 88%, 89% {
        opacity: 1;
    }
    86% {
        opacity: 0.25;
        text-shadow: 0 0 2px rgba(255, 245, 220, 0.3);
    }
    88.5% {
        opacity: 0.6;
        text-shadow: 0 0 4px rgba(255, 245, 220, 0.5);
    }
}

@keyframes marquee-eyebrow-pulse {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.03); }
}

/* Chasing bulb rows */
.roulette-bulbs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    flex: 0 0 auto;
    padding: 0 6px;
}

.roulette-bulbs span {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #fff5d8 0%,
        #ffc870 35%,
        #d6691e 70%,
        #5b2a08 100%);
    box-shadow:
        0 0 4px rgba(255, 200, 110, 0.85),
        0 0 9px rgba(255, 160, 60, 0.55);
    animation: bulb-chase 1.6s ease-in-out infinite;
}

@keyframes bulb-chase {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 4px rgba(255, 200, 110, 0.85),
            0 0 9px rgba(255, 160, 60, 0.55);
    }
    50% {
        opacity: 0.25;
        transform: scale(0.78);
        box-shadow:
            0 0 2px rgba(255, 200, 110, 0.3),
            0 0 4px rgba(255, 160, 60, 0.15);
    }
}

/* Performance: don't animate on weak devices or when reduced motion is set */
html.lowperf .roulette-bulbs span,
html.lowperf .roulette-marquee-headline,
html.lowperf .roulette-marquee-eyebrow {
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .roulette-bulbs span,
    .roulette-marquee-headline,
    .roulette-marquee-eyebrow {
        animation: none !important;
    }
}

@media (max-width: 640px) {
    .roulette-marquee {
        height: 280px;
        padding: 16px 18px;
    }
    .roulette-marquee-headline {
        font-size: clamp(32px, 9vw, 52px);
    }
    .roulette-marquee-eyebrow {
        font-size: 10.5px;
        letter-spacing: 0.24em;
    }
    .roulette-marquee-sub {
        font-size: 12.5px;
    }
    .roulette-bulbs span {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
    }
}

.roulette-reel-item {
    width: 192px;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    text-align: center;
}

.roulette-reel-item-thumb {
    width: 140px;
    height: 210px;
    flex: 0 0 auto;
    border-radius: 10px;
    object-fit: cover;
    background: linear-gradient(135deg, #d6dce5, #eef2f7);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 8px 20px rgba(20, 30, 60, 0.18),
        0 2px 6px rgba(20, 30, 60, 0.10);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}

.roulette-reel-item-thumb--blank {
    background: linear-gradient(135deg, #e3e8ef 0%, #f1f4f9 100%);
}

.roulette-reel-item-text {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.roulette-reel-item-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.roulette-reel-item-text .roulette-reel-item-title {
    font-size: 13px;
    text-align: center;
}

.roulette-reel-item-year {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.08em;
}

@media (max-width: 640px) {
    .roulette-reel {
        height: 280px;
        max-width: 100%;
    }
    .roulette-reel-item {
        width: 152px;
        padding: 6px 8px;
        gap: 6px;
    }
    .roulette-reel-item-thumb {
        width: 112px;
        height: 168px;
    }
    .roulette-reel-item-title {
        font-size: 12px;
    }
    .roulette-reel-item-text .roulette-reel-item-title {
        font-size: 12px;
    }
}

/* --- Actions --- */
.roulette-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.roulette-spin {
    appearance: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: white;
    background: linear-gradient(135deg, var(--accent) 0%, #e6164a 100%);
    border-radius: 999px;
    box-shadow:
        0 10px 30px rgba(255, 23, 68, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.35s var(--ease-spring-soft);
}

.roulette-spin:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 14px 36px rgba(255, 23, 68, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.roulette-spin:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.roulette-spin:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.roulette-spin-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.5s var(--ease-out);
}

.roulette-spin.is-spinning .roulette-spin-icon {
    animation: roulette-icon-spin 1.8s var(--ease-out);
}

@keyframes roulette-icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(720deg); }
}

.roulette-spin:focus-visible {
    outline: 3px solid rgba(255, 23, 68, 0.45);
    outline-offset: 4px;
}

/* History */
.roulette-history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    min-height: 22px;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.7;
}

.roulette-history:empty {
    display: none;
}

.roulette-history-label {
    font-weight: 600;
    letter-spacing: 0.05em;
}

.roulette-history-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.roulette-history-item {
    padding: 3px 9px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    color: rgba(29, 29, 31, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#rouletteCount {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 640px) {
    .roulette {
        gap: 20px;
    }
    .roulette-stage {
        padding: 0;
        height: auto;
        min-height: 360px;
    }
    .roulette-display {
        min-height: 210px;
    }
    .roulette-pill {
        padding: 7px 13px;
        font-size: 12px;
    }
    .roulette-spin {
        padding: 13px 26px;
        font-size: 14px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .roulette-stage::before,
    .roulette-stage::after,
    .roulette-spin-icon,
    .roulette-pick,
    .roulette-pick-title,
    .roulette-pick-year,
    .roulette-pick-eyebrow,
    .roulette-csfd,
    .roulette-flash,
    .roulette-idle-icon,
    .roulette-reel-strip {
        animation: none !important;
        transition: none !important;
    }
    .roulette-flash {
        display: none !important;
    }
}

/* ============================================
   MUSIC
   ============================================ */
.music-section {
    position: relative;
}

/* === Foo Fighters hero card === */
.music-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 480px;
    margin-bottom: 40px;
    background: #0a0a0a;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.music-hero-bg {
    position: absolute;
    inset: 0;
}

.music-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: contrast(1.1) brightness(0.65) saturate(0.85);
    transition: transform 1.5s var(--ease-out), filter 1s var(--ease-out);
}

.music-hero:hover .music-hero-bg img {
    transform: scale(1.04);
    filter: contrast(1.1) brightness(0.75) saturate(1);
}

.music-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 35%,
        rgba(0, 0, 0, 0.4) 65%,
        rgba(0, 0, 0, 0.75) 100%
    );
    pointer-events: none;
}

.music-hero-content {
    position: relative;
    z-index: 2;
    padding: 56px 56px;
    color: white;
    max-width: 720px;
}

.music-hero-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 24px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
}

.music-hero-logo {
    display: block;
    height: 60px;
    width: auto;
    max-width: 100%;
    margin-bottom: 28px;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

.music-hero-text {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    max-width: 580px;
    margin-bottom: 24px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.music-hero-text strong {
    color: white;
    font-weight: 600;
}

.music-hero-tribute {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.05em;
}

.tribute-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

/* === Foo Fighters fan facts strip === */
.foo-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 32px 0 28px;
}

.foo-fact {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--glass-shadow);
    transition: transform 0.5s var(--ease-spring), box-shadow 0.4s var(--ease-out);
}

.foo-fact:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 18px 38px rgba(0, 0, 0, 0.08);
}

.foo-fact-num {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.foo-fact-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.foo-fact p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

/* === Foo Fighters personal moment card === */
.foo-moment {
    position: relative;
    background: linear-gradient(135deg, #0e0e14 0%, #1a1a24 50%, #0a0a10 100%);
    border-radius: var(--radius-lg);
    padding: clamp(32px, 4vw, 48px);
    color: white;
    margin-bottom: 40px;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.5s var(--ease-spring), box-shadow 0.4s var(--ease-out);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.foo-moment:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22);
}

.foo-moment-glow {
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 23, 68, 0.18), transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: fooGlow 6s ease-in-out infinite;
}

@keyframes fooGlow {
    0%, 100% { opacity: 0.7; transform: translate(0, 0); }
    50% { opacity: 1; transform: translate(-20px, 20px); }
}

.foo-moment-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}

.foo-moment-eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.foo-moment h4 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: white;
    margin-bottom: 16px;
    max-width: 720px;
}

.foo-moment p {
    font-size: 15.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 18px;
    max-width: 760px;
}

.foo-moment p strong {
    color: white;
    font-weight: 600;
}

.foo-moment-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.3s var(--ease-spring);
}

.foo-moment-link:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.foo-moment-link svg {
    width: 13px;
    height: 13px;
    transition: transform 0.3s var(--ease-spring);
}

.foo-moment-link:hover svg {
    transform: translate(2px, -2px);
}

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

@media (max-width: 480px) {
    .foo-facts { grid-template-columns: 1fr; }
}

/* === Two-column layout === */
.music-grid-two {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 20px;
    margin-bottom: 56px;
}

/* === Top song card === */
.top-song {
    padding: 24px 24px 20px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
}

.top-song-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 18px;
}

.top-song-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--accent-soft);
    border-radius: 8px;
    color: var(--accent);
}

.top-song-icon svg {
    width: 14px;
    height: 14px;
}

.top-song-embed {
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.top-song-embed iframe {
    width: 100%;
    border-radius: var(--radius-sm);
    display: block;
}

/* YouTube variant: enforce 16:9 aspect ratio so video doesn't squish */
.top-song-embed--youtube {
    align-items: stretch;
    aspect-ratio: 16 / 9;
    background: #000;
}

.top-song-embed--youtube iframe {
    width: 100%;
    height: 100%;
}

/* === Playlist card === */
.playlist {
    padding: 24px 28px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    max-height: 620px;
    min-height: 0;
}

.playlist-header {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.playlist-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
}

/* ============================================
   PLAYLIST PLAYER (Apple Music 30s preview)
   ============================================ */
.playlist-player {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.06) 0%, rgba(255, 110, 46, 0.05) 100%);
    border: 1px solid rgba(255, 23, 68, 0.12);
    box-shadow: 0 6px 18px -10px rgba(255, 23, 68, 0.15);
    transition: all 0.5s var(--ease-out);
}

.playlist-player.is-playing {
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.12) 0%, rgba(255, 110, 46, 0.08) 100%);
    border-color: rgba(255, 23, 68, 0.2);
    box-shadow: 0 12px 28px -12px rgba(255, 23, 68, 0.28);
}

.pp-art {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent) 0%, #ff6e2e 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 23, 68, 0.25);
    transition: transform 0.4s var(--ease-spring);
}

.pp-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-art svg { width: 28px; height: 28px; }

.playlist-player.is-playing .pp-art {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(255, 23, 68, 0.4);
}

.pp-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pp-track {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.005em;
}

.pp-artist {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-progress {
    margin-top: 6px;
    height: 3px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
}

.pp-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(to right, var(--accent), #ff6e2e);
    border-radius: 999px;
    transition: width 0.1s linear;
}

.pp-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pp-btn {
    appearance: none;
    border: none;
    background: rgba(255, 255, 255, 0.6);
    color: var(--text);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--ease-spring-soft);
}

.pp-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.pp-btn:active { transform: scale(0.94); }

.pp-btn--prev,
.pp-btn--next {
    width: 34px;
    height: 34px;
}

.pp-btn--prev svg,
.pp-btn--next svg {
    width: 16px;
    height: 16px;
}

.pp-btn--play {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--accent) 0%, #e6164a 100%);
    color: white;
    box-shadow: 0 6px 14px rgba(255, 23, 68, 0.32);
    position: relative;
}

.pp-btn--play:hover {
    background: linear-gradient(135deg, #ff2a5a 0%, #e6164a 100%);
    box-shadow: 0 8px 18px rgba(255, 23, 68, 0.42);
}

.pp-btn--play svg {
    width: 18px;
    height: 18px;
}

.pp-btn--play .pp-pause-ico {
    margin-left: 0;
}

.pp-btn--play .pp-play-ico {
    margin-left: 2px;
}

.pp-loader {
    position: absolute;
    inset: 4px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: pp-spin 0.8s linear infinite;
}

@keyframes pp-spin {
    to { transform: rotate(360deg); }
}

.pp-btn--play.is-loading svg {
    opacity: 0;
}

/* Active track highlight */
.track.is-active {
    background: rgba(255, 23, 68, 0.06);
    color: var(--accent);
}

.track.is-active .track-artist,
.track.is-active .track-name {
    color: var(--accent);
}

.track.is-active .track-play {
    color: var(--accent);
}

.track.is-failed::after {
    content: "Není v Apple Music";
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-faint);
    font-style: italic;
}

.track { position: relative; }

@media (max-width: 640px) {
    .playlist-player {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 12px;
    }
    .pp-art { width: 48px; height: 48px; }
    .pp-controls {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 4px;
    }
}


.playlist-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.playlist-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--accent-soft);
    border-radius: 8px;
    color: var(--accent);
}

.playlist-icon svg {
    width: 14px;
    height: 14px;
}

.playlist-tracks {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
}

.playlist-tracks::-webkit-scrollbar {
    width: 6px;
}

.playlist-tracks::-webkit-scrollbar-track {
    background: transparent;
}

.playlist-tracks::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 100px;
}

.playlist-tracks::-webkit-scrollbar-thumb:hover {
    background: var(--text-quaternary);
}

.track {
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    transition: padding-left 0.2s var(--ease), background 0.2s var(--ease);
    border-radius: 6px;
}

.track:last-child {
    border-bottom: none;
}

.track:hover {
    padding-left: 10px;
    padding-right: 6px;
    background: rgba(29, 185, 84, 0.05);
}

.track-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.track-artist {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.track-name {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
}

/* Per-track play buttons hidden — playlist player at top handles playback */
.track-play {
    display: none;
}

/* === SUNO AI mini-player grid === */
.suno-section {
    margin-bottom: 56px;
}

.suno-section .subsection-lead {
    font-size: 16px;
    color: var(--text-secondary);
    margin: -8px 0 32px;
    max-width: 720px;
    line-height: 1.55;
}

.suno-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 32px;
}

.suno-card {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 14px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    transition: transform 0.5s var(--ease-spring), box-shadow 0.4s var(--ease-out);
    isolation: isolate;
}

.suno-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 18px 40px rgba(0, 0, 0, 0.12);
}

.suno-cover {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #1a1a1a;
}

.suno-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease-spring), filter 0.4s var(--ease);
}

.suno-card.is-playing .suno-cover img {
    transform: scale(1.06);
    filter: saturate(1.1);
}

.suno-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.42);
    color: white;
    border: 0;
    cursor: pointer;
    transition: background 0.25s var(--ease), opacity 0.25s var(--ease);
    padding: 0;
}

.suno-play {
    opacity: 0;
}

.suno-cover:hover .suno-play,
.suno-card.is-playing .suno-play,
.suno-card.is-loading .suno-play {
    opacity: 1;
}

.suno-play:hover {
    background: rgba(0, 0, 0, 0.65);
}

.suno-play-icon,
.suno-pause-icon {
    width: 28px;
    height: 28px;
    transition: transform 0.25s var(--ease-spring);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.suno-play-icon { display: block; margin-left: 2px; }
.suno-pause-icon { display: none; }

.suno-card.is-playing .suno-play-icon { display: none; }
.suno-card.is-playing .suno-pause-icon { display: block; }

.suno-play:hover .suno-play-icon,
.suno-play:hover .suno-pause-icon {
    transform: scale(1.1);
}

.suno-loader {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(255, 255, 255, 0.25);
    border-top-color: white;
    border-radius: 50%;
    display: none;
    animation: sunoSpin 0.8s linear infinite;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.suno-card.is-loading .suno-loader { display: block; }
.suno-card.is-loading .suno-play-icon,
.suno-card.is-loading .suno-pause-icon { display: none; }

@keyframes sunoSpin {
    to { transform: rotate(360deg); }
}

.suno-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
}

.suno-info h4 {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suno-info h4 small {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.suno-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.suno-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2.5px 8px;
    border-radius: 100px;
    background: var(--accent-soft);
    color: var(--accent);
}

.suno-player {
    margin-top: auto;
    padding-top: 4px;
}

.suno-progress {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 100px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: height 0.2s var(--ease);
}

.suno-progress:hover { height: 6px; }

.suno-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), #ff5577);
    border-radius: 100px;
    transition: width 0.15s linear;
}

.suno-times {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 11px;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.suno-stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
    margin-top: 2px;
}

.suno-footer {
    text-align: center;
    margin-top: 8px;
}


@media (max-width: 640px) {
    .suno-grid { grid-template-columns: 1fr; }
    .suno-cover { width: 84px; height: 84px; }
}

/* === Artists cloud === */
.artists-section {
    text-align: center;
}

.artists-section .subsection-title {
    margin-bottom: 28px;
    text-align: center;
}

/* === Apple TV+ style marquee rows === */
.artists-marquees {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 -24px;
    /* Negative margin lets fade extend past container; container itself handles padding */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.artists-marquee {
    overflow: hidden;
    position: relative;
    /* Vertical padding so neumorphic shadows of artist-pills don't clip */
    padding: 8px 0;
}

.artists-marquee-track {
    display: inline-flex;
    gap: 10px;
    white-space: nowrap;
    animation: artistMarquee var(--marquee-speed, 64s) linear infinite;
    will-change: transform;
    padding-right: 10px;
}

.artists-marquee--reverse .artists-marquee-track {
    animation-direction: reverse;
}

.artists-marquee:hover .artists-marquee-track,
.artists-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes artistMarquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

.artist-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease);
    cursor: default;
    flex-shrink: 0;
}

.artist-pill:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--accent-glow);
}

@media (prefers-reduced-motion: reduce) {
    .artists-marquee-track {
        animation: none;
        flex-wrap: wrap;
    }
    .artists-marquees {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Old centered cloud — keep as fallback */
.artists-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 980px;
    margin: 0 auto;
}

/* ============================================
   COSMOS - vesmír v číslech, černé díry, relativita
   ============================================ */
.cosmos-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
}

/* Soft radial accents blended into base page background — extra-long fade in/out, no hard horizontal line */
.cosmos-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 80% 30%, rgba(255, 23, 68, 0.04), transparent 70%),
        radial-gradient(ellipse 50% 35% at 15% 60%, rgba(120, 80, 255, 0.045), transparent 70%),
        radial-gradient(ellipse 55% 40% at 50% 85%, rgba(255, 165, 80, 0.03), transparent 70%);
    pointer-events: none;
    z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 8%, rgba(0,0,0,0.5) 22%, black 40%, black 60%, rgba(0,0,0,0.5) 78%, transparent 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 8%, rgba(0,0,0,0.5) 22%, black 40%, black 60%, rgba(0,0,0,0.5) 78%, transparent 92%, transparent 100%);
}

/* Canvas star field with parallax */
.cosmos-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

.cosmos-section .container {
    position: relative;
    z-index: 1;
}

/* === Stat hero === */
.cosmos-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 80px;
}

.cosmos-stat {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 32px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.5s var(--ease-spring), box-shadow 0.4s var(--ease-out);
    box-shadow: var(--glass-shadow);
}

.cosmos-stat:hover {
    transform: translateY(-6px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 22px 50px rgba(0, 0, 0, 0.1);
}

.cosmos-stat-num {
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.cosmos-stat-unit {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

.cosmos-stat-label {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
}

.cosmos-stat-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* === Timeline === */
.cosmos-section .subsection-lead {
    font-size: 16px;
    color: var(--text-secondary);
    margin: -16px 0 32px;
    max-width: 640px;
    line-height: 1.55;
}

.cosmos-timeline {
    position: relative;
    padding: 0 0 0 32px;
    margin-bottom: 96px;
}

.timeline-line {
    position: absolute;
    left: 11px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(to bottom,
        var(--accent) 0%,
        var(--accent) 60%,
        rgba(255, 23, 68, 0.2) 100%);
    border-radius: 2px;
}

.timeline-event {
    position: relative;
    padding-bottom: 24px;
}

.timeline-event:last-child { padding-bottom: 0; }

.timeline-dot {
    position: absolute;
    left: -28px;
    top: 16px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
        0 0 0 4px rgba(255, 23, 68, 0.12),
        0 0 12px rgba(255, 23, 68, 0.5);
    z-index: 1;
}

.timeline-event--now .timeline-dot {
    background: white;
    border: 2.5px solid var(--accent);
    box-shadow:
        0 0 0 3px rgba(255, 23, 68, 0.18),
        0 0 14px rgba(255, 23, 68, 0.5);
    animation: timelineNow 2.4s ease-in-out infinite;
}

@keyframes timelineNow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 23, 68, 0.18), 0 0 14px rgba(255, 23, 68, 0.5); }
    50% { box-shadow: 0 0 0 5px rgba(255, 23, 68, 0.12), 0 0 18px rgba(255, 23, 68, 0.7); }
}

.timeline-card {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    transition: transform 0.4s var(--ease-spring), box-shadow 0.3s var(--ease-out), border-color 0.2s var(--ease);
}

.timeline-card:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(255, 23, 68, 0.2);
}

.timeline-time {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.timeline-card h4 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.25;
}

.timeline-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}


/* === Black hole visualization === */
.cosmos-blackhole {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 96px;
    padding: 48px 40px;
    background: linear-gradient(135deg, #1d1d1f 0%, #2d2d35 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.cosmos-blackhole::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 50%, rgba(255, 165, 0, 0.08), transparent 50%),
        radial-gradient(circle at 75% 50%, rgba(120, 80, 255, 0.06), transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.blackhole-viz {
    position: relative;
    aspect-ratio: 1;
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
}

.blackhole-accretion {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        #ff6a00 0%, #ffa64d 20%, #ffdd99 35%,
        #ff7733 50%, #cc4400 65%, #6e2200 80%,
        #ff6a00 100%);
    filter: blur(8px);
    transform: scaleY(0.32);
    animation: accretionSpin 12s linear infinite;
    opacity: 0.85;
}

@keyframes accretionSpin {
    to { transform: scaleY(0.32) rotate(360deg); }
}

.blackhole-photon-ring {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 58%, rgba(255, 200, 100, 0.5) 60%, transparent 63%),
        radial-gradient(circle, transparent 56%, rgba(255, 220, 150, 0.4) 58%, transparent 60%);
    filter: blur(1px);
}

.blackhole-core {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, #000 60%, rgba(0, 0, 0, 0.8) 100%);
    box-shadow:
        0 0 40px rgba(255, 165, 0, 0.3),
        0 0 80px rgba(255, 100, 0, 0.15);
}

.blackhole-label {
    position: absolute;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.blackhole-label--accretion { top: 8%; right: -8%; }
.blackhole-label--ring { bottom: 22%; left: -12%; }
.blackhole-label--horizon { top: 44%; right: 50%; transform: translateX(50%); color: rgba(255, 165, 0, 0.95); }

.blackhole-content {
    color: white;
}

.blackhole-lead {
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 28px;
    font-weight: 400;
    letter-spacing: -0.005em;
}

.blackhole-facts {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.blackhole-fact {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto auto;
    gap: 0 18px;
    align-items: baseline;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blackhole-fact:first-child { border-top: none; padding-top: 0; }

.blackhole-fact-num {
    grid-row: 1 / 3;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #ffa64d;
    font-variant-numeric: tabular-nums;
}

.blackhole-fact-label {
    font-size: 14.5px;
    font-weight: 700;
    color: white;
}

.blackhole-fact-desc {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
}

/* === Relativity === */
.cosmos-relativity {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 36px;
    margin-bottom: 96px;
}

.relativity-equation {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 36px 32px 0;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    grid-template-areas:
        "equation equation"
        "legend   legend"
        "einstein meaning";
    grid-template-rows: auto auto 1fr;
    column-gap: 20px;
    row-gap: 18px;
    min-height: 480px;
    align-items: start;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.relativity-equation::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 60% 25%, rgba(255, 23, 68, 0.09), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.equation-main {
    grid-area: equation;
    font-family: 'Inter', sans-serif;
    font-size: clamp(60px, 8vw, 100px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.95;
    color: var(--accent);
    font-style: italic;
    text-align: left;
}

.equation-main sup {
    font-size: 0.55em;
    font-weight: 800;
    margin-left: -0.05em;
    vertical-align: super;
    top: -0.4em;
}

.equation-key {
    grid-area: legend;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.equation-key > div {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.equation-key span {
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    color: var(--accent);
}

/* Einstein portrait — BIG, anchored bottom-left, extends from below legend to bottom of card, cropped from left edge */
.einstein-portrait {
    grid-area: einstein;
    margin: 0;
    align-self: stretch;
    position: relative;
    z-index: 1;
    margin-left: -32px;
    margin-bottom: -2px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    /* Negative margin pulls the photo past the card's left edge — card has overflow:hidden so it clips */
}

.einstein-portrait img {
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
    filter: grayscale(0.1) contrast(1.05) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.22));
    transition: filter 0.4s var(--ease), transform 0.6s var(--ease-spring);
}

.einstein-portrait:hover img {
    filter: grayscale(0) contrast(1.1) drop-shadow(0 18px 32px rgba(255, 23, 68, 0.22));
    transform: translateY(-3px);
}

/* Right column — quote + description */
.equation-meaning {
    grid-area: meaning;
    align-self: center;
    padding-bottom: 32px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.einstein-quote {
    position: relative;
    margin: 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--accent);
}

.einstein-quote p {
    font-size: clamp(15px, 1.35vw, 17.5px);
    font-weight: 500;
    font-style: italic;
    line-height: 1.45;
    color: var(--text);
    letter-spacing: -0.005em;
    margin: 0 0 8px;
}

.einstein-quote footer {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.equation-author {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}

.equation-year {
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.equation-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* On narrow screens stack vertically */
@media (max-width: 600px) {
    .relativity-equation {
        grid-template-columns: 1fr;
        grid-template-areas:
            "equation"
            "legend"
            "meaning"
            "einstein";
        min-height: 0;
        padding: 32px 24px 0;
        text-align: center;
    }
    .equation-main { text-align: center; }
    .equation-key { justify-content: center; }
    .equation-meaning {
        align-self: auto;
        padding-bottom: 8px;
        text-align: left;
    }
    .einstein-quote {
        text-align: left;
    }
    .einstein-portrait {
        margin-left: 0;
        align-self: center;
        overflow: visible;
    }
    .einstein-portrait img {
        max-width: 220px;
        margin: 0 auto;
    }
}

.relativity-effects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.relativity-effect {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.4s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}

.relativity-effect:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

.relativity-num {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.relativity-effect h4 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.relativity-effect p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* === Cool facts === */
.cosmos-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.cosmos-fact {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.4s var(--ease-spring), box-shadow 0.3s var(--ease-out), border-color 0.25s var(--ease);
    position: relative;
    overflow: hidden;
}

.cosmos-fact:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 23, 68, 0.18);
}

.cosmos-fact-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 12px;
    margin-bottom: 8px;
    flex-shrink: 0;
    transition: transform 0.4s var(--ease-spring), background 0.3s var(--ease), color 0.3s var(--ease);
}

.cosmos-fact-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.cosmos-fact:hover .cosmos-fact-icon {
    background: var(--accent);
    color: white;
    transform: scale(1.06) rotate(-4deg);
}

/* === Quantum entanglement card — dark contrast === */
.cosmos-fact--quantum {
    grid-column: span 2;
    background: linear-gradient(135deg, #15151a 0%, #1f1a2a 60%, #2a1a35 100%);
    border: 1px solid rgba(168, 123, 255, 0.18);
    color: white;
    overflow: hidden;
    isolation: isolate;
    padding: 28px 28px 26px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 22px;
    align-items: center;
}

.cosmos-fact--quantum::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 80% at 20% 50%, rgba(255, 85, 119, 0.18), transparent 70%),
        radial-gradient(ellipse 50% 70% at 80% 50%, rgba(168, 123, 255, 0.18), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.cosmos-fact--quantum:hover {
    border-color: rgba(168, 123, 255, 0.4);
    box-shadow:
        0 22px 50px rgba(15, 10, 30, 0.4),
        0 0 60px rgba(168, 123, 255, 0.12);
}

.quantum-viz {
    position: relative;
    width: 100%;
    aspect-ratio: 200 / 110;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(168, 123, 255, 0.18);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.quantum-viz svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.quantum-wave {
    filter: drop-shadow(0 0 6px rgba(255, 85, 119, 0.45));
}

/* Two entangled particles */
.quantum-particle {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.quantum-particle--a {
    left: 14%;
    background: radial-gradient(circle at 35% 35%, #ffb6c8, #ff5577 60%, #cc1f3f 100%);
    box-shadow:
        0 0 0 2px rgba(255, 85, 119, 0.25),
        0 0 18px rgba(255, 85, 119, 0.7),
        0 0 30px rgba(255, 85, 119, 0.4);
    animation: quantumPulseA 3s ease-in-out infinite;
}

.quantum-particle--b {
    left: 86%;
    background: radial-gradient(circle at 35% 35%, #d2b6ff, #a87bff 60%, #5c2fcc 100%);
    box-shadow:
        0 0 0 2px rgba(168, 123, 255, 0.25),
        0 0 18px rgba(168, 123, 255, 0.7),
        0 0 30px rgba(168, 123, 255, 0.4);
    animation: quantumPulseB 3s ease-in-out infinite;
    animation-delay: -1.5s;
}

@keyframes quantumPulseA {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, calc(-50% - 8px)) scale(1.15); }
}

@keyframes quantumPulseB {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, calc(-50% + 8px)) scale(1.15); }
}

/* Dashed link between particles — visualizes the "spooky" connection */
.quantum-link {
    position: absolute;
    top: 50%;
    left: 14%;
    right: 14%;
    height: 1px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.45) 0 6px,
        transparent 6px 14px
    );
    animation: quantumLink 2s linear infinite;
    z-index: 1;
}

@keyframes quantumLink {
    from { background-position: 0 0; }
    to { background-position: 28px 0; }
}

.quantum-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quantum-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(168, 123, 255, 0.95);
    margin-bottom: 4px;
}

.quantum-eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: linear-gradient(to right, #ff5577, #a87bff);
    border-radius: 2px;
}

.cosmos-fact.cosmos-fact--quantum h4 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-bottom: 6px;
}

.cosmos-fact.cosmos-fact--quantum p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.55;
}

.cosmos-fact.cosmos-fact--quantum em {
    color: #e0c8ff;
    font-style: italic;
    font-weight: 500;
}

@media (max-width: 720px) {
    .cosmos-fact--quantum {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }
}

.cosmos-fact h4 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    line-height: 1.25;
}

.cosmos-fact p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* === Responsive === */
/* === Card 3D tilt parallax === */
.cosmos-stat,
.timeline-card,
.cosmos-fact,
.relativity-effect {
    transform-style: preserve-3d;
    will-change: transform;
}

.cosmos-stat[data-tilt],
.timeline-card[data-tilt],
.cosmos-fact[data-tilt],
.relativity-effect[data-tilt] {
    transform:
        perspective(800px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg))
        translateY(var(--tilt-lift, 0px));
}

/* === Dilation slider styles === */
.dilation-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right,
        rgba(120, 100, 255, 0.6) 0%,
        rgba(255, 23, 68, 0.85) 50%,
        rgba(180, 120, 255, 0.6) 100%);
    border-radius: 100px;
    outline: none;
    cursor: pointer;
    margin: 6px 0 4px;
}

.dilation-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--accent);
    cursor: grab;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 0 0 4px rgba(255, 23, 68, 0.15);
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}

.dilation-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.4),
        0 0 0 6px rgba(255, 23, 68, 0.2);
}

.dilation-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.dilation-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--accent);
    cursor: grab;
}

.dilation-track-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
}

/* === BLACK HOLE upgrade - spacetime grid + photons === */
.spacetime-grid {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    z-index: 0;
    pointer-events: none;
}

.spacetime-warp {
    animation: spacetimeWarp 40s linear infinite;
    transform-origin: 200px 200px;
}

@keyframes spacetimeWarp {
    to { transform: rotate(360deg); }
}

/* Photons orbiting the black hole */
.photon {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 8px #ffeaa0,
        0 0 14px rgba(255, 200, 100, 0.85),
        0 0 24px rgba(255, 165, 50, 0.5);
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    z-index: 3;
    pointer-events: none;
}

.photon--1 {
    animation: photonOrbit1 3.4s cubic-bezier(0.42, 0.04, 0.58, 0.96) infinite;
}
.photon--2 {
    animation: photonOrbit2 4.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    animation-delay: -1.5s;
}
.photon--3 {
    animation: photonOrbit3 6.2s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
    animation-delay: -2.8s;
}

@keyframes photonOrbit1 {
    from { transform: rotate(0deg) translateX(110px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

@keyframes photonOrbit2 {
    from { transform: rotate(0deg) translateX(140px) rotate(0deg) scaleX(1); }
    to { transform: rotate(-360deg) translateX(140px) rotate(360deg) scaleX(1); }
}

@keyframes photonOrbit3 {
    from { transform: rotate(60deg) translateX(170px) rotate(-60deg); }
    to { transform: rotate(420deg) translateX(170px) rotate(-420deg); }
}

/* === GRAVITY WAVES (inside relativity) === */
.cosmos-relativity {
    position: relative;
    isolation: isolate;
}

.gravity-waves {
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    max-width: 580px;
    aspect-ratio: 1;
    color: rgba(255, 23, 68, 0.45);
    z-index: -1;
    opacity: 0.6;
}

.gravity-waves svg {
    width: 100%;
    height: 100%;
    animation: gravityWaves 5s ease-out infinite;
}

.gravity-waves circle {
    transform-origin: 100px 100px;
}

.gravity-waves circle:nth-child(1) { animation: waveExpand 4s ease-out infinite; animation-delay: 0s; }
.gravity-waves circle:nth-child(2) { animation: waveExpand 4s ease-out infinite; animation-delay: 0.8s; }
.gravity-waves circle:nth-child(3) { animation: waveExpand 4s ease-out infinite; animation-delay: 1.6s; }
.gravity-waves circle:nth-child(4) { animation: waveExpand 4s ease-out infinite; animation-delay: 2.4s; }
.gravity-waves circle:nth-child(5) { animation: waveExpand 4s ease-out infinite; animation-delay: 3.2s; }

@keyframes waveExpand {
    0% { transform: scale(0.4); opacity: 0; }
    20% { opacity: 0.6; }
    100% { transform: scale(2.4); opacity: 0; }
}

@keyframes gravityWaves {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(0.5deg); }
}

/* === TIME DILATION widget === */
.dilation-widget {
    background: linear-gradient(135deg, #15171f 0%, #1d2030 100%);
    border-radius: var(--radius-lg);
    padding: 40px 40px 36px;
    margin-bottom: 96px;
    color: white;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.dilation-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 35% at 50% 0%, rgba(120, 100, 255, 0.15), transparent 70%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(255, 23, 68, 0.1), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.dilation-header {
    text-align: center;
    margin-bottom: 36px;
}

.dilation-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    padding: 5px 14px;
    border: 1px solid rgba(255, 23, 68, 0.25);
    border-radius: 100px;
    background: rgba(255, 23, 68, 0.06);
}

.dilation-header h4 {
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    max-width: 640px;
    margin: 0 auto;
}

.dilation-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.dilation-clocks {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
}

.dilation-clock {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.4s ease, transform 0.4s var(--ease-spring);
}

.dilation-clock--earth { border-color: rgba(120, 180, 255, 0.25); }
.dilation-clock--ship { border-color: rgba(255, 23, 68, 0.3); }

.dilation-clock-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.dilation-clock-value {
    font-size: clamp(34px, 4.5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dilation-clock--earth .dilation-clock-value {
    background: linear-gradient(135deg, #fff 0%, #6ea8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dilation-clock--ship .dilation-clock-value {
    background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dilation-clock-unit {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
}

.dilation-arrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

.dilation-control {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dilation-readout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 4px;
}

.dilation-readout > div {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dilation-readout-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.dilation-readout-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: white;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.dilation-readout-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
}

.dilation-explain {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    min-height: 40px;
    margin-top: 4px;
}

/* === BRIAN COX showcase - content INSIDE the image, in the empty space === */
.cox-showcase {
    margin-top: 96px;
    position: relative;
    width: 100%;
    aspect-ratio: 1547 / 600;
    isolation: isolate;
}

.cox-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.cox-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.08));
}

/* Content floats in the empty space to the right of where Cox points */
.cox-content {
    position: absolute;
    top: 8%;
    left: 36%;
    right: 4%;
    bottom: 14%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    z-index: 1;
}

.cox-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.cox-eyebrow::before {
    content: '';
    width: 30px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.cox-content h3 {
    font-size: clamp(26px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
    margin: 0;
}

.cox-lead {
    font-size: clamp(13.5px, 1.15vw, 16px);
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0;
}

.cox-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 580px;
    margin-top: 2px;
}

.cox-stat {
    background: var(--glass-bg);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.cox-stat-num {
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.01em;
    line-height: 1;
}

.cox-stat-label {
    font-size: clamp(9.5px, 0.75vw, 11px);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    line-height: 1.3;
}

.cox-why {
    font-size: clamp(12.5px, 1.05vw, 14.5px);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0;
}

.cox-why em {
    color: var(--text);
    font-style: italic;
    font-weight: 500;
}

/* === COSMIC VIDEO - lite-youtube embed === */
.cosmic-video {
    margin-top: 24px;
    margin-bottom: 16px;
}

.cosmic-video-player {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: #000;
    border: 0;
    padding: 0;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 28px 60px rgba(0, 0, 0, 0.25),
        0 8px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.6s var(--ease-spring), box-shadow 0.5s var(--ease-out);
}

.cosmic-video-player:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 40px 80px rgba(0, 0, 0, 0.3),
        0 14px 24px rgba(0, 0, 0, 0.12);
}

.cosmic-video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.75) saturate(1.05) contrast(1.05);
    transition: transform 0.8s var(--ease-out), filter 0.5s var(--ease);
}

.cosmic-video-player:hover .cosmic-video-thumb {
    transform: scale(1.04);
    filter: brightness(0.85) saturate(1.15);
}

.cosmic-video-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 50% 60%, transparent 30%, rgba(0, 0, 0, 0.55) 90%),
        linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
    z-index: 1;
}

.cosmic-video-meta {
    position: absolute;
    left: clamp(20px, 4vw, 44px);
    right: clamp(20px, 4vw, 44px);
    bottom: clamp(20px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
    color: white;
    text-align: left;
    pointer-events: none;
}

.cosmic-video-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.cosmic-video-title {
    font-size: clamp(28px, 4.2vw, 52px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: white;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.cosmic-video-sub {
    font-size: clamp(13.5px, 1.4vw, 16px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.01em;
    line-height: 1.4;
    font-style: italic;
}

.cosmic-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(70px, 8vw, 100px);
    height: clamp(70px, 8vw, 100px);
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
    transition: transform 0.4s var(--ease-spring), filter 0.3s var(--ease);
}

.cosmic-video-play svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cosmic-video-player:hover .cosmic-video-play {
    transform: translate(-50%, -50%) scale(1.1);
    filter: drop-shadow(0 12px 32px rgba(255, 23, 68, 0.5));
}

.cosmic-video-player:hover .cosmic-video-play circle {
    fill: var(--accent);
    stroke: rgba(255, 255, 255, 0.7);
}

.cosmic-video-player .cosmic-video-play circle,
.cosmic-video-player .cosmic-video-play path {
    transition: fill 0.3s var(--ease), stroke 0.3s var(--ease);
}

.cosmic-video-note {
    margin: 18px auto 0;
    max-width: 720px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    font-style: italic;
}

/* Loading state when YouTube iframe replaces player */
.cosmic-video-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.25),
        0 8px 18px rgba(0, 0, 0, 0.1);
    display: block;
    background: #000;
}

/* === Responsive overrides === */
@media (max-width: 1100px) {
    .cosmos-stats { grid-template-columns: repeat(3, 1fr); }
    .cosmos-blackhole { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; }
    .blackhole-viz { max-width: 320px; }
    .cosmos-relativity { grid-template-columns: 1fr; }
    .dilation-body { grid-template-columns: 1fr; gap: 28px; }
    /* Cox shrinks well - keep overlay but tighter padding */
    .cox-content { top: 6%; left: 38%; right: 3%; bottom: 10%; gap: 8px; }
    .cox-stats { gap: 6px; }
    .cox-stat { padding: 8px 10px; }
}

@media (max-width: 640px) {
    .cosmos-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cosmos-stat { padding: 22px 18px 20px; }
    .cosmos-stat-num { font-size: 30px; }
    .relativity-effects { grid-template-columns: 1fr; }
    .equation-main { font-size: 64px; }
    .timeline-card { padding: 14px 16px; }
    .timeline-card h4 { font-size: 15.5px; }
    .dilation-widget { padding: 28px 22px; }
    .dilation-clocks { grid-template-columns: 1fr; }
    .dilation-arrow { transform: rotate(90deg); }
    .dilation-readout { grid-template-columns: 1fr; }
    /* On mobile: stop using overlay - stack content under the image */
    .cox-showcase {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .cox-image {
        position: relative;
        inset: auto;
        aspect-ratio: 1547 / 600;
    }
    .cox-content {
        position: relative;
        inset: auto;
        gap: 12px;
        padding: 0 4px;
    }
    .cox-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .cox-stat { padding: 10px 8px; }
}

/* ============================================
   MY HERO (Carl Sagan)
   ============================================ */
.hero-section {
    position: relative;
}

.hero-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    background: linear-gradient(135deg, #0a0a0f 0%, #15151c 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.hero-card-image {
    position: relative;
    overflow: hidden;
    min-height: 600px;
}

.hero-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.05) brightness(0.95);
    transition: transform 1.2s var(--ease-out);
}

.hero-card:hover .hero-card-image img {
    transform: scale(1.04);
}

.hero-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        transparent 60%,
        rgba(10, 10, 15, 0.5) 90%,
        rgba(10, 10, 15, 0.85) 100%
    );
    pointer-events: none;
}

.hero-card-image-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 36px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 70%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

.hero-card-years {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-card-name {
    font-size: 22px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.hero-card-content {
    padding: 48px 48px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Quote */
.hero-quote {
    position: relative;
    padding-left: 24px;
    border-left: 3px solid;
    border-image: linear-gradient(to bottom, #c77dff, #0077b6) 1;
}

.hero-quote p {
    font-size: 19px;
    line-height: 1.55;
    color: white;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0 0 14px 0;
}

.hero-quote footer {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.hero-quote footer cite {
    font-style: italic;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

/* Achievements */
.hero-achievements h3 {
    font-size: 13px;
    font-weight: 700;
    color: rgba(199, 125, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 22px;
}

.hero-achievement-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hero-achievement {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.hero-achievement-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(199, 125, 255, 0.15), rgba(0, 119, 182, 0.1));
    border: 1px solid rgba(199, 125, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c77dff;
    transition: all 0.3s var(--ease);
}

.hero-achievement-icon svg {
    width: 18px;
    height: 18px;
}

.hero-achievement:hover .hero-achievement-icon {
    background: linear-gradient(135deg, rgba(199, 125, 255, 0.25), rgba(0, 119, 182, 0.2));
    transform: scale(1.05);
}

.hero-achievement h4 {
    font-size: 15px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.hero-achievement p {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* Impact text */
.hero-impact {
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(199, 125, 255, 0.06), rgba(0, 119, 182, 0.04));
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-impact p {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    font-style: italic;
}

/* ============================================
   FOOTBALL
   ============================================ */
.football-hero {
    border-radius: var(--radius-lg);
    padding: 48px;
    text-align: left;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    background: #0a0c12;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
    align-items: center;
    isolation: isolate;
}

/* === Pedri background photo (cinematic) === */
.football-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.football-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% center;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    filter: saturate(1.08);
}

.football-hero:hover .football-hero-bg img {
    transform: scale(1.04);
}

/* Dark gradient overlay for legibility */
.football-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(95deg, rgba(10, 12, 18, 0.92) 0%, rgba(10, 12, 18, 0.7) 38%, rgba(10, 12, 18, 0.2) 70%, transparent 100%),
        linear-gradient(to top, rgba(10, 12, 18, 0.7) 0%, transparent 50%);
    z-index: 1;
}

/* Soft Barca color tint */
.football-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 40%, rgba(165, 0, 68, 0.28) 0%, transparent 50%),
                radial-gradient(circle at 80% 60%, rgba(0, 77, 152, 0.22) 0%, transparent 55%);
    z-index: 1;
    mix-blend-mode: overlay;
}

.football-main {
    position: relative;
    z-index: 1;
}

.football-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.85;
    margin-bottom: 14px;
}

/* === Barcelona live rank badge === */
.football-rank {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    margin-bottom: 18px;
    transition: all 0.3s var(--ease);
}

.football-rank:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.football-rank-position {
    font-size: 22px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.football-rank-position::before {
    content: '#';
    font-size: 15px;
    opacity: 0.7;
    margin-right: 1px;
    font-weight: 700;
}

.football-rank-position.loading::before {
    content: '';
}

.football-rank-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.football-club {
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
    line-height: 1.05;
}

.football-main p {
    font-size: 16px;
    opacity: 0.9;
    max-width: 500px;
    font-style: italic;
}

/* === Barcelona Live Feed === */
.barca-feed {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 20px;
}

.barca-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.barca-feed-pulse {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
    animation: pulseDot 2s ease-out infinite;
}

@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

.barca-feed-source {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s var(--ease);
}

.barca-feed-source:hover {
    color: white;
}

.barca-feed-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.barca-feed-list::-webkit-scrollbar {
    width: 4px;
}

.barca-feed-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.barca-feed-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.barca-feed-item {
    display: block;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    text-decoration: none;
    color: white;
    transition: all 0.25s var(--ease);
    border: 1px solid transparent;
    animation: feedItemAppear 0.5s var(--ease-out) both;
}

@keyframes feedItemAppear {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.barca-feed-item:nth-child(1) { animation-delay: 0s; }
.barca-feed-item:nth-child(2) { animation-delay: 0.08s; }
.barca-feed-item:nth-child(3) { animation-delay: 0.16s; }
.barca-feed-item:nth-child(4) { animation-delay: 0.24s; }
.barca-feed-item:nth-child(5) { animation-delay: 0.32s; }

.barca-feed-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(2px);
}

.barca-feed-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 4px;
    color: white;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.barca-feed-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02em;
}

.barca-feed-loading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.barca-feed-skeleton {
    height: 48px;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.12) 50%, 
        rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    border-radius: 10px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.barca-feed-error {
    text-align: center;
    padding: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.football-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.football-card {
    padding: 56px 24px 28px;
    border-radius: var(--radius-md);
    transition: all 0.3s var(--ease-out);
    position: relative;
    overflow: hidden;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.football-card-crest {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 64px;
    height: 64px;
    pointer-events: none;
    opacity: 0.85;
    transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.15));
    z-index: 0;
}

.football-card-crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.football-card:hover .football-card-crest {
    transform: scale(1.06) rotate(-3deg);
    opacity: 1;
}

.football-card:hover {
    transform: translateY(-4px);
    background: var(--glass-bg-hover);
    box-shadow: var(--glass-shadow-hover);
}

.football-card h4 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
    max-width: 70%;
}

.football-card p {
    font-size: 13.5px;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
    max-width: 78%;
}

/* === Team rank badge === */
.team-rank {
    position: absolute;
    top: 20px;
    left: 22px;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 100px;
}

.rank-position {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1;
}

.rank-position::before {
    content: '#';
    font-size: 13px;
    opacity: 0.6;
    margin-right: 1px;
}

.rank-position.loading::before {
    content: '';
}

.rank-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* === Standings tables === */
.standings-wrapper {
    margin-top: 40px;
}

.standings-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.standings-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s var(--ease);
}

.standings-tab:hover {
    background: var(--glass-bg-hover);
    color: var(--text);
}

.standings-tab.active {
    background: var(--text);
    color: white;
    border-color: var(--text);
}

.standings-tab.active .tab-dot {
    background: #4ade80;
}

.tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary);
    transition: all 0.3s var(--ease);
}

.standings-tab.active .tab-dot {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: pulseDot 2s ease-out infinite;
}

.standings-content {
    border-radius: var(--radius-md);
    padding: 20px;
    overflow: hidden;
}

.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.standings-table thead {
    background: rgba(0, 0, 0, 0.03);
}

.standings-table th {
    text-align: left;
    padding: 12px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border);
}

.standings-table th.num {
    text-align: center;
}

.standings-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--text-secondary);
}

.standings-table td.num {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.standings-table tr:last-child td {
    border-bottom: none;
}

.standings-table tr {
    transition: background 0.2s var(--ease);
}

.standings-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

.standings-table tr.highlighted {
    background: var(--accent-soft);
}

.standings-table tr.highlighted:hover {
    background: rgba(255, 23, 68, 0.15);
}

.standings-table tr.highlighted td {
    color: var(--text);
    font-weight: 600;
}

.standings-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
}

.standings-rank.top {
    background: var(--accent-soft);
    color: var(--accent);
}

.standings-rank.bottom {
    background: rgba(0, 0, 0, 0.05);
}

.standings-team {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text);
}

.standings-team-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.standings-team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standings-points {
    font-weight: 700;
    color: var(--text);
}

.standings-loading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.standings-skeleton {
    height: 40px;
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.03) 0%, 
        rgba(0, 0, 0, 0.06) 50%, 
        rgba(0, 0, 0, 0.03) 100%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.standings-error {
    text-align: center;
    padding: 32px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.standings-source {
    text-align: right;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 12px;
}

.standings-source a {
    color: inherit;
    text-decoration: none;
}

.standings-source a:hover {
    color: var(--accent);
}

/* ============================================
   WORLD CUP 2026
   ============================================ */
.worldcup-section {
    position: relative;
}

.worldcup-label {
    color: #d4a017;
    background: linear-gradient(135deg, #d4a017, #e8b53d);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Football → World Cup subsection divider */
.football-wc-divider {
    margin: 96px 0 32px;
    text-align: center;
    position: relative;
    padding-top: 48px;
}

.football-wc-divider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.6), transparent);
}

.football-wc-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #d4a017, #e8b53d);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}

.football-wc-title {
    font-size: clamp(32px, 4.2vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--text);
}

.football-wc-lead {
    max-width: 720px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .football-wc-divider {
        margin-top: 64px;
        padding-top: 32px;
    }
    .football-wc-lead {
        font-size: 15px;
    }
}

/* === HERO with Yamal === */
.wc-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 580px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #0d2818 0%, #1a3a2a 30%, #0d2818 70%, #08160e 100%);
    border: 1px solid rgba(212, 160, 23, 0.18);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.wc-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Decorative pattern - diagonal stripes */
.wc-hero-pattern {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 60px,
            rgba(212, 160, 23, 0.025) 60px,
            rgba(212, 160, 23, 0.025) 61px
        );
    opacity: 0.7;
}

/* Glow behind Yamal */
.wc-hero-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(212, 160, 23, 0.18) 0%, transparent 65%);
    pointer-events: none;
}

/* Spain crest - vpravo nahoře jako pocta */
.wc-hero-crest {
    position: absolute;
    top: -3%;
    right: -4%;
    width: 420px;
    height: auto;
    z-index: 1;
    opacity: 0.5;
    filter: drop-shadow(0 8px 30px rgba(212, 160, 23, 0.4));
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    pointer-events: none;
}

.wc-hero:hover .wc-hero-crest {
    opacity: 0.65;
    transform: scale(1.04) rotate(-2deg);
}

.wc-hero-player {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -10%;
    width: 78%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 62%;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.6));
    z-index: 2;
    transition: transform 1s var(--ease-out);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 1) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 1) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;
}

.wc-hero:hover .wc-hero-player {
    transform: translateY(-8px) scale(1.02);
}

/* Hero content */
.wc-hero-content {
    position: relative;
    z-index: 3;
    padding: 48px 48px;
    color: white;
    max-width: 540px;
}

.wc-hero-top {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 36px;
}

.wc-hero-logo {
    width: 80px;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 20px rgba(212, 160, 23, 0.35));
}

.wc-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wc-hero-tagline {
    font-size: 18px;
    font-weight: 700;
    color: #d4a017;
    letter-spacing: 0.02em;
}

.wc-hero-host {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
}

/* Countdown */
.wc-countdown {
    margin-bottom: 32px;
}

.wc-countdown-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(212, 160, 23, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 18px;
}

.wc-countdown-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d4a017;
    box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.7);
    animation: wcPulse 2s ease-out infinite;
}

@keyframes wcPulse {
    0% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(212, 160, 23, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}

.wc-countdown-grid {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.wc-count-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 160, 23, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-width: 76px;
}

.wc-count-num {
    font-size: 32px;
    font-weight: 800;
    color: white;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    margin-bottom: 4px;
    text-shadow: 0 2px 12px rgba(212, 160, 23, 0.4);
}

.wc-count-text {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.wc-count-divider {
    font-size: 28px;
    font-weight: 800;
    color: rgba(212, 160, 23, 0.4);
    line-height: 1;
    margin-bottom: 16px;
}

.wc-countdown-footer {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
}

.wc-countdown-footer strong {
    color: white;
    font-weight: 600;
}

/* Hero quote */
.wc-hero-quote {
    padding: 18px 22px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid #d4a017;
    border-radius: 0 12px 12px 0;
    position: relative;
}

.wc-hero-quote-mark {
    position: absolute;
    top: -8px;
    left: 10px;
    font-size: 60px;
    font-weight: 900;
    color: rgba(212, 160, 23, 0.18);
    line-height: 1;
    font-family: Georgia, serif;
    pointer-events: none;
}

.wc-hero-quote p {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    font-style: italic;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* === Host venues === */
.wc-venues {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(212, 160, 23, 0.15);
}

.wc-venues-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(212, 160, 23, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 14px;
}

.wc-venues-label svg {
    width: 14px;
    height: 14px;
}

.wc-venues-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wc-venue {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 160, 23, 0.12);
    border-radius: 10px;
    transition: all 0.3s var(--ease);
}

.wc-venue:hover {
    background: rgba(212, 160, 23, 0.08);
    border-color: rgba(212, 160, 23, 0.3);
    transform: translateX(4px);
}

.wc-venue-flag {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.wc-venue-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wc-venue-name {
    font-size: 13.5px;
    font-weight: 600;
    color: white;
    letter-spacing: -0.005em;
}

.wc-venue-city {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.wc-venue-tag {
    font-size: 10px;
    font-weight: 700;
    color: rgba(212, 160, 23, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 4px 8px;
    background: rgba(212, 160, 23, 0.1);
    border: 1px solid rgba(212, 160, 23, 0.25);
    border-radius: 100px;
    flex-shrink: 0;
}

.wc-venue-tag--final {
    color: #ffd700;
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.2), rgba(255, 215, 0, 0.15));
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 12px rgba(212, 160, 23, 0.2);
}

/* === Stats === */
.wc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.wc-stat {
    padding: 28px 24px;
    border-radius: var(--radius-md);
    transition: all 0.4s var(--ease-out);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.wc-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4a017, transparent);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.wc-stat:hover {
    transform: translateY(-6px);
    background: var(--glass-bg-hover);
    box-shadow: var(--glass-shadow-hover);
}

.wc-stat:hover::after {
    opacity: 1;
}

.wc-stat-num {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, #d4a017 0%, #f0c75e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 8px;
}

.wc-stat-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}

.wc-stat-desc {
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* === Two column grid === */
.wc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.wc-favorites,
.wc-news {
    padding: 28px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
}

.wc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.wc-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex-shrink: 0;
}

.wc-card-icon svg {
    width: 16px;
    height: 16px;
}

.wc-card-icon--star {
    background: rgba(212, 160, 23, 0.12);
    color: #d4a017;
}

.wc-card-icon--news {
    background: var(--accent-soft);
    color: var(--accent);
}

.wc-card-header h3 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex: 1;
}

/* === Favorites === */
.wc-fav-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wc-fav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all 0.3s var(--ease);
}

.wc-fav-item:hover {
    background: rgba(212, 160, 23, 0.06);
    border-color: rgba(212, 160, 23, 0.25);
    transform: translateX(4px);
}

.wc-fav-flag {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.wc-fav-body {
    flex: 1;
    min-width: 0;
}

.wc-fav-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.wc-fav-desc {
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.45;
}

.wc-fav-rank {
    font-size: 13px;
    font-weight: 700;
    color: #d4a017;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    padding: 4px 10px;
    background: rgba(212, 160, 23, 0.12);
    border-radius: 100px;
}

/* === News === */
.wc-news-pulse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.wc-news-pulse span:first-child {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-glow);
    animation: wcPulseRed 2s ease-out infinite;
}

@keyframes wcPulseRed {
    0% { box-shadow: 0 0 0 0 var(--accent-glow); }
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.wc-news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.wc-news-item {
    display: block;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s var(--ease);
}

.wc-news-item:hover {
    background: var(--accent-soft);
    border-color: rgba(255, 23, 68, 0.2);
    transform: translateX(4px);
}

.wc-news-item-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
    color: var(--text);
    letter-spacing: -0.005em;
}

.wc-news-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-tertiary);
}

.wc-news-item-meta::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-quaternary);
    flex-shrink: 0;
}

.wc-news-loading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wc-news-skeleton {
    height: 56px;
    background: linear-gradient(90deg, var(--border) 0%, rgba(0, 0, 0, 0.05) 50%, var(--border) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeletonShine 1.5s ease-in-out infinite;
}

@keyframes skeletonShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === WC Groups === */
.wc-groups-wrapper {
    margin-top: 32px;
}

.wc-groups-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 16px 4px;
    flex-wrap: wrap;
    gap: 12px;
}

.wc-groups-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wc-groups-title h3 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.wc-groups-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.wc-groups-source {
    color: rgba(212, 160, 23, 0.85);
}

.wc-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.wc-group {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

.wc-group:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-hover);
    border-color: rgba(212, 160, 23, 0.25);
}

.wc-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.wc-group:hover::before {
    opacity: 1;
}

.wc-group-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.wc-group-name {
    font-size: 11px;
    font-weight: 700;
    color: rgba(212, 160, 23, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.wc-group-letter {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #d4a017, #f0c75e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    line-height: 1;
}

.wc-group-teams {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wc-team {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: all 0.2s var(--ease);
}

.wc-team:hover {
    background: rgba(0, 0, 0, 0.03);
}

.wc-team-flag {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.wc-team-flag.no-flag {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-quaternary);
    opacity: 0.4;
}

.wc-team-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    flex: 1;
    letter-spacing: -0.005em;
}

/* Highlight Česko */
.wc-team.highlighted {
    background: linear-gradient(90deg, rgba(255, 23, 68, 0.1), rgba(11, 0, 156, 0.06));
    border-left: 2px solid var(--accent);
    padding-left: 10px;
    position: relative;
}

.wc-team.highlighted .wc-team-name {
    font-weight: 700;
    color: var(--accent);
}

.wc-team.highlighted::after {
    content: '🇨🇿';
    font-size: 14px;
    margin-left: auto;
    filter: drop-shadow(0 1px 3px rgba(255, 23, 68, 0.3));
}

/* Highlight favorites */
.wc-team.favorite {
    background: linear-gradient(90deg, rgba(212, 160, 23, 0.08), transparent);
}

.wc-team.favorite .wc-team-name {
    font-weight: 600;
}

.wc-team.favorite::after {
    content: '★';
    color: #d4a017;
    font-size: 14px;
    margin-left: auto;
    filter: drop-shadow(0 1px 3px rgba(212, 160, 23, 0.4));
}

/* Loading skeletons */
.wc-groups-loading {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    grid-column: 1 / -1;
}

.wc-group-skeleton {
    height: 200px;
    background: linear-gradient(90deg, var(--border) 0%, rgba(0, 0, 0, 0.05) 50%, var(--border) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    animation: skeletonShine 1.5s ease-in-out infinite;
}

/* ============================================
   SOCIAL CARDS
   ============================================ */
.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.social-card {
    padding: 32px 24px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text);
    transition: 
        background 0.3s var(--ease),
        box-shadow 0.4s var(--ease-out),
        transform 0.5s var(--ease-spring);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.social-card:hover {
    transform: translateY(-8px) scale(1.02);
    background: var(--glass-bg-hover);
    box-shadow: var(--glass-shadow-hover);
}

.social-card:active {
    transform: translateY(-2px) scale(0.99);
    transition: transform 0.15s var(--ease);
}

.social-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 12px;
    margin-bottom: 18px;
    transition: 
        background 0.3s var(--ease),
        color 0.3s var(--ease),
        transform 0.5s var(--ease-spring),
        box-shadow 0.3s var(--ease);
}

.social-card:hover .social-icon {
    background: var(--accent);
    color: white;
    transform: scale(1.12) rotate(-3deg);
    box-shadow: 0 8px 24px var(--accent-glow);
}

.social-icon svg {
    width: 22px;
    height: 22px;
}

.social-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.social-card p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* === Primární karta (email) - vyniká === */
.social-card--primary {
    background: linear-gradient(135deg, var(--accent), #ff4d6d);
    color: white;
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    border-color: transparent;
    position: relative;
    overflow: hidden;
}

.social-card--primary::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.social-card--primary .social-icon {
    background: rgba(255, 255, 255, 0.18);
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin-bottom: 0;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.social-card--primary .social-icon svg {
    width: 28px;
    height: 28px;
}

.social-card--primary h3 {
    color: white;
    font-size: 20px;
    margin-bottom: 4px;
}

.social-card--primary p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.social-card--primary:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px var(--accent-glow);
    background: linear-gradient(135deg, #ff2d5a, #ff4d6d);
}

.social-card--primary:hover .social-icon {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
    box-shadow: none;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    padding: 48px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
}

.footer-logo img {
    width: 28px;
    height: 28px;
}

.footer-text {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */
.scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glass-shadow);
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    pointer-events: none;
    transition: all 0.4s var(--ease-spring);
    z-index: 100;
}

.scroll-top svg {
    width: 18px;
    height: 18px;
    transition: transform var(--duration-base) var(--ease);
}

.scroll-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.scroll-top:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    box-shadow: 0 12px 32px var(--accent-glow);
    transform: translateY(-3px) scale(1.05);
}

.scroll-top:hover svg {
    transform: translateY(-2px);
}

.scroll-top:active {
    transform: translateY(-1px) scale(0.98);
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
/* Apple-style spring bounce pop reveal */
.reveal {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    transition: 
        opacity 0.6s var(--ease-out),
        transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cards-grid .reveal:nth-child(1) { transition-delay: 0s; }
.cards-grid .reveal:nth-child(2) { transition-delay: 0.05s; }
.cards-grid .reveal:nth-child(3) { transition-delay: 0.1s; }
.cards-grid .reveal:nth-child(4) { transition-delay: 0.15s; }
.cards-grid .reveal:nth-child(5) { transition-delay: 0.2s; }
.cards-grid .reveal:nth-child(6) { transition-delay: 0.25s; }
.cards-grid .reveal:nth-child(7) { transition-delay: 0.3s; }
.cards-grid .reveal:nth-child(8) { transition-delay: 0.35s; }
.cards-grid .reveal:nth-child(9) { transition-delay: 0.4s; }

.gaming-grid .reveal:nth-child(1) { transition-delay: 0s; }
.gaming-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.gaming-grid .reveal:nth-child(3) { transition-delay: 0.2s; }

.movies-grid .reveal:nth-child(n+1) { transition-delay: 0s; }
.movies-grid .reveal:nth-child(n+2) { transition-delay: 0.04s; }
.movies-grid .reveal:nth-child(n+3) { transition-delay: 0.08s; }
.movies-grid .reveal:nth-child(n+4) { transition-delay: 0.12s; }
.movies-grid .reveal:nth-child(n+5) { transition-delay: 0.16s; }

.social-grid .reveal:nth-child(1) { transition-delay: 0s; }
.social-grid .reveal:nth-child(2) { transition-delay: 0.06s; }
.social-grid .reveal:nth-child(3) { transition-delay: 0.12s; }
.social-grid .reveal:nth-child(4) { transition-delay: 0.18s; }
.social-grid .reveal:nth-child(5) { transition-delay: 0.24s; }
.social-grid .reveal:nth-child(6) { transition-delay: 0.3s; }
.social-grid .reveal:nth-child(7) { transition-delay: 0.36s; }
.social-grid .reveal:nth-child(8) { transition-delay: 0.42s; }
.social-grid .reveal:nth-child(9) { transition-delay: 0.48s; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
    .nav-blur {
        height: 140px;
    }
    
    .navbar {
        max-width: calc(100% - 24px);
    }
    
    .nav-container {
        padding: 0 6px 0 18px;
        gap: 16px;
    }
    
    .nav-links {
        display: none;
    }
    
    .menu-toggle {
        display: flex;
    }
}

@media (max-width: 968px) {
    .section {
        padding: 80px 0;
    }
    
    .movies-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }
    
    .movie-info {
        padding: 14px 14px 16px;
    }
    
    .movie-card h4 {
        font-size: 15px;
    }
    
    .movie-original {
        font-size: 11px;
    }
    
    .movie-desc {
        font-size: 12px;
    }
    
    .movie-meta-tag {
        font-size: 9.5px;
        padding: 2.5px 7px;
    }
    
    .movie-rating {
        font-size: 11px;
        padding: 4px 8px 4px 7px;
        top: 8px;
        right: 8px;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    
    .gaming-grid {
        grid-template-columns: 1fr;
    }

    .top10-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .souls-showcase {
        padding: 48px 32px 40px;
        margin: 48px 0 40px;
    }

    .souls-card,
    .souls-card--reverse {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .souls-card-image,
    .souls-card--reverse .souls-card-image {
        order: 1;
        min-height: 240px;
        aspect-ratio: 16 / 9;
    }

    .souls-card-body,
    .souls-card--reverse .souls-card-body {
        order: 2;
        padding: 32px 28px 30px;
    }

    .souls-card-vignette,
    .souls-card--reverse .souls-card-vignette {
        background:
            radial-gradient(ellipse 90% 80% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.45) 100%),
            linear-gradient(to bottom, transparent 60%, rgba(20, 16, 12, 0.7) 100%);
    }

    .football-grid {
        grid-template-columns: 1fr;
    }
    
    .orb-1, .orb-2, .orb-3, .orb-4 {
        width: 300px;
        height: 300px;
    }

    /* World Cup hero — tablet adjustments */
    .wc-hero-player {
        width: 70%;
        right: -38%;
        opacity: 0.55;
        object-position: 50% 12%;
    }

    .wc-hero-crest {
        width: 300px;
        top: -2%;
        right: -6%;
        opacity: 0.4;
    }
}

@media (max-width: 640px) {
    /* Performance: vypnout animace orbs na mobilu - šetří GPU */
    .gradient-orb {
        animation: none !important;
        opacity: 0.18;
    }
    
    .orb-1 { width: 350px; height: 350px; }
    .orb-2 { width: 400px; height: 400px; }
    .orb-3 { width: 300px; height: 300px; }
    .orb-4 { width: 280px; height: 280px; }
    
    /* Performance: zmenšit blur na mobilu - výrazně rychlejší */
    .nav-blur {
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
    }
    
    .glass,
    .navbar {
        backdrop-filter: blur(10px) saturate(130%);
        -webkit-backdrop-filter: blur(10px) saturate(130%);
    }
    
    .section {
        padding: 64px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .top10-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .top10-rank {
        top: 8px;
        left: 8px;
        height: 26px;
        min-width: 26px;
        padding: 0 8px;
        font-size: 12px;
    }

    .top10-info {
        padding: 12px 14px 14px;
    }

    .top10-info h4 {
        font-size: 13.5px;
    }

    .top10-meta {
        font-size: 11px;
    }

    .souls-showcase {
        padding: 40px 22px 32px;
        border-radius: var(--radius-md);
    }

    .souls-header {
        margin-bottom: 36px;
    }

    .souls-card-body {
        padding: 26px 22px 26px;
        gap: 14px;
    }

    .souls-card-logo {
        height: 52px;
    }

    .souls-card-text {
        font-size: 14.5px;
    }

    .souls-card-image {
        min-height: 200px;
    }

    .souls-quote {
        margin-top: 40px;
        padding-top: 28px;
    }
    
    .football-hero {
        padding: 40px 24px;
        text-align: center;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .football-main p {
        margin: 0 auto;
    }
    
    .football-crest {
        width: 240px;
        height: 240px;
        left: 50%;
        opacity: 0.25;
    }
    
    .barca-feed {
        text-align: left;
    }
    
    .football-card-crest {
        width: 140px;
        height: 140px;
        top: -18%;
        right: -12%;
        opacity: 0.35;
    }
    
    .football-card p {
        max-width: 80%;
    }
    
    /* Standings table - skryjeme méně důležité sloupce na mobilu */
    .standings-table th.hide-mobile,
    .standings-table td.hide-mobile {
        display: none;
    }
    
    .standings-tab {
        padding: 8px 14px;
        font-size: 12.5px;
    }
    
    .team-rank {
        top: 16px;
        left: 18px;
        padding: 5px 10px;
    }
    
    .rank-position {
        font-size: 16px;
    }
    
    .hero-tags {
        gap: 10px;
        padding: 10px 18px;
    }
    
    /* Carl Sagan card na mobilu - stack */
    .hero-card {
        grid-template-columns: 1fr;
    }
    
    /* Music section na mobilu */
    .music-hero {
        min-height: 380px;
    }
    
    .music-hero-content {
        padding: 36px 28px;
    }
    
    .music-hero-logo {
        height: 44px;
    }
    
    .music-hero-text {
        font-size: 15px;
    }
    
    .music-grid-two {
        grid-template-columns: 1fr;
    }
    
    .playlist {
        max-height: 400px;
    }
    
    .artists-cloud {
        gap: 6px;
    }
    
    .artist-pill {
        padding: 7px 13px;
        font-size: 12.5px;
    }
    
    /* === World Cup mobile === */
    .wc-hero {
        min-height: auto;
    }
    
    .wc-hero-player {
        display: none;
    }
    
    .wc-hero-crest {
        width: 200px;
        top: -3%;
        right: -8%;
        opacity: 0.35;
    }
    
    .wc-venue {
        padding: 9px 12px;
        gap: 10px;
    }
    
    .wc-venue-flag {
        font-size: 18px;
    }
    
    .wc-venue-name {
        font-size: 13px;
    }
    
    .wc-venue-city {
        font-size: 10.5px;
    }
    
    .wc-venue-tag {
        font-size: 9px;
        padding: 3px 6px;
    }
    
    .wc-hero-content {
        padding: 32px 24px;
        max-width: 100%;
    }
    
    .wc-hero-top {
        gap: 16px;
        margin-bottom: 28px;
    }
    
    .wc-hero-logo {
        width: 60px;
    }
    
    .wc-hero-tagline {
        font-size: 15px;
    }
    
    .wc-hero-host {
        font-size: 11px;
    }
    
    .wc-countdown-grid {
        gap: 4px;
    }
    
    .wc-count-unit {
        padding: 10px 8px;
        min-width: 0;
        flex: 1;
    }
    
    .wc-count-num {
        font-size: 24px;
    }
    
    .wc-count-divider {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .wc-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .wc-stat {
        padding: 22px 16px;
    }
    
    .wc-stat-num {
        font-size: 36px;
    }
    
    .wc-grid {
        grid-template-columns: 1fr;
    }
    
    .wc-fav-item {
        padding: 12px 14px;
    }
    
    .wc-fav-flag {
        font-size: 24px;
    }
    
    /* WC Groups mobile */
    .wc-groups-grid {
        grid-template-columns: 1fr;
    }
    
    .wc-groups-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .wc-team.highlighted::after {
        content: '🇨🇿';
        font-size: 14px;
        padding: 0;
        background: none;
    }
    
    .hero-card-image {
        min-height: 400px;
    }
    
    .hero-card-image::after {
        background: linear-gradient(
            to bottom,
            transparent 60%,
            rgba(10, 10, 15, 0.7) 100%
        );
    }
    
    .hero-card-content {
        padding: 32px 24px;
        gap: 28px;
    }
    
    .hero-quote p {
        font-size: 17px;
    }
    
    .hero-achievement h4 {
        font-size: 14.5px;
    }
    
    /* Email karta na mobilu - zpět vertikální layout */
    .social-card--primary {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 28px 24px;
    }
    
    .social-card--primary .social-icon {
        margin-bottom: 0;
    }
    
    .social-card--primary p {
        font-size: 13.5px;
        word-break: break-all;
    }
}

/* ============================================================
   ╔════════════════════════════════════════════════════════╗
   ║   GLASS + NEUMORPHISM SKIN OVERRIDES (final layer)      ║
   ╚════════════════════════════════════════════════════════╝
   Applied at end of stylesheet to systematically replace
   flat shadow/border treatments with neumorphic + glass.
   ============================================================ */

/* === Base glass cards: dual neumorphic shadow ===
   IMPORTANT: background is NOT !important so component-specific bg
   (gradient cards, dark themes, hover states) can still flip it. */
.glass {
    box-shadow: var(--glass-nm-shadow) !important;
    transition:
        transform 0.5s var(--ease-out),
        box-shadow 0.55s var(--ease-out),
        border-color 0.4s var(--ease-out),
        background 0.4s var(--ease-out);
}

.glass:hover {
    box-shadow: var(--glass-nm-shadow-hover) !important;
}

/* Roulette stage is a transparent shell — no hover shadow */
.roulette-stage.glass:hover {
    box-shadow: none !important;
}

/* === Brian Cox: NO neumorphism, NO halo, NO shadow, NO border.
   Photo edges fade fully to transparent — only Cox remains visible against page bg. */
.cox-showcase {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
    position: relative !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Kill any potential pseudo elements creating edges */
.cox-showcase::before,
.cox-showcase::after {
    content: none !important;
    background: none !important;
    box-shadow: none !important;
    display: none !important;
}

.cox-image {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
}

/* Photo displayed naturally — no mask, no shadow, no glow */
.cox-image img {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Sections with their own dark visual identity keep their style;
   we just refine the shadow tone, no neumorphic glass override. */
.hero-card,
.hero-card.glass,
.music-hero,
.music-hero.glass,
.b-card--cosmos,
.b-card--blackhole,
.b-card--foo,
.cardistry-deck--dark,
.euc-card--incoming,
.football-hero {
    box-shadow:
        0 20px 50px -22px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* === Buttons: neumorphic raised → pressed === */
/* Note: .suno-play and .cosmic-video-player are OVERLAY buttons (cover the photo),
   so they keep their original styles and are NOT included here. */
.link-btn,
.scroll-top,
.menu-toggle {
    transition:
        box-shadow 0.32s var(--ease-out),
        transform 0.32s var(--ease-out),
        background 0.32s var(--ease-out),
        color 0.32s var(--ease-out);
}

.link-btn {
    background: var(--bg-elevated);
    border: none;
    box-shadow: var(--nm-shadow-md);
    color: var(--text);
}

.link-btn:hover {
    /* Keep original red fill on hover; just lift slightly */
    box-shadow:
        var(--nm-shadow),
        0 8px 20px rgba(255, 23, 68, 0.28);
    transform: translateY(-2px);
}

.link-btn:active {
    box-shadow: var(--nm-inset-sm);
    transform: translateY(0);
}

.scroll-top {
    background: var(--bg-elevated);
    box-shadow: var(--nm-shadow-md);
    border: none;
    color: var(--accent);
}

.scroll-top:hover {
    box-shadow: var(--nm-shadow);
    transform: translateY(-3px);
}

.scroll-top:active {
    box-shadow: var(--nm-inset-sm);
    transform: translateY(0);
}

/* === Pills (roulette, badge, artist, nav-chip) ===
   Background NOT !important so component hovers (artist-pill → red) can flip it. */
.roulette-pill,
.standings-tab,
.artist-pill,
.movie-meta-tag,
.badge,
.tag {
    background: var(--bg-elevated);
    border: none !important;
    box-shadow: var(--nm-shadow-sm) !important;
    transition:
        box-shadow 0.28s var(--ease-out),
        background 0.28s var(--ease-out),
        color 0.28s var(--ease-out),
        transform 0.28s var(--ease-spring-soft);
}

.roulette-pill:hover,
.standings-tab:hover,
.badge:hover,
.tag:hover {
    transform: translateY(-1px);
    box-shadow: var(--nm-shadow-md) !important;
}

/* Artist pill hover: bg flips to accent (from original cascade) — we only add lift */
.artist-pill:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--nm-shadow-md),
        0 6px 16px var(--accent-glow) !important;
}

/* Active pill / segmented control: inset with accent fill */
.roulette-pill.is-active,
.standings-tab.is-active,
.standings-tab.active {
    background: linear-gradient(135deg, var(--accent) 0%, #e6164a 100%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        var(--nm-inset-sm),
        0 4px 14px rgba(255, 23, 68, 0.32) !important;
    border: none !important;
}

/* === Nav floating dock === */
.navbar,
.nav-float {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    box-shadow:
        -6px -6px 16px rgba(255, 255, 255, 0.92),
        6px 6px 20px rgba(163, 177, 198, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.nav-link,
.nav-chips a {
    color: var(--text-secondary);
    transition: all 0.3s var(--ease-out);
}

.nav-link:hover,
.nav-chips a:hover {
    color: var(--text);
}

.nav-link.is-active,
.nav-chips a.is-active {
    color: var(--accent);
    text-shadow: 0 1px 2px rgba(255, 23, 68, 0.15);
}

/* === Section base unchanged structurally — just background-friendly === */
.section {
    background: transparent;
}

/* === Inputs (search-like, range slider tracks) === */
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
    background: var(--bg-base);
    border: none;
    box-shadow: var(--nm-inset-sm);
    border-radius: var(--radius-pill);
    padding: 12px 18px;
    color: var(--text);
    transition: box-shadow 0.3s var(--ease-out);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
    outline: none;
    box-shadow:
        var(--nm-inset-sm),
        0 0 0 3px rgba(255, 23, 68, 0.12);
}

/* === Sliders (range inputs) === */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 100px;
    background: var(--bg-base);
    box-shadow: var(--nm-inset-sm);
}

input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 100px;
    background: var(--bg-base);
    box-shadow: var(--nm-inset-sm);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -7px;
    background: var(--bg-elevated);
    border-radius: 50%;
    box-shadow:
        -2px -2px 4px rgba(255, 255, 255, 0.95),
        2px 2px 6px rgba(163, 177, 198, 0.55);
    cursor: pointer;
    border: none;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-out);
}

input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--bg-elevated);
    border-radius: 50%;
    box-shadow:
        -2px -2px 4px rgba(255, 255, 255, 0.95),
        2px 2px 6px rgba(163, 177, 198, 0.55);
    cursor: pointer;
    border: none;
}

input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.1);
}

/* === Inset accent buttons (primary CTAs keep accent fill) === */
.roulette-spin,
.btn-primary,
.cta-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #e6164a 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 16px rgba(255, 23, 68, 0.28),
        0 2px 4px rgba(255, 23, 68, 0.18) !important;
}

.roulette-spin:hover:not(:disabled),
.btn-primary:hover,
.cta-primary:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 10px 22px rgba(255, 23, 68, 0.36),
        0 3px 6px rgba(255, 23, 68, 0.22) !important;
    transform: translateY(-2px);
}

.roulette-spin:active:not(:disabled),
.btn-primary:active,
.cta-primary:active {
    box-shadow:
        var(--nm-inset-sm),
        0 2px 6px rgba(255, 23, 68, 0.25) !important;
    transform: translateY(0);
}

/* === Roulette stage is now a transparent shell — the cinema wrapper
   inside owns the visual frame. Killing the old neumorphic glass card. === */
.roulette-stage {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* During the reel spin, strip the navbar's backdrop-filter — on mobile Safari
   the blur recalculation while compositing reel transforms causes the navbar
   to visibly jitter ("ujíždí a uskakuje"). Solid background looks fine for
   the ~5 seconds of spin and the GPU has one less expensive task. */
html.is-spinning-roulette .navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

/* SUNO play button is an OVERLAY (covers the cover image),
   so we keep its original dark transparent style — no neumorphic override. */

/* === Playlist player (Apple Music previews) container === */
.playlist-player {
    background: var(--glass-bg-strong) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-nm-shadow) !important;
    border-radius: var(--radius-md);
}

.pp-btn--prev,
.pp-btn--next {
    background: var(--bg-elevated) !important;
    box-shadow: var(--nm-shadow-sm) !important;
    border: none !important;
}

.pp-btn--prev:hover,
.pp-btn--next:hover {
    box-shadow: var(--nm-shadow-md) !important;
    transform: translateY(-1px);
}

.pp-btn--prev:active,
.pp-btn--next:active {
    box-shadow: var(--nm-inset-sm) !important;
    transform: translateY(0);
}

.pp-progress {
    background: var(--bg-base) !important;
    box-shadow: var(--nm-inset-sm);
    height: 6px !important;
    border-radius: 100px;
}

.pp-progress-fill {
    background: linear-gradient(to right, var(--accent), #ff6e2e) !important;
}

/* === Standings tabs as individual neumorphic pills (not segmented) === */
.standings-tabs {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px !important;
    margin-bottom: 18px;
}

.standings-tab {
    padding: 9px 18px !important;
}

.standings-tab.active,
.standings-tab.is-active {
    color: #fff !important;
}

/* === Cards in interest grid, gaming, movies, etc. ===
   Only the shadow is forced — component-specific backgrounds
   (e.g. .social-card--primary red gradient, .hero-card dark theme) keep their fill. */
.card.glass,
.movie-card.glass,
.football-card.glass,
.cosmos-fact.glass,
.suno-card.glass,
.social-card.glass,
.standings-wrapper.glass {
    box-shadow: var(--glass-nm-shadow) !important;
}

.card.glass:hover,
.movie-card.glass:hover,
.football-card.glass:hover,
.cosmos-fact.glass:hover,
.social-card.glass:hover {
    box-shadow: var(--glass-nm-shadow-hover) !important;
    transform: translateY(-3px);
}

/* === Defensive: remove any pseudo decoration on football-card === */
.football-card::before,
.football-card::after {
    content: none !important;
    background: none !important;
}

/* === Dark sections that should keep their dark character === */
/* NOTE: .cox-showcase and .cosmos-section excluded — they have no card chrome */
.music-hero,
.b-card--cosmos,
.b-card--blackhole,
.cardistry-deck--dark,
.euc-card--incoming {
    box-shadow:
        -8px -8px 22px rgba(255, 255, 255, 0.5),
        12px 12px 30px rgba(50, 60, 80, 0.18) !important;
}

/* === Studio strip thumbnails === */
.strip-card {
    background: var(--bg-elevated) !important;
    border: none !important;
    box-shadow: var(--nm-shadow-sm) !important;
}

.strip-card:hover {
    box-shadow: var(--nm-shadow-md) !important;
    transform: translateY(-3px);
}

.studio-hero {
    box-shadow: var(--glass-nm-shadow) !important;
    border: none !important;
}

/* === Section subsection titles get soft icon containers === */
.subsection-icon {
    background: var(--bg-elevated) !important;
    box-shadow: var(--nm-shadow-sm) !important;
    border: none !important;
}

/* === Reduce harshness on contrast borders globally === */
.b-card,
.movie-card,
.football-card,
.cosmos-fact,
.card,
.hero-card,
.social-card,
.suno-card,
.football-hero,
.standings-wrapper {
    border-radius: var(--radius-md);
}

/* === Mobile: tone down neumorphism slightly (smaller shadows for less visual clutter) === */
@media (max-width: 768px) {
    :root {
        --nm-shadow:
            -5px -5px 12px rgba(255, 255, 255, 0.9),
            5px 5px 12px rgba(163, 177, 198, 0.35);
        --nm-shadow-sm:
            -2px -2px 5px rgba(255, 255, 255, 0.9),
            2px 2px 5px rgba(163, 177, 198, 0.32);
        --nm-shadow-md:
            -3px -3px 8px rgba(255, 255, 255, 0.9),
            3px 3px 8px rgba(163, 177, 198, 0.34);
        --glass-nm-shadow:
            -7px -7px 16px rgba(255, 255, 255, 0.85),
            8px 8px 20px rgba(163, 177, 198, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        --glass-nm-shadow-hover:
            -9px -9px 20px rgba(255, 255, 255, 0.9),
            10px 10px 26px rgba(163, 177, 198, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
}


/* =========================================================================
   LOW-PERF MODE — applied via JS in <head> on weak devices (≤4 cores/GB,
   data-saver, or ?perf=low URL param). Strips the GPU-heavy backdrop-filter
   and most multi-layer shadows. Visually subtle on capable machines, huge
   FPS boost on Intel HD / older iGPUs.
   ========================================================================= */
html.lowperf .navbar,
html.lowperf .nav-blur,
html.lowperf .glass,
html.lowperf .cardistry-hero,
html.lowperf .cardistry-deck,
html.lowperf .roulette-stage,
html.lowperf .hero-overlay,
html.lowperf .gaming-card,
html.lowperf .football-card,
html.lowperf .cox-showcase,
html.lowperf .cosmos-section,
html.lowperf .nav-links.mobile-open,
html.lowperf .playlist-player,
html.lowperf .suno-player,
html.lowperf .modal,
html.lowperf .lightbox {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Make the surfaces more opaque so the page still looks layered without blur */
html.lowperf .navbar { background: rgba(255, 255, 255, 0.94) !important; }
html.lowperf .nav-blur { display: none !important; }
/* Force opaque background on glass cards in lowperf mode — but ONLY on
   cards that actually use the translucent glass fill. Cards with their own
   themed background (red email card, dark Carl Sagan hero, dark Brian Cox)
   must be exempted or they end up as white-on-white. */
html.lowperf .glass:not(.social-card--primary):not(.hero-card):not(.cox-showcase) {
    background: rgba(255, 255, 255, 0.92) !important;
}
html.lowperf .roulette-stage { background: transparent !important; }

/* Drop the ambient gradient orbs — they re-paint every scroll frame */
html.lowperf .bg-gradient .gradient-orb {
    animation: none !important;
    opacity: 0.5 !important;
}

/* Disable scale-on-hover on cards (forces full repaint of complex shadow stacks) */
html.lowperf .gaming-card:hover,
html.lowperf .football-card:hover,
html.lowperf .cardistry-deck:hover,
html.lowperf .cardistry-hero:hover,
html.lowperf .strip-photo:hover {
    transform: none !important;
}

/* Trim multi-layer shadows on commonly-rendered cards to single soft shadow */
html.lowperf .glass,
html.lowperf .cardistry-hero,
html.lowperf .cardistry-deck,
html.lowperf .gaming-card,
html.lowperf .football-card {
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.10) !important;
}

/* Disable infinite marquee animation — heavy on weak GPUs */
html.lowperf .artist-marquee-track,
html.lowperf .marquee-track {
    animation: none !important;
}

/* Pause the playlist player album-art rotation if any */
html.lowperf .pp-art {
    animation: none !important;
}