/* ============================================================
   MatheBrücke — Theme v1.0 (Redesign)
   既存 app/mathebruecke-proto.html の <style> ブロックの中身を
   このファイルの内容で丸ごと置き換えてください。
   セレクタは既存の id / class をそのまま使っています（JS 変更不要）。
   ============================================================ */

:root{
  /* --- 色 --- */
  --bg:#ffffff;
  --tint:#f0faf6;          /* ミント50・面で使う唯一の色 */
  --tint-line:#d9f2ea;
  --panel:#ffffff;
  --ink:#17251f;
  --soft:#4d6259;
  --mint:#0d7a63;          /* 主ボタン・枠・進み具合 */
  --mint-600:#12967a;
  --mint-100:#d9f2ea;
  --mint-line:#cfe9e0;
  --mint-shadow:#0a6152;
  --grass:#6cb33f;
  --coral:#c94a2e;         /* 「もういちど」 */
  --coral-50:#fff0ec;
  --coral-line:#f6c9bc;
  --acorn:#e6a52c;         /* ごほうびだけ */
  --acorn-50:#fdf2d8;
  --acorn-ink:#8a5f0d;
  --acorn-line:#f0dca8;
  --card:#ffffff;
  --card-border:#e2ebe6;
  --sel:var(--mint-100);
  --sel-border:var(--mint);
  --shadow:0 2px 10px rgba(23,37,31,.06);

  /* --- 書体 ---
     外部依存ゼロを保つため OS 標準の丸ゴシックを優先。
     Zen Maru Gothic / Nunito を同梱または CDN で読み込むと
     デザイン案どおりの見た目になります（integration.md 参照）。 */
  --font-jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","M PLUS Rounded 1c","Yu Gothic UI","Yu Gothic",system-ui,sans-serif;
  --font-de:"Nunito","Quicksand","Avenir Next","Segoe UI Variable Display",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Wave 5-4 → W8-⑧: 季節スキン（設計 §16）。変えるのは環境の色だけ
   （--mint / --coral / --acorn 系の UI アクセントは 4 季節とも不変）。
   確定版パレット。各季節で「空・地・葉」の 3 役が そろうように 組んでいる:
     --bg        紙の色（ほぼ白。季節の気配だけ）
     --tint      面の色（指示カードの下地・季節の絵の空）
     --tint-line 面の輪郭
     --grass     葉と地面（ことばの庭の植物・場所の絵の木が これを継ぐ）
   --tint は「かくにん（にほんご）」の暖色（--acorn-50 #FDF2D8）と
   ぶつからない明度・色相に選んである（あき が いちばん近いので注意）。 */
html[data-season="spring"]{--bg:#fffdfe; --tint:#fdeff4; --tint-line:#f6d5e1; --grass:#6cc05a;}   /* はる — 桜の空、芽ぶいた葉 */
html[data-season="summer"]{--bg:#fbffff; --tint:#e4f5fb; --tint-line:#bfe6f3; --grass:#33a141;}   /* なつ — 高い空、こい葉 */
html[data-season="autumn"]{--bg:#fffcf7; --tint:#fbeee1; --tint-line:#eed9c0; --grass:#bf7526;}   /* あき — 澄んだ空、色づいた葉 */
html[data-season="winter"]{--bg:#fcfeff; --tint:#e8f0f5; --tint-line:#d2e1ea; --grass:#77a096;}   /* ふゆ — 雪あかり、ねむった葉 */

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-jp);
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
}
a{color:var(--mint);}
a:hover{color:var(--mint-600);}
.screen{display:none; width:100%; max-width:640px; padding:16px 20px 128px;}
.screen.active{display:block;}
h1{font-size:28px; line-height:1.35; margin:10px 0; font-weight:900; letter-spacing:.01em;}
h2{font-size:19px; line-height:1.4; margin:26px 0 10px; font-weight:700;}
button{font-family:inherit; cursor:pointer;}
button:focus-visible,a:focus-visible{outline:3px solid var(--mint-600); outline-offset:3px;}

/* ============================================================
   トップ（#screen-home）
   ============================================================ */
#screen-home{padding-top:30px; background:linear-gradient(var(--tint),#fff 320px);}
#screen-home h1{text-align:center; display:none;}   /* ロゴ行が見出しを兼ねる */

.mb-brand{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px;}
.mb-brand svg{flex:none;}
.mb-brand span{font:800 26px/1 var(--font-de); color:var(--mint); letter-spacing:-.01em;}

.subtitle{text-align:center; color:var(--soft); font-size:14px; margin:0 0 4px;}

/* 吹き出し＋クルミ */
.mb-bubble{
  position:relative; max-width:300px; margin:22px auto 0;
  background:#fff; border:2px solid var(--tint-line); border-radius:20px;
  padding:15px 20px; text-align:center; font-size:19px; font-weight:700; line-height:1.55;
  text-wrap:balance;
}
.mb-bubble::after{
  content:""; position:absolute; left:50%; bottom:-11px; width:18px; height:18px;
  background:#fff; border-right:2px solid var(--tint-line); border-bottom:2px solid var(--tint-line);
  transform:translateX(-50%) rotate(45deg);
}
.home-hero{                 /* 既存の絵文字ヒーロー枠をクルミの置き場所として再利用 */
  display:flex; justify-content:center; margin:22px 0 0; font-size:0;
}
.home-hero .mb-kurumi{width:164px; height:180px;}

/* どんぐりカウンタ */
.mb-acorn-chip{
  display:flex; align-items:center; justify-content:center; gap:7px; width:max-content;
  margin:14px auto 0; background:var(--acorn-50); border-radius:999px; padding:8px 16px;
}
.mb-acorn-chip b{font:800 16px/1 var(--font-de); color:var(--acorn-ink);}
.mb-acorn-chip span{font-size:13px; color:var(--acorn-ink); white-space:nowrap;}

.home-lead{
  text-align:center; color:var(--ink); font-size:20px; font-weight:700;
  margin:30px 0 4px;
}

/* 学年ボタン */
.grade-btn{
  display:flex; align-items:center; gap:18px; text-align:left;
  width:100%; min-height:92px; margin:14px 0 0; padding:18px 22px;
  border:2.5px solid var(--mint-line); border-radius:22px;
  background:var(--tint); box-shadow:none; font-size:24px; font-weight:700; color:var(--ink);
}
.mb-grade-no{
  flex:none; width:46px; text-align:center; font-style:normal;
  font:800 42px/1 var(--font-de); color:var(--mint);
}
.mb-grade-label{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.mb-grade-label b{font-size:24px; font-weight:700; line-height:1.1;}
.mb-grade-label i{font:600 13px/1.2 var(--font-de); font-style:normal; color:var(--soft);}
.grade-btn:active{background:var(--mint-100); border-color:var(--mint);}

.home-note{
  text-align:center; color:var(--soft); font-size:12.5px; line-height:1.7;
  margin:20px 0 0;
}

/* W112: 独語モードの ときだけ 出す 案内（大人向け・独語）。字は 少し 大きく、左揃えで 読ませる */
.home-bridge{
  max-width:520px; margin:22px auto 0; padding:12px 15px;
  background:#fff; border:1.5px solid var(--tint-line); border-radius:14px;
  color:var(--soft); font:400 13px/1.75 var(--font-de); text-align:left;
}
.home-bridge a{color:var(--mint); font-weight:700; white-space:nowrap;}

/* シールちょうへの入口（mbui.js が生成） */
#stickers-entry{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:56px; margin-top:16px;
  border:2.5px solid var(--mint-line); border-radius:18px;
  background:var(--tint); color:var(--mint); font-size:18px; font-weight:700;
}

/* 先生用入口 — 子どもの動線から視覚的に切り離す */
#teacher-entry{
  margin-top:24px; width:100%; background:none; border:none;
  border-top:1px solid #eef3f0; border-radius:0; padding:18px 12px 0;
  color:var(--soft); font:600 14px/1.5 var(--font-de);
}

/* ============================================================
   問題画面（#screen-quiz）
   ============================================================ */
#progress-row{display:flex; align-items:center; gap:8px; margin:6px 0 16px; min-height:44px;}
#mb-dots{display:flex; align-items:center; gap:6px;}
#mb-dots i{width:11px; height:11px; border-radius:999px; background:var(--mint-100); display:block;}
#mb-dots i.done{background:var(--mint);}
#mb-dots i.now{width:14px; height:14px; background:#fff; border:3.5px solid var(--mint);}
#progress-chip{
  background:none; border:none; border-radius:0; padding:0;
  font:700 15px/1 var(--font-de); color:var(--soft);
}
#followup-chip{
  margin-left:auto; background:var(--acorn-50); border:1.5px solid var(--acorn-line);
  color:var(--acorn-ink); border-radius:999px; padding:7px 12px; font-size:13px; font-weight:700;
}
#lang-chip{
  margin-left:auto; font:800 13px/1 var(--font-de); letter-spacing:.06em;
  color:#fff; background:var(--mint); border:none; border-radius:999px; padding:8px 13px;
}
#followup-chip:not([hidden]) ~ #lang-chip{display:none;}
#preview-back{
  margin-left:auto; background:#fff; border:1.5px solid var(--card-border); border-radius:10px;
  padding:8px 12px; font:600 13px/1 var(--font-de); color:var(--soft);
}

/* 指示カード — 縦積み（文 → 音声・言語ボタン） */
#instruction-box{
  background:var(--tint); border:2px solid var(--tint-line); border-radius:22px;
  box-shadow:none; padding:18px 18px 16px;
  display:flex; flex-direction:column; gap:15px; align-items:stretch;
}
#instruction-text{
  font-family:var(--font-de); font-size:27px; font-weight:700; line-height:1.4;
  color:var(--ink); flex:none; text-wrap:pretty;
}
/* 日本語のかくにん問は日本語書体・少し小さく */
#screen-quiz.mb-ja #instruction-box{background:#fffaf0; border-color:#f6e6c4;}
#screen-quiz.mb-ja #instruction-text{font-family:var(--font-jp); font-size:21px; line-height:1.7;}
#screen-quiz.mb-ja .icon-btn{border-color:var(--acorn-line); color:var(--acorn-ink);}

#instruction-actions{
  display:flex; flex-direction:row; gap:10px; align-items:center; justify-content:flex-start;
}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:auto; min-width:52px; height:52px; padding:0 17px; font-size:22px;
  border-radius:16px; border:2.5px solid var(--mint-line); background:#fff;
  box-shadow:none; color:var(--mint);
}
.icon-btn .mb-label{font:700 17px/1 var(--font-jp); color:currentColor; white-space:nowrap;}
.icon-btn:active{background:var(--tint);}

#content-area{margin-top:18px;}

/* 刺激 */
.stim{
  background:#fff; border:none; border-radius:0; box-shadow:none;
  padding:8px 0 4px; margin-bottom:18px; text-align:center;
}
.stim-big{font:800 46px/1.25 var(--font-de); letter-spacing:.02em; color:var(--ink);}
.stim-emoji{font-size:34px; line-height:1.6;}
.stim-sub{font:800 30px/1.3 var(--font-de); margin-top:10px;}
/* W8: 単位換算の刺激 */
.um-wrap{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
.um-left{font:800 40px/1.2 var(--font-de); color:var(--ink);}
.um-eq{font:800 34px/1.2 var(--font-de); color:var(--soft);}
.um-right{font:800 34px/1.2 var(--font-de); color:var(--mint); border:2px solid var(--tint-line);
  border-radius:14px; padding:4px 16px; background:var(--tint);}
/* W9: 棒グラフと表（Daten und Zufall） */
.chart-wrap{margin-bottom:16px;}
.chart-title{font:800 17px/1.3 var(--font-de); color:var(--ink);}
.chart-unit{font:600 12px/1.3 var(--font-de); color:var(--soft); margin-bottom:8px;}
.chart-cols{display:flex; align-items:flex-end; gap:12px; height:150px; justify-content:center; padding:0 4px;}
.chart-col{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; flex:1; max-width:64px;}
.chart-value{font:800 14px/1.2 var(--font-de); color:var(--ink); margin-bottom:4px;}
.chart-bar{width:100%; border-radius:8px 8px 0 0; background:var(--mint); min-height:6px;}
.chart-cat{font:700 12px/1.4 var(--font-de); color:var(--soft); margin-top:6px;}
.tbl-wrap{margin-bottom:16px;}
.tbl{border-collapse:collapse; margin:0 auto; font:700 15px/1.4 var(--font-de); color:var(--ink);}
.tbl th,.tbl td{border:2px solid var(--tint-line); padding:6px 14px; text-align:center;}
.tbl th{background:var(--tint); color:var(--mint);}
/* W12: 時刻の線（timeline） */
.tl-wrap{margin-bottom:16px;}
.tl-rail{position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin:36px 6px 0;}
.tl-rail::before{content:''; position:absolute; left:2%; right:2%; top:34px; height:3px; background:var(--mint-line);}
.tl-stop{display:flex; flex-direction:column; align-items:center; flex:1; gap:4px; min-width:0;}
.tl-label{font:700 11px/1.2 var(--font-de); color:var(--soft); text-align:center;}
.tl-dot{width:14px; height:14px; border-radius:50%; background:var(--mint); position:relative; z-index:1;}
.tl-time{font:800 13px/1.2 var(--font-de); color:var(--ink); white-space:nowrap;}
/* W13: 単位正方形の敷き詰めと単位立方体 */
.ta-wrap{margin-bottom:16px;}
.ta-row{display:flex; justify-content:center;}
.ta-cell{width:34px; height:34px; border:1.5px solid var(--mint-line); background:var(--tint); margin:1px;}
.ta-note{font:700 13px/1.4 var(--font-de); color:var(--soft); margin-top:8px;}
.cc-wrap{margin-bottom:16px;}
.cc-layer{transform:skewY(-14deg); transform-origin:50% 100%; margin-top:14px;}
.cc-cube{width:30px; height:30px; border:1.5px solid var(--mint-line); background:var(--mint-100); margin:1px;}
.cc-note{font:700 13px/1.4 var(--font-de); color:var(--soft); margin-top:12px;}
/* W14: 展開図（ネット） */
.nm-wrap{margin-bottom:16px;}
.nm-grid{display:grid; gap:3px; justify-content:center; margin-top:6px;}
.nm-cell{width:44px; height:44px; border:2px solid var(--mint); background:var(--tint); border-radius:6px;
  display:flex; align-items:center; justify-content:center; font:800 15px/1 var(--font-de); color:var(--ink);}
.nm-cell.nm-empty{border:none; background:transparent;}
/* W15: 形と変換（格子）・実験の表 */
.st-wrap{margin-bottom:16px;}
.st-grid{display:grid; gap:2px; justify-content:center; margin-top:6px;}
.st-cell{width:30px; height:30px; border:1.5px solid var(--tint-line); background:#fff; border-radius:4px;}
.st-cell.st-on{background:var(--mint); border-color:var(--mint);}
/* W17: 実験の表 */
.ex-wrap{margin-bottom:16px;}
.ex-tbl td{border:2px solid var(--tint-line); padding:6px 18px; text-align:center; font:700 15px/1.4 var(--font-de);}
.ex-tbl td:first-child{background:var(--tint); color:var(--mint);}
.bag{
  display:inline-block; border:2px dashed var(--tint-line); border-radius:16px;
  padding:10px 14px; margin:5px; font-size:26px; background:var(--tint);
}
.pos-cell{display:inline-flex; flex-direction:column; align-items:center; margin:0 12px;}
.pos-emoji{font-size:46px;}
.pos-label{font-size:14px; color:var(--soft); margin-top:2px;}

/* W4: 数直線（number_line）。色・書体は既存の CSS 変数のみを使う */
.nl-wrap{position:relative; width:100%; max-width:420px; margin:16px auto 34px; padding-top:34px;}
.nl-mark{position:absolute; top:0; transform:translateX(-50%); font:800 15px/1.2 var(--font-de); color:var(--ink); text-align:center; white-space:nowrap;}
.nl-mark::after{content:'▼'; display:block; font-size:13px; line-height:1; color:var(--mint);}
.nl-line{position:relative; height:2px; background:var(--mint-line);}
.nl-tick{position:absolute; top:0; height:10px; border-left:2px solid var(--mint-line);}
.nl-tick-label{position:absolute; top:12px; transform:translateX(-50%); font:700 11px/1.15 var(--font-de); color:var(--soft); white-space:nowrap;}
.nl-tick:first-child .nl-tick-label{transform:translateX(0);}
.nl-tick:last-child .nl-tick-label{transform:translateX(-100%);}

/* 選択肢カード */
#cards-container{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
#cards-container.two-col{grid-template-columns:repeat(2,1fr);}
.card{
  position:relative; min-height:84px; padding:10px;
  font:800 32px/1.2 var(--font-de); color:var(--ink);
  border:2.5px solid var(--mint-line); border-radius:20px; background:#fff; box-shadow:none;
}
.card.text-card{font:700 20px/1.45 var(--font-de);}
.card.selected{
  background:var(--mint-100); border:3px solid var(--mint); color:var(--mint);
  box-shadow:0 0 0 4px rgba(13,122,99,.14);
}
.card .order-badge{
  position:absolute; top:-8px; left:-8px; right:auto; width:30px; height:30px; border-radius:50%;
  background:var(--mint); color:#fff; font:800 16px/30px var(--font-de); text-align:center;
}
#reset-order{
  margin-top:14px; width:100%; min-height:52px; font-size:17px; font-weight:700;
  border-radius:16px; border:2.5px solid var(--card-border); background:#fff; color:var(--soft);
}

#confirm-btn{
  position:fixed !important; left:50%; transform:translateX(-50%); bottom:20px;
  width:min(600px, calc(100% - 40px)); min-height:66px;
  font-size:24px; font-weight:700; border:none; border-radius:20px;
  background:var(--mint); color:#fff; box-shadow:0 5px 0 var(--mint-shadow);
}
#confirm-btn:active{transform:translateX(-50%) translateY(3px); box-shadow:0 2px 0 var(--mint-shadow);}
#confirm-btn:disabled{background:#cfe0da; box-shadow:none; cursor:default;}

/* ============================================================
   フィードバック（#feedback）
   ============================================================ */
#feedback{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  padding:0 22px calc(24px + env(safe-area-inset-bottom));
  background:#fff; border-top:3px solid var(--tint-line);
  border-radius:30px 30px 0 0; box-shadow:0 -14px 34px rgba(23,37,31,.12);
  display:flex; flex-direction:column; gap:14px; align-items:stretch;
}
#feedback[hidden]{display:none;}
#feedback.fb-correct{background:#fff; border-top-color:var(--tint-line);}
#feedback.fb-wrong{background:#fff; border-top-color:var(--coral-line);}

/* Wave 3: moment（クルミの小さな反応）。固定配置なのでクイズ画面のレイアウトを動かさない（設計 §20）。display:flex のため [hidden] で消す */
#moment{position:fixed; left:12px; right:12px; top:calc(10px + env(safe-area-inset-top)); z-index:20; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(23,37,31,.14);}
#moment[hidden]{display:none;}
#moment .mb-kurumi{width:44px; height:48px; flex:none;}
#moment-text{font-size:16px; font-weight:700; line-height:1.4; text-align:left;}

/* mbui.js が差し込む見出し行（クルミ＋大見出し＋どんぐり） */
.mb-fb-head{display:flex; align-items:flex-end; gap:12px; margin-top:-46px;}
.mb-fb-head .mb-kurumi{width:112px; height:124px; flex:none;}
.mb-fb-title{padding-bottom:14px; flex:1; min-width:0;}
.mb-fb-title b{display:block; font-size:32px; font-weight:900; line-height:1.15;}
.fb-correct .mb-fb-title b{color:var(--mint);}
.fb-wrong .mb-fb-title b{color:var(--coral); font-size:25px;}
.mb-fb-acorn{
  display:inline-flex; align-items:center; gap:6px; margin-top:11px;
  background:var(--acorn-50); border-radius:999px; padding:6px 12px;
  font-size:14px; font-weight:700; color:var(--acorn-ink); white-space:nowrap;
}

#feedback-msg{
  font-size:15px; line-height:1.6; text-align:left; color:var(--soft);
  margin:0; text-wrap:pretty;
}
.fb-correct #feedback-msg:empty{display:none;}

#feedback-sentence{
  display:flex; gap:12px; align-items:center; font:700 19px/1.45 var(--font-de);
  background:var(--tint); border:none; border-radius:18px; padding:15px 16px;
}
.fb-wrong #feedback-sentence{background:var(--coral-50);}
#feedback-sentence[hidden]{display:none;}
#feedback-sentence #feedback-sentence-text{flex:1;}
#feedback-sentence .icon-btn{min-width:52px; padding:0; font-size:22px;}
.fb-wrong #feedback-sentence .icon-btn{border-color:var(--coral-line); color:var(--coral);}

#next-btn{
  width:100%; min-height:66px; font-size:24px; font-weight:700; border:none; border-radius:20px;
  background:var(--mint); color:#fff; box-shadow:0 5px 0 var(--mint-shadow);
}
.fb-wrong #next-btn{background:var(--coral); box-shadow:0 5px 0 #a53b23;}

/* ============================================================
   おわり（#screen-end）
   ============================================================ */
#screen-end{background:linear-gradient(var(--tint),#fff 300px); padding-top:26px;}
#screen-end h1{text-align:center; color:var(--mint); font-size:26px;}
.end-hero{display:flex; justify-content:center; font-size:0; margin:0;}
.end-hero .mb-kurumi{width:140px; height:154px;}
.end-cheer{text-align:center; font-size:16px; color:var(--soft); margin:4px 0 0;}

.mb-end-acorn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:max-content;
  margin:16px auto 0; background:var(--acorn-50); border-radius:999px; padding:10px 18px;
}
.mb-end-acorn b{font:800 22px/1 var(--font-de); color:var(--acorn-ink);}
.mb-end-acorn span{font-size:15px; font-weight:700; color:var(--acorn-ink);}

#end-list,#end-retry-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
#end-list li,#end-retry-list li{
  position:relative; font-size:16px; line-height:1.4; margin:0;
  background:var(--tint); border-radius:14px; padding:14px 14px 14px 46px;
}
#end-list li::before{
  content:""; position:absolute; left:15px; top:50%; width:18px; height:10px;
  margin-top:-6px; border-left:3.4px solid var(--mint); border-bottom:3.4px solid var(--mint);
  transform:rotate(-45deg); border-radius:1px;
}
#end-list li.mb-seed{background:var(--tint);}
#end-list li.mb-seed::before{
  content:"◦"; width:auto; height:auto; margin:0; transform:none; border:none;
  font:800 22px/1 var(--font-de); color:var(--grass); top:14px; left:17px;
}
#end-retry-list li{background:var(--coral-50); padding-left:46px;}
#end-retry-list li::before{
  content:"↺"; position:absolute; left:16px; top:12px;
  font:700 20px/1 var(--font-de); color:var(--coral);
}

.primary{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:66px; margin-top:14px; font-size:22px; font-weight:700;
  border:none; border-radius:20px; background:var(--mint); color:#fff;
  box-shadow:0 5px 0 var(--mint-shadow);
}
#restart-btn{
  background:var(--tint); color:var(--mint); border:2.5px solid var(--mint-line);
  box-shadow:none; min-height:56px; font-size:18px;
}
.parent-note{margin-top:26px; font-size:11.5px; color:var(--soft); line-height:1.7;}
.parent-note code{font-family:var(--font-de); font-size:11px;}

/* ============================================================
   シールちょう（#screen-stickers・mbui.js が生成）
   ============================================================ */
.mb-topbar{display:flex; align-items:center; gap:12px; min-height:44px; margin-bottom:18px;}
.mb-back{
  width:44px; height:44px; flex:none; border:2px solid var(--card-border); border-radius:14px;
  background:#fff; font-size:20px; line-height:1; color:var(--ink);
}
.mb-topbar h1{font-size:20px; margin:0; font-weight:700; white-space:nowrap;}
.mb-page-chip{
  margin-left:auto; font:700 14px/1 var(--font-de); color:var(--acorn-ink);
  background:var(--acorn-50); padding:8px 12px; border-radius:999px; white-space:nowrap;
}

.sticker-book{
  background:#fffaf0; border:2px solid #f6e6c4; border-radius:22px; padding:18px;
}
.sticker-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:11px;}
.sticker{
  aspect-ratio:1; border-radius:16px; background:#fdf6e8; border:2px dashed #ecdcb8;
  display:flex; align-items:center; justify-content:center;
}
.sticker.filled{background:#fff; border:2px solid var(--acorn-line);}
.sticker svg{width:60%; height:60%;}

.sticker-progress{margin-top:18px;}
.sticker-progress p{margin:0 0 9px; font-size:17px; font-weight:700;}
.sticker-progress p b{font:800 26px/1 var(--font-de); color:var(--acorn-ink); margin:0 4px;}
.sticker-bar{height:14px; border-radius:999px; background:#f0ece2; overflow:hidden;}
.sticker-bar i{display:block; height:100%; border-radius:999px; background:var(--acorn);}

.mb-kurumi-note{
  display:flex; align-items:center; gap:10px; margin-top:18px;
  background:var(--tint); border-radius:18px; padding:14px 16px;
  font-size:15px; line-height:1.65;
}
.mb-kurumi-note .mb-kurumi{width:66px; height:72px; flex:none;}

/* ============================================================
   復習を すすめる（#screen-review・mbui.js が生成）
   ============================================================ */
#screen-review{background:linear-gradient(var(--tint),#fff 320px); padding-top:30px;}
#screen-review .mb-bubble{margin-top:0;}
.review-list{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.review-item{
  display:flex; align-items:center; gap:13px;
  border:2px solid #eef3f0; border-radius:18px; padding:14px 15px;
}
.review-item em{
  font:700 13px/1 var(--font-de); font-style:normal; color:var(--mint);
  background:var(--mint-100); padding:6px 9px; border-radius:8px; flex:none;
}
.review-item span{display:flex; flex-direction:column; gap:4px;}
.review-item span b{font:700 18px/1.2 var(--font-de);}
.review-item span i{font-style:normal; font-size:14px; color:var(--soft);}
.mb-later{
  width:100%; min-height:52px; margin-top:6px; border:none; background:none;
  font-size:17px; font-weight:700; color:var(--soft);
}
.mb-minutes{text-align:center; font-size:13px; color:var(--soft); margin:10px 0 0;}

/* ============================================================
   先生用 Übersicht — 子ども画面と別の顔（独語・高密度・マスコットなし）
   ============================================================ */
#screen-teacher{font-family:var(--font-de); padding-top:16px;}
#screen-teacher h1{font-size:22px; font-weight:800; margin:12px 0 6px;}
.teacher-back{
  margin-top:4px; background:#fff; border:1.5px solid var(--card-border); border-radius:10px;
  color:var(--soft); font:600 14px/1 var(--font-de); text-decoration:none; padding:11px 13px;
}
.teacher-intro{
  background:var(--tint); border:none; border-radius:16px; box-shadow:none;
  padding:16px 18px; font-size:13.5px; line-height:1.7; color:var(--ink);
}
.teacher-intro p{margin:8px 0;}
.teacher-section{margin:26px 0 6px; font-size:15px; font-weight:800; color:var(--soft); letter-spacing:.02em;}
.teacher-item{
  background:#fff; border:none; border-bottom:1px solid #eef3f0; border-radius:0;
  box-shadow:none; padding:15px 2px; margin:0;
}
.teacher-item-head{display:flex; align-items:center; gap:10px;}
.teacher-badge{
  background:var(--mint-100); color:var(--mint); border-radius:6px; padding:6px 8px;
  font:800 12px/1 var(--font-de); flex:none;
}
.teacher-title{flex:1; font-size:16px; font-weight:700;}
.teacher-try{
  flex:none; border:1.5px solid var(--mint-line); background:var(--tint); color:var(--mint);
  border-radius:10px; padding:10px 13px; font:700 13px/1 var(--font-de);
}
.teacher-example{font-size:12.5px; color:var(--soft); margin-top:7px; font-style:normal;}
.teacher-note{font-size:12.5px; margin-top:5px; line-height:1.6; color:var(--soft);}

.fatal-error{
  margin:40px 20px; padding:16px; background:var(--coral-50);
  border:2px solid var(--coral-line); border-radius:14px; font-size:15px; white-space:pre-wrap;
}

/* ============================================================
   動きは控えめに・設定を尊重する
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ============================================================
   きんのどんぐり交換（MB-7.3・mbui.js v1.1 が生成）
   ============================================================ */
.mb-gold-frame{
  margin-top:14px; background:var(--acorn-50); border:2px solid var(--acorn-line);
  border-radius:22px; padding:16px 18px;
}
.mb-gold-title{font-size:15px; font-weight:800; color:var(--acorn-ink); margin-bottom:10px;}
.mb-gold-row{display:flex; flex-wrap:wrap; gap:9px;}
.mb-gold-row .sticker{width:62px; height:62px; flex:none;}
.mb-gold-row .sticker.mb-gold{background:#fff; border:2px solid var(--acorn-line);}
.mb-gold-row .sticker.mb-gold-empty{background:transparent; border:2px dashed var(--acorn-line);}
.mb-gold-row .sticker.mb-gold-more b{font:800 18px/1 var(--font-de); color:var(--acorn-ink);}
.mb-exchange-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:64px; margin-top:12px; padding:10px 14px;
  border:none; border-radius:18px; background:var(--acorn); color:#4a3303;
  font-size:17px; font-weight:800; line-height:1.4; box-shadow:0 4px 0 #c98f1c;
}
.mb-exchange-btn:active{transform:translateY(2px); box-shadow:0 2px 0 #c98f1c;}
.mb-exchange-note{margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--acorn-ink); text-align:center;}
.mb-exchange-note b{font:800 20px/1 var(--font-de); margin:0 2px;}
.mb-chip-gold{display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding-left:9px; border-left:2px solid var(--acorn-line);}


/* ============================================================
   ドリル（MB-8.9 / 8.11）
   ホームの入口（#drill-entry）と カテゴリ選択（#screen-drill）。
   以前は index.html の <style> にあったものを、他画面と同じ
   ここに移し、.card の 32px Nunito を継承しないよう型を与える。
   ============================================================ */

/* ホームの主動線 — 学年ボタンより一段強い（塗り＋影） */
#drill-entry{
  display:flex; align-items:center; gap:16px; text-align:left;
  width:100%; min-height:88px; margin:20px 0 28px; padding:16px 20px;
  border:none; border-radius:22px; background:var(--mint); color:#fff;
  box-shadow:0 5px 0 var(--mint-shadow);
}
#drill-entry:active{transform:translateY(3px); box-shadow:0 2px 0 var(--mint-shadow);}

/* ============================================================
   v0.6: まいにち 5もん（1年→2年・順番に 5もん／日 ＋ きのうの 5もんを 復習）
   息子が ほぼ専用で 使う モードなので、主動線より 一段 控えめな 見た目に する
   （塗りボタンに しない・小さく・下の ほうに 置く）。
   ============================================================ */
#daily-entry{
  display:block; margin:10px auto 6px; padding:8px 16px;
  border:1px dashed #cfd8d3; border-radius:14px; background:transparent; color:#6b7a74;
  font:400 14px/1.3 var(--font-jp); min-height:0;
}
#daily-entry:active{transform:translateY(1px);}
.mb-drill-mark{flex:none; display:flex; width:46px; height:46px;}
.mb-drill-label{display:flex; flex-direction:column; gap:6px; min-width:0;}
.mb-drill-label b{font:700 22px/1.25 var(--font-jp);}
.mb-drill-label i{font:400 14px/1.35 var(--font-jp); font-style:normal; color:var(--mint-100);}

/* カテゴリ選択画面 */
#drill-head{display:flex; align-items:center; gap:12px; min-height:44px; margin-bottom:4px;}
#drill-head h2{flex:1; min-width:0; margin:0; font-size:22px; font-weight:700;}
.drill-lead{margin:14px 0 4px; font-size:16px; line-height:1.6; color:var(--soft);}
.drill-group{
  margin:24px 0 10px; opacity:1;
  font:700 15px/1.45 var(--font-jp); color:var(--soft);
}
.drill-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}

/* .card を借りるが、数字カード用の 32px Nunito は継承させない */
.card.drill-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  min-height:112px; padding:14px 14px 13px; text-align:left; height:100%;
  font:400 16px/1.5 var(--font-jp); color:var(--ink);
  border:2.5px solid var(--mint-line); border-radius:20px; background:#fff;
}
.card.drill-card:active{background:var(--mint-100); border-color:var(--mint);}
.drill-card-id{
  flex:none; font:800 12px/1 var(--font-de); font-style:normal; opacity:1;
  color:var(--mint); background:var(--mint-100); padding:6px 8px; border-radius:7px;
}
.drill-card-label{
  align-self:stretch; flex:0 0 auto;   /* 列方向 flex で幅が縮まないように（早すぎる折返しの防止） */
  font:700 18px/1.45 var(--font-jp); text-wrap:pretty;
}
.drill-card-count{
  font:600 13px/1 var(--font-de); font-style:normal; opacity:1; color:var(--soft);
}

/* ドリル中の進捗は点をやめて数字だけ（1 セット 8 問で点が潰れるため） */
#progress-chip{white-space:nowrap;}
#screen-quiz.mb-drill #mb-dots{display:none;}
#screen-quiz.mb-drill #progress-chip{font:700 17px/1 var(--font-de); color:var(--ink);}

#end-today-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:56px; margin-top:12px; font-size:18px; font-weight:700;
  border:2.5px solid var(--mint-line); border-radius:20px;
  background:var(--tint); color:var(--mint);
}
#book-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:56px; margin-top:16px;
  border:2.5px solid var(--mint-line); border-radius:18px;
  background:var(--tint); color:var(--mint); font-size:18px; font-weight:700;
}
#book-btn[hidden]{display:none;}
#screen-page{background:linear-gradient(var(--tint),#fff 300px); padding-top:26px;}
#screen-page h1{text-align:center; color:var(--mint); font-size:26px;}
#page-headline{text-align:center; font-size:19px; font-weight:700; line-height:1.6; margin:16px 0 0;}
#page-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
#page-list li{font-size:16px; line-height:1.5; background:var(--tint); border-radius:14px; padding:14px 16px;}
#page-count{
  text-align:center; font-size:17px; font-weight:700; color:var(--acorn-ink);
  background:var(--acorn-50); border-radius:999px; padding:12px 16px; margin:22px 0 0;
}
#page-closing{text-align:center; font-size:16px; color:var(--soft); margin:18px 0 0;}

/* Wave 2: クルミ判定問（character-help）— 刺激の下にクルミを最小表示（テキストは指示領域のみ） */
.mb-charhelp{display:flex; justify-content:center; align-items:flex-end; margin:2px 0 8px;}
.mb-charhelp .mb-kurumi{width:84px; height:92px; flex:none;}

/* Wave 5-1: ことばの庭（概念の成長を records から導出して読んで描くだけ） */
#garden-entry{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:56px; margin-top:16px;
  border:2.5px solid var(--mint-line); border-radius:18px;
  background:var(--tint); color:var(--mint); font-size:18px; font-weight:700;
}
#garden-head{display:flex; align-items:center; gap:12px; min-height:44px; margin-bottom:4px;}
#garden-head h2{flex:1; min-width:0; margin:0; font-size:22px; font-weight:700;}
#garden-summary{margin:14px 0 4px; font-size:17px; font-weight:700; color:var(--mint);}
#garden-legend{margin:0 0 6px; font-size:14px; line-height:1.6; color:var(--soft);}
.garden-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.garden-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  min-height:96px; padding:14px 14px 13px; text-align:left; height:100%;
  border:2.5px solid var(--mint-line); border-radius:20px; background:#fff;
}
.garden-face{font-size:28px; line-height:1;}
.garden-label-ja{align-self:stretch; font:700 17px/1.45 var(--font-jp); color:var(--ink); text-wrap:pretty;}
.garden-label-de{font:600 13px/1.4 var(--font-de); color:var(--soft);}

/* Wave 5-2: 行き先選択（場所は世界のオブジェクト・表示名は言語レイヤー — 設計 §11/§15） */
#place-head{display:flex; align-items:center; gap:12px; min-height:44px; margin-bottom:4px;}
#place-head h2{flex:1; min-width:0; margin:0; font-size:22px; font-weight:700;}
#place-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px;}
.card.place-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:112px; padding:16px; height:100%; text-align:center;
  font:700 18px/1.4 var(--font-jp); color:var(--ink);
  border:2.5px solid var(--mint-line); border-radius:20px; background:#fff;
}
.card.place-card:active{background:var(--mint-100); border-color:var(--mint);}
.place-icon{font-size:40px; line-height:1;}
.place-name{font:700 18px/1.4 var(--font-jp);}

/* 今日の1ページの場所行（Wave 5-2） */
#page-place{margin:6px 0 0; font-size:17px; font-weight:700; color:var(--mint); text-align:center;}
#page-place[hidden]{display:none;}

/* Wave 5-3: 今日の1ページ「そだったもの」（既存の #page-list と同じ流儀） */
#page-grown-block{margin-top:22px;}
#page-grown-block[hidden]{display:none;}
#page-grown-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
#page-grown-list li{font-size:16px; line-height:1.5; background:var(--tint); border-radius:14px; padding:14px 16px;}

/* Wave 5-⑤: ダイヤのどんぐり（きんのどんぐり 10 → ダイヤ 1） */
.mb-diamond-frame{
  margin-top:14px; background:var(--acorn-50); border:2px solid var(--acorn-line);
  border-radius:22px; padding:16px 18px;
}
.mb-chip-diamond{display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding-left:9px; border-left:2px solid var(--acorn-line);}
#mb-diamond-got{margin:12px 0 0; text-align:center; font:800 17px/1.5 var(--font-jp); color:#1f8fb0;}
#mb-diamond-got[hidden]{display:none;}
#mb-diamond-got:not([hidden]){animation:mb-diamond-pop 2s ease-in-out;}
@keyframes mb-diamond-pop{0%{transform:scale(1);}50%{transform:scale(1.06);}100%{transform:scale(1);}}

/* Wave 5-4: 季節バッジ（ホーム・表示のみ。押しても何も起きない span） */
.season-badge{display:inline-flex; align-items:center; gap:6px; margin:8px auto 0; background:var(--tint); border:2px solid var(--tint-line); border-radius:999px; padding:5px 14px; font-size:14px; font-weight:700; color:var(--soft);}


/* ════════════════════════════════════════════════════════════
   Polish v2（2026-09-11）— 見た目・手ざわりの最終磨き
   ここから下は「絵と余白」だけを扱う。id セレクタは既存のものを
   そのまま使い、JS の関数名・DOM id・記録には一切触れていない。
   ════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------
   クルミ — いき づかい と まばたき（動きは控えめ。
   prefers-reduced-motion では上のブロックが全部止める）
   ------------------------------------------------------------ */
@keyframes mb-breathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-1.5px) scale(1.015);}}
@keyframes mb-hop{0%{transform:translateY(0) scale(1);}34%{transform:translateY(-9px) scale(1.05);}66%{transform:translateY(0) scale(.98);}100%{transform:translateY(0) scale(1);}}
@keyframes mb-blink{0%,93%,100%{transform:scaleY(1);}96.5%{transform:scaleY(.1);}}
.mb-kurumi{
  transform-origin:50% 92%;
  animation:mb-breathe 4.6s ease-in-out infinite;
}
.mb-kurumi[data-pose="cheer"]{
  animation:mb-hop .66s cubic-bezier(.34,1.56,.64,1) 1, mb-breathe 4.6s ease-in-out .66s infinite;
}
.mb-kurumi .mb-eye{
  transform-origin:center; transform-box:fill-box;
  animation:mb-blink 6.4s ease-in-out infinite;
}

/* ------------------------------------------------------------
   季節の絵（ホーム・今日の1ページ の うしろ）
   色は --bg / --tint / --tint-line / --grass の 4 つだけを読む。
   UI アクセント（--mint / --coral / --acorn）は季節で変わらない。
   ------------------------------------------------------------ */
#screen-home, #screen-page{position:relative; overflow:hidden;}
.mb-season-art{
  position:absolute; left:0; right:0; top:0; height:240px;
  z-index:0; pointer-events:none; overflow:hidden;
}
.mb-season-art svg{display:block; width:100%; height:100%;}
#screen-home > *:not(.mb-season-art),
#screen-page > *:not(.mb-season-art){position:relative; z-index:1;}

/* ------------------------------------------------------------
   W42 出題画面の「今日のばしょ」背景
   といている あいだ ずっと 見えている ものなので、いちばん 弱く 置く。
   ・body に 貼る（画面ぜんたい）。#screen-quiz は max-width 640px なので
     その 中に 入れると 絵に たての ふちが 出て「板」に 見える
   ・絵は 下端の 帯（200px）だけ。たてに のばすと タブレットで ふくらむ
   ・空は CSS の かすみ。まん中は 何も 置かない
   ------------------------------------------------------------ */
#screen-quiz{position:relative;}
.mb-place-bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.mb-place-bg[hidden]{display:none;}
.mb-place-sky{
  position:absolute; left:0; right:0; top:0; height:210px; display:block;
  background:linear-gradient(var(--tint), rgba(255,255,255,0));
}
.mb-place-strip{
  position:absolute; left:0; right:0; bottom:0; height:200px; display:block;
  overflow:hidden;
}
.mb-place-strip svg{display:block; width:100%; height:100%;}
#screen-quiz > *{position:relative; z-index:1;}
/* 刺激（かず の 絵・ふうせん）は 面を 持たないので、その 下だけ 紙を 敷く */
#content-area{position:relative;}

.season-badge{display:inline-flex; align-items:center; gap:6px; margin:8px auto 0; background:var(--tint); border:2px solid var(--tint-line); border-radius:999px; padding:5px 14px; font-size:14px; font-weight:700; color:var(--soft);}


/* ════════════════════════════════════════════════════════════
   Polish v2（2026-09-11）— 見た目・手ざわりの最終磨き
   ここから下は「絵と余白」だけを扱う。id セレクタは既存のものを
   そのまま使い、JS の関数名・DOM id・記録には一切触れていない。
   ════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------
   クルミ — いき づかい と まばたき（動きは控えめ。
   prefers-reduced-motion では上のブロックが全部止める）
   ------------------------------------------------------------ */
@keyframes mb-breathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-1.5px) scale(1.015);}}
@keyframes mb-hop{0%{transform:translateY(0) scale(1);}34%{transform:translateY(-9px) scale(1.05);}66%{transform:translateY(0) scale(.98);}100%{transform:translateY(0) scale(1);}}
@keyframes mb-blink{0%,93%,100%{transform:scaleY(1);}96.5%{transform:scaleY(.1);}}
.mb-kurumi{
  transform-origin:50% 92%;
  animation:mb-breathe 4.6s ease-in-out infinite;
}
.mb-kurumi[data-pose="cheer"]{
  animation:mb-hop .66s cubic-bezier(.34,1.56,.64,1) 1, mb-breathe 4.6s ease-in-out .66s infinite;
}
.mb-kurumi .mb-eye{
  transform-origin:center; transform-box:fill-box;
  animation:mb-blink 6.4s ease-in-out infinite;
}

/* ------------------------------------------------------------
   季節の絵（ホーム・今日の1ページ の うしろ）
   色は --bg / --tint / --tint-line / --grass の 4 つだけを読む。
   UI アクセント（--mint / --coral / --acorn）は季節で変わらない。
   ------------------------------------------------------------ */
#screen-home, #screen-page{position:relative; overflow:hidden;}
.mb-season-art{
  position:absolute; left:0; right:0; top:0; height:240px;
  z-index:0; pointer-events:none; overflow:hidden;
}
.mb-season-art svg{display:block; width:100%; height:100%;}
#screen-home > *:not(.mb-season-art),
#screen-page > *:not(.mb-season-art){position:relative; z-index:1;}

/* ------------------------------------------------------------
   W42 出題画面の「今日のばしょ」背景
   といている あいだ ずっと 見えている ものなので、いちばん 弱く 置く。
   ・body に 貼る（画面ぜんたい）。#screen-quiz は max-width 640px なので
     その 中に 入れると 絵に たての ふちが 出て「板」に 見える
   ・カードは 白／--tint の 不透明な 面なので、絵の 上でも 文字は 読める
   ------------------------------------------------------------ */
#screen-quiz{position:relative;}
.mb-place-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.mb-place-bg[hidden]{display:none;}
.mb-place-bg svg{display:block; width:100%; height:100%;}
#screen-quiz > *{position:relative; z-index:1;}
/* 刺激（かず の 絵・ふうせん）は 面を 持たないので、その 下だけ 紙を 敷く */
#content-area{position:relative;}

.season-badge{display:inline-flex; align-items:center; gap:6px; margin:8px auto 0; background:var(--tint); border:2px solid var(--tint-line); border-radius:999px; padding:5px 14px; font-size:14px; font-weight:700; color:var(--soft);}


/* ════════════════════════════════════════════════════════════
   Polish v2（2026-09-11）— 見た目・手ざわりの最終磨き
   ここから下は「絵と余白」だけを扱う。id セレクタは既存のものを
   そのまま使い、JS の関数名・DOM id・記録には一切触れていない。
   ════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------
   クルミ — いき づかい と まばたき（動きは控えめ。
   prefers-reduced-motion では上のブロックが全部止める）
   ------------------------------------------------------------ */
@keyframes mb-breathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-1.5px) scale(1.015);}}
@keyframes mb-hop{0%{transform:translateY(0) scale(1);}34%{transform:translateY(-9px) scale(1.05);}66%{transform:translateY(0) scale(.98);}100%{transform:translateY(0) scale(1);}}
@keyframes mb-blink{0%,93%,100%{transform:scaleY(1);}96.5%{transform:scaleY(.1);}}
.mb-kurumi{
  transform-origin:50% 92%;
  animation:mb-breathe 4.6s ease-in-out infinite;
}
.mb-kurumi[data-pose="cheer"]{
  animation:mb-hop .66s cubic-bezier(.34,1.56,.64,1) 1, mb-breathe 4.6s ease-in-out .66s infinite;
}
.mb-kurumi .mb-eye{
  transform-origin:center; transform-box:fill-box;
  animation:mb-blink 6.4s ease-in-out infinite;
}

/* ------------------------------------------------------------
   季節の絵（ホーム・今日の1ページ の うしろ）
   色は --bg / --tint / --tint-line / --grass の 4 つだけを読む。
   UI アクセント（--mint / --coral / --acorn）は季節で変わらない。
   ------------------------------------------------------------ */
#screen-home, #screen-page{position:relative; overflow:hidden;}
.mb-season-art{
  position:absolute; left:0; right:0; top:0; height:240px;
  z-index:0; pointer-events:none; overflow:hidden;
}
.mb-season-art svg{display:block; width:100%; height:100%;}
#screen-home > *:not(.mb-season-art),
#screen-page > *:not(.mb-season-art){position:relative; z-index:1;}

/* ------------------------------------------------------------
   W42 出題画面の「今日のばしょ」背景
   といている あいだ ずっと 見えている ものなので、いちばん 弱く 置く。
   ・絵は 上と 下に 寄っていて、まん中（しき・こたえ）には かからない
   ・カードは 白／--tint の 不透明な 面なので、絵の 上でも 文字は 読める
   ・.screen の 下 padding（128px）ぶんまで 地面が のびるよう inset:0
   ------------------------------------------------------------ */
#screen-quiz{position:relative; overflow:hidden;}
.mb-place-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  opacity:.5;
}
.mb-place-bg svg{display:block; width:100%; height:100%;}
#screen-quiz > *:not(.mb-place-bg){position:relative; z-index:1;}
/* かくにん（にほんご）の 問は 指示カードが 暖色に なる。背景まで 主張すると
   2 つが けんかするので、その 間だけ さらに 引く。 */
#screen-quiz.mb-ja .mb-place-bg{opacity:.3;}
/* 刺激（かず の 絵・ふうせん）は 面を 持たないので、その 下だけ 紙を 敷く */
#content-area{position:relative;}

.season-badge{
  display:flex; width:max-content; margin:10px auto 2px;
  background:#fff; border-color:var(--tint-line); color:var(--ink);
  box-shadow:0 1px 4px rgba(23,37,31,.06);
}

/* ------------------------------------------------------------
   W59: ことばえらび（トップページだけ・プルダウン 1 つ）
   ・国旗は 使わない（国と 言語は 別。アラビア語は 20 か国以上あって 1 つの 旗に ならない）
   ・記号は「その 言語の 文字 1 字」（あ・E・T・У）。mark は NATIVE_LANGS の 1 行に 足す
   ------------------------------------------------------------ */
.lang-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0;}
.lang-lead{text-align:center; color:var(--soft); font-size:13px; font-weight:700; margin:0;}
.lang-pick-wrap{position:relative; display:inline-flex;}
.lang-select{
  appearance:none; -webkit-appearance:none; min-height:44px; padding:8px 38px 8px 16px;
  border:2px solid var(--tint-line); border-radius:999px; background:#fff; box-shadow:none;
  font:700 15px/1.25 var(--font-jp); color:var(--ink); cursor:pointer;
}
.lang-pick-wrap::after{
  content:"▾"; position:absolute; right:15px; top:50%; transform:translateY(-50%);
  color:var(--soft); font-size:13px; pointer-events:none;
}
.lang-select:active{background:var(--mint-100);}

/* ------------------------------------------------------------
   W108: 初回の ことばえらび（1 画面 まるごと。1 タップで 決まる）
   ・他の 画面は 出さない（＝この 1 枚だけ）
   ・文字は その 言語の まま（訳さない）。記号は 台帳の mark
   ------------------------------------------------------------ */
.langgate{
  display:flex; flex-direction:column; align-items:center;
  min-height:100%; padding:6px 0 8px; text-align:center;
}

/* 名のり — 何の アプリかを 先に 出す。字を 読めない 人にも 絵で 伝わる */
.langgate__brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 0 22px;}
.langgate__brand img{display:block; width:76px; height:76px; border-radius:20px;}
.langgate__wordmark{font:800 21px/1 var(--font-de); color:var(--mint); letter-spacing:.005em;}

.langgate__title{
  align-self:stretch; max-width:520px; margin:0 auto;
  font:800 26px/1.3 var(--font-de); letter-spacing:.01em; text-wrap:balance;
}
/* 独語の 2 行目は 見出しの 一部。行間を 持たせないと 下の 一覧に かぶる */
.langgate__title small{
  display:block; margin-top:7px;
  font:600 15px/1.5 var(--font-de); color:var(--soft);
}

.langgate__list{
  display:grid; grid-template-columns:1fr; gap:10px;
  width:100%; max-width:440px; margin:22px auto 0;
}

/* ことばの 1 行。地は 白 — 季節の --tint は まだ 決まっていない 場面なので 使わない */
.langgate__btn{
  display:flex; align-items:center; gap:14px;
  width:100%; min-height:72px; padding:12px 16px 12px 14px;
  border:2px solid var(--tint-line); border-radius:18px; background:#fff;
  box-shadow:0 1px 3px rgba(23,37,31,.05);
  font:700 21px/1.25 var(--font-jp); color:var(--ink);
  cursor:pointer; text-align:left;
}
.langgate__btn::after{ /* 進む しるし（字ではないので どの ことばでも 読める） */
  content:""; flex:none; width:9px; height:9px; margin-inline-start:auto; margin-inline-end:4px;
  border-right:2.5px solid var(--mint); border-top:2.5px solid var(--mint);
  transform:rotate(45deg); opacity:.55;
}
.langgate__btn:hover{border-color:var(--mint-line); background:var(--mint-50, #f0faf6);}
.langgate__btn:active{border-color:var(--mint); background:var(--mint-100); box-shadow:none; transform:translateY(1px);}
.langgate__btn:focus-visible{outline:3px solid var(--mint); outline-offset:2px;}
/* アラビア語の 行は 行ごと 右から 左へ（しるしも 自動で 反転する） */
.langgate__btn:has(.langgate__name[dir="rtl"]){direction:rtl; text-align:right;}

/* その ことばの 字を 1 字。読めない 人にも「これは 別の 字だ」と わかる */
.langgate__mark{
  flex:none; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; background:var(--mint-100); border:0;
  font:800 24px/1 var(--font-de); color:var(--mint);
}
.langgate__name{flex:0 1 auto; min-width:0; white-space:nowrap;} /* ことばの 名は 短い。途中で 折らない */

.langgate__note{
  align-self:stretch; max-width:420px; margin:22px auto 0;
  color:var(--soft); font:400 13px/1.75 var(--font-de); text-wrap:pretty;
}

/* W110/W111: 独語（授業の 言語）と 母語（対象）を 分ける **線だけ**。
   ここに 字を 置くと 独語と 英語だけの 表示に なり、この 画面に 来る 人の 多くは
   その どちらも 読めない（＝読めない 字を 壁に しない）。「独語は 授業の 言語」は
   タグと、幅 いっぱいの 1 行で 伝える。 */
.langgate__sep{
  grid-column:1 / -1; height:1px; margin:16px 0 6px;
  border:0; background:var(--tint-line);
}
.langgate__tag{
  flex:none; margin-inline-start:auto; white-space:nowrap;
  font:700 11px/1 var(--font-de); color:var(--mint); letter-spacing:.02em;
  background:var(--mint-50, #f0faf6); border:1.5px solid var(--mint-line); border-radius:999px; padding:6px 10px;
}
/* 独語の 行に しるしは 付けない（タグが 右端に 立つ ため） */
.langgate__btn:has(.langgate__tag)::after{display:none;}

@media (min-width:560px){
  .langgate__list{grid-template-columns:1fr 1fr; max-width:600px; gap:12px;}
  .langgate__btn:has(.langgate__tag){grid-column:1 / -1;} /* 独語は 1 行 まるごと */
  .langgate__title{font-size:30px;}
}
@media (max-width:380px){
  .langgate__brand img{width:64px; height:64px;}
  .langgate__title{font-size:23px;}
  .langgate__btn{min-height:66px; font-size:19px; gap:12px;}
  .langgate__mark{width:44px; height:44px; font-size:22px;}
  .langgate__sep{margin:14px 0 4px;}
}

/* 縦積みのラベルは つぶさない（column flex の既定 shrink で
   2 行目が下の行に かぶるのを防ぐ） */
.mb-drill-label > *, .mb-grade-label > *,
.garden-card > *, .card.drill-card > *, .card.place-card > *{flex:0 0 auto;}
#garden-entry span, #book-btn span, #stickers-entry span{flex:none;}
.mb-drill-label{flex:1 1 auto; min-width:0;}
.mb-exchange-btn > span{flex:none; white-space:nowrap; text-align:left;}
.mb-kurumi-note > div{flex:1 1 auto; min-width:0;}
.mb-gold-row .sticker svg{width:74%; height:74%;}
.mb-drill-label b{line-height:1.3;}
.place-name{white-space:nowrap;}

/* ------------------------------------------------------------
   ホームの入口ボタン — 絵文字 → 絵
   ------------------------------------------------------------ */
/* ラベルが「ことばの に / わ」と 割れていたのを 直す（幅が 足りている のに
   span が つぶれて 折り返していた）。行は 1 行で 固定する。 */
#garden-entry, #book-btn{
  display:flex; align-items:center; justify-content:center; gap:11px;
  width:100%; min-height:56px; padding:12px 18px;
  border:2.5px solid var(--mint-line); border-radius:18px; background:var(--tint);
  color:var(--mint); font:700 18px/1.3 var(--font-jp); box-shadow:none;
}
#garden-entry:active, #book-btn:active{background:var(--mint-100); border-color:var(--mint);}
#garden-entry > span, #book-btn > span{flex:0 0 auto; white-space:nowrap;}
.mb-btn-plant{display:block; width:30px; height:30px; flex:none; color:var(--grass);}
.mb-btn-plant svg{display:block; width:100%; height:100%;}
#book-btn svg{flex:none;}

/* ------------------------------------------------------------
   ことばの庭 — 概念ひとつを「ひとつの はち」として見せる
   ------------------------------------------------------------ */
.mb-garden-lead{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px;
  background:var(--tint); border-radius:22px; padding:14px 16px; margin:14px 0 20px;
}
.mb-garden-lead .mb-kurumi{width:66px; height:73px; flex:none;}
#garden-summary{margin:0; flex:1; min-width:160px; font-size:18px;}
#garden-legend{margin:0; flex-basis:100%; display:flex; flex-wrap:wrap; gap:4px 14px;}
.mb-legend-item{display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--soft);}
.mb-legend-plant{display:block; width:26px; height:26px; flex:none; color:var(--grass);}
.mb-legend-plant svg{display:block; width:100%; height:100%;}

.garden-grid{grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:12px;}
.garden-card{
  align-items:center; text-align:center; gap:5px;
  min-height:156px; padding:12px 10px 13px;
  border-color:var(--tint-line);
  background:linear-gradient(#fff 68%, var(--tint) 100%);
}
.garden-card[data-stage="0"]{background:#fff; border-style:dashed; border-color:#e2ebe6;}
.garden-card[data-stage="3"]{border-color:var(--mint-line);}
.garden-face{
  display:block; width:78px; height:78px; font-size:0; color:var(--grass);
}
.garden-face svg{display:block; width:100%; height:100%;}
.garden-label-ja{align-self:stretch; font-size:15px; line-height:1.45; text-align:center;}
.garden-label-de{align-self:stretch; font-size:11.5px; line-height:1.35; text-align:center;}

/* ------------------------------------------------------------
   今日の1ページ — 絵本の 1 ページ
   ------------------------------------------------------------ */
.mb-page-scene{
  height:108px; margin:16px 0 0; overflow:hidden;
  border:2px solid var(--tint-line); border-radius:22px;
  box-shadow:0 3px 12px rgba(23,37,31,.07);
}
.mb-page-scene[hidden]{display:none;}
.mb-page-scene svg{display:block; width:100%; height:100%;}
#page-place{margin-top:12px;}
#page-headline{margin-top:12px; text-wrap:pretty;}
#screen-page h2{font-size:17px; color:var(--soft); margin:24px 0 8px;}

#page-list li{position:relative; padding:14px 16px 14px 46px;}
#page-list li.mb-ok::before{
  content:""; position:absolute; left:15px; top:50%; width:18px; height:10px;
  margin-top:-7px; border-left:3.4px solid var(--mint); border-bottom:3.4px solid var(--mint);
  transform:rotate(-45deg); border-radius:1px;
}
#page-list li.mb-seed::before{
  content:"◦"; position:absolute; left:17px; top:12px;
  font:800 22px/1 var(--font-de); color:var(--grass);
}
#page-grown-list li{display:flex; align-items:center; gap:11px; padding:11px 14px;}
.mb-grown-plant{display:block; width:36px; height:36px; flex:none; color:var(--grass);}
.mb-grown-plant svg{display:block; width:100%; height:100%;}

.mb-page-bye{
  display:flex; align-items:center; gap:12px;
  background:var(--tint); border-radius:22px; padding:14px 16px; margin-top:24px;
}
.mb-page-bye .mb-kurumi{width:76px; height:84px; flex:none;}
#page-closing{margin:0; flex:1; text-align:left; font-size:17px; color:var(--ink);}

/* ------------------------------------------------------------
   行き先えらび — 5 面の顔をそろえる
   ------------------------------------------------------------ */
.mb-place-lead{display:flex; justify-content:center; margin:6px 0 2px;}
.mb-place-lead .mb-kurumi{width:96px; height:106px;}
#place-list{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));}
.card.place-card{min-height:126px; background:linear-gradient(#fff 62%, var(--tint) 100%);}
.place-icon{font-size:46px;}

/* ------------------------------------------------------------
   かぞえる刺激 — 5 こずつ 並べて 数えやすくする
   ------------------------------------------------------------ */
.stim-emoji.mb-countable{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:7px; max-width:276px; margin:0 auto; line-height:1;
}
.stim-emoji.mb-countable > span{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; font-size:32px; line-height:1;
}
.stim-emoji.mb-balloons{max-width:304px; gap:9px 10px;}
.stim-emoji.mb-balloons > span{width:44px; height:64px;}
.mb-balloon{display:block; width:100%; height:100%;}

/* ------------------------------------------------------------
   二択（Face D）と クルミ判定（-ch）— 2 つの こたえを 大きく
   body[data-variant-id] は index.html が QA 用に出しているマーカー
   ------------------------------------------------------------ */
body[data-variant-id$="-d"] #cards-container,
body[data-variant-id$="-ch"] #cards-container{grid-template-columns:1fr 1fr; gap:14px;}
body[data-variant-id$="-d"] #cards-container .card,
body[data-variant-id$="-ch"] #cards-container .card{
  min-height:98px; padding:14px;
  font:700 25px/1.35 var(--font-jp); color:var(--ink);
}
body[data-variant-id$="-d"] #cards-container .card:first-child,
body[data-variant-id$="-ch"] #cards-container .card:first-child{background:#f3fbf8; border-color:var(--mint-line);}
body[data-variant-id$="-d"] #cards-container .card:last-child,
body[data-variant-id$="-ch"] #cards-container .card:last-child{background:#fff8f5; border-color:#f2d9cf;}
body[data-variant-id$="-d"] #cards-container .card.selected,
body[data-variant-id$="-ch"] #cards-container .card.selected{
  background:var(--mint-100); border:3px solid var(--mint); color:var(--mint);
  box-shadow:0 0 0 4px rgba(13,122,99,.14);
}
/* クルミ判定問 — 上の しきに ついて クルミが 言っている、と 形で わかるように */
.mb-charhelp{
  position:relative; justify-content:center; margin:16px 0 12px; padding:8px 16px 4px;
  background:var(--tint); border:2px solid var(--tint-line); border-radius:24px;
}
.mb-charhelp::before{
  content:""; position:absolute; top:-10px; left:50%; width:16px; height:16px;
  background:var(--tint); border-left:2px solid var(--tint-line); border-top:2px solid var(--tint-line);
  transform:translateX(-50%) rotate(45deg);
}
.mb-charhelp .mb-kurumi{width:96px; height:106px;}

/* ------------------------------------------------------------
   ごほうび — シール・きん・ダイヤ
   ------------------------------------------------------------ */
.sticker svg{width:66%; height:66%;}
.sticker.filled{box-shadow:0 2px 7px rgba(23,37,31,.09); transform:rotate(-2.5deg);}
.sticker.filled:nth-child(even){transform:rotate(2.5deg);}
.sticker.filled:nth-child(3n){transform:rotate(-1deg);}

.mb-diamond-frame{background:#eaf6fb; border-color:#c2e3f0;}
.mb-diamond-frame .mb-gold-title{color:#1c6b86;}
.mb-diamond-frame .sticker.mb-gold{border-color:#c2e3f0;}
.mb-diamond-frame .sticker.mb-gold-empty{border-color:#c2e3f0;}
.mb-diamond-frame .mb-exchange-note{color:#1c6b86;}
.mb-diamond-frame .mb-exchange-btn{background:#54bcd9; color:#062f3c; box-shadow:0 4px 0 #3499b6;}
.mb-diamond-frame .mb-exchange-btn:active{box-shadow:0 2px 0 #3499b6;}
.mb-chip-diamond{border-left-color:#c2e3f0;}
.mb-chip-gold b, .mb-chip-diamond b{font:800 16px/1 var(--font-de); color:var(--acorn-ink);}
.mb-chip-diamond b{color:#1c6b86;}
.mb-gold-title{font-size:16px;}

/* ------------------------------------------------------------
   直し — ひろい画面と せまい画面
   ------------------------------------------------------------ */
#feedback{max-width:640px; margin-inline:auto;}
#moment{max-width:616px; margin-inline:auto;}
.fb-wrong .mb-fb-title b{font-size:23px; line-height:1.25;}
#screen-quiz.mb-drill #progress-chip{font-size:16px;}

@media (max-width:380px){
  .screen{padding:14px 14px 124px;}
  h1{font-size:25px;}
  #instruction-text{font-size:23px;}
  #screen-quiz.mb-ja #instruction-text{font-size:19px;}
  .stim-big{font-size:38px;}
  .card{min-height:78px; font-size:28px;}
  #cards-container{gap:10px;}
  .drill-grid, .garden-grid, #place-list{gap:10px;}
  .drill-card-label{font-size:16px;}
  .garden-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .garden-card{min-height:146px;}
  .garden-face{width:66px; height:66px;}
  .garden-label-ja{font-size:14px;}
  .home-hero .mb-kurumi{width:142px; height:156px;}
  .mb-fb-head .mb-kurumi{width:92px; height:101px;}
  .mb-fb-title b{font-size:27px;}
  .fb-wrong .mb-fb-title b{font-size:21px;}
  #confirm-btn{width:calc(100% - 28px);}
  .mb-page-bye .mb-kurumi{width:64px; height:70px;}
  body[data-variant-id$="-d"] #cards-container .card,
  body[data-variant-id$="-ch"] #cards-container .card{font-size:22px; min-height:88px;}
}

/* ------------------------------------------------------------
   指示カード — DE と「かくにん（にほんご）」を 季節に関係なく
   見分けられるようにする。
   あき の --tint（#FBEFDF）は かくにん の暖色とほぼ同じ色になり、
   2 つの区別が消えてしまうため、DE 側を白＋ミント枠に固定する。
   ------------------------------------------------------------ */
#instruction-box{background:#fff; border-color:var(--mint-line);}
#screen-quiz.mb-ja #instruction-box{background:var(--acorn-50); border-color:var(--acorn-line);}
#screen-quiz.mb-ja #instruction-text{color:var(--ink);}


/* ════════════════════════════════════════════════════════════
   W8（2026-09-11）— 追加依頼 7 件
   ① えほんを めくる  ② 庭から ドリルへ  ③ どんぐりの木
   ④ 季節の小物      ⑤ ホームの おねがい ⑥ 音声インジケータ
   ⑦ 行き先の絵
   ════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------
   ① えほんを めくる
   ------------------------------------------------------------ */
#page-nav{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:6px 0 2px;
}
.mb-page-turn{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:52px; height:52px; padding:0;
  border:2.5px solid var(--mint-line); border-radius:16px; background:#fff;
  font:700 26px/1 var(--font-de); color:var(--mint);
}
.mb-page-turn:active:not(:disabled){background:var(--tint);}
.mb-page-turn:disabled{border-color:#eef3f0; color:#cfe0da;}
#page-pos{
  min-width:82px; text-align:center;
  font:700 17px/1 var(--font-de); color:var(--soft);
}

/* ------------------------------------------------------------
   ② 庭のカードが 押せる ものに なった
   ------------------------------------------------------------ */
.garden-card{
  cursor:pointer; font-family:var(--font-jp); position:relative;
  padding-bottom:30px;               /* 「そだてる」の ぶん */
}
.garden-go{
  position:absolute; left:50%; bottom:9px; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; white-space:nowrap;
  font:700 12px/1 var(--font-jp); font-style:normal;
  color:var(--mint); background:var(--mint-100); padding:5px 10px; border-radius:999px;
}
.garden-go::after{content:"›"; font:800 14px/1 var(--font-de);}
.garden-card[data-stage="3"] .garden-go{background:#eef3f0; color:var(--soft);}
.garden-card:active{background:var(--mint-100); border-color:var(--mint);}

/* ------------------------------------------------------------
   ③ どんぐりの木
   ------------------------------------------------------------ */
.sticker-book{
  background:linear-gradient(var(--tint) 0%, #fff 78%);
  border:2px solid var(--tint-line); border-radius:24px; padding:10px 12px 4px;
}
.sticker-grid{display:block;}          /* 中身は 1 枚の 木 */
.mb-tree{display:block; width:100%; max-width:340px; height:auto; margin:0 auto;}
.mb-tree-full{position:relative;}
.mb-tree-full::after{
  content:"みのった！"; position:absolute; left:50%; top:6px; transform:translateX(-50%);
  font:700 15px/1 var(--font-jp); color:var(--acorn-ink);
  background:var(--acorn-50); border:1.5px solid var(--acorn-line);
  padding:8px 14px; border-radius:999px;
}
#sticker-left{text-align:center; text-wrap:pretty;}
.sticker-progress{margin-top:14px;}

/* ------------------------------------------------------------
   ⑤ ホームの おねがい
   ------------------------------------------------------------ */
.mb-bubble-ask{border-color:var(--acorn-line); background:#fffdf6;}
.mb-bubble-ask::after{border-right-color:var(--acorn-line); border-bottom-color:var(--acorn-line); background:#fffdf6;}
.mb-bubble-ask b{color:var(--acorn-ink); font-weight:700;}
.mb-ask-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:14px 0 4px;
}
.mb-ask-yes{
  flex:1 1 190px; min-height:56px; padding:0 20px;
  border:none; border-radius:18px; background:var(--mint); color:#fff;
  font:700 19px/1 var(--font-jp); box-shadow:0 4px 0 var(--mint-shadow);
  white-space:nowrap;
}
.mb-ask-yes:active{transform:translateY(2px); box-shadow:0 2px 0 var(--mint-shadow);}
.mb-ask-no{
  flex:0 0 auto; min-height:56px; padding:0 20px;
  border:2.5px solid var(--card-border); border-radius:18px; background:#fff;
  font:700 17px/1 var(--font-jp); color:var(--soft); white-space:nowrap;
}

/* ------------------------------------------------------------
   ⑥ 音声インジケータ — 再生中だけ スピーカーの よこで なみ が うごく
   body[data-speaking] は index.html の speak() が つける
   ------------------------------------------------------------ */
.mb-wave{display:none;}
body[data-speaking] .mb-wave{
  display:flex; align-items:center; gap:3px; height:22px; margin-left:2px;
}
.mb-wave > span{
  display:block; width:3.4px; height:8px; border-radius:999px;
  background:currentColor; opacity:.85;
  animation:mb-wave-bar .78s ease-in-out infinite;
}
.mb-wave > span:nth-child(2){animation-delay:.13s;}
.mb-wave > span:nth-child(3){animation-delay:.26s;}
@keyframes mb-wave-bar{0%,100%{height:7px;}50%{height:19px;}}
body[data-speaking] #replay-btn,
body[data-speaking] #feedback-speak{
  border-color:var(--mint); background:var(--mint-100);
}
.fb-wrong body[data-speaking] #feedback-speak{border-color:var(--coral);}
/* 動きを止める設定では 棒を 立てたまま 見せる（鳴っている ことは 伝わる） */
@media (prefers-reduced-motion: reduce){
  .mb-wave > span{height:15px;}
}

/* ------------------------------------------------------------
   ⑦ 行き先カードの 絵
   ------------------------------------------------------------ */
.card.place-card{
  padding:0 0 13px; overflow:hidden; gap:0;
  min-height:0; background:#fff; justify-content:flex-start;
}
.place-icon{
  display:block; width:100%; height:102px; font-size:0;
  border-bottom:2px solid var(--tint-line); overflow:hidden;
}
.mb-place-art{display:block; width:100%; height:100%;}
.place-name{display:block; margin-top:11px;}

/* ------------------------------------------------------------
   せまい画面
   ------------------------------------------------------------ */
@media (max-width:380px){
  .mb-page-turn{width:48px; height:48px; font-size:23px;}
  #page-pos{min-width:70px; font-size:16px;}
  .garden-go{font-size:11px; padding:4px 8px;}
  .garden-card{padding-bottom:28px;}
  .place-icon{height:88px;}
  .mb-ask-yes{font-size:18px;}
  .mb-ask-no{flex:1 1 auto;}
}


/* ════════════════════════════════════════════════════════════
   W44（2026-09-13）— 法務表示を アプリの 顔に そろえる
   Impressum / Datenschutz / Kontakt は ドイツでは 出さないと いけない。
   消さずに、子どもの 画面より 一段 うしろへ 下げる:
   ・線で 区切った「ページの フッター」を やめ、ホームの いちばん下に
     そっと 置かれた 一行に する
   ・絵文字を とる（アプリの 中で 絵文字が 出るのは ここだけだった）
   ・文字を 12px・色を 薄い インクに して、子どもの ボタンと 競わせない
   ・会社名は 2 行目に 小さく。ロゴは 24px で グレー寄りに
   ════════════════════════════════════════════════════════════ */
.page-footer-legal{
  max-width:640px; margin:26px auto 0 !important; padding:18px 20px 8px !important;
  border-top:1px solid #e8efec !important;
  text-align:center !important; line-height:1.7 !important;
  font-family:var(--font-de);
}
.page-footer-legal p{margin:0 !important;}
.page-footer-legal p:first-child{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:4px 0; margin-bottom:10px !important;
}
.page-footer-legal a{
  display:inline-flex; align-items:center; min-height:34px; padding:0 12px;
  color:var(--soft) !important; font:600 12.5px/1 var(--font-de);
  letter-spacing:.01em; text-decoration:none;
}
.page-footer-legal a:hover{color:var(--mint) !important; text-decoration:underline;}
/* リンクの 区切りは 中黒ではなく 細い 線（絵文字と 同じく、記号を 減らす） */
.page-footer-legal a + a{border-left:1px solid #e2ebe6;}
.page-footer-legal p:last-child{
  font:400 11px/1.6 var(--font-de) !important; color:#8fa39b !important;
}
.page-footer-legal img{
  width:22px !important; height:22px !important; border-radius:5px;
  margin-right:6px !important; opacity:.55; filter:grayscale(1);
}
@media (max-width:380px){
  .page-footer-legal a{padding:0 9px; font-size:12px;}
  .page-footer-legal p:last-child{font-size:10.5px !important;}
}

/* ===== W68-BIDI-BEGIN ===== */

/* ---- 文書の 基底方向が rtl の ときだけ 効く bidi 隔離 ----
   rtl の 文書では、中立・LTR の 中身（独語・数式・数値・記号・絵文字）が
   UAX#9 の 中立解決（N1/N2）で 周りに 引き寄せられ、並びが 反転する。
   実測: 式の 文字の x 座標が 右 → 左に なっていた（ar のみ）。
   中身が 独語・数式・記号で 固定の 入れ物だけを LTR 隔離する。
   母語（アラビア語）の 文は 隔離しない（そのまま rtl の まま）。
   この 規則は rtl の 文書でだけ 当たるので、ltr の 表示は 変わらない。 */
[dir="rtl"] #instruction-text,
[dir="rtl"] .stim,
[dir="rtl"] #cards-container .card,
[dir="rtl"] .lang-lead,
[dir="rtl"] #lang-row,
[dir="rtl"] #feedback-sentence-text{
  direction:ltr;
  unicode-bidi:isolate;
}

/* 中身が 独語の ことも 母語の ことも ある 入れ物:
   先頭の 強い 文字で 段落の 向きを 決める（dir=auto と 同じ） */
[dir="rtl"] #feedback-msg{
  unicode-bidi:plaintext;
}

/* ===== W68-BIDI-END ===== */