header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--bg-light);
    border-bottom: 0.4rem solid var(--border-strong);
    box-shadow: 0 0.4rem 0 var(--primary-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem var(--space-lg);
    z-index: 100;
    flex-wrap: wrap;
}

.hud-left,
.hud-center,
.hud-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.hud-left {
    justify-content: flex-start;
}

.hud-center {
    justify-content: center;
    gap: 2rem;
}

.hud-right {
    justify-content: flex-end;
    gap: 1.5rem;
}

/* Top-right header buttons use display font */
.hud-right .btn {
    font-family: var(--font-display);
}

header h1 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--text-light);
    text-shadow: none;
    margin-bottom: 0;
}

.kitsch-box {
    background: var(--surface-muted);
    padding: 0.8rem 1.2rem;
    border: var(--pixel-border);
    box-shadow: 0.3rem 0.3rem 0 var(--border-strong);
    border-radius: var(--radius-md);
}

#time {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-light);
}

#bar {
    width: 16rem;
    height: 1rem;
    background: var(--bg-dark);
    border: 0.2rem solid var(--border-strong);
    overflow: hidden;
    margin-top: 0.5rem;
    border-radius: 0;
}

#bar > div {
    height: 100%;
    width: 100%;
    background: #ef4444 !important;
    background-image: none !important;
    transition: width 1s steps(20, end);
    border-radius: 0;
}

#timer-container.hard-core-timer:not(.hidden) {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 12rem;
    padding: 0.9rem 1.4rem 0.8rem 4.2rem;
    background: linear-gradient(180deg, #2a0d14 0%, #150810 100%);
    border-color: var(--border-strong);
    box-shadow:
        inset 0 0.3rem 0 rgba(255, 255, 255, 0.08),
        inset 0 -0.3rem 0 rgba(185, 28, 28, 0.55),
        0.35rem 0.35rem 0 var(--border-strong);
}

#timer-container.hard-core-timer::before {
    content: '!';
    position: absolute;
    left: 1.1rem;
    top: 50%;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    background: var(--primary);
    border: 0.2rem solid var(--border-strong);
    color: var(--text-light);
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: 0.18rem 0.18rem 0 var(--border-strong);
}

#timer-container.hard-core-timer #time {
    color: #ffffff;
    font-size: 2.2rem;
    line-height: 1;
    text-shadow:
        0.16rem 0 var(--primary-strong),
        -0.16rem 0 #000000;
}

#timer-container.hard-core-timer #bar {
    display: none;
}

.slot-machine {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.slot-machine .reel {
    width: 3rem;
    height: 3rem;
    background: var(--secondary);
    border: var(--pixel-border);
    border-radius: 0;
    box-shadow: 0.3rem 0.3rem 0 var(--border-strong);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-family: 'Press Start 2P', cursive;
    transition: transform 0.3s, opacity 0.3s;
}

.slot-machine .reel.revealed {
    animation: reel-pop 0.3s ease-out;
}

@keyframes reel-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.slot-machine.hidden {
    display: none;
}

/* Flash reels when the slot machine hits a win */
.slot-machine.win {
    animation: slot-win-rotate 1s ease-out;
}

.slot-machine.win .reel {
    animation: reel-win-flash 0.4s ease-out 0s 2;
}

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

@keyframes reel-win-flash {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 var(--accent);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 0 0 15px var(--accent);
    }
}
.slot-machine.win-lights {
    box-shadow: 0 0 10px var(--accent);
    animation: win-lights-glow 0.4s ease-in-out 0s 2;
}

.slot-machine.win.win-lights {
    animation: slot-win-rotate 1s ease-out,
        win-lights-glow 0.4s ease-in-out 0s 2;
}

@keyframes win-lights-glow {
    0% {
        box-shadow: 0 0 5px var(--accent);
    }
    50% {
        box-shadow: 0 0 20px var(--accent);
    }
    100% {
        box-shadow: 0 0 5px var(--accent);
    }
}

#combo-counter {
    color: var(--accent);
    font-size: 2.4rem;
    font-weight: 900;
    font-family: var(--font-display);
    letter-spacing: 0;
    text-shadow:
        0.18rem 0.18rem 0 var(--border-strong),
        0 0 18px rgba(255, 230, 0, 0.52);
    transform-origin: left center;
}
.combo-pop {
    animation: combo-pop-animation 480ms cubic-bezier(0.18, 0.9, 0.2, 1.45);
}