:where(html){background:#FFF8EA}
/* ============================================================================
   わくまタウン style.css — 仕様書 §14（にぎやか v4 の縮尺版）。ダークモードなし・いつも明るい。
   決まり：--sc の上に字を置くのはチップとボタンだけ／クリームの上に色の字は --sd／方眼・黒板・藍色・左の色の線・濃い面の長文は使わない。
   data-world で --sc/--sd/--sl/--sc-ink が変わる（建物_v1.json の色）。T・M もこのクラスを使う（§14.3 の名前）。
   ========================================================================== */
:root {
  /* 下地と字 */
  --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;
  /* ワールド色（body[data-world] で差しかえ） */
  --sc: #00A0E9; --sd: #0074B3; --sl: #E3F4FC; --sc-ink: #fff; --gold: #E0A800;
  --chip-bg: var(--sc); --chip-ink: var(--sc-ink);
  /* 九九 */
  --kk-n: #00A0E9; --kk-k: #F07A28; --kk-ten: #2F9C6A; --kk-box: #FFF100;
  /* ポスター横の点 */
  --dot-9: #E60012; --dot-8: #1D5BB8; --dot-7: #FFD500; --dot-6: #19B36B; --dot-5: #3A2C25;
  /* 珠（どの建物でも同じ。平らな 2色） */
  --bead-off: #EBD2B2; --bead-off-line: #C8A27C; --bead-on: #D96B2E; --bead-on-line: #93421A;
  --sb-frame: #4B2F1F; --sb-rod: #8B6A4C; --sb-inner: #FFFBF3; --sb-dot: #FFFFFF; --sb-label: #6E5D52; --bead-glow: #FFF100; --bead-oops: #FFB36B;
  /* vendor/soroban.js が読む名前（珠の塗りは 平らな 2色に） */
  --frame: var(--sb-frame); --bead-1: var(--bead-off); --bead-2: var(--bead-off); --bead-3: var(--bead-off); --bead-4: var(--bead-off-line); --ai: var(--sky); --kin: var(--bead-glow);
  /* 正解・まちがい */
  --ok: #D94F3D; --oops: #FFB36B;
  /* 影 */
  --sh: 0 10px 24px rgba(90, 60, 30, .12); --sh-s: 0 4px 12px rgba(90, 60, 30, .10);
  /* 字 */
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; --font-display: "Mochiy Pop One", var(--font-body); --fw-display: 400;
  /* 大きさ（390 基準） */
  --key-h: 56px; --rod-min: 56px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --gut: 16px; --fr: 10px; --poyon: cubic-bezier(.2, 1.4, .4, 1);
  color-scheme: light only;
}
/* ---- ワールド色（仕様書 §2.3。core の WORLD_COLORS と同じ値）---- */
body[data-world="0"]  { --sc: #7FD3A8; --sd: #2F9C6A; --sl: #E2F4EA; --sc-ink: var(--ink); --chip-bg: var(--sd); --chip-ink: #fff; }
body[data-world="1"]  { --sc: #00A0E9; --sd: #0074B3; --sl: #E3F4FC; --sc-ink: #fff; --chip-bg: var(--sc); --chip-ink: #fff; }
body[data-world="2"]  { --sc: #F07A28; --sd: #B9520E; --sl: #FFEBDA; --sc-ink: #fff; --chip-bg: var(--sc); --chip-ink: #fff; }
body[data-world="3"]  { --sc: #9B7BD8; --sd: #6A4DB0; --sl: #EEE8FA; --sc-ink: #fff; --chip-bg: var(--sc); --chip-ink: #fff; }
body[data-world="4"]  { --sc: #FFC93B; --sd: #C9900A; --sl: #FFF4D0; --sc-ink: var(--ink); --chip-bg: var(--sd); --chip-ink: #fff; }
body[data-world="5"]  { --sc: #E9578A; --sd: #B83063; --sl: #FDE6EE; --sc-ink: #fff; --chip-bg: var(--sc); --chip-ink: #fff; }
body[data-world="6"]  { --sc: #2F9C6A; --sd: #1D7049; --sl: #E2F4EA; --sc-ink: #fff; --chip-bg: var(--sc); --chip-ink: #fff; }
body[data-world="7"]  { --sc: #E8524E; --sd: #B5332F; --sl: #FDE4E2; --sc-ink: #fff; --chip-bg: var(--sc); --chip-ink: #fff; }
body[data-world="8"]  { --sc: #2BB3A3; --sd: #1A8276; --sl: #DDF3F0; --sc-ink: #fff; --chip-bg: var(--sc); --chip-ink: #fff; }
body[data-world="9"]  { --sc: #FFB36B; --sd: #D1772B; --sl: #FFEEDD; --sc-ink: var(--ink); --chip-bg: var(--sd); --chip-ink: #fff; }
body[data-world="10"] { --sc: #F58BB0; --sd: #C4557F; --sl: #FDEAF1; --sc-ink: var(--ink); --chip-bg: var(--sd); --chip-ink: #fff; }
body[data-world="11"] { --sc: #0074B3; --sd: #004F7A; --sl: #DCEBF5; --sc-ink: #fff; --chip-bg: var(--sc); --chip-ink: #fff; }

/* ---------- 下地 ---------- */
html, body { height: 100%; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh;
  background-color: var(--cream);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--sc) 16%, transparent) 2.5px, transparent 3px);
  background-size: 26px 26px; background-position: 13px 13px;
  color: var(--ink); font: 700 16px/1.6 var(--font-body);
  touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%;
  word-break: keep-all; overflow-wrap: break-word; line-break: strict;
}
body[data-screen="play"], body[data-screen="mg"] { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
: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; }
.disp { font-family: var(--font-display); font-weight: var(--fw-display); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 14px; } .muted { color: var(--ink-2); } .note { font-size: 13px; color: var(--ink-2); font-weight: 700; line-height: 1.5; }
.center { text-align: center; }
em { font-style: normal; color: var(--sd); background: linear-gradient(transparent 60%, var(--marker) 60%, var(--marker) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em; }
#app { min-height: 100dvh; position: relative; }
.wk { display: block; position: relative; }
.wk canvas { display: block; width: 100%; height: 100%; }
.av { width: 38px; height: 38px; border-radius: 50%; flex: none; position: relative; overflow: hidden; }
.av canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- 画面の入れ物 ---------- */
.scr { max-width: 760px; margin: 0 auto; padding: calc(12px + var(--sat)) max(var(--gut), var(--sar)) calc(40px + var(--sab)) max(var(--gut), var(--sal)); display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; }
.scr.wide { max-width: 1080px; }
.scr > *, .stack > *, .row > * { min-width: 0; }
.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; }
.tbar { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.tbar h1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(18px, 5.4vw, 22px); flex: 1; min-width: 0; line-height: 1.3; }  /* 10/9 スマホでは少し小さく（右に大きな字が並ぶ画面で 見出しが 割れない） */
.tbar h1 .tsub { display: block; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--ink-2); }
.tbar.onbg h1 { text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px -1.5px 0 #fff; }
/* 固定のふち（まち・たてもの・説明・けっか・九九カード）。ほんばんは上の帯だけ */
.frame { position: fixed; inset: 0; pointer-events: none; z-index: 40; border: var(--fr) solid transparent; border-image: linear-gradient(135deg, var(--sc), var(--spark)) 1; }
.frame.top { border-width: 6px 0 0 0; }
.blob { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; opacity: .9; filter: blur(2px); }
.blob.tr { width: 320px; height: 320px; right: -120px; top: -110px; background: var(--sl); }
.blob.bl { width: 200px; height: 200px; left: -70px; bottom: -60px; background: var(--yellow-l); }
.spark { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.spark i { position: absolute; display: block; width: 14px; }
.spark svg { display: block; width: 100%; height: auto; }
/* SVG を書かずに キラキラ：<div class="spark"><i class="st" style="left:14px;top:90px"></i><i class="ht …"></i><i class="dt …"></i></div>（templates4 の star／heart／dot の形） */
.spark i.st, .spark i.ht, .spark i.dt { width: var(--s, 14px); height: var(--s, 14px); background: var(--c, var(--spark)); }
.spark i.st { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.spark i.ht { --c: var(--pink); clip-path: path('M7 13 C7 13 0.5 8.6 0.5 4.6 C0.5 2.3 2.3 0.6 4.3 0.6 C5.6 0.6 6.5 1.3 7 2.2 C7.5 1.3 8.4 0.6 9.7 0.6 C11.7 0.6 13.5 2.3 13.5 4.6 C13.5 8.6 7 13 7 13 Z'); }
.spark i.dt { --s: 8px; --c: var(--sky); border-radius: 50%; }
.mg .spark i.st { --s: 26px; } .mg .spark i.dt { --s: 14px; }
svg.ic { width: 22px; height: 22px; vertical-align: middle; flex: none; }
.tabbar { position: fixed; left: 50%; bottom: calc(10px + var(--sab)); transform: translateX(-50%); z-index: 30; display: flex; gap: 4px; background: #fff; border-radius: 999px; height: 64px; padding: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 35%, #fff), var(--sh); }
.tabbar button { appearance: none; border: 0; background: none; width: 72px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 11px; font-weight: 900; color: var(--ink-2); }
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button[aria-current="page"] { color: var(--sc-ink); }
.tabbar button[aria-current="page"] span { background: var(--chip-bg); color: var(--chip-ink); border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; }
.has-tabbar { padding-bottom: calc(96px + var(--sab)); }

/* ---------- ボタン ---------- */
.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: 56px; padding: 10px 22px; font: 900 18px/1.25 var(--font-body);
  box-shadow: 0 5px 0 var(--bd); transform: translateY(0); transition: transform .07s ease-out, box-shadow .07s ease-out, filter .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; user-select: none; -webkit-user-select: none; margin-bottom: 5px; white-space: nowrap;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--bd); }
.btn:disabled { filter: grayscale(.6) opacity(.5); cursor: default; }
.btn.big { min-height: 64px; font-size: 22px; border-radius: 22px; padding: 12px 26px; }
.btn.sc { --bc: var(--chip-bg); --bd: color-mix(in srgb, var(--sd) 80%, #000 20%); --bt: var(--chip-ink); background: linear-gradient(135deg, var(--chip-bg), color-mix(in srgb, var(--chip-bg) 70%, var(--sd))); }
.btn.sub { --bc: #fff; --bd: var(--line); --bt: var(--ink); border: 2px solid var(--line); }
.btn.danger { --bc: #fff; --bd: #F0C9BF; --bt: var(--ok); border: 2px solid #F0C9BF; }
.btn.wide { width: 100%; }
.btn.wrap { white-space: normal; }
.btn.go { width: 56px; height: 56px; min-height: 56px; border-radius: 50%; padding: 0; }
.btn svg { flex: none; }
.btn.pulse { animation: okp 1s ease-in-out infinite; }
.ibtn { appearance: none; border: 2px solid var(--line); background: #fff; color: var(--ink); width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 3px 0 var(--line); margin-bottom: 3px; flex: none; }
.ibtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipb { appearance: none; border: 2px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; min-height: 44px; min-width: 48px; padding: 6px 14px; font-weight: 900; font-size: 16px; box-shadow: 0 3px 0 var(--line); margin-bottom: 3px; }
.chipb[aria-pressed="true"] { background: var(--chip-bg); color: var(--chip-ink); border-color: var(--chip-bg); box-shadow: 0 3px 0 color-mix(in srgb, var(--sd) 70%, transparent); }
.chipb.lock { opacity: .5; }

/* ---------- カード・チップ・ふきだし ---------- */
.card { background: #fff; border-radius: 22px; padding: 16px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 35%, #fff), var(--sh-s); position: relative; }
.card.tint { background: var(--sl); }
.card h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 18px; margin-bottom: 8px; }
.card.taped { margin-top: 12px; }
.nlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: nl; }
.nlist li { --li: var(--sky); background: #fff; border-radius: 18px; padding: 12px 14px 12px 54px; position: relative; box-shadow: 0 5px 0 color-mix(in srgb, var(--li) 55%, #fff), var(--sh-s); min-height: 52px; }
.nlist li:nth-child(4n+2) { --li: var(--pink); } .nlist li:nth-child(4n+3) { --li: var(--sun); } .nlist li:nth-child(4n+4) { --li: var(--leaf); }
.nlist li::before { counter-increment: nl; content: counter(nl); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--li); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; }
.eb { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 12px; background: var(--chip-bg); color: var(--chip-ink); font: 900 13px/1.5 var(--font-body); letter-spacing: .08em; box-shadow: 0 3px 0 color-mix(in srgb, var(--sd) 70%, transparent); white-space: nowrap; vertical-align: middle; }
.eb.pink { background: var(--pink); color: #fff; box-shadow: 0 3px 0 #C4557F; }
.eb.kk { background: var(--kk-box); color: var(--ink); box-shadow: 0 3px 0 var(--yellow-d); }
.eb.new { background: var(--ok); color: #fff; box-shadow: 0 3px 0 #9E2C17; }
.mg .eb { background: var(--pink); color: #fff; box-shadow: 0 3px 0 #C4557F; }
.bub { position: relative; background: #fff; border: 3px solid var(--sc); border-radius: 18px; padding: 10px 14px; font-weight: 900; font-size: 17px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bub::after { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; border-right: 3px solid var(--sc); border-bottom: 3px solid var(--sc); left: 26px; bottom: -9px; transform: rotate(45deg); }
.bub.left::after { left: -9px; bottom: 16px; transform: rotate(135deg); }
.bub.oops { border-color: var(--oops); } .bub.oops::after { border-color: var(--oops); }
.bub .cur { display: inline-block; width: .5em; animation: blink 1s steps(1) infinite; }
.burst { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--yellow); clip-path: polygon(50% 0%, 59% 13%, 75% 7%, 77% 23%, 93% 25%, 87% 41%, 100% 50%, 87% 59%, 93% 75%, 77% 77%, 75% 93%, 59% 87%, 50% 100%, 41% 87%, 25% 93%, 23% 77%, 7% 75%, 13% 59%, 0% 50%, 13% 41%, 7% 25%, 23% 23%, 25% 7%, 41% 13%); font-family: var(--font-display); font-size: 14px; line-height: 1.1; text-align: center; color: var(--ink); flex: none; }
.burst.big { width: 96px; height: 96px; font-size: 18px; }
.tape { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); width: 90px; height: 22px; background: repeating-linear-gradient(90deg, rgba(255, 233, 74, .85) 0 8px, rgba(255, 243, 170, .85) 8px 16px); border-radius: 3px; box-shadow: 0 2px 4px rgba(90, 60, 30, .12); z-index: 2; pointer-events: none; }
.tape.lbl { width: auto; min-width: 90px; padding: 0 10px; font: 900 12px/22px var(--font-body); color: var(--ink); text-align: center; white-space: nowrap; }
.stamp { display: inline-block; font-family: var(--font-display); font-weight: var(--fw-display); color: var(--ok); border: 4px double var(--ok); border-radius: 14px; padding: 4px 18px; font-size: 24px; line-height: 1.35; background: color-mix(in srgb, var(--ok) 6%, transparent); }
.cert { background: #fff; border-radius: 22px; padding: 22px 18px 18px; text-align: center; position: relative; box-shadow: 0 0 0 4px var(--gold), 0 0 0 8px #fff, 0 0 0 10px color-mix(in srgb, var(--gold) 40%, #fff), var(--sh); }
.cert .kyu { font-family: var(--font-display); font-size: 44px; line-height: 1.1; color: var(--sd); }
.cert .cert-t { font-family: var(--font-display); font-size: 20px; }
.cert small { display: block; color: var(--ink-2); font-size: 13px; }

/* ---------- ★・バー ---------- */
svg.star { width: 24px; height: 24px; vertical-align: middle; fill: #F3EAD8; stroke: var(--line); stroke-width: 1.2; }
svg.star.on { fill: var(--spark); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 0 #D9A800); }
.stars { display: inline-flex; gap: 4px; align-items: center; }
.stars svg.star:nth-child(3) { transform: scale(1.15); }
.stars.big svg.star { width: 56px; height: 56px; }
.stars.sm svg.star { width: 14px; height: 14px; }
.star.starpop { animation: starpop .5s var(--poyon) both; }
.bar { height: 14px; border-radius: 7px; background: var(--sand); overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, var(--sc), var(--spark)); transition: width .25s linear; }
.bar.low i { background: linear-gradient(90deg, var(--peach), var(--ok)); }
.bar .walker { position: absolute; top: -7px; width: 24px; height: 24px; margin-left: -12px; transition: left .25s linear; }

/* ---------- テンキー ---------- */
.pad { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; margin: 0 auto; }
.pad-disp { height: calc(var(--key-h) + 4px); border-radius: 16px; background: #fff; border: 3px solid var(--sc); display: flex; align-items: center; justify-content: flex-end; padding: 0 18px; font-family: var(--font-display); font-size: calc(var(--key-h) * .56); letter-spacing: .04em; overflow: hidden; }
.pad-disp .ph { font-family: var(--font-body); font-weight: 900; color: var(--ink-3); font-size: 18px; letter-spacing: 0; margin-right: auto; }
.pad.off .pad-disp { border-color: var(--line); }
.pad-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pad-keys.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.key { appearance: none; border: 2px solid var(--line); background: #fff; color: var(--ink); border-radius: 14px; height: var(--key-h); font-family: var(--font-display); font-size: 27px; box-shadow: 0 4px 0 var(--line); margin-bottom: 4px; transition: transform .05s, box-shadow .05s; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.key:active:not(:disabled), .key.down { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.key.fn { font-family: var(--font-body); font-weight: 900; font-size: 17px; background: var(--cream-2); }
.key.fn.sym { font-family: var(--font-display); font-size: 27px; }
.key.ok { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 4px 0 var(--yellow-d); font-family: var(--font-body); font-weight: 900; font-size: 19px; }
.key.ok:active:not(:disabled) { box-shadow: 0 1px 0 var(--yellow-d); }
.key:disabled { opacity: .45; }

/* ---------- そろばんの台（Board）・案内 ---------- */
.sbw { width: 100%; display: flex; justify-content: center; }
.sbw svg { display: block; max-width: 100%; height: auto; }
.board { background: #fff; border-radius: 22px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 35%, #fff), var(--sh-s); padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 4px; min-height: 0; position: relative; }
.board-map { height: 6px; border-radius: 3px; background: var(--sand); position: relative; margin: 0 6px; }
.board-map i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--sc); }
.board-map[hidden] { display: none; }
.board-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; display: flex; align-items: center; }
.board-scroll::-webkit-scrollbar { display: none; }
.board-scroll .sbw { width: max-content; min-width: 100%; justify-content: flex-start; }
.board-scroll svg.sb { max-width: none; flex: none; margin: 0 auto; }   /* 中央寄せは auto の余白で（justify-content:center だと はみ出した左が スクロールで見えない） */
.board-names { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); padding: 0 8px; }
.sb .zone-r { opacity: .55; }
.sb .zone-r.law { fill: #FFE1C2; } .sb .zone-r.jitsu { fill: #D9F0FB; } .sb .zone-r.ans, .sb .zone-r.q { fill: #DDF5E6; }
.sb .zone-l rect { fill: rgba(255, 233, 74, .9); }
.sb .zone-l text { font: 900 12px var(--font-body); fill: var(--ink); }
.sb .rodmark { fill: rgba(255, 241, 0, .28); animation: rodpulse 1.1s ease-in-out infinite; }
.sb .unit-flag text { font: 900 12px var(--font-body); fill: #fff; }
.sb .unit-flag rect { fill: var(--ok); }
.sb .unit-flag circle { fill: #fff; stroke: var(--ok); stroke-width: 3; }
.sb .pt-comma { fill: var(--ink); } .sb .pt-dec { fill: var(--ok); }
.sb .lockband { fill: rgba(154, 138, 126, .14); }
.sb.shake-rod .lockband { animation: shake .35s; }
.sb .oopsb path.o { stroke: var(--bead-oops); animation: none; }
.sb .mkb .o { stroke: var(--bead-glow); stroke-width: 5; filter: drop-shadow(0 0 3px rgba(255, 241, 0, .9)); animation: glowp 1.1s ease-in-out infinite; }
.guide { display: flex; align-items: center; gap: 10px; background: #FFF4D0; box-shadow: 0 0 0 3px var(--sun); border-radius: 16px; padding: 6px 12px 6px 6px; min-height: 52px; flex: none; margin: 3px; }
.guide .gwk { width: 40px; height: 40px; flex: none; }
.guide .gt { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.guide b.g-main { font-weight: 900; font-size: 16px; }
.guide .g-chant { font-size: 14px; font-weight: 900; }
.guide small { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.guide.oops { background: #FFEBDA; box-shadow: 0 0 0 3px var(--peach); }
.guide .btn.g-ok { min-height: 40px; padding: 4px 14px; font-size: 15px; margin: 0; flex: none; }
b.kk-n { color: var(--kk-n); } b.kk-k { color: var(--kk-k); } b.kk-ten { color: var(--kk-ten); }
.kk-n, .kk-k, .kk-ten { font-weight: 900; }

/* ---------- はじめて ---------- */
.start-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-top: 10px; }
.start-hero .wk { width: 150px; height: 160px; }
.start-hero h1 { font-family: var(--font-display); font-size: 34px; line-height: 1.1; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px -1.5px 0 #fff; }
.start-hero p { color: var(--ink-2); }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pickgrid .chipb { min-height: 46px; padding: 6px 8px; font-size: 15px; }
.namebox { text-align: center; font-family: var(--font-display); font-size: 24px; min-height: 1.4em; color: var(--sd); }
.colors { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.colorb { appearance: none; border: 3px solid transparent; background: none; padding: 3px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; }
.colorb .av { width: 52px; height: 52px; }
.colorb[aria-pressed="true"] { border-color: var(--ink); }
.step-dots { display: flex; gap: 6px; justify-content: center; }
.step-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.step-dots i.on { background: var(--sc); }

/* ---------- たてもの ---------- */
.bldg-sign { background: #fff; border-radius: 18px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 35%, #fff), var(--sh-s); }
.bldg-sign h1 { font-family: var(--font-display); font-size: 22px; line-height: 1.2; flex: 1; min-width: 0; }
.bldg-sign small { display: block; font-family: var(--font-body); font-weight: 700; font-size: 12px; color: var(--ink-2); }
.bldg { width: 100%; max-width: 420px; margin: 0 auto; }
.bldg svg { display: block; width: 100%; height: auto; }
.bldg .part { fill: var(--sc); opacity: 0; transition: opacity .4s; }
.bldg .part[data-on="1"] { opacity: 1; }
.bldg .part.ghost { fill: none; stroke: var(--line); stroke-dasharray: 4 6; opacity: 1; }
.bldg .roof { fill: var(--sd); }
.blk { position: relative; padding: 14px 0 4px; }
.blk-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.blk-h .ln { flex: 1; height: 2px; background: var(--line); border-radius: 1px; }
.road { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 8px; justify-items: center; padding: 10px 4px 16px; }
.road svg.path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.road svg.path path { fill: none; stroke: var(--sc); stroke-width: 4; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .8; }
.node { appearance: none; border: 4px solid var(--sc); background: #fff; color: var(--ink); width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 5px 0 color-mix(in srgb, var(--sc) 55%, #fff); position: relative; display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; padding: 0; margin-bottom: 5px; }
.node:active:not(.lock) { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--sc) 55%, #fff); }
.node .sid { line-height: 1; }
.node .stars { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); gap: 1px; }
.node .ttl { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); width: 120px; font: 900 11.5px/1.3 var(--font-body); color: var(--ink-2); text-align: center; }
.node.lock { background: #F3EAD8; border-color: var(--line); color: var(--ink-3); box-shadow: 0 5px 0 var(--line); }
.node.lock svg.lk { width: 22px; height: 22px; }
.node.done { background: var(--sl); }
.node.now { animation: ring 1.2s ease-in-out infinite; }
.node .here-wk { position: absolute; left: 50%; bottom: calc(100% + 2px); width: 48px; height: 52px; transform: translateX(-50%); pointer-events: none; }
.node .here { position: absolute; right: -14px; top: -14px; background: var(--chip-bg); color: var(--chip-ink); font: 900 11px/1 var(--font-body); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.node.door { border-radius: 16px; width: 56px; height: 56px; border-color: var(--pink); box-shadow: 0 5px 0 color-mix(in srgb, var(--pink) 55%, #fff); }
.node.door.lock { border-color: var(--line); box-shadow: 0 5px 0 var(--line); }
.node.door svg { width: 26px; height: 26px; }
.node.kentei { width: 80px; height: 80px; font-size: 14px; }
.node.kentei .burst { position: absolute; z-index: -1; width: 96px; height: 96px; left: -12px; top: -12px; }
.node.matome::before { content: "Ôn tập"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font: 900 10px/18px var(--font-body); padding: 0 8px; background: repeating-linear-gradient(90deg, rgba(255, 233, 74, .9) 0 6px, rgba(255, 243, 170, .9) 6px 12px); border-radius: 3px; white-space: nowrap; color: var(--ink); }
.node-cell { display: flex; flex-direction: column; align-items: center; position: relative; min-height: 86px; padding-top: 10px; z-index: 1; }
.node-cell.has-wk { padding-top: 50px; }
.kansei { background: linear-gradient(135deg, var(--yellow-l), #fff); }
.kansei h2 { color: var(--sd); }
.kansei .btn { margin-top: 6px; }

/* ---------- ステージ説明 ---------- */
.stage-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stage-title { font-family: var(--font-display); font-size: 24px; line-height: 1.25; }
.stage-chant { font-size: 18px; font-weight: 900; }
.wkbox { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px; align-items: end; }
.wkbox .wk { width: 110px; height: 120px; }
.wkbox .bub { margin-bottom: 30px; }
.steps { display: flex; align-items: flex-start; gap: 2px; justify-content: center; overflow-x: auto; padding: 4px 0; }
.step { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 1 96px; min-width: 70px; }
.step .sbw { width: 100%; max-width: 86px; }
.step p { font-size: 12px; font-weight: 900; text-align: center; line-height: 1.35; }
.step .v { font-family: var(--font-display); font-size: 18px; color: var(--sd); }
.step-ar { margin-top: 30px; color: var(--ink-3); width: 16px; height: 16px; flex: none; }
.demo-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.demo-box .sbw { max-width: 360px; }
.demo-cap { min-height: 1.5em; text-align: center; font-weight: 900; font-size: 16px; }
.demo-cap .ch { display: block; font-size: 15px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fact { background: var(--cream-2); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 900; }
.stage-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stage-btns .btn.wide1 { grid-column: 1 / -1; }

/* ---------- ほんばん ---------- */
.play { height: calc(100dvh - var(--sat) - var(--sab)); min-height: 0; display: flex; flex-direction: column; max-width: 1180px; margin: 0 auto; padding: calc(var(--sat) + 10px) max(12px, var(--sar)) calc(var(--sab) + 8px) max(12px, var(--sal)); gap: 8px; overflow: hidden; position: relative; z-index: 1; }
.pbar { display: flex; align-items: center; gap: 10px; min-height: 48px; flex: none; }
.pbar .pt { flex: 1; min-width: 0; font-weight: 900; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar .pt small { display: block; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* 10/9 小見出しが「（」で切れない（…にする） */
.pbar .pc { font-family: var(--font-display); font-size: 17px; white-space: nowrap; }
.pbar .pc small { font-family: var(--font-body); font-weight: 900; font-size: 13px; color: var(--ink-2); }
.pbar .tm { font-weight: 900; font-size: 15px; color: var(--ink-2); background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.pbar .tm.low { color: var(--ok); border-color: var(--oops); background: #FFEBDA; }
.dots { display: flex; gap: 6px; justify-content: center; flex: none; flex-wrap: wrap; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); display: block; position: relative; }
.dots i.cur { background: #fff; box-shadow: inset 0 0 0 3px var(--sc); }
.dots i.ok { background: var(--sc); }
.dots i.ok::after { content: ""; position: absolute; left: 3px; top: 4px; width: 5px; height: 2.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.dots i.ng { background: var(--oops); }
.pmain { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.qarea { position: relative; background: #fff; border-radius: 22px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 35%, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: 6px; padding: 10px; min-height: 0; overflow: auto; scrollbar-width: thin; }  /* 10/9 hidden → auto＋safe center：とても 長い 問題でも 上下が 切れず、スクロールで 見られる（ふだんは play.js の fit() が 字を 小さくして 収める） */
@media (max-height: 700px) { .scr-play .qarea .qsb .sbw svg { max-height: 27vh; } }  /* 10/9 よむ問題の そろばんが 小さい iPhone（SE）で 枠から はみ出さない */
.aarea { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.pmain.m-pad .qarea { flex: 1; } .pmain.m-pad .aarea { flex: none; }
.pmain.m-soro .qarea { flex: none; } .pmain.m-soro .aarea { flex: 1; }
.pmain.m-soro .aarea .board { flex: 1; min-height: 120px; }
.pmain.m-sheet .qarea { flex: 1; } .pmain.m-sheet .aarea { flex: none; }
.qlead { font-weight: 900; font-size: 16px; color: var(--ink-2); text-align: center; line-height: 1.4; }
.qbig { font-family: var(--font-display); font-size: clamp(40px, 9vw, 72px); line-height: 1.1; }
.qexpr { font-family: var(--font-display); font-size: clamp(34px, 8vw, 64px); line-height: 1.2; white-space: nowrap; display: flex; align-items: center; gap: .22em; }
.qexpr .q { color: var(--sd); }
.qexpr .op { color: var(--ink-2); font-size: .8em; }
.qexpr .law i { font-style: normal; display: inline-block; padding: 0 .04em; border-radius: .12em; }
.qexpr .law i.on { background: var(--marker); color: var(--sd); }
.mitori { display: inline-grid; grid-template-columns: auto auto; column-gap: 10px; font-family: var(--font-display); font-size: clamp(28px, 6.4vw, 46px); line-height: 1.22; }
.mitori .op { color: var(--ink-2); text-align: center; }
.mitori .n { text-align: right; }
.mitori .ln { grid-column: 1 / -1; height: 3px; background: var(--ink); border-radius: 2px; margin: 4px 0; }
.mitori .q { grid-column: 1 / -1; text-align: right; color: var(--sd); }
.mitori.many { font-size: clamp(22px, 4.8vw, 34px); line-height: 1.15; }
.dg { display: inline-block; width: .64em; text-align: center; }
.kuku-q { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kuku-q .yomi { font-size: 18px; font-weight: 900; color: var(--sd); }
.sbtools { display: flex; gap: 8px; flex: none; }
.sbtools .btn { flex: 1 1 auto; min-width: 0; padding-inline: 10px; }
.sbtools .btn.sub { flex: 0 1 auto; }
.sbtools .btn.main { flex: 1 1 36%; }
.sbtools .btn.hint .av { width: 28px; height: 28px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 520px; margin: 0 auto; }
.choices.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices .btn { min-height: 64px; font-size: 22px; white-space: normal; }
.choices .btn.disp { font-family: var(--font-display); font-size: 28px; }
.choices .btn.ng { --bc: #FFEBDA; --bd: var(--oops); }
.choices .btn.ok { --bc: var(--yellow-l); --bd: var(--sun); }
.pmain.side { flex-direction: row; }
.pmain.side .qarea { flex: 0 0 auto; max-width: 42%; min-width: 96px; padding: 8px 10px; }
.pmain.side .qlead { display: none; }
.pmain.side .aarea { flex: 1 1 0; min-width: 0; }
.pmain.side .mitori { font-size: 28px; }
@media (min-width: 720px) and (orientation: landscape), (orientation: landscape) and (max-height: 520px) {
  .pmain { flex-direction: row; }
  .pmain.m-pad .qarea { flex: 1 1 55%; min-width: 0; }
  .pmain.m-pad .aarea { flex: 1 1 45%; min-width: 0; justify-content: center; }
  .pmain.m-pad .aarea .pad { max-width: 440px; width: 100%; margin: 0 auto; }
  .pmain.m-soro .qarea { flex: 1 1 36%; min-width: 0; }
  .pmain.m-soro .aarea { flex: 1 1 64%; min-width: 0; }
  .pmain.m-sheet .qarea { flex: 1 1 58%; } .pmain.m-sheet .aarea { flex: 1 1 42%; justify-content: center; }
}
/* フラッシュ */
.flash-v { font-family: var(--font-display); font-size: clamp(64px, 22vw, 168px); line-height: 1; min-height: 1em; display: flex; align-items: center; justify-content: center; }
.flash-v.cd { color: var(--sc); }
.flash-v.ask { font-size: clamp(30px, 7vw, 52px); color: var(--sd); }
/* 正解・まちがい（qarea に重ねる） */
.fb { position: absolute; inset: 0; background: rgba(255, 248, 234, .96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; z-index: 5; cursor: pointer; text-align: center; padding: 8px; }
.fb .mark { width: var(--mk, 150px); height: var(--mk, 150px); flex: none; }
.fb .fbrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fb .wkf { width: var(--wk, 72px); height: calc(var(--wk, 72px) * 1.1); flex: none; }
.fb .fbt { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
.fb .w { font-family: var(--font-display); font-size: var(--wf, 30px); line-height: 1.2; }
.fb.ok .w { color: var(--ok); }
.fb .ans { font-weight: 900; font-size: calc(var(--wf, 30px) * .62); line-height: 1.3; white-space: nowrap; }
.fb .ans b { font-family: var(--font-display); font-size: 1.6em; color: #F07A28; margin: 0 .15em; }
.fb .tap { font-size: 12px; color: var(--ink-3); font-weight: 900; line-height: 1.4; }
.fb.row { flex-direction: row; gap: 12px; }
.fb.tiny .tap { display: none; }
.fb.narrow .fbrow { flex-direction: column; }
.fb.narrow .fbt { align-items: center; text-align: center; }
.mark .circ { fill: none; stroke: var(--ok); stroke-width: 14; stroke-linecap: round; }
.anim .mark .circ { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .38s ease-out forwards; }
.anim .pop { animation: pop .32s var(--poyon) both; }
.fastbadge { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: var(--yellow); color: var(--ink); font-family: var(--font-display); font-size: 16px; padding: 4px 14px; border-radius: 999px; box-shadow: 0 3px 0 var(--yellow-d); z-index: 7; animation: pop .32s var(--poyon) both; white-space: nowrap; }
.combo { position: absolute; right: 10px; top: 10px; z-index: 7; font-family: var(--font-display); font-size: 22px; color: var(--sd); background: #fff; border-radius: 999px; padding: 2px 12px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 35%, #fff); animation: pop .3s var(--poyon) both; }
.cutin { position: absolute; left: -4px; right: -4px; top: 50%; transform: translateY(-50%); background: var(--kk-box); color: var(--ink); padding: 10px 16px; text-align: center; font-weight: 900; font-size: 18px; z-index: 8; box-shadow: 0 6px 0 var(--yellow-d), var(--sh); animation: cutin 1.2s ease-out both; pointer-events: none; }
.cutin small { display: block; font-size: 12px; color: var(--ink-2); }
.hon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; cursor: pointer; text-align: center; }
.hon .wk { width: 110px; height: 118px; }
.hon .disp { font-size: 28px; color: var(--sd); }
.lawband { display: flex; gap: 4px; align-items: center; font-size: 13px; color: var(--ink-2); }
/* けんていの答案 */
.sheet { width: 100%; height: 100%; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: max-content; gap: 8px; align-content: start; padding: 2px; }  /* 10/9 grid-auto-rows：行の高さを 中身に 合わせる（前は 画面の高さで 行が つぶれ、たて書きの 見取算が 下へ はみ出していた） */
.sheet .sq { appearance: none; border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 6px 6px 4px; text-align: right; font-family: var(--font-display); font-size: 16px; line-height: 1.25; display: flex; flex-direction: column; min-height: 72px; color: var(--ink); }
.sheet .sq .no { font: 900 11px/1 var(--font-body); color: var(--ink-3); text-align: left; }
.sheet .sq .ex { white-space: nowrap; }
.sheet .sq .ex.v { font-size: 16px; line-height: 1.3; font-variant-numeric: tabular-nums; }  /* 10/9 14px → 16px（読みやすく）。けたが たてに そろうように */
.sheet .sq .ansf { margin-top: auto; border-top: 2px solid var(--sand); color: var(--sd); min-height: 1.3em; font-size: 18px; white-space: nowrap; }
.sheet .sq .ansf.long { font-size: 15px; } .sheet .sq .ansf.xlong { font-size: 12px; }  /* 10/9 長い こたえは 小さく（枠から はみ出さない） */
.sheet .sq.cur { border-color: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 35%, #fff); }
.sheet .sq.done .ansf { color: var(--ink); }
.sheet .sq.right { background: var(--sl); } .sheet .sq.wrong { background: #FFEBDA; }
.sheet .sq .tag { font: 900 10px/1.3 var(--font-body); color: var(--ok); text-align: left; }
.sheet .sq .right-ans { font-size: 13px; color: #F07A28; }
/* クイズ：けたをタップ */
.rodpick .sb.live { cursor: pointer; }
.sb .rodhit { fill: transparent; }
.sb .rodhit:hover { fill: rgba(255, 241, 0, .18); }

/* ---------- けっか ---------- */
.res-top { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.anim .stamp { animation: stamp .45s .2s var(--poyon) both; }
.res-wk { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: end; gap: 4px; width: 100%; max-width: 520px; }
.res-wk .wk { width: 120px; height: 130px; }
.res-wk .bub { margin-bottom: 36px; text-align: left; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.stat { background: #fff; border-radius: 16px; padding: 10px 6px; text-align: center; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 35%, #fff); }
.stat small { display: block; font-size: 13px; font-weight: 900; color: var(--ink-2); }
.stat b { font-family: var(--font-display); font-size: 30px; line-height: 1.3; }
.stat b .u { font-size: 14px; font-family: var(--font-body); font-weight: 900; }
.unlock { background: var(--sl); border-radius: 16px; padding: 10px 14px; font-weight: 900; text-align: center; }
.unlock .disp { color: var(--sd); }
.nigate { display: flex; flex-direction: column; gap: 8px; }
.nigate .ng { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 8px 10px; box-shadow: 0 0 0 2px var(--line); }
.nigate .ng .sbw { width: 72px; }
.nigate .ng .ex { font-family: var(--font-display); font-size: 16px; }
.nigate .ng .ra { font-family: var(--font-display); font-size: 20px; color: #F07A28; }
.nigate .ng .ra small { font-family: var(--font-body); font-size: 11px; color: var(--ink-2); display: block; }
.crane-win { width: 100%; max-width: 360px; height: 120px; margin: 0 auto; }
.res-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.res-btns .btn.wide1 { grid-column: 1 / -1; }
.hinttxt { background: var(--cream-2); border-radius: 14px; padding: 8px 14px; font-size: 14px; text-align: center; }

/* ---------- けんていじょう ---------- */
.subj-tabs { display: flex; gap: 8px; }
.subj-tabs .chipb { flex: 1; }
.subj-tabs .chipb svg { width: 16px; height: 16px; vertical-align: -2px; }
.rule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.rule div { background: var(--cream-2); border-radius: 14px; padding: 8px 4px; }
.rule b { font-family: var(--font-display); font-size: 22px; display: block; color: var(--sd); }
.rule small { font-weight: 900; font-size: 12px; }
.kyubig { font-family: var(--font-display); font-size: clamp(26px, 7.4vw, 40px); color: var(--sd); line-height: 1.1; white-space: nowrap; flex: none; }  /* 10/9「けんていじ／ょう」の割れを直した */
.michi { display: flex; gap: 8px; flex-wrap: wrap; }
.michi .chipb { border-color: var(--sun); box-shadow: 0 3px 0 var(--sun); }

/* ---------- 九九カード ---------- */
.kuku { max-width: 820px; }
.kk-tabs { display: flex; gap: 8px; }
.kk-tabs .chipb { flex: 1; font-family: var(--font-display); font-size: 18px; min-height: 52px; }
.kk-tabs .chipb[aria-pressed="true"] { background: var(--kk-box); color: var(--ink); border-color: var(--kk-box); box-shadow: 0 3px 0 var(--yellow-d); }
.kk-sheet { background: #fff; border-radius: 22px; padding: 14px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--kk-box) 60%, #fff), var(--sh-s); display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .kk-sheet { grid-template-columns: minmax(0, 1fr) 150px; align-items: start; } }
.kk-sec { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: stretch; margin-bottom: 14px; }
.kk-box { background: var(--kk-box); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; line-height: 1.15; text-align: center; padding: 6px 2px; }
.kk-box.five { background: var(--sl); }
.kk-box b { font-size: 24px; }
.kk-rows { display: flex; flex-direction: column; gap: 6px; }
.kk-prac { font-size: 13px; font-weight: 900; color: var(--ink-2); }
.kk-row { appearance: none; border: 2px dotted #5BC0EB; background: #fff; border-radius: 10px; padding: 6px 10px; font: 900 16px/1.4 var(--font-body); color: var(--ink); text-align: left; display: flex; align-items: center; gap: 8px; position: relative; }
.kk-row b { font-size: 1.15em; }
.kk-row.now { background: linear-gradient(transparent 20%, var(--marker) 20%, var(--marker) 85%, transparent 85%); }
.kk-row.off { color: var(--ink-3); border-color: var(--line); }
.kk-row.off b { color: var(--ink-3) !important; }
.kk-row.gold { box-shadow: 0 0 0 2px var(--gold); }
.kk-row .sbw { width: 44px; margin-left: auto; flex: none; }
.kk-row .spk { margin-left: auto; width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.kk-dots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .kk-dots { grid-template-columns: 1fr; } }
.kk-dot { background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kk-dot .g { display: grid; grid-template-columns: repeat(2, 12px); gap: 3px; }
.kk-dot .g i { width: 12px; height: 12px; border-radius: 50%; background: var(--d); display: block; }
.kk-dot .g i.e { background: transparent; border: 1.5px dashed var(--line); }
.kk-dot b { font-family: var(--font-display); font-size: 14px; }
.kk-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.wcard { background: #fff; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 0 0 2px var(--line); min-height: 88px; }
.wcard.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 55%, #fff); }
.wcard.gold { box-shadow: 0 0 0 3px var(--gold); }
.wcard.silver { box-shadow: 0 0 0 3px #B9C3CC; }
.wcard.off { opacity: .5; }
.wcard b { font-size: 13px; line-height: 1.35; }
.wcard small { font-size: 11px; color: var(--ink-2); line-height: 1.4; }
.wcard .id { font-family: var(--font-display); font-size: 11px; color: var(--ink-3); }

/* ---------- ミニゲーム（mg_core の DOM。位置は mg_core、見た目はここ） ---------- */
.mg { min-height: calc(100dvh - var(--sat) - var(--sab)); padding: calc(var(--sat) + 6px) max(8px, var(--sar)) calc(var(--sab) + 6px) max(8px, var(--sal)); }
.mg-top { background: #fff; border-radius: 16px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 45%, #fff); margin-bottom: 8px; }
.mg-title { display: flex; align-items: center; gap: 6px; font-size: 15px; min-width: 0; overflow: hidden; }
.mg-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-score b { font-family: var(--font-display); font-size: 22px; }
.mg-combo { font-family: var(--font-display); color: var(--sd); font-size: 18px; }
.mg-stage { background: #fff; border-radius: 22px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 35%, #fff); overflow: hidden; }
.mg-card { border-radius: 22px; }
.mg-card h2 { font-family: var(--font-display); font-size: 24px; }
.mg-howto-txt { font-size: 17px; }
.mg-count b { font-family: var(--font-display); color: var(--sd); }
.mg-result .mg-res-score b { font-family: var(--font-display); font-size: 40px; display: block; line-height: 1.1; }
.mg-result .mg-res-score small { font-weight: 900; color: var(--ink-2); }
.mg-res-rows { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.mg-res-rows b { font-family: var(--font-display); }
.mg-bub { max-width: 70%; }

/* ---------- ダイアログ・トースト・紙ふぶき（core の DOM） ---------- */
.dlg-wrap { background: rgba(58, 44, 37, .35); }
.dlg { background: #fff; border-radius: 22px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 35%, #fff), var(--sh); }
.dlg h2 { font-family: var(--font-display); font-size: 22px; line-height: 1.4; }
.dlg p { font-weight: 700; color: var(--ink-2); }
.dlg .row .btn { flex: 1; min-width: 110px; }
.toast { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 35%, #fff), var(--sh); font-weight: 900; border-radius: 18px; }
.placeholder h1 { font-family: var(--font-display); font-size: 22px; margin-bottom: 8px; }
.kukutbl { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; font-size: 12px; font-weight: 900; text-align: center; }
.kukutbl span { background: var(--cream-2); border-radius: 4px; padding: 3px 0; }
.kukutbl span.h { background: var(--kk-box); }

/* ---------- そろばん（soroban_ext.js の層。珠は平らな 2色・入っている珠が --bead-on） ---------- */
.sb use { --bf: var(--bead-off); }
.sb use.on { --bf: var(--bead-on); --bead-4: var(--bead-on-line); }
.sb use.shk { animation: rodshake .35s ease-in-out; }
.sb .zone-c.law { fill: #F07A28; } .sb .zone-c.jitsu { fill: #00A0E9; } .sb .zone-c.ans, .sb .zone-c.q { fill: #2F9C6A; }
.sb .rodmark.soft { opacity: .45; animation: none; }
.sb .unit-flag path { fill: var(--ok); }
.sb .unit-flag .uf-ring { fill: #fff; stroke: var(--ok); stroke-width: 3; }
.sb .unit-flag .uf-dot { fill: var(--ok); stroke: none; }
.sb .pt-comma, .sb .pt-dec { stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke; }
.sb .oopsb .o { fill: none; stroke: var(--bead-oops); stroke-width: 5.5; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(255, 179, 107, .9)); }
.board.bare { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.board-scroll { touch-action: pan-x; }
.board.scrolling .board-scroll { cursor: grab; }
.board.dragging .board-scroll { cursor: grabbing; }
.board-map b { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--bead-glow); box-shadow: 0 0 0 2px var(--sd); display: none; }
.board-bub { position: absolute; top: 6px; left: 8px; z-index: 6; font-size: 15px; padding: 6px 12px; white-space: nowrap; pointer-events: none; border-color: var(--oops); animation: pop .25s var(--poyon) both; -webkit-line-clamp: 1; }
.board-bub::after { left: calc(var(--tail, 26px) - 7px); border-color: var(--oops); }
.guide[hidden] { display: none; }
.guide .gwk { border-radius: 50%; position: relative; }
.guide .g-kuku { color: var(--sd); }
.guide .g-sep { color: var(--ink-3); font-weight: 700; }
.guide .g-label:empty, .guide .g-chant:empty, .guide .g-sub:empty { display: none; }
/* 案内バーは 高さを変えない（文が かわるたびに 盤の大きさが ゆれないように）。説明は 2行＋2行まで */
.guide { height: 80px; min-height: 0; overflow: hidden; }
.guide .gt { height: 100%; justify-content: center; overflow: hidden; gap: 1px; }
.guide b.g-main { font-size: 15.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
.guide .g-sub { font-size: 13px; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
.guide .g-sub small.g-label { font-size: inherit; font-weight: 900; color: var(--ink-2); margin-right: .45em; }
.guide .g-sub .g-chant { font-size: inherit; font-weight: 900; }
.guide.ask { background: #fff; box-shadow: 0 0 0 3px var(--sc); }
.guide.ask b.g-main { color: var(--sd); }
.guide .btn.g-ok { box-shadow: 0 4px 0 var(--yellow-d); }

/* ---------- ミニゲーム（mg_core の札・結果の細部）。ゲームの中の部品も ここ ---------- */
.mg-quit { width: 42px; height: 42px; border-radius: 12px; }
.mg-top .wk.mg-wk, .mg-top .wk { width: 56px; height: 60px; }
.mg-howto p, .mg-placeholder p { font-weight: 900; font-size: 17px; line-height: 1.6; max-width: 26em; }
.mg-meta small { color: var(--ink-2); font-size: 13px; font-weight: 900; }
.mg-demo { background: #fff; border-radius: 18px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 45%, #fff); padding: 8px; }
.mg-pause h2 { font-family: var(--font-display); font-size: 24px; }
.mg-pause .btn { min-width: 200px; }
.mg-count b { font-family: var(--font-display); font-weight: 400; color: var(--sd); text-shadow: 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff; animation: pop .3s var(--poyon) both; }
.mg-count b { font-size: clamp(48px, 18vw, 96px); white-space: nowrap; }   /* I：「スタート！」が 375px で 切れない（M1 の要望） */
.mg-result { gap: 8px; }
.mg-result .stars svg.star { width: 44px; height: 44px; }
.mg-best em, .mg-bench em { font-weight: 900; }
.mg-bench { color: var(--ink-2); }
.mg-coin { display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.mg-coin svg.ic { width: 24px; height: 24px; }
.mg-coin b { font-family: var(--font-display); font-size: 20px; color: #C9900A; }
.mg-cap small, .mg-coin small { color: var(--ink-2); font-size: 13px; }
.mg-result .wk, .mg-howto .wk { width: 110px; height: 120px; }
.mg-tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px; padding: 12px; width: 100%; max-width: 560px; margin: 0 auto; }
.mg-tile { appearance: none; border: 0; background: #fff; color: var(--ink); border-radius: 18px; min-height: 72px; padding: 8px; font-family: var(--font-display); font-size: clamp(24px, 7vw, 40px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 45%, #fff), 0 5px 0 color-mix(in srgb, var(--pink) 60%, #fff); margin-bottom: 5px; transition: transform .07s; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.mg-tile:active { transform: translateY(3px); }
.mg-tile.on { background: var(--yellow-l); }
.mg-tile.ok { background: var(--sl); box-shadow: 0 0 0 3px var(--sc), 0 5px 0 var(--sd); animation: pop .25s var(--poyon) both; }
.mg-tile.ng { background: #FFEBDA; box-shadow: 0 0 0 3px var(--peach), 0 5px 0 var(--peach); animation: shake .35s; }
.mg-tile small { display: block; font-family: var(--font-body); font-weight: 900; font-size: 13px; color: var(--ink-2); }
.mg-big { font-family: var(--font-display); font-size: clamp(48px, 16vw, 120px); line-height: 1.05; text-align: center; color: var(--ink); }
.mg-big.sd { color: var(--sd); }

/* ---------- 動き ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes stamp { from { transform: scale(1.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes starpop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes okp { 50% { filter: brightness(1.12); transform: translateY(-2px); } }
@keyframes ring { 0%, 100% { box-shadow: 0 5px 0 color-mix(in srgb, var(--sc) 55%, #fff), 0 0 0 0 color-mix(in srgb, var(--sc) 45%, transparent); } 50% { box-shadow: 0 5px 0 color-mix(in srgb, var(--sc) 55%, #fff), 0 0 0 10px transparent; } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cutin { 0% { transform: translateY(-50%) scaleX(0); opacity: 0; } 12% { transform: translateY(-50%) scaleX(1); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rodpulse { 50% { opacity: .45; } }
@keyframes glowp { 50% { stroke-width: 8; stroke-opacity: .6; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes rodshake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
@keyframes unlockring { 0% { transform: scale(1); } 60% { transform: scale(1.6); opacity: .4; } 100% { transform: scale(1); } }
.unlocking { animation: unlockring .6s ease-out both; }
.hopping { animation: hop .5s ease-in-out 2; }
.shake { animation: shake .35s; }

/* ---------- 小さい高さ・大きい画面 ---------- */
@media (max-height: 680px) {
  :root { --key-h: 44px; }
  .pad, .pad-keys { gap: 6px; }
  .qexpr { font-size: clamp(30px, 7vw, 52px); }
  .mitori { font-size: clamp(24px, 5.4vw, 38px); }
  .flash-v { font-size: clamp(56px, 18vw, 130px); }
  .sbtools .btn { min-height: 46px; font-size: 17px; }
  .guide { height: 72px; }
  .guide b.g-main { font-size: 15px; }
}
@media (max-height: 540px) {
  :root { --key-h: 38px; }
  .play { padding-top: 4px; padding-bottom: 6px; gap: 5px; }
  .pbar { min-height: 42px; } .pbar .ibtn { width: 40px; height: 40px; }
  .dots i { width: 9px; height: 9px; }
  .qlead { font-size: 14px; }
  .qarea { padding: 6px; gap: 4px; border-radius: 18px; }
  .qexpr { font-size: clamp(28px, 6.4vw, 44px); }
  .mitori { font-size: 24px; line-height: 1.12; }
  .sbtools .btn { min-height: 42px; font-size: 16px; padding: 6px 12px; }
  .guide { height: 64px; padding: 4px 10px 4px 4px; }
  .guide .g-sub { -webkit-line-clamp: 1; }
  .guide .gwk { width: 32px; height: 32px; }
  .guide b.g-main { font-size: 14.5px; } .guide .g-chant { font-size: 12.5px; }
  .hon .wk { width: 80px; height: 86px; }
}
@media (min-width: 1000px) {
  :root { --fr: 14px; }
  body { font-size: 18px; }
  .tbar h1 { font-size: 26px; }
  .bldg-sign h1 { font-size: 30px; }
  .stage-title { font-size: 28px; }
  .stat b { font-size: 36px; }
  .road { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .btn.big { font-size: 20px; padding: 10px 18px; }
  .wkbox { grid-template-columns: 92px minmax(0, 1fr); }
  .wkbox .wk { width: 92px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}

/* 10/9 そろばんの 部分を 光らせる（soroban_ext の focusPart。1-1 の せつめい・かいせつ） */
.sb.fp-five .beads use[data-k], .sb.fp-one .beads use[data-u] { opacity: .2; }
.sb.fp-bar .beads use, .sb.fp-dot .beads use { opacity: .28; }
.sb .fpl { pointer-events: none; }
.sb .fp-band { fill: rgba(255, 233, 74, .9); stroke: #F07A28; stroke-width: 4; animation: fppulse 1.2s ease-in-out infinite; }
.sb .fp-ring { fill: rgba(255, 233, 74, .35); stroke: #F07A28; stroke-width: 4; animation: fppulse 1.2s ease-in-out infinite; }
.sb .fp-dot { fill: #fff; stroke: #3A2C25; stroke-width: 1.5; }
.sb .fp-bead { fill: rgba(255, 233, 74, .45); stroke: #F07A28; stroke-width: 4; stroke-linejoin: round; animation: fppulse 1.2s ease-in-out infinite; }
@keyframes fppulse { 50% { stroke-opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sb .fp-band, .sb .fp-ring, .sb .fp-bead { animation: none; } }

/* ============================================================================
   わくまタウン VN 版（Kodomo Soroban Center）— 日本語版の style.css の あとに 足す（vi/tools/vi.mjs build）
   - 字：Nunito（本文・丸い）＋ Baloo 2（見出し・太い）。どちらも ベトナム語の 記号つき文字が ある（Zen Maru・Mochiy Pop は ない）。
     KSC の 練習ルーム（Nunito＋Be Vietnam Pro）と そろえた。
   - ベトナム語は 空白で 行を わる（日本語の keep-all・strict を もどす）。
   - 建物 1・2 の 色を 入れかえ（VN：1＝くだものや みかん色・5の なかま、2＝パンや そら色・10の なかま。core.js の WORLD_COLORS と 同じ）。
   ========================================================================== */
:root {
  --font-body: "Nunito", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Baloo 2", "Nunito", "Be Vietnam Pro", system-ui, sans-serif;
  --fw-display: 800;
}
body { word-break: normal; overflow-wrap: break-word; line-break: auto; hyphens: manual; }

body[data-world="1"]  { --sc: #F07A28; --sd: #B9520E; --sl: #FFEBDA; --sc-ink: #fff; --chip-bg: var(--sc); --chip-ink: #fff; }
body[data-world="2"]  { --sc: #00A0E9; --sd: #0074B3; --sl: #E3F4FC; --sc-ink: #fff; --chip-bg: var(--sc); --chip-ink: #fff; }

/* 見出しの 字は 日本語より 横に 長い → 少し 小さく・行間 ゆったり（ベトナム語の 上下の 記号が かさならない） */
.disp, .stage-title, .tbar h1, .card h2, .bldg-sign h1, .start-hero h1 { line-height: 1.3; }
.start-hero h1 { font-size: 30px; }
.stage-title { font-size: 22px; }
.eb { letter-spacing: .02em; }

/* 唱え方の 札「10 / bạn lớn」（日本語は「10 の なかま」）：字が 長いので 小さく */
.kk-box { font-size: 13px; padding: 6px 4px; }
.kk-box b { font-size: 22px; }

/* ひきつぎコード（日本語版は Mochiy Pop One） */
.tx .code { font-family: "Baloo 2", ui-monospace, monospace; }

/* 建物の みちの「Ở đây」（日本語は「いま」）：字が 長いので わくまの 足に かくれない ように 上に・少し 小さく */
.node .here { z-index: 2; padding: 3px 6px; font-size: 10.5px; right: -18px; }

/* 下の タブ（Thị trấn / Quảng trường / Quy tắc / Thành tích）：1行に おさめる（建物の 画面などの screens.js の タブ） */
.tabbar button { width: 76px; font-size: 10px; white-space: nowrap; letter-spacing: -.01em; }