/* Countdown-style letters and numbers game (/countdown-game/ only). Owned by the word-countdown-game job. */
.cg-tool { --cg-clock: 128px; }
.cg-fs { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.cg-fs legend { font-size: .85rem; color: var(--ink-2); padding: 0; margin-bottom: 4px; }
.cg-fs .seg { flex-wrap: wrap; border-radius: 14px; }
.cg-fs .seg span { padding: 8px 13px; }
.cg-opts { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: end; margin-bottom: 8px; }
.cg-opts .cg-fs { margin-bottom: 8px; }
.cg-opts .field.inline { margin-bottom: 8px; }
.cg-snd { margin-bottom: 14px; }
.cg-start { min-width: 140px; font-size: 1.05rem; }
.cg-small { padding: 6px 12px; font-size: .88rem; }
.cg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.cg-round { margin: 0; font: 700 1rem/1.3 var(--display); flex: 1 1 180px; }
.cg-score { display: flex; gap: 8px; }
.cg-pts { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: 999px; background: var(--tile-hi); color: var(--tile-ink); font-size: .85rem; }
.cg-pts b { font: 700 1.1rem/1 var(--display); }
.cg-stage { display: grid; grid-template-columns: var(--cg-clock) minmax(0, 1fr); gap: 18px; align-items: start; }
.cg-clock { position: relative; width: var(--cg-clock); height: var(--cg-clock); }
.cg-clock svg { width: 100%; height: 100%; display: block; }
.cg-track { fill: var(--surface); stroke: var(--line); stroke-width: 10; }
.cg-ring { fill: none; stroke: var(--action); stroke-width: 10; stroke-linecap: butt; }
.cg-hand { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.cg-pin { fill: var(--ink); }
.cg-secs { position: absolute; left: 0; right: 0; top: 62%; text-align: center; font: 700 1.25rem/1 var(--display); color: var(--ink); }
.cg-final .cg-ring { stroke: var(--error); }
.cg-final .cg-secs { color: var(--error); font-size: 1.6rem; animation: cg-pulse 1s ease-in-out infinite; }
.cg-out .cg-secs::after { content: " · time"; font-size: .7rem; font-weight: 600; }
@keyframes cg-pulse { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .cg-final .cg-secs { animation: none; } }
.cg-main { min-width: 0; }
.cg-h { font: 700 1.2rem/1.3 var(--display); margin: 0 0 10px; }
.cg-sub { font: 700 1.02rem/1.3 var(--display); margin: 16px 0 8px; }
.cg-tiles { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; max-width: 470px; margin: 0 0 12px; }
.cg-tile { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border-radius: 7px; border: 0; padding: 0; background: var(--tile); color: var(--tile-ink);
  font: 700 clamp(1.05rem, 5vw, 1.6rem)/1 var(--tile-font); box-shadow: 0 3px 0 var(--tile-edge); cursor: pointer; }
.cg-tile.empty { background: transparent; box-shadow: none; border: 2px dashed var(--line); cursor: default; }
.cg-tile:disabled { cursor: default; opacity: 1; }
.cg-tile.used { opacity: .35; text-decoration: line-through; }
.cg-tile:focus-visible, .cg-num:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.cg-pick .btn { min-width: 118px; }
kbd { font: 600 .72rem/1 var(--font); border: 1px solid currentColor; border-radius: 4px; padding: 1px 4px; opacity: .75; margin-left: 4px; }
.cg-answer { margin-top: 6px; }
.cg-answer > label { display: block; font-size: .85rem; color: var(--ink-2); margin-bottom: 4px; }
.cg-answer .main-input input { text-transform: uppercase; letter-spacing: .08em; }
.cg-answer .main-input input:disabled { opacity: .7; }
.cg-target { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); margin-bottom: 12px; }
.cg-target b { font: 700 2rem/1 var(--tile-font); letter-spacing: .05em; }
.cg-nums { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-height: 52px; }
.cg-num { min-width: 56px; height: 50px; padding: 0 10px; border-radius: 8px; border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  font: 700 1.3rem/1 var(--tile-font); cursor: pointer; }
.cg-num.made { border-style: dashed; border-color: var(--action); }
.cg-num.sel { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.cg-num:disabled { cursor: default; opacity: .8; }
.cg-ops .cg-op { min-width: 52px; font: 700 1.3rem/1 var(--font); }
.cg-ops .cg-op[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.cg-work { font: 600 1rem/1.5 var(--tile-font); margin: 8px 0; padding-left: 1.4em; }
.cg-work:empty { display: none; }
.cg-mine { margin: 4px 0 8px; }
.cg-mine b { font: 700 1.3rem/1 var(--tile-font); }
.cg-type textarea { width: 100%; font: 600 1rem/1.4 var(--tile-font); margin-top: 6px; }
.cg-type { margin-bottom: 10px; }
.cg-cover { padding: 18px; border-radius: var(--radius); background: var(--tile-hi); color: var(--tile-ink); margin: 6px 0 12px; }
.cg-cover p { margin: 0 0 12px; }
.cg-covered > :not(.cg-cover):not(.cg-h) { visibility: hidden; height: 0; overflow: hidden; margin: 0; }
.cg-res { margin: 6px 0; padding: 8px 12px; border-radius: 8px; border-left: 5px solid var(--line); background: var(--surface); }
.cg-res p { margin: 0; }
.cg-res.ok { border-left-color: var(--solved); background: var(--solved-bg); }
.cg-res.bad { border-left-color: var(--error); }
.small-steps { font-size: .95rem; margin: 6px 0 0; }
.cg-best { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.cg-best .w { font-family: var(--tile-font); font-weight: 700; letter-spacing: .04em; }
.cg-len { font-size: .82rem; color: var(--ink-2); min-width: 6.5em; }
.big-w { font-size: 1.4rem; }
.cg-new { font-weight: 700; color: var(--solved); }
.cg-next { margin-top: 14px; }
.cg-log { padding-left: 1.3em; font-size: .92rem; }
.cg-final-pts { font-size: 1.1rem; }
.cg-buzzers { margin-bottom: 10px; }
.cg-buzzers .btn { flex: 1 1 160px; min-height: 52px; }
.cg-stats { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
.cg-stats summary { cursor: pointer; font-weight: 650; }
.cg-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; margin: 10px 0; }
.cg-dl div { display: grid; }
.cg-dl dt { font-size: .82rem; color: var(--ink-2); }
.cg-dl dd { margin: 0; font-weight: 650; }
.cg-tm { margin: 12px 0 0; }
@media (max-width: 620px) {
  .cg-tool { --cg-clock: 84px; }
  .cg-bar { gap: 6px; margin-bottom: 8px; }
  .cg-round { flex-basis: 100%; }
  .cg-bar .cg-small { padding: 4px 9px; font-size: .8rem; }
  .cg-pts { padding: 3px 8px; font-size: .78rem; }
  .cg-h { font-size: 1.05rem; margin-bottom: 8px; }
  .cg-stage { grid-template-columns: 1fr; gap: 10px; }
  .cg-clock { margin: 0 auto; }
  .cg-secs { font-size: 1rem; }
  .cg-pick .btn { min-width: 0; flex: 1 1 30%; }
  .cg-num { min-width: 0; flex: 1 1 14%; }
  .cg-ops .btn { flex: 1 1 18%; min-width: 0; }
  .cg-target b { font-size: 1.7rem; }
}