body.countdown-mode {
    background: #160b05;
    color: #fff8ef;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

.countdown-screen {
    align-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 151, 47, 0.2), transparent 34rem),
        linear-gradient(135deg, #160b05 0%, #2a1006 48%, #100703 100%);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    padding: 2rem;
    position: relative;
}

.countdown-screen::before,
.countdown-screen::after {
    border: 1px solid rgba(255, 157, 55, 0.18);
    border-radius: 50%;
    content: '';
    height: 46rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46rem;
}

.countdown-screen::after {
    height: 64rem;
    opacity: 0.5;
    width: 64rem;
}

.countdown-halo {
    background: #ff7a18;
    border-radius: 50%;
    filter: blur(90px);
    height: 12rem;
    opacity: 0.2;
    position: absolute;
    width: 12rem;
}

.countdown-panel {
    animation: countdown-enter 900ms cubic-bezier(.2,.8,.2,1) both;
    max-width: 74rem;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}

.countdown-kicker {
    color: #ff9a3d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.42em;
    margin-bottom: 1.7rem;
    text-transform: uppercase;
}

.countdown-panel h1 {
    color: #fff8ef;
    font-size: clamp(2.3rem, 6vw, 5.8rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.98;
    margin: 0 auto;
    max-width: 12ch;
}

.countdown-intro {
    color: rgba(255, 231, 205, 0.78);
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    margin: 1.8rem auto 3rem;
    max-width: 36rem;
}

.countdown-clock {
    display: grid;
    gap: clamp(0.6rem, 2vw, 1.4rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 58rem;
}

.countdown-clock div {
    background: rgba(255, 132, 33, 0.1);
    border: 1px solid rgba(255, 170, 91, 0.3);
    border-radius: 0.8rem;
    box-shadow: 0 0 2.5rem rgba(255, 111, 14, 0.1), inset 0 1px rgba(255, 220, 174, 0.12);
    padding: clamp(1rem, 3vw, 2rem) 0.5rem;
}

.countdown-clock strong,
.countdown-clock span {
    display: block;
}

.countdown-clock strong {
    color: #ffb15b;
    font-size: clamp(2rem, 7vw, 5.8rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
    text-shadow: 0 0 1.6rem rgba(255, 132, 24, 0.5);
}

.countdown-clock span {
    color: rgba(255, 224, 190, 0.65);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    margin-top: 0.7rem;
    text-transform: uppercase;
}

.countdown-note {
    color: rgba(255, 218, 180, 0.48);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    margin-top: 2rem;
}

.countdown-screen.countdown-release {
    animation: countdown-release-flash 1.5s cubic-bezier(.2,.8,.2,1) both;
}

.countdown-release .countdown-panel {
    animation: countdown-release-panel 1.2s cubic-bezier(.2,.8,.2,1) both;
}

.countdown-release .countdown-clock div {
    animation: countdown-release-tile 720ms cubic-bezier(.18,1.15,.3,1) both;
}
.countdown-release .countdown-clock div:nth-child(2) { animation-delay: 80ms; }
.countdown-release .countdown-clock div:nth-child(3) { animation-delay: 160ms; }
.countdown-release .countdown-clock div:nth-child(4) { animation-delay: 240ms; }

@keyframes countdown-enter {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes countdown-release-flash {
    0% { filter: brightness(1); }
    28% { filter: brightness(1.6); }
    100% { filter: brightness(1); }
}

@keyframes countdown-release-panel {
    0% { transform: scale(1); opacity: 1; }
    35% { transform: scale(1.025); opacity: 1; }
    100% { transform: scale(.98); opacity: 0; }
}

@keyframes countdown-release-tile {
    0% { transform: scale(1); border-color: rgba(255, 170, 91, 0.3); }
    45% { transform: scale(1.08); border-color: #ffe0a7; box-shadow: 0 0 3.5rem rgba(255, 162, 46, 0.62); }
    100% { transform: scale(.96); opacity: 0; }
}

@media (max-width: 560px) {
    .countdown-screen { padding: 1.2rem; }
    .countdown-panel h1 { max-width: 11ch; }
    .countdown-intro { margin-bottom: 2rem; }
    .countdown-clock { gap: 0.35rem; }
    .countdown-clock div { border-radius: 0.5rem; padding: 0.9rem 0.2rem; }
    .countdown-clock span { font-size: 0.55rem; letter-spacing: 0.06em; }
}