/* buzzer-gametimer.css */
/* CLASSROOM SHOWDOWN — the game timer on the phones (buzzer-gametimer.js):
   a pill at the top of the game screen, opposite the Round pill, in the
   board's colours — navy, a yellow ring, yellow display-font digits; red in
   the last minute. */
.sd-gtimer{
  position:absolute;left:2%;top:2%;z-index:4;
  display:flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;
  background:linear-gradient(180deg,#2A2D7A,#17184E);border:2px solid rgba(255,216,77,.75);border-radius:999px;
  color:#fff;white-space:nowrap;box-shadow:0 6px 16px rgba(20,27,45,.3);
}
.sd-gtimer[hidden]{display:none}
.sd-gt-ring{
  --gt-p:100%;
  position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:conic-gradient(#FFD84D var(--gt-p), rgba(255,255,255,.16) 0);
}
.sd-gt-ring::after{content:'';position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#3A3E9A,#1B1C58)}
.sd-gt-tx{display:flex;flex-direction:column;line-height:1}
.sd-gt-cap{font-family:var(--sans,'Nunito',sans-serif);font-size:9px;font-weight:900;letter-spacing:.12em;color:#9DEEFF}
.sd-gt-digits{font-family:var(--display,'Fredoka',sans-serif);font-size:clamp(18px,1.8vw,24px);font-weight:700;font-variant-numeric:tabular-nums;color:#FFD84D;margin-top:1px}
.sd-gt-wait .sd-gt-digits{color:#FFE9A6}
.sd-gt-wait{border-color:rgba(157,238,255,.6)}
.sd-gt-low,.sd-gt-final{background:linear-gradient(180deg,#F26D6D,#C73A3A);border-color:#FFD84D;animation:sd-gt-glow 1.2s ease-in-out infinite}
.sd-gt-low .sd-gt-ring,.sd-gt-final .sd-gt-ring{background:conic-gradient(#fff var(--gt-p), rgba(255,255,255,.25) 0)}
.sd-gt-low .sd-gt-ring::after,.sd-gt-final .sd-gt-ring::after{background:radial-gradient(circle at 50% 40%,#E25252,#A92F2F)}
.sd-gt-low .sd-gt-cap,.sd-gt-final .sd-gt-cap{color:#FFE9A6}
.sd-gt-low .sd-gt-digits,.sd-gt-final .sd-gt-digits{color:#fff}
.sd-gt-final .sd-gt-digits{animation:sd-gt-blink .5s steps(2,start) infinite}
@keyframes sd-gt-glow{0%,100%{box-shadow:0 6px 16px rgba(20,27,45,.3),0 0 0 0 rgba(255,216,77,0)}50%{box-shadow:0 6px 16px rgba(20,27,45,.3),0 0 0 6px rgba(255,216,77,.35)}}
@keyframes sd-gt-blink{to{opacity:.35}}
/* A phone: the Round pill sits in the flow at the top right; the timer
   takes the same row on the left, the same height. */
@media (max-width:700px){
  .sd-gtimer{left:10px;top:10px;padding:3px 11px 3px 4px;gap:6px}
  .sd-gt-ring{width:22px;height:22px}
  .sd-gt-ring::after{inset:3px}
  .sd-gt-cap{font-size:7.5px}
  .sd-gt-digits{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.sd-gt-low,.sd-gt-final,.sd-gt-final .sd-gt-digits{animation:none}}