/* Apply basic styles to the timer body */
.timer-body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    color: white; /* Text remains readable over all backgrounds */
    font-family: sans-serif;
    position: relative;

    /* Default background with blue, yellow, and red thirds */
    background: linear-gradient(to bottom, red 33.33%, orange 33.33%, orange 66.66%, blue 66.66%);
}

/* Black overlay to shrink downward progressively based on --overlay-height */
.timer-body::before {
    content: '';
    position: absolute;
    top: 0; /* Anchor overlay to the TOP of the screen */
    left: 0;
    width: 100%;
    height: var(--overlay-height, 100%); /* Fully covers the screen initially */
    background: black;
    z-index: 10; /* Stays above the gradient background */
    pointer-events: none; /* No interaction with the overlay */
    transition: height 0.5s linear; /* Smooth and progressive height shrink */
}

/* Over-time animation: flashing red effect */
.timer-body.over-time::before {
    animation: flashing-red 1s infinite;
    height: 100%; /* Fully cover during over-time */
    background: transparent;
}

/* Timer container for controls and timer text */
.timer-body .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative; /* Needed for z-index stacking */
    z-index: 20; /* Keeps content above overlay */
}

/* Style for controls */
.timer-body .controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 20px;
    position: relative;
    top: 0;
}

.timer-body .controls button,
.timer-body .controls input {
    font-size: 1.5em;
    padding: 10px;
    position: relative;
    z-index: 21; /* Ensure controls remain above everything */
}

/* Style for the timer */
.timer-body #timer {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size, 10vw);
    font-weight: 900;
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
    z-index: 21; /* Ensure the timer text remains on top */
}

/* Over-time flashing red animation */
@keyframes flashing-red {
    0% { background-color: black; }
    100% { background-color: red; }
}