@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.5s ease;
    overflow: hidden;
    margin: 0;
    height: 100vh;
}

.timer-font {
    font-family: 'Orbitron', sans-serif;
}

.state-prepare {
    background-color: #f59e0b;
}

.state-fight {
    background-color: #10b981;
}

.state-rest {
    background-color: #ef4444;
}

.state-idle {
    background-color: #111827;
}

@keyframes pulse-red {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.low-time {
    animation: pulse-red 1s infinite;
}

#timer-display {
    font-size: clamp(5rem, 30vw, 18rem);
    line-height: 1;
}

/* Menu Overlay Transition */
#side-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
}

#side-menu.open {
    transform: translateX(0);
}

#menu-overlay {
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    opacity: 0;
}

#menu-overlay.open {
    pointer-events: auto;
    opacity: 1;
}