.yearly-page {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem;
    }

    /* Header */
    .yearly-header {
        text-align: center;
        margin-bottom: 2rem;
        position: relative;
    }

    .yearly-header::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--chiptune-primary), transparent);
        z-index: 0;
    }

    .yearly-header h1 {
        font-family: 'Press Start 2P', monospace;
        font-size: 1.2rem;
        color: var(--chiptune-primary);
        text-shadow: 0 0 20px var(--chiptune-primary), 0 0 40px var(--chiptune-primary);
        background: var(--chiptune-bg);
        display: inline-block;
        padding: 0 1.5rem;
        position: relative;
        z-index: 1;
        animation: glow-pulse 2s ease-in-out infinite;
    }

    @keyframes glow-pulse {
        0%, 100% { text-shadow: 0 0 20px var(--chiptune-primary), 0 0 40px var(--chiptune-primary); }
        50% { text-shadow: 0 0 30px var(--chiptune-primary), 0 0 60px var(--chiptune-primary), 0 0 80px var(--chiptune-primary); }
    }

    .yearly-header .subtitle {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        color: var(--chiptune-text-secondary);
        margin-top: 1rem;
        letter-spacing: 2px;
    }

    /* Phase Progress - Retro CRT Style */
    .phase-progress {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 2.5rem;
        padding: 1.5rem 2rem;
        background: linear-gradient(180deg, rgba(20, 10, 30, 0.95), rgba(10, 5, 20, 0.98));
        border: 3px solid #ff6b9d;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        box-shadow:
            0 0 20px rgba(255, 107, 157, 0.6),
            0 0 40px rgba(255, 107, 157, 0.3),
            0 0 60px rgba(255, 107, 157, 0.1),
            inset 0 0 30px rgba(255, 107, 157, 0.1);
    }

    /* CRT Scanlines */
    .phase-progress::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, 0.3) 1px,
            rgba(0, 0, 0, 0.3) 2px
        );
        pointer-events: none;
        z-index: 10;
    }

    /* CRT Flicker/Glow */
    .phase-progress::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(255, 107, 157, 0.05) 0%, transparent 70%);
        pointer-events: none;
        animation: crt-flicker 0.1s infinite;
    }

    @keyframes crt-flicker {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.98; }
    }

    .phase-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem 1.25rem;
        opacity: 0.5;
        transition: all 0.3s;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 4px;
        border: 2px solid #00d4ff;
        position: relative;
        z-index: 5;
        box-shadow:
            0 0 8px rgba(0, 212, 255, 0.4),
            0 0 16px rgba(0, 212, 255, 0.2),
            inset 0 0 10px rgba(0, 0, 0, 0.8);
    }

    .phase-step:hover {
        opacity: 0.75;
        border-color: #ff6b9d;
        box-shadow:
            0 0 12px rgba(255, 107, 157, 0.5),
            0 0 24px rgba(255, 107, 157, 0.3),
            inset 0 0 10px rgba(0, 0, 0, 0.8);
    }

    .phase-step.active {
        opacity: 1;
        transform: scale(1.05);
        background: rgba(255, 107, 157, 0.1);
        border-color: #ff6b9d;
        box-shadow:
            0 0 15px #ff6b9d,
            0 0 30px rgba(255, 107, 157, 0.5),
            0 0 45px rgba(255, 107, 157, 0.3),
            inset 0 0 15px rgba(255, 107, 157, 0.1);
        animation: neon-pulse-pink 1.5s ease-in-out infinite;
    }

    @keyframes neon-pulse-pink {
        0%, 100% {
            box-shadow:
                0 0 15px #ff6b9d,
                0 0 30px rgba(255, 107, 157, 0.5),
                0 0 45px rgba(255, 107, 157, 0.3),
                inset 0 0 15px rgba(255, 107, 157, 0.1);
        }
        50% {
            box-shadow:
                0 0 20px #ff6b9d,
                0 0 40px rgba(255, 107, 157, 0.6),
                0 0 60px rgba(255, 107, 157, 0.4),
                inset 0 0 20px rgba(255, 107, 157, 0.15);
        }
    }

    .phase-step.complete {
        opacity: 0.85;
        background: rgba(0, 212, 255, 0.1);
        border-color: #00d4ff;
        box-shadow:
            0 0 12px #00d4ff,
            0 0 24px rgba(0, 212, 255, 0.4),
            inset 0 0 10px rgba(0, 212, 255, 0.1);
    }

    .phase-dot {
        width: 48px;
        height: 48px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.8);
        border: 2px solid #00d4ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Press Start 2P', monospace;
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
        color: #00d4ff;
        box-shadow:
            0 0 8px rgba(0, 212, 255, 0.5),
            inset 0 0 10px rgba(0, 0, 0, 0.8);
        text-shadow:
            0 0 10px #00d4ff,
            0 0 20px rgba(0, 212, 255, 0.5);
    }

    .phase-step.active .phase-dot {
        border-color: #ff6b9d;
        color: #ff6b9d;
        background: rgba(255, 107, 157, 0.15);
        box-shadow:
            0 0 10px #ff6b9d,
            0 0 20px rgba(255, 107, 157, 0.4),
            inset 0 0 10px rgba(0, 0, 0, 0.8);
        text-shadow:
            0 0 10px #ff6b9d,
            0 0 20px rgba(255, 107, 157, 0.6);
        animation: dot-blink 1s ease-in-out infinite;
    }

    @keyframes dot-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
    }

    .phase-step.complete .phase-dot {
        background: rgba(0, 212, 255, 0.2);
        border-color: #00d4ff;
        color: #00d4ff;
        box-shadow:
            0 0 10px #00d4ff,
            0 0 20px rgba(0, 212, 255, 0.4),
            inset 0 0 10px rgba(0, 0, 0, 0.6);
    }

    .phase-label {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        text-transform: uppercase;
        color: #00d4ff;
        letter-spacing: 1px;
        text-shadow:
            0 0 5px #00d4ff,
            0 0 10px rgba(0, 212, 255, 0.5);
    }

    .phase-step.active .phase-label {
        color: #ff6b9d;
        text-shadow:
            0 0 8px #ff6b9d,
            0 0 15px rgba(255, 107, 157, 0.6);
    }

    .phase-step.complete .phase-label {
        color: #00d4ff;
        text-shadow:
            0 0 8px #00d4ff,
            0 0 15px rgba(0, 212, 255, 0.5);
    }

    .phase-connector {
        width: 30px;
        height: 3px;
        background: #00d4ff;
        position: relative;
        z-index: 5;
        box-shadow:
            0 0 6px #00d4ff,
            0 0 12px rgba(0, 212, 255, 0.5);
    }

    .phase-connector::before {
        content: '>';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        color: #00d4ff;
        text-shadow: 0 0 8px #00d4ff;
        background: rgba(20, 10, 30, 0.95);
        padding: 0 4px;
    }

    /* Champion Card - New Design */
    .champion-card-container {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .champion-card {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
        border: 3px solid #ffd700;
        border-radius: 12px;
        padding: 1.5rem;
        max-width: 350px;
        width: 100%;
        position: relative;
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.4), inset 0 0 60px rgba(255, 215, 0, 0.05);
    }

    .champion-crown {
        position: absolute;
        top: -25px;
        right: -15px;
        font-size: 3.5rem;
        animation: crown-float 3s ease-in-out infinite;
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
        z-index: 10;
    }

    @keyframes crown-float {
        0%, 100% { transform: translateY(0) rotate(-5deg); }
        50% { transform: translateY(-8px) rotate(5deg); }
    }

    .champion-artwork {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 1rem;
        border: 2px solid rgba(255, 215, 0, 0.5);
    }

    .champion-artwork img,
    .champion-artwork video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .champion-play-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s;
        cursor: pointer;
        border: none;
    }

    .champion-artwork:hover .champion-play-overlay,
    .champion-play-overlay.is-playing {
        opacity: 1;
    }

    .champion-play-overlay .play-icon,
    .champion-play-overlay .pause-icon {
        font-size: 4rem;
        color: #ffd700;
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }

    .champion-play-overlay.is-playing {
        background: rgba(255, 107, 157, 0.3);
    }

    .champion-play-overlay.is-playing .pause-icon {
        color: var(--chiptune-secondary);
        text-shadow: 0 0 20px var(--chiptune-secondary);
        animation: pulse-play 1s ease-in-out infinite;
    }

    .champion-card-content {
        text-align: center;
    }

    .champion-label {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        color: #ffd700;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 0.5rem;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    }

    .champion-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.8rem;
        color: #fff;
        margin: 0 0 0.5rem 0;
        line-height: 1.4;
        text-shadow: 0 0 15px var(--chiptune-primary);
    }

    .champion-date {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.4rem;
        color: var(--chiptune-text-secondary);
        margin-bottom: 1rem;
    }

    .champion-stats {
        display: flex;
        justify-content: center;
        gap: 2rem;
        padding: 1rem 0;
        border-top: 1px solid rgba(255, 215, 0, 0.3);
        border-bottom: 1px solid rgba(255, 215, 0, 0.3);
        margin-bottom: 1rem;
    }

    .champion-stats .stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .champion-stats .stat-icon {
        font-size: 1.2rem;
        color: #ffd700;
    }

    .champion-stats .stat-value {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.9rem;
        color: #fff;
        text-shadow: 0 0 10px var(--chiptune-primary);
    }

    .champion-stats .stat-label {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.35rem;
        color: var(--chiptune-text-secondary);
        text-transform: uppercase;
    }

    .champion-final-info {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.4rem;
        color: var(--chiptune-text-secondary);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.3rem;
    }

    .champion-final-info .vs-opponent {
        color: var(--chiptune-primary);
    }

    /* Awaiting Champion */
    .champion-awaiting {
        text-align: center;
        padding: 3rem;
        background: linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
        border: 2px dashed rgba(255, 215, 0, 0.3);
        border-radius: 12px;
    }

    .champion-awaiting .awaiting-crown {
        font-size: 4rem;
        opacity: 0.4;
        filter: grayscale(0.5);
        margin-bottom: 1rem;
    }

    .champion-awaiting h2 {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.8rem;
        color: rgba(255, 215, 0, 0.6);
        margin-bottom: 1rem;
    }

    .champion-awaiting p {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.45rem;
        color: var(--chiptune-text-secondary);
    }

    /* Section styling - Retro CRT Cabinet */
    .yearly-section {
        background: linear-gradient(180deg, rgba(20, 10, 30, 0.95), rgba(10, 5, 20, 0.98));
        border: 3px solid #ff6b9d;
        border-radius: 4px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        position: relative;
        overflow: hidden;
        box-shadow:
            0 0 20px rgba(255, 107, 157, 0.5),
            0 0 40px rgba(255, 107, 157, 0.2),
            inset 0 0 30px rgba(255, 107, 157, 0.05);
    }

    /* CRT Scanlines for sections */
    .yearly-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, 0.3) 1px,
            rgba(0, 0, 0, 0.3) 2px
        );
        pointer-events: none;
        z-index: 10;
    }

    /* CRT Glow effect */
    .yearly-section::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(255, 107, 157, 0.03) 0%, transparent 70%);
        pointer-events: none;
        animation: crt-flicker 0.1s infinite;
    }

    .yearly-section h2 {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.75rem;
        color: #ff6b9d;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-shadow:
            0 0 10px #ff6b9d,
            0 0 20px rgba(255, 107, 157, 0.5);
        position: relative;
        z-index: 5;
    }

    .yearly-section .section-desc {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.45rem;
        color: #00d4ff;
        margin-bottom: 1.25rem;
        line-height: 1.8;
        text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
        position: relative;
        z-index: 5;
    }

    /* Wildcard entries - Slot Machine Style */
    .wildcard-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .wildcard-entry {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
        border-radius: 6px;
        border: 2px solid var(--chiptune-accent);
        transition: all 0.2s;
    }

    .wildcard-entry:hover {
        border-color: var(--chiptune-primary);
        background: linear-gradient(90deg, rgba(0, 212, 255, 0.1), rgba(0, 0, 0, 0.4));
        transform: translateX(5px);
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    }

    .wildcard-entry.qualified {
        border-color: #ffd700;
        background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(0, 0, 0, 0.4));
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
    }

    .wildcard-entry.voted {
        border-color: var(--chiptune-primary);
        background: linear-gradient(90deg, rgba(0, 212, 255, 0.2), rgba(0, 0, 0, 0.4));
    }

    .wildcard-entry.is-playing {
        border-color: var(--chiptune-secondary);
        box-shadow: 0 0 15px rgba(255, 107, 157, 0.4);
    }

    .entry-play-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid var(--chiptune-primary);
        background: rgba(0, 0, 0, 0.6);
        color: var(--chiptune-primary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    .entry-play-btn:hover {
        background: var(--chiptune-primary);
        color: #000;
        box-shadow: 0 0 15px var(--chiptune-primary);
        transform: scale(1.1);
    }

    .wildcard-entry.is-playing .entry-play-btn {
        background: var(--chiptune-secondary);
        border-color: var(--chiptune-secondary);
        color: #000;
        animation: pulse-play 1s ease-in-out infinite;
    }

    @keyframes pulse-play {
        0%, 100% { box-shadow: 0 0 10px var(--chiptune-secondary); }
        50% { box-shadow: 0 0 20px var(--chiptune-secondary), 0 0 30px var(--chiptune-secondary); }
    }

    .entry-play-btn .pause-icon {
        font-size: 0.8rem;
    }

    .wildcard-entry .rank {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.6rem;
        color: var(--chiptune-accent);
        min-width: 2rem;
    }

    .wildcard-entry.qualified .rank {
        color: #ffd700;
    }

    .wildcard-entry .song-info {
        flex: 1;
        min-width: 0;
    }

    .wildcard-entry .song-name {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.55rem;
        color: #fff;
        margin-bottom: 0.25rem;
    }

    .wildcard-entry .source-month {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.4rem;
        color: var(--chiptune-text-secondary);
    }

    .wildcard-entry .entry-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .qualifier-badge {
        font-family: 'Press Start 2P', monospace;
        background: linear-gradient(180deg, #ffd700, #ffaa00);
        color: #000;
        padding: 0.35rem 0.6rem;
        border-radius: 4px;
        font-size: 0.4rem;
        font-weight: bold;
        text-transform: uppercase;
        box-shadow: 0 2px 0 #996600;
    }

    .vote-btn {
        font-family: 'Press Start 2P', monospace;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        border: 2px solid var(--chiptune-primary);
        background: transparent;
        color: var(--chiptune-primary);
        cursor: pointer;
        font-size: 0.45rem;
        transition: all 0.2s;
        text-transform: uppercase;
    }

    .vote-btn:hover {
        background: var(--chiptune-primary);
        color: #000;
        box-shadow: 0 0 15px var(--chiptune-primary);
    }

    .vote-btn.voted {
        background: var(--chiptune-primary);
        color: #000;
        box-shadow: 0 0 10px var(--chiptune-primary);
    }

    /* Monthly Champions Grid - Character Select */
    .champions-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }

    .champion-card {
        background: rgba(0, 0, 0, 0.6);
        border: 2px solid var(--chiptune-accent);
        border-radius: 6px;
        padding: 1rem 0.75rem;
        text-align: center;
        transition: all 0.2s;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 110px;
    }

    .champion-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--chiptune-accent);
    }

    .champion-card.has-champion {
        border-color: #ffd700;
    }

    .champion-card.has-champion::before {
        background: linear-gradient(90deg, #ffd700, #ffaa00);
    }

    .champion-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

    .champion-card .month-name {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.45rem;
        color: var(--chiptune-text-secondary);
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        letter-spacing: 1px;
    }

    .champion-card.has-champion .month-name {
        color: #ffd700;
    }

    .champion-card .song-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        color: #fff;
        line-height: 1.4;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .champion-card .no-champion {
        font-family: 'Press Start 2P', monospace;
        color: var(--chiptune-text-secondary);
        font-size: 0.45rem;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .yearly-champ-play {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid #ffd700;
        background: rgba(0, 0, 0, 0.6);
        color: #ffd700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        margin-top: 0.5rem;
        transition: all 0.2s;
        align-self: center;
        flex-shrink: 0;
    }

    .yearly-champ-play:hover {
        background: #ffd700;
        color: #000;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
        transform: scale(1.1);
    }

    .champion-card.is-playing {
        border-color: var(--chiptune-secondary);
        box-shadow: 0 0 15px rgba(255, 107, 157, 0.4);
    }

    .champion-card.is-playing .yearly-champ-play {
        background: var(--chiptune-secondary);
        border-color: var(--chiptune-secondary);
        color: #000;
        animation: pulse-play 1s ease-in-out infinite;
    }

    /* Group Stage */
    .groups-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .group-box {
        background: rgba(0, 0, 0, 0.4);
        border: 2px solid var(--chiptune-accent);
        border-radius: 8px;
        padding: 1rem;
    }

    .group-box.has-winner {
        border-color: #ffd700;
    }

    .group-header {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.6rem;
        color: var(--chiptune-primary);
        text-align: center;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--chiptune-accent);
    }

    .group-box.has-winner .group-header {
        color: #ffd700;
    }

    .group-entries {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .group-entry {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 4px;
        border: 2px solid transparent;
        transition: all 0.2s;
    }

    .group-entry:hover {
        border-color: var(--chiptune-primary);
        background: rgba(0, 212, 255, 0.1);
    }

    .group-entry.is-winner {
        border-color: #ffd700;
        background: rgba(255, 215, 0, 0.15);
    }

    .group-entry.voted {
        border-color: var(--chiptune-primary);
        background: rgba(0, 212, 255, 0.15);
    }

    .group-entry.is-playing {
        border-color: var(--chiptune-secondary);
        box-shadow: 0 0 10px rgba(255, 107, 157, 0.3);
    }

    .group-entry .entry-play-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .group-entry .song-info {
        flex: 1;
        min-width: 0;
    }

    .group-entry .song-name {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.65rem;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .group-entry .song-source {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        color: var(--chiptune-text-secondary);
        margin-top: 0.25rem;
    }

    .group-entry .entry-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .group-entry .winner-badge {
        font-family: 'Press Start 2P', monospace;
        background: linear-gradient(180deg, #ffd700, #ffaa00);
        color: #000;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.35rem;
        font-weight: bold;
    }

    .group-entry .vote-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.4rem;
    }

    .group-vote-instruction {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.45rem;
        color: var(--chiptune-text-secondary);
        text-align: center;
        padding: 0.75rem;
        margin-bottom: 1rem;
        background: rgba(0, 212, 255, 0.1);
        border-radius: 4px;
        border: 1px solid var(--chiptune-primary);
    }

    @media (max-width: 700px) {
        .groups-container {
            grid-template-columns: 1fr;
        }

        .group-entry .song-name {
            font-size: 0.55rem;
        }
    }

    /* Not started message */
    .not-started {
        text-align: center;
        padding: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 5;
    }

    .not-started .icon {
        font-size: 4rem;
        margin-bottom: 1.5rem;
        animation: icon-float 3s ease-in-out infinite;
        filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.8)) drop-shadow(0 0 30px rgba(0, 212, 255, 0.4));
    }

    @keyframes icon-float {
        0%, 100% {
            transform: translateY(0) scale(1);
            filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.8)) drop-shadow(0 0 30px rgba(0, 212, 255, 0.4));
        }
        50% {
            transform: translateY(-10px) scale(1.05);
            filter: drop-shadow(0 0 25px rgba(255, 107, 157, 0.9)) drop-shadow(0 0 50px rgba(255, 107, 157, 0.5));
        }
    }

    .not-started h2 {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.9rem;
        color: #00d4ff;
        margin-bottom: 1rem;
        text-align: center;
        text-shadow:
            0 0 10px #00d4ff,
            0 0 20px rgba(0, 212, 255, 0.6),
            0 0 40px rgba(0, 212, 255, 0.3);
        animation: text-glow 2s ease-in-out infinite;
    }

    @keyframes text-glow {
        0%, 100% {
            text-shadow:
                0 0 10px #00d4ff,
                0 0 20px rgba(0, 212, 255, 0.6),
                0 0 40px rgba(0, 212, 255, 0.3);
        }
        50% {
            text-shadow:
                0 0 15px #00d4ff,
                0 0 30px rgba(0, 212, 255, 0.8),
                0 0 60px rgba(0, 212, 255, 0.5);
        }
    }

    .not-started p {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        color: #ff6b9d;
        line-height: 2;
        text-align: center;
        max-width: 600px;
        text-shadow:
            0 0 8px rgba(255, 107, 157, 0.6);
    }

    /* Auth prompt - Insert Coin */
    .auth-prompt {
        background: linear-gradient(180deg, rgba(255, 107, 157, 0.15), rgba(0, 0, 0, 0.6));
        border: 3px solid var(--chiptune-primary);
        border-radius: 8px;
        padding: 1.5rem;
        text-align: center;
        margin-bottom: 1.5rem;
        animation: auth-glow 2s ease-in-out infinite;
    }

    @keyframes auth-glow {
        0%, 100% { box-shadow: 0 0 10px rgba(255, 107, 157, 0.3); }
        50% { box-shadow: 0 0 25px rgba(255, 107, 157, 0.5); }
    }

    .auth-prompt p {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.55rem;
        color: var(--chiptune-primary);
        margin-bottom: 1rem;
        animation: blink 1s step-end infinite;
    }

    @keyframes blink {
        50% { opacity: 0.7; }
    }

    .auth-prompt .btn {
        font-family: 'Press Start 2P', monospace;
        display: inline-block;
        padding: 0.75rem 1.5rem;
        background: var(--chiptune-primary);
        color: #000;
        border-radius: 4px;
        text-decoration: none;
        font-size: 0.5rem;
        transition: all 0.2s;
        border: none;
        cursor: pointer;
    }

    .auth-prompt .btn:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px var(--chiptune-primary);
    }

    /* Vote Counter */
    .vote-counter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;
        background: linear-gradient(180deg, rgba(0, 212, 255, 0.15), rgba(0, 0, 0, 0.6));
        border: 3px solid var(--chiptune-primary);
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .vote-counter .counter-label {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        color: var(--chiptune-text-secondary);
    }

    .vote-counter .counter-display {
        display: flex;
        gap: 0.5rem;
    }

    .vote-counter .vote-pip {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        border: 2px solid var(--chiptune-primary);
        background: rgba(0, 0, 0, 0.6);
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
    }

    .vote-counter .vote-pip.used {
        background: var(--chiptune-primary);
        box-shadow: 0 0 10px var(--chiptune-primary);
    }

    .vote-counter .vote-pip.used::after {
        content: '\2713';
        color: #000;
        font-weight: bold;
    }

    .vote-counter .votes-text {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.55rem;
        color: var(--chiptune-primary);
        text-shadow: 0 0 10px var(--chiptune-primary);
    }

    .vote-counter .votes-text .remaining {
        font-size: 0.8rem;
    }

    /* Voting instruction */
    .voting-instruction {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.45rem;
        color: var(--chiptune-text-secondary);
        text-align: center;
        padding: 0.5rem;
        margin-bottom: 1rem;
    }

    /* Clickable phase indicators */
    .phase-step.clickable {
        cursor: pointer;
        transition: transform 0.2s;
    }

    .phase-step.clickable:hover {
        transform: scale(1.05);
    }

    .phase-step.clickable:hover .phase-dot {
        box-shadow: 0 0 15px var(--chiptune-primary);
    }

    .phase-step.viewing .phase-dot {
        border-color: var(--chiptune-secondary) !important;
        box-shadow: 0 0 15px var(--chiptune-secondary) !important;
    }

    /* Loading state for phase swap */
    #phase-content.htmx-request {
        opacity: 0.5;
        pointer-events: none;
    }

    #phase-content {
        transition: opacity 0.2s;
    }

    /* Yearly Bracket Styles - Horizontal Layout */
    .yearly-bracket-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 1.5rem 0;
        overflow-x: auto;
    }

    .yearly-bracket-column {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        min-width: 280px;
    }

    .yearly-bracket-column.semifinals {
        gap: 2.5rem;
    }

    .yearly-column-header {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.7rem;
        color: var(--chiptune-primary);
        text-align: center;
        margin-bottom: 0.5rem;
        text-shadow: 0 0 10px var(--chiptune-primary);
    }

    .yearly-matchup {
        background: rgba(0, 0, 0, 0.4);
        border: 2px solid var(--chiptune-accent);
        border-radius: 8px;
        padding: 1rem;
        transition: all 0.3s;
    }

    .yearly-matchup.voting-open {
        border-color: var(--chiptune-primary);
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    }

    .yearly-matchup.decided {
        border-color: #ffd700;
    }

    .yearly-matchup.final-matchup {
        border-color: #ffd700;
        background: linear-gradient(180deg, rgba(255, 215, 0, 0.1), rgba(0, 0, 0, 0.4));
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    }

    .yearly-matchup-header {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        color: var(--chiptune-text-secondary);
        text-align: center;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--chiptune-accent);
    }

    .yearly-matchup-vs {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.6rem;
        color: var(--chiptune-text-secondary);
        text-align: center;
        padding: 0.5rem 0;
    }

    .yearly-matchup-vs.final-vs {
        font-size: 0.7rem;
        color: #ffd700;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    .yearly-bracket-slot {
        background: rgba(0, 0, 0, 0.3);
        border: 2px solid var(--chiptune-border, rgba(255, 255, 255, 0.1));
        border-radius: 8px;
        padding: 0.75rem;
        transition: all 0.3s;
        position: relative;
    }

    .yearly-bracket-slot.can-vote:hover {
        border-color: var(--chiptune-primary);
        transform: translateX(4px);
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    }

    .yearly-bracket-slot.winner {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
        border-color: #ffd700;
    }

    .yearly-bracket-slot.champion {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    }

    .yearly-bracket-slot.is-playing {
        border-color: var(--chiptune-secondary);
        box-shadow: 0 0 15px rgba(255, 107, 157, 0.4);
    }

    .yearly-bracket-slot.empty {
        background: rgba(0, 0, 0, 0.2);
        border-style: dashed;
        padding: 1.5rem;
        text-align: center;
    }

    .yearly-bracket-slot .slot-label {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        color: var(--chiptune-text-secondary);
    }

    .yearly-bracket-slot .slot-content {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }

    .yearly-bracket-slot .slot-info {
        flex: 1;
        min-width: 0;
    }

    .yearly-bracket-slot .slot-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.6rem;
        color: #fff;
        display: block;
        margin-bottom: 0.25rem;
    }

    .yearly-bracket-slot .slot-source {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.45rem;
        color: var(--chiptune-text-secondary);
        display: block;
    }

    .yearly-bracket-slot .winner-ribbon {
        position: absolute;
        top: -10px;
        right: -10px;
        background: linear-gradient(135deg, #ffd700, #ffaa00);
        color: #000;
        font-family: 'Press Start 2P', monospace;
        font-size: 0.4rem;
        padding: 0.3rem 0.6rem;
        border-radius: 4px;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
        z-index: 1;
    }

    .yearly-bracket-slot .winner-ribbon.champion-ribbon {
        background: linear-gradient(135deg, #ffd700, #ff6b00);
        animation: champion-glow 1.5s ease-in-out infinite;
    }

    @keyframes champion-glow {
        0%, 100% { box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5); }
        50% { box-shadow: 0 2px 20px rgba(255, 215, 0, 0.9); }
    }

    .yearly-bracket-play-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2px solid var(--chiptune-primary);
        background: rgba(0, 0, 0, 0.6);
        color: var(--chiptune-primary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    .yearly-bracket-play-btn:hover {
        background: var(--chiptune-primary);
        color: #000;
        box-shadow: 0 0 15px var(--chiptune-primary);
        transform: scale(1.1);
    }

    .yearly-bracket-slot.is-playing .yearly-bracket-play-btn {
        background: var(--chiptune-secondary);
        border-color: var(--chiptune-secondary);
        color: #000;
        animation: pulse-play 1s ease-in-out infinite;
    }

    .yearly-bracket-vote-btn {
        width: 100%;
        margin-top: 0.75rem;
        padding: 0.6rem 1rem;
        font-family: 'Press Start 2P', monospace;
        font-size: 0.5rem;
        background: transparent;
        border: 2px solid var(--chiptune-primary);
        color: var(--chiptune-primary);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
        text-transform: uppercase;
    }

    .yearly-bracket-vote-btn:hover {
        background: var(--chiptune-primary);
        color: #000;
        box-shadow: 0 0 15px var(--chiptune-primary);
        transform: translateY(-2px);
    }

    .yearly-bracket-vote-btn.voted {
        background: rgba(0, 0, 0, 0.6);
        border-color: #ffd700;
        color: #ffd700;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }

    .yearly-bracket-vote-btn:disabled {
        cursor: not-allowed;
        opacity: 0.9;
    }

    .yearly-bracket-vote-btn:disabled:hover {
        transform: none;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }

    .yearly-bracket-slot.voted {
        border-color: var(--chiptune-primary);
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 0, 0, 0.3));
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    }

    .yearly-bracket-slot .vote-count {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.45rem;
        color: var(--chiptune-text-secondary);
        text-align: center;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--chiptune-accent);
    }

    /* SVG Connectors */
    .yearly-bracket-connectors {
        width: 60px;
        flex-shrink: 0;
        color: var(--chiptune-accent);
    }

    .yearly-bracket-connectors .connector-svg {
        width: 100%;
        height: 300px;
    }

    /* Responsive */
    @media (max-width: 900px) {
        .yearly-bracket-container {
            flex-direction: column;
            gap: 1.5rem;
        }

        .yearly-bracket-connectors {
            display: none;
        }

        .yearly-bracket-column {
            width: 100%;
            max-width: 400px;
        }

        .yearly-bracket-column.final {
            margin-top: 1rem;
        }
    }

    /* Celebration message */
    .celebration-message {
        text-align: center;
        padding: 1.5rem;
    }

    .celebration-message p {
        font-family: 'Press Start 2P', monospace;
        font-size: 0.55rem;
        color: var(--chiptune-primary);
        margin: 0.5rem 0;
    }

    .celebration-message .sub-message {
        color: var(--chiptune-text-secondary);
        font-size: 0.45rem;
    }

    @media (max-width: 700px) {
        .matchups-row {
            flex-direction: column;
            gap: 1rem;
        }

        .matchup {
            min-width: 100%;
            max-width: 100%;
        }

        .bracket-connector {
            display: none;
        }

        .champion-card {
            max-width: 280px;
            padding: 1rem;
        }

        .champion-title {
            font-size: 0.65rem;
        }

        .champion-crown {
            font-size: 2.5rem;
            top: -18px;
            right: -10px;
        }

        .champion-stats {
            gap: 1rem;
        }

        .champion-stats .stat-value {
            font-size: 0.7rem;
        }
    }

    /* Responsive */
    @media (max-width: 900px) {
        .champions-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .phase-progress {
            padding: 1rem;
            gap: 0.25rem;
        }

        .phase-step {
            padding: 0.5rem 0.75rem;
        }

        .phase-dot {
            width: 36px;
            height: 36px;
            font-size: 0.6rem;
        }

        .phase-label {
            font-size: 0.4rem;
        }

        .phase-connector {
            width: 20px;
        }

        .phase-connector::before {
            font-size: 0.4rem;
        }
    }

    @media (max-width: 600px) {
        .champions-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .yearly-header h1 {
            font-size: 0.9rem;
        }

        .phase-progress {
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .phase-step {
            padding: 0.5rem;
        }

        .phase-dot {
            width: 32px;
            height: 32px;
            font-size: 0.55rem;
        }

        .phase-label {
            font-size: 0.35rem;
        }

        .phase-connector {
            width: 15px;
        }

        .phase-connector::before {
            display: none;
        }

        .wildcard-entry {
            flex-wrap: wrap;
        }

        .wildcard-entry .song-info {
            flex: 1 1 50%;
        }

        .wildcard-entry .entry-actions {
            flex: 1 0 100%;
            justify-content: flex-end;
            margin-top: 0.5rem;
        }

        .entry-play-btn {
            width: 36px;
            height: 36px;
        }
    }