/* v20.18.5：反应测试工具 */
.reaction-test-page{
  min-height:calc(100vh - 120px);
  padding:clamp(28px, 5vw, 72px) clamp(16px, 4vw, 56px);
}
.reaction-shell{
  max-width:920px;
  margin:0 auto;
}
.reaction-panel{
  position:relative;
  border:1px solid rgba(148,163,184,.24);
  background:
    radial-gradient(circle at 18% 12%, rgba(56,189,248,.12), transparent 32%),
    radial-gradient(circle at 84% 22%, rgba(34,197,94,.12), transparent 36%),
    rgba(255,255,255,.72);
  border-radius:32px;
  padding:clamp(16px, 4vw, 30px);
  box-shadow:0 24px 70px rgba(15,23,42,.13);
  backdrop-filter:blur(18px);
}
.reaction-stats{
  display:flex;
  align-items:stretch;
  gap:12px;
  margin-bottom:18px;
}
.reaction-stat-card,
.reaction-sound-toggle{
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.72);
  border-radius:18px;
  padding:.75rem .95rem;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.reaction-stat-card{
  min-width:120px;
}
.reaction-stat-card span{
  display:block;
  font-size:.76rem;
  color:rgba(100,116,139,.82);
}
.reaction-stat-card strong{
  display:block;
  margin-top:.1rem;
  font-size:1.45rem;
  line-height:1;
  color:#0f172a;
}
.reaction-stage{
  width:min(100%, 620px);
  min-height:320px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:30px;
  cursor:pointer;
  color:#0f172a;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.82), transparent 28%),
    linear-gradient(135deg, rgba(226,232,240,.92), rgba(203,213,225,.74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 24px 68px rgba(15,23,42,.16);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease;
  user-select:none;
  touch-action:manipulation;
}
.reaction-stage:hover,
.reaction-stage:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(14,165,233,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 30px 78px rgba(14,165,233,.18);
  outline:none;
}
.reaction-stage:active{
  transform:translateY(1px) scale(.995);
}
.reaction-stage-kicker{
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:900;
  color:rgba(14,116,144,.76);
}
.reaction-stage strong{
  font-size:clamp(2rem, 8vw, 4.8rem);
  line-height:.95;
  letter-spacing:-.06em;
}
.reaction-stage em{
  font-style:normal;
  color:rgba(71,85,105,.82);
}
.reaction-stage.is-waiting{
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, rgba(15,23,42,.94), rgba(51,65,85,.9));
  color:white;
}
.reaction-stage.is-waiting .reaction-stage-kicker,
.reaction-stage.is-waiting em{
  color:rgba(226,232,240,.78);
}
.reaction-stage.is-ready{
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.48), transparent 30%),
    linear-gradient(135deg, rgba(34,197,94,.96), rgba(16,185,129,.82));
  color:white;
  border-color:rgba(34,197,94,.42);
  box-shadow:0 28px 84px rgba(34,197,94,.28);
}
.reaction-stage.is-ready .reaction-stage-kicker,
.reaction-stage.is-ready em{
  color:rgba(240,253,244,.9);
}
.reaction-stage.is-too-soon{
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.34), transparent 30%),
    linear-gradient(135deg, rgba(239,68,68,.94), rgba(249,115,22,.82));
  color:white;
  border-color:rgba(248,113,113,.55);
  animation:reactionShake .26s ease both;
}
.reaction-stage.is-too-soon .reaction-stage-kicker,
.reaction-stage.is-too-soon em{
  color:rgba(255,247,237,.9);
}
.reaction-stage.is-result{
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.55), transparent 32%),
    linear-gradient(135deg, rgba(14,165,233,.94), rgba(168,85,247,.74));
  color:white;
  border-color:rgba(125,211,252,.55);
}
.reaction-stage.is-result .reaction-stage-kicker,
.reaction-stage.is-result em{
  color:rgba(240,249,255,.92);
}
@keyframes reactionShake{
  0%, 100%{ transform:translateX(0); }
  30%{ transform:translateX(-8px); }
  65%{ transform:translateX(8px); }
}
.reaction-sound-toggle{
  cursor:pointer;
  color:#0f172a;
  font-weight:850;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease,
    color .16s ease;
}
.reaction-sound-toggle:hover,
.reaction-sound-toggle:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(14,165,233,.48);
  background:rgba(224,242,254,.92);
  color:#075985;
  box-shadow:0 18px 34px rgba(14,165,233,.18);
  outline:none;
}
.reaction-sound-toggle:active{
  transform:translateY(1px) scale(.98);
}
.reaction-sound-toggle{
  margin-left:auto;
}
.reaction-sound-toggle::before{
  content:"♪";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.35em;
  height:1.35em;
  margin-right:.35em;
  border-radius:999px;
  background:rgba(14,165,233,.18);
  color:#0369a1;
  font-weight:900;
}
.reaction-sound-toggle.is-muted::before{
  content:"×";
  background:rgba(148,163,184,.18);
  color:#64748b;
}
.reaction-leaderboard{
  width:min(100%, 620px);
  margin:18px auto 0!important;
}
body.dark .reaction-panel,
html.dark .reaction-panel,
body.dark .reaction-stat-card,
html.dark .reaction-stat-card,
body.dark .reaction-sound-toggle,
html.dark .reaction-sound-toggle{
  background:rgba(15,23,42,.66);
  color:rgba(248,250,252,.92);
  border-color:rgba(148,163,184,.22);
}
body.dark .reaction-stat-card strong,
html.dark .reaction-stat-card strong{
  color:rgba(248,250,252,.94);
}
@media(max-width:720px){
  .reaction-test-page{
    padding:18px 12px 34px;
  }
  .reaction-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .reaction-sound-toggle{
    grid-column:1 / -1;
    margin-left:0;
    min-height:48px;
  }
  .reaction-stage{
    min-height:280px;
    border-radius:24px;
  }
}


/* v20.18.5：反应测试排行榜显示账号/设备最佳 */
.reaction-leaderboard li span small{
  display:inline-flex;
  margin-left:.45em;
  padding:.12em .48em;
  border-radius:999px;
  background:rgba(14,165,233,.12);
  color:rgba(14,116,144,.9);
  font-size:.72em;
  font-weight:850;
  vertical-align:middle;
}
body.dark .reaction-leaderboard li span small,
html.dark .reaction-leaderboard li span small{
  background:rgba(14,165,233,.2);
  color:rgba(186,230,253,.92);
}