/* 1. Global Full Screen Setup */
body {
    /* Matching the dark grey from your reference image */
    background: radial-gradient(circle at center, #2b2b2b 0%, #1a1a1a 100%);
    color: #fff;
    font-family: 'Roboto Mono', monospace;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    /* Prevent scrolling if reels get too long */
    display: flex;
    justify-content: center;
    align-items: center;
}

.stage {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* 2. The Clock Container (Full Screen) */
.clock {
    width: 100%;
    height: 100vh;
    /* Fill the page */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 3. The Columns (Full Height Tracks) */
.column {
    position: relative;
    width: 80px;
    height: 100vh;
    /* Fill vertical space */
    margin: 0 5px;

    /* CRITICAL: Allow ribbons to extend fully up and down */
    overflow: visible;

    /* Flex alignment for the lens pseudo-element */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Group spacing */
.column:nth-child(2),
.column:nth-child(4) {
    margin-right: 40px;
}

/* 4. The Lens (Circular Spotlight) */
.column::after {
    content: '';
    position: absolute;
    /* Since column is flex-centered, we just need dimensions */
    width: 84px;
    height: 84px;
    border-radius: 50%;

    /* Lens Styles */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), transparent 60%);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.8),
        inset 0 2px 3px rgba(255, 255, 255, 0.2),
        inset 0 -2px 10px rgba(0, 0, 0, 0.6);

    backdrop-filter: brightness(1.6) contrast(1.1);
    z-index: 10;
    /* Above numbers, below text */
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 5. The Moving Ribbon */
.numbers {
    position: absolute;
    top: 50%;
    left: 50%;

    /* UPDATED WIDTH & CENTERING */
    width: 60px;
    /* Was 50px */
    margin-left: -30px;
    /* Was -25px (Must be half of width) */

    display: flex;
    flex-direction: column;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

    background: #1f1f1f;
    border-radius: 30px;
    /* Slight adjustment to match new width */
    border: 1px solid #333;
    padding: 20px 0;

    box-sizing: content-box;
}

.num {
    height: 80px;
    line-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-weight: 700;
    color: #777;
    /* Readable but dimmer than active */
}

/* 6. The Glowing Text Label */
.label {
    position: absolute;
    /* Position it visually on top of the reels */
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);

    font-size: 14px;
    letter-spacing: 0.3em;
    font-weight: 700;
    color: #fff;

    /* THE GLOW EFFECT */
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(255, 255, 255, 0.4);

    z-index: 100;
    /* Sit on top of everything */
    pointer-events: none;
    background: rgba(0, 0, 0, 0.7);
    /* Optional: tiny background for readability */
    padding: 5px 10px;
    border-radius: 4px;
}

/* Mobile Responsive Rules */
@media (max-width: 700px) {

    /* 1. Shrink the Columns */
    .column {
        width: 50px;
        /* Desktop was 80px */
        margin: 0 2px;
        /* Tighter gaps */
    }

    /* 2. Adjust Group Spacing */
    .column:nth-child(2),
    .column:nth-child(4) {
        margin-right: 15px;
        /* Desktop was 40px */
    }

    /* 3. Shrink the Lenses */
    .column::after {
        width: 54px;
        /* Slightly wider than column */
        height: 54px;
    }

    /* 4. Shrink the Ribbons (The Strip) */
    .numbers {
        width: 40px;
        /* Desktop was 60px */
        margin-left: -20px;
        /* Half of width */
        border-radius: 20px;
    }

    /* 5. Shrink the Numbers (Font & Height) */
    .num {
        height: 60px;
        /* Desktop was 80px */
        line-height: 60px;
        /* Keep centered */
        font-size: 24px;
        /* Smaller font */
    }

    /* 6. Move the Label */
    .label {
        width: 100%;
        text-align: center;
        bottom: 10%;
        font-size: 10px;
        letter-spacing: 2px;
    }
}