.reaction-pad {
  width: 100%;
  max-width: 520px;
  height: 320px;
  border-radius: 18px;
  display: grid; place-items: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, transform 0.06s;
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #6366f1, #1367e5);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
}
.reaction-pad:active { transform: scale(0.99); }
.reaction-pad.wait { background: linear-gradient(135deg, #dc2626, #b91c1c); box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4); }
.reaction-pad.go { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 10px 40px rgba(34, 197, 94, 0.5); }
.reaction-pad.fail { background: linear-gradient(135deg, #f97316, #ea580c); }
.reaction-pad.result { background: linear-gradient(135deg, #38bdf8, #1367e5); }

.rxn-icon { font-size: 56px; margin-bottom: 8px; }
.rxn-text {
  font-size: 30px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.rxn-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.rxn-history {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  min-height: 26px;
}
.rxn-history > span {
  padding: 4px 10px;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
}
.rxn-history > span.best { color: var(--success); border-color: var(--success); }