/* ============================================================================
   わくまの ベトナム語 style.css — 日本語アプリ（Wakuma Nihongo）の 見た目を そのまま：「にぎやか v4」を 大人も使える 落ち着きに
   クリーム地・水玉・色のふち・わくま。いつも明るい（ダークモードなし）。左の色の線・濃い面の長文は 使わない。
   字：日本語（画面）＝Zen Maru Gothic／ベトナム語＝Be Vietnam Pro（声調記号が きれい）／見出しの 数字・英字＝Baloo 2／漢字＝Klee One
   声調の 色：ngang 茶・huyền 青・sắc 赤・hỏi むらさき・ngã だいだい・nặng みどり（線・アイコン・カーブで 同じ）
   ========================================================================== */
:root {
  /* --app-top：サイトの 会員ページで 上に「ほかのアプリへ」の帯が つくとき、その高さ（ふだんは 0・2026-10-23） */
  --cream: #FFF8EA; --cream-2: #FFF0D2; --sand: #F6E7C8; --paper: #FFFFFF; --ink: #3A2C25; --ink-2: #6E5D52; --ink-3: #9A8A7E; --line: #EADCC2;
  --yellow: #FFF100; --yellow-d: #D9C800; --marker: #FFE94A; --yellow-l: #FFF4A3; --spark: #FFD93B;
  --sky: #5BC0EB; --pink: #F58BB0; --sun: #FFC93B; --leaf: #7FD3A8; --peach: #FFB36B;
  --sc: #E0457B; --sd: #B0275A; --sl: #FDE8EF; --sc-ink: #fff;   /* 2026-10-23 夜 見本 C：教科の色（会員専用ページと 同じ）。前は 青 #00A0E9 */
  --ok: #2F9C6A; --ok-l: #E2F4EA; --ng: #D94F3D; --ng-l: #FDE4E2; --red: #E5533D;
  --sh: 0 10px 24px rgba(90, 60, 30, .12); --sh-s: 0 4px 12px rgba(90, 60, 30, .10);
  --f-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Be Vietnam Pro", system-ui, sans-serif;
  --f-vn: "Be Vietnam Pro", system-ui, sans-serif;
  --f-disp: "Baloo 2", "Zen Maru Gothic", "Be Vietnam Pro", sans-serif;
  --t-ngang: #7A6555; --t-huyen: #0074B3; --t-sac: #E5533D; --t-hoi: #8B63D0; --t-nga: #D98200; --t-nang: #2F9C6A;
  --f-ja: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Be Vietnam Pro", sans-serif;
  --f-kyo: "Klee One", "Zen Maru Gothic", "Hiragino Mincho ProN", serif;
  --gut: 16px; --sab: env(safe-area-inset-bottom, 0px); --sat: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
html, body { height: 100%; }
html, body { overflow-x: clip; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100%; background-color: var(--cream); color: var(--ink);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--sc) 14%, transparent) 2.5px, transparent 3px);
  background-size: 26px 26px; background-position: 13px 13px;
  font: 500 16px/1.65 var(--f-body); -webkit-text-size-adjust: 100%; touch-action: manipulation; overflow-wrap: break-word;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; line-height: 1.3; }
h1 { font: 800 22px/1.25 var(--f-disp); }
h2 { font: 800 19px/1.3 var(--f-disp); }
h3 { font: 700 16px/1.35 var(--f-body); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 10px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-2); } .small { font-size: 14px; } .center { text-align: center; }
[lang="ja"], .ja { font-family: var(--f-ja); }
[lang="vi"], .vn { font-family: var(--f-vn); }
.kyo { font-family: var(--f-kyo); font-weight: 600; }
.ro { font-family: var(--f-body); font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
ruby { ruby-align: center; }
rt { font-family: var(--f-ja); font-size: .5em; font-weight: 700; color: var(--ink-2); }
rt.rt-off { visibility: hidden; }
#app { min-height: 100%; position: relative; }
.wk { display: block; position: relative; }
.wk canvas, .av canvas { display: block; width: 100%; height: 100%; }
.av { width: 40px; height: 40px; border-radius: 50%; flex: none; position: relative; overflow: hidden; }
.av canvas { position: absolute; inset: 0; }
svg.ic { width: 22px; height: 22px; flex: none; vertical-align: middle; }
svg.star { width: 26px; height: 26px; fill: #F3EAD8; stroke: #EADCC2; stroke-width: 1; vertical-align: middle; }
svg.star.on { fill: var(--spark); stroke: #fff; stroke-width: 1.5; }
svg.lk { width: 18px; height: 18px; }

/* ---------- 入れ物 ---------- */
.scr { max-width: 720px; margin: 0 auto; padding: calc(12px + var(--sat)) var(--gut) calc(32px + var(--sab)); display: flex; flex-direction: column; gap: 16px; position: relative; }
.scr > * { min-width: 0; position: relative; z-index: 1; }
.scr.narrow { max-width: 520px; }
.has-tabbar { padding-bottom: calc(104px + var(--sab)); }
.card { background: var(--paper); border-radius: 24px; padding: 18px; box-shadow: var(--sh-s); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.center { justify-content: center; }
.grow { flex: 1; min-width: 0; }
.bg-deco { position: fixed !important; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 !important; }
.blob { position: absolute; border-radius: 50%; }
.blob.tr { width: 300px; height: 300px; right: -120px; top: -110px; background: var(--sl); }
.blob.bl { width: 200px; height: 200px; left: -80px; bottom: -70px; background: var(--yellow-l); }
.tbar { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.tbar h1 { flex: 1; min-width: 0; }
.tbar h1 .tsub { display: block; font: 700 13px/1.4 var(--f-body); color: var(--ink-2); }
.tbar .cnt { font: 800 18px var(--f-disp); color: var(--sd); }
.disp { font-family: var(--f-disp); font-weight: 800; }

/* ---------- ボタン ---------- */
.btn {
  --bc: var(--yellow); --bd: var(--yellow-d); --bt: var(--ink);
  appearance: none; border: 0; border-radius: 18px; background: var(--bc); color: var(--bt);
  min-height: 52px; padding: 10px 20px; font: 800 17px/1.25 var(--f-body);
  box-shadow: 0 5px 0 var(--bd); transition: transform .07s, box-shadow .07s, filter .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 5px; text-align: center;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--bd); }
.btn:disabled { filter: grayscale(.7) opacity(.5); cursor: default; }
.btn.big { min-height: 58px; font-size: 19px; border-radius: 20px; }
.btn.sc { --bc: var(--sc); --bd: var(--sd); --bt: var(--sc-ink); }
.btn.sub { --bc: #fff; --bd: var(--line); border: 2px solid var(--line); }
.btn.danger { --bc: #fff; --bd: #F0C9BF; --bt: var(--ng); border: 2px solid #F0C9BF; }
.btn.wide { width: 100%; }
.linkbtn { appearance: none; border: 0; background: none; color: var(--ink-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 8px; min-height: 44px; }
.ibtn { appearance: none; border: 2px solid var(--line); background: #fff; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 3px 0 var(--line); flex: none; }
.ibtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.chipb { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 999px; min-height: 42px; padding: 6px 14px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.chipb[aria-pressed="true"] { background: var(--sl); border-color: var(--sc); color: var(--sd); }
.chipb svg.ic { width: 18px; height: 18px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--sand); }
.seg button { appearance: none; border: 0; background: transparent; border-radius: 12px; min-height: 42px; padding: 6px 8px; font-weight: 700; font-size: 15px; color: var(--ink-2); }
.seg button[aria-selected="true"] { background: #fff; color: var(--sd); box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.seg.sm button { min-height: 38px; font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.field input, textarea.code { width: 100%; border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; font-size: 17px; }
.field input:focus, textarea.code:focus { border-color: var(--sc); outline: none; }
textarea.code { font: 500 13px/1.4 ui-monospace, monospace; resize: vertical; word-break: break-all; }
.lbl { display: block; font-weight: 700; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }

/* 読み上げボタン */
.say { appearance: none; border: 2px solid var(--line); background: #fff; color: var(--sd); width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; vertical-align: middle; flex: none; margin: 0 2px; box-shadow: 0 2px 0 var(--line); }
.say svg.ic { width: 20px; height: 20px; }
.say.big { width: 64px; height: 64px; border-width: 3px; border-color: var(--sc); background: var(--sl); }
.say.big svg.ic { width: 32px; height: 32px; }
.say.slow { color: var(--ink-2); }
.say.talking { background: var(--yellow-l); border-color: var(--sun); animation: talk .5s ease-in-out infinite alternate; }
@keyframes talk { to { transform: scale(1.08); } }

/* ---------- 下の タブ ---------- */
.tabbar { position: fixed; left: 50%; bottom: calc(10px + var(--sab)); transform: translateX(-50%); z-index: 30; display: flex; gap: 2px; background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 30%, #fff), var(--sh); width: min(440px, calc(100% - 24px)); }
.tabbar button { appearance: none; border: 0; background: none; flex: 1; min-width: 0; border-radius: 999px; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 11px; font-weight: 700; color: var(--ink-2); padding: 2px; }
.tabbar .ti { position: relative; display: grid; place-items: center; width: 40px; height: 32px; border-radius: 999px; }
.tabbar button[aria-current="page"] { color: var(--sd); }
.tabbar button[aria-current="page"] .ti { background: var(--sl); }
.tabbar small { font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.badge { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; display: grid; place-items: center; }

/* ---------- dialog・toast ---------- */
.dlg-wrap { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(58,44,37,.38); z-index: 50; }
.dlg { background: #fff; border-radius: 24px; padding: 20px; width: min(440px, 100%); max-height: calc(100% - 20px); overflow: auto; display: flex; flex-direction: column; gap: 14px; text-align: center; box-shadow: var(--sh); }
.dlg-wk { width: 84px; height: 84px; margin: 0 auto -6px; }
.dlg .row { justify-content: center; }
.toast { position: fixed; left: 50%; bottom: calc(96px + var(--sab)); transform: translateX(-50%) translateY(16px); opacity: 0; transition: .25s; background: var(--ink); color: #fff; border-radius: 16px; padding: 10px 18px; z-index: 60; font-weight: 700; font-size: 15px; max-width: calc(100% - 32px); text-align: center; pointer-events: none; }
.toast.on { opacity: 1; transform: translateX(-50%); }
canvas.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 55; }

/* ---------- はじめて ---------- */
.onboard { min-height: 100%; justify-content: center; }
.ob-card { padding: 24px 20px; gap: 16px; }
.ob-wk { width: 150px; height: 170px; margin: 0 auto; }
.ob-wk.sm { width: 96px; height: 110px; }
.lead { font-size: 17px; color: var(--ink-2); }
.brand { font: 700 14px var(--f-body); color: var(--ink-3); }
.nw { white-space: nowrap; }
.dots-step { display: flex; gap: 6px; justify-content: center; }
.dots-step i { width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width .2s; }
.dots-step i.on { background: var(--sc); width: 22px; }
.choice { display: grid; gap: 10px; text-align: left; }
.ch-card { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; box-shadow: 0 4px 0 var(--line); text-align: left; }
.ch-card > :first-child { grid-row: span 2; }
.ch-card .big { font-size: 34px; line-height: 1; color: var(--sd); width: 48px; text-align: center; }
.ch-card b { font-size: 17px; }
.ch-card small { color: var(--ink-2); font-size: 14px; }
.ch-card[aria-pressed="true"] { border-color: var(--sc); background: var(--sl); }
.ch-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.row-card svg.ic { width: 30px; height: 30px; }
.help { text-align: left; background: var(--yellow-l); border-radius: 16px; padding: 12px 14px; font-size: 14px; display: grid; gap: 6px; }

/* ---------- ホーム ---------- */
.hbar { display: flex; align-items: center; gap: 10px; }
.hbar .hi { font-size: 20px; }
.hbar .lv { display: inline-block; font: 800 12px var(--f-body); background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 8px; }
.chips-stat { display: flex; gap: 6px; }
.cs { display: inline-flex; align-items: center; gap: 4px; background: #fff; border-radius: 999px; padding: 4px 10px 4px 6px; box-shadow: var(--sh-s); font: 800 16px var(--f-disp); }
.hero { display: grid; grid-template-columns: 112px 1fr; gap: 6px 14px; align-items: end; padding: 16px 18px 18px; border: 3px solid var(--sc); background: linear-gradient(160deg, #fff 55%, var(--sl)); overflow: hidden; }
.hero-wk { width: 112px; height: 140px; margin-bottom: -18px; }
.hero-t { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.eyebrow { font: 700 12px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--sd); }
.hero h2 { font-size: 21px; }
.hero .btn { margin-top: 4px; }
.today { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.goal, .rev-card { background: #fff; border-radius: 20px; padding: 12px; box-shadow: var(--sh-s); display: flex; gap: 10px; align-items: center; min-width: 0; }
.goal b, .rev-card b { display: block; font-size: 14px; line-height: 1.3; }
.goal span, .rev-card span { font-size: 13px; color: var(--ink-2); }
.ring { width: 44px; height: 44px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--sand); stroke-width: 6; }
.ring circle.on { stroke: var(--sun); stroke-linecap: round; transition: stroke-dasharray .6s; }
.rev-card { appearance: none; border: 0; text-align: left; }
.rev-card svg.ic { width: 34px; height: 34px; color: var(--ink-3); padding: 6px; border-radius: 12px; background: var(--sand); flex: none; }
.rev-card.due svg.ic { color: #fff; background: var(--red); }
.foot-brand { text-align: center; font-size: 12px; color: var(--ink-3); }

/* 旅の ルート */
.journey { display: flex; flex-direction: column; gap: 22px; }
.chap-h { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 20px; padding: 12px 14px; box-shadow: var(--sh-s); border: 3px solid var(--sc); }
.chap-h h3 { font: 800 17px/1.3 var(--f-disp); }
.chap-h p { font-size: 13px; color: var(--ink-2); }
.chap-h > div { flex: 1; min-width: 0; }
.chip-lv { flex: none; background: var(--sc); color: var(--sc-ink); font: 800 15px var(--f-disp); border-radius: 12px; padding: 4px 10px; }
.chap-h .soon { font: 700 12px var(--f-body); color: var(--ink-3); }
.path { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.node { width: 100%; max-width: 420px; position: relative; }
.node button { appearance: none; border: 0; background: none; width: 100%; display: flex; align-items: center; gap: 12px; padding: 4px; text-align: left; min-height: 72px; }
.node.z1, .node.z3 { padding-left: 13%; } .node.z2 { padding-left: 26%; }
.nd { --pr: 0%; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 800 24px var(--f-disp); color: var(--sc-ink); background: var(--sc); box-shadow: 0 5px 0 var(--sd), 0 0 0 4px #fff, 0 0 0 7px var(--line); position: relative; }
.nd::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(var(--spark) var(--pr), transparent 0); -webkit-mask: radial-gradient(circle, transparent 35px, #000 36px); mask: radial-gradient(circle, transparent 35px, #000 36px); }
.nd svg.ic { width: 28px; height: 28px; }
.nd span[lang] { font-size: 28px; }
.node.done .nd { background: var(--sd); }
.node.lock .nd { background: #E9DFCF; color: var(--ink-3); box-shadow: 0 5px 0 #D5C7B0, 0 0 0 4px #fff, 0 0 0 7px var(--line); }
.node.soon .nd { width: 46px; height: 46px; font-size: 18px; margin: 0 9px; }
.node.soon .nd::after { display: none; }
.nl { display: flex; flex-direction: column; min-width: 0; }
.nl small { font-size: 13px; color: var(--ink-2); }
.nl b { font-size: 16px; line-height: 1.3; }
.nl em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.node.soon .nl b { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.node.cur .nd { width: 76px; height: 76px; animation: bob 1.6s ease-in-out infinite; }
.node.cur .nd::after { -webkit-mask: radial-gradient(circle, transparent 41px, #000 42px); mask: radial-gradient(circle, transparent 41px, #000 42px); }
.node-wk { position: absolute; width: 64px; height: 78px; right: 4px; top: -6px; pointer-events: none; }
@keyframes bob { 50% { transform: translateY(-4px); } }

/* ---------- 課 ---------- */
.u-hero { display: flex; flex-direction: column; gap: 12px; position: relative; border: 3px solid var(--sc); }
.u-place { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pl-ja { font: 700 26px/1.2 var(--f-ja); }
.pl-vi { color: var(--sd); font-weight: 700; }
.u-stamp { position: absolute; right: 10px; top: -14px; width: 86px; }
.u-talk { display: flex; gap: 10px; align-items: flex-end; }
.u-wk { width: 76px; height: 96px; flex: none; }
.bubble { position: relative; background: var(--sl); border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: 15px; }
.u-meter { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.meter { flex: 1; height: 12px; border-radius: 6px; background: var(--sand); overflow: hidden; min-width: 40px; }
.meter i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--sc), var(--spark)); }
.u-g { font-size: 14px; }
.lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ls { appearance: none; width: 100%; border: 2px solid var(--line); background: #fff; border-radius: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-align: left; box-shadow: 0 4px 0 var(--line); min-height: 68px; }
.ls:active:not(.lock) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.ls-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sl); color: var(--sd); flex: none; }
.ls-ic svg.ic { width: 26px; height: 26px; }
.ls-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ls-t small { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.ls-t b { font-size: 16px; line-height: 1.35; }
.ls-s { flex: none; display: flex; }
.ls-s svg.star { width: 20px; height: 20px; }
.ls.next { border-color: var(--sc); box-shadow: 0 4px 0 var(--sd); }
.ls.done .ls-ic { background: var(--sc); color: var(--sc-ink); }
.ls.lock { opacity: .55; }
.ls.lock .ls-ic { background: var(--sand); color: var(--ink-3); }
.go-chip { background: var(--sc); color: var(--sc-ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 800; }

/* ---------- レッスン ---------- */
.play { min-height: 100%; height: calc(100dvh - var(--app-top, 0px)); display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; }
.play-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--sat)) var(--gut) 8px; }
.play-top .bar { flex: 1; height: 16px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--line); overflow: hidden; }
.play-top .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sc), var(--spark)); border-radius: 8px; transition: width .35s; }
.combo { font: 800 14px var(--f-disp); color: var(--sd); min-width: 0; white-space: nowrap; opacity: 0; transition: .2s; }
.combo.on { opacity: 1; }
.play-body { flex: 1; overflow-y: auto; padding: 8px var(--gut) 16px; display: flex; flex-direction: column; }
.play-body > * { margin: auto 0; }
.play-foot { padding: 12px var(--gut) calc(14px + var(--sab)); display: flex; flex-direction: column; gap: 8px; }
.play-foot.fb { border-radius: 24px 24px 0 0; padding-top: 14px; animation: up .2s ease-out; }
.play-foot.fb.ok { background: var(--ok-l); }
.play-foot.fb.ng { background: var(--ng-l); }
.play-foot.fb.ok .btn { --bc: var(--ok); --bd: #1D7049; --bt: #fff; }
.play-foot.fb.ng .btn { --bc: var(--ng); --bd: #A33424; --bt: #fff; }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.fb-row { display: flex; gap: 10px; align-items: flex-start; }
.fb-wk { width: 46px; height: 46px; background: #fff; }
.fb-t { flex: 1; min-width: 0; }
.fb-t > b { font: 800 19px var(--f-disp); }
.fb.ok .fb-t > b { color: var(--ok); } .fb.ng .fb-t > b { color: var(--ng); }
.fb-ex { font-size: 15px; line-height: 1.55; }
.fb-ex .say { width: 34px; height: 34px; }

.learn { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; border: 3px solid var(--sc); }
.tag { align-self: center; background: var(--sl); color: var(--sd); font-weight: 800; font-size: 13px; border-radius: 999px; padding: 3px 12px; }
.kana-main { display: flex; align-items: center; gap: 18px; justify-content: center; }
.kbig { font-size: 120px; line-height: 1.05; color: var(--ink); }
.kmeta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ro.big { font: 800 30px var(--f-body); color: var(--sd); }
.tip { background: var(--yellow-l); border-radius: 14px; padding: 8px 12px; font-size: 15px; text-align: left; width: 100%; }
.mini-wr { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mini-wr .wr-host { width: 150px; }
.wr-host { width: min(300px, 78vw); }
.wr-host.big { width: min(330px, 84vw, 46vh); }
.wr-host.mid { width: 170px; flex: none; }
.wr-board { position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 3px #F0E2C6; }
.wr-board.shake { animation: shake .32s; }
.wr-board.ok { box-shadow: inset 0 0 0 4px var(--ok); }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.wr-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.wr-grid rect { fill: none; stroke: #E2B98E; stroke-width: 1; }
.wr-grid line { stroke: #E2B98E; stroke-width: .6; stroke-dasharray: 2 2; }
.wr-ghost path, .wr-done path, .wr-fx path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wr-ghost path { stroke: #E6DDCD; stroke-width: 7.5; }
.wr-ghost.free path { stroke: #F4EFE6; }
.wr-ghost.watch path { stroke: #F1EBE0; }
.wr-ghost path.now { stroke: #FFCFA6; }
.wr-done path, .wr-fx path { stroke: #2B2420; stroke-width: 6; }
.wr-fx path.demo { stroke: var(--red); opacity: .85; }
.wr-nums text { font: 700 7px var(--f-ja); fill: var(--red); }
.wr-hint .pulse { fill: var(--red); transform-box: fill-box; transform-origin: center; animation: pulse 1.2s ease-in-out infinite; }
.wr-hint text { font: 800 6.5px var(--f-body); fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.wr-hint .arrow { fill: var(--red); opacity: .8; }
@keyframes pulse { 50% { transform: scale(1.25); } }
.wr-ink { fill: none; stroke: #2B2420; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.wr-ink.ng { stroke: var(--red); opacity: 0; transition: opacity .45s; }
.wr-msg { min-height: 1.6em; font-weight: 700; color: var(--ink-2); font-size: 15px; }
.wr-msg.ng { color: var(--ng); } .wr-msg.ok { color: var(--ok); }
.write-head { display: flex; align-items: center; gap: 12px; justify-content: center; }
.write-head .kch { font-size: 44px; line-height: 1; }
.write-head .ro { font-size: 20px; }
.krow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kcell { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 16px; width: 76px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 3px 0 var(--line); }
.kcell .kch { font-size: 40px; line-height: 1.15; }
.kcell .ro { font-size: 14px; }
.wlist { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: 8px; }
.wl { appearance: none; width: 100%; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 8px 12px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; }
.wl .ja.big { font-size: 26px; grid-row: span 2; }
.wl .ro { font-size: 13px; } .wl .vi { font-size: 15px; font-weight: 600; }
.wl svg.ic { grid-row: 1 / span 2; grid-column: 3; color: var(--sd); }
.w-main { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; font-size: 40px; line-height: 1.5; }
.w-main .say.big { width: 56px; height: 56px; }
.kana-read { font-size: 18px; color: var(--ink-2); }
.w-vi { font-size: 20px; font-weight: 700; color: var(--sd); }
.ex { width: 100%; background: var(--cream); border-radius: 14px; padding: 10px 12px; text-align: left; }
.ex-ja { font-size: 19px; line-height: 1.9; }
.ex-vi { font-size: 15px; color: var(--ink-2); }
.ex-ja .say { width: 34px; height: 34px; }
.kj-top { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: left; }
.hv { font: 800 26px var(--f-disp); color: var(--sd); letter-spacing: .04em; }
.yomi { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 15px; }
.yomi dt { color: var(--ink-2); font-weight: 600; } .yomi dd { margin: 0; }
.kj-ex { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: 6px; }
.kj-ex li { display: flex; align-items: center; gap: 10px; background: var(--cream); border-radius: 12px; padding: 6px 10px; text-align: left; }
.kj-ex .ja-w { font-size: 22px; min-width: 4.5em; } .kj-ex .vi { flex: 1; font-size: 15px; }
.g-p { font: 700 24px/1.4 var(--f-ja); }
.g-exp { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--yellow-l); border-radius: 16px; padding: 10px 12px; }
.g-wk { width: 44px; height: 44px; background: #fff; }
.g-ex { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; width: 100%; text-align: left; }
.g-ex li { background: var(--cream); border-radius: 14px; padding: 8px 12px; }
.dlg-card .row { justify-content: center; }
.talk { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.talk li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who who" "bub say"; gap: 2px 6px; align-items: end; }
.talk .who { grid-area: who; font-size: 13px; color: var(--ink-2); }
.talk .bub { grid-area: bub; background: var(--cream); border-radius: 4px 16px 16px 16px; padding: 8px 12px; font-size: 18px; line-height: 1.85; }
.talk .bub .vi { font: 500 14px/1.5 var(--f-body); color: var(--ink-2); }
.talk .say { grid-area: say; }
.talk li.me .bub { background: var(--sl); border-radius: 16px 4px 16px 16px; }
.talk li.now .bub { box-shadow: 0 0 0 3px var(--sun); }
.note-card { text-align: left; align-items: stretch; }
.note-card h2 { text-align: center; }
.note-wk { width: 110px; height: 130px; margin: 0 auto; }
.note-demo { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.note-demo span { font-size: 22px; background: var(--cream); border-radius: 12px; padding: 4px 12px; white-space: nowrap; }
.note-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.note-cards > div { background: var(--cream); border-radius: 16px; padding: 8px 4px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
.note-cards .kyo { font-size: 44px; line-height: 1.2; color: var(--sd); }
.note-cards b { font-size: 15px; } .note-cards small { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }

/* 問題 */
.q { display: flex; flex-direction: column; gap: 14px; }
.ask { font-weight: 700; color: var(--ink-2); text-align: center; }
.q-prompt { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-height: 60px; justify-content: center; }
.q-big { font-size: 96px; line-height: 1.1; }
.q-big.ro { font: 800 56px var(--f-body); color: var(--sd); }
.q-vi { font: 700 21px/1.4 var(--f-body); background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: var(--sh-s); text-align: center; }
.q-ja { font-size: 32px; line-height: 1.7; display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.q-ja.sent { font-size: 22px; background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: var(--sh-s); }
.q-sub { font-size: 15px; color: var(--ink-2); }
.q-who { font-size: 14px; color: var(--ink-2); }
.opts { display: grid; gap: 10px; }
.opts.grid { grid-template-columns: 1fr 1fr; }
.opt { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 18px; min-height: 58px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; text-align: left; box-shadow: 0 4px 0 var(--line); font-size: 17px; font-weight: 600; transition: background .15s, border-color .15s; }
.opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.opts.grid .opt { justify-content: center; text-align: center; min-height: 76px; }
.okey { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; font-size: 13px; color: var(--ink-3); font-weight: 700; }
.opts.grid .okey { display: none; }
.otx { flex: 1; min-width: 0; line-height: 1.45; }
.opt .kch { font-size: 40px; line-height: 1.1; }
.opt .ja { font-size: 20px; }
.opt.right { background: var(--ok-l); border-color: var(--ok); box-shadow: 0 4px 0 var(--ok); }
.opt.wrong { background: var(--ng-l); border-color: var(--ng); box-shadow: 0 4px 0 var(--ng); animation: shake .3s; }
.opt:disabled { cursor: default; }
.opt b.hv { color: var(--sd); }
.ans { min-height: 70px; border-bottom: 3px dashed var(--line); padding: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ans.right { border-color: var(--ok); } .ans.wrong { border-color: var(--ng); }
.ans-ph { color: var(--ink-3); font-size: 14px; }
.bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 60px; }
.tile { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 6px 12px; font-size: 20px; line-height: 1.8; box-shadow: 0 3px 0 var(--line); min-height: 48px; }
.tile:disabled { opacity: .25; box-shadow: none; }
.tile.on { border-color: var(--sc); }
.ans .tile:disabled { opacity: 1; }

/* ---------- ゲーム ---------- */
.gm-t { flex: 1; font-size: 18px; min-width: 0; }
.gm-stat { font: 800 18px var(--f-disp); color: var(--sd); white-space: nowrap; }
.gm-stat .dim { opacity: .2; }
.gm-intro { border: 3px solid var(--sc); }
.gm-wk { width: 120px; height: 140px; margin: 0 auto; }
.cd { font: 800 120px var(--f-disp); color: var(--sd); text-align: center; animation: cd .6s ease-out; }
@keyframes cd { from { transform: scale(1.6); opacity: 0; } }
.rain { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.sky { position: relative; flex: 1; min-height: 300px; height: calc(100dvh - var(--app-top, 0px) - 330px); border-radius: 24px; background: linear-gradient(180deg, var(--sl), #fff); overflow: hidden; box-shadow: inset 0 0 0 3px var(--line); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: repeating-linear-gradient(90deg, var(--leaf) 0 18px, #9BDDBC 18px 36px); }
.drop { position: absolute; top: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 4px var(--sc), var(--sh-s); font-size: 46px; line-height: 1; }
.drop.pop { animation: popx .28s ease-out forwards; }
.drop.miss { box-shadow: 0 0 0 4px var(--ng); flex-direction: column; font-size: 34px; }
.drop small { font-size: 14px; }
@keyframes popx { to { transform: scale(1.6); opacity: 0; } }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcol { display: flex; flex-direction: column; gap: 10px; }
.mt { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 16px; min-height: 64px; padding: 8px 10px; font-size: 15px; font-weight: 600; box-shadow: 0 4px 0 var(--line); line-height: 1.35; }
.mt.ja-t { font-size: 19px; }
.mt.sel { border-color: var(--sc); background: var(--sl); }
.mt.gone { opacity: 0; transform: scale(.9); transition: .3s; pointer-events: none; }
.mt.shake { animation: shake .3s; border-color: var(--ng); }
.pr-ex { text-align: center; min-height: 1.6em; font-size: 18px; }

/* ---------- けっか ---------- */
.result { min-height: 100%; justify-content: center; }
.res-card { padding: 22px 18px; border: 3px solid var(--sc); }
.res-wk { width: 140px; height: 160px; margin: 0 auto; }
.res-stars { display: flex; gap: 6px; justify-content: center; }
.res-stars svg.star { width: 52px; height: 52px; }
.res-stars svg.star.on { animation: starIn .45s var(--poyon, cubic-bezier(.2,1.4,.4,1)) both; }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } }
.res-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.res-nums > div { background: var(--cream); border-radius: 16px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.res-nums b { font: 800 22px var(--f-disp); }
.res-nums small { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.res-btns { width: 100%; gap: 8px; }
.lvup { font: 800 18px var(--f-disp); color: var(--sd); background: var(--yellow-l); border-radius: 14px; padding: 6px 12px; }
.weak { width: 100%; text-align: left; background: var(--cream); border-radius: 16px; padding: 10px 14px; }
.weak ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.stamp-drop { width: 150px; margin: 0 auto; animation: stampIn .7s cubic-bezier(.3,1.5,.5,1) both .15s; }
@keyframes stampIn { 0% { transform: scale(2.4) rotate(-20deg); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } }

/* ---------- ふくしゅう ---------- */
.rv-main { border: 3px solid var(--sc); }
.rv-wk { width: 80px; height: 96px; flex: none; }
.mbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mbars li { display: grid; grid-template-columns: auto 6.5em 1fr 2.5em; gap: 8px; align-items: center; font-size: 14px; }
.mbars b { text-align: right; }
.mdots { display: inline-flex; gap: 3px; flex: none; }
.mdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); }
.mdots.m1 i.on { background: #F7B9A6; } .mdots.m2 i.on { background: var(--sun); } .mdots.m3 i.on { background: var(--leaf); } .mdots.m4 i.on { background: var(--ok); }

/* ---------- ノート ---------- */
.kgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.kgrid.y { grid-template-columns: repeat(3, 1fr); }
.kc { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 14px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 2px; }
.kgrid.y .kc { aspect-ratio: auto; min-height: 64px; }
.kc .kyo { font-size: clamp(22px, 7vw, 34px); line-height: 1.1; }
.kc small { font-size: 11px; }
.kc.empty { border: 0; background: none; }
.kc.m1 { background: #FFF1EB; } .kc.m2 { background: #FFF6D6; } .kc.m3 { background: #EAF7F0; } .kc.m4 { background: #D6F0E2; border-color: var(--leaf); }
.book h3 { margin-top: 8px; }
.wgroup { background: #fff; border-radius: 18px; box-shadow: var(--sh-s); padding: 4px 14px; margin-bottom: 10px; }
.wgroup summary { cursor: pointer; padding: 10px 0; font-size: 15px; list-style-position: outside; }
.wtable { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.wtable li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--cream-2); }
.wtx { display: flex; flex-direction: column; min-width: 0; }
.wtable .wj { font-size: 19px; line-height: 1.75; } .wtable .wv { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.wtable .say { width: 34px; height: 34px; }
.search input { font-size: 16px; }
.kjgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.kj { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 16px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 3px 0 var(--line); }
.kj .kyo { font-size: 36px; line-height: 1.15; } .kj small { font-size: 11px; font-weight: 700; color: var(--sd); }
.kj:disabled { opacity: .35; }
.kj.m3, .kj.m4 { border-color: var(--leaf); }
.gitem { border-top: 1px solid var(--cream-2); padding: 10px 0; display: grid; gap: 6px; }
.gitem h4 { font-size: 19px; }
.sheet { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: left; }
.sheet .wr-host.mid { width: min(220px, 64vw); }

/* ---------- スタンプ ---------- */
.st-ch h2 { margin-bottom: 10px; }
.stgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 8px; }
.st-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.st-cell small { font-size: 11px; line-height: 1.3; color: var(--ink-2); }
svg.stamp { width: 100%; max-width: 92px; display: block; overflow: visible; }
.stamp .s-o { fill: none; stroke: var(--st); stroke-width: 4; }
.stamp .s-i { fill: none; stroke: var(--st); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.stamp .s-t { fill: var(--st); font-family: var(--f-ja); font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.stamp .s-s { fill: var(--st); font-family: var(--f-body); font-weight: 800; text-anchor: middle; letter-spacing: .08em; }
.stamp:not(.on) { opacity: .55; }
.stamp:not(.on) .s-o { stroke-dasharray: 5 4; }
.stamp.on { filter: drop-shadow(0 1px 0 rgba(0,0,0,.06)); }

/* ---------- せってい ---------- */
.settings .card h2 { font-size: 17px; }
.about p { font-size: 14px; }


/* ============ ベトナム語アプリで 足したもの ============ */
.vn { font-weight: 600; }
.nw { white-space: nowrap; }
/* 声調の 線：音節の 上に 小さく（色＝声調） */
/* 10/23 リリース前点検 5-5：tổng・phẩm・Ẫ など 上の記号が 2つ重なる字に 線が かぶっていた → 線の下に すきま（padding-top .62em・線の高さ .48em） */
.vn.tl { line-height: 2; }
.vn.tl .sy { display: inline-block; position: relative; padding-top: .62em; line-height: 1.25; }
.vn.tl .sy::before { content: ''; position: absolute; left: 50%; top: 0; width: 1.05em; height: .48em; transform: translateX(-50%); background: no-repeat center / contain; pointer-events: none; }
.tc { display: inline-block; width: 30px; height: 18px; background: no-repeat center / contain; flex: none; vertical-align: middle; }
.tc.big { width: 54px; height: 32px; }
.vn.tl .sy.t-ngang::before, .tc.t-ngang { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2,5 L22,5' fill='none' stroke='%237A6555' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vn.tl .sy.t-huyen::before, .tc.t-huyen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2,5 C9,6 15,9 22,12' fill='none' stroke='%230074B3' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vn.tl .sy.t-sac::before, .tc.t-sac { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2,9 C10,9 15,6 22,1.6' fill='none' stroke='%23E5533D' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vn.tl .sy.t-hoi::before, .tc.t-hoi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2,5 C6,10 10,12.6 13.5,12.6 C17,12.6 20,10 22,7.5' fill='none' stroke='%238B63D0' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vn.tl .sy.t-nga::before, .tc.t-nga { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2,7.4 L9.5,6 M13,5 L22,1.6' fill='none' stroke='%23D98200' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vn.tl .sy.t-nang::before, .tc.t-nang { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2,6 C5,7.5 8,10 10.5,12.8' fill='none' stroke='%232F9C6A' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.kata { font: 700 15px/1.4 var(--f-ja); color: var(--ink-3); letter-spacing: .04em; }
.kata.big { font-size: 20px; color: var(--ink-2); }
.presents { font: 800 13px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--sd); background: var(--sl); border-radius: 999px; padding: 6px 14px; align-self: center; }
.ob-title { font-size: 30px; }
.ob-title .nw { color: var(--sd); }
.lbig { font: 700 112px/1.05 var(--f-vn); color: var(--ink); }
.lbig.sm { font-size: 56px; }
.tbig { font: 700 88px/1 var(--f-vn); color: var(--sd); }
.tbig.sm { font-size: 48px; }
.l-d { font-size: 17px; font-weight: 700; }
.lch { font-size: 26px; font-weight: 700; }
.opts.grid .lch { font-size: 28px; }
.topt { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.25; }
.topt .tc { width: 40px; height: 22px; margin-bottom: 2px; }
.topt .vn { font-size: 18px; font-weight: 700; }
.topt small { font-size: 12px; color: var(--ink-2); }
.q-big.vn { font-size: 76px; line-height: 1.15; font-weight: 700; }
.q-big.kyo { font-size: 84px; }
.q-vn { font: 700 30px/1.6 var(--f-vn); display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.q-vn.sent { font-size: 22px; background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: var(--sh-s); }
.q-jp { font: 700 21px/1.5 var(--f-body); background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: var(--sh-s); text-align: center; }
.q-tones { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border-radius: 18px; padding: 12px 16px; box-shadow: var(--sh-s); }
.q-tones small { color: var(--ink-2); font-weight: 700; }
.tline { display: flex; gap: 14px; }
.opt .vn { font-size: 18px; }
.w-main { font-family: var(--f-vn); font-weight: 700; }
.w-main .vn.tl { line-height: 1.5; }
.ex-vn { font-size: 19px; line-height: 1.8; }
.ex-ja { font-size: 15px; color: var(--ink-2); }
.ex-vn .say { width: 34px; height: 34px; }
.vw { font-size: 20px; min-width: 5em; } .ja-s { flex: 1; font-size: 15px; color: var(--ink-2); }
.hv-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hv-c { display: flex; flex-direction: column; align-items: center; background: var(--cream); border-radius: 18px; padding: 8px 14px 10px; min-width: 96px; }
.hvk { font-size: 64px; line-height: 1.15; }
.hv-c .hv { font-size: 22px; } .hv-c small { font-size: 12px; color: var(--ink-3); }
.hv { font-family: var(--f-vn); }
.nc { font-size: 30px; line-height: 1.25; color: var(--sd); font-weight: 700; }
.note-cards b { font-size: 14px; }
.note-demo .nd-say { appearance: none; border: 2px solid var(--line); background: var(--cream); border-radius: 12px; padding: 2px 12px; font-size: 22px; box-shadow: 0 2px 0 var(--line); }
.wl .vbig { font-size: 24px; grid-row: span 2; }
.wl .kata { font-size: 12px; } .wl .ja-s { font-size: 15px; font-weight: 600; color: var(--ink); }
.wlist .wl { grid-template-columns: minmax(5.5em, auto) 1fr auto; }
.wr-grid.tone line { stroke: #EBD8BC; stroke-width: .7; stroke-dasharray: 2 2; }
.wr-grid.tone .wr-lv { font: 700 6px var(--f-ja); fill: #C9A77A; }
.wr-grid.tone .wr-time { fill: none; stroke: #D9C3A2; stroke-width: 1; }
.wr-ghost path { stroke-width: 8.5; }
.drop.vn { width: auto; min-width: 76px; height: 64px; border-radius: 32px; padding: 0 16px; font-size: 30px; font-weight: 700; white-space: nowrap; }
.drop.vn.miss { height: auto; padding: 6px 14px; font-size: 24px; }
.drop.vn small { font: 700 13px var(--f-body); }
.rain .opt { min-height: 64px; }
.mt.vn-t { font-size: 18px; }
.tgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tcell { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 0; box-shadow: 0 3px 0 var(--line); min-width: 0; }
.tcell .tc { width: 28px; height: 16px; } .tcell > span.vn { font-size: 24px; line-height: 1.2; } .tcell > small.vn { font-size: 11px; line-height: 1.2; font-weight: 700; color: var(--ink-2); }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.lc { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 14px; min-height: 66px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 3px 0 var(--line); }
.lc .vn { font-size: 24px; line-height: 1.15; font-weight: 700; } .lc small { font-size: 10.5px; color: var(--ink-2); line-height: 1.25; text-align: center; }
.lc.m1, .tcell.m1 { background: #FFF1EB; } .lc.m2, .tcell.m2 { background: #FFF6D6; } .lc.m3, .tcell.m3 { background: #EAF7F0; } .lc.m4, .tcell.m4 { background: #D6F0E2; border-color: var(--leaf); }
.hvgrid .kj small { font-size: 11px; font-weight: 600; }
.wtable .wj { font-size: 19px; line-height: 1.6; }
.talk .bub .ja-s { font: 500 14px/1.5 var(--f-body); color: var(--ink-2); display: block; }
.talk .who small { color: var(--ink-3); }
.g-p { font: 700 24px/1.5 var(--f-vn); }
.gitem h4 { font-size: 19px; }
.pl-ja { font: 800 26px/1.2 var(--f-body); }
.hbar .hi .vn { font-weight: 700; }
.tone-card .kj-top { flex-wrap: nowrap; gap: 12px; }
.tone-card .wr-host.mid { width: min(150px, 40vw); }
.tone-card .kj-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.tone-card .tbig { font-size: 64px; }
.tone-card .hv { font-size: 21px; letter-spacing: 0; }
.tone-card .kj-ex li { padding: 4px 10px; }
.tone-card { gap: 8px; }
/* 声調の カーブは 声調の 色で */
.wr-board[data-tone] .wr-done path, .wr-board[data-tone] .wr-fx path.watch { stroke: var(--tcol); }
.book .seg button { font-size: 14px; padding: 6px 4px; }
@media (max-width: 370px) { .tgrid { grid-template-columns: repeat(3, 1fr); } .lbig { font-size: 92px; } }

@media (min-width: 700px) {
  .hero { grid-template-columns: 150px 1fr; }
  .hero-wk { width: 150px; height: 180px; }
  .kbig { font-size: 140px; }
  .opts:not(.grid) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 370px) {
  .today { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 84px 1fr; }
  .hero-wk { width: 84px; height: 110px; }
  .res-nums b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== 2026-10-23 夜 見本 C（会員専用ページと 同じ作法）：はじめの画面＝A の見出し（ふだ・大きな題・マーカー）、ホーム＝B（HUD の札・教科の色のバナー・白い立体ボタン・線の影の カード） ===== */
.presents { background: #fff; border: 1.5px solid #F6C3D4; color: var(--sd); font-weight: 900; letter-spacing: .08em; text-transform: none; }
.ob-card.ob-first { background: transparent; box-shadow: none; padding: 8px 4px 0; }
.ob-title { font-size: 36px; line-height: 1.2; letter-spacing: -.01em; }
.ob-title .nw { color: var(--ink); background: linear-gradient(transparent 58%, var(--marker) 58%); padding: 0 .08em; }
.ob-first .lead { font-size: 16px; line-height: 1.75; }
.ob-first .btn.big { min-height: 60px; font-size: 20px; border-radius: 999px; width: 100%; max-width: 360px; }
.hbar .av { width: 48px; height: 48px; border: 3px solid var(--yellow); box-shadow: 0 3px 0 var(--yellow-d); background: #fff; }
.hbar .hi { font-size: 22px; }
.cs { border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); font-size: 15px; padding: 4px 12px 4px 8px; }
.card.hero { grid-template-columns: minmax(0, 1fr) 124px; align-items: end; padding: 20px 18px 18px 20px; border: 0; border-radius: 28px; color: #fff; background: linear-gradient(135deg, var(--sc), color-mix(in srgb, var(--sc) 62%, #fff)); box-shadow: 0 8px 0 var(--sd); overflow: visible; }
.card.hero .hero-wk { order: 2; width: 124px; height: 154px; margin: 0 -6px -24px 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .18)); }
.card.hero .hero-t { order: 1; }
.card.hero .eyebrow { color: rgba(255, 255, 255, .92); }
.card.hero h2 { color: #fff; font-size: 26px; line-height: 1.2; text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.card.hero .muted { color: rgba(255, 255, 255, .92); }
.card.hero .btn.sc { --bc: #fff; --bd: rgba(0, 0, 0, .18); --bt: var(--sd); border-radius: 999px; min-height: 52px; }
.goal, .rev-card, .play-card { border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); border-radius: 22px; }

/* ===== 2026-10-24 全面チェック（リリース前の 直し・ベトナム語）ここから ===== */
/* A-6c（V-3）：見出し・ふきだし・札で ことばの 途中で 折れていた → わかち書きの 空白で 折る（1行に 入らない ときだけ 途中で） */
.hero h2, .hero .eyebrow, .hero .muted, .goal b, .rev-card b, .rev-card span, .bubble, .note-cards, .note-card p, .nl b, .nl em, .ls-t b, .ls-t small, .chap-h h3, .chap-h p, .tbar h1, .pl-ja, .u-g, .lead, .ask, .l-d, .tip, .w-vi, .g-exp p, .help, .ch-card b, .ch-card small, .res-card p, .rv-main p, .fb-t { word-break: keep-all; overflow-wrap: anywhere; }
/* A-6a（えいご #2 と 同じ）：あいさつの ベトナム語（xin chào!）は 途中で 折らない */
.hbar .hi .vn { white-space: nowrap; }
/* A-6c：3つ ならぶ 説明カードの 札は スマホでは 2列（あまった 1つは 横いっぱい） */
@media (max-width: 480px) { .note-cards { grid-template-columns: 1fr 1fr; } .note-cards > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* B-10（V-4）：🔊 と 切りかえの ボタンを 44px に（押す ところは 44px 以上の 決まり） */
.say { width: 44px; height: 44px; }
.ex-vn .say, .ex-ja .say, .fb-ex .say, .wtable .say { width: 44px; height: 44px; }
.seg.sm button { min-height: 44px; }
/* B-3：Lv の「つぎまで あと」・もくひょう たっせい・つづけた日の ひとこと・けっかの おいわい */
.lvrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-next { font: 700 12px/1.3 var(--f-body); color: var(--ink-2); white-space: nowrap; }
.goal .goal-ok { display: block; font: 800 12px var(--f-disp); color: var(--ok); font-style: normal; }
.streak-cheer { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); border-radius: 18px; padding: 10px 14px; font-weight: 800; font-size: 15px; word-break: keep-all; overflow-wrap: anywhere; }
.streak-cheer svg.ic { width: 26px; height: 26px; }
.res-card .cheer { display: inline-flex; align-items: center; gap: 6px; font: 800 17px var(--f-disp); color: var(--sd); background: var(--yellow-l); border-radius: 14px; padding: 6px 12px; }
.res-card .cheer svg.ic { width: 24px; height: 24px; }
.res-card .cheer .av { width: 36px; height: 36px; background: #fff; }   /* 2026-10-24 全面チェック B-3：たっせいの わくまの 顔 */
/* A-7a・A-7b：おうちの人の かくにん（3秒 ながおし ＋ 2けた×2けた の かけ算） */
.pg { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.pg-lead { font-size: 15px; word-break: keep-all; overflow-wrap: anywhere; }
.pg-hold { appearance: none; position: relative; overflow: hidden; border: 2px solid var(--line); background: #fff; border-radius: 18px; min-height: 56px; padding: 10px 16px; font: 800 16px var(--f-body); color: var(--ink); box-shadow: 0 4px 0 var(--line); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pg-hold i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--yellow-l); }
.pg-hold span { position: relative; }
.pg-math { display: flex; flex-direction: column; gap: 8px; }
.pg-q { font: 800 28px var(--f-disp); color: var(--sd); }
.pg-in { width: 120px; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; font: 700 20px var(--f-disp); text-align: center; background: #fff; }
.pg-in:focus { border-color: var(--sc); outline: none; }
.pg-msg { min-height: 1.4em; font-weight: 700; color: var(--ng); }
/* A-6e（えいごと 同じ）：小さい iPhone（375×667）で カードが 下の ボタンに かくれた → 380 以下は 大きな 字を 小さく／下に つづきが あるときの 合図（player.js の moreHint が .more を つける） */
@media (max-width: 380px) { .lbig { font-size: 88px; } .tone-card .tbig { font-size: 52px; } }
/*   合図は ボタンの 上に うかぶ 小さな 札（足もとの 高さを とらない＝見える ところが へらない。おせない＝下の カードを さわれる） */
.play-foot.more { position: relative; }
.play-foot.more::before { content: '▼ 下に つづきが あるよ'; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); white-space: nowrap; pointer-events: none; z-index: 2; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 3px 12px; box-shadow: 0 2px 0 var(--line); font: 700 12px/1.3 var(--f-body); color: var(--ink-2); }
/* ===== 2026-10-24 全面チェック ここまで ===== */

/* ===== 2026-10-25 デザイン点検（ベトナム語・v0.2.1）ここから ===== */
/* A-1：おわった 課の スタンプが 地名（Trên máy bay・Vịnh Hạ Long）に かさなった → 小さく して カードの 右上の すみへ・地名に スタンプの ぶんの 右の 余白 */
.u-stamp { width: 62px; top: -22px; right: -6px; pointer-events: none; }
.u-hero.has-stamp .u-place { padding-right: 58px; }
.pl-vi { word-break: keep-all; }
/* A-3：日本語の 訳・選択肢・お題・答え・見出しが ことばの 途中で 折れた → わかち書きの 空白で 折る（1行に 入らない ときだけ 途中で） */
.talk .bub .ja-s, .otx, .q-jp, .q-sub, .ex-ja, .weak li, .rv-main h2, .hbar .hi, .ob-title, .drop small, .mt, .pr-ex, .kj-ex .ja-s, .wtable .wv, .gitem p, .w-vi, .ask, .gm-intro h2, .gm-intro p, .res-card h1, .st-cell small, .dlg p, .toast, .ans-ph { word-break: keep-all; overflow-wrap: anywhere; }
/*   名前＋「さん、」は ひとかたまり（長い 名前は 中で 折れる） */
.hbar .hi .hi-name { display: inline-block; max-width: 100%; }
/*   ベトナム語：音節と うしろの「?」「,」（前の「«」など）を 折らない（vn.js の html() が .syw で つつむ） */
.syw { white-space: nowrap; }
/*   はじめの 題「わくま／の ベトナム語」（360）：せまい 画面は 少し 小さく */
@media (max-width: 370px) { .ob-title { font-size: 32px; } }
/* A-4：ノートの タブ・会話の「ぜんぶ 聞く」「日本語」が 42px → 44px */
.seg button { min-height: 44px; }
.chipb { min-height: 44px; }
/* B：まちがいの 帯で ことばの 上の 声調の 線が 上の 行（こたえ：…）に かさなって 下線に 見えた → 線の 上に すきま */
.fb-ex .vn.tl .sy { margin-top: .4em; }
/* B：「▼ 下に つづきが あるよ」の 札が 文や 🔊 に かさなった → 札の うしろを クリーム色で ぼかし（下の 文が うすく なり、札だけ 読める）。高さは かわらない */
.play-foot.more::after { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 44px; pointer-events: none; z-index: 1; background: linear-gradient(to bottom, rgba(255, 248, 234, 0), var(--cream) 78%); }
/* B：ノートの 文字カードの 説明が 10.5px で「ア（口を小さ／く）」と 折れた → 12px・カードを 少し 広く（360 でも 3列） */
.lgrid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.lc small { font-size: 12px; word-break: keep-all; overflow-wrap: anywhere; }
/* B：スタンプ帳の まだの スタンプが うすすぎて 名前が 読めない → 丸の 線は うすい まま、名前の 字だけ こく */
.stamp:not(.on) { opacity: 1; }
.stamp:not(.on) .s-o, .stamp:not(.on) .s-i { opacity: .55; }
.stamp:not(.on) .s-t, .stamp:not(.on) .s-s { fill: var(--ink-3); }
.st-cell small { font-size: 12px; }
/* B：PC で 選択肢が 3つ（奇数）の とき 2列で 1つだけ 下に 残った → 1列（player.js が .odd を つける） */
@media (min-width: 700px) { .opts.odd:not(.grid) { grid-template-columns: 1fr; } }
/* A-12：ぜんぶ おわった ときの「ふくしゅう」ボタン（360 で 2行に ならない） */
.card.hero #h-rev2 { padding-left: 14px; padding-right: 12px; white-space: nowrap; }
.card.hero h2.h-clear { font-size: 23px; }
/* A-3：360 で ノートの タブ「文字・声／調」と 折れた → せまい 画面は すきまを へらして 1行 */
@media (max-width: 370px) { .book .seg button { padding-left: 2px; padding-right: 2px; font-size: 13.5px; white-space: nowrap; } }
/* A-10：ノートで ひらいた 課へ スクロール した とき、上の 帯（会員版）に かくれない */
.wgroup { scroll-margin-top: calc(var(--app-top, 0px) + 12px); }
/* ===== 2026-10-25 デザイン点検 ここまで ===== */