/* ═══════════════════════════════════════════════════════════════
   careiti-countdown.css — 倒數畫面 + 遊戲入面畫面要 fit 得晒
   ═══════════════════════════════════════════════════════════════ */

.cgc-root {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(34, 30, 26, .72);
  font-family: var(--f-album, system-ui, sans-serif);
}
.cgc-card {
  width: min(92vw, 380px);
  padding: 28px 24px 22px;
  border: 1px solid var(--rule, #DFD3BE);
  border-radius: var(--r-print, 2px);
  background: var(--print, #FFFDF8);
  box-shadow: var(--sh-lift, 0 20px 44px rgba(58, 42, 20, .22));
  text-align: center;
}
.cgc-lead {
  margin: 0;
  font-size: max(calc(17px * var(--ct-k4, 1)), var(--ct-min, 0px));
  font-weight: 700;
  color: var(--ink, #221E1A);
}
/* Big enough to read across a room and from a lap, which is the whole
   point of a countdown for this audience. */
.cgc-num {
  margin: 6px 0 2px;
  font-size: clamp(72px, 22vmin, 150px);
  font-weight: 800;
  line-height: 1;
  color: var(--teal-ink, #0B6E64);
  font-variant-numeric: tabular-nums;
}
.cgc-sub {
  margin: 0 0 18px;
  font-size: max(calc(14px * var(--ct-k3, 1)), var(--ct-min, 0px));
  color: var(--ink-2, #5B5147);
}
.cgc-skip {
  display: block;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--teal-deep, #095A52);
  border-radius: var(--r-ui, 8px);
  background: var(--teal-ink, #0B6E64);
  color: #fff;
  font: inherit;
  font-size: max(calc(16px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 700;
  cursor: pointer;
}
.cgc-cancel {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border: 1px solid var(--edge, #8E7C5E);
  border-radius: var(--r-ui, 8px);
  background: var(--print, #FFFDF8);
  color: var(--ink-2, #5B5147);
  font: inherit;
  font-size: max(calc(15px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 700;
  cursor: pointer;
}

/* ── 玩緊嗰陣 ────────────────────────────────────────────────────
   Reported as "畫面會跳左去底唔知玩緊". The scroll reset in JS is what
   fixes where you land. This layer only clears the furniture out of the
   way; it deliberately does NOT constrain the page.

   An earlier version added `overflow: hidden; height: 100dvh` here to
   force the round to fit. It also clipped the RESULT screen into
   invisibility — the page flashed and went blank — because the class was
   still on when the result appeared. Even with that state bug fixed, a
   rule that can make a whole screen unreachable is not worth what it
   bought: the games are ten different heights and some genuinely need to
   scroll. Landing at the top is the part that solves the reported
   problem; clipping was the part that caused a new one. */
body.cgc-playing .cgt-bar { position: sticky; top: 0; }

/* Everything that is not the game gets out of the way while a round is
   running: the science card, the how-to prose, the hero blurb and the
   bottom nav are all reading material, and none of it is being read
   mid-round. The level picker hides itself already. */
body.cgc-playing #sciCard,
body.cgc-playing .sci-card,
body.cgc-playing .section-title,
body.cgc-playing .cgm-switch,
body.cgc-playing .cgm-note,
body.cgc-playing .cht-open,
body.cgc-playing .hero p,
body.cgc-playing .cnav-bar { display: none !important; }

/* No min-height on the play area either, for the same reason: a game
   that needs more room must be allowed to have it. */

@media (prefers-reduced-motion: reduce) {
  .cgc-num { transition: none; }
}