/* Standalone speech-recognition prototype styles. */
:root {
  color-scheme: dark;
  --ink:#261419;
  --wine:#6f1f2d;
  --wine-deep:#35151d;
  --vermilion:#d84b35;
  --gold:#f2c66d;
  --paper:#fff8e9;
  --paper-muted:#eadbc4;
  --green:#55d69f;
  --red:#ff7b6d;
  --blue:#7fc8ff;
  --panel:rgba(255, 248, 233, 0.075);
  --border:rgba(242, 198, 109, 0.25);
  font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing:border-box; }

body {
  min-height:100svh;
  margin:0;
  color:var(--paper);
  background:
    radial-gradient(circle at 10% 0%, rgba(216, 75, 53, 0.2), transparent 34rem),
    radial-gradient(circle at 92% 30%, rgba(242, 198, 109, 0.12), transparent 28rem),
    linear-gradient(160deg, #241116, #421821 48%, #1e1117);
}

button, select { font:inherit; }
button, select { min-height:52px; }
button { touch-action:manipulation; }

.speech-lab {
  width:min(960px, 100%);
  margin:0 auto;
  padding:max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.lab-header { padding:20px 4px 26px; }
.lab-header h1 { margin:5px 0 10px; font-size:clamp(32px, 6vw, 54px); letter-spacing:.04em; }
.lab-header > p:last-child { max-width:680px; margin:0; color:var(--paper-muted); font-size:clamp(16px, 2.4vw, 19px); line-height:1.7; }
.eyebrow, .section-kicker { margin:0; color:var(--gold); font-size:12px; font-weight:900; letter-spacing:.18em; }

.capability-panel,
.trial-panel,
.report-panel,
.privacy-note {
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--panel);
  box-shadow:0 24px 60px rgba(10, 3, 7, .22), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(14px);
}

.capability-panel, .report-panel { padding:22px; }
h2 { margin:4px 0 0; font-size:24px; }

.capability-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin-top:18px;
}
.capability-grid div {
  min-width:0;
  padding:14px;
  border-radius:14px;
  background:rgba(16, 6, 10, .28);
}
.capability-grid span { display:block; color:var(--paper-muted); font-size:13px; }
.capability-grid strong { display:block; margin-top:5px; font-size:17px; }
.capability-grid strong[data-ok="true"] { color:var(--green); }
.capability-grid strong[data-ok="false"] { color:var(--red); }
.capability-note { margin:14px 2px 0; color:var(--paper-muted); line-height:1.6; }

.trial-panel { margin-top:18px; padding:22px; overflow:hidden; }
.trial-toolbar { display:grid; grid-template-columns:auto minmax(130px, 1fr) auto; align-items:center; gap:12px; }
.trial-toolbar label { color:var(--paper-muted); font-weight:700; }
select {
  width:100%;
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#32151d;
  color:var(--paper);
}

button {
  border:1px solid transparent;
  border-radius:14px;
  padding:10px 18px;
  color:var(--paper);
  font-weight:900;
  cursor:pointer;
}
button:focus-visible, select:focus-visible { outline:4px solid rgba(242,198,109,.6); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.5; }
.quiet-button, .sample-button, .copy-button { border-color:var(--border); background:rgba(255,255,255,.07); }
.reset-button { border-color:rgba(255,255,255,.12); background:transparent; color:var(--paper-muted); }

.target-card {
  margin:20px 0 16px;
  padding:28px 18px 24px;
  border-radius:20px;
  color:var(--ink);
  text-align:center;
  background:
    linear-gradient(rgba(93,43,25,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93,43,25,.035) 1px, transparent 1px),
    var(--paper);
  background-size:18px 18px;
  box-shadow:inset 0 0 0 5px rgba(111,31,45,.08);
}
.target-card .section-kicker { color:var(--wine); }
.target-kana { font-family:"Yu Mincho", "Hiragino Mincho ProN", serif; font-size:clamp(112px, 26vw, 210px); font-weight:800; line-height:1; }
.target-romaji { color:var(--wine); font-size:clamp(24px, 5vw, 36px); font-weight:900; letter-spacing:.18em; }
.target-card > p:last-child { margin:12px 0 0; color:#6b4a43; font-weight:700; }

.listen-state {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:86px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:17px;
  background:rgba(13,5,8,.25);
}
.listen-state strong { display:block; font-size:20px; }
.listen-state p { margin:4px 0 0; color:var(--paper-muted); line-height:1.45; }
.mic-orb { flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 7px rgba(242,198,109,.12); }
.listen-state[data-state="listening"] .mic-orb,
.listen-state[data-state="hearing"] .mic-orb { background:var(--red); animation:pulse 1s infinite; }
.listen-state[data-state="success"] .mic-orb { background:var(--green); }
.listen-state[data-state="error"] .mic-orb,
.listen-state[data-state="miss"] .mic-orb { background:var(--red); }

.primary-actions { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin-top:14px; }
.listen-button, .stop-button { background:linear-gradient(135deg, #9e2c37, var(--vermilion)); box-shadow:0 10px 24px rgba(216,75,53,.22); font-size:18px; }
.stop-button { background:linear-gradient(135deg, #672331, #9e2c37); }

.result-panel { margin-top:16px; padding:20px; border-radius:17px; background:rgba(10,4,7,.28); }
.result-panel[data-passed="true"] { box-shadow:inset 5px 0 var(--green); }
.result-panel[data-passed="false"] { box-shadow:inset 5px 0 var(--red); }
.heard-result { font-size:20px; }
.alternative-list { display:grid; gap:8px; margin:14px 0; padding:0; list-style:none; }
.alternative-list li { display:flex; justify-content:space-between; gap:12px; padding:11px 13px; border-radius:11px; background:rgba(255,255,255,.06); }
.alternative-list span { color:var(--paper-muted); font-size:13px; }
.evaluation { margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }
.evaluation p { margin:0 0 10px; font-weight:800; }
.evaluation > div { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.evaluation button { min-height:56px; padding:9px 10px; border-color:rgba(255,255,255,.13); background:rgba(255,255,255,.06); }

.report-panel { margin-top:18px; }
.stats-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:9px; margin:18px 0; }
.stats-grid div { padding:13px 8px; border-radius:12px; text-align:center; background:rgba(10,4,7,.25); }
.stats-grid dt { color:var(--paper-muted); font-size:12px; }
.stats-grid dd { margin:5px 0 0; font-size:25px; font-weight:900; }
.report-actions { display:flex; gap:10px; }
.copy-status { min-height:24px; margin:10px 0 0; color:var(--gold); }
.privacy-note { margin-top:18px; padding:18px 20px; color:var(--paper-muted); line-height:1.65; }
.privacy-note strong { color:var(--paper); }
.privacy-note p { margin:4px 0 0; }

@keyframes pulse {
  0%,100% { box-shadow:0 0 0 7px rgba(255,123,109,.13); transform:scale(1); }
  50% { box-shadow:0 0 0 15px rgba(255,123,109,0); transform:scale(1.05); }
}

@media (max-width:720px) {
  .capability-grid { grid-template-columns:repeat(2, 1fr); }
  .stats-grid { grid-template-columns:repeat(3, 1fr); }
  .evaluation > div { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .speech-lab { padding-inline:12px; }
  .capability-panel, .trial-panel, .report-panel { padding:16px; border-radius:18px; }
  .trial-toolbar { grid-template-columns:1fr 1fr; }
  .trial-toolbar label { grid-column:1 / -1; }
  .primary-actions { grid-template-columns:1fr; }
  .listen-state { align-items:flex-start; }
  .alternative-list li { flex-direction:column; gap:3px; }
  .report-actions { display:grid; grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}