/* Test de temps de réaction */
.rx { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.2vh, 24px); text-align: center; }
.rx-lead { font-size: clamp(22px, 2.6vw, 34px); text-wrap: balance; }
.rx-out { display: flex; align-items: baseline; justify-content: center; gap: .08em; font-family: var(--f-display); font-size: calc(clamp(96px, min(16vw, 24vh), 230px) * var(--cs, 1)); line-height: .95; }
.rx-big { font-variant-numeric: tabular-nums; letter-spacing: .005em; white-space: nowrap; }
.rx-unit { font-size: .3em; }
.rx-detail { margin: 0; max-width: 760px; min-height: 2.6em; font-size: clamp(17px, 1.8vw, 22px); font-weight: 500; line-height: 1.3; opacity: .92; text-wrap: balance; }
.rx[data-state="wait"] .rx-out { visibility: hidden; }
/* Les 5 essais */
.rx-tries { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rx-try { display: flex; align-items: center; justify-content: center; min-width: 70px; height: 50px; padding: 0 10px; border-radius: 12px; background: var(--frame); font-family: var(--f-display); font-size: 22px; font-variant-numeric: tabular-nums; box-sizing: border-box; transition: background-color .2s, color .2s; }
.rx-try.is-now { box-shadow: inset 0 0 0 2.5px var(--white); }
.rx-try.is-best { background: var(--white); color: var(--bg); }
/* La surface à toucher : tout l'écran ; au signal, elle devient blanche d'un coup (aucune transition) */
.rx-pad { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.rx-pad[hidden] { display: none; }
.rx-pad.is-go { background: #FFFFFF; }
:root[data-light] .rx-pad.is-go { background: var(--ink, #111); }
.rx-go { visibility: hidden; font-family: var(--f-display); font-size: clamp(90px, 18vw, 260px); line-height: 1; color: var(--bg); }
.rx-pad.is-go .rx-go { visibility: visible; }
html.rx-lock, html.rx-lock body { overflow: hidden; overscroll-behavior: none; }
@media (max-width: 520px) {
  .rx-tries { gap: 6px; }
  .rx-try { min-width: 0; flex: 1 1 0; padding: 0 4px; font-size: 19px; height: 46px; }
  .rx-tries { width: 100%; }
  .rx-actions { width: 100%; }
  .rx-actions .btn-wide { flex: 1; }
}