/* ============================================================================
   countdown.css - the wait.

   This card is the first thing most students will ever see of the exam, and
   for hours it is the ONLY thing, so it has to hold attention without
   shouting. Navy sheet, gold dials, one slow pulse on the pip.

   The dials are set in Fraunces at a size that reads across a room, with
   tabular numerals so the digits do not jitter as the seconds change - a
   countdown where the layout shifts every second looks broken.

   In the last fifteen minutes it goes gold-edged and the copy changes. That
   is the only state change, and it is doing real work: it is the difference
   between "come back later" and "do not go anywhere".
   ========================================================================== */

.cd{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#08203C 0%,#123F6E 100%);
  border-radius:22px; padding:clamp(28px,4vw,44px);
  box-shadow:0 20px 50px rgba(8,32,60,.3);
  color:#fff; text-align:center;
}
/* One warm sweep from the top-left, so the card is lit rather than flat. */
.cd::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 140% at 0% 0%, rgba(233,197,103,.18), transparent 60%);
}
.cd > *{position:relative}

.cd__k{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:#8FBCE8;
}
.cd__pip{
  width:9px; height:9px; border-radius:50%; background:#5BD08A; flex:none;
  box-shadow:0 0 0 4px rgba(91,208,138,.2);
  animation:cd-pulse 2.4s ease-in-out infinite;
}
@keyframes cd-pulse{50%{opacity:.35; transform:scale(.85)}}

/* ------------------------------------------------------------- the dials */
.cd__dials{
  display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(10px,2.4vw,26px); margin:22px 0 20px;
}
.cd__dial{min-width:clamp(62px,9vw,96px)}
.cd__dial[hidden]{display:none}
.cd__dial b{
  display:block; font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(40px,8.5vw,76px); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  color:#fff;
  /* The separator, drawn rather than typed, so it never wraps onto its own
     line on a narrow phone. */
  position:relative;
}
.cd__dial + .cd__dial b::before{
  content:":"; position:absolute; left:calc(-1 * clamp(10px,2.4vw,26px) / 2);
  transform:translateX(-50%); color:rgba(255,255,255,.28); font-weight:400;
}
.cd__dial span{
  display:block; margin-top:8px; font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#7FA5CE;
}

.cd__when{
  font-size:15px; font-weight:600; color:#DCE9F8; margin-bottom:14px;
}
.cd__msg{
  font-size:14.5px; line-height:1.65; color:#A9C6E6;
  max-width:52ch; margin:0 auto;
}
.cd__msg b{color:#fff}

/* ------------------------------------------------- the last fifteen minutes */
.cd.is-soon{
  background:linear-gradient(135deg,#1A1405 0%,#3B2E08 100%);
  box-shadow:0 20px 50px rgba(122,97,26,.34);
}
.cd.is-soon::before{
  background:radial-gradient(120% 140% at 0% 0%, rgba(245,220,142,.26), transparent 60%);
}
.cd.is-soon .cd__k{color:#E9C567}
.cd.is-soon .cd__pip{background:#F5DC8E; box-shadow:0 0 0 4px rgba(245,220,142,.22);
  animation-duration:1.1s}
.cd.is-soon .cd__dial b{color:#F5DC8E}
.cd.is-soon .cd__dial span{color:#B79A55}
.cd.is-soon .cd__when{color:#F0E3BE}
.cd.is-soon .cd__msg{color:#D8C79B}

.cd.is-open{background:linear-gradient(135deg,#08281A 0%,#12885B 100%)}
.cd.is-open .cd__pip{background:#fff}

@media (prefers-reduced-motion:reduce){
  .cd__pip{animation:none}
}