/* reaction 固有スタイル */
.tool-main { max-width: 760px; }
[hidden] { display: none !important; }
.pt-tabs { overflow: visible; }

.rx-pad {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 280px; padding: 1.5rem 1rem; margin: 0.75rem 0 0.75rem;
  border: 1px solid var(--border); border-radius: var(--pt-r); color: #fff; background: #3b6fd8;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.rx-pad:focus-visible { outline: 3px solid var(--pt-accent); outline-offset: 2px; }
.rx-main { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 700; line-height: 1.3; }
.rx-sub { margin-top: 0.4rem; font-size: 0.95rem; opacity: 0.9; min-height: 1.4em; }
.rx-pad[data-state="wait"] { background: #c0392b; }
.rx-pad[data-state="go"] { background: #1e9e50; }
.rx-pad[data-state="early"] { background: #c77a0a; }
.rx-pad[data-state="result"], .rx-pad[data-state="done"] { background: #3b6fd8; }
.rx-pad[data-state="run"] { background: #1e9e50; }
.rx-pad[data-state="run"] .rx-main { font-size: clamp(3rem, 14vw, 5.5rem); }

.rx-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.rx-opts label { margin: 0; font-weight: 500; }
.rx-opts select { width: auto; }

.rx-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.25rem 0 0.5rem; }
.rx-chip { border: 1px solid var(--border); border-radius: var(--pt-r); padding: 0.2rem 0.55rem; font-size: 0.82rem; color: var(--text-sub); background: var(--surface); }
.rx-chip.is-done { color: var(--text); border-color: var(--pt-accent); background: var(--pt-accent-soft); font-weight: 600; }

.rx-rank { font-weight: 700; margin: 0.4rem 0; }
.rx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0.5rem 0; }
@media (max-width: 520px) { .rx-stats { grid-template-columns: repeat(2, 1fr); } }
.rx-stat { border: 1px solid var(--border); border-radius: var(--pt-r); padding: 0.5rem 0.7rem; background: var(--surface); }
.rx-stat span { display: block; font-size: 0.78rem; color: var(--text-sub); }
.rx-stat b { font-size: 1.25rem; }

.rx-rec { display: grid; grid-template-columns: 1fr; gap: 0.35rem; font-size: 0.9rem; margin-top: 0.5rem; }
.rx-rec div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--border); padding: 0.3rem 0; }
.rx-rec b { text-align: right; }
.rx-reset { margin-top: 0.75rem; width: auto; }

.rx-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; margin: 0.25rem 0 0; }
.rx-bar i { display: block; height: 100%; width: 0; background: var(--pt-accent); }
.rx-live { display: flex; justify-content: space-between; font-weight: 600; margin-top: 0.5rem; }
.rx-live span { font-variant-numeric: tabular-nums; }

.rx-bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; margin-top: 0.6rem; }
.rx-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.rx-col i { display: block; background: var(--pt-accent); border-radius: 2px 2px 0 0; min-height: 1px; }
.rx-col span { display: block; text-align: center; font-size: 0.7rem; color: var(--text-sub); height: 1.1em; }