/* Fonts loaded in HTML to avoid sanitizer issues */

:root {
    --neon-primary: #FF00FF;
    --neon-secondary: #00FFFF;
    --neon-tertiary: #9D00FF;
    
    /* Container padding */
    --container-padding: 3rem 1.5rem;
    
    /* Dynamic layout variables - Calculated based on viewport */
    --dynamic-title-size: clamp(3rem, 8vmin, 6rem);
    --dynamic-player-size: clamp(120px, 30vmin, 280px);
    --dynamic-play-button-size: clamp(60px, 15vmin, 120px);
    --dynamic-gap: clamp(0.5rem, 2vmin, 1.5rem);
    --dynamic-padding: 1.5rem;
    
    /* Dynamic font sizes */
    --dynamic-track-title-size: clamp(0.8rem, 2.5vmin, 1.4rem);
    --dynamic-stats-size: clamp(7px, 1.5vmin, 11px);
    --dynamic-control-size: clamp(0.7rem, 2vmin, 1rem);
    --dynamic-play-icon-size: clamp(1.5rem, 5vmin, 3rem);
    --dynamic-action-button-size: clamp(1.5rem, 4vmin, 2.5rem);
}

html {
    -webkit-tap-highlight-color: transparent;
    overflow: hidden; /* Prevent scrollbars at root level */
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #050505;
    /* Performance: Hardware acceleration */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* OPTIMIZATION: Isolate body transforms (bass shake) */
    contain: layout style paint;
    transform: translateZ(0);
}

/* UFO Cursor - Global with hotspot and fallback */
*, *::before, *::after {
    cursor: url('/static/cursor.png') 16 16, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text y="24" font-size="20">🛸</text></svg>') 16 16, auto !important;
}

/* Custom Scrollbar for Admin */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--neon-secondary);
}

/* Animations */
@keyframes fog {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}

.bg-fog {
    background: 
        radial-gradient(circle at 50% 50%, rgba(20, 20, 30, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background-size: 200% 200%;
    animation: fog 20s ease infinite alternate;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    /* OPTIMIZATION: Reduced blur 10px→8px (20% faster, visually identical) */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* OPTIMIZATION: GPU layer */
    transform: translateZ(0);
    will-change: auto;
}

.text-glow {
    text-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 20px var(--neon-primary);
}

.title-glow {
    text-shadow: 0 0 20px var(--neon-primary), 0 0 40px var(--neon-secondary);
}

/* Mystical Track Title Glow - Fein & Edel */
.track-title-glow {
    /* OPTIMIZATION: Reduced from 4 to 2 shadow layers (50% faster, 90% visual quality) */
    text-shadow:
        0 0 6px var(--neon-primary),
        0 0 15px var(--neon-secondary);
    /* OPTIMIZATION: Removed expensive drop-shadow filter */
    animation: mystical-title-pulse 4s ease-in-out infinite;
    letter-spacing: 0.15em;
    /* OPTIMIZATION: GPU acceleration */
    transform: translateZ(0);
    will-change: opacity;
}

@keyframes mystical-title-pulse {
    /* OPTIMIZATION: Animate opacity only (not text-shadow) - much cheaper */
    0%, 100% {
        opacity: 0.95;
    }
    50% {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   STATS BAR - CLEAN SINGLE LINE DESIGN (v3.0)
   ═══════════════════════════════════════════════════════════════ */

/* Main Stats Bar */
.stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Individual Stat Item */
.stat-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.8rem;
    transition: all 0.2s ease;
}

.stat-item:hover {
    color: rgba(255, 255, 255, 0.9);
}

.stat-item i {
    font-size: 0.6rem;
    opacity: 0.5;
}

.stat-item:hover i {
    opacity: 0.8;
}

.stat-num {
    font-family: 'Syncopate', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

/* Divider */
.stat-divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
}

/* Live Indicator */
.stat-live {
    color: rgba(52, 211, 153, 0.8);
}

.stat-live:hover {
    color: #34d399;
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}

.live-dot {
    width: 6px;
    height: 6px;
    background: #34d399;
    border-radius: 50%;
    animation: live-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px #34d399;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Likes - Pink */
.stat-likes i { color: rgba(255, 105, 180, 0.6); }
.stat-likes:hover { color: #ff69b4; }
.stat-likes:hover i { color: #ff69b4; opacity: 1; }

/* Particles - Cyan */
.stat-particles i { color: rgba(0, 255, 255, 0.6); }
.stat-particles:hover { color: #00ffff; }
.stat-particles:hover i { color: #00ffff; opacity: 1; }

/* Mini Stats (Effects) */
.stats-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
}

.mini-stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s ease;
}

.mini-stat:hover {
    color: rgba(255, 255, 255, 0.6);
}

.mini-stat i {
    font-size: 0.5rem;
    opacity: 0.5;
}

.mini-stat span {
    font-family: 'Syncopate', sans-serif;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
    .stats-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .stat-divider {
        display: none;
    }
    
    .stat-item {
        padding: 0.3rem 0.5rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 4px;
    }
    
    .stats-mini {
        gap: 0.6rem;
    }
}

/* Snake Animation for Seekbar */
@keyframes snake {
    0% { background-position: 0% 50%; box-shadow: 0 0 10px var(--neon-primary); }
    50% { background-position: 100% 50%; box-shadow: 0 0 20px var(--neon-secondary); }
    100% { background-position: 0% 50%; box-shadow: 0 0 10px var(--neon-primary); }
}

.animate-snake {
    background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary), var(--neon-primary));
    background-size: 200% 200%;
    animation: snake 3s ease infinite;
}

@keyframes spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}
.animate-spin-reverse {
    animation: spin-reverse 10s linear infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes vibrate {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}
.animate-vibrate {
    animation: vibrate 0.3s linear infinite;
}

.bump {
    transform: scale(1.05);
    filter: brightness(1.3);
    transition: transform 0.05s, filter 0.05s;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .glass-panel {
        backdrop-filter: none;
        background: rgba(20, 20, 20, 0.95);
    }
    .bg-fog {
        animation: none;
        background: #050505; 
    }
    .animate-float {
        animation: none;
    }
    
    /* Ensure glow is visible on mobile */
    .animate-snake {
        box-shadow: 0 0 15px var(--neon-primary);
    }
    .title-glow {
        text-shadow: 0 0 15px var(--neon-primary);
    }
}

/* Consumed Animation */
@keyframes consumed-in {
    0% { 
        opacity: 0; 
        transform: scale(0.8); 
        filter: blur(10px); 
        letter-spacing: 0.5em; 
        color: var(--neon-secondary);
    }
    30% { 
        opacity: 1; 
        transform: scale(1); 
        filter: blur(0px); 
        letter-spacing: 0.1em; 
        color: white;
        text-shadow: 0 0 20px var(--neon-secondary), 0 0 40px var(--neon-primary);
    }
    80% {
        opacity: 1;
        transform: scale(1.05);
        letter-spacing: 0.15em;
        color: white;
        text-shadow: 0 0 40px var(--neon-secondary), 0 0 80px white;
    }
    100% { 
        opacity: 0; 
        transform: scale(1.2); 
        filter: blur(20px); 
        letter-spacing: 1em; 
        color: transparent; 
    }
}
.animate-consumed {
    animation: consumed-in 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Marquee for long track titles */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

.marquee-text {
    display: inline-block;
    animation: marquee 20s linear infinite;
}

/* Fog Animation - CSS Only */
@keyframes fog-flow {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}
@keyframes fog-flow-2 {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-fog-flow {
    animation: fog-flow 30s linear infinite;
}
.animate-fog-flow-2 {
    animation: fog-flow-2 45s linear infinite;
}

/* Effect Active State */
.effect-active {
    background-color: var(--neon-primary) !important;
    color: black !important;
    border-color: var(--neon-primary) !important;
    box-shadow: 0 0 20px var(--neon-primary);
}

#btnStrobo.effect-active {
    background-color: white !important;
    border-color: white !important;
    box-shadow: 0 0 20px white;
}

#btnLaser.effect-active {
    background-color: var(--neon-secondary) !important;
    border-color: var(--neon-secondary) !important;
    box-shadow: 0 0 20px var(--neon-secondary);
}

/* Strobo - Handled by JS */
.strobo-active {
    opacity: 0.8 !important;
}

/* UFO Seeker Animation */
@keyframes ufo-hover {
    0%, 100% { transform: translateY(-50%) translateX(-50%) rotate(0deg); }
    25% { transform: translateY(-52%) translateX(-50%) rotate(-1deg); }
    75% { transform: translateY(-48%) translateX(-50%) rotate(1deg); }
}

#ufoSeeker {
    animation: ufo-hover 2s ease-in-out infinite;
}

/* Searchlights - Hardware accelerated */
@keyframes searchlight-left {
    0% { transform: rotate(10deg) scaleY(1) translateZ(0); opacity: 0.1; }
    50% { transform: rotate(30deg) scaleY(1.5) translateZ(0); opacity: 0.3; }
    100% { transform: rotate(10deg) scaleY(1) translateZ(0); opacity: 0.1; }
}
@keyframes searchlight-right {
    0% { transform: rotate(-10deg) scaleY(1) translateZ(0); opacity: 0.1; }
    50% { transform: rotate(-30deg) scaleY(1.5) translateZ(0); opacity: 0.3; }
    100% { transform: rotate(-10deg) scaleY(1) translateZ(0); opacity: 0.1; }
}

.animate-searchlight-left {
    animation: searchlight-left 6s ease-in-out infinite;
    background: linear-gradient(to bottom, var(--neon-primary), transparent);
    width: 15px;
    /* OPTIMIZATION: Reduced blur 2px→1.5px (25% faster) */
    filter: blur(1.5px);
    will-change: transform, opacity; /* Performance hint */
    transform: translateZ(0); /* Force GPU layer */
    /* OPTIMIZATION: Isolate layout */
    contain: layout paint;
}
.animate-searchlight-right {
    animation: searchlight-right 7s ease-in-out infinite;
    background: linear-gradient(to bottom, var(--neon-secondary), transparent);
    width: 15px;
    /* OPTIMIZATION: Reduced blur 2px→1.5px (25% faster) */
    filter: blur(1.5px);
    will-change: transform, opacity;
    transform: translateZ(0);
    /* OPTIMIZATION: Isolate layout */
    contain: layout paint;
}

/* Extra Searchlights */
.animate-searchlight-left-2 {
    animation: searchlight-left 8s ease-in-out infinite reverse;
    background: linear-gradient(to bottom, var(--neon-tertiary), transparent);
    width: 12px;
    /* OPTIMIZATION: Reduced blur 2px→1.5px (25% faster) */
    filter: blur(1.5px);
    opacity: 0.6;
    will-change: transform, opacity;
    transform: translateZ(0);
    /* OPTIMIZATION: Isolate layout */
    contain: layout paint;
}
.animate-searchlight-right-2 {
    animation: searchlight-right 9s ease-in-out infinite reverse;
    background: linear-gradient(to bottom, white, transparent);
    width: 12px;
    /* OPTIMIZATION: Reduced blur 2px→1.5px (25% faster) */
    filter: blur(1.5px);
    opacity: 0.4;
    will-change: transform, opacity;
    transform: translateZ(0);
    /* OPTIMIZATION: Isolate layout */
    contain: layout paint;
}

/* Eye Animation (when playing) */
/* Eye follows cursor - controlled by JS */
.fa-eye {
    transition: transform 0.1s ease-out;
}

/* Party Modes - Modified to work WITH intoxication */
body.party-off:not(.intox-level-1):not(.intox-level-2):not(.intox-level-3):not(.intox-level-4):not(.intox-level-5) {
    filter: brightness(0.8) saturate(0.8);
    transition: filter 1.5s ease;
}
body.party-on:not(.intox-level-1):not(.intox-level-2):not(.intox-level-3):not(.intox-level-4):not(.intox-level-5) {
    filter: brightness(1.1) saturate(1.2);
    transition: filter 0.5s ease;
}

/* Intoxication ALWAYS overrides party modes */
body.party-on.intox-level-1,
body.party-on.intox-level-2,
body.party-on.intox-level-3,
body.party-on.intox-level-4,
body.party-on.intox-level-5,
body.party-off.intox-level-1,
body.party-off.intox-level-2,
body.party-off.intox-level-3,
body.party-off.intox-level-4,
body.party-off.intox-level-5 {
    /* Filter is set by intox levels below */
    transition: filter 0.5s ease, transform 0.3s ease;
}

/* Play Button Idle State */
@keyframes play-idle-pulse {
    0% { box-shadow: 0 0 20px var(--neon-primary); transform: scale(1); }
    50% { box-shadow: 0 0 50px var(--neon-secondary); transform: scale(1.05); }
    100% { box-shadow: 0 0 20px var(--neon-primary); transform: scale(1); }
}

.party-off #playTrigger {
    animation: play-idle-pulse 2s infinite;
    background: rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.5);
    z-index: 50; /* Ensure it's on top */
}

.party-on #playTrigger {
    animation: none !important; /* Explicitly disable animation when playing */
    /* box-shadow set via inline style (JS) for proper CSS var evaluation */
}

.party-off #playIcon {
    filter: drop-shadow(0 0 10px white);
    opacity: 1;
}

.party-off #coreSystem {
    box-shadow: none !important;
    opacity: 1; /* Keep visualizer container visible but idle */
}
/* Strobe layer - NO transition for instant flash effect */
#stroboLayer {
    transition: none !important; /* Critical: instant opacity changes for strobe */
    pointer-events: none;
}

.party-off #searchlights,
.party-off #fogLayer,
.party-off #laserCanvas {
    opacity: 0 !important;
    transition: opacity 1.5s ease;
}

.party-off #stroboLayer {
    opacity: 0 !important;
    /* No transition here - would kill strobe effect */
}

/* Disable all effect buttons when not playing - but keep visible! */
/* Exception: Drink button always works! */
.party-off .action-btn:not(.drink-btn) {
    opacity: 0.4 !important;
    pointer-events: none !important;
    filter: grayscale(0.8) !important;
}

/* Drink button always active */
.party-off .drink-btn {
    opacity: 0.7 !important;
    pointer-events: auto !important;
    filter: none !important;
}

/* Also disable like button when not playing */
.party-off #likeBtn {
    opacity: 0.3 !important;
    pointer-events: none !important;
}
.party-on #searchlights {
    opacity: 1;
}

/* Responsive Layout Modes */
.landscape-mobile {
    --dynamic-gap: 0.5rem;
    --dynamic-padding: 1rem;
}

.portrait-mobile {
    --dynamic-gap: 1rem;
    --dynamic-padding: 1rem;
}

.tablet-mode {
    --dynamic-gap: 1.5rem;
    --dynamic-padding: 2.5rem;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    :root {
        --dynamic-title-size: clamp(2.5rem,12vw,4rem);
        --dynamic-player-size: min(80vw,250px);
        --dynamic-track-title-size: 1.3rem; /* Larger on mobile */
        --dynamic-stats-size: 7px;
        --dynamic-control-size: 0.8rem;
        --dynamic-action-button-size: 2rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --dynamic-title-size: clamp(5rem,10vw,8rem);
        --dynamic-player-size: min(40vw,300px);
        --dynamic-track-title-size: 1.5rem;
        --dynamic-stats-size: 11px;
        --dynamic-control-size: 1rem;
        --dynamic-action-button-size: 2.5rem;
    }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Target: 60fps on mid-range phones
   ============================================ */

/* Base mobile optimizations */
.is-mobile {
    /* Force GPU acceleration on key elements */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Disable expensive effects on mobile */
.is-mobile .glass-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 15, 15, 0.95) !important;
}

/* Simplified shadows on mobile */
.is-mobile .animate-snake {
    box-shadow: 0 0 15px var(--neon-primary) !important;
    animation-duration: 6s !important;
}

.is-mobile .title-glow {
    text-shadow: 0 0 12px var(--neon-primary) !important;
}

.is-mobile .track-title-glow {
    text-shadow: 0 0 8px var(--neon-primary) !important;
    filter: none !important;
}

/* Disable blur on searchlights - HUGE perf gain */
.is-mobile .animate-searchlight-left,
.is-mobile .animate-searchlight-right {
    filter: none !important;
    opacity: 0.5 !important;
}

/* Hide extra searchlights on mobile */
.is-mobile .animate-searchlight-left-2,
.is-mobile .animate-searchlight-right-2 {
    display: none !important;
}

/* Disable vibration animation on mobile */
.is-mobile .animate-vibrate {
    animation: none !important;
}

/* Slower marquee = less CPU */
.is-mobile .marquee-text {
    animation-duration: 10s !important;
}

/* UFO seeker - simpler animation */
.is-mobile #ufoSeeker {
    animation-duration: 5s !important;
    filter: none !important;
}

/* Simplified party mode filter */
.is-mobile .party-on {
    filter: brightness(1.03) !important;
}

/* LOW-END DEVICE OPTIMIZATIONS */
.is-low-end .animate-float,
.is-low-end .animate-snake,
.is-low-end .animate-searchlight-left,
.is-low-end .animate-searchlight-right {
    animation: none !important;
}

.is-low-end #searchlights {
    display: none !important;
}

.is-low-end .party-on {
    filter: none !important;
}

/* CSS Heart Shape - Perfect heart proportions */
.css-heart {
    position: relative;
    width: 1em;
    height: 0.9em;
    display: inline-block;
}

.css-heart::before,
.css-heart::after {
    content: "";
    position: absolute;
    top: 0;
    width: 0.5em;
    height: 0.8em;
    background: currentColor;
    border-radius: 0.5em 0.5em 0 0;
}

.css-heart::before {
    left: 0.5em;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.css-heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

/* Floating hearts animation - DESKTOP (full effect) */
@keyframes floatHeart {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(0) translateX(0) rotate(0deg) scale(0);
    }
    8% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(-5px) translateX(0) rotate(0deg) scale(1.3);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(-15px) translateX(calc(var(--float-x, 0) * 0.1)) rotate(calc(var(--float-rotate, 0) * 0.1)) scale(1);
    }
    70% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(var(--float-y, -200px)) translateX(var(--float-x, 0)) rotate(var(--float-rotate, 0)) scale(0.3);
    }
}

/* MOBILE: Simplified heart animation (GPU optimized) */
.is-mobile @keyframes floatHeart {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(var(--float-y, -100px)) translateX(var(--float-x, 0)) scale(0.5);
    }
}

/* ============================================
   MYSTICAL LIKE PULSE EFFECT
   Shows when another user likes a track
   Dezent - Glow IN der Schrift, nicht aussen
   ============================================ */

/* Glowing pulse on the icon - DEZENT, inner glow */
.like-pulse-glow {
    animation: like-icon-glow 2s ease-out forwards !important;
}

@keyframes like-icon-glow {
    0% {
        color: #f472b6;
        text-shadow: none;
    }
    20% {
        color: #fff;
        text-shadow: 0 0 8px #ff69b4, 0 0 15px #ff1493;
    }
    40% {
        color: #fce7f3;
        text-shadow: 0 0 5px #ff69b4;
    }
    60% {
        color: #fff;
        text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff1493;
    }
    100% {
        color: #f472b6;
        text-shadow: none;
    }
}

/* Subtle sparkle particles */
@keyframes sparkle-float {
    0% {
        opacity: 0.8;
        transform: scale(0.5) translateY(0);
    }
    50% {
        opacity: 0.6;
        transform: scale(1) translateY(-10px);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translateY(-20px);
    }
}

/* ============================================
   EFFECT BUTTONS - Laser & Rocket
   ============================================ */

/* Firing animation for effect buttons */
.effect-firing {
    animation: effect-fire 0.3s ease-out !important;
}

@keyframes effect-fire {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 currentColor;
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 20px 5px currentColor;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 currentColor;
    }
}

/* Laser button glow */
#btnLaser:hover {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

#btnLaser.effect-firing {
    background: rgba(0, 255, 255, 0.3) !important;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.6) !important;
}

/* Rocket button glow */
#btnRocket:hover {
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.4);
}

#btnRocket.effect-firing {
    background: rgba(255, 165, 0, 0.3) !important;
    box-shadow: 0 0 25px rgba(255, 165, 0, 0.6) !important;
}

/* ============================================
   RANK BADGES - Award-Winning Design
   Same icons as Analytics Dashboard
   ============================================ */

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    color: var(--badge-color, #fff);
    text-shadow: var(--badge-glow, none);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: badge-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    position: relative;
    overflow: visible;
}

/* Entrance animation */
@keyframes badge-entrance {
    0% { 
        transform: scale(0) rotate(-180deg); 
        opacity: 0; 
    }
    60% { 
        transform: scale(1.2) rotate(10deg); 
    }
    100% { 
        transform: scale(1) rotate(0deg); 
        opacity: 1; 
    }
}

/* Subtle pulse for top 3 */
.rank-play-1, .rank-play-2, .rank-play-3,
.rank-like-1, .rank-like-2, .rank-like-3 {
    animation: badge-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               badge-glow-pulse 3s ease-in-out infinite 0.6s;
}

@keyframes badge-glow-pulse {
    0%, 100% { 
        filter: drop-shadow(var(--badge-glow));
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(var(--badge-glow)) brightness(1.2);
        transform: scale(1.05);
    }
}

/* Play Rank Badges - Top 8 */
.rank-play-1 {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.3), rgba(234, 179, 8, 0.2));
    border-color: rgba(250, 204, 21, 0.5);
}

.rank-play-2 {
    background: linear-gradient(135deg, rgba(229, 231, 235, 0.25), rgba(156, 163, 175, 0.15));
    border-color: rgba(229, 231, 235, 0.4);
}

.rank-play-3 {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.25), rgba(180, 83, 9, 0.15));
    border-color: rgba(217, 119, 6, 0.4);
}

.rank-play-4 {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
}

.rank-play-5 {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.25);
}

.rank-play-6 {
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.2);
}

.rank-play-7 {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.15);
}

.rank-play-8 {
    background: rgba(248, 113, 113, 0.06);
    border-color: rgba(248, 113, 113, 0.12);
}

/* Like Rank Badges - Top 8 */
.rank-like-1 {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.35), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.5);
}

.rank-like-2 {
    background: linear-gradient(135deg, rgba(249, 168, 212, 0.25), rgba(244, 114, 182, 0.15));
    border-color: rgba(249, 168, 212, 0.4);
}

.rank-like-3 {
    background: linear-gradient(135deg, rgba(251, 207, 232, 0.2), rgba(249, 168, 212, 0.1));
    border-color: rgba(251, 207, 232, 0.35);
}

.rank-like-4, .rank-like-5, .rank-like-6, .rank-like-7, .rank-like-8 {
    background: rgba(236, 72, 153, 0.08);
    border-color: rgba(236, 72, 153, 0.15);
}

/* Hover effect */
.rank-badge:hover {
    transform: scale(1.15);
    transition: transform 0.2s ease;
}

/* ============================================
   BASS-REACTIVE EFFECTS - ULTRA INTENSE!
   ============================================ */

@keyframes bass-flash {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.05); }
}

@keyframes mid-pulse {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

@keyframes high-sparkle {
    0% { opacity: 1; transform: scale(0); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* Bass shake class (applied via JS) */
.bass-shake {
    animation: bass-shake-anim 0.1s ease-out;
}

@keyframes bass-shake-anim {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-8px, 4px) rotate(-1deg); }
    20% { transform: translate(6px, -6px) rotate(1deg); }
    30% { transform: translate(-4px, 2px) rotate(-0.5deg); }
    40% { transform: translate(4px, -2px) rotate(0.5deg); }
    50% { transform: translate(-2px, 4px) rotate(-0.3deg); }
    60% { transform: translate(2px, -2px) rotate(0.3deg); }
    70% { transform: translate(-1px, 1px) rotate(0deg); }
}

/* Frequency-reactive body states */
body.bass-active {
    animation: bass-pulse 0.1s ease-out;
}

@keyframes bass-pulse {
    0% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.3) saturate(1.5); }
    100% { filter: brightness(1) saturate(1); }
}

/* Screen edge glow on bass */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9996;
    opacity: 0;
    transition: opacity 0.1s ease;
    background: 
        radial-gradient(ellipse 100% 20% at 50% 100%, var(--neon-secondary), transparent),
        radial-gradient(ellipse 100% 20% at 50% 0%, var(--neon-primary), transparent);
}

body.party-on::after {
    opacity: var(--bass-glow-opacity, 0);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT - Perfect Fit for All Screen Sizes
   Using vmin for viewport-adaptive sizing
   ═══════════════════════════════════════════════════════════════ */

/* Main container - fills viewport perfectly, allows scroll if needed */
#mainContainer {
    min-height: 100dvh;
    height: auto;
    box-sizing: border-box;
}

/* Prevent scrollbars - app is single-page viewport-sized */
body {
    overflow: hidden !important; /* No scrollbars, visualizer renders within bounds */
}

/* Logo size - adapts to viewport */
#mainLogo {
    height: clamp(2.5rem, 10vmin, 6rem) !important;
}

/* RUMPEL text - viewport adaptive */
#mainContainer > div:first-child h1 {
    font-size: clamp(0.9rem, 4vmin, 2rem) !important;
}

/* Kistli Club text */
#mainContainer > div:first-child > span {
    font-size: clamp(6px, 1.5vmin, 12px) !important;
}

/* Player/Visualizer - uses CSS variables */
#coreSystem {
    width: var(--dynamic-player-size) !important;
    height: var(--dynamic-player-size) !important;
    /* OPTIMIZATION: GPU acceleration + layout isolation */
    transform: translateZ(0);
    will-change: transform, opacity;
    contain: layout; /* Paint containment removed to allow visualizer bars to overflow */
    overflow: visible; /* Explicitly allow overflow for visualizer bars */
}

#playTrigger {
    width: var(--dynamic-play-button-size) !important;
    height: var(--dynamic-play-button-size) !important;
    border-radius: 50%; /* Circular shape for radial glow effect */
    /* OPTIMIZATION: GPU acceleration */
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

#playIcon {
    font-size: var(--dynamic-play-icon-size) !important;
    /* OPTIMIZATION: GPU acceleration for eye movement */
    will-change: transform;
}

/* Track title */
#trackTitle {
    font-size: var(--dynamic-track-title-size) !important;
}

/* Action buttons */
.action-btn {
    width: clamp(28px, 8vmin, 40px) !important;
    height: clamp(28px, 8vmin, 40px) !important;
    font-size: clamp(0.6rem, 2vmin, 1rem) !important;
    /* OPTIMIZATION: GPU acceleration */
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* Add Track Button - matches shuffle button height EXACTLY */
#shuffleContainer {
    align-items: stretch;
}

#addTrackBtn {
    /* Height matches the shuffle button's padding + content */
    padding: 0.8rem;
    aspect-ratio: 1;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP - Large screens (height > 850px)
   ═══════════════════════════════════════════════════════════════ */

@media (min-height: 850px) {
    :root {
        --container-padding: 3rem 2rem;
        --dynamic-player-size: clamp(180px, 25vmin, 280px);
        --dynamic-play-button-size: clamp(80px, 12vmin, 120px);
        --dynamic-gap: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MEDIUM DESKTOP - MacBook-sized screens (750-850px)
   ═══════════════════════════════════════════════════════════════ */

@media (min-height: 750px) and (max-height: 850px) {
    :root {
        --container-padding: 1rem 1.5rem 1.5rem 1.5rem;
        --dynamic-player-size: clamp(100px, 16vmin, 160px);
        --dynamic-play-button-size: clamp(50px, 8vmin, 75px);
        --dynamic-play-icon-size: clamp(1.1rem, 3vmin, 1.7rem);
        --dynamic-gap: 0.4rem;
        --dynamic-title-size: clamp(1.8rem, 5vmin, 3.5rem);
        --dynamic-track-title-size: clamp(0.7rem, 1.8vmin, 1.1rem);
    }
    
    #mainLogo {
        height: clamp(2rem, 6vmin, 3.5rem) !important;
    }
    
    #mainContainer > div:first-child h1 {
        font-size: clamp(0.8rem, 3vmin, 1.3rem) !important;
        margin-top: 0.2rem !important;
    }
    
    #mainContainer > div:first-child > span {
        font-size: clamp(5px, 1vmin, 8px) !important;
        margin-top: 0.1rem !important;
    }
    
    /* Compact stats */
    .stats-bar {
        margin-top: 0.25rem !important;
        gap: 0.2rem !important;
    }
    
    .stat-item {
        padding: 0.15rem 0.35rem !important;
        font-size: 0.55rem !important;
    }
    
    .stats-mini {
        margin-top: 0.15rem !important;
        gap: 0.35rem !important;
        font-size: 0.45rem !important;
    }
    
    /* Add Track Button */
    #mainContainer > div:first-child > div:last-child {
        margin-top: 0.2rem !important;
    }
    
    #mainContainer > div:first-child > div:last-child button {
        padding: 0.2rem 0.4rem !important;
        font-size: 6px !important;
    }
    
    /* Shuffle button */
    #shuffleBtn {
        padding: 0.5rem 1.2rem !important;
    }
    
    #shuffleBtn span {
        font-size: 9px !important;
    }
    
    /* Add Track Button - match shuffle button */
    #addTrackBtn {
        padding: 0.5rem 0.5rem !important;
    }
    
    /* Action buttons */
    .action-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.7rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PORTRAIT - Small height screens (< 750px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-height: 750px) {
    :root {
        --container-padding: 1rem 1rem 2.5rem 1rem;
        --dynamic-title-size: clamp(1.8rem, 6vmin, 3.5rem);
        --dynamic-player-size: clamp(90px, 20vmin, 160px);
        --dynamic-play-button-size: clamp(50px, 10vmin, 75px);
        --dynamic-play-icon-size: clamp(1rem, 3.5vmin, 1.8rem);
        --dynamic-gap: 0.4rem;
        --dynamic-track-title-size: clamp(0.65rem, 1.8vmin, 0.95rem);
        --dynamic-stats-size: clamp(6px, 1.1vmin, 8px);
    }
    
    /* Logo smaller */
    #mainLogo {
        height: clamp(2rem, 7vmin, 4rem) !important;
    }
    
    #mainContainer > div:first-child h1 {
        font-size: clamp(0.75rem, 3vmin, 1.3rem) !important;
        margin-top: 0.2rem !important;
    }
    
    #mainContainer > div:first-child > span {
        font-size: clamp(5px, 1vmin, 8px) !important;
        margin-top: 0.15rem !important;
    }
    
    /* Compact stats */
    .stats-bar {
        margin-top: 0.25rem !important;
        gap: 0.2rem !important;
        flex-wrap: wrap;
    }
    
    .stat-item {
        padding: 0.12rem 0.3rem !important;
        font-size: 0.5rem !important;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 3px;
    }
    
    .stat-num {
        font-size: 0.55rem !important;
    }
    
    .stat-divider {
        display: none;
    }
    
    .live-dot {
        width: 4px;
        height: 4px;
    }
    
    /* Mini Stats - Hide on very small */
    .stats-mini {
        margin-top: 0.15rem !important;
        gap: 0.3rem !important;
        font-size: 0.4rem !important;
    }
    
    .mini-stat i {
        font-size: 0.35rem !important;
    }
    
    /* Add Track Button */
    #mainContainer > div:first-child > div:last-child {
        margin-top: 0.25rem !important;
    }
    
    #mainContainer > div:first-child > div:last-child button {
        padding: 0.2rem 0.4rem !important;
        font-size: 5px !important;
    }
    
    /* Rank badges */
    .rank-badge {
        width: 16px !important;
        height: 16px !important;
        font-size: 7px !important;
    }
    
    /* Seekbar */
    #progressBarContainer {
        height: 2rem !important;
    }
    
    #ufoSeeker img {
        width: 16px !important;
        height: 16px !important;
    }
    
    #currentTime, #totalDuration {
        font-size: 6px !important;
    }
    
    /* Like/Report buttons */
    #likeBtn {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.4rem !important;
    }
    
    #likeCount {
        font-size: 0.6rem !important;
    }
    
    /* Shuffle button */
    #shuffleBtn {
        padding: 0.5rem 1rem !important;
    }
    
    #shuffleBtn span {
        font-size: 8px !important;
    }
    
    #shuffleBtn i {
        font-size: 0.7rem !important;
    }
    
    /* Add Track Button - match shuffle button */
    #addTrackBtn {
        padding: 0.5rem 0.5rem !important;
    }
    
    /* Action buttons smaller */
    .action-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.6rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   VERY SMALL SCREENS (iPhone SE, small Android, < 650px height)
   ═══════════════════════════════════════════════════════════════ */

@media (max-height: 650px) {
    :root {
        --container-padding: 0.75rem 0.75rem 2rem 0.75rem;
        --dynamic-title-size: clamp(1.5rem, 5vmin, 2.5rem);
        --dynamic-player-size: clamp(70px, 18vmin, 120px);
        --dynamic-play-button-size: clamp(40px, 9vmin, 60px);
        --dynamic-play-icon-size: clamp(0.9rem, 3vmin, 1.4rem);
        --dynamic-gap: 0.3rem;
        --dynamic-track-title-size: clamp(0.55rem, 1.5vmin, 0.8rem);
    }
    
    #mainLogo {
        height: clamp(1.8rem, 6vmin, 3rem) !important;
    }
    
    #mainContainer > div:first-child h1 {
        font-size: clamp(0.6rem, 2.5vmin, 1rem) !important;
        margin-top: 0.15rem !important;
    }
    
    #mainContainer > div:first-child > span {
        font-size: 4px !important;
        margin-top: 0.1rem !important;
        display: none; /* Hide Kistli Club on very small */
    }
    
    .stats-bar {
        margin-top: 0.15rem !important;
        gap: 0.15rem !important;
    }
    
    .stat-item {
        padding: 0.1rem 0.25rem !important;
        font-size: 0.45rem !important;
    }
    
    .stat-num {
        font-size: 0.5rem !important;
    }
    
    /* Hide mini stats on very small screens */
    .stats-mini {
        display: none !important;
    }
    
    /* Hide Add Track button */
    #mainContainer > div:first-child > div:last-child {
        display: none !important;
    }
    
    /* Smaller badges */
    .rank-badge {
        width: 14px !important;
        height: 14px !important;
        font-size: 6px !important;
    }
    
    /* Seekbar */
    #progressBarContainer {
        height: 1.8rem !important;
    }
    
    #ufoSeeker img {
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Like/Report even smaller */
    #likeBtn {
        font-size: 0.6rem !important;
        padding: 0.2rem 0.3rem !important;
    }
    
    /* Shuffle button compact */
    #shuffleBtn {
        padding: 0.4rem 0.8rem !important;
    }
    
    #shuffleBtn span {
        font-size: 7px !important;
    }
    
    #shuffleBtn i {
        font-size: 0.6rem !important;
    }
    
    /* Add Track Button - match shuffle button */
    #addTrackBtn {
        padding: 0.4rem 0.4rem !important;
    }
    
    .action-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE MOBILE
   ═══════════════════════════════════════════════════════════════ */

@media (max-height: 450px) and (orientation: landscape) {
    :root {
        --container-padding: 0.5rem 1rem;
        --dynamic-player-size: clamp(60px, 18vmin, 100px);
        --dynamic-play-button-size: clamp(35px, 10vmin, 55px);
        --dynamic-play-icon-size: clamp(0.8rem, 3vmin, 1.2rem);
        --dynamic-gap: 0.3rem;
    }
    
    #mainContainer {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    /* Hide some elements in landscape */
    .stats-mini,
    #mainContainer > div:first-child > div:last-child {
        display: none !important;
    }
    
    #mainLogo {
        height: clamp(1.5rem, 6vmin, 2.5rem) !important;
    }
    
    #mainContainer > div:first-child h1 {
        font-size: clamp(0.5rem, 2.5vmin, 0.9rem) !important;
    }
    
    #mainContainer > div:first-child > span {
        display: none !important;
    }
    
    .stats-bar {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CLASSIC BUTTON - Always visible
   ═══════════════════════════════════════════════════════════════ */

a[href="/past"] {
    bottom: clamp(0.3rem, 1vmin, 0.75rem) !important;
    left: clamp(0.3rem, 1vmin, 0.75rem) !important;
    padding: clamp(0.2rem, 0.8vmin, 0.4rem) clamp(0.4rem, 1vmin, 0.75rem) !important;
    font-size: clamp(6px, 1.2vmin, 10px) !important;
}

a[href="/past"] i {
    font-size: clamp(5px, 1vmin, 8px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   INTOXICATION SYSTEM - Drink Effects 🍹
   Progressive visual impairment as you drink more
   ═══════════════════════════════════════════════════════════════ */

/* Drink Button Styling */
.drink-btn {
    position: relative;
    z-index: 1;
}

.drink-btn i {
    position: relative;
    z-index: 2;
}

.drink-btn.on-cooldown {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.drink-btn.drink-pulse {
    animation: drink-pulse-anim 0.5s ease-out !important;
}

@keyframes drink-pulse-anim {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7); }
    50% { transform: scale(1.3); box-shadow: 0 0 20px 10px rgba(168, 85, 247, 0.4); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

/* Intoxication Level Bar - GPU OPTIMIZED */
#intoxicationBar {
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}

#intoxicationBar.visible {
    opacity: 1 !important;
}

/* Use transform:scaleX for GPU-accelerated bar animation */
#intoxicationLevel {
    transform-origin: left center;
    will-change: transform;
    transition: transform 0.3s ease-out, background 0.5s ease-out;
}

/* ═══════════════════════════════════════════════════════════════
   🍺 INTOXICATION SYSTEM - TOTAL CHAOS MODE 🍺
   No wobble - PURE DISTORTION, WARPING, DISPLACEMENT!
   Elements drift apart, perspective breaks, reality melts
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   - Use transform/opacity for GPU acceleration
   - Use will-change sparingly
   - Avoid filter animations where possible
   ═══════════════════════════════════════════════════════════════ */

/* Base - lock viewport, smooth transitions */
body.intox-level-1,
body.intox-level-2,
body.intox-level-3,
body.intox-level-4,
body.intox-level-5 {
    overflow: hidden !important;
    transition: filter 1s ease-out !important;
}

/* GPU acceleration hints for animated elements */
body.intox-level-1 #mainContainer,
body.intox-level-2 #mainContainer,
body.intox-level-3 #mainContainer,
body.intox-level-4 #mainContainer,
body.intox-level-5 #mainContainer {
    will-change: transform;
}

/* Action buttons: always visible, minimal animation */
body.intox-level-1 .action-btn,
body.intox-level-2 .action-btn,
body.intox-level-3 .action-btn,
body.intox-level-4 .action-btn,
body.intox-level-5 .action-btn {
    opacity: 1 !important;
    filter: none !important;
    will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════
   Level 1: TIPSY - Subtle drift (PERFORMANCE OPTIMIZED)
   ═══════════════════════════════════════════════════════════════ */
body.intox-level-1 {
    filter: blur(0.5px) hue-rotate(3deg) !important;
}

body.intox-level-1 #mainContainer {
    animation: drift-subtle 15s ease-in-out infinite;
}

body.intox-level-1 .action-btn { animation: drift-subtle 18s ease-in-out infinite; }
body.intox-level-1 .action-btn:nth-child(2) { animation-delay: -3s; }
body.intox-level-1 .action-btn:nth-child(3) { animation-delay: -6s; }
body.intox-level-1 .action-btn:nth-child(4) { animation-delay: -9s; }
body.intox-level-1 .action-btn:nth-child(5) { animation-delay: -12s; }

body.intox-level-1 #trackTitle,
body.intox-level-1 #shuffleBtn,
body.intox-level-1 .stats-bar { animation: drift-subtle 12s ease-in-out infinite; }

/* SHARED KEYFRAMES - Less code, better performance */
@keyframes drift-subtle {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(3px, 2px, 0); }
}

/* ═══════════════════════════════════════════════════════════════
   Level 2: BUZZED - More movement (PERFORMANCE OPTIMIZED)
   ═══════════════════════════════════════════════════════════════ */
body.intox-level-2 {
    filter: blur(1px) hue-rotate(6deg) contrast(1.05) !important;
}

body.intox-level-2 #mainContainer {
    animation: drift-medium 12s ease-in-out infinite;
}

body.intox-level-2 .action-btn { animation: drift-medium 15s ease-in-out infinite; }
body.intox-level-2 .action-btn:nth-child(2) { animation-delay: -3s; }
body.intox-level-2 .action-btn:nth-child(3) { animation-delay: -6s; }
body.intox-level-2 .action-btn:nth-child(4) { animation-delay: -9s; }
body.intox-level-2 .action-btn:nth-child(5) { animation-delay: -12s; }

body.intox-level-2 #shuffleBtn,
body.intox-level-2 #addTrackBtn,
body.intox-level-2 #trackTitle,
body.intox-level-2 .stats-bar { animation: drift-medium 10s ease-in-out infinite; }

body.intox-level-2 #playTrigger,
body.intox-level-2 #coreSystem { animation: pulse-subtle 8s ease-in-out infinite; }

/* Double vision ghost */
body.intox-level-2 #mainLogo {
    text-shadow: 4px 3px 0 rgba(255,0,100,0.2), -4px -3px 0 rgba(0,100,255,0.2);
}

@keyframes drift-medium {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(5px, 4px, 0) rotate(0.5deg); }
}

@keyframes pulse-subtle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ═══════════════════════════════════════════════════════════════
   Level 3: DRUNK - More movement (PERFORMANCE OPTIMIZED)
   ═══════════════════════════════════════════════════════════════ */
body.intox-level-3 {
    filter: blur(1.5px) hue-rotate(10deg) contrast(1.08) saturate(1.12) !important;
}

body.intox-level-3::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
    z-index: 9990;
}

body.intox-level-3 #mainContainer {
    animation: drift-heavy 10s ease-in-out infinite;
}

body.intox-level-3 .action-btn { animation: drift-heavy 12s ease-in-out infinite; }
body.intox-level-3 .action-btn:nth-child(2) { animation-delay: -2.4s; }
body.intox-level-3 .action-btn:nth-child(3) { animation-delay: -4.8s; }
body.intox-level-3 .action-btn:nth-child(4) { animation-delay: -7.2s; }
body.intox-level-3 .action-btn:nth-child(5) { animation-delay: -9.6s; }

body.intox-level-3 #shuffleBtn,
body.intox-level-3 #addTrackBtn,
body.intox-level-3 #trackTitle,
body.intox-level-3 .stats-bar,
body.intox-level-3 #likeBtn { animation: drift-heavy 8s ease-in-out infinite; }

body.intox-level-3 #coreSystem,
body.intox-level-3 #playTrigger { animation: pulse-medium 6s ease-in-out infinite; }

/* Chromatic aberration */
body.intox-level-3 #mainLogo {
    text-shadow: 6px 4px 0 rgba(255,0,100,0.3), -6px -4px 0 rgba(0,100,255,0.3);
}

@keyframes drift-heavy {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(8px, 6px, 0) rotate(1deg); }
}

@keyframes pulse-medium {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.03) rotate(1deg); }
}

/* ═══════════════════════════════════════════════════════════════
   Level 4: WASTED - Heavy movement (PERFORMANCE OPTIMIZED)
   ═══════════════════════════════════════════════════════════════ */
body.intox-level-4 {
    filter: blur(2px) hue-rotate(15deg) contrast(1.12) saturate(1.15) brightness(0.92) !important;
}

body.intox-level-4::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 15%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 9990;
}

body.intox-level-4 #mainContainer {
    animation: drift-extreme 8s ease-in-out infinite;
}

body.intox-level-4 .action-btn { animation: drift-extreme 10s ease-in-out infinite; }
body.intox-level-4 .action-btn:nth-child(2) { animation-delay: -2s; }
body.intox-level-4 .action-btn:nth-child(3) { animation-delay: -4s; }
body.intox-level-4 .action-btn:nth-child(4) { animation-delay: -6s; }
body.intox-level-4 .action-btn:nth-child(5) { animation-delay: -8s; }

body.intox-level-4 #shuffleBtn,
body.intox-level-4 #addTrackBtn,
body.intox-level-4 #trackTitle,
body.intox-level-4 .stats-bar,
body.intox-level-4 #likeBtn { animation: drift-extreme 6s ease-in-out infinite; }

body.intox-level-4 #coreSystem,
body.intox-level-4 #playTrigger { animation: pulse-heavy 5s ease-in-out infinite; }

/* Heavy chromatic aberration */
body.intox-level-4 #mainLogo {
    text-shadow: 10px 7px 0 rgba(255,0,100,0.4), -10px -7px 0 rgba(0,100,255,0.4);
}

@keyframes drift-extreme {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(12px, 10px, 0) rotate(2deg); }
}

@keyframes pulse-heavy {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.05) rotate(2deg); }
}

/* ═══════════════════════════════════════════════════════════════
   Level 5: BLACKOUT - Maximum chaos (PERFORMANCE OPTIMIZED)
   ═══════════════════════════════════════════════════════════════ */
body.intox-level-5 {
    filter: blur(3px) hue-rotate(25deg) contrast(1.2) saturate(0.65) brightness(0.75) !important;
}

body.intox-level-5::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 15%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 9990;
}

/* Occasional blackout flashes - simplified */
body.intox-level-5::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    z-index: 9991;
    animation: blackout-flash 5s ease-in-out infinite;
}

body.intox-level-5 #mainContainer {
    animation: drift-chaos 6s ease-in-out infinite;
}

body.intox-level-5 .action-btn { animation: drift-chaos 8s ease-in-out infinite; }
body.intox-level-5 .action-btn:nth-child(2) { animation-delay: -1.6s; }
body.intox-level-5 .action-btn:nth-child(3) { animation-delay: -3.2s; }
body.intox-level-5 .action-btn:nth-child(4) { animation-delay: -4.8s; }
body.intox-level-5 .action-btn:nth-child(5) { animation-delay: -6.4s; }

body.intox-level-5 #shuffleBtn,
body.intox-level-5 #addTrackBtn,
body.intox-level-5 #trackTitle,
body.intox-level-5 .stats-bar,
body.intox-level-5 #likeBtn { animation: drift-chaos 5s ease-in-out infinite; }

body.intox-level-5 #coreSystem,
body.intox-level-5 #playTrigger { animation: pulse-chaos 4s ease-in-out infinite; }

/* Extreme chromatic aberration */
body.intox-level-5 #mainLogo {
    text-shadow: 15px 12px 0 rgba(255,0,100,0.5), -15px -12px 0 rgba(0,100,255,0.5);
}

@keyframes drift-chaos {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(15px, 12px, 0) rotate(3deg); }
}

@keyframes pulse-chaos {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.08) rotate(3deg); }
}

@keyframes blackout-flash {
    0%, 70%, 100% { opacity: 0; }
    75% { opacity: 0.5; background: #000; }
    80% { opacity: 0; }
}

/* Drink splash effect */
@keyframes drink-splash {
    0% {
        opacity: 1;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.5) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(2) rotate(360deg);
    }
}

/* Floating drink emoji effect */
.floating-drink {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    z-index: 9999;
    animation: float-drink 2s ease-out forwards;
}

@keyframes float-drink {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-50px) rotate(20deg) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-150px) rotate(-10deg) scale(0.5);
    }
}

/* Intoxication status text animation */
#intoxicationText {
    transition: all 0.3s ease;
}

body.intox-level-3 #intoxicationText,
body.intox-level-4 #intoxicationText,
body.intox-level-5 #intoxicationText {
    animation: intox-text-wobble 1s ease-in-out infinite;
}

@keyframes intox-text-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    75% { transform: rotate(-1deg); }
}

/* ═══════════════════════════════════════════════════════════════
   WASTED ANIMATION - GTA-style when max intoxication reached
   ═══════════════════════════════════════════════════════════════ */

#wastedText {
    font-family: 'Syncopate', sans-serif;
    letter-spacing: 0.5em;
}

.animate-wasted {
    animation: wasted-in 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes wasted-in {
    0% { 
        opacity: 0; 
        transform: scale(3) rotate(-5deg); 
        filter: blur(30px); 
        letter-spacing: 1em;
        color: #ff0000;
    }
    15% {
        opacity: 1;
        transform: scale(1.2) rotate(2deg);
        filter: blur(0px);
        letter-spacing: 0.3em;
        color: #ff3333;
    }
    25% {
        transform: scale(0.95) rotate(-1deg);
        letter-spacing: 0.4em;
    }
    35% {
        transform: scale(1.05) rotate(1deg);
        letter-spacing: 0.35em;
    }
    50% {
        transform: scale(1) rotate(0deg);
        letter-spacing: 0.4em;
        color: #cc0000;
        text-shadow: 0 0 50px #ff0000, 0 0 100px #ff0000, 0 0 150px #aa0000;
    }
    70% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    100% { 
        opacity: 0; 
        transform: scale(0.8) rotate(0deg); 
        filter: blur(10px); 
        letter-spacing: 0.6em;
        color: #660000;
    }
}

/* Screen flash red when WASTED */
body.wasted-flash::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(255, 0, 0, 0.3);
    pointer-events: none;
    z-index: 9995;
    animation: wasted-screen-flash 0.5s ease-out forwards;
}

@keyframes wasted-screen-flash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   💊 PILL SYSTEM - ECSTASY & LSD EFFECTS 💊
   Random effect when taking a pill - pure chaos!
   ═══════════════════════════════════════════════════════════════ */

/* Pill Button Styling */
.pill-btn {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(6, 182, 212, 0.15)) !important;
    border: 1px solid rgba(236, 72, 153, 0.3) !important;
}

.pill-btn:hover {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(6, 182, 212, 0.25)) !important;
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.4), 0 0 30px rgba(6, 182, 212, 0.3);
}

.pill-btn.pill-pulse {
    animation: pill-pulse-anim 0.8s ease-out !important;
}

@keyframes pill-pulse-anim {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7); }
    30% { transform: scale(1.4) rotate(15deg); box-shadow: 0 0 30px 15px rgba(6, 182, 212, 0.5); }
    60% { transform: scale(1.2) rotate(-10deg); }
    100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
}

/* ═══════════════════════════════════════════════════════════════
   💖 ECSTASY EFFECT - PURE LOVE, HEARTS EVERYWHERE 💖
   MAXIMUM INTENSITY - Overwhelming love explosion!
   ═══════════════════════════════════════════════════════════════ */

/* Ecstasy active state on body */
body.ecstasy-active {
    overflow: hidden !important;
    animation: ecstasy-body-pulse 2s ease-in-out infinite !important;
}

@keyframes ecstasy-body-pulse {
    0%, 100% { 
        filter: saturate(1.8) brightness(1.15) hue-rotate(-15deg) blur(0.5px); 
    }
    50% { 
        filter: saturate(2.2) brightness(1.25) hue-rotate(-5deg) blur(0px); 
    }
}

/* INTENSE Pink/Love overlay with multiple layers */
body.ecstasy-active::before {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(255, 0, 128, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 105, 180, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9985;
    animation: ecstasy-overlay-dance 4s ease-in-out infinite;
}

@keyframes ecstasy-overlay-dance {
    0%, 100% { 
        opacity: 0.8;
        background-position: 0% 0%, 100% 100%, 50% 50%;
    }
    25% {
        opacity: 1;
        background-position: 10% 20%, 90% 80%, 50% 50%;
    }
    50% { 
        opacity: 0.9;
        background-position: 20% 10%, 80% 90%, 50% 50%;
    }
    75% {
        opacity: 1;
        background-position: 5% 15%, 95% 85%, 50% 50%;
    }
}

/* Second overlay layer - pulsing vignette */
body.ecstasy-active::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, 
        transparent 20%, 
        rgba(255, 20, 147, 0.15) 60%,
        rgba(219, 39, 119, 0.3) 100%);
    pointer-events: none;
    z-index: 9984;
    animation: ecstasy-vignette 3s ease-in-out infinite;
}

@keyframes ecstasy-vignette {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Hearts overlay container */
#ecstasyOverlay {
    background: transparent;
}

#ecstasyOverlay.active {
    opacity: 1 !important;
}

/* Transform ALL icons to hearts during ecstasy - INTENSE */
body.ecstasy-active .fas:not(.fa-heart):not(.fa-capsules)::before,
body.ecstasy-active .fa-solid:not(.fa-heart):not(.fa-capsules)::before {
    content: "\f004" !important; /* Heart icon */
}

body.ecstasy-active i:not(.fa-capsules) {
    color: #ff1493 !important;
    text-shadow: 0 0 15px #ff69b4, 0 0 30px #ff1493, 0 0 45px #ec4899 !important;
    animation: heart-beat-intense 0.8s ease-in-out infinite !important;
}

@keyframes heart-beat-intense {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px #ff69b4); }
    15% { transform: scale(1.3); filter: drop-shadow(0 0 15px #ff1493); }
    30% { transform: scale(1); }
    45% { transform: scale(1.25); filter: drop-shadow(0 0 12px #ff69b4); }
    60% { transform: scale(1.05); }
}

/* All text gets INTENSE love glow */
body.ecstasy-active h1,
body.ecstasy-active h2,
body.ecstasy-active #trackTitle {
    color: #ff69b4 !important;
    text-shadow: 0 0 20px #ff1493, 0 0 40px #ec4899, 0 0 60px #ff69b4 !important;
    animation: ecstasy-text-glow 2s ease-in-out infinite !important;
}

@keyframes ecstasy-text-glow {
    0%, 100% { text-shadow: 0 0 20px #ff1493, 0 0 40px #ec4899; }
    50% { text-shadow: 0 0 30px #ff69b4, 0 0 60px #ff1493, 0 0 80px #ec4899; }
}

body.ecstasy-active span,
body.ecstasy-active button {
    text-shadow: 0 0 15px rgba(255, 105, 180, 0.8) !important;
}

/* Buttons become GLOWING pink */
body.ecstasy-active .action-btn,
body.ecstasy-active #shuffleBtn,
body.ecstasy-active #addTrackBtn {
    border-color: rgba(255, 20, 147, 0.8) !important;
    box-shadow: 0 0 25px rgba(255, 105, 180, 0.6), 0 0 50px rgba(236, 72, 153, 0.4) !important;
    animation: ecstasy-button-pulse 1.5s ease-in-out infinite !important;
}

@keyframes ecstasy-button-pulse {
    0%, 100% { 
        box-shadow: 0 0 25px rgba(255, 105, 180, 0.6), 0 0 50px rgba(236, 72, 153, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 40px rgba(255, 105, 180, 0.8), 0 0 80px rgba(236, 72, 153, 0.6);
        transform: scale(1.05);
    }
}

/* Play button - MASSIVE heart glow */
body.ecstasy-active #playTrigger {
    box-shadow: 
        0 0 60px rgba(255, 20, 147, 0.8), 
        0 0 120px rgba(255, 105, 180, 0.6),
        0 0 180px rgba(236, 72, 153, 0.4),
        inset 0 0 30px rgba(255, 105, 180, 0.3) !important;
    animation: ecstasy-play-mega-pulse 1.5s ease-in-out infinite !important;
    border-color: #ff1493 !important;
}

@keyframes ecstasy-play-mega-pulse {
    0%, 100% { 
        box-shadow: 
            0 0 60px rgba(255, 20, 147, 0.8), 
            0 0 120px rgba(255, 105, 180, 0.6),
            0 0 180px rgba(236, 72, 153, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 0 100px rgba(255, 20, 147, 1), 
            0 0 180px rgba(255, 105, 180, 0.8),
            0 0 250px rgba(236, 72, 153, 0.6);
        transform: scale(1.08);
    }
}

/* Main container floats with love */
body.ecstasy-active #mainContainer {
    animation: ecstasy-float 4s ease-in-out infinite !important;
}

@keyframes ecstasy-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(0.5deg); }
    50% { transform: translateY(-5px) rotate(-0.3deg); }
    75% { transform: translateY(-10px) rotate(0.3deg); }
}

/* Stats bar - pink love */
body.ecstasy-active .stats-bar,
body.ecstasy-active .stats-mini {
    color: #ff69b4 !important;
}

/* Progress bar - love gradient */
body.ecstasy-active #progressBar {
    background: linear-gradient(90deg, #ff1493, #ff69b4, #ec4899, #ff1493) !important;
    background-size: 200% 100% !important;
    animation: ecstasy-progress 2s linear infinite !important;
}

@keyframes ecstasy-progress {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Ecstasy text animation - BIGGER */
#ecstasyText {
    font-family: 'Syncopate', sans-serif;
    letter-spacing: 0.3em;
}

.animate-ecstasy-text {
    animation: ecstasy-text-in 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes ecstasy-text-in {
    0% { 
        opacity: 0; 
        transform: scale(0.3) rotate(-15deg); 
        filter: blur(30px); 
        letter-spacing: 1em;
    }
    15% {
        opacity: 1;
        transform: scale(1.3) rotate(8deg);
        filter: blur(0px);
        letter-spacing: 0.15em;
    }
    30% {
        transform: scale(0.9) rotate(-5deg);
    }
    45% {
        transform: scale(1.15) rotate(3deg);
        letter-spacing: 0.2em;
    }
    60% {
        transform: scale(1) rotate(-2deg);
    }
    75% {
        opacity: 1;
        transform: scale(1.05) rotate(1deg);
    }
    100% { 
        opacity: 0; 
        transform: scale(1.4) rotate(0deg); 
        filter: blur(20px);
        letter-spacing: 0.6em;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🌈 LSD EFFECT - EXTREME PSYCHEDELIC CHAOS 🌈
   MAXIMUM INTENSITY - Reality completely dissolves!
   ═══════════════════════════════════════════════════════════════ */

/* LSD active state on body - INTENSE hue cycling */
body.lsd-active {
    overflow: hidden !important;
    animation: lsd-mega-shift 5s linear infinite !important;
}

@keyframes lsd-mega-shift {
    0% { filter: hue-rotate(0deg) saturate(2.5) contrast(1.2) brightness(1.15) blur(0.3px); }
    25% { filter: hue-rotate(90deg) saturate(3) contrast(1.3) brightness(1.1) blur(0px); }
    50% { filter: hue-rotate(180deg) saturate(2.5) contrast(1.25) brightness(1.2) blur(0.5px); }
    75% { filter: hue-rotate(270deg) saturate(3) contrast(1.15) brightness(1.15) blur(0px); }
    100% { filter: hue-rotate(360deg) saturate(2.5) contrast(1.2) brightness(1.15) blur(0.3px); }
}

/* INTENSE Psychedelic overlay - multiple moving layers */
#lsdOverlay {
    background: transparent;
}

#lsdOverlay.active {
    opacity: 1 !important;
}

/* First overlay layer - moving color blobs */
body.lsd-active::before {
    content: '';
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(ellipse 40% 40% at 20% 20%, rgba(255, 0, 100, 0.3) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 80% 30%, rgba(0, 255, 150, 0.3) 0%, transparent 70%),
        radial-gradient(ellipse 45% 45% at 30% 80%, rgba(100, 0, 255, 0.3) 0%, transparent 70%),
        radial-gradient(ellipse 35% 35% at 70% 70%, rgba(255, 255, 0, 0.25) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(0, 255, 255, 0.2) 0%, transparent 60%);
    pointer-events: none;
    z-index: 9985;
    animation: lsd-blobs-dance 8s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes lsd-blobs-dance {
    0%, 100% { 
        transform: translate(0%, 0%) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(5%, -5%) rotate(5deg) scale(1.1);
    }
    50% { 
        transform: translate(-3%, 3%) rotate(-3deg) scale(0.95);
    }
    75% {
        transform: translate(3%, 5%) rotate(3deg) scale(1.05);
    }
}

/* Second overlay - pulsing fractal-like pattern */
body.lsd-active::after {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            rgba(255, 0, 100, 0.1) 0deg,
            transparent 30deg,
            rgba(0, 255, 200, 0.1) 60deg,
            transparent 90deg
        );
    pointer-events: none;
    z-index: 9984;
    animation: lsd-spiral 20s linear infinite;
    mix-blend-mode: overlay;
    opacity: 0.6;
}

@keyframes lsd-spiral {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.5); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Everything breathes INTENSELY */
body.lsd-active #mainContainer {
    animation: lsd-mega-breathe 4s ease-in-out infinite !important;
}

@keyframes lsd-mega-breathe {
    0%, 100% { transform: scale(1) rotate(0deg) translateY(0); }
    25% { transform: scale(1.04) rotate(1deg) translateY(-5px); }
    50% { transform: scale(0.98) rotate(-0.5deg) translateY(3px); }
    75% { transform: scale(1.03) rotate(0.5deg) translateY(-3px); }
}

/* Elements MORPH dramatically */
body.lsd-active #coreSystem {
    animation: lsd-core-morph 6s ease-in-out infinite !important;
}

@keyframes lsd-core-morph {
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
        border-radius: 50%;
        filter: drop-shadow(0 0 30px currentColor);
    }
    25% { 
        transform: scale(1.1) rotate(5deg); 
        border-radius: 40% 60% 50% 50%;
        filter: drop-shadow(0 0 50px #ff6b6b);
    }
    50% { 
        transform: scale(0.95) rotate(-3deg); 
        border-radius: 55% 45% 40% 60%;
        filter: drop-shadow(0 0 40px #48dbfb);
    }
    75% { 
        transform: scale(1.05) rotate(2deg); 
        border-radius: 45% 55% 60% 40%;
        filter: drop-shadow(0 0 45px #ff9ff3);
    }
}

body.lsd-active #playTrigger {
    animation: lsd-play-morph 5s ease-in-out infinite !important;
}

@keyframes lsd-play-morph {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 50px #ff6b6b, 0 0 100px #ff6b6b;
    }
    25% { 
        transform: scale(1.08) rotate(3deg);
        box-shadow: 0 0 60px #48dbfb, 0 0 120px #48dbfb;
    }
    50% { 
        transform: scale(0.95) rotate(-2deg);
        box-shadow: 0 0 70px #ff9ff3, 0 0 140px #ff9ff3;
    }
    75% { 
        transform: scale(1.05) rotate(1deg);
        box-shadow: 0 0 55px #feca57, 0 0 110px #feca57;
    }
}

/* Text color cycling - FASTER and more INTENSE */
body.lsd-active h1,
body.lsd-active h2,
body.lsd-active #trackTitle {
    animation: lsd-text-mega-color 3s linear infinite !important;
}

@keyframes lsd-text-mega-color {
    0% { color: #ff6b6b; text-shadow: 0 0 30px #ff6b6b, 0 0 60px #ff6b6b; }
    16% { color: #feca57; text-shadow: 0 0 30px #feca57, 0 0 60px #feca57; }
    33% { color: #1dd1a1; text-shadow: 0 0 30px #1dd1a1, 0 0 60px #1dd1a1; }
    50% { color: #48dbfb; text-shadow: 0 0 30px #48dbfb, 0 0 60px #48dbfb; }
    66% { color: #ff9ff3; text-shadow: 0 0 30px #ff9ff3, 0 0 60px #ff9ff3; }
    83% { color: #54a0ff; text-shadow: 0 0 30px #54a0ff, 0 0 60px #54a0ff; }
    100% { color: #ff6b6b; text-shadow: 0 0 30px #ff6b6b, 0 0 60px #ff6b6b; }
}

/* Buttons - INTENSE rainbow shift with glow */
body.lsd-active .action-btn,
body.lsd-active #shuffleBtn,
body.lsd-active #addTrackBtn {
    animation: lsd-button-mega 4s linear infinite !important;
}

@keyframes lsd-button-mega {
    0% { 
        border-color: #ff6b6b; 
        box-shadow: 0 0 25px rgba(255, 107, 107, 0.6), 0 0 50px rgba(255, 107, 107, 0.3);
        transform: scale(1);
    }
    25% { 
        border-color: #48dbfb; 
        box-shadow: 0 0 25px rgba(72, 219, 251, 0.6), 0 0 50px rgba(72, 219, 251, 0.3);
        transform: scale(1.05);
    }
    50% { 
        border-color: #ff9ff3; 
        box-shadow: 0 0 25px rgba(255, 159, 243, 0.6), 0 0 50px rgba(255, 159, 243, 0.3);
        transform: scale(1);
    }
    75% { 
        border-color: #1dd1a1; 
        box-shadow: 0 0 25px rgba(29, 209, 161, 0.6), 0 0 50px rgba(29, 209, 161, 0.3);
        transform: scale(1.03);
    }
    100% { 
        border-color: #ff6b6b; 
        box-shadow: 0 0 25px rgba(255, 107, 107, 0.6), 0 0 50px rgba(255, 107, 107, 0.3);
        transform: scale(1);
    }
}

/* Stats bar - INTENSE rainbow */
body.lsd-active .stats-bar,
body.lsd-active .stats-mini {
    animation: lsd-stats-mega 2s linear infinite !important;
}

@keyframes lsd-stats-mega {
    0% { color: #ff6b6b; text-shadow: 0 0 10px #ff6b6b; }
    20% { color: #feca57; text-shadow: 0 0 10px #feca57; }
    40% { color: #1dd1a1; text-shadow: 0 0 10px #1dd1a1; }
    60% { color: #48dbfb; text-shadow: 0 0 10px #48dbfb; }
    80% { color: #ff9ff3; text-shadow: 0 0 10px #ff9ff3; }
    100% { color: #ff6b6b; text-shadow: 0 0 10px #ff6b6b; }
}

/* Progress bar - MEGA psychedelic rainbow */
body.lsd-active #progressBar {
    animation: lsd-progress-mega 2s linear infinite !important;
    background: linear-gradient(90deg, 
        #ff6b6b, #feca57, #1dd1a1, #48dbfb, #ff9ff3, #54a0ff, #ff6b6b) !important;
    background-size: 400% 100% !important;
    box-shadow: 0 0 20px currentColor !important;
}

@keyframes lsd-progress-mega {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* Icons also shift colors */
body.lsd-active i {
    animation: lsd-icon-color 3s linear infinite !important;
}

@keyframes lsd-icon-color {
    0% { color: #ff6b6b; filter: drop-shadow(0 0 8px #ff6b6b); }
    25% { color: #48dbfb; filter: drop-shadow(0 0 8px #48dbfb); }
    50% { color: #ff9ff3; filter: drop-shadow(0 0 8px #ff9ff3); }
    75% { color: #1dd1a1; filter: drop-shadow(0 0 8px #1dd1a1); }
    100% { color: #ff6b6b; filter: drop-shadow(0 0 8px #ff6b6b); }
}

/* LSD text animation - MEGA rainbow */
.lsd-text-rainbow {
    background: linear-gradient(90deg, 
        #ff6b6b, #feca57, #1dd1a1, #48dbfb, #ff9ff3, #54a0ff, #ff6b6b);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: lsd-rainbow-mega 2s linear infinite;
    text-shadow: none !important;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}

@keyframes lsd-rainbow-mega {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

.animate-lsd-text {
    animation: lsd-text-mega-in 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes lsd-text-mega-in {
    0% { 
        opacity: 0; 
        transform: scale(0.2) rotate(30deg); 
        filter: blur(40px); 
        letter-spacing: 1.5em;
    }
    10% {
        opacity: 1;
        transform: scale(1.4) rotate(-15deg);
        filter: blur(0px);
        letter-spacing: 0.1em;
    }
    25% {
        transform: scale(0.8) rotate(12deg);
    }
    40% {
        transform: scale(1.2) rotate(-8deg);
        letter-spacing: 0.2em;
    }
    55% {
        transform: scale(0.9) rotate(5deg);
    }
    70% {
        opacity: 1;
        transform: scale(1.1) rotate(-3deg);
    }
    85% {
        transform: scale(1) rotate(0deg);
    }
    100% { 
        opacity: 0; 
        transform: scale(1.8) rotate(-10deg); 
        filter: blur(30px);
        letter-spacing: 1em;
    }
}

/* Floating pill emoji effect */
.floating-pill {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    z-index: 9999;
    animation: float-pill 2.5s ease-out forwards;
}

@keyframes float-pill {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
    30% {
        opacity: 1;
        transform: translateY(-30px) rotate(180deg) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translateY(-200px) rotate(720deg) scale(0.3);
    }
}

/* Floating hearts for ecstasy effect - BEAUTIFUL SVG HEARTS */
.floating-ecstasy-heart {
    position: fixed;
    bottom: -50px;
    pointer-events: none;
    z-index: 9998;
    animation: float-ecstasy-heart-beautiful 4s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes float-ecstasy-heart-beautiful {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.3) rotate(0deg);
    }
    10% {
        opacity: 1;
        transform: translateY(-10vh) translateX(calc(var(--heart-drift, 0px) * 0.2)) scale(1) rotate(calc(var(--heart-rotate, 0deg) * 0.2));
    }
    30% {
        transform: translateY(-30vh) translateX(calc(var(--heart-drift, 0px) * 0.5)) scale(1.1) rotate(calc(var(--heart-rotate, 0deg) * 0.5));
    }
    50% {
        opacity: 0.9;
        transform: translateY(-50vh) translateX(calc(var(--heart-drift, 0px) * 0.8)) scale(1.2) rotate(calc(var(--heart-rotate, 0deg) * 0.7));
    }
    70% {
        opacity: 0.7;
        transform: translateY(-70vh) translateX(var(--heart-drift, 0px)) scale(1.1) rotate(calc(var(--heart-rotate, 0deg) * 0.9));
    }
    90% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: translateY(-110vh) translateX(calc(var(--heart-drift, 0px) * 1.2)) scale(0.8) rotate(var(--heart-rotate, 0deg));
    }
}

/* Heart pulse animation for SVG hearts */
.floating-ecstasy-heart svg {
    animation: svg-heart-pulse 0.8s ease-in-out infinite;
}

@keyframes svg-heart-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Sparkle effect around hearts */
.floating-ecstasy-heart::before,
.floating-ecstasy-heart::after {
    content: '✦';
    position: absolute;
    font-size: 0.5em;
    color: rgba(255, 255, 255, 0.8);
    animation: sparkle-twinkle 1s ease-in-out infinite;
}

.floating-ecstasy-heart::before {
    top: -5px;
    left: -5px;
    animation-delay: 0s;
}

.floating-ecstasy-heart::after {
    bottom: -5px;
    right: -5px;
    animation-delay: 0.5s;
}

@keyframes sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
}