@keyframes bounceIn { 0%{transform:scale(1)} 40%{transform:scale(1.3)} 100%{transform:scale(1)} }
.voice-warn { background:rgba(47,141,99,.16); border:1px solid rgba(47,141,99,.42); color:var(--text); border-radius:14px; padding:10px 16px; margin:0 16px 8px; font-size:.85rem; text-align:center; }
.voice-warn[hidden] { display:none!important; }
.voice-warn button { background:#2f8d63; color:#fff; border:0; border-radius:8px; padding:6px 14px; cursor:pointer; font-weight:900; margin:0 6px; }
@media(display-mode:standalone){.voice-warn{display:none!important}}
:root {
  --bg: #edf2ed;
  --surface: #fffaf0;
  --surface-strong: #ffffff;
  --surface-soft: #f3ead8;
  --text: #17343b;
  --muted: #6d7f7e;
  --indigo: #123f4a;
  --indigo-2: #1d6570;
  --red: #cf4434;
  --red-dark: #8f2e26;
  --gold: #d9a52f;
  --green: #3f8c68;
  --orange: #d87932;
  --blue: #397e9f;
  --border: rgba(64, 67, 52, .16);
  --shadow: 0 18px 45px rgba(18, 63, 74, .14);
  --radius: 24px;
}

[data-theme="dark"] {
  --bg: #0d2025;
  --surface: #172d32;
  --surface-strong: #1c373d;
  --surface-soft: #27434a;
  --text: #f7f1e5;
  --muted: #a7bab8;
  --border: rgba(255,255,255,.11);
  --shadow: 0 18px 45px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(207,68,52,.11), transparent 26%),
    radial-gradient(circle at 90% 12%, rgba(57,126,159,.12), transparent 28%),
    var(--bg);
}

button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.app-shell { max-width: 920px; min-height: 100vh; margin: 0 auto; padding-bottom: 96px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 10px;
}
.brand-button { display:flex; align-items:center; gap:11px; border:0; background:none; color:var(--text); padding:0; cursor:pointer; text-align:left; }
.brand-button img { width:48px; height:48px; border-radius:15px; box-shadow:0 7px 15px rgba(18,63,74,.22); }
.brand-button span { display:grid; }
.brand-button small { color:var(--red); font-size:9px; font-weight:900; letter-spacing:.15em; }
.brand-button strong { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:21px; letter-spacing:.03em; }
.top-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { width:43px; height:43px; border-radius:14px; border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:var(--shadow); cursor:pointer; }
.status-badge { border-radius:999px; padding:7px 10px; font-size:11px; font-weight:900; border:1px solid var(--border); background:var(--surface); }
.status-badge.online { color:var(--green); }
.status-badge.offline { color:var(--orange); }

.traveler-strip { margin:0 18px 8px; display:flex; justify-content:space-between; align-items:center; gap:14px; border:1px solid var(--border); background:rgba(255,250,240,.72); backdrop-filter:blur(14px); border-radius:18px; padding:10px 12px; box-shadow:0 7px 20px rgba(18,63,74,.07); }
[data-theme="dark"] .traveler-strip { background:rgba(23,45,50,.82); }
.traveler-strip > div { display:flex; align-items:center; gap:9px; }
.traveler-avatar { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--red); color:white; font-family:"Yu Mincho",serif; font-weight:900; }
.traveler-strip small { display:block; color:var(--muted); font-size:10px; }
.traveler-strip strong { display:block; font-size:13px; }
.traveler-stats { color:var(--muted); font-size:12px; font-weight:800; }
.traveler-stats b { color:var(--text); }

.main-content { padding:8px 16px 26px; }
.home-cover { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:30px; background:var(--surface); box-shadow:var(--shadow); }
.home-cover img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.cover-actions { position:absolute; z-index:1; right:18px; bottom:18px; left:18px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.cover-actions .btn { box-shadow:0 8px 24px rgba(14,37,50,.28); }

.btn { border:0; border-radius:14px; padding:13px 17px; font-weight:900; cursor:pointer; transition:transform .15s,filter .15s; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--red); color:white; box-shadow:0 5px 0 var(--red-dark); }
.btn-light { background:white; color:var(--indigo); }
.btn-soft { background:var(--surface-soft); color:var(--text); }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-danger { background:#f7d9d5; color:#9f2c2b; }
.btn-block { width:100%; }

.section { margin-top:20px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:11px; }
.section-head h2,.section-head h3 { margin:0; font-family:"Yu Mincho",serif; }
.section-head p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.section-head .counter { color:var(--muted); font-size:12px; font-weight:900; }

.tokyo-map { position:relative; min-height:440px; overflow:hidden; border-radius:28px; background:linear-gradient(160deg,#d7e8e2,#b8d7d5 58%,#7fbabc); border:1px solid rgba(18,63,74,.12); box-shadow:var(--shadow); }
.tokyo-map::before { content:""; position:absolute; inset:0; background:repeating-radial-gradient(ellipse at 80% 95%,transparent 0 14px,rgba(255,255,255,.21) 15px 17px); opacity:.7; }
.map-label { position:absolute; z-index:5; top:15px; left:17px; padding:8px 12px; color:var(--indigo); background:rgba(255,255,255,.78); border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.08em; }
.region-zone { position:absolute; border:0; color:white; cursor:pointer; padding:17px; text-align:left; filter:drop-shadow(0 10px 10px rgba(18,63,74,.2)); transition:transform .18s,filter .18s; }
.region-zone:hover:not(:disabled) { transform:translateY(-5px) scale(1.015); filter:drop-shadow(0 16px 12px rgba(18,63,74,.25)); }
.region-zone:disabled,.region-zone.locked { cursor:not-allowed; filter:grayscale(.55) brightness(.78) drop-shadow(0 8px 8px rgba(18,63,74,.15)); }
.region-zone strong,.region-zone span,.region-zone small { position:relative; z-index:2; display:block; text-shadow:0 2px 4px rgba(0,0,0,.25); }
.region-zone strong { font-size:clamp(22px,5vw,34px); font-family:"Yu Mincho",serif; }
.region-zone span { font-weight:900; margin-top:2px; }
.region-zone small { opacity:.82; margin-top:4px; }
.zone-n1 { left:4%; top:29%; width:34%; height:49%; background:#3b765d; clip-path:polygon(4% 23%,30% 5%,62% 12%,100% 38%,86% 82%,48% 100%,10% 83%); }
.zone-n4 { left:27%; top:18%; width:30%; height:38%; background:#c68835; clip-path:polygon(9% 30%,43% 0,89% 13%,100% 62%,70% 100%,18% 88%,0 58%); }
.zone-n3 { left:48%; top:29%; width:27%; height:38%; background:#6d5b8d; clip-path:polygon(10% 18%,57% 0,100% 29%,85% 83%,35% 100%,0 63%); }
.zone-n5 { right:4%; top:13%; width:28%; height:40%; background:#c94b3d; clip-path:polygon(16% 13%,65% 0,100% 35%,88% 86%,44% 100%,0 62%); box-shadow:0 0 0 6px rgba(255,211,109,.45); }
.zone-n2 { right:8%; bottom:4%; width:31%; height:38%; background:#307c94; clip-path:polygon(8% 13%,52% 0,100% 31%,84% 90%,40% 100%,0 65%); }
.region-lock { position:absolute!important; right:13px; top:13px; font-size:18px; }
.map-route { position:absolute; z-index:4; left:14%; bottom:14%; width:72%; height:4px; background:repeating-linear-gradient(90deg,var(--red) 0 14px,transparent 14px 21px); transform:rotate(-19deg); transform-origin:center; opacity:.8; pointer-events:none; }
.map-route::after { content:""; position:absolute; right:-7px; top:-5px; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(255,255,255,.65); }

.region-summary { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:18px; border-radius:20px; background:var(--surface); border:1px solid var(--border); box-shadow:0 8px 25px rgba(18,63,74,.08); }
.region-summary h3 { margin:0 0 5px; font-family:"Yu Mincho",serif; }
.region-summary p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.region-stamp { min-width:76px; height:76px; display:grid; place-items:center; border:4px double var(--red); border-radius:50%; color:var(--red); font:900 24px "Yu Mincho",serif; transform:rotate(-7deg); }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:19px; padding:15px; box-shadow:0 7px 22px rgba(18,63,74,.06); }
.stat-label { color:var(--muted); font-size:11px; margin-bottom:6px; }
.stat-value { font-size:25px; font-weight:900; letter-spacing:-.04em; }
.stat-value small { font-size:11px; letter-spacing:0; }
.stat-sub { color:var(--muted); font-size:10px; margin-top:4px; }
.progress { height:9px; background:var(--surface-soft); border-radius:999px; overflow:hidden; margin-top:10px; }
.progress > span { display:block; height:100%; background:linear-gradient(90deg,var(--red),var(--gold)); border-radius:inherit; }

.quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.quick-card { text-align:left; border:1px solid var(--border); background:var(--surface); border-radius:20px; padding:17px; color:var(--text); cursor:pointer; box-shadow:0 7px 22px rgba(18,63,74,.06); }
.quick-card:hover { border-color:rgba(207,68,52,.45); transform:translateY(-2px); }
.quick-card strong { display:block; font-size:15px; margin-bottom:4px; }
.quick-card small { color:var(--muted); line-height:1.5; }
.quick-icon { font-size:25px; margin-bottom:11px; }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.page-head h2 { margin:0 0 5px; font-family:"Yu Mincho",serif; }
.page-head p { color:var(--muted); line-height:1.6; margin:0; }
.counter { color:var(--muted); font-weight:800; font-size:12px; white-space:nowrap; }
.flashcard { min-height:440px; display:flex; flex-direction:column; justify-content:space-between; text-align:center; position:relative; }
.next-word-btn { position:absolute; top:10px; right:12px; z-index:5; border:1.5px solid var(--indigo); background:transparent; color:var(--indigo); border-radius:999px; padding:5px 12px; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; transition:transform .15s,background .15s,color .15s; }
.next-word-btn:hover { background:var(--indigo); color:#fff; }
.next-word-btn:active { transform:scale(.94); }
.play-series-btn { position:absolute; top:10px; left:12px; z-index:5; border:1.5px solid var(--indigo); background:var(--indigo); color:#fff; border-radius:999px; padding:5px 12px; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; transition:transform .15s,filter .15s; }
.play-series-btn:hover { filter:brightness(1.08); }
.play-series-btn:active { transform:scale(.94); }
.badge-row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; min-height:27px; padding:4px 9px; border-radius:99px; background:var(--surface-soft); color:var(--red); font-size:11px; font-weight:900; }
.word-main { font-size:50px; font-weight:900; margin:22px 0 4px; letter-spacing:.02em; }
.word-kana { font-size:24px; font-weight:800; color:var(--red); }
.word-romaji { color:var(--muted); margin-top:7px; }
.speech-btn,.mini-speech { border:0; border-radius:50%; background:var(--surface-soft); color:var(--red); cursor:pointer; }
.speech-btn { width:54px; height:54px; font-size:21px; margin:18px auto 0; }
.mini-speech { width:42px; height:42px; }
.answer-panel { margin-top:18px; padding-top:18px; border-top:1px dashed var(--border); text-align:left; }
.answer-panel.hidden { display:none; }
.meaning { text-align:center; font-size:25px; font-weight:900; margin-bottom:17px; }
.detail-list { display:grid; gap:10px; }
.detail-line { background:var(--bg); border-radius:14px; padding:12px 14px; line-height:1.65; }
.detail-line small { display:block; color:var(--muted); margin-bottom:3px; }
.rating-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.rate-btn { border:0; border-radius:14px; padding:11px 5px; color:white; font-weight:900; cursor:pointer; }
.rate-again { background:#c94b55; }.rate-hard{background:var(--orange)}.rate-good{background:var(--blue)}.rate-easy{background:var(--green)}
.rate-btn small { display:block; opacity:.82; font-weight:600; margin-top:3px; font-size:10px; }

.writing-challenge { margin-top:20px; padding:18px; border:1px solid rgba(63,140,104,.3); border-radius:22px; background:linear-gradient(155deg,rgba(121,201,59,.11),var(--surface-strong) 46%); box-shadow:0 12px 30px rgba(18,63,74,.08); }
.writing-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.writing-heading h3 { margin:2px 0 4px; font-family:"Yu Mincho",serif; font-size:24px; }
.writing-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.writing-kicker { color:var(--green); font-size:10px; font-weight:900; letter-spacing:.14em; }
.writing-progress { flex:0 0 auto; padding:6px 10px; border-radius:999px; background:var(--green); color:white; font-size:12px; font-weight:900; }
.writing-characters { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:16px 0; }
.writing-character { position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--surface-soft); color:var(--muted); font:900 24px/1 "Yu Mincho",serif; transition:transform .2s,background .2s,color .2s; }
.writing-character.active { color:white; background:var(--green); transform:scale(1.12); box-shadow:0 0 0 5px rgba(63,140,104,.14); }
.writing-character.complete { color:white; background:var(--indigo-2); }
.writing-character.complete::after { content:"✓"; position:absolute; margin:29px 0 0 29px; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--green); color:white; font:900 10px/1 sans-serif; }
.writing-workbench { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.writing-panel { min-width:0; padding:12px; border:1px solid var(--border); border-radius:18px; background:var(--surface-strong); }
.writing-panel-title { display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:13px; font-weight:900; }
.writing-panel-title b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--green); color:white; }
.stroke-box { position:relative; display:grid; place-items:center; width:100%; max-width:280px; aspect-ratio:1; overflow:hidden; margin:0 auto 10px; border:2px solid rgba(109,127,126,.22); border-radius:18px; background-color:#fff; background-image:linear-gradient(to right,transparent calc(50% - .5px),rgba(109,127,126,.2) calc(50% - .5px),rgba(109,127,126,.2) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),rgba(109,127,126,.2) calc(50% - .5px),rgba(109,127,126,.2) calc(50% + .5px),transparent calc(50% + .5px)); }
.stroke-target { display:grid; place-items:center; width:100%; height:100%; }
.stroke-target svg { display:block; max-width:100%; max-height:100%; }
.writing-practice-box { touch-action:none; transition:opacity .2s; }
.writing-practice-box.is-locked { pointer-events:none; opacity:.52; }
.writing-practice-box.is-locked::after { content:"先看示范"; position:absolute; inset:auto 12px 12px; padding:7px 10px; border-radius:999px; background:rgba(18,63,74,.84); color:white; text-align:center; font-size:11px; font-weight:900; }
.writing-feedback { margin-top:14px; padding:11px 13px; border-radius:13px; background:var(--surface-soft); color:var(--text); text-align:center; font-size:13px; font-weight:800; }
.writing-feedback.correct { background:#e6f4dc; color:#287348; }
.writing-feedback.success { background:#dff3d9; color:#287348; }
.writing-feedback.error { background:#f8dfda; color:#9f2c2b; }
.writing-challenge.complete { border-color:var(--green); box-shadow:0 0 0 3px rgba(63,140,104,.12); }
.writing-gate { margin-top:12px; padding:10px 12px; border-radius:12px; background:var(--surface-soft); color:var(--muted); text-align:center; font-size:12px; font-weight:900; }
.skip-writing { margin:10px 0 14px; font-weight:900; border:2px dashed var(--accent); animation:skipPulse 2.2s infinite; }
@keyframes skipPulse { 50% { box-shadow:0 0 0 5px rgba(18,63,74,.12); } }
#skipWritingBtn { margin-top:10px; }
.writing-gate.unlocked { background:#dff3d9; color:#287348; }
.rating-grid.writing-locked { pointer-events:none; opacity:.3; filter:grayscale(.8); }
.rate-btn:disabled { cursor:not-allowed; }

.quiz-option { display:block; width:100%; border:1px solid var(--border); background:var(--surface-strong); color:var(--text); border-radius:15px; padding:15px; margin-top:10px; text-align:left; cursor:pointer; }
.quiz-option.correct { border-color:var(--green); background:rgba(63,140,104,.13); }
.quiz-option.wrong { border-color:var(--red); background:rgba(207,68,52,.12); }
.quiz-option:disabled { cursor:default; color:var(--text); }
.quiz-prompt { text-align:center; padding:18px 0; }
.quiz-prompt .word-main { font-size:43px; }
.result-box { text-align:center; padding:30px 12px; }
.result-score { font-size:60px; font-weight:900; color:var(--red); }
.empty { text-align:center; color:var(--muted); padding:44px 18px; }
.empty-icon { font-size:47px; margin-bottom:12px; }

.searchbar { width:100%; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:15px; padding:14px 15px; outline:none; margin-bottom:12px; }
.word-list { display:grid; gap:9px; }
.word-row { display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border); padding:13px 14px; border-radius:17px; }
.word-row-main { flex:1; min-width:0; }
.word-row-title { font-weight:900; font-size:17px; }
.word-row-kana { color:var(--red); font-size:12px; }
.word-row-meaning { color:var(--muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meter-list,.setting-list { display:grid; gap:10px; }
.meter-row,.setting-row { background:var(--surface); border:1px solid var(--border); border-radius:17px; padding:14px; }
.meter-top,.setting-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.meter-top { font-size:13px; font-weight:800; }
.setting-row p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.note { color:var(--muted); font-size:12px; line-height:1.65; }
.split-actions { display:flex; gap:10px; flex-wrap:wrap; }
.split-actions .btn { flex:1; min-width:130px; }

.bottom-nav { position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:min(920px,100%); display:grid; grid-template-columns:repeat(5,1fr); padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,250,240,.94); border-top:1px solid var(--border); backdrop-filter:blur(18px); z-index:30; }
[data-theme="dark"] .bottom-nav { background:rgba(23,45,50,.94); }
.nav-item { border:0; background:none; color:var(--muted); padding:5px; cursor:pointer; }
.nav-item span { display:block; font-size:20px; line-height:1.1; font-weight:900; }
.nav-item small { display:block; margin-top:3px; font-size:10px; }
.nav-item.active { color:var(--red); }

.toast { position:fixed; left:50%; bottom:96px; transform:translate(-50%,20px); background:#17383f; color:white; padding:11px 16px; border-radius:13px; opacity:0; pointer-events:none; transition:.2s; z-index:100; max-width:90%; text-align:center; font-weight:800; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.update-banner { position:fixed; z-index:110; left:50%; bottom:92px; transform:translateX(-50%); width:min(520px,calc(100% - 24px)); background:var(--indigo); color:white; border-radius:16px; padding:12px 14px; box-shadow:0 14px 35px rgba(0,0,0,.3); align-items:center; justify-content:space-between; gap:12px; }
.update-banner:not([hidden]) { display:flex; }
.update-banner button { border:0; background:var(--gold); color:#263238; border-radius:10px; padding:9px 12px; font-weight:900; cursor:pointer; white-space:nowrap; }

@media (max-width:700px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .tokyo-map { min-height:390px; }
  .region-zone { padding:12px; }
  .region-zone small { display:none; }
  .zone-n5 { width:31%; }
}

@media (max-width:440px) {
  .topbar { padding-left:12px; padding-right:12px; }
  .brand-button strong { font-size:17px; }
  .brand-button img { width:43px; height:43px; }
  .status-badge { display:none; }
  .traveler-strip { margin-left:12px; margin-right:12px; }
  .main-content { padding-left:11px; padding-right:11px; }
  .home-cover { border-radius:25px; }
  .cover-actions { position:static; padding:12px; background:var(--surface); }
  .cover-actions .btn { flex:1; min-width:135px; }
  .tokyo-map { min-height:350px; }
  .region-zone strong { font-size:20px; }
  .region-zone span { font-size:11px; }
  .zone-n1 { left:1%; width:37%; }
  .zone-n4 { left:25%; width:32%; }
  .zone-n3 { left:46%; width:29%; }
  .zone-n5 { right:1%; width:32%; }
  .zone-n2 { right:3%; width:34%; }
  .quick-grid { grid-template-columns:1fr 1fr; }
  .rating-grid { grid-template-columns:repeat(2,1fr); }
  .writing-challenge { padding:14px 10px; }
  .writing-workbench { grid-template-columns:1fr; }
  .writing-panel { padding:10px; }
  .stroke-box { max-width:260px; }
  .flashcard { min-height:410px; }
  .word-main { font-size:42px; }
  .traveler-stats span:first-child { display:none; }
}

/* ── New Game Views ── */
.sound-orb{width:120px;height:120px;border-radius:50%;background:var(--red);color:#fff;font-size:2.5rem;border:0;cursor:pointer;box-shadow:0 8px 0 color-mix(in srgb,var(--red) 80%,#000);margin:0 auto;display:block;transition:transform .15s}
.sound-orb:active{transform:scale(.92)}
.listen-prompt-row{display:flex;align-items:center;justify-content:center;gap:20px;min-height:130px}
.listen-prompt-row .sound-orb{flex:0 0 120px;margin:0}
.listen-answer{display:grid;min-width:150px;padding:14px 18px;border:2px solid transparent;border-radius:18px;background:var(--surface-soft);opacity:0;visibility:hidden;transform:translateX(-10px) scale(.94);transition:opacity .25s,transform .25s,visibility .25s}
.listen-answer.show{border-color:var(--gold);background:linear-gradient(135deg,#fff1b8,#dff3d9);opacity:1;visibility:visible;transform:none;box-shadow:0 10px 24px rgba(217,165,47,.2)}
.listen-answer strong{color:var(--indigo);font:900 clamp(2rem,7vw,3.2rem)/1.1 "Yu Mincho",serif}
.listen-answer span{margin-top:5px;color:var(--red);font-size:clamp(1rem,4vw,1.35rem);font-weight:900}
@media (max-width:440px){
  .listen-prompt-row{gap:12px}
  .listen-prompt-row .sound-orb{flex-basis:96px;width:96px;height:96px}
  .listen-answer{min-width:0;flex:1;padding:12px 9px}
}
.quiz-option.selected{border-color:var(--red)!important;background:var(--red)!important;color:#fff!important}
.chart-grid{display:flex;flex-direction:column;gap:8px}
.chart-row .chart-cells{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.chart-cell{min-width:0;padding:10px 4px 8px;border:0;border-radius:10px;text-align:center;background:#eee;color:#777;font:inherit;cursor:pointer;transition:transform .15s,filter .15s,box-shadow .15s}
.chart-cell.learned{background:#dff3d9;color:#287348}
.chart-cell:not(.chart-cell-empty):hover{filter:brightness(.96);transform:translateY(-2px)}
.chart-cell:not(.chart-cell-empty):active{transform:scale(.96)}
.chart-cell:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.chart-cell-empty{visibility:hidden}
.kana-pair{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.chart-cell .cell-hira,.chart-cell .cell-kata{display:block;min-width:0;font-family:"Yu Mincho",serif;font-size:clamp(1.25rem,4.8vw,2rem);font-weight:900;line-height:1.15}
.chart-cell .cell-hira{color:var(--indigo);border-right:1px solid currentColor}
.chart-cell .cell-kata{color:var(--red);transform:translateY(3px)}
.chart-cell .cell-roma{display:block;margin-top:5px;font-size:.65rem;font-weight:800;letter-spacing:.04em;opacity:.62}
.chip{border:1px solid #ccc;background:transparent;border-radius:999px;padding:6px 12px;cursor:pointer;font-weight:700;font-size:.8rem}
.chip:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.write-kana-chip{min-width:40px;text-align:center}
.write-area canvas{cursor:crosshair;touch-action:none}
.region-summary-n4{margin-top:16px}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}
.center-badge{color:#56c8ff;text-decoration:none;font-weight:800}
.center-badge:hover{text-decoration:underline}