/* Page-local styles. Existing game/navigation files stay unchanged. */
.reaction-main{max-width:780px;margin:auto;padding:32px 24px 45px}
.reaction-surface{border:1px solid #39453f;border-radius:24px;background:linear-gradient(145deg,#222a26,#181b20);box-shadow:0 20px 65px #0003;overflow:hidden}
.intro,.reaction-result{padding:40px 28px;text-align:center}
.color-mark{display:flex;justify-content:center;gap:10px;margin:0 auto 28px}
.color-mark span{width:52px;height:52px;border-radius:16px;background:#2477ed;transform:rotate(-8deg);box-shadow:0 5px 0 #1452ae}
.color-mark span+span{background:#e6424d;transform:rotate(8deg);box-shadow:0 5px 0 #a02636}
.intro h2{font-size:clamp(26px,5vw,36px);line-height:1.3;letter-spacing:-1.2px;margin:18px 0}
.intro-copy,.prepare-note,.result-copy{font-size:14px;line-height:1.8;color:#c4cfc9;word-break:keep-all;overflow-wrap:anywhere}
.controls-guide{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px auto;max-width:500px;text-align:left}
.controls-guide>div{padding:17px 14px;border:1px solid #41494a;border-radius:14px;background:#ffffff04;display:grid;gap:8px}
.controls-guide strong{font-size:14px}.controls-guide span{font-size:11px;line-height:1.6;color:#b2bdb6}
.swatch{width:24px;height:10px;border-radius:4px;display:block}.swatch.blue{background:#2477ed}.swatch.red{background:#e6424d}
.prepare-note{font-size:12px;margin:22px 0}.intro .primary{width:min(300px,100%)}
.reaction-play{padding:24px}.progress-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px;color:#c4d2ca}.progress-heading strong{font-variant-numeric:tabular-nums;color:var(--text)}
.reaction-progress{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin-bottom:18px}
.reaction-progress span{height:7px;border-radius:4px;background:#3c4742}.reaction-progress span.done{background:var(--mint)}
.color-arena{width:100%;aspect-ratio:1.4;min-height:240px;background:#fff;border:1px solid #ffffff40;border-radius:16px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:crosshair;outline-offset:3px;transition:none}
.color-arena:focus-visible{outline:3px solid var(--mint)}
.color-arena[data-color="blue"]{background:#2477ed}.color-arena[data-color="red"]{background:#e6424d}
.input-hint{text-align:center;font-size:12px;color:#a5b4ab;margin:17px 0 0}
.grade{font-size:64px;font-weight:900;letter-spacing:-3px;line-height:1.1;color:var(--mint);margin:20px 0 16px}.reaction-result h2{font-size:26px;letter-spacing:-.8px;margin:20px 0 12px}
.result-time{font-size:42px;font-weight:850;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;margin:16px 0}.result-time small{font-size:16px;font-weight:500;margin-left:5px;letter-spacing:0}
.result-copy{margin:14px auto 24px;max-width:420px;min-height:26px}.reaction-actions{display:flex;justify-content:center;gap:10px;margin:26px 0 0;flex-wrap:wrap}.reaction-actions button{min-width:130px}
.reaction-note{font-size:11px;line-height:1.8;text-align:center;color:#909e96;margin:22px 0 0;word-break:keep-all;overflow-wrap:anywhere}
.manual-copy{width:100%;max-width:480px;min-height:120px;margin:12px auto 0;padding:12px;border:1px solid #53675b;border-radius:10px;background:#121816;color:#e2efe7;font:inherit;font-size:13px;resize:vertical}
@media(max-width:600px){.reaction-main{padding:24px 14px 32px}.reaction-play{padding:18px 14px}.intro,.reaction-result{padding:30px 18px}.game-heading{gap:8px}.game-heading h1{font-size:15px}.back-link{font-size:11px;flex-shrink:0}.eyebrow{font-size:10px;letter-spacing:1.4px}.color-arena{aspect-ratio:1;min-height:220px}.controls-guide{gap:8px}.controls-guide>div{padding:13px 10px}.controls-guide strong{font-size:12px}.reaction-actions{gap:8px}.reaction-actions button{min-width:0;flex:1;padding:14px 12px}.reaction-progress{gap:4px}.result-time{font-size:38px}}