/* ================================================
   ZENO FM PLAYER - DARK MODE STYLE
   Modern, Elegant with Gray Accents
   ================================================ */

:root {
    /* YouTube-inspired button */
    --youtube-red: #FF0000;
    --youtube-red-hover: #cc0000;
    --youtube-red-glow: rgba(255, 0, 0, 0.4);
    
    /* Accent colors for spectrum */
    --accent-cyan: #00f5ff;
    --accent-purple: #bf5fff;
    --accent-pink: #ff6b9d;
    --accent-blue: #4d7cff;
    
    /* Dark mode with gray tones */
    --bg-primary: #0d0d0f;
    --bg-secondary: #141418;
    --bg-tertiary: #1a1a1f;
    --bg-card: #1e1e24;
    --bg-elevated: #252530;
    
    /* Gray accent colors */
    --gray-100: #f5f5f7;
    --gray-200: #e5e5ea;
    --gray-300: #d1d1d6;
    --gray-400: #aeaeb2;
    --gray-500: #8e8e93;
    --gray-600: #636366;
    --gray-700: #48484a;
    --gray-800: #3a3a3c;
    --gray-900: #2c2c2e;
    
    /* Layered gray shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 60px rgba(100, 100, 110, 0.15);
    
    /* CD shadows - gray tones */
    --cd-shadow-deep: 0 40px 80px rgba(30, 30, 35, 0.8);
    --cd-shadow-mid: 0 20px 40px rgba(50, 50, 55, 0.6);
    --cd-shadow-soft: 0 10px 20px rgba(70, 70, 75, 0.4);
    --cd-shadow-close: 0 5px 10px rgba(90, 90, 95, 0.3);
    
    /* Text colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.45);
    
    /* CD surface */
    --cd-surface: linear-gradient(135deg, #1f1f28 0%, #12121a 40%, #1a1a24 100%);
    
    /* CD size */
    --cd-size: 280px;
    
    /* Animations */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    position: relative;
}

/* ================================================
   BACKGROUND EFFECTS
   ================================================ */
.background-effects {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--gray-800) 0%, transparent 70%);
    top: -200px;
    left: -150px;
    animation: float-orb 20s ease-in-out infinite;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--gray-700) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: float-orb 25s ease-in-out infinite reverse;
}

@keyframes float-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.05); }
    66% { transform: translate(-30px, 40px) scale(0.95); }
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
}

.noise-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    mix-blend-mode: overlay;
}

/* ================================================
   MAIN CONTAINER
   ================================================ */
.player-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding: 2rem;
    width: 100%;
    max-width: 420px;
}

/* ================================================
   CD SECTION
   ================================================ */
.cd-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Beat-reactive glow */
.cd-beat-glow {
    position: absolute;
    width: calc(var(--cd-size) + 80px);
    height: calc(var(--cd-size) + 80px);
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(191, 95, 255, 0.3) 0%, 
        rgba(0, 245, 255, 0.2) 40%, 
        transparent 70%);
    filter: blur(40px);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s, transform 0.15s;
    z-index: 0;
}

.cd-beat-glow.pulse {
    opacity: 1;
    transform: scale(1.1);
}

/* CD Disc - rotates left to right (clockwise) */
.cd-disc {
    width: var(--cd-size);
    height: var(--cd-size);
    border-radius: 50%;
    background: var(--cd-surface);
    position: relative;
    z-index: 1;
    box-shadow: 
        var(--cd-shadow-deep),
        var(--cd-shadow-mid),
        var(--cd-shadow-soft),
        var(--cd-shadow-close),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 2px 20px rgba(255, 255, 255, 0.08),
        inset 0 -8px 30px rgba(0, 0, 0, 0.5),
        var(--shadow-glow);
    transition: box-shadow 0.3s var(--ease-smooth);
}

/* CD outer metallic ring */
.cd-outer-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, 
        rgba(255,255,255,0.1) 0%, 
        transparent 50%, 
        rgba(255,255,255,0.05) 100%);
}

/* Vinyl grooves */
.cd-grooves {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: repeating-radial-gradient(
        circle at center,
        transparent 0px,
        transparent 2px,
        rgba(255, 255, 255, 0.02) 2px,
        rgba(255, 255, 255, 0.02) 3.5px
    );
}

/* Rainbow holographic effect */
.cd-rainbow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 50, 50, 0.08) 0deg,
        rgba(255, 150, 50, 0.08) 60deg,
        rgba(255, 255, 50, 0.08) 120deg,
        rgba(50, 255, 100, 0.08) 180deg,
        rgba(50, 150, 255, 0.08) 240deg,
        rgba(150, 50, 255, 0.08) 300deg,
        rgba(255, 50, 50, 0.08) 360deg
    );
    mix-blend-mode: screen;
    animation: rainbow-rotate 8s linear infinite;
}

@keyframes rainbow-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Center label - WHITE background */
.cd-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f0f0f5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 -2px 8px rgba(0, 0, 0, 0.05),
        0 0 0 3px rgba(255, 255, 255, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 255, 255, 0.2);
}

.cd-label {
    text-align: center;
    z-index: 1;
}

.label-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    background: linear-gradient(135deg, #1a1a2e, #0d0d14);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.label-subtext {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.5em;
    color: var(--gray-600);
    display: block;
    margin-top: 1px;
}

.cd-hole {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: red;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -1px 2px rgba(255, 255, 255, 0.8);
}

/* Light reflections */
.cd-reflection {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, 
        transparent 0%, 
        transparent 42%,
        rgba(255, 255, 255, 0.06) 45%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.06) 55%,
        transparent 58%,
        transparent 100%);
    pointer-events: none;
}

.cd-shine {
    position: absolute;
    top: 6%;
    left: 12%;
    width: 55%;
    height: 28%;
    border-radius: 50%;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.12) 0%, 
        transparent 100%);
    transform: rotate(-30deg);
    filter: blur(2px);
    pointer-events: none;
}

/* CD Shadow */
.cd-shadow {
    width: 220px;
    height: 30px;
    margin-top: -10px;
    background: radial-gradient(ellipse, 
        rgba(0, 0, 0, 0.5) 0%, 
        rgba(30, 30, 35, 0.3) 40%,
        transparent 70%);
    filter: blur(15px);
    z-index: 0;
    transition: all 0.15s;
}

/* Track Info */
.track-info {
    text-align: center;
    margin-top: 1.5rem;
}

.track-title {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gray-100);
    margin-bottom: 0.35rem;
}

.track-artist {
    font-size: 0.9rem;
    color: var(--gray-500);
    letter-spacing: 0.1em;
    font-weight: 400;
}

/* Beat indicator - Green, Yellow, Red */
.beat-indicator {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 1rem;
}

.beat-indicator span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-700);
    transition: all 0.15s var(--ease-smooth);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Green dot */
.beat-indicator span:nth-child(1) {
    background: rgba(34, 197, 94, 0.3);
}

.beat-indicator.active span:nth-child(1) {
    background: #22c55e;
    box-shadow: 
        0 0 15px rgba(34, 197, 94, 0.8),
        0 0 30px rgba(34, 197, 94, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Yellow dot */
.beat-indicator span:nth-child(2) {
    background: rgba(250, 204, 21, 0.3);
}

.beat-indicator.active span:nth-child(2) {
    background: #facc15;
    box-shadow: 
        0 0 15px rgba(250, 204, 21, 0.8),
        0 0 30px rgba(250, 204, 21, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Red dot */
.beat-indicator span:nth-child(3) {
    background: rgba(239, 68, 68, 0.3);
}

.beat-indicator.active span:nth-child(3) {
    background: #ef4444;
    box-shadow: 
        0 0 15px rgba(239, 68, 68, 0.8),
        0 0 30px rgba(239, 68, 68, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* ================================================
   CONTROLS SECTION
   ================================================ */
.controls-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Visualizer Container - White border with shadows */
.visualizer-container {
    width: 100%;
    height: 160px;
    background: linear-gradient(180deg, #12121a 0%, #1a1a24 50%, #0f0f15 100%);
    border-radius: 24px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    overflow: hidden;
    position: relative;
    box-shadow: 
        /* Outer glow - white */
        0 0 20px rgba(255, 255, 255, 0.1),
        0 0 40px rgba(255, 255, 255, 0.05),
        /* Depth shadows - gray */
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 20px 50px rgba(20, 20, 25, 0.6),
        0 30px 70px rgba(0, 0, 0, 0.4),
        /* Inner highlight */
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.visualizer-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

#visualizer {
    width: 100%;
    height: 100%;
    display: block;
}

.visualizer-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at bottom center, 
        rgba(0, 245, 255, 0.15) 0%, 
        rgba(191, 95, 255, 0.1) 30%,
        transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ease-smooth);
}

.visualizer-glow.active {
    opacity: 1;
}

/* ================================================
   YOUTUBE PLAY BUTTON
   ================================================ */
.controls {
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: var(--youtube-red);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.25s var(--ease-smooth);
    box-shadow: 
        0 8px 30px var(--youtube-red-glow),
        0 4px 15px rgba(0, 0, 0, 0.4),
        0 15px 40px rgba(40, 40, 45, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.play-btn::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: var(--youtube-red);
    opacity: 0.2;
    filter: blur(25px);
    z-index: -1;
    transition: all 0.3s;
}

.play-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.play-btn:hover {
    transform: scale(1.08);
    background: var(--youtube-red-hover);
    box-shadow: 
        0 12px 40px var(--youtube-red-glow),
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 20px 50px rgba(40, 40, 45, 0.6),
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.play-btn:hover::before {
    opacity: 0.35;
    filter: blur(30px);
}

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

.play-btn-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.play-btn svg {
    width: 30px;
    height: 30px;
    transition: all 0.2s var(--ease-bounce);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.icon-play {
    margin-left: 4px;
}

.icon-pause {
    position: absolute;
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

.play-btn.playing .icon-play {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

.play-btn.playing .icon-pause {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ================================================
   STATUS INDICATOR
   ================================================ */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.25rem;
    background: var(--bg-card);
    border-radius: 30px;
    border: 1px solid var(--gray-800);
    box-shadow: var(--shadow-md);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-600);
    transition: all 0.3s;
}

.status-indicator.live .status-dot {
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.7);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.status-indicator.error .status-dot {
    background: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.7);
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.status-text {
    font-size: 0.8rem;
    color: var(--gray-400);
    letter-spacing: 0.04em;
    font-weight: 400;
}

/* ================================================
   RESPONSIVE - MOBILE FIRST
   ================================================ */
@media (max-width: 480px) {
    :root {
        --cd-size: min(240px, calc(100vw - 6rem));
    }
    
    .player-container {
        padding: 1.5rem;
        gap: 2rem;
    }
    
    .cd-center {
        width: 70px;
        height: 70px;
    }
    
    .label-text {
        font-size: 0.8rem;
    }
    
    .label-subtext {
        font-size: 0.5rem;
    }
    
    .visualizer-container {
        height: 130px;
        border-radius: 18px;
    }
    
    .play-btn {
        width: 68px;
        height: 68px;
    }
    
    .play-btn svg {
        width: 26px;
        height: 26px;
    }
    
    .track-title {
        font-size: 1.15rem;
    }
    
    .track-artist {
        font-size: 0.8rem;
    }
    
    .cd-shadow {
        width: 180px;
        height: 25px;
    }
    
    .beat-indicator span {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 360px) {
    :root {
        --cd-size: min(200px, calc(100vw - 5rem));
    }
    
    .player-container {
        padding: 1rem;
    }
    
    .visualizer-container {
        height: 100px;
    }
    
    .play-btn {
        width: 60px;
        height: 60px;
        border-width: 3px;
    }
}

/* Landscape mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .player-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 700px;
        gap: 1.5rem;
    }
    
    .cd-section {
        flex: 0 0 auto;
    }
    
    .controls-section {
        flex: 1;
        min-width: 280px;
    }
    
    :root {
        --cd-size: min(180px, 35vh);
    }
    
    .visualizer-container {
        height: 80px;
    }
}

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