/* Chiptune Challenge 2026 - January Theme: New Beginnings */
/* Title screen energy with electric blue, hot pink, and starfield sparkle */

:root {
    /* Primary Colors */
    --chiptune-primary: #00d4ff;
    --chiptune-primary-hover: #00b8e0;
    --chiptune-secondary: #ff6b9d;
    --chiptune-accent: #ffd700;

    /* Backgrounds */
    --chiptune-bg: #0a0a1a;
    --chiptune-header-bg: rgba(10, 10, 26, 0.9);
    --chiptune-card-bg: rgba(0, 0, 0, 0.4);
    --chiptune-surface: rgba(0, 212, 255, 0.1);
    --chiptune-player-bg: rgba(10, 10, 26, 0.95);

    /* Text */
    --chiptune-text: #ffffff;
    --chiptune-text-secondary: rgba(255, 255, 255, 0.7);

    /* Borders & Effects */
    --chiptune-border: rgba(0, 212, 255, 0.3);
    --chiptune-glow: rgba(0, 212, 255, 0.4);
    --chiptune-secondary-glow: rgba(255, 107, 157, 0.4);

    /* Player Handle - Star shape */
    --chiptune-handle-size: 20px;
    --chiptune-handle-bg: linear-gradient(135deg, #00d4ff, #00b8e0);
    --chiptune-handle-radius: 4px;
    --chiptune-handle-icon-size: 12px;
    --chiptune-handle-icon-color: #fff;
    --chiptune-handle-icon-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    --chiptune-handle-glow: rgba(0, 212, 255, 0.6);

    /* Volume Handle */
    --chiptune-volume-handle-size: 16px;
    --chiptune-volume-handle-bg: linear-gradient(135deg, #00d4ff, #00b8e0);
    --chiptune-volume-handle-radius: 3px;
    --chiptune-volume-handle-icon-size: 10px;
    --chiptune-volume-handle-icon-color: #fff;
    --chiptune-volume-handle-icon-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
    --chiptune-volume-handle-glow: rgba(0, 212, 255, 0.6);
}

/* Body with retro computer background */
body.chiptune-theme-january {
    background-color: #0a0a1a;
    background-image:
        /* Semi-transparent overlay for text readability */
        linear-gradient(
            180deg,
            rgba(10, 10, 26, 0.7) 0%,
            rgba(10, 26, 46, 0.6) 50%,
            rgba(26, 10, 46, 0.7) 100%
        ),
        /* The retro computer background image */
        url('/static/sites/zimventures/chiptune/images/january-bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Make app container transparent so body background shows */
body.chiptune-theme-january .chiptune-app {
    background: transparent;
}

/* Title screen glow text */
.chiptune-theme-january .chiptune-logo .logo-text {
    text-shadow:
        0 0 10px var(--chiptune-primary),
        0 0 20px var(--chiptune-primary),
        0 0 30px var(--chiptune-primary);
    animation: titleBlink 3s ease-in-out infinite;
}

@keyframes titleBlink {
    0%, 90%, 100% { opacity: 1; }
    92%, 96% { opacity: 0.5; }
}

/* Page headers with arcade glow */
.chiptune-theme-january .page-header h1 {
    text-shadow:
        0 0 10px var(--chiptune-primary),
        0 0 20px var(--chiptune-primary);
}

/* Card hover with electric border */
.chiptune-theme-january .song-card:hover {
    box-shadow:
        0 0 20px var(--chiptune-glow),
        inset 0 0 20px rgba(0, 212, 255, 0.1);
}

.chiptune-theme-january .song-card.is-playing {
    box-shadow:
        0 0 20px var(--chiptune-secondary-glow),
        inset 0 0 20px rgba(255, 107, 157, 0.1);
    animation: pulsePlay 2s ease-in-out infinite;
}

@keyframes pulsePlay {
    0%, 100% {
        box-shadow:
            0 0 20px var(--chiptune-secondary-glow),
            inset 0 0 20px rgba(255, 107, 157, 0.1);
    }
    50% {
        box-shadow:
            0 0 30px var(--chiptune-secondary-glow),
            inset 0 0 30px rgba(255, 107, 157, 0.15);
    }
}

/* Buttons with "PRESS START" style */
.chiptune-theme-january .vote-btn,
.chiptune-theme-january .song-card .vote-btn {
    background: linear-gradient(135deg, var(--chiptune-primary), #00b8e0);
    border-color: var(--chiptune-primary);
    color: #000;
    box-shadow: 0 4px 0 #008ba3;
    transform: translateY(0);
    transition: all 0.1s;
}

.chiptune-theme-january .vote-btn:hover:not(:disabled),
.chiptune-theme-january .song-card .vote-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #00b8e0, #009ac4);
    transform: translateY(2px);
    box-shadow: 0 2px 0 #008ba3;
    color: #000;
}

.chiptune-theme-january .vote-btn.voted,
.chiptune-theme-january .song-card .vote-btn.voted {
    background: linear-gradient(135deg, var(--chiptune-secondary), #ff4785);
    border-color: var(--chiptune-secondary);
    color: #fff;
    box-shadow: 0 4px 0 #cc3a6a;
}

/* Like button star animation */
.chiptune-theme-january .like-btn.liked .like-icon {
    animation: starPop 0.6s ease;
}

@keyframes starPop {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.3) rotate(15deg); }
    50% { transform: scale(1) rotate(-10deg); }
    75% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Play button with glow */
.chiptune-theme-january .song-cover .play-btn {
    background: rgba(0, 212, 255, 0.8);
}

.chiptune-theme-january .player-btn.play-pause {
    background: linear-gradient(135deg, var(--chiptune-primary), #00b8e0);
    box-shadow: 0 0 20px var(--chiptune-glow);
}

/* Progress bar gradient */
.chiptune-theme-january .player-progress-fill {
    background: linear-gradient(90deg, var(--chiptune-primary), var(--chiptune-secondary));
}

/* Week navigation */
.chiptune-theme-january .week-nav {
    background: linear-gradient(
        90deg,
        rgba(0, 212, 255, 0.1),
        rgba(255, 107, 157, 0.1),
        rgba(255, 215, 0, 0.1)
    );
}

/* Vote banner */
.chiptune-theme-january .vote-banner {
    background: linear-gradient(
        90deg,
        var(--chiptune-primary),
        var(--chiptune-secondary)
    );
}

/* Trophy badges */
.chiptune-theme-january .trophy-badge {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Winner announcements */
.chiptune-theme-january .winner-banner,
.chiptune-theme-january .month-winner-banner {
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0.2),
        rgba(0, 212, 255, 0.1)
    );
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.chiptune-theme-january .winner-icon {
    font-size: 2rem;
}

/* Pixel font for stats */
.chiptune-theme-january .stat-card h3,
.chiptune-theme-january .stat-value {
    font-family: 'Press Start 2P', monospace;
}

/* Hall of Fame cards */
.chiptune-theme-january .hof-card {
    background: var(--chiptune-card-bg);
    border: 1px solid var(--chiptune-border);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s;
}

.chiptune-theme-january .hof-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 30px var(--chiptune-glow);
}

.chiptune-theme-january .hof-card.year-card {
    border-color: gold;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.chiptune-theme-january .hof-card.month-card {
    border-color: var(--chiptune-secondary);
}

/* Stats page styling */
.chiptune-theme-january .stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.chiptune-theme-january .stat-card {
    background: var(--chiptune-card-bg);
    border: 1px solid var(--chiptune-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
}

.chiptune-theme-january .stat-card .stat-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.chiptune-theme-january .stat-card .stat-value {
    font-size: 1.5rem;
    color: var(--chiptune-primary);
    display: block;
}

.chiptune-theme-january .stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--chiptune-text-secondary);
}

/* Scrollbar styling */
.chiptune-theme-january ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.chiptune-theme-january ::-webkit-scrollbar-track {
    background: var(--chiptune-bg);
}

.chiptune-theme-january ::-webkit-scrollbar-thumb {
    background: var(--chiptune-primary);
    border-radius: 4px;
}

.chiptune-theme-january ::-webkit-scrollbar-thumb:hover {
    background: var(--chiptune-primary-hover);
}

/* Selection color */
.chiptune-theme-january ::selection {
    background: var(--chiptune-primary);
    color: white;
}