/* ============================================================
   0.3 — NEURAL LATENCY LAB
   Tactical Telemetry / CRT terminal design system
   substrate #0A0A0A / phosphor #EAEAEA / hazard red #FF2A2A
   no border-radius. no gradients. no soft shadows.
   ============================================================ */

:root {
  --bg: #0a0a0a;
  --bg-2: #101010;
  --bg-3: #141414;
  --fg: #eaeaea;
  --fg-dim: rgba(234, 234, 234, 0.62);
  --fg-faint: rgba(234, 234, 234, 0.52); /* WCAG AA: 0.32 failed contrast (~2.5:1) on the near-black bg */
  --line: #272727;
  --line-strong: #3a3a3a;
  --red: #ff2a2a;
  --green: #4af626;
  --hazard: #ff2a2a;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--jp);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  min-height: 100dvh; /* iOS Safari: exclude the dynamic toolbar so timed runs aren't clipped */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mono { font-family: var(--mono); letter-spacing: 0.07em; text-transform: uppercase; }
.jp { font-family: var(--jp); letter-spacing: 0; text-transform: none; }
.dim { color: var(--fg-dim); }
em { font-style: normal; color: var(--red); }
strong { font-weight: 700; color: var(--fg); }

/* ---------- analog degradation layers ---------- */
.fx-scan {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 3px,
    rgba(0, 0, 0, 0.14) 3px, rgba(0, 0, 0, 0.14) 4px);
}
.fx-noise {
  position: fixed; inset: 0; z-index: 9001; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- HUD header ---------- */
.hud {
  position: sticky; top: 0; z-index: 500;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hud > div {
  background: var(--bg);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 14px;
  white-space: nowrap;
}
.hud-brand { font-weight: 700; font-size: 16px; }
.hud-zero { color: var(--fg); }
.hud-reg { color: var(--red); font-size: 9px; vertical-align: super; }
.hud-title { color: var(--fg-dim); overflow: hidden; }
.hud-dim { color: var(--fg-faint); }
.hud-clock { color: var(--green); }
.hud-rev { color: var(--fg-faint); }
@media (max-width: 640px) {
  .hud-title { display: none !important; }
  .hud { grid-template-columns: auto 1fr; }
  .hud-right { justify-content: flex-end; }
}

/* ---------- layout / views ---------- */
main { max-width: 1080px; margin: 0 auto; padding: 0 20px 80px; }
.view { display: none; }
.view.active { display: block; animation: viewIn 0.28s steps(6) both; }
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- panels ---------- */
.panel {
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 20px;
  position: relative;
}
.panel-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 12px;
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  font-weight: 700;
  min-height: 52px;
  padding: 12px 26px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn:active { background: var(--red); color: var(--bg); border-color: var(--red); }
.btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-primary:hover { background: var(--red); color: var(--bg); border-color: var(--red); }
.btn-block { width: 100%; }
.btn-meta { font-size: 9px; font-weight: 400; color: inherit; opacity: 0.6; }

/* ---------- HOME / hero ---------- */
.hero { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 10px; color: var(--fg-faint); margin-bottom: 8px;
}
.hero-meta span:first-child { color: var(--green); }
.hero-num {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(7rem, 24vw, 17rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--fg);
  margin: 8px 0 24px;
}
.hero-unit {
  font-family: var(--mono);
  font-size: clamp(1rem, 3vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--red);
  margin-left: 12px;
  vertical-align: baseline;
}
.hero-lead { font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 700; line-height: 1.6; margin-bottom: 16px; }
.hero-sub { max-width: 620px; color: var(--fg-dim); margin-bottom: 32px; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.last-record { max-width: 620px; }
.last-record-body { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.last-record-num { font-size: 42px; font-weight: 700; line-height: 1; }
.last-record-num::after { content: "MS"; font-size: 12px; color: var(--red); margin-left: 6px; }
.last-record-meta { font-size: 11px; color: var(--fg-dim); }
.last-record-actions { display: flex; gap: 10px; margin-left: auto; }
.last-record-actions .btn { min-height: 44px; padding: 8px 16px; font-size: 11px; }

/* ---------- reflex grid ---------- */
.reflex-head { margin: 40px 0 0; }
.reflex-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 12px 0 40px;
}
@media (max-width: 900px) { .reflex-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .reflex-grid { grid-template-columns: 1fr; } }
.reflex-cell, .train-cell {
  background: var(--bg-2);
  padding: 22px 20px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.reflex-id {
  font-size: 10px; color: var(--fg-faint);
  display: flex; justify-content: space-between;
}
.reflex-tag { color: var(--red); }
.reflex-name {
  font-family: var(--jp);
  font-size: 20px; font-weight: 700; line-height: 1.3;
}
.reflex-desc { font-size: 12.5px; color: var(--fg-dim); flex: 1; }
.reflex-target {
  font-size: 10px; color: var(--green);
  border-top: 1px solid var(--line); padding-top: 10px;
}

.method { margin-bottom: 40px; }
.method-text { font-size: 13px; color: var(--fg-dim); }
.method-text .mono { font-size: 10px; text-transform: none; letter-spacing: 0.02em; }

/* ---------- RUN view ---------- */
.run-hud {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 24px 0;
  font-size: 11px;
}
.run-hud > * { background: var(--bg-2); padding: 12px 14px; white-space: nowrap; }
.run-module { color: var(--red); font-weight: 700; }
.run-progress { color: var(--fg-dim); }
.run-lastrt { color: var(--green); min-width: 110px; text-align: right; }
.run-abort {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--bg-2); color: var(--fg-faint);
  border: 0; cursor: pointer; font-size: 11px;
}
.run-abort:hover { color: var(--red); }

.stage { min-height: 62vh; min-height: 62dvh; display: flex; flex-direction: column; justify-content: center; }

/* module intro card */
.mod-intro { text-align: center; padding: 30px 16px; }
.mod-intro-id { font-family: var(--mono); font-size: 11px; color: var(--red); letter-spacing: 0.14em; margin-bottom: 14px; }
.mod-intro-name { font-family: var(--jp); font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 700; margin-bottom: 14px; }
.mod-intro-desc { max-width: 540px; margin: 0 auto 28px; color: var(--fg-dim); font-size: 14px; }
.mod-intro-keys { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); margin-bottom: 24px; letter-spacing: 0.1em; }

/* trial: prompt + options */
.trial { text-align: center; padding: 10px 0; }
.trial-prompt {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 36px;
  min-height: 1.4em;
}
.trial-prompt.en { font-family: var(--sans); font-weight: 800; letter-spacing: -0.01em; }
/* weak-spot sprint: the true/false claim shown under a syntax sentence */
.ws-claim {
  display: block;
  margin-top: 16px;
  font-size: clamp(0.95rem, 3.2vw, 1.15rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--fg-dim);
}
.ws-claim::before { content: "Q. "; color: var(--red); font-family: var(--mono); }
.trial-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}
.trial-options.cols-1 { grid-template-columns: 1fr; max-width: 420px; }
.opt-btn {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  min-height: 60px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--fg);
  cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.opt-btn .key {
  font-size: 10px; color: var(--fg-faint);
  border: 1px solid var(--line); padding: 2px 6px; flex: none;
}
.opt-btn.jp-opt { font-family: var(--jp); letter-spacing: 0; }
.opt-btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.opt-btn:hover:not(:disabled) .key { color: var(--bg); border-color: var(--bg); }
.opt-btn:disabled { opacity: 0.35; cursor: default; }
.opt-btn.hit { background: var(--fg); color: var(--bg); opacity: 1; }
.opt-btn.miss { background: var(--red); color: var(--bg); border-color: var(--red); opacity: 1; }

/* trial feedback flash */
.trial-flash {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  margin-top: 26px;
  min-height: 20px;
}
.trial-flash .ok { color: var(--green); }
.trial-flash .ng { color: var(--red); }

/* teach-on-miss: explanation panel + manual advance (training drills) */
.trial-teach {
  margin-top: 20px; padding: 16px; border: 1px solid var(--line);
  background: var(--bg-2, rgba(255,255,255,0.02));
  font-size: 14px; line-height: 1.7; color: var(--fg); text-align: left; max-width: 640px;
}
.trial-teach-v { color: var(--red); font-weight: 700; margin-bottom: 6px; }
.trial-teach-en { font-family: var(--mono); font-size: 13px; color: var(--fg); opacity: 0.9; margin: 4px 0 8px; line-height: 1.5; }
.trial-teach-next {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 52px; margin-top: 16px; padding: 12px 20px;
  font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--bg); background: var(--green); border: 0; cursor: pointer; text-transform: uppercase;
}
.trial-teach-next:active { opacity: 0.85; }
.trial-teach-listen {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--fg); background: transparent; border: 1px solid var(--line-strong);
  padding: 8px 14px; min-height: 40px; cursor: pointer;
}
.trial-teach-listen:active { background: rgba(234, 234, 234, 0.08); }

/* RSVP */
.rsvp-word {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(2.4rem, 9vw, 5rem);
  letter-spacing: -0.02em;
  min-height: 1.2em;
  line-height: 1.2;
}
.rsvp-fix { color: var(--red); }
.rsvp-wpm { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); letter-spacing: 0.14em; margin-top: 30px; }
.rsvp-wpm .up { color: var(--green); }
.rsvp-wpm .down { color: var(--red); }

/* phoneme */
.phon-play {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  color: var(--fg-dim); margin-bottom: 30px; min-height: 20px;
}
.phon-play .live { color: var(--green); animation: blink 0.7s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.phon-replay {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  background: none; border: 1px solid var(--line); color: var(--fg-faint);
  padding: 6px 12px; margin-top: 22px; cursor: pointer; text-transform: uppercase;
}
.phon-replay:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- RESULT ---------- */
.result-head {
  font-size: 11px; color: var(--red); letter-spacing: 0.14em;
  padding: 28px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 1px;
}
.result-compare {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  padding: 14px 16px; margin-bottom: 1px; font-size: 13px; letter-spacing: 0.04em;
  border: 1px solid var(--line); border-left: 3px solid var(--fg-dim);
}
.result-compare.good { border-left-color: var(--green); color: var(--green); }
.result-compare.bad { border-left-color: var(--red); color: var(--red); }
.result-compare .rc-delta { font-weight: 700; }
.result-compare .rc-cls { color: var(--fg); opacity: 0.85; }
.result-compare .rc-jp { flex-basis: 100%; color: var(--fg-dim); font-size: 12px; letter-spacing: 0; }
.result-main {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 820px) { .result-main { grid-template-columns: 1fr; } }
.result-gauge { background: var(--bg-2); padding: 30px 24px; text-align: center; }
.result-gauge svg { width: 100%; max-width: 360px; height: auto; }
.gauge-readout { margin-top: 6px; }
.gauge-num { font-size: clamp(3rem, 9vw, 4.6rem); font-weight: 700; line-height: 1; }
.gauge-unit { font-size: 14px; color: var(--red); margin-left: 8px; }
.gauge-cap { font-size: 10px; letter-spacing: 0.14em; color: var(--fg-dim); margin-top: 6px; }
.gauge-class { font-size: 13px; letter-spacing: 0.18em; color: var(--green); margin-top: 14px; }
.gauge-classjp { font-size: 13px; color: var(--fg-dim); margin-top: 4px; }
.gauge-raw { font-size: 11px; letter-spacing: 0.04em; color: var(--fg-dim); margin-top: 10px; }

.result-break { background: var(--bg-2); padding: 24px; display: flex; flex-direction: column; gap: 1px; }
.break-row { border: 1px solid var(--line); padding: 14px 16px; background: var(--bg); }
.break-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 8px;
}
.break-name { color: var(--fg); font-weight: 700; }
.break-name .jp-small { font-family: var(--jp); font-weight: 400; color: var(--fg-dim); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.break-val { color: var(--green); }
.break-val.bad { color: var(--red); }
.break-bar { height: 6px; background: var(--bg-3); border: 1px solid var(--line); position: relative; }
.break-bar i { position: absolute; inset: 0 auto 0 0; background: var(--fg); display: block; }
.break-bar .tgt { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--red); }
.break-sub { font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); margin-top: 7px; letter-spacing: 0.08em; text-transform: uppercase; }

.result-note { padding: 18px 2px; color: var(--fg-dim); font-size: 13px; max-width: 720px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 0 40px; }
/* FLOW completion: weakness-aware "next focus" recommendation, above the action row */
.flowend-nextfocus { display: block; width: 100%; max-width: 640px; margin: 8px 0 0; border-color: var(--red); }

/* ---------- TRAINING ---------- */
.train-head { padding: 40px 0 24px; }
.train-title { font-family: var(--jp); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; margin: 10px 0 8px; }
.train-sub { color: var(--fg-dim); }
.weak-stock { margin: 0 0 20px; border-left: 3px solid var(--red); }
.weak-stock-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ws-chip {
  font-size: 12px; letter-spacing: 0.06em; padding: 5px 12px;
  border: 1px solid var(--line-strong); color: var(--fg-faint);
}
.ws-chip.on { color: var(--red); border-color: var(--red); }
.ws-note { color: var(--fg-dim); font-size: 12px; margin: 8px 0 14px; line-height: 1.6; }
.ws-cta { width: 100%; font-size: 13px; }
.train-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-bottom: 28px;
}
@media (max-width: 820px) { .train-grid { grid-template-columns: 1fr; } }
.train-stat {
  font-size: 13px; color: var(--green);
  border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 8px;
}
.train-history { margin-bottom: 24px; }
.history-area { font-size: 11px; color: var(--fg-dim); line-height: 2; overflow-x: auto; }
.history-area svg { display: block; margin: 6px 0 2px; }
.spark-label { color: var(--fg-faint); font-size: 10px; }

/* ---------- SUMMARY ---------- */
.summary-delta {
  font-family: var(--mono);
  font-size: clamp(3.4rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  padding: 40px 0 10px;
}
.summary-delta.good { color: var(--green); }
.summary-delta.bad { color: var(--red); }
.summary-line { font-size: 16px; color: var(--fg); margin-bottom: 24px; max-width: 640px; }
.summary-detail { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 640px; }
.summary-detail:empty { border: 0; }
.sum-row {
  background: var(--bg-2); padding: 12px 16px;
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
}
.sum-row .k { color: var(--fg-dim); }
.sum-row .v { color: var(--fg); }
.sum-row .v.warn { color: var(--red); }
.sum-row .v.good { color: var(--green); }

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding: 18px 20px 34px;
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: 9.5px; letter-spacing: 0.1em; color: var(--fg-faint);
  max-width: 1080px; margin: 0 auto;
}
.foot-reset-wrap { display: inline-flex; align-items: center; gap: 8px; }
.foot-reset {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  color: var(--fg-faint); background: transparent; border: 1px solid var(--line);
  padding: 4px 10px; min-height: 28px; cursor: pointer; text-transform: uppercase;
}
.foot-reset:active { background: rgba(234, 234, 234, 0.06); }
.foot-reset.danger { color: var(--red); border-color: var(--red); }
.foot-reset-q { color: var(--fg-dim); }
.foot-reset-done { color: var(--green); }
.foot-reset-wrap { flex-wrap: wrap; }
.foot-data-box {
  font-family: var(--mono); font-size: 10px; color: var(--fg-dim);
  background: var(--bg-2); border: 1px solid var(--line);
  width: 100%; max-width: 420px; height: 52px; padding: 6px 8px; resize: vertical;
}
.foot-data-msg { color: var(--red); }

/* ---------- FLOW RUN ---------- */
.hero-flowbest { font-size: 11px; color: var(--green); margin: -14px 0 24px; letter-spacing: 0.1em; }

/* home telemetry dashboard */
.home-dash { margin: 0 0 1px; }
.dash-total {
  font-size: 12px; color: var(--fg-dim); letter-spacing: 0.06em; margin: 6px 0 14px;
}
.dash-total .dt-num { font-size: 18px; font-weight: 700; color: var(--green); }
.dash-total .dt-rank { color: var(--fg); font-weight: 700; letter-spacing: 0.1em; }
.dash-total .dt-next { color: var(--fg-faint); font-size: 11px; }
.dash-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-bottom: 16px;
}
.ds-cell { background: var(--bg); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ds-k { font-size: 9px; color: var(--fg-faint); letter-spacing: 0.14em; }
.ds-v { font-size: 20px; font-weight: 700; color: var(--fg); }
.ds-v.good { color: var(--green); }
.dash-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .dash-charts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .dash-charts { grid-template-columns: 1fr; } }
.dash-trend { height: 64px; border-bottom: 1px solid var(--line-strong); }
.trend-svg { width: 100%; height: 100%; display: block; }
.dash-empty {
  height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--fg-faint); letter-spacing: 0.08em; text-transform: none;
}
.dash-delta { font-size: 10px; color: var(--fg-dim); letter-spacing: 0.08em; margin-top: 7px; text-transform: none; }
.dash-delta .good { color: var(--green); font-weight: 700; }
.dash-delta .dim { color: var(--fg-faint); }
.dash-cap { font-size: 9px; color: var(--fg-faint); letter-spacing: 0.14em; margin-bottom: 8px; }
.dash-runs {
  display: flex; align-items: flex-end; gap: 3px;
  height: 64px; border-bottom: 1px solid var(--line-strong); padding: 0 1px;
}
.dr-bar { display: block; flex: 1; min-width: 4px; background: rgba(234, 234, 234, 0.55); }
.dr-bar.rec { background: var(--green); }
.dash-block-wide { grid-column: 1 / -1; }
.dash-skill { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.dsk-row { display: flex; align-items: baseline; gap: 8px; min-width: 150px; }
.dsk-label { font-size: 11px; color: var(--fg-dim); width: 32px; flex-shrink: 0; }
.dsk-val { font-size: 13px; color: var(--fg); font-weight: 700; }
.dsk-d { font-size: 10px; letter-spacing: 0.04em; }
.dsk-d.good { color: var(--green); }
.dsk-d.warn { color: var(--red); }
.dsk-d.dim { color: var(--fg-faint); }
.dash-week { display: flex; gap: 4px; height: 78px; }
.dw-cell {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  border: 1px solid var(--line); background: var(--bg); padding: 3px 3px 2px; gap: 3px;
}
.dw-cell.today { border-color: var(--fg-dim); }
.dw-fill { display: block; width: 100%; background: rgba(234, 234, 234, 0.3); }
.dw-fill.part { background: rgba(234, 234, 234, 0.55); }
.dw-fill.hitT { background: var(--green); }
.dw-day { font-size: 9px; color: var(--fg-faint); }

/* daily target + streak */
.daily-panel { max-width: 620px; margin-bottom: 28px; padding: 16px 20px; }
.daily-bar {
  height: 8px; border: 1px solid var(--line-strong); background: var(--bg-3);
  position: relative; overflow: hidden; margin-bottom: 10px;
}
.daily-bar i { display: block; height: 100%; width: 0; background: var(--fg); transition: width 0.6s; }
.daily-bar i.done { background: var(--green); }
.daily-meta {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 11px; letter-spacing: 0.1em; color: var(--fg-dim);
}
.daily-streak.hot { color: var(--red); }
.daily-nudge { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--fg-dim); }
.daily-nudge.warn { color: var(--fg); }
.daily-nudge.good { color: var(--green); }

/* data-backup reminder (local-only safety net) */
.backup-nudge { margin-top: 14px; }
.backup-msg { font-size: 13px; line-height: 1.6; color: var(--fg-dim); margin: 6px 0 12px; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.backup-actions .btn { flex: 0 0 auto; }
.backup-row { display: flex; gap: 10px; width: 100%; margin-top: 10px; }
.backup-code {
  font-family: var(--mono); font-size: 10px; color: var(--fg-dim);
  background: var(--bg-2); border: 1px solid var(--line);
  width: 100%; padding: 8px; resize: vertical;
}

/* Today's Focus — adaptive coach plan */
.focus-plan { margin-top: 14px; }
.focus-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.focus-step {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); background: var(--bg-2);
}
.focus-step.lead { border-color: rgba(255, 42, 42, 0.45); }
.focus-step.done { opacity: 0.55; }
.fs-n {
  flex: 0 0 auto; width: 22px; height: 22px; line-height: 21px; text-align: center;
  font-size: 12px; color: var(--fg-dim); border: 1px solid var(--line); border-radius: 50%;
}
.focus-step.lead .fs-n { color: var(--red); border-color: var(--red); }
.fs-body { flex: 1 1 auto; min-width: 0; }
.fs-label { font-size: 14px; font-weight: 700; color: var(--fg); }
.fs-sub { font-size: 11px; color: var(--fg-dim); margin-top: 2px; line-height: 1.45; }
.fs-go { flex: 0 0 auto; min-height: 44px; padding: 0 18px; font-size: 12px; }
/* "苦手な型" summary: names the weakest grammar + syntax patterns (home focus plan + result) */
.focus-weaktypes, .result-weaktypes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.result-weaktypes { margin: 4px 0 8px; }
.wt-label { font-size: 10px; color: var(--fg-dim); letter-spacing: 0.1em; }
.wt-chip { min-height: 36px; padding: 6px 12px; font-size: 12px; color: var(--fg);
  background: rgba(255,42,42,0.08); border: 1px solid rgba(255,42,42,0.4); border-radius: 8px; cursor: pointer; }
.wt-chip:hover { background: rgba(255,42,42,0.16); }
.wt-name { color: var(--red); font-weight: 700; }

.flow-rules { margin-bottom: 0; }
.flow-rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; }
@media (max-width: 640px) { .flow-rules-grid { grid-template-columns: 1fr; } }
.flow-rule { font-size: 12.5px; color: var(--fg-dim); line-height: 1.7; }
.fr-id { display: block; color: var(--red); font-size: 10px; letter-spacing: 0.14em; margin-bottom: 6px; }

.flow-timewrap {
  height: 4px; border: 1px solid var(--line); background: var(--bg-3);
  margin: 20px 0 1px;
}
.flow-time { height: 100%; width: 100%; background: var(--red); }
.flow-timeleft { font-size: 11px; letter-spacing: 0.1em; color: var(--fg-dim); text-align: right; margin: 4px 0 2px; }
/* final-15s urgency cue: instrument-style red blink on the残り time + bar glow */
.flow-timeleft.flow-low { color: var(--red); font-weight: 700; animation: flowLowBlink 1s steps(2, jump-none) infinite; }
@keyframes flowLowBlink { 50% { opacity: 0.4; } }
.flow-time-low .flow-time { box-shadow: 0 0 6px var(--red); }

.flow-hud {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto auto;
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  font-size: 11.5px;
}
.flow-hud > * {
  background: var(--bg-2); padding: 12px 12px; white-space: nowrap;
  font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.flow-hud > span:nth-child(1) { color: var(--fg); font-weight: 700; }
.flow-hud > span:nth-child(2) { color: var(--green); font-weight: 700; }
.flow-hud > span:nth-child(3) { color: var(--fg-dim); }
.fh-ghost.lead { color: var(--green); }
.fh-ghost.trail { color: var(--red); }
.cmb-pips { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 3px; }
.cmb-pip { width: 6px; height: 6px; background: var(--line-strong); display: inline-block; transition: background .15s, box-shadow .15s; }
.cmb-pip.on { background: var(--fg); }
.cmb-pip.on.od { background: var(--green); box-shadow: 0 0 5px var(--green); }
.cmb-od { color: var(--green); font-weight: 700; }

/* ear resolution map (cumulative per-axis listening accuracy) on the training hub */
.ear-map { margin-top: 14px; }
.ear-map-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ear-row { display: flex; align-items: center; gap: 10px; }
.ear-label { font-size: 11px; color: var(--fg-dim); width: 92px; flex-shrink: 0; }
.ear-bar { flex: 1; height: 6px; background: var(--line); position: relative; overflow: hidden; }
.ear-bar i { display: block; height: 100%; background: var(--green); transition: width .3s; }
.ear-weak .ear-bar i { background: var(--red); }
.ear-weak .ear-label { color: var(--red); }
.ear-pct { font-size: 11px; color: var(--fg-dim); width: 70px; text-align: right; flex-shrink: 0; }
.ear-n { color: var(--fg-faint); }
.fh-snd, .fh-abort { border: 0; cursor: pointer; color: var(--fg-faint); font-size: 11px; }
.fh-snd:hover { color: var(--fg); }
.fh-abort:hover { color: var(--red); }
.fh-abort.armed { color: var(--red); font-weight: 700; }
@media (max-width: 640px) {
  .flow-hud { grid-template-columns: 1fr 1fr 1fr; }
  .fh-ghost { grid-column: 1 / -1; }
}

.flow-stage {
  min-height: 60vh;
  min-height: 60dvh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; position: relative; padding: 20px 0;
}
.flow-stream {
  font-family: var(--sans); font-weight: 900;
  font-size: clamp(2.6rem, 10vw, 5.6rem);
  letter-spacing: -0.02em; line-height: 1.15; min-height: 1.2em;
}
.flow-count { color: var(--fg-dim); }
.flow-go { color: var(--green); }
.flow-od {
  position: absolute; top: 8%;
  color: var(--red); font-size: 13px; letter-spacing: 0.3em;
  animation: blink 0.5s steps(2) infinite;
}
/* one-shot reward pulse on entering OVERDRIVE (overrides the blink for ~0.6s, then reverts) */
.flow-od.od-burst { animation: odBurst 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes odBurst {
  0%   { transform: scale(1); text-shadow: none; }
  30%  { transform: scale(1.55); text-shadow: 0 0 14px var(--red); }
  100% { transform: scale(1); text-shadow: 0 0 6px var(--red); }
}

.flow-gate { width: 100%; max-width: 680px; }
.flow-gate-hint {
  font-size: 11px; color: var(--green); letter-spacing: 0.1em;
  border: 1px solid var(--green); padding: 6px 12px; margin-bottom: 12px;
  display: inline-block; text-transform: none;
}
.flow-gate-tag {
  font-size: 10px; color: var(--red); letter-spacing: 0.16em;
  margin-bottom: 10px; animation: blink 0.7s steps(2) infinite;
}
.flow-gate-prompt {
  font-size: clamp(1.3rem, 4.5vw, 2rem); font-weight: 700; line-height: 1.5;
  min-height: 1.5em; margin-bottom: 18px;
}
.flow-gate-sub { display: block; font-size: 11px; letter-spacing: 0.1em; margin-bottom: 8px; }
.flow-gate-en { display: block; }
.flow-gate-shutter {
  height: 6px; border: 1px solid var(--line-strong); background: var(--bg-3);
  margin-bottom: 14px; position: relative; overflow: hidden;
}
.flow-gate-shutter i {
  display: block; height: 100%; width: 100%; background: var(--red);
}
.flow-gate-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flow-gate-btn {
  font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: 0.04em;
  min-height: 76px; padding: 14px 16px;
  border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--fg);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.flow-gate-btn .key {
  font-size: 10px; color: var(--fg-faint); border: 1px solid var(--line); padding: 2px 6px;
}
.flow-gate-btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.flow-gate-btn:disabled { opacity: 0.4; }
/* correct answer = green ✓, wrong choice = red ✗ (color + symbol, not white) */
.flow-gate-btn.hit { background: var(--green); color: var(--bg); border-color: var(--green); opacity: 1; }
.flow-gate-btn.miss { background: var(--red); color: var(--bg); border-color: var(--red); opacity: 1; }
.flow-gate-btn.hit::before { content: "✓ "; font-weight: 800; }
.flow-gate-btn.miss::before { content: "✗ "; font-weight: 800; }

/* eval card: per-gate debrief, clock paused */
.flow-eval {
  width: 100%; max-width: 620px; text-align: left;
  border: 1px solid var(--line-strong); background: var(--bg-2);
  padding: 18px 20px 14px; cursor: pointer;
}
.ev-head { font-size: 10px; letter-spacing: 0.14em; color: var(--red); margin-bottom: 10px; }
.ev-head .dim { color: var(--fg-faint); }
.ev-rt { font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 800; line-height: 1.1; }
.ev-rt-ms { display: inline-block; margin-left: 14px; font-size: 0.42em; font-weight: 500; color: var(--fg-dim); vertical-align: middle; letter-spacing: 0.06em; }
.ev-rt.good { color: var(--green); }
.ev-rt.bad { color: var(--red); }
.ev-ms { font-size: 13px; margin-left: 6px; color: var(--fg-dim); }
.ev-zone { margin: 12px 0 4px; }
.ev-zone-track {
  position: relative; height: 8px; display: flex;
  border: 1px solid var(--line-strong); background: var(--bg-3);
}
.ev-zone-track .z { display: block; height: 100%; }
.ev-zone-track .z1 { width: 35%; background: rgba(74, 246, 38, 0.28); }
.ev-zone-track .z2 { width: 30%; background: rgba(234, 234, 234, 0.16); }
.ev-zone-track .z3 { width: 35%; background: rgba(255, 42, 42, 0.28); }
.ev-marker {
  position: absolute; top: -5px; bottom: -5px; width: 3px;
  background: var(--fg); transform: translateX(-50%);
}
.ev-zone-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--fg-faint); letter-spacing: 0.12em; margin-top: 5px;
}
.ev-verdict { font-size: 13px; letter-spacing: 0.16em; margin-top: 12px; }
.ev-verdict.good { color: var(--green); }
.ev-verdict.mid { color: var(--fg); }
.ev-verdict.warn { color: var(--fg-dim); }
.ev-verdict.bad { color: var(--red); }
.ev-verdict-jp { font-size: 12px; color: var(--fg-dim); margin: 3px 0 12px; }
.ev-line {
  display: flex; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.ev-k { font-size: 9.5px; color: var(--red); letter-spacing: 0.14em; flex: none; }
.ev-v { font-size: 14px; font-weight: 700; color: var(--fg); }
.ev-word { font-size: 18px; letter-spacing: 0.04em; text-transform: none; }
.ev-sent { font-family: var(--sans); font-weight: 800; font-size: 15px; margin-top: 8px; color: var(--fg); }
.ev-expl { font-size: 12.5px; color: var(--fg-dim); line-height: 1.7; margin-top: 7px; }
.ev-listen {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--fg); background: transparent; border: 1px solid var(--line-strong);
  padding: 8px 14px; min-height: 40px; cursor: pointer;
}
.ev-listen:active { background: rgba(234, 234, 234, 0.08); }
.ev-pick {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border: 1px solid rgba(255, 42, 42, 0.45); background: rgba(255, 42, 42, 0.07);
  padding: 8px 12px; margin-top: 10px;
}
.ev-pick-w { font-size: 15px; font-weight: 700; color: var(--red); text-transform: none; }
.ev-pick-g { font-size: 12px; color: var(--fg-dim); }
.ev-deltawrap { font-size: 11px; letter-spacing: 0.08em; margin-top: 10px; }
.ev-deltawrap.good { color: var(--green); }
.ev-deltawrap.warn { color: var(--fg-dim); }
.ev-next {
  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px;
}
.ev-next-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 12px 20px;
  font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--bg); background: var(--green); border: 0; cursor: pointer;
  text-transform: uppercase;
}
.ev-next-btn:active { opacity: 0.85; }
.ev-next-key { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; opacity: 0.7; }
.ev-unsure-btn {
  display: block; width: 100%; min-height: 48px; margin-bottom: 10px; padding: 10px 16px;
  font-family: var(--jp); font-size: 13px; font-weight: 700;
  color: var(--fg); background: transparent; border: 1px solid var(--line-strong); cursor: pointer;
}
.ev-unsure-btn:active { background: rgba(234, 234, 234, 0.08); }
.ev-unsure-btn:disabled { color: var(--green); border-color: var(--green); opacity: 1; }

/* touch ergonomics: no 300ms delay, no double-tap zoom, no text selection on rapid taps */
.btn, .opt-btn, .flow-gate-btn, .phon-replay, .run-abort,
.fh-snd, .fh-abort, .fh-eval, .flow-eval, .flow-stage, .nr-mode-tab {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* thumb zone: on coarse pointers the gate sits in the lower half of the stage */
@media (pointer: coarse) {
  .flow-stage { justify-content: center; }
  .flow-gate { margin-top: auto; margin-bottom: 5vh; }
  .flow-gate-btn { min-height: 92px; font-size: 18px; }
}

/* visibility pause overlay */
.flow-pause {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(10, 10, 10, 0.92);
  font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 700; letter-spacing: 0.2em;
  color: var(--fg); cursor: pointer;
}
.flow-pause .jp { font-size: 13px; font-weight: 400; color: var(--fg-dim); letter-spacing: 0.04em; }
.flow-pause[hidden] { display: none; }

.flow-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 8000;
  opacity: 0; transition: opacity 0.18s;
}
.flow-flash.good { opacity: 1; box-shadow: inset 0 0 0 6px var(--green); background: rgba(74, 246, 38, 0.07); }
.flow-flash.bad { opacity: 1; box-shadow: inset 0 0 0 6px var(--red); background: rgba(255, 42, 42, 0.08); }

.flowend-dist {
  font-size: clamp(4rem, 16vw, 9rem); font-weight: 700; line-height: 1;
  padding: 36px 0 8px;
}
.flowend-unit { font-size: 16px; color: var(--red); margin-left: 12px; letter-spacing: 0.14em; }
.flowend-verdict { font-size: 16px; color: var(--fg); margin-bottom: 24px; max-width: 640px; }

/* distance band ladder (internal reference anchoring) */
.flowend-band { max-width: 640px; margin: 4px 0 20px; }
.band-ladder {
  position: relative; display: flex; gap: 1px;
  height: 10px; border: 1px solid var(--line-strong); background: var(--line);
  margin-bottom: 8px;
}
.bl-zone { display: block; height: 100%; background: var(--bg-3); }
.bl-zone.cur { background: rgba(234, 234, 234, 0.28); }
.bl-zone:last-child { background: rgba(74, 246, 38, 0.18); }
.bl-zone:last-child.cur { background: rgba(74, 246, 38, 0.45); }
.band-marker {
  position: absolute; top: -5px; bottom: -5px; width: 3px;
  background: var(--red); transform: translateX(-50%);
}
.band-label { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: var(--fg); }
.band-jp { font-size: 12px; font-weight: 400; color: var(--fg-dim); letter-spacing: 0; }
.band-note { font-size: 9.5px; color: var(--fg-faint); letter-spacing: 0.06em; margin-top: 5px; text-transform: none; }
.result-head .rec { color: var(--green); animation: blink 0.8s steps(2) infinite; }

/* one-shot record stamp (no looping animation) */
.flowend-dist { position: relative; }
.rec-stamp {
  position: absolute; top: 8px; right: 0;
  transform: rotate(-8deg);
  font-family: var(--sans); font-weight: 900;
  font-size: clamp(0.9rem, 3vw, 1.4rem);
  letter-spacing: 0.18em;
  color: var(--green); border: 3px solid var(--green);
  padding: 6px 14px;
  animation: stampIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes stampIn {
  from { transform: rotate(-8deg) scale(2.4); opacity: 0; }
  to   { transform: rotate(-8deg) scale(1); opacity: 1; }
}
@media (max-width: 640px) { .rec-stamp { top: -14px; } }

/* wreckage log (post-run debrief of misses) */
.wreck-panel { max-width: 640px; margin-top: 14px; }
.wreck-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wreck-row { background: var(--bg); padding: 12px 14px; }
.wreck-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wk-st {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  padding: 2px 8px; border: 1px solid; flex: none;
}
.wk-st.ok { color: var(--green); border-color: var(--green); }
.wk-st.ng { color: var(--red); border-color: var(--red); }
.wk-en { font-size: 14px; font-weight: 700; color: var(--fg); flex: 1; min-width: 180px; }
.wk-ans {
  font-size: 11px; color: var(--green); letter-spacing: 0.08em; text-transform: none;
  white-space: nowrap;
}
.wreck-listen {
  flex: none; background: transparent; border: 1px solid var(--line-strong);
  color: var(--fg); font-size: 13px; line-height: 1; padding: 6px 10px;
  min-height: 32px; cursor: pointer;
}
.wreck-listen:active { background: rgba(234, 234, 234, 0.08); }
.wreck-expl { font-size: 12px; color: var(--fg-dim); margin-top: 6px; line-height: 1.65; }
.wreck-note {
  font-size: 12px; color: var(--fg-dim); margin-top: 12px;
  border-top: 1px solid var(--line); padding-top: 12px;
}

/* weak zone card */
.wk-panel { max-width: 640px; margin-top: 14px; border-left: 3px solid var(--hazard); }
.wk-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.wk-row { display: flex; align-items: center; gap: 10px; }
.wk-label { font-size: 11px; color: var(--fg-dim); width: 96px; flex-shrink: 0; }
.wk-bar { flex: 1; height: 6px; background: var(--line); position: relative; overflow: hidden; }
.wk-bar i { display: block; height: 100%; background: var(--fg-dim); transition: width .3s; }
.wk-worst .wk-bar i { background: var(--hazard); }
.wk-worst .wk-label { color: var(--hazard); }
.wk-ratio { font-size: 11px; color: var(--fg-dim); width: 28px; text-align: right; flex-shrink: 0; }
.wk-worst .wk-ratio { color: var(--hazard); }

/* per-skill speed panel (median hit-RT) on the FLOW end screen */
.sp-panel { max-width: 640px; margin-top: 14px; border-left: 3px solid var(--line-strong); }
.sp-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.sp-row { display: flex; align-items: center; gap: 10px; }
.sp-label { font-size: 11px; color: var(--fg-dim); width: 96px; flex-shrink: 0; }
.sp-bar { flex: 1; height: 6px; background: var(--line); position: relative; overflow: hidden; }
.sp-bar i { display: block; height: 100%; background: var(--fg-dim); transition: width .3s; }
.sp-slow .sp-bar i { background: var(--red); }
.sp-slow .sp-label { color: var(--red); }
.sp-ms { font-size: 11px; color: var(--fg-dim); width: 64px; text-align: right; flex-shrink: 0; }
.sp-slow .sp-ms { color: var(--red); }
.sp-note { margin-top: 8px; font-size: 11px; color: var(--fg-dim); line-height: 1.55; }
.sp-best { margin-left: 8px; font-size: 10px; color: var(--green); font-weight: 700; white-space: nowrap; }
.sp-best-note { color: var(--green); }
.wk-cta { margin-top: 14px; width: 100%; font-size: 13px; }

/* count-up readout uses tabular figures */
.mono, .gauge-num, .summary-delta, .last-record-num, .flowend-dist, .flow-hud { font-variant-numeric: tabular-nums; }

/* ---------- reduced motion ---------- */
/* 前庭障害・光過敏に配慮し、装飾的な無限点滅・フリッカー演出を停止する。
   RSVPストリームとゲートシャッターは JS(rAF) 駆動の機能的モーションのため影響を受けず、
   学習体験のコア（流れと制限時間）は保たれる。色によるヒット/ミス表示は残す。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fx-scan, .fx-noise { display: none; }
}

/* ============================================================
   v1.0 polish layer — a11y / premium finish (appended)
   ============================================================ */

/* ---- keyboard focus: the entire interaction model is F/J + Tab,
   so every interactive control needs a visible, on-brand ring ---- */
:focus { outline: none; } /* reset UA, replaced by focus-visible below */
.btn:focus-visible, .opt-btn:focus-visible, .flow-gate-btn:focus-visible,
.run-abort:focus-visible, .foot-reset:focus-visible, .phon-replay:focus-visible,
.ev-listen:focus-visible, .trial-teach-listen:focus-visible, .trial-teach-next:focus-visible,
.wreck-listen:focus-visible, .ev-next-btn:focus-visible, a:focus-visible,
[role="button"]:focus-visible, button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ---- pressed state: reserve hazard-red for genuinely destructive actions ---- */
.btn:active { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: translateY(1px); }
.btn-primary:active { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---- speaker glyph: inherits the monochrome palette (replaces color emoji 🔊) ---- */
.spk {
  display: inline-block; width: 15px; height: 15px; flex-shrink: 0;
  background-color: currentColor; vertical-align: -2px;
  -webkit-mask: var(--spk-svg) no-repeat center / contain;
  mask: var(--spk-svg) no-repeat center / contain;
  --spk-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1c2.9.9 5 3.5 5 6.7s-2.1 5.8-5 6.7v2.1c4-1 7-4.6 7-8.8s-3-7.8-7-8.8z'/%3E%3C/svg%3E");
}
.wreck-listen .spk { width: 16px; height: 16px; vertical-align: middle; }

/* ---- safe-area insets (viewport-fit=cover): keep HUD off the notch and
   the footer/reset off the home indicator on iOS ---- */
.hud { padding-top: env(safe-area-inset-top); }
main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

/* ---- contrast: promote functionally-important faint text above decoration.
   keyboard hints and the data-policy footer must be legible (was 32% ≈ 2:1) ---- */
.mod-intro-keys { color: var(--fg-dim) !important; }
.foot { color: var(--fg-dim); }

/* ---- larger tap target for the in-session ABORT control (was sub-44px) ---- */
.run-abort { min-height: 36px; padding: 6px 10px; }

/* ---- reduced-motion: edge-only, low-opacity hit/miss cue instead of a
   full-viewport color flash (photosensitive-safe) ---- */
.flow-flash.rm { opacity: 0.5; box-shadow: inset 0 0 0 3px currentColor; background: transparent !important; }
.flow-flash.rm.good { color: var(--green); }
.flow-flash.rm.bad { color: var(--red); }