/* showdown-gametimer.css */
/* CLASSROOM SHOWDOWN — the game timer (showdown-gametimer.js): the setting
   on Start a New Showdown, the countdown pill in the board's top band
   (stacked under the Live pill, the same navy pill and display type), and
   the TIME'S UP! card over the board before the trophies. */

/* ------------------------------------------------------------ the setting */
.gt-setup{margin-top:4px}
.gt-setup-off .ss-pen-in{color:#A9B4C9}

/* ------------------------------------------------------------ the pill */
.gt-stack{display:flex;flex-direction:column;align-items:stretch;gap:6px}
/* With a timer the Live pill gets shorter so the two fit the band's 104. */
.gt-stack.gt-on .sb-live{height:40px;font-size:19px;gap:9px;padding:0 18px 0 12px;min-width:0}
.gt-stack.gt-on .sb-live-dot{width:20px;height:20px}
.gt-pill{
  display:flex;align-items:center;gap:10px;height:58px;padding:0 18px 0 8px;min-width:222px;
  background:linear-gradient(180deg,#2A2D7A,#17184E);border:3px solid rgba(255,216,77,.75);border-radius:999px;
  box-shadow:0 12px 26px rgba(20,27,45,.3),0 0 0 0 rgba(255,216,77,0);
  color:#fff;white-space:nowrap;
}
/* A progress ring: a yellow arc for the time left, drawn with a conic
   gradient and a navy centre — no image, no transform. */
.gt-ring{
  --gt-p:100%;
  position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:conic-gradient(#FFD84D var(--gt-p), rgba(255,255,255,.16) 0);
}
.gt-ring::after{
  content:'';position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#3A3E9A,#1B1C58);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35);
}
.gt-tx{display:flex;flex-direction:column;justify-content:center;line-height:1}
.gt-cap{font-size:10.5px;font-weight:900;letter-spacing:.14em;color:#9DEEFF}
.gt-digits{
  font-family:var(--display);font-size:31px;font-weight:700;font-variant-numeric:tabular-nums;
  color:#FFD84D;text-shadow:0 2px 0 rgba(0,0,0,.35);margin-top:2px;
}
/* Before the first question: the full time, a little quieter. */
.gt-wait .gt-digits{color:#FFE9A6}
.gt-wait{border-color:rgba(157,238,255,.5)}
/* The last minute: the pill turns red and glows. */
.gt-low,.gt-final{
  background:linear-gradient(180deg,#F26D6D,#C73A3A);border-color:#FFD84D;
  animation:gt-glow 1.2s ease-in-out infinite;
}
.gt-low .gt-ring,.gt-final .gt-ring{background:conic-gradient(#fff var(--gt-p), rgba(255,255,255,.25) 0)}
.gt-low .gt-ring::after,.gt-final .gt-ring::after{background:radial-gradient(circle at 50% 40%,#E25252,#A92F2F)}
.gt-low .gt-cap,.gt-final .gt-cap{color:#FFE9A6}
.gt-low .gt-digits,.gt-final .gt-digits{color:#fff}
/* The last ten seconds: the digits blink too (opacity only — a scale on a
   zoomed stage re-rasterises every frame and wiggles). */
.gt-final .gt-digits{animation:gt-blink .5s steps(2,start) infinite}
@keyframes gt-glow{0%,100%{box-shadow:0 12px 26px rgba(20,27,45,.3),0 0 0 0 rgba(255,216,77,.0)}50%{box-shadow:0 12px 26px rgba(20,27,45,.3),0 0 0 8px rgba(255,216,77,.35)}}
@keyframes gt-blink{to{opacity:.35}}

/* ------------------------------------------------------------ time's up */
.gt-up{
  left:0;top:0;width:100%;height:100%;z-index:60;
  display:flex;align-items:center;justify-content:center;
  background:rgba(23,24,78,.5);animation:gt-fade .25s ease-out;
}
.gt-up-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:34px 70px 34px 186px;border-radius:44px;
  background:linear-gradient(180deg,#FFFFFF,#F1F8FF);border:5px solid var(--line,#9DD6FF);
  box-shadow:0 30px 70px rgba(20,27,45,.45);animation:gt-pop .35s cubic-bezier(.2,.9,.3,1.25);
}
/* v2.75.34 — inside the card, centred on its height (was left:-30px / bottom:-14px, which hung it outside). */
.gt-up-mascot{position:absolute;left:18px;top:50%;width:150px;margin-top:-80px;filter:drop-shadow(0 10px 16px rgba(20,27,45,.3))}
.gt-up-row{display:flex;align-items:center;gap:14px}
.gt-up-ray{width:64px}
.gt-up-h{
  font-family:var(--display);font-size:96px;font-weight:700;line-height:1;color:#FF7A1A;
  text-shadow:0 4px 0 #9a1d00,0 10px 24px rgba(0,0,0,.25);white-space:nowrap;
}
.gt-up-p{font-size:24px;font-weight:800;color:var(--royal,#2F63D8)}
@keyframes gt-fade{from{opacity:0}to{opacity:1}}
@keyframes gt-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .gt-low,.gt-final,.gt-final .gt-digits,.gt-up,.gt-up-card{animation:none}
}