/* Reflex — reaction test styles. */

.game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.head-btns { display: flex; gap: 6px; }

.rx-stage {
  min-height: 320px;
  display: grid; place-content: center; text-align: center; gap: 8px;
  border-radius: var(--radius); border: 1px solid var(--border);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
  margin: var(--space-3) 0;
}
.rx-stage #stage-text { font-size: clamp(1.6rem, 7vw, 2.6rem); font-weight: 800; }
.rx-stage #stage-sub { color: var(--text-dim); font-weight: 600; }

.rx-stage.idle { background: var(--bg-elev); }
.rx-stage.wait { background: color-mix(in srgb, #ef4444 22%, var(--bg-elev)); border-color: #ef4444; }
.rx-stage.go { background: color-mix(in srgb, #22c55e 30%, var(--bg-elev)); border-color: #22c55e; }
.rx-stage.false { background: color-mix(in srgb, #f97316 22%, var(--bg-elev)); border-color: #f97316; }
.rx-stage.hit { background: color-mix(in srgb, var(--accent) 18%, var(--bg-elev)); border-color: var(--accent); }
.rx-stage.done { background: color-mix(in srgb, var(--accent) 22%, var(--bg-elev)); border-color: var(--accent); }

#round-label { text-align: center; min-height: 1.4em; font-variant-numeric: tabular-nums; }

#round-times { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.rx-time {
  font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 0.85rem;
}
.rx-time.best { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }

#results { text-align: center; }
#results .btn { margin-top: 8px; }