/* Cuenta atrás */
.count-stage { gap: var(--space-3); padding-top: var(--space-4); }
.count-dial {
  position: relative;
  width: min(340px, 80vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.count-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.count-ring__track { fill: none; stroke: var(--color-surface-3); stroke-width: 6; }
.count-ring__bar {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}
.count-dial__inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.count-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(6rem, 30vw, 10rem);
  line-height: .9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.count-num.is-pop { animation: count-pop .35s var(--ease); }
.count-num.is-go { color: var(--color-accent); font-size: clamp(4.5rem, 22vw, 7.5rem); letter-spacing: -0.02em; }
.count-num.is-take { font-size: clamp(3rem, 14vw, 4.6rem); letter-spacing: -0.02em; }
.count-num.is-take > span { display: inline-block; width: .6em; text-align: center; }
.count-num.is-take > span.sep { width: .28em; }
@keyframes count-pop { from { transform: scale(1.25); opacity: .3; } to { transform: scale(1); opacity: 1; } }
.count-sub {
  margin-top: 12px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gray);
}
.count-sub.is-rec { color: var(--color-danger); display: inline-flex; align-items: center; gap: 8px; }
.count-sub.is-rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-danger); animation: count-blink 1s steps(2, start) infinite; }
@keyframes count-blink { to { visibility: hidden; } }

.count-stage.is-go { animation: count-flash .6s ease-out; }
@keyframes count-flash { from { background-color: #1f3a32; } to { background-color: var(--color-surface); } }

.count-bars { display: flex; gap: 8px; min-height: 10px; }
.count-bars span { width: 28px; height: 6px; border-radius: 999px; background: var(--color-surface-3); transition: background .1s ease; }
.count-bars span.is-done { background: var(--color-accent); }

.count-status { margin: 0; min-height: 1.4em; font-size: .9rem; font-weight: 700; color: var(--color-ink-soft); text-align: center; }
.count-actions { display: flex; justify-content: center; }

/* v2: ajustes rápidos dentro del escenario para no tener que bajar */
.count-stage { gap: var(--space-2); padding-top: var(--space-3); }
.count-dial { width: min(300px, 70vw); }
.count-quick { width: 100%; max-width: 420px; display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--color-hairline); }
.count-mode button { min-height: 36px; }
.count-opts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.count-chips { flex-wrap: nowrap; }
.count-chips .chip { min-width: 44px; padding: 0 12px; }
.count-step { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 6px; }
.count-step .icon-btn { width: 38px; height: 38px; }
.count-step .stepper__value { height: 38px; font-size: 1rem; }
.count-opts--bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.count-field { display: grid; gap: 4px; min-width: 0; }
.count-field__label { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gray); }
.count-sig { grid-column: 1 / -1; }
.count-sig button { min-height: 34px; }
.count-stage.is-running .count-quick { opacity: .35; pointer-events: none; transition: opacity .2s ease; }
.count-num.is-pop { animation: count-pop .35s var(--ease); }
.count-stage.is-go .count-ring__bar { filter: drop-shadow(0 0 8px var(--color-accent-glow)); }

.controls .switch + .switch, .controls .switch + .panel__hint { margin-top: 4px; }
.count-tips ul { margin: 0; padding-left: 1.1em; font-size: .88rem; color: var(--color-ink-soft); }
.count-tips li + li { margin-top: 4px; }
.count-tips strong { color: var(--color-ink); }

@media (max-width: 600px) {
  .count-stage { padding-top: var(--space-2); gap: 12px; }
  .count-dial { width: min(232px, 60vw); }
  .count-num { font-size: 6.4rem; }
  .count-num.is-go { font-size: 4.6rem; }
  .count-num.is-take { font-size: 3rem; }
  .count-sub { margin-top: 6px; }
  .count-status { font-size: .85rem; }
}