/* ============================================================================
   わくまの えいご style.css — 日本語アプリ・ベトナム語アプリと 同じ「にぎやか v4」（クリーム地・水玉・色のふち・わくま）
   いつも明るい（ダークモードなし）。左の色の線・濃い面の長文・かたむけた カードは 使わない。
   字：日本語（画面）＝Zen Maru Gothic／英語＝Andika（a・g が 教科書と 同じ 形・読み書きを 習う 子 向けの 字）／見出しの 数字・英字＝Baloo 2
   ========================================================================== */
: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: #6C5CE7; --sd: #4B3BC0; --sl: #ECE9FD; --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", system-ui, sans-serif;
  --f-en: "Andika", "Baloo 2", system-ui, sans-serif;
  --f-disp: "Baloo 2", "Zen Maru Gothic", sans-serif;
  --f-ja: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", 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="en"], .en { font-family: var(--f-en); }
.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: 44px; font-size: 14px; }   /* 2026-10-24 全面チェック B-10：38px → 44px */
.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: 44px; height: 44px; }   /* 2026-10-24 全面チェック B-10：34px → 44px（押しやすく） */

.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-grid.four line { stroke: #D9C3A2; stroke-width: .7; stroke-dasharray: none; }
.wr-grid.four line.base { stroke: #E5533D; stroke-width: .9; }
.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: 44px; height: 44px; }
.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; min-width: 48px; }   /* 2026-10-24 全面チェック B-10 #14：札「I」が 38px だった */
.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: 44px; height: 44px; }
.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; }


/* ============ ベトナム語アプリから うけついだもの ============ */
.en { font-weight: 600; }
.nw { white-space: nowrap; }
.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-en); color: var(--ink); }
.lbig.sm { font-size: 56px; }
.l-d { font-size: 17px; font-weight: 700; }
.lch { font-size: 26px; font-weight: 700; }
.opts.grid .lch { font-size: 28px; }
.q-big.en { font-size: 76px; line-height: 1.15; font-weight: 700; }
.q-big.kana { font-size: 84px; }
.q-vn { font: 700 30px/1.6 var(--f-en); 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; }
.opt .en { font-size: 18px; }
.w-main { font-family: var(--f-en); font-weight: 700; }
.ex-vn { font-size: 19px; line-height: 1.8; }
.ex-ja { font-size: 15px; color: var(--ink-2); }
.ex-vn .say { width: 44px; height: 44px; }
.vw { font-size: 20px; min-width: 5em; } .ja-s { flex: 1; font-size: 15px; color: var(--ink-2); }
.nc { font-size: 30px; line-height: 1.25; color: var(--sd); font-weight: 700; }
.note-cards b { font-size: 14px; }
.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-ghost path { stroke-width: 8.5; }
.drop.en { width: auto; min-width: 76px; height: 64px; border-radius: 32px; padding: 0 16px; font-size: 30px; font-weight: 700; white-space: nowrap; }
.drop.en.miss { height: auto; padding: 6px 14px; font-size: 24px; }
.drop.en small { font: 700 13px var(--f-body); }
.rain .opt { min-height: 64px; }
.mt.en-t { font-size: 18px; }
.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 .en { 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; }
.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-en); }
.gitem h4 { font-size: 19px; }
.pl-ja { font: 800 26px/1.2 var(--f-body); }
.hbar .hi .en { font-weight: 700; white-space: nowrap; }   /* 2026-10-24 全面チェック A-6a：iPhone の Safari で「hell／o!」と 途中で 折れていた → 折れるなら「ゆいさん、」の あとで */
.book .seg button { font-size: 14px; padding: 6px 4px; }


/* ---------- かな：覚えるヒント・ウォームアップ（10/11） ---------- */
.mnemo { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: var(--sl); border-radius: 16px; padding: 10px 12px; }
.mn-wk { width: 44px; height: 44px; }
.mnemo b { display: block; font-size: 13px; color: var(--sd); }
.mnemo p { font-size: 15px; line-height: 1.5; }
.warm-chip { align-self: center; background: var(--yellow-l); color: #8A6A00; font-weight: 800; font-size: 13px; border-radius: 999px; padding: 3px 12px; }

/* ---------- かなの章：行ごとの カード ---------- */
.krows { display: flex; flex-direction: column; gap: 12px; }
.krow-card { background: #fff; border-radius: 20px; padding: 12px; box-shadow: var(--sh-s); display: flex; flex-direction: column; gap: 10px; border: 2px solid transparent; }
.krow-card.done { border-color: color-mix(in srgb, var(--sc) 45%, #fff); }
.krow-card header { display: flex; align-items: center; gap: 10px; }
.kr-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sc); color: var(--sc-ink); display: grid; place-items: center; font: 800 14px var(--f-disp); }
.kr-chars { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.kr-chars span { font-size: 22px; line-height: 1.2; padding: 0 3px; border-radius: 8px; color: var(--ink-3); }
.kr-chars span.m1 { color: var(--ink); background: var(--yellow-l); } .kr-chars span.m2 { color: var(--ink); background: #E8F6D8; }
.kr-chars span.m3, .kr-chars span.m4 { color: var(--ink); background: #DFF3E8; }
.krow-card header small { color: var(--ink-2); font-weight: 700; }
.ksteps { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.kstep { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; text-align: left; min-height: 56px; box-shadow: 0 3px 0 var(--line); }
.kstep:active:not(.lock) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.ks-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--sl); color: var(--sd); }
.ks-ic .en { font-size: 22px; line-height: 1; }
.ks-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 15px; line-height: 1.3; }
.ks-n { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-n .en { font-size: 17px; letter-spacing: .06em; }
.ks-s { display: flex; min-height: 16px; align-items: center; }
.ks-s svg.star { width: 14px; height: 14px; }
.ks-s .go-chip { font-size: 12px; padding: 1px 8px; }
.kstep.conf .ks-ic { background: #FDE6EE; color: #B83063; }
.kstep.game .ks-ic { background: var(--yellow-l); color: #8A6A00; }
.kstep.done .ks-ic { background: var(--sc); color: var(--sc-ink); }
.kstep.next { border-color: var(--sc); box-shadow: 0 3px 0 var(--sd); }
.kstep.lock { opacity: .5; }
.kstep.lock .ks-ic { background: var(--sand); color: var(--ink-3); }
.krow-card.test { padding: 0; background: none; box-shadow: none; }

/* ---------- 見分け・ひらがなとの ペア ---------- */
.pairs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; width: 100%; }
.pc { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(30%, 130px); min-width: 92px; }
.pc-wr { width: 100%; }
.pc-l { display: flex; align-items: center; gap: 6px; }
.pc-l .ro { font-size: 18px; color: var(--sd); }
.pc-l .say { width: 44px; height: 44px; }
.hira-pair { background: var(--cream); border-radius: 12px; padding: 4px 12px; font-weight: 700; color: var(--ink-2); }
.hira-pair .en { font-size: 26px; color: var(--ink); vertical-align: -3px; }
.mc-b.wj { font-size: clamp(15px, 4.4vw, 22px); padding: 4px; text-align: center; line-height: 1.3; }
.mc-b.wv { font-size: clamp(14px, 4.4vw, 20px); padding: 6px; text-align: center; line-height: 1.3; font-weight: 700; color: var(--sd); }

/* ---------- ゲームの はじめ：出る字 ---------- */
.gm-chars { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.gm-chars span { font-size: 24px; background: var(--cream); border-radius: 10px; padding: 0 8px; }

/* ---------- 神経衰弱 ---------- */
.mem { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 8px; max-width: 520px; margin: auto; width: 100%; }
.mcard { appearance: none; border: 0; padding: 0; background: none; aspect-ratio: 3 / 3.6; }
/* 10/11 iPhone（Safari）で 裏の字が 反転して 透けて「文字化け」に 見えた → 3D の 裏返しを やめ、表と裏を 出し入れ＋横に つぶれる アニメに */
.mc-in { position: relative; display: block; width: 100%; height: 100%; }
.mcard.open .mc-in, .mcard.done .mc-in { animation: flipx .26s ease-out; }
@keyframes flipx { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.mc-f, .mc-b { position: absolute; inset: 0; border-radius: 16px; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(90,60,30,.15); }
.mc-f { background: var(--sc); background-image: radial-gradient(circle, rgba(255,255,255,.25) 2px, transparent 3px); background-size: 14px 14px; }
.mc-logo { width: 52%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px var(--spark); display: grid; place-items: center; font: 800 clamp(16px, 5vw, 24px) var(--f-disp); color: var(--sd); }
.mc-b { background: #fff; border: 3px solid var(--line); visibility: hidden; }
.mcard.open .mc-b, .mcard.done .mc-b { visibility: visible; }
.mcard.open .mc-f, .mcard.done .mc-f { visibility: hidden; }
.mc-b.lt { font-size: clamp(30px, 10vw, 50px); }
.mc-b.lt.up { color: var(--sd); }
.mc-b.nm { font-size: clamp(15px, 4.4vw, 22px); font-weight: 800; color: var(--sd); }
.mc-b.wp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px; text-align: center; line-height: 1.2; }
.mc-b.wp small { font-size: clamp(11px, 3.2vw, 14px); font-weight: 700; color: var(--ink-2); }
.mc-b.ro { font-size: clamp(17px, 5vw, 26px); color: var(--sd); }
.mcard.done .mc-b { border-color: var(--ok); background: var(--ok-l); }

/* ---------- もぐらたたき（わくまの くま） ---------- */
.whack { display: flex; flex-direction: column; gap: 16px; max-width: 460px; width: 100%; margin: auto; }
.wh-target { display: flex; align-items: center; justify-content: center; gap: 12px; background: #fff; border-radius: 20px; padding: 10px 14px; box-shadow: var(--sh-s); }
.wh-lbl { font-weight: 700; color: var(--ink-2); }
.wh-ro { font: 800 40px var(--f-body); color: var(--sd); min-width: 2.2em; text-align: center; }
.holes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
.hole { position: relative; aspect-ratio: 1 / .95; overflow: hidden; border-radius: 0 0 46% 46%; }
.hole .dirt { position: absolute; left: 4%; right: 4%; bottom: 0; height: 30%; border-radius: 50%; background: #B98A5E; box-shadow: inset 0 6px 0 #8F6644; z-index: 2; pointer-events: none; }
.mole { appearance: none; border: 0; position: absolute; left: 14%; right: 14%; bottom: 8%; height: 78%; border-radius: 50% 50% 40% 40%; background: #fff; box-shadow: inset 0 0 0 3px #42251F; transform: translateY(100%); transition: transform .16s ease-out; z-index: 1; display: grid; place-items: center; padding: 0; }
.mole::before, .mole::after { content: ''; position: absolute; top: -8%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #42251F; z-index: -1; }
.mole::before { left: 2%; } .mole::after { right: 2%; }
.mole span { font-size: clamp(30px, 10vw, 44px); line-height: 1; color: var(--ink); display: flex; flex-direction: column; align-items: center; margin-bottom: 18%; }
.mole span small { font-size: 13px; }
.mole.up { transform: translateY(0); }
.mole.hit { background: var(--ok-l); box-shadow: inset 0 0 0 3px var(--ok); }
.mole.ng { background: var(--ng-l); box-shadow: inset 0 0 0 3px var(--ng); }

/* ---------- ふうせんわり ---------- */
.bl { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.bl-top { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 70px; font-weight: 700; }
.bl-top .ro { font-size: 30px; color: var(--sd); }
.bl-sky { position: relative; flex: 1; min-height: 320px; height: calc(100vh - 260px - var(--app-top, 0px)); height: calc(100dvh - 260px - var(--app-top, 0px)); border-radius: 24px; background: linear-gradient(180deg, #DDF1FB, #FFF8EA); overflow: hidden; box-shadow: inset 0 0 0 3px var(--line); }
.balloon { appearance: none; border: 0; padding: 0; position: absolute; bottom: -110px; width: 68px; height: 84px; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.65) 0 12%, transparent 13%), var(--bc); box-shadow: inset -6px -8px 0 rgba(0,0,0,.08); display: grid; place-items: center; will-change: transform; }
.balloon i { position: absolute; left: 50%; bottom: -26px; width: 2px; height: 26px; background: #9A8A7E; }
.balloon span { font-size: 36px; line-height: 1; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.18); display: flex; flex-direction: column; align-items: center; }
.balloon span small { font-size: 12px; color: #fff; }
.balloon.pop { opacity: 0; transition: opacity .25s, scale .25s; scale: 1.6; }
.balloon.ng { filter: grayscale(.8) opacity(.6); }


/* ============ 英語アプリで 足したもの ============ */
.en { font-weight: 700; }
/* 絵（絵文字・色の まる・数字） */
.pic { display: inline-grid; place-items: center; font-size: 30px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; flex: none; }
.pic.sm { font-size: 22px; } .pic.md { font-size: 40px; } .pic.lg { font-size: 72px; } .pic.xl { font-size: 92px; }
.pic.sw { width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--swc); box-shadow: inset 0 0 0 2px rgba(0,0,0,.12), 0 2px 0 rgba(0,0,0,.08); }
.pic.numpic { font: 800 1em/1 var(--f-disp); color: var(--sd); min-width: 1.2em; padding: .08em .18em; border-radius: .3em; background: var(--sl); }
.pic.numpic.lg, .pic.numpic.xl { font-size: 64px; }
.popt { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.25; }
.popt .pic { font-size: 40px; }
.popt .pic.sw { font-size: 34px; }
.popt .pic.numpic { font-size: 30px; }
.popt b.en { font-size: 18px; }
.popt small { font-size: 13px; color: var(--ink-2); font-weight: 700; }
.kname { font: 800 20px/1.3 var(--f-ja); color: var(--sd); }
.kname.big { font-size: 26px; }
.lbig { font: 700 120px/1.05 var(--f-en); color: var(--ink); }
.lch { font: 700 28px/1.1 var(--f-en); }
.opts.grid .lch { font-size: 40px; }
.write-head .lch { font-size: 46px; }
.q-big.en { font: 700 96px/1.1 var(--f-en); }
.q-seq { display: flex; gap: 10px; justify-content: center; align-items: center; background: #fff; border-radius: 18px; padding: 10px 16px; box-shadow: var(--sh-s); }
.q-seq span { font-size: 48px; line-height: 1.1; }
.q-seq .q-qm { font: 800 48px var(--f-disp); color: var(--red); min-width: 1em; border-bottom: 4px dashed var(--red); text-align: center; }
.q-pic { display: flex; justify-content: center; margin-bottom: 4px; }
.q-jp.big { font-size: 30px; color: var(--sd); }
.q-kata { font: 900 40px/1.3 var(--f-ja); background: #fff; border-radius: 18px; padding: 12px 18px; box-shadow: var(--sh-s); text-align: center; }
.q-kata.trap { box-shadow: inset 0 0 0 3px var(--sun), var(--sh-s); }
.q-vn { font-family: var(--f-en); }
.warm-tag { align-self: center; display: inline-block; background: var(--yellow-l); color: #8A6A00; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 2px 10px; margin-bottom: 4px; }
.q { display: flex; flex-direction: column; }
.opt .en { font-size: 20px; }
.opts.grid .opt .en { font-size: 22px; }
.big-num { font: 800 34px var(--f-disp); color: var(--ink); }
/* ことばの 一覧（絵・英語・意味・🔊） */
.wlist .wl { grid-template-columns: auto minmax(4.5em, auto) 1fr auto; grid-template-rows: auto; }
.wlist .wl .vbig { grid-row: auto; font-size: 22px; }
.wlist .wl svg.ic { grid-row: auto; grid-column: auto; }
/* 字の カード：その 字で はじまる ことば */
.wex { appearance: none; border: 2px solid var(--line); background: var(--cream); border-radius: 16px; padding: 6px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 3px 0 var(--line); color: var(--ink); }
.wex .pic { font-size: 44px; }
.wex > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.wex b { font-size: 24px; } .wex small { color: var(--ink-2); font-weight: 700; }
.wex svg.ic { color: var(--sd); }
.letter-card .mini-wr .wr-host { width: 170px; }
.kcell .kch.en { font-size: 40px; }
.ph-lbl { font-size: 13px; font-weight: 800; color: var(--ink-3); }
.phon-card .kname.big { font-size: 28px; }
/* にている 音 */
.mps { display: flex; align-items: center; gap: 8px; justify-content: center; width: 100%; }
.mp { appearance: none; border: 3px solid var(--line); background: #fff; border-radius: 20px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; max-width: 160px; box-shadow: 0 4px 0 var(--line); color: var(--ink); position: relative; }
.mp .pic { font-size: 54px; }
.mp b { font-size: 26px; } .mp small { font-weight: 700; color: var(--ink-2); }
.mp .mp-k { position: absolute; top: 6px; left: 8px; background: var(--sl); color: var(--sd); border-radius: 8px; padding: 0 6px; font-size: 15px; }
.mp svg.ic { color: var(--sd); }
.mp-vs { font-weight: 800; color: var(--ink-3); }
/* つなげて 読む */
.bl-letters { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }
.bl-l { display: flex; flex-direction: column; align-items: center; background: var(--cream); border-radius: 14px; padding: 4px 12px; min-width: 64px; }
.bl-l b { font-size: 44px; line-height: 1.15; } .bl-l small { font-weight: 800; color: var(--sd); font-size: 13px; }
.bl-plus { font-style: normal; color: var(--ink-3); font-weight: 800; }
.bl-arrow { font: 800 26px var(--f-disp); color: var(--sd); line-height: 1; }
.w-main { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.w-main .en { font-size: 40px; }
.w-main.sm { margin-top: -4px; }
.w-pic { margin-bottom: -6px; }
/* カタカナ語 */
.kt-row { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.kt-k { font: 900 30px/1.3 var(--f-ja); background: var(--cream); border-radius: 14px; padding: 4px 12px; }
.kt-ar { font: 800 26px var(--f-disp); color: var(--sd); }
.kt-e .en { font-size: 34px; }
.kt-card.trap { border-color: var(--sun); }
.kt-card.trap .tag { background: var(--yellow-l); color: #8A6A00; }
.kt-card.trap .kt-e .en { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; color: var(--ink-3); }
.kt-card.trap .kt-ar { color: var(--red); }
.kt-trap { font-weight: 700; font-size: 17px; }
.kt-trap .en { font-size: 26px; color: var(--ok); }
.kttable li.trap { background: #FFF8E1; }
.trap-mark { font: 800 11px var(--f-body); color: #8A6A00; background: var(--yellow-l); border-radius: 6px; padding: 1px 6px; vertical-align: 2px; }
/* ホーム：ABCで あそぶ */
.play-card { appearance: none; border: 0; width: 100%; background: #fff; border-radius: 20px; padding: 12px 14px; box-shadow: var(--sh-s); display: flex; gap: 12px; align-items: center; text-align: left; color: var(--ink); }
.play-card > svg.ic:first-child { width: 40px; height: 40px; padding: 7px; border-radius: 12px; background: var(--yellow-l); color: #8A6A00; }
.play-card div { flex: 1; min-width: 0; } .play-card b { display: block; } .play-card span { font-size: 13px; color: var(--ink-2); }
/* ゲーム */
.drop.en { width: auto; min-width: 76px; height: 64px; border-radius: 32px; padding: 0 16px; font-size: 34px; font-weight: 700; white-space: nowrap; display: grid; place-items: center; }
.drop.en.miss, .drop.picdrop.miss { height: auto; padding: 6px 14px; font-size: 26px; display: flex; flex-direction: column; align-items: center; }
.drop.picdrop { width: auto; min-width: 76px; min-height: 72px; height: auto; border-radius: 36px; padding: 4px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }   /* 10/23 絵の下に 日本語（4-8） */
.drop small { font: 700 13px var(--f-body); }
.wh-ro { font-family: var(--f-en); display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.wh-ro small { font: 700 11px var(--f-body); color: var(--ink-3); }
.wh-ro .kname { font-size: 30px; }
.bl-top .pic { font-size: 54px; }
.bl-top b.en { font-size: 26px; }
.bl-sky.words .balloon { width: 84px; height: 92px; }
.bl-sky.words .balloon span { font-size: 24px; }
.gm-chars span.en { font-size: 22px; }
.ob-card .choice .ch-card .big.en { font-size: 34px; }
.lgrid .lc .en { font-size: 26px; }
.wtable li:has(> .pic) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.wtable .pic { font-size: 24px; }
.opt .lch { font-size: 30px; }
.opts.grid .opt .lch { font-size: 44px; line-height: 1; }
.mnemo b.en, .mnemo b.nw, .tip b.en { display: inline; font-size: 1.08em; color: var(--ink); }
.note-wk { margin-bottom: 6px; }
.phon-card .kname.big { font-size: 24px; line-height: 1.35; max-width: 9em; }
/* 分かち書きの 日本語は すきまで 折りかえす（ことばの まんなかで 切れない） */
body { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 370px) { .lbig { font-size: 96px; } .q-big.en { font-size: 80px; } .mp .pic { font-size: 44px; } .mp b { font-size: 22px; } }

@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 #D6D0FA; 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: 14px; padding: 3px 10px 3px 7px; }   /* 2026-10-24 A-6a：あいさつの 幅を すこし 広く */
.chips-stat { gap: 4px; }
.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-6e：小さい iPhone（375×667）で カードが 下の ボタンに かくれた → 375 以下は 大きな 字と 書き順の 板を 小さく・カードの 下に 余白 */
@media (max-width: 380px) {
  .lbig { font-size: 88px; }
  .q-big.en { font-size: 72px; }
  .letter-card .mini-wr .wr-host { width: 130px; }
  .kname.big { font-size: 22px; }
  .phon-card .kname.big { font-size: 22px; }
  .wex .pic { font-size: 36px; }
  .pic.xl { font-size: 72px; }
  .w-main .en { font-size: 34px; }
  .mnemo p { font-size: 14px; }
  .play-body { padding-bottom: 28px; }
}
/* A-6e：下に つづきが あるときの 合図（player.js の moreHint が .more を つける） */
.play-foot.more::before { content: '▼ 下に つづきが あるよ'; display: block; text-align: center; font: 700 12px/1.2 var(--f-body); color: var(--ink-3); margin: -2px 0 0; }
/* A-6f：声なしの もぐら：絵の 下の 英語と 日本語 */
.wh-ro .wh-en { font: 700 22px/1.2 var(--f-en); color: var(--ink); }
.wh-ro small { font-size: 12px; }
/* A-7：おうちの 人の かくにん（3秒 ながおし＋かけ算） */
.pgate { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pg-hold { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 16px; min-height: 56px; width: 100%; padding: 10px 18px; font: 800 16px/1.3 var(--f-body); color: var(--ink); position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: 0 4px 0 var(--line); }
.pg-hold i { position: absolute; left: 0; bottom: 0; height: 6px; width: 0; background: var(--sun); }
.pg-hold.holding { border-color: var(--sun); }
.pg-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pg-box:empty { display: none; }
.pg-math { font: 800 32px/1.2 var(--f-disp); color: var(--sd); }
.pg-in { width: 100%; max-width: 240px; min-height: 56px; border: 3px solid var(--line); border-radius: 16px; padding: 8px 14px; font: 800 26px/1.2 var(--f-disp); text-align: center; background: #fff; color: var(--ink); }
.pg-in:focus { outline: none; border-color: var(--sun); }
.pg-msg { min-height: 1.4em; color: var(--ng); font-weight: 700; }
/* B-3：Lv の 札の「つぎまで あと ○XP」・もくひょうの 札の ひとこと・結果の「きょうの もくひょう たっせい！」 */
.hbar .lv-next { display: block; margin-top: 2px; font: 700 12px/1.4 var(--f-body); color: var(--ink-2); white-space: nowrap; }
.goal em.gl-t { display: block; font: 800 12px/1.35 var(--f-body); font-style: normal; color: var(--sd); }
.goalhit { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--yellow-l); border-radius: 16px; padding: 8px 12px; text-align: left; font: 800 17px/1.3 var(--f-disp); color: var(--sd); opacity: .55; transform: scale(.96); transition: .35s var(--poyon, cubic-bezier(.2,1.4,.4,1)); }
.goalhit.on { opacity: 1; transform: scale(1); }
.goalhit .av { width: 44px; height: 44px; background: #fff; }
/* B-9 §3#9：白い まるの ふちを 濃く（en.js が 明るい 色に .lt を つける） */
.pic.sw.lt { box-shadow: inset 0 0 0 2px #C9BBA6, 0 2px 0 rgba(0,0,0,.08); }

/* 2026-10-24 Sana「えいごに English を」：はじめの画面の 題の 下に 小さく English */
.ob-title .ob-en { display: block; margin-top: 4px; font-size: .55em; letter-spacing: .04em; color: var(--sd); }

/* ===== 2026-10-25 デザイン点検（えいご 0.2.1） ===== */
/* A-1：おわった 課の スタンプが 場所の 名前に かさなっていた → カードの 右上の すみに 小さく・名前に 右の 余白 */
.u-stamp { right: -8px; top: -18px; width: 68px; z-index: 2; pointer-events: none; }
.u-hero.has-stamp .u-place { padding-right: 60px; }
@media (max-width: 400px) { .u-hero.has-stamp .pl-ja { font-size: 23px; } }   /* 余白の ぶん「スーパーマーケット」が 折れないように 少し 小さく */
/* A-3：ひょうげんの 説明の 箱（WebKit で 1〜2字の 行が できた）→ わくまの 顔は 左上に 小さく、文は 箱の 幅 ぜんぶ を 使う */
.g-exp { display: flow-root; }
.g-exp .g-wk { float: left; width: 34px; height: 34px; margin: 2px 8px 0 0; }
.g-exp p { text-align: left; }
/* A-4：押す ところを 見た目 44px 以上に（🔊・🐢 ゆっくり 40px／会話の「ぜんぶ 聞く」「日本語」42px／ノートの タブ 42px） */
.say { width: 44px; height: 44px; }
.chipb { min-height: 44px; }
.seg button { min-height: 44px; }
/* B：ノートの タブが Android 360 で「カタカナ｜語」「ひょうげ｜ん」と 折れた → 1行の まま・字を 少し 小さく */
.book .seg.bk-tabs button { white-space: nowrap; font-size: 14px; padding: 6px 2px; }
@media (max-width: 380px) { .book .seg.bk-tabs button { font-size: 13px; } }
/* A-10：ノートで ひらいた 課へ スクロール したとき、上の 帯に かくれない */
.book [data-uid] { scroll-margin-top: calc(12px + var(--app-top, 0px)); }
/* A-11：地図の おわった 丸が 濃い 茶色・からし色で 重く ✓ が 見えにくい → その 課の 明るい 色＋白い ✓＋金の ふち */
.node.done .nd { background: var(--sc); color: #fff; box-shadow: 0 5px 0 var(--sd), 0 0 0 4px #fff, 0 0 0 7px var(--spark); }
.node.done .nd svg.ic { width: 32px; height: 32px; color: #fff; filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, .28)); }
/* B：和製英語の ✕ は いつも 打ち消し線の 英語の 前（ひとまとめ） */
.kt-e { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.kt-e .en { min-width: 0; }
/* B：レベルアップを 大きく（わくまの 顔＋大きな Lv の 札・ぽんと 出る） */
.lvup { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; background: var(--yellow-l); border: 3px solid var(--sun); border-radius: 22px; padding: 10px 16px; font: inherit; color: var(--ink); animation: lvIn .6s cubic-bezier(.3,1.5,.5,1) both .35s; }
.lvup .lv-wk { width: 58px; height: 58px; background: #fff; flex: none; }
.lv-badge { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.lv-badge small { font: 800 15px/1.3 var(--f-body); color: var(--sd); }
.lv-badge b { font: 800 42px/1 var(--f-disp); color: var(--ink); }
@keyframes lvIn { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
/* B：結果の 紙ふぶきが 字や ボタンの 上に かかった → 結果の 画面では カードの 中の いちばん うしろ（白い 地の 上・字と ボタンの 下・screens.js） */
.res-card > canvas.confetti.in-card { z-index: -1; }
/* B：小さい 字（11px 前後）を 12px 以上に（下の タブ・会話の 話し手・ノート ABC の カナ・⚠ 和製英語・スタンプ帳の 名前） */
.tabbar button, .tabbar small { font-size: 12px; }
.talk .who { font-size: 13px; }
.talk .who small { font-size: 12px; }
.lc small, .lgrid .lc small { font-size: 12px; }
.trap-mark { font-size: 12px; white-space: nowrap; display: inline-block; }   /* 360 で「⚠｜和製英語」と 分かれた → ひとかたまり */
.st-cell small { font-size: 12px; }
.kc small, .kj small { font-size: 12px; }
/* B：よび名の 空白で 3行に なった → 名前＋「さん、」は 1かたまり・長い 名前は 字を 小さく（screens.js の .hi-n） */
.hbar .hi .hi-n { display: inline-block; max-width: 100%; vertical-align: bottom; }   /* 名前は「…」で 切らない（とても 長い ときだけ 名前の 中で 折れる） */
.hbar .hi .hi-n.l { font-size: 17px; }
.hbar .hi .hi-n.xl { font-size: 15px; }
@media (max-width: 370px) { .hbar .hi .hi-n.l { font-size: 15px; } .hbar .hi .hi-n.xl { font-size: 13px; } }   /* Android 360 で 名前が「…」に ならないように */
/* B：下の タブの 字を 12px に したら、会員版の 360 で「ふくしゅ…」と 切れた → 字の すきまを 0・360 では タブの 外の 余白を へらす */
.tabbar small { letter-spacing: 0; }
@media (max-width: 380px) { .tabbar { padding: 4px; gap: 0; } .tabbar button { padding: 2px 0; } }
/* A-12：ぜんぶ おわりの「スタンプ帳へ」は まるい ボタン なので 1行に（360 で 2行に なった） */
.card.hero #h-stamps { white-space: nowrap; font-size: 17px; padding: 10px 18px; }
/* A-3：長い カタカナ語（シャッターチャンス 9字）が 360 で「チャン｜ス」と 折れた → 大きな カタカナは 画面の 幅に 合わせて 少し 小さく */
.kt-k { font-size: clamp(22px, 7.2vw, 30px); }
.q-kata { font-size: clamp(26px, 9vw, 40px); }