.stage {
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(16px, 2.4vh, 32px);
}

.stage-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.round-of {
  font-size: clamp(32px, 3.4vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.clock {
  font-size: clamp(80px, 10vw, 200px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

body.is-late .clock {
  color: var(--bad);
  animation: pulse 1s ease-in-out infinite;
}

.meter {
  height: 18px;
  border-radius: 999px;
  background: var(--ground-3);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transition: transform 100ms linear;
}

body.is-late .meter span {
  background: var(--bad);
}

.countdown {
  display: none;
}

body.is-counting .countdown {
  display: grid;
  place-items: center;
  font-size: clamp(200px, 30vw, 520px);
  font-weight: 800;
  line-height: 0.8;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  animation: pop 1s var(--ease-out) infinite;
}

body.is-counting .stage-body {
  display: none;
}

.stage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 80px);
  align-items: start;
  min-height: 0;
}

.stage-main {
  display: grid;
  gap: 18px;
  align-content: start;
}

.stage-ask {
  font-size: clamp(56px, 7vw, 140px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  animation: rise 600ms var(--ease-out) both;
}

.stage-hint {
  margin-bottom: 12px;
  color: var(--ok);
  font-size: clamp(22px, 2vw, 36px);
  font-weight: 600;
  animation: rise 600ms 90ms var(--ease-out) both;
}

.stage-art {
  width: clamp(180px, 22vw, 400px);
  transform-origin: bottom center;
  animation: bop 0.9s ease-in-out infinite;
}

.board-live {
  display: flex;
  max-height: 46vh;
  overflow: hidden;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 14px;
  align-items: baseline;
  padding: 14px 22px;
  border-radius: 22px;
  background: var(--ground-2);
  transition: background-color 300ms var(--ease-out), color 300ms;
}

.chip-name {
  font-size: clamp(20px, 1.7vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.chip-points {
  color: var(--ink-2);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.chip-mark {
  grid-column: 1 / -1;
  font-size: 16px;
  font-weight: 600;
}

.chip-half {
  background: var(--half);
  animation: pop 450ms var(--ease-out);
}

.chip-full {
  background: var(--ok);
  color: var(--ok-ink);
  animation: pop 450ms var(--ease-out);
}

.chip-full .chip-points {
  color: var(--ok-ink);
}

.stage-actions {
  display: flex;
  justify-content: flex-end;
}