/* 反射神経テスト 固有の見た目（共通は ../common/base.css） */
.board-wrap { max-width: 640px; }

/* 上のバー */
.hud { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; font-variant-numeric: tabular-nums; }
.hud b { font-size: 1.15rem; }
.hud .sub { color: var(--ink-sub); font-weight: 400; }
.hud .sub b { color: var(--ink); font-size: 1rem; }

/* 大きな枠（反応速度・選択反応の合図・連打）。色の切り替えは一瞬で（動きをつけない＝測る時刻がずれない） */
.pad {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: clamp(240px, calc(100svh - 300px), 400px); padding: 16px 16px 24px; overflow: hidden;
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--board); color: #1F2328;
  text-align: center; cursor: pointer; transition: none;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.stage .pad-mark { width: 96px; height: 96px; flex: none; }
.pad-mark:empty { display: none; }
.pad-big { margin: 0; font-size: clamp(28px, 7.5vw, 44px); font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pad-small { margin: 0; font-size: 16px; min-height: 1.5em; max-width: 30em; }
.pad-small:empty { display: none; }
.pad[data-state="idle"], .pad[data-state="ready"] { border-style: dashed; }
.pad[data-state="idle"] .pad-mark, .pad[data-state="ready"] .pad-mark { color: #2F5D8A; }
.pad[data-state="wait"], .pad[data-state="hold"] { background: #2F5D8A; border-color: #2F5D8A; color: #FFFFFF; }
.pad[data-state="wait"] .pad-mark { color: rgba(255, 255, 255, .75); }
.pad[data-state="hold"] { background: #5B616B; border-color: #5B616B; }
.pad[data-state="go"] { background: #2E7D4F; border-color: #2E7D4F; color: #FFFFFF; }
.pad[data-state="go"] .pad-mark { color: #FFFFFF; width: 150px; height: 150px; }
.pad[data-state="go"] .pad-big { font-size: clamp(34px, 9vw, 56px); }
.pad[data-state="fake"] { background: #E8B53A; border-color: #9A6415; color: #1F2328; }
.pad[data-state="fake"] .pad-mark { color: #1F2328; }
.pad[data-state="foul"] { background: #B23A3A; border-color: #B23A3A; color: #FFFFFF; }
.pad[data-state="foul"] .pad-mark { color: #FFFFFF; width: 72px; height: 72px; }
.pad[data-state="hit"] .pad-big { font-size: clamp(36px, 10vw, 60px); color: #1F2328; }
.pad[data-state="hit"] .pad-mark { color: #2E7D4F; width: 56px; height: 56px; }
.pad[data-state="miss"] .pad-big { color: #B23A3A; }
.pad[data-state="miss"] .pad-mark { color: #B23A3A; width: 56px; height: 56px; }
.pad[data-state="tapping"], .pad[data-state="done"] { background: #E3ECF5; border-color: #2F5D8A; }
.pad[data-state="tapping"] .pad-big, .pad[data-state="done"] .pad-big { font-size: clamp(56px, 16vw, 96px); line-height: 1.1; }
.pad[data-state="done"] { cursor: default; }

/* 連打ののこり時間の帯（CSS の動きで。1コマごとの計算をしない） */
.time-bar { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 10px; border-radius: 5px; background: rgba(47, 93, 138, .18); overflow: hidden; }
.time-bar i { display: block; height: 100%; width: 100%; background: #2F5D8A; transform-origin: left center; }
.time-bar.run i { animation: shrink var(--dur, 10000ms) linear forwards; }
.pad[data-state="done"] .time-bar i { transform: scaleX(0); animation: none; }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* 選択反応: 合図の枠は少し低く、下に答えのボタン */
.board-wrap[data-test="choice"] .pad { height: clamp(180px, calc(100svh - 470px), 280px); }
.board-wrap[data-test="choice"] .pad[data-state="go"] .pad-mark { width: 140px; height: 140px; }
.board-wrap[data-test="choice"] .pad[data-state="go"] { background: var(--board); border-color: var(--line-strong); }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; touch-action: none; }
.ans {
  position: relative; appearance: none; font: inherit; display: flex; align-items: center; justify-content: center;
  height: clamp(76px, 12svh, 104px); border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--board); cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.ans svg { width: 58px; height: 58px; }
.ans kbd { position: absolute; right: 8px; bottom: 6px; font-size: 14px; }
/* 盤の上のキーの印はダーク表示でも明るい地（盤の地が明るいまま）に */
.ans kbd, .cell kbd { color: #1F2328; background: #F7F6F2; border-color: #5B616B; }
.ans:active { transform: translateY(1px); }
.ans.right { border-color: #2E7D4F; box-shadow: inset 0 0 0 3px #2E7D4F; }
.ans.wrong { border-color: #B23A3A; box-shadow: inset 0 0 0 3px #B23A3A; }

/* 光った所: n×n のマス */
.grid {
  --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px;
  width: min(100%, calc(100svh - 280px), 440px); min-width: min(100%, 240px); aspect-ratio: 1; margin: 0 auto;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.cell { position: relative; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--board); cursor: pointer; }
.cell kbd { position: absolute; right: 6px; bottom: 6px; font-size: 14px; }
.cell.lit { background: #F2C14E; border-color: #1F2328; }
.cell.lit::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #1F2328; }
.cell.done::after { content: attr(data-rt); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(14px, 4vw, 20px); color: #2E7D4F; }
.cell.miss { animation: miss .35s ease-out; }
@keyframes miss { from { border-color: #B23A3A; box-shadow: inset 0 0 0 4px #B23A3A; } to { box-shadow: inset 0 0 0 0 #B23A3A; } }
.grid[data-state="hold"]::after, .grid[data-state="foul"]::after {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: var(--radius);
  font-weight: 700; color: #FFFFFF; white-space: nowrap; pointer-events: none;
}
.grid[data-state="hold"]::after { content: "止めました。押すとやり直し"; background: #5B616B; }
.grid[data-state="foul"]::after { content: "フライング（やり直し）"; background: #B23A3A; }
:root:lang(en) .grid[data-state="hold"]::after { content: "Paused. Press to retry"; }
:root:lang(en) .grid[data-state="foul"]::after { content: "Too early – try again"; }

.board-wrap .callout { top: 30%; }

/* 結果（盤の場所に出す） */
.board-wrap.show-result > .pad, .board-wrap.show-result > .grid, .board-wrap.show-result > .answers { display: none !important; }
.result-panel { text-align: center; padding: 8px 4px 4px; }
.result-panel h2 { margin: 0 0 4px; font-size: 1.25rem; }
.result-panel .big { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.result-panel .big b { font-size: 2.6rem; }
.result-panel .big small { font-size: 1.1rem; margin-left: 2px; }
.result-panel .big .per { font-size: 1.1rem; white-space: nowrap; }
.result-panel .big .per b { font-size: 1.5rem; }
.result-panel .diff { margin: 0 0 4px; color: var(--ink-sub); min-height: 1.5em; }
.result-panel .new { color: var(--ok); font-weight: 700; }
.chart { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 4px; }
.chart .axis { stroke: var(--line); stroke-width: 2; }
.chart .bar { fill: var(--accent); }
.chart .bar.best { fill: var(--ok); }
.chart text { font-family: var(--font); text-anchor: middle; }
.chart .v { fill: var(--ink); font-size: 14px; font-weight: 700; }
.chart .l { fill: var(--ink-sub); font-size: 14px; }
.chart .x { fill: var(--ng); font-size: 22px; font-weight: 700; }
.result-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; max-width: 480px; margin: 0 auto 8px; text-align: left; }
.result-panel dl div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding: 2px 0; }
.result-panel dt { color: var(--ink-sub); }
.result-panel dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.result-panel .note { color: var(--ink-sub); font-size: 14px; max-width: 34em; margin: 4px auto 0; text-align: left; }
.result-panel .controls { justify-content: center; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .hud { gap: 0 10px; font-size: .95rem; }
  .turnbar { margin-bottom: 6px; }
  .controls { margin-top: 8px; }
  .result-panel dl { grid-template-columns: 1fr; }
  .stage .pad-mark { width: 80px; height: 80px; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */