:root[data-social-game="reaction"] {--ui-game-light:#087b70;--ui-game-dark:#78dfcb;--game-motif:url('/assets/atmospheres/reaction.svg');}
.reaction-page {width:min(100%,960px);margin:0 auto;display:grid;gap:24px;min-width:0;}
.reaction-page .panel {min-width:0;}
.reaction-setup {display:flex;flex-wrap:wrap;align-items:end;justify-content:center;gap:20px;}
.reaction-setup .field {min-width:180px;}
.reaction-mode-links {display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.reaction-play-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.reaction-play-heading h1 {margin:4px 0;font-size:clamp(24px,4vw,40px);}
.reaction-progress {font-weight:700;text-align:center;font-variant-numeric:tabular-nums;min-height:24px;}
.reaction-pad {box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;height:clamp(250px,43svh,430px);border:2px solid #358d82;border-radius:28px;background:#123d3a;color:#f0fffa;cursor:pointer;font:inherit;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:none;box-shadow:0 8px 0 #0c27272b;}
.reaction-pad:focus-visible {outline:4px solid var(--ui-accent,#087b70);outline-offset:5px;}
.reaction-pad:disabled {opacity:1;cursor:default;}
.reaction-pad strong {font-size:clamp(28px,5vw,54px);font-weight:800;line-height:1.15;}
.reaction-glyph {font-size:48px;line-height:1;}
.reaction-pad-help {font-size:16px;}
.reaction-pad[data-phase="waiting"] {background:#822e43;border-color:#a94b63;color:#fff5f6;}
.reaction-pad[data-phase="go"] {background:#83e2b5;color:#073d29;border-color:#48b385;}
.reaction-feedback {min-height:1.6em;margin:18px 0 0;text-align:center;font-weight:700;color:var(--ui-ink,#243044);}
.reaction-fairness {text-align:center;font-size:14px;line-height:1.6;color:var(--ui-muted,#536375);margin:0;}
.reaction-opponents {display:flex;justify-content:center;flex-wrap:wrap;gap:12px;}
.reaction-opponents>span {display:grid;grid-template-columns:8px 1fr;align-items:center;gap:6px 8px;background:var(--ui-surface,#fff);border:1px solid var(--ui-line,#d3dfe7);border-radius:16px;padding:12px 18px;}
.reaction-opponents i {height:8px;width:8px;border-radius:50%;background:#8c97a7;}
.reaction-opponents i.is-online {background:#208458;}
.reaction-opponents small {grid-column:2;}
.reaction-result-grid {display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.reaction-result {padding:28px;flex:1 1 300px;max-width:560px;text-align:center;}
.reaction-result h2 {margin:0 0 18px;}
.reaction-average {display:block;font-size:clamp(40px,7vw,76px);line-height:1.2;color:var(--ui-accent,#087b70);font-variant-numeric:tabular-nums;}
.reaction-average small {display:block;font-size:16px;font-weight:600;}
.reaction-trials {list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px;text-align:left;}
.reaction-trials li {display:grid;grid-template-columns:18px 1fr 72px;gap:6px 8px;align-items:center;font-variant-numeric:tabular-nums;}
.reaction-trials small {grid-column:2 / -1;color:var(--ui-muted,#536375);}
.reaction-bar {width:var(--trial-width);min-width:6px;height:12px;background:#309d88;border-radius:20px;}
.reaction-bar.is-penalty {background:#c87c47;}
.relay-sprint {width:min(100%,840px);margin:20px auto;}
.math-sprint-card {padding:clamp(20px,4vw,48px);text-align:center;border:1px solid var(--ui-line,#d3dfe7);border-radius:28px;background:var(--ui-surface,#fff);}
.math-sprint-problem {font-size:clamp(28px,7vw,56px);font-weight:800;margin:28px 0;}
.math-sprint-card input {box-sizing:border-box;width:min(100%,260px);font:inherit;font-size:32px;text-align:center;padding:14px;border:2px solid var(--ui-line,#d3dfe7);border-radius:16px;background:var(--ui-surface,#fff);color:var(--ui-ink,#243044);}
.math-sprint-card button {margin:16px auto;min-height:48px;}
@media(max-width:600px){.reaction-page {gap:16px;}.reaction-playing {padding-bottom:20px;}.reaction-play-heading {flex-wrap:wrap;}.reaction-result {padding:20px;}.reaction-pad {border-radius:22px;height:clamp(230px,40svh,360px);}.reaction-mode-links>* {flex:1 1 150px;text-align:center;}.reaction-opponents {gap:8px;}.reaction-opponents>span {padding:10px 12px;}.reaction-setup>* {flex:1;}}
@media(forced-colors:active){.reaction-pad{border:3px solid ButtonText;}.reaction-bar{background:Highlight;}}
body[data-social-game="reaction"] .reaction-pad, #relay-content .reaction-pad {border-radius:28px;}
.reaction-setup + .reaction-fairness {margin-top:20px;}
@media(max-width:600px){.reaction-setup{display:grid;grid-template-columns:1fr;gap:16px;}.reaction-setup .field,.reaction-setup>.button{width:100%;}.reaction-play-heading .eyebrow{font-size:13px;}.reaction-play-heading .button{font-size:13px;min-height:40px;padding:8px 12px;}.reaction-play-heading h1{font-size:26px;}.reaction-page .reaction-pad{height:clamp(220px,38svh,340px);}}
#relay-content .relay-sprint [hidden] {display:none !important;}
:root body.is-relay-sprint #topbar,
:root body.is-relay-sprint #view-relay > .multiplayer-modes,
body.is-relay-sprint #logic-privacy-footer {display:none;}
:root body.is-relay-sprint #view-relay {width:min(100%,920px);margin:0 auto;min-height:100svh;padding:max(12px,env(safe-area-inset-top)) 14px 70px;display:grid;align-content:center;}
body.is-relay-sprint #relay-content {display:grid;gap:16px;}
body.is-relay-sprint .relay-sprint {margin:0 auto;gap:10px;}
body.is-relay-sprint .reaction-play-heading p {margin:0;font-size:13px;}
body.is-relay-sprint .reaction-play-heading h1 {font-size:26px;}
body.is-relay-sprint .reaction-pad {height:clamp(210px,35svh,340px);}
body.is-relay-sprint .reaction-feedback {margin:4px 0;}
body.is-relay-sprint .math-sprint-card {padding:18px;}
body.is-relay-sprint .math-sprint-problem {margin:16px 0;}
body.is-relay-sprint .relay-racebar .relay-note {margin:5px 0 0;font-size:11px;line-height:1.4;}
body.is-relay-sprint .skip-link:not(:focus) {position:fixed;top:-100px;}
/* Reaction cues are opaque and instant. Theme decorations never tint the pad. */
.reaction-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;min-width:0;}
.reaction-option {display:grid;align-content:start;gap:8px;min-width:0;color:var(--ui-ink);font-weight:750;}
.reaction-option select {width:100%;min-width:0;min-height:48px;background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-muted);}
.reaction-option small {font-size:13px;line-height:1.5;font-weight:500;color:var(--ui-muted);}
.reaction-setup {display:grid;grid-template-columns:1fr;gap:24px;}
.reaction-setup>.button {justify-self:center;min-width:220px;}
.reaction-page .panel {background:var(--ui-surface);}
:root body[data-social-game="reaction"].is-social-game-active :is(.site-header,#logic-privacy-footer) {display:none;}
:root body[data-social-game="reaction"].is-social-game-active #app.game-page.app-shell {width:100%;max-width:none;padding:0;margin:0;min-height:0;}
:root body[data-social-game="reaction"] .reaction-playing {box-sizing:border-box;width:100%;max-width:1680px;height:100svh;min-height:540px;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(220px,1fr) 22px auto;gap:12px;}
.reaction-playing [data-reaction-mount] {display:grid;grid-template-rows:minmax(0,1fr) 62px;gap:10px;min-height:0;}
.reaction-play-tools {display:flex;gap:8px;}
.reaction-play-heading .reaction-progress {text-align:left;margin:0;font-size:clamp(22px,3vw,32px);}
.reaction-response {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:62px;}
.reaction-response .reaction-feedback {margin:0;text-align:left;font-size:14px;line-height:1.4;}
.reaction-next {font:inherit;font-weight:800;padding:12px 24px;min-height:48px;border:2px solid var(--ui-accent,#00685f);border-radius:14px;background:var(--ui-accent,#00685f);color:var(--ui-on-accent,#fff);cursor:pointer;}
.reaction-next.is-unavailable {visibility:hidden;pointer-events:none;}
.reaction-next:disabled {cursor:default;background:var(--ui-soft,#e3eceb);color:var(--ui-muted,#405953);border-color:var(--ui-line);}
.reaction-round-status {height:22px;line-height:22px;margin:0;text-align:center;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-ink);}
.reaction-playing .reaction-opponents {flex-wrap:nowrap;overflow-x:auto;justify-content:safe center;min-height:0;}
.reaction-playing .reaction-opponents:empty {display:none;}
.reaction-playing .reaction-opponents>span {flex-shrink:0;padding:8px 14px;}
:root body :is(.reaction-page,#relay-content) .reaction-pad {background:#152b3d;color:#fff;border:2px solid #607e91;box-shadow:none;transform:none;filter:none;transition:none;animation:none;opacity:1;}
:root body .reaction-playing .reaction-pad {height:100%;min-height:0;border-radius:24px;}
:root body :is(.reaction-page,#relay-content) .reaction-pad[data-phase="waiting"] {background:#7a1933;border-color:#7a1933;color:#fff;}
:root body :is(.reaction-page,#relay-content) .reaction-pad[data-phase="go"] {background:#37e38b;border-color:#37e38b;color:#052516;}
:root body :is(.reaction-page,#relay-content) .reaction-pad[data-cue="blue-gold"][data-phase="waiting"] {background:#153b77;border-color:#153b77;color:#fff;}
:root body :is(.reaction-page,#relay-content) .reaction-pad[data-cue="blue-gold"][data-phase="go"] {background:#ffe16a;border-color:#ffe16a;color:#242000;}
:root body :is(.reaction-page,#relay-content) .reaction-pad[data-phase="result"] {background:#eef4fb;border-color:#b2c4d8;color:#172b42;}
:root[data-theme="dark"] body :is(.reaction-page,#relay-content) .reaction-pad[data-phase="result"] {background:#172b42;border-color:#6988a6;color:#f5f9ff;}
:root body :is(.reaction-page,#relay-content) .reaction-pad strong {color:inherit;font-size:clamp(48px,9vw,120px);}
.reaction-pad-help {font-weight:650;font-size:clamp(16px,2vw,22px);}
.reaction-pad .reaction-glyph {font-size:clamp(34px,5vw,64px);font-family:Arial,sans-serif;}
.reaction-playing:fullscreen {max-width:none;background:var(--ui-bg);}
body.is-relay-sprint .reaction-pad {height:clamp(300px,56svh,720px);}
.relay-advanced .reaction-options {padding:4px;}
@media(max-width:600px){.reaction-options{grid-template-columns:1fr;gap:18px;}.reaction-play-heading{flex-wrap:nowrap;}.reaction-play-heading .eyebrow{font-size:11px;}.reaction-play-heading .reaction-progress{font-size:21px;}.reaction-play-tools .button{font-size:12px;padding:8px;}.reaction-next{padding:10px 16px;}.reaction-response .reaction-feedback{font-size:12px;}.reaction-round-status{font-size:12px;}:root body[data-social-game="reaction"] .reaction-playing{padding-inline:10px;gap:8px;}.reaction-playing [data-reaction-mount]{grid-template-rows:minmax(0,1fr) 60px;}.reaction-playing .reaction-opponents>span{padding:6px 10px;font-size:12px;}}
@media(max-height:600px) and (orientation:landscape){:root body[data-social-game="reaction"] .reaction-playing{min-height:320px;grid-template-rows:auto minmax(100px,1fr) 22px;}.reaction-playing .reaction-opponents{display:none;}.reaction-pad .reaction-glyph{display:none;}}
@media(forced-colors:active){:root body :is(.reaction-page,#relay-content) .reaction-pad{border:3px solid ButtonText;}.reaction-next{border:2px solid ButtonText;}}

/* Keep the signal header and review controls compact at phone widths. */
.reaction-play-heading .reaction-progress {white-space:nowrap;}
.reaction-play-tools {align-items:center;flex-shrink:0;}
.reaction-play-tools .button {white-space:nowrap;display:inline-flex;align-items:center;gap:8px;}
.reaction-play-tools .tabletop-chat-slot:empty {display:none;}
:root body :is(.reaction-page,#relay-content) .reaction-next {border-radius:14px;}
@media(max-width:600px){.reaction-fullscreen-label{display:none;}.reaction-play-tools{gap:6px;}.reaction-play-tools [data-reaction-fullscreen]{width:40px;min-width:40px;justify-content:center;font-size:22px;}.reaction-play-tools .button{white-space:nowrap;}.reaction-play-heading{gap:8px;}.reaction-play-heading .reaction-progress{font-size:20px;}}

.reaction-playing > * {min-width:0;}