/* =========================================================
   FIGHTDLE — DAILY RESET COUNTDOWN
   The "resets in" panel, so every mode can show the same one.
   Pairs with /shared/countdown.js.

   Taken from the Connections implementation, with one fix: its
   underline carried `box-shadow: 0 0 14px #3A3A3A(0,0,0,.9)`, which
   isn't valid CSS — the whole declaration was being dropped.
   ========================================================= */

.dt-hero__timer {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    margin: .4rem;
    padding: .9rem 1.8rem;
    border-radius: 16px;
}

.dt-timer-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .85);
}

.dt-timer-value {
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .18em;
    margin: .15rem 0;
    color: #ffe7b0;
    /* Fixed width per digit so the countdown doesn't jitter as it ticks. */
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(255, 204, 120, .9),
                 0 0 18px rgba(0, 0, 0, .95);
}

.dt-timer-underline {
    width: 100%;
    height: 3px;
    margin: .1rem 0 .3rem;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #ffda8a, #ffe9b8, #ffda8a, transparent);
    box-shadow: 0 0 8px rgba(255, 218, 138, .8),
                0 0 14px rgba(0, 0, 0, .9);
}

.dt-timer-note {
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

/* Pulses once the clock hits zero, until the page is reloaded. */
.dt-timer-live .dt-timer-value { animation: dt-timer-pulse 1s infinite alternate; }

@keyframes dt-timer-pulse {
    from {
        transform: scale(1);
        text-shadow: 0 0 8px rgba(255, 204, 120, .8), 0 0 18px rgba(0, 0, 0, 1);
    }
    to {
        transform: scale(1.04);
        text-shadow: 0 0 14px rgba(255, 230, 170, 1), 0 0 24px rgba(0, 0, 0, 1);
    }
}

@media (max-width: 600px) {
    .dt-hero__timer { padding: .7rem 1.2rem; }
    .dt-timer-value { font-size: 1.55rem; }
    .dt-timer-label { font-size: .9rem; }
}