/* ============================================
   MTV RETRO PLAYER - STYLES
   Color Palette: #000000, #00FF00, #FF00FF
   ============================================ */

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

.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

:root {
    --black: #000000;
    --neon-green: #00FF00;
    --magenta: #FF00FF;
    --white: #FFFFFF;
    --gray: #333333;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--black);
    font-family: 'Bebas Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ============================================
   INTRO LAUNCH SCREEN
   ============================================ */

.intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    /* Above splash screen */
    font-family: 'Press Start 2P', monospace;
    color: var(--white);
    transition: opacity 1s ease, visibility 1s ease;
}

.intro-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.intro-date {
    font-size: 2rem;
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-green);
    margin-bottom: 1rem;
}

.intro-time {
    font-size: 4rem;
    color: var(--white);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5rem;
}

.start-mtv-btn {
    margin-top: 3rem;
    background: transparent;
    border: 4px solid var(--magenta);
    color: var(--magenta);
    font-family: 'Press Start 2P', monospace;
    font-size: 1.5rem;
    padding: 1.5rem 3rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px var(--magenta), inset 0 0 15px var(--magenta);
    text-shadow: 0 0 10px var(--magenta);
    animation: pulseBtn 2s infinite;
}

.start-mtv-btn:hover {
    background: var(--magenta);
    color: var(--black);
    box-shadow: 0 0 30px var(--magenta), 0 0 60px var(--magenta);
    transform: scale(1.05);
}

@keyframes pulseBtn {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.02);
        opacity: 0.9;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Skip Intro Button */
.skip-intro {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 200;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.decade-btn-splash {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    padding: 0.5rem 1.5rem;
    margin: 0.3rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-shadow: 0 0 5px currentColor;
    will-change: transform;
}

.decade-btn-splash:hover {
    transform: scale(1.03);
    box-shadow: 0 0 8px currentColor;
}

.decade-btn-splash:active {
    transform: scale(0.95);
}

.skip-btn {
    background: transparent;
    border: 2px solid var(--neon-green);
    color: var(--neon-green);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    padding: 1rem 1.5rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px var(--neon-green), inset 0 0 10px rgba(0, 255, 0, 0.2);
    text-shadow: 0 0 5px var(--neon-green);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.skip-btn:hover {
    background: var(--neon-green);
    color: var(--black);
    box-shadow: 0 0 20px var(--neon-green), 0 0 40px var(--neon-green);
    transform: scale(1.05);
}

.skip-intro.visible {
    opacity: 1;
    transform: translateX(0);
}

.skip-intro.hidden {
    display: none;
}


/* ============================================
   AWESOME SPLASH SCREEN - GPU OPTIMIZED
   ============================================ */

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}

/* Animated gradient background - GPU optimized */
.splash-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255, 0, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(0, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 40%);
    animation: bgPulse 8s ease-in-out infinite alternate;
    will-change: opacity;
    pointer-events: none;
}

/* Floating particles effect */
.splash-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 10% 20%, #FF00FF 50%, transparent 50%),
        radial-gradient(2px 2px at 30% 60%, #00FFFF 50%, transparent 50%),
        radial-gradient(2px 2px at 50% 30%, #FFD700 50%, transparent 50%),
        radial-gradient(2px 2px at 70% 70%, #00FF00 50%, transparent 50%),
        radial-gradient(2px 2px at 90% 40%, #FF00FF 50%, transparent 50%),
        radial-gradient(3px 3px at 20% 80%, #00FFFF 50%, transparent 50%),
        radial-gradient(2px 2px at 40% 10%, #FFD700 50%, transparent 50%),
        radial-gradient(3px 3px at 60% 90%, #FF00FF 50%, transparent 50%),
        radial-gradient(2px 2px at 80% 15%, #00FF00 50%, transparent 50%),
        radial-gradient(2px 2px at 15% 45%, #00FFFF 50%, transparent 50%);
    background-size: 100% 100%;
    animation: floatParticles 15s linear infinite;
    opacity: 0.6;
    will-change: transform;
    pointer-events: none;
}

@keyframes bgPulse {
    0% {
        opacity: 0.6;
        filter: hue-rotate(0deg);
    }

    50% {
        opacity: 1;
        filter: hue-rotate(30deg);
    }

    100% {
        opacity: 0.8;
        filter: hue-rotate(-30deg);
    }
}

@keyframes floatParticles {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    25% {
        transform: translate3d(-2%, -5%, 0) scale(1.1);
    }

    50% {
        transform: translate3d(3%, -2%, 0) scale(1);
    }

    75% {
        transform: translate3d(-1%, 4%, 0) scale(1.05);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    width: 100%;
    max-width: 1200px;
}

.splash-tagline {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.2rem;
    color: var(--white);
    letter-spacing: 0.8rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: trackingIn 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes trackingIn {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.channel-container {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center;
    perspective: 1200px;
}

.channel-card {
    background: linear-gradient(145deg, rgba(15, 15, 15, 0.95) 0%, rgba(5, 5, 5, 0.98) 100%);
    border: 2px solid;
    border-radius: 10px;
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    min-width: 320px;
    max-width: 360px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* GPU optimization */
    transform: translateZ(0);
    will-change: transform, box-shadow;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Animated border glow */
.channel-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, transparent);
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.channel-card:hover::before {
    opacity: 1;
}

/* Fast shine effect */
.channel-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transform: skewX(-25deg) translateZ(0);
    transition: left 0.6s ease;
    will-change: left;
}

.channel-card:hover::after {
    left: 125%;
}

.channel-card:hover {
    transform: translateY(-8px) scale(1.02) translateZ(0);
}

/* Retro Card - Magenta Theme */
.retro-card {
    border-color: var(--magenta);
    box-shadow:
        0 0 15px rgba(255, 0, 255, 0.2),
        inset 0 0 30px rgba(255, 0, 255, 0.03);
}

.retro-card::before {
    background: linear-gradient(45deg, #FF00FF, #FF6600, #FF00FF);
}

.retro-card:hover {
    box-shadow:
        0 0 30px rgba(255, 0, 255, 0.5),
        0 0 60px rgba(255, 0, 255, 0.25),
        0 15px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 40px rgba(255, 0, 255, 0.05);
}

/* Modern Card - Cyan Theme */
.modern-card {
    border-color: #00BFFF;
    box-shadow:
        0 0 15px rgba(0, 191, 255, 0.2),
        inset 0 0 30px rgba(0, 191, 255, 0.03);
}

.modern-card::before {
    background: linear-gradient(45deg, #00BFFF, #00FA9A, #00BFFF);
}

.modern-card:hover {
    box-shadow:
        0 0 30px rgba(0, 191, 255, 0.5),
        0 0 60px rgba(0, 191, 255, 0.25),
        0 15px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 40px rgba(0, 191, 255, 0.05);
}

/* Legacy Card - Golden Time Travel Theme */
.legacy-card {
    border-color: #FFD700;
    background: linear-gradient(145deg, rgba(25, 20, 5, 0.95) 0%, rgba(15, 12, 3, 0.98) 100%);
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.25),
        inset 0 0 30px rgba(255, 215, 0, 0.03);
}

.legacy-card::before {
    background: linear-gradient(45deg, #FFD700, #FF6600, #FFD700);
}

.legacy-card:hover {
    box-shadow:
        0 0 35px rgba(255, 215, 0, 0.5),
        0 0 70px rgba(255, 215, 0, 0.25),
        0 15px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 50px rgba(255, 215, 0, 0.05);
}

.legacy-logo {
    animation: legacyGlow 3s ease-in-out infinite alternate !important;
}

@keyframes legacyGlow {
    0% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    }

    50% {
        filter: drop-shadow(0 0 25px rgba(255, 0, 255, 0.8)) hue-rotate(60deg);
    }

    100% {
        filter: drop-shadow(0 0 10px rgba(0, 255, 0, 0.8));
    }
}

.logo-label.legacy {
    color: #FFD700;
    text-shadow: 0 0 10px #FFD700, 0 0 20px rgba(255, 215, 0, 0.5);
}

.legacy-btn-splash {
    border-color: #FFD700 !important;
    color: #FFD700 !important;
    text-shadow: 0 0 5px #FFD700 !important;
    padding: 1rem 2rem !important;
}

.legacy-btn-splash:hover {
    background: #FFD700 !important;
    color: var(--black) !important;
    text-shadow: none !important;
    box-shadow: 0 0 30px #FFD700 !important;
}

/* Channel Logo */
.channel-logo {
    font-size: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: logoGlow 2s ease-in-out infinite alternate;
}

.channel-logo .logo-vue {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 900;
    font-size: 1.5em;
    background: linear-gradient(135deg, #00FFFF 0%, #FF00FF 50%, #00FFFF 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 0 15px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 25px rgba(255, 0, 255, 0.6)) drop-shadow(3px 3px 0 #000);
    animation: vueGradientShift 3s ease-in-out infinite;
}

.channel-logo .logo-m {
    color: var(--magenta);
    font-family: 'Bebas Neue', sans-serif;
    font-weight: bold;
    text-shadow:
        0 0 10px var(--magenta),
        0 0 20px var(--magenta);
}

.channel-logo .logo-tv {
    color: var(--neon-green);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5em;
    margin-left: 0.1rem;
    text-shadow:
        0 0 10px var(--neon-green),
        0 0 20px var(--neon-green);
}

/* ============================================
   LOGO ANIMATIONS - 70s (PSYCHEDELIC DISCO MADNESS)
   ============================================ */
@keyframes anim-70s-disco {
    0% {
        transform: scale(1) rotate(0deg) skewX(0deg);
        filter: hue-rotate(0deg) saturate(150%);
        text-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
    }

    12.5% {
        transform: scale(1.15) rotate(-8deg) skewX(-5deg);
        filter: hue-rotate(45deg) saturate(200%);
        text-shadow: 0 0 30px #ff6600, 0 0 60px #ff6600;
    }

    25% {
        transform: scale(1.2) rotate(10deg) skewX(5deg);
        filter: hue-rotate(90deg) saturate(250%) brightness(1.2);
        text-shadow: 0 0 40px #ffff00, 0 0 80px #ffff00, 0 0 120px #ffff00;
    }

    37.5% {
        transform: scale(1.1) rotate(-5deg) skewX(-8deg);
        filter: hue-rotate(135deg) saturate(200%);
        text-shadow: 0 0 30px #00ff00, 0 0 60px #00ff00;
    }

    50% {
        transform: scale(1.25) rotate(15deg) skewX(10deg);
        filter: hue-rotate(180deg) saturate(300%) brightness(1.3);
        text-shadow: 0 0 50px #00ffff, 0 0 100px #00ffff, 0 0 150px #00ffff;
    }

    62.5% {
        transform: scale(1.1) rotate(-10deg) skewX(-5deg);
        filter: hue-rotate(225deg) saturate(200%);
        text-shadow: 0 0 35px #0066ff, 0 0 70px #0066ff;
    }

    75% {
        transform: scale(1.2) rotate(8deg) skewX(8deg);
        filter: hue-rotate(270deg) saturate(250%) brightness(1.2);
        text-shadow: 0 0 45px #9900ff, 0 0 90px #9900ff, 0 0 130px #9900ff;
    }

    87.5% {
        transform: scale(1.15) rotate(-3deg) skewX(-3deg);
        filter: hue-rotate(315deg) saturate(200%);
        text-shadow: 0 0 25px #ff0099, 0 0 50px #ff0099;
    }

    100% {
        transform: scale(1) rotate(0deg) skewX(0deg);
        filter: hue-rotate(360deg) saturate(150%);
        text-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
    }
}

@keyframes anim-70s-wave {

    0%,
    100% {
        transform: skewX(0deg) scaleX(1) translateY(0);
        filter: drop-shadow(0 0 15px #FFA500);
    }

    10% {
        transform: skewX(15deg) scaleX(1.1) translateY(-8px);
        filter: drop-shadow(5px 5px 20px #FF6600);
    }

    25% {
        transform: skewX(-20deg) scaleX(0.95) translateY(5px);
        filter: drop-shadow(-8px 3px 25px #FFD700) hue-rotate(30deg);
    }

    40% {
        transform: skewX(25deg) scaleX(1.15) translateY(-12px);
        filter: drop-shadow(10px -5px 30px #00FF00) hue-rotate(60deg);
    }

    50% {
        transform: skewX(-30deg) scaleX(0.9) translateY(10px);
        filter: drop-shadow(-12px 8px 35px #00FFFF) hue-rotate(90deg);
    }

    65% {
        transform: skewX(20deg) scaleX(1.1) translateY(-6px);
        filter: drop-shadow(8px -3px 25px #FF00FF) hue-rotate(60deg);
    }

    80% {
        transform: skewX(-12deg) scaleX(1.05) translateY(4px);
        filter: drop-shadow(-5px 5px 20px #FF00AA) hue-rotate(30deg);
    }
}

@keyframes anim-70s-lamp {

    0%,
    100% {
        filter: contrast(1) saturate(1.5);
        transform: scaleY(1) scaleX(1);
        text-shadow: 0 0 30px #FF6600, 0 0 60px #FF3300;
    }

    15% {
        filter: contrast(1.8) saturate(2) hue-rotate(30deg);
        transform: scaleY(1.3) scaleX(0.8);
        text-shadow: 0 0 50px #FFFF00, 0 0 100px #FF9900;
    }

    30% {
        filter: contrast(1.2) saturate(2.5) hue-rotate(60deg);
        transform: scaleY(0.7) scaleX(1.2);
        text-shadow: 0 0 40px #00FF66, 0 0 80px #00FF00;
    }

    45% {
        filter: contrast(2) saturate(2) hue-rotate(90deg);
        transform: scaleY(1.4) scaleX(0.7);
        text-shadow: 0 0 60px #00FFFF, 0 0 120px #00CCFF;
    }

    60% {
        filter: contrast(1.5) saturate(3) hue-rotate(120deg);
        transform: scaleY(0.8) scaleX(1.3);
        text-shadow: 0 0 45px #9966FF, 0 0 90px #6600FF;
    }

    75% {
        filter: contrast(1.8) saturate(2.5) hue-rotate(150deg);
        transform: scaleY(1.2) scaleX(0.9);
        text-shadow: 0 0 55px #FF00FF, 0 0 110px #CC00FF;
    }

    90% {
        filter: contrast(1.3) saturate(2) hue-rotate(180deg);
        transform: scaleY(0.9) scaleX(1.1);
        text-shadow: 0 0 35px #FF0066, 0 0 70px #FF0099;
    }
}

.mtv-logo.anim-70s-1 {
    animation: anim-70s-disco 3s linear infinite;
}

.mtv-logo.anim-70s-2 {
    animation: anim-70s-wave 2s ease-in-out infinite;
}

.mtv-logo.anim-70s-3 {
    animation: anim-70s-lamp 4s ease-in-out infinite;
}

/* ============================================
   LOGO ANIMATIONS - 80s (NEON CYBERPUNK GLITCH)
   ============================================ */
@keyframes anim-80s-glitch {

    0%,
    100% {
        clip-path: inset(0 0 0 0);
        transform: translate(0) skew(0deg);
        filter: drop-shadow(0 0 10px #FF00FF) drop-shadow(0 0 20px #FF00FF);
    }

    2% {
        clip-path: inset(40% 0 30% 0);
        transform: translate(-8px, 3px) skew(2deg);
        filter: drop-shadow(-5px 0 15px #00FFFF) drop-shadow(5px 0 15px #FF00FF);
    }

    4% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(8px, -2px) skew(-3deg);
        filter: drop-shadow(8px 0 20px #FF0000) drop-shadow(-8px 0 20px #00FF00);
    }

    6% {
        clip-path: inset(0 0 0 0);
        transform: translate(0) skew(0deg);
    }

    20% {
        clip-path: inset(5% 0 90% 0);
        transform: translate(-5px, 0) skew(5deg);
        filter: drop-shadow(0 5px 25px #FFFF00) hue-rotate(45deg);
    }

    22% {
        clip-path: inset(0 0 0 0);
        transform: translate(0) skew(0deg);
    }

    40% {
        filter: drop-shadow(0 0 30px #00FFFF) drop-shadow(0 0 60px #00FFFF) brightness(1.5);
    }

    42% {
        filter: invert(1);
        transform: scale(1.1);
    }

    44% {
        filter: invert(0);
        transform: scale(1);
    }

    60% {
        clip-path: inset(60% 0 20% 0);
        transform: translate(10px, -5px) skew(-8deg);
        filter: drop-shadow(-10px 0 30px #FF00FF) drop-shadow(10px 0 30px #00FFFF);
    }

    62% {
        clip-path: inset(0 0 0 0);
        transform: translate(0) skew(0deg);
    }

    80% {
        filter: drop-shadow(0 0 40px #FF00FF) drop-shadow(0 0 80px #00FF00) saturate(300%);
        transform: scale(1.08) rotate(1deg);
    }

    82% {
        transform: scale(0.95) rotate(-1deg);
        filter: blur(2px);
    }

    84% {
        transform: scale(1);
        filter: none;
    }
}

@keyframes anim-80s-pulse {

    0%,
    100% {
        filter: drop-shadow(0 0 15px #FF00FF) drop-shadow(0 0 30px #FF00FF);
        transform: scale(1);
        text-shadow: 0 0 20px #FF00FF, 0 0 40px #FF00FF;
    }

    15% {
        filter: drop-shadow(0 0 25px #00FFFF) drop-shadow(0 0 50px #00FFFF) saturate(200%);
        transform: scale(1.08) rotate(2deg);
        text-shadow: 0 0 30px #00FFFF, 0 0 60px #00FFFF, 0 0 90px #00FFFF;
    }

    30% {
        filter: drop-shadow(0 0 35px #00FF00) drop-shadow(0 0 70px #00FF00) brightness(1.3);
        transform: scale(1.15) rotate(-2deg);
        text-shadow: -5px 0 30px #FF00FF, 5px 0 30px #00FFFF;
    }

    50% {
        filter: drop-shadow(0 0 45px #FFFF00) drop-shadow(0 0 90px #FF6600) saturate(300%);
        transform: scale(1.2) rotate(0deg);
        text-shadow: 0 0 50px #FFFF00, 0 0 100px #FF6600, 0 0 150px #FF0000;
    }

    70% {
        filter: drop-shadow(0 0 30px #FF0066) drop-shadow(0 0 60px #FF0066) brightness(1.2);
        transform: scale(1.1) rotate(1deg);
        text-shadow: 0 0 40px #FF0066, 0 0 80px #CC00FF;
    }

    85% {
        filter: drop-shadow(0 0 20px #9900FF) drop-shadow(0 0 40px #6600FF);
        transform: scale(1.05) rotate(-1deg);
        text-shadow: 0 0 25px #9900FF, 0 0 50px #6600FF;
    }
}

@keyframes anim-80s-shake {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        filter: drop-shadow(0 0 15px #FF00FF);
    }

    5% {
        transform: translate(-8px, -5px) rotate(-3deg) scale(1.05);
        filter: drop-shadow(-8px 0 20px #FF0000) drop-shadow(8px 0 20px #00FF00);
    }

    10% {
        transform: translate(10px, 3px) rotate(4deg) scale(0.98);
        filter: drop-shadow(10px -5px 25px #00FFFF);
    }

    15% {
        transform: translate(-5px, 8px) rotate(-2deg) scale(1.1);
        filter: drop-shadow(-5px 8px 30px #FFFF00) brightness(1.3);
    }

    20% {
        transform: translate(12px, -8px) rotate(5deg) scale(0.95);
        filter: drop-shadow(12px -8px 25px #FF00FF) hue-rotate(30deg);
    }

    30% {
        transform: translate(-15px, 5px) rotate(-6deg) scale(1.08);
        filter: drop-shadow(-15px 5px 35px #00FF00) saturate(200%);
    }

    40% {
        transform: translate(8px, -10px) rotate(3deg) scale(1.02);
        filter: drop-shadow(8px -10px 20px #FF6600);
    }

    50% {
        transform: translate(-10px, 12px) rotate(-4deg) scale(1.12);
        filter: drop-shadow(-10px 12px 40px #00FFFF) brightness(1.4);
    }

    60% {
        transform: translate(15px, -6px) rotate(6deg) scale(0.92);
        filter: drop-shadow(15px -6px 30px #FF00FF) hue-rotate(-30deg);
    }

    70% {
        transform: translate(-12px, 3px) rotate(-5deg) scale(1.06);
        filter: drop-shadow(-12px 3px 25px #FFFF00);
    }

    80% {
        transform: translate(6px, -12px) rotate(2deg) scale(1);
        filter: drop-shadow(6px -12px 20px #9900FF);
    }

    90% {
        transform: translate(-3px, 6px) rotate(-1deg) scale(1.03);
        filter: drop-shadow(-3px 6px 15px #FF00FF);
    }
}

.mtv-logo.anim-80s-1 {
    animation: anim-80s-glitch 3s infinite linear;
}

.mtv-logo.anim-80s-2 {
    animation: anim-80s-pulse 1.5s infinite ease-in-out;
}

.mtv-logo.anim-80s-3 {
    animation: anim-80s-shake 1s infinite;
}

/* ============================================
   LOGO ANIMATIONS - 90s (CHAOTIC GRUNGE VHS)
   ============================================ */
@keyframes anim-90s-blur {

    0%,
    100% {
        filter: blur(0px) contrast(1);
        opacity: 1;
        transform: skewX(0deg) skewY(0deg);
        text-shadow: 2px 2px 0 #000, -2px -2px 0 #00FF00;
    }

    8% {
        filter: blur(4px) contrast(1.5);
        opacity: 0.7;
        transform: skewX(15deg) skewY(-3deg);
        text-shadow: 5px 0 0 #FF0000, -5px 0 0 #00FFFF;
    }

    16% {
        filter: blur(0px) contrast(2);
        opacity: 1;
        transform: skewX(-20deg) skewY(5deg);
        text-shadow: -3px 3px 0 #FFFF00, 3px -3px 0 #FF00FF;
    }

    24% {
        filter: blur(6px) contrast(0.8) saturate(3);
        opacity: 0.6;
        transform: skewX(25deg) skewY(-8deg) scale(1.1);
    }

    32% {
        filter: blur(1px) contrast(1.8);
        opacity: 0.9;
        transform: skewX(-10deg) skewY(2deg) scale(0.95);
        text-shadow: 8px 0 0 #00FF00, -8px 0 0 #FF0066;
    }

    50% {
        filter: blur(8px) contrast(2) brightness(1.5);
        opacity: 0.5;
        transform: skewX(30deg) skewY(-10deg) scale(1.15);
        text-shadow: 10px 5px 0 #FF0000, -10px -5px 0 #00FFFF;
    }

    68% {
        filter: blur(2px) contrast(1.3);
        opacity: 0.85;
        transform: skewX(-25deg) skewY(6deg);
    }

    84% {
        filter: blur(5px) contrast(1.6) saturate(2);
        opacity: 0.75;
        transform: skewX(12deg) skewY(-4deg);
        text-shadow: -6px 0 0 #FFFF00, 6px 0 0 #9900FF;
    }
}

@keyframes anim-90s-zoom {

    0%,
    100% {
        transform: scale(1);
        filter: contrast(1);
    }

    3% {
        transform: scale(1.8) rotate(5deg);
        filter: contrast(2) brightness(1.5);
    }

    6% {
        transform: scale(0.8) rotate(-3deg);
        filter: contrast(0.8);
    }

    9% {
        transform: scale(1.2);
        filter: contrast(1.2);
    }

    15% {
        transform: scale(1);
    }

    40% {
        transform: scale(1);
    }

    43% {
        transform: scale(2) rotate(-8deg) skewX(10deg);
        filter: contrast(2.5) saturate(3) brightness(1.3);
    }

    46% {
        transform: scale(0.7) rotate(5deg);
        filter: contrast(0.6);
    }

    50% {
        transform: scale(1.1);
    }

    80% {
        transform: scale(1);
    }

    83% {
        transform: scale(1.6) rotate(10deg) skewY(-5deg);
        filter: contrast(1.8) hue-rotate(45deg);
    }

    86% {
        transform: scale(0.9);
    }
}

@keyframes anim-90s-rotate {
    0% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(3px 3px 0 #00FF00);
    }

    10% {
        transform: rotate(30deg) scale(1.1) skewX(5deg);
        filter: drop-shadow(-5px 5px 0 #FF00FF) hue-rotate(30deg);
    }

    25% {
        transform: rotate(90deg) scale(0.9);
        filter: drop-shadow(5px -5px 0 #FFFF00) contrast(1.5);
    }

    35% {
        transform: rotate(135deg) scale(1.15) skewY(-8deg);
        filter: drop-shadow(-8px 0 0 #00FFFF) saturate(200%);
    }

    50% {
        transform: rotate(180deg) scale(1);
        filter: drop-shadow(0 8px 0 #FF0066) brightness(1.3);
    }

    65% {
        transform: rotate(225deg) scale(1.1) skewX(-5deg);
        filter: drop-shadow(6px 6px 0 #9900FF);
    }

    75% {
        transform: rotate(270deg) scale(0.95);
        filter: drop-shadow(-6px -6px 0 #00FF00) hue-rotate(-30deg);
    }

    90% {
        transform: rotate(330deg) scale(1.08) skewY(5deg);
        filter: drop-shadow(4px -4px 0 #FF00FF);
    }

    100% {
        transform: rotate(360deg) scale(1);
        filter: drop-shadow(3px 3px 0 #00FF00);
    }
}

.mtv-logo.anim-90s-1 {
    animation: anim-90s-blur 2s infinite steps(3);
}

.mtv-logo.anim-90s-2 {
    animation: anim-90s-zoom 4s infinite;
}

.mtv-logo.anim-90s-3 {
    animation: anim-90s-rotate 3s linear infinite;
}


/* ============================================
   LOGO ANIMATIONS - Modern (SLEEK 3D PREMIUM)
   ============================================ */
@keyframes anim-mod-bounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 5px 15px rgba(0, 191, 255, 0.5));
    }

    15% {
        transform: translateY(-20px) scale(1.05);
        filter: drop-shadow(0 25px 25px rgba(0, 191, 255, 0.3));
    }

    30% {
        transform: translateY(-5px) scale(0.98);
        filter: drop-shadow(0 10px 20px rgba(0, 191, 255, 0.4));
    }

    45% {
        transform: translateY(-15px) scale(1.03);
        filter: drop-shadow(0 20px 25px rgba(153, 50, 204, 0.4));
    }

    60% {
        transform: translateY(-2px) scale(0.99);
    }

    75% {
        transform: translateY(-10px) scale(1.02);
        filter: drop-shadow(0 15px 20px rgba(0, 250, 154, 0.4));
    }
}

@keyframes anim-mod-3d {
    0% {
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
        filter: drop-shadow(0 0 20px rgba(0, 191, 255, 0.6));
    }

    25% {
        transform: perspective(1000px) rotateY(90deg) rotateX(10deg) scale(1.1);
        filter: drop-shadow(20px 0 30px rgba(153, 50, 204, 0.5));
    }

    50% {
        transform: perspective(1000px) rotateY(180deg) rotateX(0deg);
        filter: drop-shadow(0 0 40px rgba(0, 250, 154, 0.7));
    }

    75% {
        transform: perspective(1000px) rotateY(270deg) rotateX(-10deg) scale(1.1);
        filter: drop-shadow(-20px 0 30px rgba(0, 191, 255, 0.5));
    }

    100% {
        transform: perspective(1000px) rotateY(360deg) rotateX(0deg);
        filter: drop-shadow(0 0 20px rgba(0, 191, 255, 0.6));
    }
}

@keyframes anim-mod-pop {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 15px rgba(0, 191, 255, 0.5));
    }

    10% {
        transform: scale(1.2) rotate(3deg);
        filter: drop-shadow(0 0 30px rgba(0, 191, 255, 0.8)) brightness(1.2);
    }

    20% {
        transform: scale(0.95) rotate(-2deg);
    }

    30% {
        transform: scale(1.15) rotate(1deg);
        filter: drop-shadow(0 0 25px rgba(153, 50, 204, 0.7));
    }

    40% {
        transform: scale(0.98) rotate(-1deg);
    }

    50% {
        transform: scale(1.1) rotate(2deg);
        filter: drop-shadow(0 0 35px rgba(0, 250, 154, 0.8)) brightness(1.15);
    }

    60% {
        transform: scale(1.02);
    }

    70% {
        transform: scale(1.08) rotate(-2deg);
        filter: drop-shadow(0 0 20px rgba(0, 191, 255, 0.6));
    }

    85% {
        transform: scale(1.03) rotate(1deg);
    }
}

.mtv-logo.anim-mod-1 {
    animation: anim-mod-bounce 2s ease-in-out infinite;
}

.mtv-logo.anim-mod-2 {
    animation: anim-mod-3d 4s linear infinite;
}

.mtv-logo.anim-mod-3 {
    animation: anim-mod-pop 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

.logo-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.3em;
    margin-left: 0.5rem;
    letter-spacing: 0.1rem;
}

.logo-label.retro {
    color: var(--magenta);
    text-shadow: 0 0 10px var(--magenta);
}

.logo-label.modern {
    color: #00BFFF;
    text-shadow: 0 0 10px #00BFFF;
}

/* Channel Decades */
.channel-decades {
    display: flex;
    gap: 0.5rem;
}

.decade-btn-splash {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.retro-card .decade-btn-splash {
    border-color: var(--magenta);
    color: var(--magenta);
    text-shadow: 0 0 5px var(--magenta);
}

.retro-card .decade-btn-splash:hover,
.retro-card .decade-btn-splash.active {
    background: var(--magenta);
    color: var(--black);
    text-shadow: none;
    box-shadow: 0 0 20px var(--magenta);
}

.modern-card .decade-btn-splash {
    border-color: #00BFFF;
    color: #00BFFF;
    text-shadow: 0 0 5px #00BFFF;
}

.modern-card .decade-btn-splash:hover,
.modern-card .decade-btn-splash.active {
    background: #00BFFF;
    color: var(--black);
    text-shadow: none;
    box-shadow: 0 0 20px #00BFFF;
}

.splash-hint {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--gray);
    margin-top: 1rem;
    letter-spacing: 0.1rem;
}

/* Vue Ident - MUSIC TELEVISION */
.mtv-ident,
.vue-ident {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
}

.ident-music {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--magenta);
    letter-spacing: 1rem;
    text-shadow: 0 0 10px var(--magenta);
}

.ident-television {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--neon-green);
    letter-spacing: 0.4rem;
    text-shadow: 0 0 10px var(--neon-green);
}

/* Vue text styling */
.ident-vue {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #00FFFF 0%, #FF00FF 50%, #00FFFF 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 0 15px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 25px rgba(255, 0, 255, 0.6)) drop-shadow(3px 3px 0 #000);
    letter-spacing: 0.5rem;
    animation: vueGradientShift 3s ease-in-out infinite;
}

/* VIDEO with transparent V (legacy) */
.ident-video {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--magenta);
    letter-spacing: 1rem;
    text-shadow: 0 0 10px var(--magenta);
}

.ident-v-hidden {
    color: transparent;
    text-shadow: none;
    -webkit-text-stroke: 1px rgba(255, 0, 255, 0.3);
}


/* Footer Credit */
.footer-credit {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.1rem;
    text-align: center;
}

.credit-name {
    color: var(--magenta);
    text-shadow: 0 0 5px var(--magenta);
}

.privacy-link {
    position: absolute;
    bottom: 1.5rem;
    right: 2rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    letter-spacing: 0.05rem;
    transition: all 0.3s ease;
}

.privacy-link:hover {
    color: #00FFFF;
    text-shadow: 0 0 10px #00FFFF;
}

/* ============================================
   VIDEO PLAYER CONTAINER
   ============================================ */

.player-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    overflow: hidden;
    background: #000;
}

/* 
   PURE VIDEO HACK
   Scale video to 150% and center it to completely crop out:
   - Top: Title bar, channel name, "YouTube" button
   - Bottom: Progress bar, recommendations
   - Corners: Watermarks, share buttons
*/
.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Blocks all YouTube UI interactions */
    overflow: hidden;
}

#youtube-player,
#youtube-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* YouTube Title Cover - Fallback to hide title bar */
.yt-title-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    z-index: 12;
    pointer-events: none;
}

.yt-title-cover.hidden {
    display: none;
}

/* Broadcast Mask - Hides YouTube UI at start/end of videos */
.broadcast-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 15;
    /* Above video, below other overlays */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.broadcast-mask.visible {
    opacity: 1;
}

.broadcast-mask.fade-out {
    opacity: 0;
    transition: opacity 1.5s ease;
}

.splash-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.3) 2px,
            rgba(0, 0, 0, 0.3) 4px);
    pointer-events: none;
    z-index: 1;
}

/* Player container transition handled above */

#youtube-player {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    /* 16:9 Aspect Ratio */
    min-height: 100vh;
    min-width: 177.78vh;
    /* 16:9 Aspect Ratio */
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ============================================
   VHS OVERLAY EFFECTS
   ============================================ */

.vhs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.2) 2px,
            rgba(0, 0, 0, 0.2) 4px);
    animation: scanlineMove 8s linear infinite;
}

.vhs-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.03"/></svg>');
    opacity: 0.5;
    animation: noiseAnimation 0.2s steps(10) infinite;
}

.vhs-tracking {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 0%,
            transparent 45%,
            rgba(255, 0, 255, 0.03) 45%,
            rgba(0, 255, 0, 0.03) 55%,
            transparent 55%,
            transparent 100%);
    animation: trackingLine 4s linear infinite;
}

/* Color Aberration Effect */
.vhs-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 0, 255, 0.02) 0%,
            transparent 50%,
            rgba(0, 255, 0, 0.02) 100%);
    animation: colorShift 3s ease-in-out infinite alternate;
}

/* ============================================
   MODERN MODE (00s - No VHS Effects)
   ============================================ */

.vhs-overlay.modern-mode {
    opacity: 0;
    pointer-events: none;
}

.vhs-overlay.modern-mode .scanlines,
.vhs-overlay.modern-mode .vhs-noise,
.vhs-overlay.modern-mode .vhs-tracking {
    display: none;
}

.vhs-overlay.modern-mode::before {
    display: none;
}

/* ============================================
   TV STATIC TRANSITION
   ============================================ */

.static-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.static-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#static-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.static-text {
    position: relative;
    z-index: 2;
    font-family: 'Press Start 2P', monospace;
    font-size: 1.5rem;
    color: var(--white);
    text-shadow: 0 0 10px var(--neon-green);
    animation: textFlicker 0.5s infinite;
    opacity: 0.8;
}

/* ============================================
   TIME TRAVEL OVERLAY (Legacy Mode)
   ============================================ */

.time-travel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0a 100%);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.time-travel.hidden {
    opacity: 0;
    pointer-events: none;
}

.time-travel.active {
    opacity: 1;
    pointer-events: all;
}

.time-travel-content {
    text-align: center;
    z-index: 2;
}

.travel-direction {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: #FFD700;
    letter-spacing: 0.3rem;
    margin-bottom: 1rem;
    animation: blink 0.5s ease-in-out infinite;
}

.commercial-break span {
    animation: blink 1.5s ease-in-out infinite;
}

/* Retro Messages / MTV Idents */
.retro-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.retro-message.visible {
    opacity: 1;
}

.retro-message span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    color: var(--magenta);
    text-shadow: 0 0 20px var(--magenta);
    text-align: center;
    letter-spacing: 0.5rem;
    will-change: opacity;
}

.travel-year {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    color: var(--white);
    text-shadow:
        0 0 20px #FFD700,
        0 0 40px rgba(255, 215, 0, 0.5);
    animation: yearPulse 0.3s ease-in-out infinite;
}

@keyframes yearPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.warp-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(255, 215, 0, 0.1) 2px,
            rgba(255, 215, 0, 0.1) 4px);
    animation: warpScroll 0.2s linear infinite;
    pointer-events: none;
}

@keyframes warpScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(20px);
    }
}

/* ============================================
   DECADE SELECTOR MENU
   ============================================ */

.decade-menu {
    position: fixed;
    top: 2rem;
    right: 2rem;
    display: flex;
    gap: 0.5rem;
    z-index: 50;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.decade-menu.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
}

.decade-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    padding: 0.8rem 1.2rem;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--neon-green);
    color: var(--neon-green);
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px var(--neon-green);
    position: relative;
    overflow: hidden;
}

.decade-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent);
    transition: left 0.5s ease;
}

.decade-btn:hover::before {
    left: 100%;
}

.decade-btn:hover {
    background: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
    transform: translateY(-2px);
}

.decade-btn.active {
    background: var(--neon-green);
    color: var(--black);
    text-shadow: none;
    box-shadow: 0 0 20px var(--neon-green),
        0 0 40px rgba(0, 255, 0, 0.3);
}

.decade-btn.active:hover {
    transform: translateY(-2px);
}

/* Decade-specific colors */
.decade-btn[data-decade="70s"].active {
    background: #FFA500;
    border-color: #FFA500;
    box-shadow: 0 0 20px #FFA500,
        0 0 40px rgba(255, 165, 0, 0.3);
}

.decade-btn[data-decade="70s"]:not(.active) {
    border-color: #FFA500;
    color: #FFA500;
    text-shadow: 0 0 5px #FFA500;
}

.decade-btn[data-decade="80s"].active {
    background: var(--magenta);
    border-color: var(--magenta);
    box-shadow: 0 0 20px var(--magenta),
        0 0 40px rgba(255, 0, 255, 0.3);
}

.decade-btn[data-decade="80s"]:not(.active) {
    border-color: var(--magenta);
    color: var(--magenta);
    text-shadow: 0 0 5px var(--magenta);
}

.decade-btn[data-decade="90s"].active {
    background: var(--neon-green);
    border-color: var(--neon-green);
}

.decade-btn[data-decade="00s"].active {
    background: #00BFFF;
    border-color: #00BFFF;
    box-shadow: 0 0 20px #00BFFF,
        0 0 40px rgba(0, 191, 255, 0.3);
}

.decade-btn[data-decade="00s"]:not(.active) {
    border-color: #00BFFF;
    color: #00BFFF;
    text-shadow: 0 0 5px #00BFFF;
}

.decade-btn[data-decade="10s"].active {
    background: #9932CC;
    /* Orchid/Purple */
    border-color: #9932CC;
    box-shadow: 0 0 20px #9932CC,
        0 0 40px rgba(153, 50, 204, 0.3);
}

.decade-btn[data-decade="10s"]:not(.active) {
    border-color: #9932CC;
    color: #9932CC;
    text-shadow: 0 0 5px #9932CC;
}

.decade-btn[data-decade="20s"].active {
    background: #00fa9a;
    /* Spring Green */
    border-color: #00fa9a;
    box-shadow: 0 0 20px #00fa9a,
        0 0 40px rgba(0, 250, 154, 0.3);
}

.decade-btn[data-decade="20s"]:not(.active) {
    border-color: #00fa9a;
    color: #00fa9a;
    text-shadow: 0 0 5px #00fa9a;
}

/* ============================================
   VUE LOGO - ENHANCED
   ============================================ */

.mtv-logo,
.vue-logo {
    position: fixed;
    top: 2rem;
    left: 2rem;
    font-size: 2.5rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    perspective: 1000px;
    animation: vueLogoPopOut 3s ease-in-out infinite;
    transform-origin: center center;
}

/* ============================================
   TOP BAR - Hides YouTube title/suggestions
   ============================================ */

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 30%,
            rgba(0, 0, 0, 0.9) 50%,
            rgba(0, 0, 0, 0.6) 75%,
            rgba(0, 0, 0, 0) 100%);
    z-index: 40;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    transition: height 1s ease;
}

.top-bar.shrunk {
    height: 60px;
}

.logo-vue {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 900;
    font-size: 1.6em;
    line-height: 0.85;
    position: relative;
    z-index: 1;
    /* Cool vibrant gradient - cyan to magenta */
    background: linear-gradient(135deg, #00FFFF 0%, #FF00FF 50%, #00FFFF 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Layered 3D shadow for pop-out effect */
    filter:
        drop-shadow(0 0 10px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 20px rgba(255, 0, 255, 0.6)) drop-shadow(4px 4px 0 #000) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.5));
    letter-spacing: 0.05em;
    animation: vueGradientShift 3s ease-in-out infinite;
    transform: translateZ(20px);
}

/* Glowing outline effect */
.logo-vue::before {
    content: 'Vue';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    -webkit-text-stroke: 3px rgba(0, 255, 255, 0.5);
    -webkit-text-fill-color: transparent;
    filter: blur(2px);
    animation: vuePulse 2s ease-in-out infinite;
}

@keyframes vueLogoPopOut {

    0%,
    100% {
        transform: scale(1) rotateY(0deg);
        filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.5));
    }

    25% {
        transform: scale(1.02) rotateY(-2deg);
    }

    50% {
        transform: scale(1.05) rotateY(0deg);
        filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.8));
    }

    75% {
        transform: scale(1.02) rotateY(2deg);
    }
}

@keyframes vueGradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes vuePulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Logo decade subtext */
.logo-subtext {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35em;
    color: #00FFFF;
    text-shadow:
        0 0 10px #00FFFF,
        0 0 20px rgba(0, 255, 255, 0.5),
        2px 2px 0 #000;
    letter-spacing: 0.2em;
    margin-top: 0.1rem;
    animation: subtextGlow 2s ease-in-out infinite alternate;
}

@keyframes subtextGlow {
    0% {
        text-shadow:
            0 0 5px #00FFFF,
            0 0 10px rgba(0, 255, 255, 0.5),
            2px 2px 0 #000;
    }

    100% {
        text-shadow:
            0 0 15px #00FFFF,
            0 0 30px rgba(0, 255, 255, 0.8),
            0 0 40px rgba(255, 0, 255, 0.3),
            2px 2px 0 #000;
    }
}

.logo-m {
    color: var(--magenta);
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 900;
    font-size: 1.2em;
    /* Giant M */
    line-height: 0.8;
    position: relative;
    z-index: 1;
    text-shadow:
        3px 3px 0px #000,
        -1px -1px 0 #fff;
    transform: skewX(-5deg);
    /* Slight classic heavy M skew */
}

.logo-tv {
    color: var(--neon-green);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4em;
    position: absolute;
    left: 45%;
    top: 30%;
    z-index: 2;
    transform: rotate(-10deg);
    text-shadow:
        2px 2px 0px #000,
        0 0 10px var(--neon-green);
    background: transparent;
    letter-spacing: -2px;
}

.logo-label {
    /* Previously logo-retro, renamed to support both */
    font-family: 'Press Start 2P', monospace;
    font-size: 0.2em;
    margin-left: 0.8rem;
    margin-bottom: 0.5rem;
    /* Align better with M baseline */
    letter-spacing: 0.1rem;
    opacity: 0.9;
    text-shadow: 2px 2px 0px #000;
}

.logo-label.retro {
    color: var(--white);
    background: linear-gradient(90deg, #ff00ff, #00ff00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(2px 2px 0 #000);
    animation: gradientFlow 3s linear infinite;
}

.logo-label.modern {
    color: #00BFFF;
    text-shadow: 0 0 10px #00BFFF;
}

/* ============================================
   NOW PLAYING POPUP
   ============================================ */

.now-playing {
    position: fixed;
    bottom: 5rem;
    left: 2rem;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--neon-green);
    padding: 1.5rem 2rem;
    z-index: 50;
    max-width: 400px;
    transform: translateX(-120%);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow:
        0 0 20px rgba(0, 255, 0, 0.3),
        inset 0 0 30px rgba(0, 255, 0, 0.05);
}

.now-playing.visible {
    transform: translateX(0);
}

.now-playing.hidden {
    transform: translateX(-120%);
}

.now-playing-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--magenta);
    letter-spacing: 0.2rem;
    margin-bottom: 0.5rem;
    animation: textFlicker 2s infinite;
}

.now-playing-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--white);
    letter-spacing: 0.1rem;
    line-height: 1.3;
    text-transform: uppercase;
}

.now-playing-bar {
    height: 3px;
    background: var(--neon-green);
    margin-top: 1rem;
    animation: progressBar 10s linear forwards;
    box-shadow: 0 0 10px var(--neon-green);
}

/* ============================================
   COMMERCIAL BREAK INDICATOR
   ============================================ */

.commercial-break {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--magenta);
    color: var(--black);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    padding: 0.8rem 1.5rem;
    letter-spacing: 0.2rem;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 0 20px var(--magenta);
}

.commercial-break.visible {
    opacity: 1;
    animation: commercialPulse 1s ease-in-out infinite;
}

/* ============================================
   SKIP AD BUTTON
   ============================================ */

.skip-ad {
    position: fixed;
    bottom: 6rem;
    /* Moved higher to clear Next Era button */
    right: 2rem;
    z-index: 60;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.skip-ad.visible {
    opacity: 1;
    transform: translateX(0);
}

.skip-ad.hidden {
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
}

/* ============================================
   LEGACY NEXT ERA BUTTON (Bottom Right - Legacy Only)
   ============================================ */

.legacy-next {
    position: fixed;
    bottom: 5rem;
    right: 2rem;
    z-index: 60;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.legacy-next.visible {
    opacity: 1;
    transform: translateX(0);
}

.legacy-next.hidden {
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
}

.legacy-next .skip-ad-btn {
    border-color: #FFD700;
    color: #FFD700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.legacy-next .skip-ad-btn:hover {
    background: #FFD700;
    color: var(--black);
    text-shadow: none;
    box-shadow: 0 0 20px #FFD700;
}

/* ============================================
   REFRESH SONG BUTTON (Retro/Modern Only)
   ============================================ */

.refresh-song {
    position: fixed;
    bottom: 5rem;
    right: 2rem;
    z-index: 60;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.refresh-song.visible {
    opacity: 1;
    transform: translateX(0);
}

.refresh-song.hidden {
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
}

.refresh-song .skip-ad-btn {
    border-color: #00FFFF;
    color: #00FFFF;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.refresh-song .skip-ad-btn:hover {
    background: #00FFFF;
    color: var(--black);
    text-shadow: none;
    box-shadow: 0 0 20px #00FFFF;
}

/* Dice Button Specific Styles */
.dice-btn {
    font-size: 2rem !important;
    padding: 0.8rem 1rem !important;
    border-radius: 12px;
    min-width: 60px;
    justify-content: center;
}

.dice-btn:hover {
    animation: diceShake 0.3s ease-in-out;
}

.dice-btn:active {
    animation: diceRoll 0.5s ease-in-out;
}

@keyframes diceShake {

    0%,
    100% {
        transform: rotate(0deg) scale(1.05);
    }

    25% {
        transform: rotate(-15deg) scale(1.1);
    }

    75% {
        transform: rotate(15deg) scale(1.1);
    }
}

@keyframes diceRoll {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(90deg) scale(1.2);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    75% {
        transform: rotate(270deg) scale(1.2);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.skip-ad-btn {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    padding: 0.8rem 1.5rem;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--white);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.skip-ad-btn:hover {
    background: var(--white);
    color: var(--black);
    transform: scale(1.05);
}

.skip-ad-btn .skip-arrow {
    font-size: 0.8rem;
    animation: skipPulse 0.5s ease-in-out infinite;
}

@keyframes skipPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* 20 second Periodic \"Ident\" Animation - Simplified for performance */
@keyframes mtvIdent {

    0%,
    90%,
    100% {
        transform: scale(1);
        filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.5));
    }

    93% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px var(--magenta));
    }

    96% {
        transform: scale(1);
        filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.5));
    }
}

/* Smoother, faster scanlines */
@keyframes scanlineMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 30vh;
        /* Faster cycle */
    }
}

.scanlines {
    /* ... existing styles ... */
    /* Update animation duration */
    animation: scanlineMove 4s linear infinite;
    opacity: 0.15;
    /* Slightly subtler so it can be faster without nausea */
}

/* More chaotic noise */
@keyframes noiseAnimation {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5%, -5%);
    }

    20% {
        transform: translate(-10%, 5%);
    }

    30% {
        transform: translate(5%, -10%);
    }

    40% {
        transform: translate(-5%, 15%);
    }

    50% {
        transform: translate(-10%, 5%);
    }

    60% {
        transform: translate(15%, 0);
    }

    70% {
        transform: translate(0, 10%);
    }

    80% {
        transform: translate(-15%, 0);
    }

    90% {
        transform: translate(10%, 5%);
    }

    100% {
        transform: translate(5%, 0);
    }
}

.vhs-noise {
    /* ... existing styles ... */
    animation: noiseAnimation 0.5s steps(3) infinite;
    /* Much faster, jerkier */
    opacity: 0.4;
}

/* Gradient flow for retro text */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* Updated Logo Glow - Faster, pulsating */
@keyframes logoGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(255, 0, 255, 0.8));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(0, 255, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 0, 255, 0.6));
        transform: scale(1.02);
    }

    100% {
        filter: drop-shadow(0 0 5px rgba(255, 0, 255, 0.8));
    }
}

@keyframes trackingLine {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.vhs-tracking {
    /* ... existing styles ... */
    animation: trackingLine 6s linear infinite;
    /* Increased frequency slightly */
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 10%,
            rgba(255, 255, 255, 0.1) 11%,
            rgba(255, 255, 255, 0.05) 12%,
            transparent 20%);
    height: 15%;
    /* Shorter tracking bar */
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes colorShift {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes staticFlicker {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.1;
    }
}

@keyframes textFlicker {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    75% {
        opacity: 0.9;
    }
}

@keyframes progressBar {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

@keyframes commercialPulse {

    0%,
    100% {
        box-shadow: 0 0 20px var(--magenta);
    }

    50% {
        box-shadow: 0 0 40px var(--magenta), 0 0 60px var(--magenta);
    }
}

/* Screen flicker effect - applied occasionally via JS */
@keyframes screenFlicker {
    0% {
        opacity: 1;
    }

    5% {
        opacity: 0.8;
    }

    10% {
        opacity: 1;
    }

    15% {
        opacity: 0.9;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.flicker {
    animation: screenFlicker 0.3s ease-in-out;
}

/* ============================================
   TV / REMOTE CONTROL SUPPORT
   ============================================ */

/* Only show focus ring when using keyboard/remote */
body.using-keyboard :focus {
    outline: 4px solid var(--neon-green);
    outline-offset: 4px;
    box-shadow: 0 0 20px var(--neon-green), 0 0 40px var(--neon-green);
    transform: scale(1.1);
    z-index: 1000;
}

/* Specific button focus adjustments */
body.using-keyboard .decade-btn-splash:focus {
    background: rgba(255, 255, 255, 0.2);
}

body.using-keyboard .start-mtv-btn:focus {
    background: var(--magenta);
    color: var(--black);
}

body.using-keyboard .skip-intro:focus {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   RESPONSIVE - PHONES, TABLETS & TVs
   ============================================ */

/* Large TVs & 4K Screens */
@media (min-width: 1400px) {
    .splash-content {
        max-width: 1600px;
    }

    .channel-container {
        gap: 4rem;
    }

    .channel-card {
        min-width: 380px;
        max-width: 420px;
        padding: 3rem 3.5rem;
    }

    .channel-logo {
        font-size: 5rem;
    }

    .decade-btn-splash {
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }

    .splash-tagline {
        font-size: 1.6rem;
        letter-spacing: 1rem;
    }

    .trivia-ticker {
        padding: 1rem 3rem;
    }

    .ticker-text {
        font-size: 0.85rem;
    }
}

/* Tablets & Small Laptops */
@media (max-width: 1024px) {
    .channel-container {
        gap: 2rem;
    }

    .channel-card {
        min-width: 280px;
        max-width: 320px;
        padding: 2rem 2.5rem;
    }

    .channel-logo {
        font-size: 3.5rem;
    }
}

/* Standard Mobile */
@media (max-width: 768px) {
    .splash-content {
        gap: 1.5rem;
        padding: 1rem;
    }

    .channel-container {
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        padding: 0 1rem;
    }

    .channel-card {
        min-width: unset;
        max-width: unset;
        width: 100%;
        padding: 1.5rem 2rem;
    }

    .channel-logo {
        font-size: 3rem;
    }

    .splash-tagline {
        font-size: 0.9rem;
        letter-spacing: 0.4rem;
    }

    .intro-time {
        font-size: 2.5rem;
    }

    .start-mtv-btn {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    .decade-btn-splash {
        padding: 0.6rem 1rem;
        margin: 0.3rem;
        font-size: 0.7rem;
    }

    .channel-decades {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .logo-label {
        font-size: 0.9rem !important;
    }

    /* Trivia on mobile */
    .trivia-ticker {
        padding: 0.6rem 1rem;
    }

    .ticker-text {
        font-size: 0.55rem;
        max-width: 95%;
    }

    .ticker-text::before {
        font-size: 0.5rem;
    }

    /* Vue logo on player */
    .vue-logo {
        top: 0.5rem;
        left: 0.5rem;
        font-size: 1.5rem;
    }

    .vue-logo .logo-subtext {
        font-size: 0.6rem;
    }

    /* Decade menu on player */
    .decade-menu {
        top: 0.5rem;
        right: 0.5rem;
        gap: 0.3rem;
    }

    .decade-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.5rem;
    }
}

/* Small Phones */
@media (max-width: 480px) {
    .splash-content {
        gap: 1rem;
    }

    .channel-container {
        gap: 1rem;
    }

    .channel-card {
        padding: 1.2rem 1.5rem;
    }

    .channel-logo {
        font-size: 2.5rem;
    }

    .channel-logo .logo-vue {
        font-size: 1.2em;
    }

    .splash-tagline {
        font-size: 0.75rem;
        letter-spacing: 0.2rem;
    }

    .intro-date {
        font-size: 1.2rem;
    }

    .intro-time {
        font-size: 1.8rem;
        letter-spacing: 0.2rem;
    }

    .start-mtv-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }

    .decade-btn-splash {
        padding: 0.5rem 0.8rem;
        font-size: 0.6rem;
    }

    .channel-desc {
        font-size: 0.6rem;
    }

    .splash-hint {
        font-size: 0.6rem;
    }

    .footer-credit {
        font-size: 0.6rem;
    }

    /* Very compact trivia */
    .trivia-ticker {
        padding: 0.5rem 0.8rem;
    }

    .ticker-text {
        font-size: 0.5rem;
        line-height: 1.4;
    }

    .ticker-text::before {
        font-size: 0.45rem;
        margin-bottom: 0.2rem;
    }
}

/* ============================================
   RETRO VOLUME BAR OSD
   ============================================ */

.volume-osd {
    position: fixed;
    bottom: 5rem;
    left: 2rem;
    background: rgba(0, 0, 0, 0.95);
    border: 3px solid var(--neon-green);
    padding: 0.8rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 100;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.volume-osd.visible {
    opacity: 1;
    transform: translateX(0);
}

.volume-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: var(--neon-green);
    text-shadow: 0 0 5px var(--neon-green);
}

.volume-bar-container {
    width: 120px;
    height: 16px;
    background: #111;
    border: 2px solid var(--neon-green);
    display: flex;
    gap: 2px;
    padding: 2px;
}

.volume-bar-fill {
    height: 100%;
    background: var(--neon-green);
    box-shadow: 0 0 10px var(--neon-green);
    transition: width 0.1s ease;
}

.volume-value {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: var(--neon-green);
    min-width: 30px;
    text-align: right;
}

/* ============================================
   TRIVIA TICKER
   ============================================ */

.trivia-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 3rem;
    max-height: auto;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0%, rgba(20, 0, 40, 0.98) 50%, rgba(0, 0, 0, 0.98) 100%);
    border-top: 3px solid var(--magenta);
    box-shadow: 0 -5px 30px rgba(255, 0, 255, 0.3);
    z-index: 50;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 2rem;
}

.trivia-ticker.visible {
    opacity: 1;
}

.ticker-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.ticker-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: var(--white);
    letter-spacing: 0.05rem;
    line-height: 1.6;
    text-shadow: 0 0 10px var(--magenta), 0 0 20px rgba(255, 0, 255, 0.5);
    white-space: normal;
    word-wrap: break-word;
    max-width: 90%;
    animation: triviaGlow 3s ease-in-out infinite alternate;
}

.ticker-text::before {
    content: '★ DID YOU KNOW? ★ ';
    color: var(--magenta);
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.6rem;
}

@keyframes triviaGlow {
    0% {
        text-shadow: 0 0 10px var(--magenta), 0 0 20px rgba(255, 0, 255, 0.5);
    }

    100% {
        text-shadow: 0 0 15px var(--neon-green), 0 0 30px rgba(0, 255, 0, 0.5);
    }
}

/* Hide ticker during commercials */
.trivia-ticker.hidden {
    opacity: 0;
    pointer-events: none;
}