:root {
  --frame: #1c1c1c; --frame-dark: #000;
  --bead: #7a3b16; --bead-hi: #d1782f;
  --accent: #c0392b; --ok: #2e7d5b; --gold: #d99a2b;
  --bg: #f6f2e9; --card: #ffffff; --line: #e6ddc9;
  --navy: #16305c; --navy-hi: #24487a; --royal-gold: #d4af37;
  --side: #16305c; --side-hi: #24487a;
  /* そろばんの大きさ：画面が広いほど 大きくなる。
     ただし 縦がみじかい画面（ノートPC・iPadの横向き）では そろばんが 場所を取りすぎて
     問題の字が 小さくなってしまうので、高さでも 上限をつける。 */
  --bh: clamp(22px, min(2.5vw, 3.2vh), 34px); --cw: clamp(34px, min(3.6vw, 4.6vh), 52px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* iPhoneを横にしたとき 文字が勝手に大きくならないようにする */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: system-ui, "Hiragino Kaku Gothic ProN", sans-serif; background: var(--bg); color: #2b2b2b;
  -webkit-tap-highlight-color: transparent;      /* 指でおしたとき 青い四角を出さない */
  overscroll-behavior-y: contain;                /* 下に引っぱって ページが再読み込みされるのを防ぐ */
}
button { cursor: pointer; font-family: inherit; }
/* 指でおしたとき「2回たたくと拡大」の待ち時間（約300ms）をなくす＝反応が速くなる */
button, .nav, .chip, .grade-cell, summary, label, select, .pill, .song, .seg button { touch-action: manipulation; }
.hidden { display: none !important; }

/* ---------- レイアウト ---------- */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar { width: 210px; flex-shrink: 0; background: var(--side); color: #f3ede2; padding: 16px 12px; }
.brand { font-size: 19px; font-weight: 800; padding: 6px 8px 16px; line-height: 1.3; }
.brand small { display: block; font-size: 10px; opacity: .6; font-weight: normal; margin-top: 2px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav { background: transparent; border: none; color: #e8e0d2; text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.nav:hover { background: var(--side-hi); }
.nav.active { background: var(--gold); color: #2b2b2b; font-weight: 700; }
.nav-sec { font-size: 11px; opacity: .5; padding: 12px 12px 4px; letter-spacing: 1px; }

.content { flex: 1; padding: 18px 24px; max-width: 1100px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.topbar h2 { font-size: 22px; color: var(--frame); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
/* button の文字色（白）を そのまま受けつぐと 白い丸の上に白い字になって 読めなくなる */
.pill { background: var(--card); color: #2b2b2b; border: 1px solid var(--line); border-radius: 20px; padding: 7px 14px; font-size: 13px; }
.avatar-mini { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 30px; padding: 5px 14px 5px 8px; }
.avatar-mini span { font-size: 26px; }
.avatar-mini small { color: #8a7560; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.04); margin-bottom: 16px; }

/* ---------- 級・段を選ぶ ---------- */
.grades-layout { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { background: #efe7d8; border: 1px solid var(--line); border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--frame); }
.chip.active { background: var(--frame); color: #fff; border-color: var(--frame); }
.chip:disabled { opacity: .4; }

.grade-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.grade-cell { padding: 13px 4px; font-size: 16px; font-weight: 800; color: #fff; border: 3px solid transparent; border-radius: 10px; }
.grade-cell.g-dan { background: #d9a441; }
.grade-cell.g-kyu-a { background: #4a90d9; }
.grade-cell.g-kyu-b { background: #d9534f; }
.grade-cell.sel { border-color: #fff; box-shadow: 0 0 0 3px var(--frame), 0 4px 12px rgba(0,0,0,.3); transform: scale(1.05); }

.options { text-align: center; margin-top: 16px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #444; margin-bottom: 8px; }
#gradeInfo { font-size: 15px; margin: 6px 0; }
.note { color: #b5651d; font-size: 12px; }
#startBtn { background: var(--ok); color: #fff; border: none; border-radius: 10px; font-size: 18px; padding: 12px 34px; margin-top: 8px; }
button { background: var(--frame); color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-size: 14px; }
button.ghost { background: transparent; color: var(--frame); border: 1px solid var(--line); }
button:disabled { opacity: .5; cursor: default; }

/* ---------- 右パネル ---------- */
.stats-panel { display: flex; flex-direction: column; gap: 14px; }
.stats-panel .card { margin: 0; padding: 14px; }
.profile-card { display: flex; align-items: center; gap: 12px; }
.avatar-big { font-size: 44px; }
.rank-badge { display: inline-block; background: var(--gold); color: #2b2b2b; border-radius: 12px; padding: 2px 10px; font-size: 13px; font-weight: 700; }
.effort-card h4, .best-card h4 { font-size: 14px; margin-bottom: 10px; color: var(--frame); }
.effort-row { display: flex; justify-content: space-between; font-size: 14px; margin: 4px 0; }
.chart { display: flex; align-items: flex-end; gap: 4px; height: 46px; margin: 8px 0; }
.chart .bar { flex: 1; background: #b6d3f0; border-radius: 3px 3px 0 0; min-height: 2px; }
.chart .bar.today { background: var(--gold); }
.best-card .brow { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; border-bottom: 1px solid #f0ece2; }
.best-card .brow b { font-variant-numeric: tabular-nums; }

/* ---------- プレイ ---------- */
.play-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 18px; font-weight: 700; color: var(--frame); margin-bottom: 12px; }
#playTimer { color: var(--accent); font-variant-numeric: tabular-nums; }
.problem-wrap { position: relative; }
.problem { font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.42; letter-spacing: .02em; white-space: pre-line; text-align: center; margin-bottom: 16px; }
/* 答え合わせの ◎ / × */
.mark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.5);
  font-size: 130px; font-weight: 900; color: var(--accent); pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,.15); animation: markpop .3s ease forwards;
}
.mark.ng { color: var(--accent); }
.mark.ok { color: #e0322b; }
@keyframes markpop { to { transform: translate(-50%, -50%) scale(1); } }
.marks { font-size: 24px; letter-spacing: 4px; margin-bottom: 8px; }
.marks .mk.ok { color: #e0322b; } .marks .mk.ng { color: var(--accent); }
.sub { color: #8a7560; font-size: 14px; margin: 4px 0; }
.small { color: #8a7560; font-size: 14px; }
.btn-row { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.answer-row { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 10px 0; }
input { border: 2px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 18px; }
.result { min-height: 26px; font-size: 18px; font-weight: 700; margin: 10px 0; text-align: center; }
.result.ok { color: var(--ok); } .result.ng { color: var(--accent); }
.result button { margin: 8px 4px 0; }
.flash-display { font-size: 72px; font-weight: 800; height: 140px; display: flex; align-items: center; justify-content: center; color: var(--frame); font-variant-numeric: tabular-nums; }
/* 数字ではなく 言葉のとき（「▶ を押してスタート」など）は 小さくして 1行におさめる */
.flash-display.msg { font-size: 26px; height: 72px; color: #6b5f4c; }
.flash-display.ok { color: #2e7d5b; animation: flashpop .35s ease; }
.flash-display.ng { color: var(--accent); animation: flashpop .35s ease; }
@keyframes flashpop { from { transform: scale(.4); } to { transform: scale(1); } }
.flash-dots { display: flex; gap: 7px; justify-content: center; min-height: 14px; margin-bottom: 8px; }
.flash-dots .dot { width: 11px; height: 11px; border-radius: 50%; background: #ddd6c6; transition: background .1s; }
.flash-dots .dot.on { background: var(--bead-hi); }
/* スタート信号（赤→黄→青）。数字を出さないので問題の数字と混同しない */
.signal { display: flex; gap: 14px; justify-content: center; margin-bottom: 8px; min-height: 40px; align-items: center; }
.signal .lamp { width: 34px; height: 34px; border-radius: 50%; background: #2a2a2a; opacity: .3; transition: opacity .1s, box-shadow .1s; }
.signal .lamp.on[data-c="red"] { background: #e74c3c; opacity: 1; box-shadow: 0 0 14px #e74c3c; }
.signal .lamp.on[data-c="yellow"] { background: #f1c40f; opacity: 1; box-shadow: 0 0 14px #f1c40f; }
.signal .lamp.on[data-c="green"] { background: #2ecc71; opacity: 1; box-shadow: 0 0 14px #2ecc71; }
.value-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.soroban-value { font-size: 32px; font-weight: 800; color: var(--frame); font-variant-numeric: tabular-nums; word-break: break-all; }

/* 解き方 */
.steps { text-align: left; margin-top: 14px; background: #faf7f0; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.steps .term { margin: 10px 0; } .steps .term-head { font-weight: 700; color: var(--frame); margin-bottom: 4px; }
.steps .move { padding: 3px 0 3px 18px; position: relative; color: #444; }
.steps .move::before { content: "•"; position: absolute; left: 4px; color: var(--bead-hi); }
.steps .run { color: var(--ok); font-weight: 700; } .steps .hint { color: #b5651d; }
.soro-legend { font-size: 12px; color: #8a7560; margin-bottom: 10px; }
.soro-wrap { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.soro-fig { background: #efe9dd; border: 2px solid #1c1c1c; border-radius: 4px; }
.soro-val { font-weight: 800; color: var(--frame); font-variant-numeric: tabular-nums; }

/* ---------- そろばん ---------- */
.soroban { display: flex; justify-content: safe center; gap: calc(var(--cw) * 0.09); background: #e9e4d8; border: 12px solid var(--frame); border-radius: 6px; box-shadow: inset 0 0 0 2px #333; padding: 14px 12px; margin: 12px auto; width: fit-content; max-width: 100%; overflow-x: auto; }
/* flex-shrink を止める。止めないと 画面がせまいとき 桁がつぶれて 珠が重なってしまう */
.col { position: relative; flex: 0 0 var(--cw); width: var(--cw); height: calc(var(--bh) * 7 + 14px); }
.col .rod { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 4px; height: 100%; background: linear-gradient(90deg, #999, #eee, #999); border-radius: 2px; }
.col .bar { position: absolute; left: -1px; right: -1px; top: calc(var(--bh) * 2 + 3px); height: 6px; background: linear-gradient(#333, #000); z-index: 3; }
.unit-dot { position: absolute; left: 50%; top: calc(var(--bh) * 2 + 3px); width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.6); transform: translate(-50%, -1px); z-index: 4; }
.unit-dot.ones { width: 11px; height: 11px; background: var(--accent); box-shadow: 0 0 4px rgba(0,0,0,.7), 0 0 0 2px #fff; }
/* 珠は top ではなく transform で動かす。top だと 動かすたびに 画面を組み直すので
   スマホで かくかくする。transform なら 絵をずらすだけで すむ。 */
.bead { position: absolute; left: 50%; top: 2px; width: calc(var(--cw) * 0.82); height: calc(var(--bh) - 2px);
  transform: translate(-50%, var(--ty, 0px)); background: linear-gradient(180deg, var(--bead-hi), var(--bead));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); cursor: pointer;
  transition: transform .12s ease; z-index: 2; touch-action: none; }
.bead:hover { filter: brightness(1.2); }

/* レクチャー・設定 */
details { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; padding: 4px 14px; }
summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--frame); }
.lesson-body { padding: 4px 0 12px; line-height: 1.7; font-size: 15px; }
.lesson-body b { color: var(--accent); } .lesson-body ul { padding-left: 20px; }
.field { display: block; margin: 12px 0; font-size: 14px; }
.field input { display: block; margin-top: 6px; width: 240px; max-width: 100%; }
.avatar-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.avatar-picker button { background: #f0ece2; font-size: 26px; padding: 6px 10px; border-radius: 8px; }
.avatar-picker button.sel { outline: 3px solid var(--gold); }

/* テーブル */
.rec-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.rec-table th, .rec-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; }
.rec-table th { background: #f5efe3; }

/* 本日の練習・休憩・グラフ */
.rest { text-align: center; padding: 24px 0; }
.rest-title { font-size: 24px; font-weight: 700; color: var(--frame); }
.rest-timer { font-size: 74px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; margin: 6px 0; }
.menu-list { margin: 10px 0 12px 22px; line-height: 1.9; }
.row2 { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.row2 label { display: flex; flex-direction: column; font-size: 12px; color: #8a7560; gap: 3px; align-items: center; }
.row2 select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 16px; }
#todayStart { background: var(--accent); color: #fff; font-size: 18px; padding: 12px 28px; border-radius: 10px; margin-top: 4px; }
.graph { width: 100%; max-width: 560px; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: block; }
.marks { font-size: 20px; letter-spacing: 3px; margin-bottom: 8px; font-weight: 700; }

/* 採点結果の全問リスト */
.rest-result { max-width: 460px; margin: 14px auto 0; text-align: left; }
.section-score { font-size: 16px; font-weight: 700; color: var(--frame); margin: 6px 0; text-align: center; }
.qlist { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.qrow { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid #f0ece2; font-size: 15px; }
.qrow:last-child { border-bottom: none; }
.qrow .qn { color: #999; width: 22px; text-align: right; }
.qrow .qq { flex: 1; font-variant-numeric: tabular-nums; }
.qrow .qa { color: #555; font-variant-numeric: tabular-nums; }
.qrow .qa s { color: var(--accent); }
.qrow .qm { font-size: 20px; font-weight: 800; width: 26px; text-align: center; }
.qrow .qm.ok { color: #e0322b; }
.qrow .qm.ng { color: var(--accent); }

/* ============================================================ キングダム層 */
.brand { color: #fff; }
.brand small { color: var(--royal-gold); opacity: .9; letter-spacing: 1px; }
.pill.gold { background: linear-gradient(180deg,#fbf1cf,#f0d98a); border-color: #e0c463; color: #6b5416; font-weight: 800; }

/* ホーム */
.home-grid { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; }
.home-hero { background: linear-gradient(160deg,#1b3a6b,#16305c); color: #fff; border: none; }
.hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hero-avatar { font-size: 46px; background: rgba(255,255,255,.12); border-radius: 16px; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; }
.hero-top b { font-size: 20px; }
.today-box { background: var(--card); color: #2b2b2b; border-radius: 14px; padding: 18px; }
.today-title { font-size: 15px; font-weight: 800; color: var(--navy); letter-spacing: 2px; border-bottom: 2px solid var(--royal-gold); display: inline-block; padding-bottom: 4px; margin-bottom: 12px; }
.today-menu { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.menu-row { display: flex; justify-content: space-between; font-size: 16px; padding: 6px 4px; border-bottom: 1px dashed #eadfca; }
.menu-row b { color: var(--navy); }
.big-cta { width: 100%; background: linear-gradient(180deg,#e7b93c,#d4af37); color: #16305c; font-size: 20px; font-weight: 800; padding: 16px; border-radius: 12px; box-shadow: 0 4px 0 #b8912a; }
.big-cta:hover { filter: brightness(1.03); }
.today-status { text-align: center; margin-top: 12px; font-size: 15px; }
.home-side { display: flex; flex-direction: column; gap: 10px; }
.stat-tile { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 14px 16px; }
.stat-tile span { font-size: 14px; color: #6b5f4c; }
.stat-tile b { font-size: 22px; color: var(--navy); }
.wide-btn { width: 100%; padding: 12px; border-radius: 10px; font-size: 15px; background: var(--navy); }
.wide-btn.ghost { background: transparent; color: var(--navy); border: 1px solid var(--navy); }

/* 王国 */
.kingdom-head { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(160deg,#1b3a6b,#16305c); color: #fff; border: none; }
.kd-title { font-size: 20px; font-weight: 800; }
.kd-lv { font-size: 14px; background: rgba(255,255,255,.15); padding: 3px 10px; border-radius: 12px; }
.gold-badge { background: linear-gradient(180deg,#fbf1cf,#f0d98a); color: #6b5416; font-weight: 800; padding: 8px 16px; border-radius: 20px; font-size: 16px; }

/* 結果画面の GOLD 演出 */
.gold-earn { margin: 12px auto; max-width: 420px; background: linear-gradient(180deg,#fdf6de,#f6e6b0); border: 1px solid #e6cf83; border-radius: 14px; padding: 12px 16px; color: #6b5416; }
.gold-earn > b { font-size: 24px; color: #a9791a; }
.gold-lines { font-size: 12px; margin: 4px 0; opacity: .85; }
.gold-earn .goal { font-size: 14px; font-weight: 800; color: var(--navy); margin-top: 4px; }
.result .hl { color: #d4820f; }

/* 保護者画面 */
.parent-summary .pgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 8px; }
.pcell { background: #f7f3ea; border-radius: 10px; padding: 12px; text-align: center; }
.pcell span { display: block; font-size: 12px; color: #6b5f4c; margin-bottom: 4px; }
.pcell b { font-size: 22px; color: var(--navy); }
.pbars { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding: 8px 4px; }
.pbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.pbar { width: 70%; max-width: 40px; background: linear-gradient(180deg,#3a72c4,#16305c); border-radius: 5px 5px 0 0; min-height: 3px; }
.pbar-n { font-size: 12px; font-weight: 700; color: var(--navy); }
.pbar-l { font-size: 12px; color: #8a7560; }
.psub { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.psub > span { width: 76px; }
.psub-bar { flex: 1; background: #eee5d2; border-radius: 8px; height: 14px; overflow: hidden; }
.psub-bar > div { height: 100%; background: linear-gradient(90deg,#d4af37,#e7b93c); }
.psub > b { width: 44px; text-align: right; color: var(--navy); }

/* ============================================================ キャラクター素材 */
.brand { padding: 4px 4px 14px; }
.brand-logo { width: 100%; max-width: 186px; display: block; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* ホームのマスコット */
.hero-top { position: relative; flex-wrap: wrap; }
.hero-id { min-width: 120px; }
.hero-speech { background: #fff; color: #2b2b2b; border-radius: 14px; padding: 8px 14px; font-size: 13px; font-weight: 700; margin-left: auto; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.hero-speech::after { content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-left-color: #fff; }
.hero-mascot { width: 96px; height: auto; filter: drop-shadow(0 4px 5px rgba(0,0,0,.35)); }

/* 王国ボードの建物画像 */

/* たいせん（CPU対戦ゲーム） */
.battle-opts { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin: 16px 0; }
.battle-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #6b5f4c; }
.battle-opts select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 15px; }
.battle-setup { text-align: center; }
.battle-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fighter { flex: 1; text-align: center; }
.fighter img { width: 92px; height: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.28)); }
.fighter.cpu img { transform: none; } /* 敵は専用イラストなので反転しない */
/* 敵の名前は「カンピロバクター」のように 長いので、はみ出さずに 折り返す */
.fname { font-weight: 700; font-size: 13px; color: var(--navy); line-height: 1.25; overflow-wrap: anywhere; }
@media (max-width: 640px) { .fname { font-size: 11px; } }
.battle-center { display: flex; flex-direction: column; align-items: center; }
.battle-timer { font-size: 28px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.vs { font-size: 14px; font-weight: 800; color: var(--royal-gold); letter-spacing: 2px; }
.battle-problem { text-align: center; font-size: 40px; font-weight: 800; white-space: pre-line; line-height: 1.15; min-height: 130px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
#battleForm { justify-content: center; }
.battle-fx { text-align: center; height: 26px; font-weight: 800; font-size: 16px; margin-top: 6px; }
.battle-fx.ok { color: var(--ok); }
.battle-fx.ng { color: var(--accent); }
#battleQuit { display: block; margin: 12px auto 0; }
.battle-verdict { display: flex; align-items: center; justify-content: center; gap: 16px; }
.bv-face { width: 120px; height: auto; }
.bv-badge { display: block; margin: 0 auto 6px; }
.battle-score-final { text-align: center; font-size: 22px; margin: 10px 0; }
.battle-score-final b { font-size: 30px; color: var(--navy); }
.battle-result { text-align: center; }

/* 結果画面のキャラクター＋バッジ */
.result-hero { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.rh-face { width: 88px; height: auto; }
.rh-badge { display: inline-block; }

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .brand { padding: 4px 8px; } .brand-logo { max-width: 130px; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .grades-layout { grid-template-columns: 1fr; }
  .home-grid { grid-template-columns: 1fr; }
  .parent-summary .pgrid { grid-template-columns: repeat(2,1fr); }
  .hero-mascot { width: 76px; }
  .fighter img { width: 72px; }
}

/* ============================================================ 一時停止 / 休憩スキップ */
#pauseBtn { cursor: pointer; font-weight: 700; }
.pause-box { text-align: center; padding: 44px 20px; }
.pause-title { font-size: 32px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
#resumeBtn { font-size: 20px; font-weight: 800; padding: 14px 44px; border-radius: 12px; background: var(--ok); margin-top: 14px; }
.skip-btn { background: var(--ok); color: #fff; font-size: 16px; font-weight: 700; padding: 12px 26px; border-radius: 10px; margin-top: 10px; }

/* ============================================================ たいせん：HP制バトル */
.kill-count { font-size: 13px; color: var(--navy); margin-top: 2px; }
.kill-count b { font-size: 26px; font-variant-numeric: tabular-nums; }
.hpbar { width: 130px; max-width: 100%; height: 15px; margin: 6px auto 3px; background: #e9e0cc; border: 1px solid #d3c7ab; border-radius: 8px; overflow: hidden; }
.hpfill { height: 100%; width: 100%; background: linear-gradient(90deg, #5bc46a, #2e7d5b); transition: width .25s ease; }
.hpfill.low { background: linear-gradient(90deg, #e8a33d, #d9534f); }
.hptext { font-size: 12px; color: #6b5f4c; font-variant-numeric: tabular-nums; }
.fighter.cpu img.hit { animation: enemyHit .3s ease; }
@keyframes enemyHit {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(12px) rotate(7deg); filter: brightness(1.8); }
  100% { transform: translateX(0); }
}
.fighter.cpu img.down { animation: enemyDown .7s ease forwards; }
@keyframes enemyDown {
  0%   { transform: rotate(0); opacity: 1; }
  100% { transform: rotate(75deg) translateY(14px); opacity: .2; }
}
/* たおしたあと、次の敵が出てくる */
.fighter.cpu img.appear { animation: enemyAppear .35s ease; }
@keyframes enemyAppear {
  0%   { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.battle-fx.kill { color: var(--royal-gold); font-size: 20px; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.battle-fx.miss { color: #6b5f4c; }  /* 不正解は責めない色にする（赤にしない） */
.bs-sub { display: block; font-size: 14px; color: #8a7560; font-weight: normal; margin-top: 2px; }

/* ============================================================ 自分のHP / あんざんのコツ */
.myhp { font-size: 20px; color: #d9534f; letter-spacing: 2px; line-height: 1.2; }
.myhp.danger { animation: hpBlink .7s infinite; }
@keyframes hpBlink { 50% { opacity: .3; } }
/* ネコがしゃべっているセリフ（吹き出し） */
.anzan-tip { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px auto; max-width: 1000px; }
.tip-cat { width: 210px; height: auto; flex-shrink: 0; filter: drop-shadow(0 4px 7px rgba(0,0,0,.25)); }
/* 右側で寝ているネコ。勉強くささを消すための飾り */
.tip-cat2 { width: 200px; height: auto; flex-shrink: 0; align-self: flex-end; filter: drop-shadow(0 4px 7px rgba(0,0,0,.2)); }
.tip-balloon { position: relative; flex: 1; background: #fffaf0; border: 2px solid var(--royal-gold); border-radius: 18px; padding: 14px 18px; line-height: 1.9; font-size: 15px; text-align: left; }
/* 吹き出しのしっぽ（ネコの方を向く） */
.tip-balloon::before { content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); border: 11px solid transparent; border-right-color: var(--royal-gold); }
.tip-balloon::after { content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-right-color: #fffaf0; }
.tip-balloon > b { display: block; font-size: 17px; color: var(--navy); margin-bottom: 6px; }
.tip-balloon p { margin: 8px 0; }
.tip-balloon p b { color: #c0392b; }
/* 画面が狭いときは、寝ているネコは隠して文章を読みやすくする */
@media (max-width: 940px) { .tip-cat2 { display: none; } }
@media (max-width: 620px) {
  .anzan-tip { flex-direction: column; gap: 6px; }
  .tip-cat { width: 150px; }
  .tip-balloon::before { left: 50%; top: -14px; transform: translateX(-50%); border-right-color: transparent; border-bottom-color: var(--royal-gold); }
  .tip-balloon::after { left: 50%; top: -11px; transform: translateX(-50%); border-right-color: transparent; border-bottom-color: #fffaf0; }
}

/* ============================================================ 自作バッジ（画像を使わないので文字が切れない） */
.badge-chip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 26px; border-radius: 999px;
  background: linear-gradient(180deg, #fbf1cf 0%, #f0d98a 45%, #dcb63f 100%);
  border: 3px solid var(--navy); color: var(--navy);
  font-size: 21px; font-weight: 800; letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
  box-shadow: 0 4px 0 #a8821c, 0 8px 16px rgba(0,0,0,.22);
}
.badge-chip.win { font-size: 26px; letter-spacing: 3px; }
.badge-chip.best {
  background: linear-gradient(180deg, #ffeec2 0%, #ffc857 45%, #e8a33d 100%);
  box-shadow: 0 4px 0 #b57a1c, 0 8px 16px rgba(0,0,0,.22);
}
.badge-chip.perfect {
  background: linear-gradient(180deg, #dff0ff 0%, #8fc6f5 45%, #4a90d9 100%);
  border-color: #0d2747; color: #0d2747;
  box-shadow: 0 4px 0 #2c5f96, 0 8px 16px rgba(0,0,0,.22);
}
@media (max-width: 620px) { .badge-chip { font-size: 17px; padding: 8px 18px; } .badge-chip.win { font-size: 21px; } }

/* ============================================================ 報酬の絵（金貨・王冠） */
.ico-coin, .ico-crown { height: 1.35em; width: auto; vertical-align: -0.28em; }
.gold-earn .ico-coin { height: 46px; vertical-align: -12px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.stat-tile .ico-coin, .stat-tile .ico-crown { height: 26px; vertical-align: -7px; }
.gold-badge .ico-coin { height: 30px; vertical-align: -8px; }
.pill.gold .ico-coin { height: 22px; vertical-align: -6px; }
.gold-earn { animation: goldPop .45s ease; }
@keyframes goldPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================================ まちがえ方のクセ（1セット終わりの図解つき説明） */
.miss-report { text-align: left; margin: 14px 0; background: #fffdf6; border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.7; }
.miss-report.all-ok { background: #f3fbf3; border-color: #8dc98d; }
.mr-acc { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.mr-acc b { font-size: 26px; }
.mr-acc .sub { font-size: 14px; font-weight: 400; }
.mr-h { font-weight: 800; color: var(--navy); border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.mr-top { font-size: 17px; margin: 6px 0; }
.mr-top b { color: #b5651d; }
.mr-tip { background: #fff6e0; border-left: 5px solid var(--gold, #d4af37); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
/* 図解：まちがえた1手を「前 ▶ あと」で並べて見せる */
.mr-fig { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.mr-fig-1 { text-align: center; }
.mr-cap { font-size: 13px; font-weight: 700; color: #8a7560; margin-bottom: 3px; }
.mr-arrow { text-align: center; font-size: 13px; color: var(--navy); }
.mr-arrow span { display: block; font-size: 22px; color: var(--bead-hi); line-height: 1; }
.mr-moves .move { padding: 3px 0 3px 18px; position: relative; color: #444; font-size: 14px; }
.mr-moves .move::before { content: "•"; position: absolute; left: 4px; color: var(--bead-hi); }
.mr-moves .hint { color: #b5651d; font-weight: 700; }
.mr-others { font-size: 14px; color: #8a7560; margin-top: 8px; }
.mr-more { margin-top: 10px; }
.mr-steps { margin-top: 10px; }

/* ============================================================ にがて克服メニュー */
.weak-menu { margin-top: 14px; text-align: left; background: #fffdf6; border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.wm-h { font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.wm-none { font-size: 13px; color: #8a7560; }
.wm-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.wm-row:last-of-type { border-bottom: none; }
.wm-em { font-size: 20px; }
.wm-n { font-weight: 700; flex: 1; font-size: 14px; }
.wm-c { font-size: 13px; color: #b5651d; background: #fff2e2; border-radius: 999px; padding: 1px 10px; }
.wm-go { font-size: 13px; padding: 6px 12px; background: var(--ok); }
.mr-drill { display: block; width: 100%; margin-top: 12px; background: var(--ok); font-size: 16px; padding: 12px; }

/* ============================================================ 問題が多い級（5級・4級など）で見切れないように */
/* 問題の字は、のこりの高さに合わせて JS が大きさを決める（fitProblem）。
   そろばんは 画面の幅をぜんぶ使って 大きく出す。 */
.problem { margin-bottom: 12px; }
#stepsRow { margin-top: 10px; }
/* 数字は右そろえの縦一列（そろばんの見取算と同じ並び）。字の大きさはJSが行数に合わせて決める */
.problem { max-width: 100%; overflow-wrap: anywhere; }

/* ============================================================ まちがえた問題の ていねいな解説（全問） */
.ex-h { font-weight: 800; color: var(--navy); font-size: 16px; margin: 16px 0 8px; border-top: 2px solid var(--line); padding-top: 12px; }
.ex-card { border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; background: #fff; }
.ex-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 1px dashed var(--line); padding-bottom: 8px; margin-bottom: 10px; }
.ex-no { font-size: 12px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 999px; padding: 2px 10px; }
.ex-head .ex-q { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-a { font-size: 14px; color: #666; }
.ex-a .ng { color: var(--accent); } .ex-a .ok { color: var(--ok); }
.ex-diag { background: #fff6e0; border-left: 5px solid var(--royal-gold); border-radius: 8px; padding: 8px 12px; font-size: 15px; line-height: 1.8; }
.ex-wrong { color: var(--accent); font-weight: 700; }
.ex-right { color: var(--ok); font-weight: 700; }
.ex-fix { font-size: 14px; background: #f2f8f4; border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
.ex-all { margin-top: 10px; }
.ex-all-h { font-size: 13px; font-weight: 700; color: #8a7560; margin-bottom: 4px; }
.ex-all .steps { margin-top: 0; font-size: 14px; }
/* 正しい動き ／ きみの動き を左右に並べる */
.tb { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; }
.tb-side { flex: 1 1 300px; border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.tb-side.ok { border-color: #8dc98d; background: #f4fbf4; }
.tb-side.ng { border-color: #e2a79e; background: #fdf5f3; }
.tb-h { font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.tb-side.ok .tb-h { color: var(--ok); } .tb-side.ng .tb-h { color: var(--accent); }
.tb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-1 { text-align: center; }
.tb-cap { font-size: 12px; font-weight: 700; color: #8a7560; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.tb-ar { font-size: 20px; color: var(--bead-hi); }
/* きょうの見立て */
.as-box { background: #f7f9fd; border: 2px solid #cbd8ea; border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.as-h, .as-h2 { font-weight: 800; color: var(--navy); }
.as-h2 { margin-top: 10px; }
.as-list { margin: 6px 0 0 20px; font-size: 14px; }
.as-time { font-size: 13px; color: #8a7560; margin-top: 6px; }
.as-tips { margin: 6px 0 0 20px; font-size: 14px; line-height: 1.8; }
.as-tips li { margin-bottom: 4px; }

/* ============================================================ フラッシュ暗算 1セットの成績 */
.fs-stats { text-align: left; background: #f7f9fd; border: 2px solid #cbd8ea; border-radius: 12px; padding: 10px 14px; margin: 10px 0; font-size: 15px; }
.fs-acc { font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.fs-acc b { font-size: 26px; }
.fs-row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed #dfe6f0; }
.fs-row:last-of-type { border-bottom: none; }
.fs-row b { font-variant-numeric: tabular-nums; }
.fs-best { margin-top: 6px; font-weight: 700; color: var(--ok); }
.fs-best.sub { font-weight: 400; }

/* ============================================================ そろばんパズル */
.pz-lobby { text-align: center; }
.pz-lv-big { font-size: 15px; color: #8a7560; }
.pz-lv-big b { font-size: 30px; color: var(--navy); }
.pz-goal-big { font-size: 18px; margin: 6px 0 12px; }
.pz-goal-big b { color: var(--accent); font-size: 22px; }
.pz-past-row { display: flex; gap: 10px; justify-content: center; font-size: 12px; color: #b58a2b; margin-bottom: 10px; flex-wrap: wrap; }
.pz-items-h { text-align: left; font-weight: 700; color: var(--navy); font-size: 14px; margin: 10px 0 6px; }
.pz-item { display: flex; align-items: center; gap: 10px; text-align: left; border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; background: #fff; }
.pz-em { font-size: 26px; }
.pz-in { flex: 1; display: flex; flex-direction: column; }
.pz-in small { color: #8a7560; font-size: 12px; }
.pz-ic { font-weight: 700; color: #b58a2b; }
.pz-buy { padding: 4px 14px; font-size: 18px; line-height: 1; }
.pz-have { min-width: 26px; font-weight: 700; color: var(--ok); }
.pz-total { margin: 10px 0; font-size: 15px; }
.pz-total b { font-size: 20px; color: var(--accent); }
.pz-need { color: var(--accent); font-weight: 700; margin: 10px 0; }
/* 盤面 */
.pz-goal, .pz-moves { font-size: 17px; }
.pz-goal b, .pz-moves b { font-size: 22px; color: var(--navy); }
.pz-barwrap { height: 10px; background: #ece3d2; border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.pz-barwrap i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#e0b84a,#d4af37); transition: width .25s; }
.pz-msg { min-height: 22px; font-weight: 700; text-align: center; font-size: 15px; }
.pz-msg.ok { color: var(--ok); } .pz-msg.ng { color: var(--accent); }
.pz-board {
  --pzt: min(52px, calc((100vw - 120px) / 8));
  position: relative; width: calc(var(--pzt) * 8); height: calc(var(--pzt) * 8);
  margin: 0 auto; border-radius: 16px; overflow: hidden;
  touch-action: none; user-select: none;
  /* 盤のマス目＋うすい光。四角い板ではなく「場」に見せる */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 calc(var(--pzt)), rgba(0,0,0,.035) calc(var(--pzt)) calc(var(--pzt) * 2)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 calc(var(--pzt)), rgba(0,0,0,.035) calc(var(--pzt)) calc(var(--pzt) * 2)),
    radial-gradient(120% 90% at 50% 0%, #9fc0e8, #6d8fc4 55%, #4d6ea3);
  border: 4px solid #c9a227;
  box-shadow: inset 0 6px 18px rgba(0,0,0,.3), inset 0 -4px 10px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.2), 0 0 0 3px #8a6d14;
}
.pz-t {
  position: absolute; width: var(--pzt); height: var(--pzt); left: 0; top: 0;
  transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0);
  /* 落ちるときに ほんの少し 行きすぎて もどる＝重さが出る */
  transition: transform .26s cubic-bezier(.34, 1.32, .5, 1);
  display: flex; align-items: center; justify-content: center; cursor: pointer; will-change: transform;
}
.pz-t::before {
  content: ""; position: absolute; inset: 2px; border-radius: 12px;
  background: rgba(255,255,255,.10);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* 玉の絵（いただいた素材から作ったもの） */
.pz-img { position: relative; width: 96%; height: 96%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.pz-t.k-spade { --c: #3a3a46; --g: #5b5b6b; }
.pz-t.k-heart { --c: #d0342c; --g: #e8695f; }
.pz-t.k-dia { --c: #2b6fd0; --g: #5d9ae8; }
.pz-t.k-club { --c: #2e7d5b; --g: #54a97f; }
.pz-t.k-bead { --c: #d99a2b; --g: #f0c364; }
/* えらんでいる玉：ふわっと ゆれる */
.pz-t.sel::after { content: ""; position: absolute; inset: 1px; border: 3px solid #fff; border-radius: 13px; box-shadow: 0 0 0 3px var(--royal-gold), 0 0 14px rgba(212,175,55,.7); }
.pz-t.sel { animation: pzsel .6s ease-in-out infinite alternate; z-index: 3; }
@keyframes pzsel { to { transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt) - 3px), 0) scale(1.06); } }
/* だめな入れかえ：首をふる */
.pz-t.no { animation: pzno .38s ease; z-index: 4; }
@keyframes pzno {
  0%,100% { transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0); }
  25% { transform: translate3d(calc(var(--x) * var(--pzt) - 6px), calc(var(--y) * var(--pzt)), 0) rotate(-6deg); }
  75% { transform: translate3d(calc(var(--x) * var(--pzt) + 6px), calc(var(--y) * var(--pzt)), 0) rotate(6deg); }
}
/* アイテムに変わった玉：ぽんっと出る */
.pz-t.sp::before { box-shadow: inset 0 0 0 3px #fff8d8, inset 0 -4px 0 rgba(0,0,0,.2), 0 0 12px rgba(255,225,140,.9); }
.pz-t.born::before { animation: pzborn .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes pzborn { 0% { transform: scale(.4) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
.pz-sp { position: absolute; font-size: calc(var(--pzt) * .44); filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
/* 消える：ふくらんで はじける */
.pz-t.pop { animation: pzpop .19s ease-in forwards; animation-delay: var(--d, 0ms); z-index: 2; }
@keyframes pzpop {
  35% { transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0) scale(1.28); filter: brightness(1.6); }
  100% { transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0) scale(.1); opacity: 0; }
}
/* 盤ゆれ */
.pz-board.shake { animation: pzsh .28s ease; }
.pz-board.shake-b { animation: pzsh .4s ease; }
@keyframes pzsh { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4px,2px); } 45% { transform: translate(4px,-2px); } 70% { transform: translate(-2px,1px); } }
/* れんさ の文字 */
.pz-msg.show { animation: pzmsg .5s cubic-bezier(.2,1.6,.4,1); font-size: 20px; }
@keyframes pzmsg { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
/* 結果 */
.pz-over { margin-top: 14px; text-align: center; background: #fffdf6; border: 2px solid var(--royal-gold); border-radius: 14px; padding: 16px; }
.pz-res-h { font-size: 22px; font-weight: 800; }
.pz-res-h.ok { color: var(--ok); } .pz-res-h.ng { color: var(--accent); }
.pz-stars { font-size: 34px; color: var(--royal-gold); letter-spacing: 4px; }
.pz-res-btns { margin-top: 10px; }

/* ---- 特殊ピースの見た目 ---- */
.pz-t.sp-rh .pz-sp { transform: rotate(90deg); }
.pz-t.sp-rv .pz-sp { transform: rotate(0deg); }
.pz-t.sp-tnt::before { background: linear-gradient(160deg,#6b6b78,#2f2f38); }
.pz-t.sp-prop::before { background: linear-gradient(160deg,#8fd6ff,#2b8fd0); }
.pz-t.sp-prop .pz-sp { animation: pzrot 1.1s linear infinite; }
@keyframes pzrot { to { transform: rotate(360deg); } }
/* 光の玉：虹色にまわる */
.pz-t.sp-disco::before { background: conic-gradient(#ff8ac4,#ffd36b,#8ce99a,#74c0fc,#b197fc,#ff8ac4); animation: pzspin 2.4s linear infinite; }
@keyframes pzspin { to { transform: rotate(360deg); } }
.pz-disco { position: relative; width: calc(var(--pzt) * .42); height: calc(var(--pzt) * .42); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #fff6c9 40%, rgba(255,255,255,.15) 70%);
  box-shadow: 0 0 12px rgba(255,255,255,.9); }

/* ---- 消したときの 気持ちよさ ---- */
.pz-fx { position: absolute; left: 0; top: 0; width: var(--pzt); height: var(--pzt);
  transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0);
  display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 6; }
.pz-pts { font-weight: 800; color: #fff; font-size: calc(var(--pzt) * .34); text-shadow: 0 2px 4px rgba(0,0,0,.5); animation: pzup .85s ease-out forwards; }
@keyframes pzup { 0% { opacity: 0; transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0) scale(.6); }
  25% { opacity: 1; transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt) - 6px), 0) scale(1.15); }
  100% { opacity: 0; transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt) - 34px), 0) scale(1); } }
.pz-praise { font-weight: 900; font-size: calc(var(--pzt) * .46); color: #ffd35b; -webkit-text-stroke: 2px #7a4a00;
  paint-order: stroke fill; white-space: nowrap; animation: pzpraise 1s cubic-bezier(.2,1.7,.4,1) forwards; z-index: 7; }
@keyframes pzpraise { 0% { opacity: 0; transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0) scale(.3) rotate(-8deg); }
  35% { opacity: 1; transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt) - 10px), 0) scale(1.2) rotate(3deg); }
  100% { opacity: 0; transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt) - 40px), 0) scale(1) rotate(0); } }
.pz-p { position: absolute; left: 0; top: 0; width: calc(var(--pzt) * .2); height: calc(var(--pzt) * .2); border-radius: 50%;
  background: var(--pc); pointer-events: none; z-index: 5; animation: pzpart .6s ease-out forwards; animation-delay: var(--pd, 0ms);
  transform: translate3d(calc(var(--x) * var(--pzt) + var(--pzt) * .4), calc(var(--y) * var(--pzt) + var(--pzt) * .4), 0); }
@keyframes pzpart { 0% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(var(--x) * var(--pzt) + var(--pzt) * .4 + var(--dx) * 46px), calc(var(--y) * var(--pzt) + var(--pzt) * .4 + var(--dy) * -46px + 30px), 0) scale(.4); } }
.pz-score-w { font-size: 15px; color: #8a7560; }
.pz-score-w b { font-size: 20px; color: var(--navy); display: inline-block; font-variant-numeric: tabular-nums; }
.pz-score-w b.pop, .pz-goal.pop { animation: pzbump .3s cubic-bezier(.2,1.8,.4,1); }
@keyframes pzbump { 50% { transform: scale(1.3); } }
/* ---- ごほうびの儀式 ---- */
.pz-star { font-size: 44px; color: #dcd6c8; display: inline-block; margin: 0 4px; }
.pz-star.on { color: var(--royal-gold); text-shadow: 0 0 18px rgba(212,175,55,.9); }
.pz-star.fly { animation: pzstar .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes pzstar { 0% { transform: scale(0) rotate(-140deg); opacity: 0; } 70% { transform: scale(1.5) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.pz-tally { font-size: 17px; margin: 6px 0; }
.pz-tally b { font-size: 26px; color: var(--navy); font-variant-numeric: tabular-nums; }
.pz-meter { margin-top: 10px; font-size: 13px; color: #8a7560; }
.pz-meter b { font-size: 20px; color: var(--royal-gold); margin: 0 6px; }
.pz-meter-bar { display: block; height: 10px; background: #ece3d2; border-radius: 999px; overflow: hidden; margin: 4px 0; }
.pz-meter-bar u { display: block; height: 100%; background: linear-gradient(90deg,#e0b84a,#d4af37); }
.pz-chest { font-size: 54px; display: inline-block; animation: pzchest .5s ease-in-out infinite alternate; }
.pz-chest.open { animation: pzopen .6s cubic-bezier(.2,1.8,.4,1) forwards; }
@keyframes pzchest { to { transform: scale(1.08) rotate(3deg); } }
@keyframes pzopen { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-8deg); } 100% { transform: scale(1.15); } }
.pz-gift-item { font-size: 18px; font-weight: 800; color: var(--navy); margin-top: 6px; animation: pzstar .5s cubic-bezier(.2,1.8,.4,1); }
.pz-stock { font-weight: 700; color: var(--ok); font-size: 13px; }

/* ---- アイテムの爆発（飛ぶ絵と 崩れ方） ---- */
.pz-rk { position: absolute; left: 0; top: 0; width: var(--pzt); height: var(--pzt); z-index: 8; pointer-events: none;
  display: flex; align-items: center; justify-content: center; font-size: calc(var(--pzt) * .6);
  filter: drop-shadow(0 0 8px rgba(255,220,120,.9)); }
.pz-rk.h { animation: pzrkh .38s linear forwards; }
.pz-rk.v { animation: pzrkv .38s linear forwards; }
@keyframes pzrkh {
  0% { transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0) rotate(calc(var(--s) * 90deg)); opacity: 1; }
  100% { transform: translate3d(calc((var(--x) + var(--s) * var(--far)) * var(--pzt)), calc(var(--y) * var(--pzt)), 0) rotate(calc(var(--s) * 90deg)); opacity: .2; } }
@keyframes pzrkv {
  0% { transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0) rotate(calc(var(--s) * 90deg + 90deg)); opacity: 1; }
  100% { transform: translate3d(calc(var(--x) * var(--pzt)), calc((var(--y) + var(--s) * var(--far)) * var(--pzt)), 0) rotate(calc(var(--s) * 90deg + 90deg)); opacity: .2; } }
/* TNTの 輪が広がる */
.pz-ring { position: absolute; left: 0; top: 0; width: var(--pzt); height: var(--pzt); z-index: 7; pointer-events: none;
  border-radius: 50%; border: 4px solid rgba(255,230,150,.95); box-sizing: border-box;
  transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0);
  animation: pzringx .5s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes pzringx {
  0% { opacity: 1; transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0) scale(.2); }
  100% { opacity: 0; transform: translate3d(calc((var(--x) - (var(--r) - 1) / 2) * var(--pzt)), calc((var(--y) - (var(--r) - 1) / 2) * var(--pzt)), 0) scale(var(--r)); } }
/* プロペラが 飛んでいく */
.pz-fly { position: absolute; left: 0; top: 0; width: var(--pzt); height: var(--pzt); z-index: 9; pointer-events: none;
  display: flex; align-items: center; justify-content: center; font-size: calc(var(--pzt) * .62);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
  animation: pzfly var(--dur, 260ms) cubic-bezier(.4,.1,.5,1) forwards; }
@keyframes pzfly {
  0% { transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0) scale(.7) rotate(0); }
  60% { transform: translate3d(calc((var(--x) + (var(--tx) - var(--x)) * .6) * var(--pzt)), calc((var(--y) + (var(--ty) - var(--y)) * .6) * var(--pzt) - 18px), 0) scale(1.15) rotate(180deg); }
  100% { transform: translate3d(calc(var(--tx) * var(--pzt)), calc(var(--ty) * var(--pzt)), 0) scale(1) rotate(360deg); } }
/* 光の玉：盤ぜんたいが 光る */
.pz-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: #fff; animation: pzflash .4s ease-out forwards; }
@keyframes pzflash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* ---- 盤のまわりを かざる（城の中に見えるように） ---- */
.pz-stage { position: relative; padding: 14px 10px 10px; border-radius: 18px; margin-top: 4px;
  background: linear-gradient(180deg, #7a1f34, #5d1728 60%, #4a1220); box-shadow: inset 0 2px 0 rgba(255,255,255,.15); }
.pz-stage::before { content: ""; position: absolute; inset: 6px; border: 2px solid rgba(255,215,120,.35); border-radius: 14px; pointer-events: none; }
/* 上の表示を りっぱな枠に */
.pz-goal, .pz-moves { background: linear-gradient(180deg,#fff8e6,#f0e0b8); border: 3px solid #c9a227; border-radius: 14px;
  padding: 6px 16px; box-shadow: 0 3px 0 #8a6d14, inset 0 2px 0 rgba(255,255,255,.7); color: #5d3a12; font-weight: 800; }
.pz-goal b, .pz-moves b { color: #b5300f; }
.pz-score-w { background: rgba(255,255,255,.7); border-radius: 12px; padding: 5px 12px; }

/* ---- 仕掛け（草・木箱・石の箱） ---- */
.pz-fl { position: absolute; left: 0; top: 0; width: var(--pzt); height: var(--pzt); z-index: 0; pointer-events: none;
  transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0);
  background:
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.35) 0 12%, transparent 13%),
    repeating-linear-gradient(115deg, #4faa46 0 4px, #3d8f38 4px 8px);
  box-shadow: inset 0 0 0 2px rgba(30,80,25,.55), inset 0 -4px 8px rgba(0,0,0,.25); border-radius: 4px; }
.pz-fl.sm { position: static; width: 22px; height: 22px; display: inline-block; vertical-align: -4px; transform: none; }
.pz-bk { position: absolute; left: 0; top: 0; width: var(--pzt); height: var(--pzt); z-index: 3; pointer-events: none;
  transform: translate3d(calc(var(--x) * var(--pzt)), calc(var(--y) * var(--pzt)), 0); border-radius: 8px; }
.pz-bk.box { background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg, #b0783c 0 8px, #9a6631 8px 10px), #a86f36;
  box-shadow: inset 0 0 0 3px #6d4118, inset 0 -6px 10px rgba(0,0,0,.35), 0 3px 4px rgba(0,0,0,.3); }
.pz-bk.box::after { content: ""; position: absolute; inset: 22% 8%; border: 3px solid rgba(90,50,15,.65); border-radius: 3px; }
.pz-bk.stone { background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(0,0,0,.3)),
    repeating-linear-gradient(45deg, #9c9c9c 0 7px, #8a8a8a 7px 14px), #939393;
  box-shadow: inset 0 0 0 3px #5d5d5d, inset 0 -6px 10px rgba(0,0,0,.4), 0 3px 4px rgba(0,0,0,.3); }
.pz-bk.stone.cracked { background:
    linear-gradient(35deg, transparent 46%, rgba(30,30,30,.75) 47% 52%, transparent 53%),
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,0,0,.35)),
    repeating-linear-gradient(45deg, #8a8a8a 0 7px, #787878 7px 14px), #7d7d7d; }
.pz-bk.sm { position: static; width: 22px; height: 22px; display: inline-block; vertical-align: -4px; transform: none; }
.pz-mini { display: inline-block; width: 28px; height: 28px; vertical-align: -7px; object-fit: contain; }
.pz-ok { color: var(--ok); font-size: 20px; }

/* ============================================================ パズルの画面づくり（城の広間） */
.pz-top { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin-bottom: 6px; }
.pz-panel { position: relative; padding-top: 12px; }
.pz-ribbon { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg,#e8542f,#b8331a); color: #fff; font-size: 11px; font-weight: 800;
  padding: 2px 14px; border-radius: 8px; border: 2px solid #8a2410; white-space: nowrap; z-index: 2;
  box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.pz-panel .pz-goal, .pz-panel .pz-moves { min-width: 118px; text-align: center; padding: 14px 14px 8px; margin: 0; }
.pz-king-wrap { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: radial-gradient(circle at 50% 30%, #ffe9a8, #d99a2b);
  border: 4px solid #c9a227; box-shadow: 0 4px 0 #8a6d14, inset 0 -6px 12px rgba(0,0,0,.25); }
.pz-king { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .2s; }
.pz-king.worry { animation: pzworry .8s ease-in-out infinite alternate; }
@keyframes pzworry { to { transform: scale(1.06) rotate(-3deg); } }
.pz-scoreline { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 4px; }
.pz-scoreline .ghost { margin-left: auto; }
/* 城の広間（盤のうしろの情景） */
.pz-hall { position: relative; padding: 16px 8px 10px; border-radius: 18px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 22%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 34px),
    linear-gradient(180deg, #8d2a3d 0 14%, #6f1f30 14% 20%, #b9a48a 20% 78%, #8a765d 78% 100%); }
/* 左右の柱 */
.pz-hall::before, .pz-hall::after { content: ""; position: absolute; top: 8%; bottom: 6%; width: 26px; border-radius: 6px;
  background: linear-gradient(90deg, #6f5c45, #e6d7bd 35%, #fffaf0 50%, #d9c8ab 65%, #6f5c45);
  box-shadow: 0 0 0 2px rgba(80,60,35,.4); }
.pz-hall::before { left: 4px; } .pz-hall::after { right: 4px; }
.pz-stage { position: relative; z-index: 1; background: none; box-shadow: none; padding: 0; }
.pz-stage::before { display: none; }
/* 下の道具バー */
.pz-tools { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.pz-tool { position: relative; width: 62px; height: 62px; border-radius: 50%; padding: 0;
  background: radial-gradient(circle at 50% 30%, #6fbf63, #2f7d33);
  border: 4px solid #c9a227; box-shadow: 0 4px 0 #8a6d14, inset 0 -6px 10px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.pz-tool:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6d14, inset 0 -6px 10px rgba(0,0,0,.3); }
.pz-tool.on { background: radial-gradient(circle at 50% 30%, #ffe08a, #e0a92b); animation: pzToolOn .7s ease-in-out infinite alternate; }
@keyframes pzToolOn { to { transform: scale(1.09); } }
.pz-tool-em { font-size: 30px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.pz-tool-n { position: absolute; right: -6px; bottom: -4px; min-width: 24px; padding: 1px 5px;
  background: linear-gradient(180deg,#e8542f,#b8331a); color: #fff; font-size: 12px; font-weight: 800;
  border: 2px solid #fff; border-radius: 999px; box-shadow: 0 2px 3px rgba(0,0,0,.3); }
.pz-tool-tip { width: 100%; text-align: center; font-size: 13px; color: #8a7560; min-height: 18px; }

/* ============================================================ 祝福とねぎらい（全画面の演出） */
#fxLayer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.fx-banner { position: absolute; left: 0; right: 0; top: 26%; text-align: center; animation: fxban 2.2s cubic-bezier(.2,1.6,.4,1) forwards; }
.fx-main { font-size: clamp(32px, 8vw, 64px); font-weight: 900; letter-spacing: 1px;
  -webkit-text-stroke: 8px #3a1f00; paint-order: stroke fill; color: #ffd35b;
  text-shadow: 0 8px 0 rgba(0,0,0,.25); }
.fx-banner.ng .fx-main { color: #ffd9d2; -webkit-text-stroke: 8px #7a2318; }
.fx-sub { margin-top: 6px; font-size: clamp(14px, 3.6vw, 22px); font-weight: 800; color: #fff;
  -webkit-text-stroke: 5px #3a1f00; paint-order: stroke fill; }
.fx-banner.ng .fx-sub { -webkit-text-stroke: 5px #7a2318; }
@keyframes fxban {
  0% { opacity: 0; transform: scale(.4) rotate(-6deg); }
  12% { opacity: 1; transform: scale(1.15) rotate(2deg); }
  22% { transform: scale(1) rotate(0); }
  78% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(.9) translateY(-40px); } }
/* 花火 */
.fx-p { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 10px var(--c); animation: fxp 1.2s ease-out forwards; animation-delay: var(--d, 0ms); }
@keyframes fxp { 0% { opacity: 1; transform: translate(0,0) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 70px)) scale(.3); } }
/* 紙ふぶき */
.fx-cf { position: absolute; left: var(--x); top: -20px; width: var(--w, 8px); height: calc(var(--w, 8px) * 1.6);
  background: var(--c); animation: fxcf 2.8s linear forwards; animation-delay: var(--d, 0ms); border-radius: 2px; }
@keyframes fxcf { 0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: .9; transform: translateY(105vh) rotate(var(--r, 360deg)); } }
/* はじめての説明 */
.tip-back { position: absolute; inset: 0; background: rgba(20,15,10,.62); display: flex; align-items: center; justify-content: center;
  pointer-events: auto; animation: fxfade .2s ease; padding: 16px; }
@keyframes fxfade { from { opacity: 0; } }
.tip-card { background: linear-gradient(180deg,#fffdf6,#f6efdd); border: 4px solid #c9a227; border-radius: 18px;
  padding: 20px 22px; max-width: 460px; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: fxpop .35s cubic-bezier(.2,1.7,.4,1); }
@keyframes fxpop { from { transform: scale(.7); opacity: 0; } }
.tip-title { font-size: 22px; font-weight: 900; color: var(--navy); text-align: center; margin-bottom: 10px; }
.tip-body { font-size: 15px; line-height: 1.9; color: #4a3a26; }
.tip-body p { margin: 6px 0; }
.tip-demo { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 12px; }
.tip-demo .big { position: static; transform: none; width: 56px; height: 56px; display: inline-block; }
.tip-demo .gone { opacity: .18; }
.tip-ar { font-size: 26px; color: var(--bead-hi); }
.tip-ok { display: block; width: 100%; margin-top: 14px; font-size: 17px; padding: 12px; background: var(--ok); }

/* ---- 問題とそろばんを 大きく読みやすく ---- */
#playProblemWrap { min-height: 90px; }
.problem { color: #1e1e1e; }
#playInput, #flashInput { font-size: 30px; font-weight: 800; width: 240px; text-align: center; padding: 12px 14px; }
.answer-row button { font-size: 18px; padding: 12px 24px; }
.value-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
#playSorobanWrap .sub { font-size: 13px; }
#answerBtn { font-size: 20px; padding: 14px 34px; }

/* ---- 3段階のえらびボタン（BGMの音量など） ---- */
.seg { display: inline-flex; gap: 0; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; margin-left: 8px; vertical-align: middle; }
.seg button { background: #fff; color: #6b5a45; border: none; border-right: 2px solid var(--line); padding: 8px 18px; font-size: 15px; font-weight: 700; }
.seg button:last-child { border-right: none; }
.seg button.on { background: linear-gradient(180deg, var(--navy-hi), var(--navy)); color: #fff; }
.field { display: block; margin: 10px 0; font-size: 15px; }

/* ---- 上のバーの 音量ボタン（GOLDのとなり） ---- */
.vol-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 8px 3px 12px; }
.vol-pill > b { font-size: 15px; line-height: 1; }
.seg.sm { border-width: 1px; margin-left: 0; }
.seg.sm button { padding: 4px 9px; font-size: 12px; border-right-width: 1px; }
@media (max-width: 700px) { .vol-pill > b { font-size: 13px; } .seg.sm button { padding: 4px 7px; font-size: 11px; } }

/* ---- 曲えらび（設定画面） ---- */
.song { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 2px solid var(--line);
  border-radius: 12px; margin: 6px 0; background: #fff; }
.song.main { border-color: var(--royal-gold); background: #fffaf0; }
.song-play { width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 15px; background: var(--navy); }
.song-n { flex: 1; font-weight: 700; font-size: 15px; color: #2b2b2b; }
.song-n small { color: var(--ok); font-weight: 400; }
.song-badge { font-size: 12px; font-weight: 800; color: #7a5a12; background: #ffe9a8;
  border: 1px solid var(--royal-gold); border-radius: 999px; padding: 3px 12px; }
.song-main { font-size: 12px; padding: 6px 12px; background: transparent; color: var(--frame); border: 1px solid var(--line); }
.song-badge.fixed { background: #e3ecff; border-color: #7ba0e0; color: #24487a; }
.pz-cont { margin-top: 10px; background: linear-gradient(180deg,#e0b84a,#c9a227); color: #3a2a00; }
.song.off { opacity: .5; background: #f2efe8; }
.song.off .song-use { background: var(--accent); color: #fff; border-color: var(--accent); }
.song-use { font-size: 12px; padding: 6px 12px; background: transparent; color: var(--ok); border: 1px solid var(--ok); }
.song-n small.ng { color: var(--accent); }

/* ============================================================ スマホ・iPad 対応
   ・iPhone / iPad の Safari で、指で気持ちよく使えるようにする
   ・ノッチや ホームバーに 文字が隠れないようにする（safe-area）
   ・そろばんの珠は 指でおせる大きさを 最優先にする */

/* --- ノッチ・ホームバーの内側に収める --- */
.sidebar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.content { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }

/* --- メニューボタン（スマホのときだけ出る） --- */
.nav-toggle { display: none; background: var(--side-hi); color: #fff; font-size: 22px; line-height: 1;
  width: 46px; height: 46px; border-radius: 12px; padding: 0; flex-shrink: 0; }

/* ============================ iPad（たて）・小さめのノートPC ============================ */
@media (max-width: 900px) {
  .sidebar { padding-top: max(10px, env(safe-area-inset-top)); position: sticky; top: 0; z-index: 60; }
  .content { padding: 14px 16px; max-width: none; }
  .nav { padding: 10px 14px; font-size: 15px; }         /* 指でおせる高さにする */
  .nav-sec { display: none; }                            /* 横ならびでは 見出しは じゃま */
  .topbar h2 { font-size: 19px; }
  .topbar-right { gap: 8px; flex-wrap: wrap; }
}

/* ============================ スマホ（iPhone） ============================ */
@media (max-width: 640px) {
  /* --- メニューは しまっておいて、☰ で開く --- */
  .sidebar { padding: max(6px, env(safe-area-inset-top)) 10px 8px; }
  .brand { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 2px 0; }
  .brand-logo { max-width: 150px; }
  .nav-toggle { display: block; }
  .side-nav { display: none; width: 100%; margin-top: 6px; }
  .side-nav.open { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .side-nav.open .nav-sec { display: block; grid-column: 1 / -1; padding: 6px 4px 0; }
  .nav { font-size: 15px; padding: 12px 10px; text-align: center; background: rgba(255,255,255,.08); }

  /* --- 本文まわり --- */
  .content { padding: 12px max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .card { padding: 13px; border-radius: 12px; margin-bottom: 12px; }
  .topbar { margin-bottom: 10px; gap: 6px; align-items: center; }
  .topbar h2 { font-size: 17px; flex-shrink: 0; width: 100%; }
  .topbar-right { gap: 6px; }
  /* 名前と顔は ホーム画面にも出ているので、せまい画面では 上のバーから外す */
  .avatar-mini { display: none; }
  #examInfoBtn { font-size: 12px; padding: 6px 10px; }
  .pill { font-size: 12px; padding: 6px 10px; }

  /* --- 入力欄は 16px 以上にする（これ未満だと iPhone が 勝手に拡大する） --- */
  input, select, textarea { font-size: 16px !important; }

  /* --- 級・段えらび --- */
  .grade-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .grade-cell { padding: 14px 2px; font-size: 15px; }
  .chip { padding: 9px 13px; font-size: 13px; }
  #startBtn { width: 100%; font-size: 19px; padding: 15px 0; }

  /* --- そろばん：珠の大きさを 指に合わせる。横にはみ出す分は なぞって動かす --- */
  :root { --bh: 27px; --cw: 40px; }
  .soroban { border-width: 7px; padding: 9px 7px; margin: 10px 0; border-radius: 4px;
    justify-content: flex-start; max-width: none; width: auto;
    -webkit-overflow-scrolling: touch; }
  .soroban-value { font-size: 26px; }
  .value-row { gap: 8px; }

  /* --- 問題 --- */
  .play-hud { font-size: 15px; gap: 6px; }
  .marks { font-size: 19px; letter-spacing: 2px; }
  .mark { font-size: 92px; }
  .btn-row button, .answer-row button { padding: 12px 18px; font-size: 16px; }
  #answerBtn, #battleAnswerBtn { font-size: 18px; padding: 13px 26px; }

  /* --- フラッシュ暗算 --- */
  .flash-display { font-size: 56px; height: 108px; }
  .signal .lamp { width: 28px; height: 28px; }

  /* --- パズル：盤を 画面いっぱいまで 大きくする（外わく・カードの余白ぶんを ひく） --- */
  .pz-board { --pzt: min(56px, calc((100vw - 60px) / 8)); border-width: 3px; }
  /* 王国の見出し：名前と GOLD が かさならないように 折り返す */
  .kingdom-head { flex-wrap: wrap; gap: 8px; row-gap: 6px; }
  .kd-title { font-size: 17px; }
  .gold-badge { font-size: 14px; padding: 6px 12px; white-space: nowrap; }
  .gold-badge .ico-coin { height: 22px; vertical-align: -6px; }
  .pz-goal, .pz-moves { font-size: 15px; }
  .pz-goal b, .pz-moves b { font-size: 19px; }
  .pz-item { padding: 7px 9px; gap: 7px; }
  .pz-em { font-size: 22px; }

  /* --- たいせん --- */
  .fighter img { width: 62px; }
  .hpbar { width: 108px; }

  /* --- 記録の表：はみ出す分は 横になぞる --- */
  .rec-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* --- ネコの吹き出し・お祝いの文字 --- */
  .tip-card { padding: 16px 14px; }
  .fx-main { -webkit-text-stroke-width: 6px; }
}

/* ============================ さらに小さい端末（iPhone SE など） ============================ */
@media (max-width: 380px) {
  :root { --bh: 24px; --cw: 36px; }
  .grade-grid { grid-template-columns: repeat(3, 1fr); }
  .flash-display { font-size: 46px; height: 92px; }
}

/* ============================ スマホを 横にしたとき ============================
   横向きは そろばんが 全部見えるので いちばん練習しやすい。
   そのぶん 縦が短いので 上下の余白と 文字を つめる */
@media (max-height: 480px) and (orientation: landscape) {
  .sidebar { position: static; }
  .content { padding-top: 8px; }
  .topbar { margin-bottom: 6px; }
  :root { --bh: 20px; --cw: 32px; }
  .soroban { margin: 6px auto; padding: 6px 6px; border-width: 6px; }
  .flash-display { font-size: 52px; height: 76px; }
  .play-hud { margin-bottom: 6px; }
  .pz-board { --pzt: min(48px, calc((100vh - 190px) / 8)); }
}

/* ============================ 指で操作するとき ============================ */
@media (hover: none) {
  .bead:hover { filter: none; }                    /* 指では ホバーが 残ってしまうので 消す */
  .nav:hover { background: transparent; }
  .nav.active:hover { background: var(--gold); }
  /* 珠・パズルの玉は 長おしで 文字が選ばれたり メニューが出ないようにする */
  .bead, .pz-t, .pz-board, .col, .soroban { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* ============================================================ 練習中・たいせん中の スマホ画面
   スマホは 縦がせまい。問題を見ながら 珠を動かせないと そろばんにならないので、
   ・上のロゴや設定ボタンは いったん しまう
   ・そろばんは 画面の下に すえつける（＝いつでも 指がとどく）
   ・「こたえる」も そろばんと同じ場所に置く */
@media (max-width: 900px) {
  body.playing .sidebar { display: none; }
}
/* 横向きのスマホにも 同じことをする（縦がせまいのは 同じなので） */
@media (max-width: 640px), (max-height: 520px) and (orientation: landscape) {
  body.playing .topbar { display: none; }
  body.playing .content { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
  /* 下にすえつけた そろばんの ぶんだけ すきまを空ける。そうしないと ボタンが かくれる */
  body.playing .card { margin-bottom: 0; padding-bottom: calc(var(--soroPad, 300px) + 8px); }
  body.playing #stepsRow { margin-top: 4px; }
  body.playing #stepsRow button { font-size: 13px; padding: 7px 12px; }
  body.playing .play-hud { position: sticky; top: 0; z-index: 5; background: var(--card); padding: 2px 0 4px; }

  body.playing #playSorobanWrap, body.playing #battleSorobanWrap {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--card); border-top: 3px solid var(--navy);
    box-shadow: 0 -4px 16px rgba(0,0,0,.22);
    padding: 3px max(4px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "s s" "v b";
    align-items: center; column-gap: 8px;
  }
  body.playing #playSorobanWrap > .sub, body.playing #battleSorobanWrap > .sub { display: none; }
  body.playing #playSorobanWrap > .soroban, body.playing #battleSorobanWrap > .soroban { grid-area: s; margin: 2px 0; border-width: 5px; padding: 6px 5px; }
  body.playing #playSorobanWrap > .value-row, body.playing #battleSorobanWrap > .value-row { grid-area: v; margin: 0; justify-content: flex-start; gap: 6px; }
  body.playing #playSorobanWrap > .btn-row, body.playing #battleSorobanWrap > .btn-row { grid-area: b; margin: 0; }
  body.playing .soroban-value { font-size: 22px; }
  body.playing #answerBtn, body.playing #battleAnswerBtn { padding: 11px 18px; font-size: 17px; }
  body.playing #clearSoroban2, body.playing #clearSoroban3 { padding: 7px 10px; font-size: 13px; }
  /* 答えが正しいか出す ◎× は 問題の上に かぶせる */
  body.playing .mark { font-size: 84px; }
}

/* 横向きスマホで 練習しているとき：そろばんの右に「こたえる」を置いて 下の帯を うすくする。
   （上の まとめて書いた指定より あとに置く。CSSは あとに書いたほうが 勝つため） */
@media (max-height: 520px) and (orientation: landscape) {
  body.playing #playSorobanWrap, body.playing #battleSorobanWrap {
    grid-template-columns: auto 1fr; grid-template-areas: "s v" "s b"; column-gap: 12px; align-items: center;
  }
  body.playing #playSorobanWrap > .soroban, body.playing #battleSorobanWrap > .soroban { margin: 0; border-width: 4px; padding: 4px; }
  body.playing #playSorobanWrap > .value-row, body.playing #battleSorobanWrap > .value-row { align-self: end; }
  body.playing #playSorobanWrap > .btn-row, body.playing #battleSorobanWrap > .btn-row { align-self: start; justify-content: flex-start; margin-top: 6px; }
  body.playing #answerBtn, body.playing #battleAnswerBtn { padding: 8px 14px; font-size: 15px; }
  body.playing .soroban-value { font-size: 18px; }
}

/* 縦がみじかい画面（ノートPC・iPadの横向き）では、練習中だけ 上のバーを しまう。
   そのぶん 問題の字を 大きくできる（「もどる」ボタンは 中に残っているので 出られる） */
@media (min-width: 901px) and (max-height: 900px) {
  body.playing .topbar { display: none; }
  body.playing .sidebar { display: none; }   /* 練習中は メニューも しまう（「← もどる」で出られる） */
  body.playing .content { max-width: none; }
}

/* ============================================================ 横長で 縦がみじかい画面（iPadの横向き・ノートPC）
   問題を たてに ならべると そろばんの場所が なくなって、字がどんどん小さくなる。
   紙の問題を 左に置いて、右に そろばんを置く ＝ 本物と同じ ならべ方にする。 */
@media (min-width: 1000px) and (max-height: 900px) {
  body.playing #view-play > .card {
    display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, max-content);
    grid-template-areas: "hud hud" "prob soro" "steps soro";
    column-gap: 22px; align-items: start;
  }
  body.playing #view-play > .card > .play-hud { grid-area: hud; }
  body.playing #playProblemWrap { grid-area: prob; }
  body.playing #playSorobanWrap { grid-area: soro; align-self: center; min-width: 0; }
  body.playing #playSorobanWrap > .soroban { max-width: 100%; }
  body.playing #stepsRow { grid-area: steps; align-self: start; }
  /* 休憩・一時停止・答え・コツ などは 横いっぱいに置く */
  body.playing #playPause, body.playing #playRest, body.playing #playInputWrap,
  body.playing #playFlashWrap, body.playing #steps, body.playing #anzanTip,
  body.playing #playResult { grid-column: 1 / -1; }
}

/* ============================================================ れんしゅう中の 音ボタン
   上のバーを しまっていても、ここから 効果音・BGM を 切れるようにする */
.snd-mini { display: inline-flex; gap: 6px; }
.snd-mini.center { display: flex; justify-content: center; margin: 8px 0; }
.snd-btn { display: inline-flex; align-items: center; gap: 3px; background: var(--card); color: #2b2b2b;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; font-size: 15px; line-height: 1; }
.snd-btn i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--navy); }
.snd-btn.off { background: #efe9dd; color: #9a8d78; }
.snd-btn.off i { color: var(--accent); }

/* ============================================================ 記録：やった記録・ランキング */
.acc-hi { color: var(--ok); font-weight: 700; }
.acc-lo { color: var(--accent); font-weight: 700; }
.rec-miss { color: var(--accent); font-weight: 700; }
.rank-now { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.rank-now b { font-size: 26px; color: var(--accent); }
.rank-pt { font-size: 14px; color: #8a7560; font-weight: normal; margin-left: 8px; }
.rank-cheer { font-size: 14px; color: #b5651d; margin-bottom: 10px; }
.rank-h { font-size: 15px; color: var(--navy); margin: 16px 0 6px; }
.rec-table tr.rank-me { background: #fff7e0; }
.rec-table tr.rank-me td { font-weight: 700; }
.rk { display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 8px; font-weight: 800; color: #fff; }
.rk-S { background: linear-gradient(180deg,#ffd76a,#d99a2b); color: #4a3400; }
.rk-A { background: #d9534f; } .rk-B { background: #4a90d9; } .rk-C { background: #8a8071; }
#recFilter { margin-bottom: 10px; }
@media (max-width: 640px) {
  #recLog .rec-table, #recRank .rec-table { font-size: 12px; }
  #recLog .rec-table th, #recLog .rec-table td { padding: 5px 6px; }
  .rank-now { font-size: 16px; } .rank-now b { font-size: 22px; }
}

/* ============================================================ スマホで かくかくしないように
   iPhone は 「影をぼかす」「大きなものを 塗りなおす」のが とても苦手。
   動かすものは 別のレイヤーに のせて、影は かるいものに 置きかえる。 */
@media (hover: none) {
  /* 玉の絵に かけていた drop-shadow は 64個ぶん 毎コマ 計算されるので やめる */
  .pz-img { filter: none; }
  .pz-t { contain: layout style paint; }
  /* 下にすえつけた そろばんは 別レイヤーに のせる（スクロールのたびに 塗り直さない） */
  body.playing #playSorobanWrap, body.playing #battleSorobanWrap {
    transform: translateZ(0); will-change: transform; contain: paint;
  }
  /* 上のバーも 同じ（sticky は 塗り直しが おきやすい） */
  .sidebar, body.playing .play-hud { transform: translateZ(0); }
  /* 影の重ねがけを へらす */
  .pz-board { box-shadow: inset 0 4px 10px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.18), 0 0 0 3px #8a6d14; }
  .card { box-shadow: none; }
  .bead { will-change: transform; }
}
/* 動きを へらす設定にしている人には アニメを出さない（酔い・端末の負担どちらにも効く） */
@media (prefers-reduced-motion: reduce) {
  .pz-t, .bead, .hpfill { transition: none !important; }
  .pz-t.sel, .fx-banner, .fx-p, .fx-cf { animation: none !important; }
}

/* 練習中の上の帯：もどる・級・時計・一時停止・進み具合・音ボタン が 1行に入りきらないので、
   スマホでは 字を小さくして 折り返し、たてに つぶれないようにする */
@media (max-width: 640px) {
  .play-hud { flex-wrap: wrap; gap: 4px 8px; font-size: 13px; justify-content: flex-start; }
  .play-hud > * { flex: 0 0 auto; }
  #quitBtn { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
  #playGrade { white-space: nowrap; font-size: 13px; }
  #pauseBtn { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
  #playTimer, #playProgress { white-space: nowrap; font-size: 13px; }
  .play-hud .snd-mini { margin-left: auto; }
  .snd-btn { padding: 5px 8px; font-size: 13px; }
}

/* ============================================================ 説明用の そろばんの絵・はじめての案内 */
.sb-svg { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }
.sb-pair { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 2px; flex-wrap: wrap; }
.sb-ar { font-size: 26px; color: var(--bead-hi); font-weight: 800; }
.sb-step { margin: 8px 0 12px; }
.sb-cap { text-align: center; font-size: 14px; color: #4a3a26; margin-top: 2px; }
.sb-cap b { color: var(--accent); }
.ls-key { background: #fff6e0; border: 2px solid var(--royal-gold); border-radius: 10px; padding: 6px 12px; text-align: center; font-size: 16px; margin: 8px 0; }
.tip-steps { margin: 6px 0 8px 22px; line-height: 1.9; }
.tip-steps li { margin-bottom: 2px; }
.tip-card { max-height: 92vh; overflow-y: auto; }
#lessonBody details { margin-bottom: 8px; }
#lessonBody summary { font-size: 16px; }
#lessonBody .lesson-body { font-size: 15px; }
#lessonBody .lesson-body ul { padding-left: 20px; line-height: 1.9; }
@media (max-width: 640px) { .tip-card { padding: 16px 12px; } .sb-svg { width: 84px; } }

/* まちがえた問題の解説：問題の式が 長いとき（5級の10口など）、スマホで 横にはみ出さないように 折り返す */
.ex-card, .ex-head, .ex-diag, .ex-fix, .tb-side { overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; }
.ex-head .ex-q { white-space: normal; font-size: clamp(14px, 4.2vw, 20px); }
.miss-report, .steps, .result { overflow-wrap: anywhere; }

/* ============================================================ 道具のプレゼント・級の解きかたボタン・パズルの つかい方 */
.drop-box { margin: 10px auto; max-width: 420px; background: linear-gradient(180deg,#fff7e0,#ffe9b3); border: 2px solid var(--royal-gold);
  border-radius: 14px; padding: 10px 14px; font-size: 16px; color: #5a4310; animation: goldPop .45s ease; }
.drop-box small { display: block; font-size: 12px; color: #8a7560; margin-top: 2px; }
.lesson-btn { font-size: 13px; padding: 6px 12px; margin-left: 6px; vertical-align: middle; }
.pz-howto { text-align: left; margin: -2px 0 8px; line-height: 1.8; }
@media (max-width: 640px) { .lesson-btn { display: block; margin: 8px auto 0; } }

/* ============================================================ アバターの絵（hero_1〜6）と ばいきんの敵 */
.av-img { display: block; object-fit: contain; object-position: center top; }
.avatar-mini .av-img { width: 30px; height: 40px; border-radius: 8px; }
.avatar-big .av-img { width: 52px; height: 74px; border-radius: 10px; }
.hero-avatar .av-img { width: 60px; height: 64px; border-radius: 12px; }
.avatar-picker button .av-img { width: 44px; height: 70px; border-radius: 8px; }
.avatar-picker button { padding: 4px 6px; }
.fighter img { width: 92px; height: 130px; object-fit: contain; object-position: center bottom; }
@media (max-width: 900px) { .fighter img { width: 72px; height: 104px; } }
@media (max-width: 640px) { .fighter img { width: 62px; height: 92px; } }

/* 絵の背景が 四角いので、カードのように 角を丸める */
.fighter img { border-radius: 14px; }

/* ============================================================ はやさメーター（ホーム） */
.speed-box { background: linear-gradient(180deg,#fff8e4,#ffefc4); color: #3a2a00; border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; border: 2px solid var(--royal-gold); }
.sp-h { font-size: 14px; font-weight: 800; color: #7a5a12; letter-spacing: 1px; margin-bottom: 4px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sp-big { font-size: 18px; font-weight: 700; }
.sp-big b { font-size: 38px; color: var(--navy); font-variant-numeric: tabular-nums; }
.sp-big small { font-size: 14px; margin-left: 2px; }
.spark { width: 220px; max-width: 100%; height: 44px; }
.sp-cmp { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; margin-top: 4px; }
.sp-up { color: var(--ok); font-weight: 700; } .sp-dn { color: #b5651d; } .sp-eq { color: #8a7560; }
.sp-best { color: #7a5a12; font-weight: 700; }
.today-flow { margin-top: 6px; font-size: 14px; line-height: 1.8; color: #2b2b2b; }

/* ============================================================ 合格証 */
#certLayer { position: fixed; inset: 0; z-index: 10000; background: rgba(20,15,10,.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; overflow: auto; }
.cert { background: #fffdf5; color: #2b2b2b; width: min(560px, 100%); border: 10px double var(--royal-gold); border-radius: 6px; padding: 26px 24px; text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,.4); font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.cert-top { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.cert-crown { height: 44px; }
.cert-title { font-size: 34px; font-weight: 900; letter-spacing: 12px; color: var(--navy); }
.cert-name { font-size: 28px; font-weight: 800; margin: 14px 0 6px; border-bottom: 2px solid #2b2b2b; display: inline-block; padding: 0 18px 4px; }
.cert-name small { font-size: 16px; margin-left: 8px; }
.cert-body { font-size: 16px; line-height: 2; margin: 10px 0; }
.cert-body b { font-size: 22px; color: var(--accent); }
.cert-date { font-size: 14px; color: #555; margin-top: 6px; }
.cert-king { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; font-size: 13px; }
.cert-king img { height: 56px; }
.cert-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cert-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cert-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: #fff8e4; color: #2b2b2b; border: 2px solid var(--royal-gold); border-radius: 12px; padding: 8px 14px; font-weight: 800; }
.cert-chip small { font-weight: 400; font-size: 11px; color: #8a7560; }
@media (max-width: 640px) { .cert { padding: 18px 12px; } .cert-title { font-size: 26px; letter-spacing: 8px; } .cert-name { font-size: 22px; } }
/* 印刷は 合格証だけ */
@media print {
  body * { visibility: hidden !important; }
  #certLayer, #certLayer .cert, #certLayer .cert * { visibility: visible !important; }
  #certLayer { position: static; background: none; padding: 0; }
  .cert { box-shadow: none; width: 100%; }
  .cert-btns { display: none !important; }
}

/* 合格証の「とじる」は 暗い背景の上なので 白くする */
.cert-btns .ghost { color: #fff; border-color: rgba(255,255,255,.7); }

/* ============================================================ 運指（ゆびの つかいかた） */
.un-lead { font-size: 15px; line-height: 1.9; }
.un-rule { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #faf7f0; border: 2px solid var(--line);
  border-radius: 12px; padding: 8px 12px; margin: 8px 0; font-size: 14px; line-height: 1.7; }
.un-tag { display: inline-block; color: #fff; font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.un-svg { display: inline-block; vertical-align: middle; height: auto; max-width: 100%; }
.un-pair { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.un-ar { font-size: 28px; color: var(--bead-hi); font-weight: 800; }
.un-step { margin: 12px 0 16px; }
.un-tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.un-both { display: inline-block; background: var(--royal-gold); color: #3a2a00; font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 999px; }
.un-cap { text-align: center; font-size: 14px; color: #4a3a26; margin-top: 4px; line-height: 1.7; }
.un-cap b { color: var(--accent); }
.un-h { font-weight: 800; color: var(--navy); font-size: 15px; margin: 18px 0 4px; border-top: 2px solid var(--line); padding-top: 10px; }
.un-list { margin: 6px 0 0 20px; line-height: 1.9; font-size: 14px; }
.un-note { background: #fff6e0; border-left: 5px solid var(--royal-gold); border-radius: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.8; margin: 10px 0; }
@media (max-width: 640px) { .un-ar { font-size: 22px; } .un-cap { font-size: 13px; } }
.un-rule .un-txt { flex: 1 1 180px; min-width: 0; }

.un-pair .un-svg { flex: 0 1 auto; max-width: 44%; }
.un-no { font-weight: 900; color: var(--navy); font-size: 18px; }
.un-why { background: #f7f9fd; border: 2px solid #cbd8ea; border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.9; margin: 8px auto 0; max-width: 560px; text-align: left; }
.un-why b { color: var(--accent); }
.un-ex { font-weight: 800; color: var(--navy); font-size: 15px; margin: 14px 0 2px; }
.un-ex b { font-size: 19px; color: var(--accent); }

/* 「そろばんの きほん」から、くわしい解説ページへの ご案内 */
.lesson-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px;
  background: #fff8e4; border: 2px solid var(--royal-gold); border-radius: 12px; padding: 12px 14px; }
.lesson-links b { color: var(--navy); width: 100%; margin-bottom: 2px; }
.lesson-links a { color: var(--navy); font-weight: 700; text-decoration: none; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; }