/* Cosmic Space Canvas Background & 3D Earth Stage */
@import url('/css/fonts.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --space-bg: #030712;
    --panel-bg: rgba(7, 13, 26, 0.75);
    --panel-border: rgba(56, 189, 248, 0.12);
    --cyan-accent: #38bdf8;
    --rose-accent: #f43f5e;
}

/* Typography */
.font-serif-vintage {
    font-family: 'Noto Serif SC', 'Playfair Display', 'Songti SC', 'SimSun', serif;
}

.font-mono-retro {
    font-family: 'Space Mono', 'Courier New', monospace;
}

.font-sans-ui {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Background canvas and grid dots */
/* 移动端触控优化：消除 300ms 点击延迟，禁用双击缩放阻碍，瞬时响应 Tap */
html, body, button, a, input, select, [role="button"], .cursor-pointer, .station-card-item, .panel-genre-chip {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 移动端触摸优化增强：杜绝系统长按呼出选字弹窗或放大镜阻断触控，增强触感微缩动效 */
.station-card-item, .panel-genre-chip, #mobile-mini-player, button, a, [role="button"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.station-card-item:active {
    transform: scale(0.985);
    background-color: rgba(255, 255, 255, 0.08);
}
.panel-genre-chip:active {
    transform: scale(0.95);
}

@media (min-width: 1024px) {
    html, body {
        height: 100%;
        overflow: hidden;
    }
}

@media (max-width: 1023px) {
    html, body {
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

body {
    background-color: var(--space-bg);
    background-image: 
        radial-gradient(rgba(56, 189, 248, 0.12) 1px, transparent 1px),
        radial-gradient(circle at 40% 45%, rgba(14, 52, 94, 0.28) 0%, rgba(3, 7, 18, 0.98) 70%);
    background-size: 32px 32px, 100% 100%;
}

/* Swup Transition */
.transition-fade {
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
}

html.is-animating .transition-fade {
    opacity: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.18);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.45);
}

/* Futuristic Glass Panels */
.cosmic-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--panel-border);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cosmic-subpanel {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Pulsing on-air dots */
@keyframes neon-pulse {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
    }
    50% {
        opacity: 0.4;
        filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.3));
    }
}
.animate-neon-pulse {
    animation: neon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Spectrum Equalizer Bars */
.eq-bar {
    width: 3px;
    background: currentColor;
    border-radius: 1.5px;
    animation: eq-bounce 0.8s ease-in-out infinite alternate;
}
.eq-bar:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.eq-bar:nth-child(2) { height: 16px; animation-delay: 0.35s; }
.eq-bar:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.eq-bar:nth-child(4) { height: 22px; animation-delay: 0.5s; }
.eq-bar:nth-child(5) { height: 14px; animation-delay: 0.15s; }
.eq-bar:nth-child(6) { height: 18px; animation-delay: 0.4s; }
.eq-bar:nth-child(7) { height: 8px; animation-delay: 0.25s; }

@keyframes eq-bounce {
    0% { transform: scaleY(0.2); }
    100% { transform: scaleY(1.2); }
}

/* 3D Glowing Earth Sphere */
.earth-halo {
    box-shadow: 
        0 0 80px 10px rgba(56, 189, 248, 0.18),
        inset 0 0 60px 10px rgba(56, 189, 248, 0.12);
}