.reaction-page { --reaction-go: #1b9d69; --reaction-wait: #6354db; --reaction-danger: #dc4e69; }
body.dark-mode .reaction-header h1, body.dark-mode .reaction-header p { color: #f4f4f8; }
body.dark-mode .reaction-header p { color: #aeb2c3; }
.reaction-container { max-width: 760px; }
.reaction-top-label { color: #6354db; font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.reaction-heading-icon { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 19px; display: inline-flex; align-items: center; justify-content: center; background: #fff0c4; font-size: 2.3rem; }
.reaction-panel { padding: clamp(18px, 4vw, 30px); }
.reaction-arena { width: 100%; min-height: min(390px, 56vw); padding: 34px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 21px; color: #fff; text-align: center; cursor: pointer; touch-action: manipulation; transition: background .18s ease, transform .12s ease; }
.reaction-arena.ready { background: linear-gradient(145deg, #7062e8, #5145bd); }
.reaction-arena.waiting { background: #554ab7; }
.reaction-arena.go { background: var(--reaction-go); }
.reaction-arena.too-soon { background: var(--reaction-danger); }
.reaction-arena.complete { background: #24263a; cursor: default; }
.reaction-arena:active:not(.complete) { transform: scale(.995); }
.reaction-arena-kicker { font-size: .78rem; font-weight: 900; letter-spacing: .16em; opacity: .78; }
.reaction-arena strong { font-size: clamp(2rem, 7vw, 3.5rem); letter-spacing: -.07em; }
.reaction-arena span:last-child { max-width: 420px; font-size: .9rem; opacity: .88; }
.reaction-session-line { display: flex; justify-content: space-between; gap: 10px; margin: 15px 2px 0; color: var(--muted-text, #74798a); font-size: .76rem; font-weight: 800; }
.reaction-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.reaction-result-card { min-width: 0; padding: 15px 8px; border-radius: 14px; background: var(--secondary-bg, #f3f4f6); text-align: center; }
.reaction-result-card span { display: block; color: var(--muted-text, #74798a); font-size: .64rem; font-weight: 900; letter-spacing: .07em; }
.reaction-result-card strong { display: block; margin-top: 5px; color: var(--text-color, #171a2b); font-size: 1.45rem; }
.reaction-attempts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.reaction-actions { margin-top: 22px; }
.reaction-attempt { padding: 10px 4px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 11px; color: var(--muted-text, #74798a); text-align: center; font-size: .62rem; font-weight: 800; }
.reaction-attempt strong { display: block; margin-top: 4px; color: var(--text-color, #171a2b); font-size: .95rem; }
.reaction-record { margin: 17px 0 0; color: var(--muted-text, #74798a); text-align: center; font-size: .78rem; }
.reaction-record strong { color: #6354db; }
body.dark-mode .reaction-heading-icon { background: #423516; }
body.dark-mode .reaction-arena.complete { background: #25283a; }
@media (max-width: 520px) { .reaction-top-label { display: none; } .reaction-arena { min-height: 310px; } .reaction-results { gap: 6px; } .reaction-result-card strong { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .reaction-arena { transition: none; } }