/* ぽんぽん ぬりえ。設計: .claude/rules/nurie/design/(erabu.md 3.3 の配色・9章 殻の共通ルール)。
   寸法の数は js(screens/*.js の layout())が画面の実寸から決め、CSS 変数で渡す(縦・横・低い横で引き直す)。 */
:root {
  --bg: #f6efe2;
  --ink: #2a2422;
  --card: #ffffff;
  --shadow: #d9ccb6;
  --accent: #e2735a;
  --focus: #2d6cb5;
  --pad: 12px;
  --safe-t: max(var(--pad), env(safe-area-inset-top));
  --safe-r: max(var(--pad), env(safe-area-inset-right));
  --safe-b: max(var(--pad), env(safe-area-inset-bottom));
  --safe-l: max(var(--pad), env(safe-area-inset-left));
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-text-size-adjust: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
#print-area { display: none; }

/* 画面: #app の子だけが全面(position:fixed; inset:0 はここだけ ← erabu.md 4.1) */
#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; }
.screen.enter { animation: enter 180ms ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 押した反応は全画面で同じ縮み(transform だけ ← erabu.md 9章) */
.pressed { transform: scale(0.94); }

/* ── 保護者の口(ことば・#site-home。見た目 48・当たり 56・影 2px)── */
.parent-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; flex: none; text-decoration: none; color: var(--ink); }
.parent-face { width: 48px; height: 48px; border-radius: 50%; background: var(--card); box-shadow: 0 2px 0 var(--shadow); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.parent-btn.pressed { transform: scale(0.94); }
.parent-face svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.parent-face svg[viewBox="0 0 100 100"] { stroke-width: 7; }

/* もどる(左上。見た目 56 の丸・当たり 64) */
.back-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.back-face { width: 56px; height: 56px; border-radius: 50%; background: var(--card); box-shadow: 0 2px 0 var(--shadow); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.back-face svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ── えらぶ ── */
.er-main, .nu-main, .ot-main {
  position: absolute; inset: 0; overflow: hidden;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  display: flex; flex-direction: column;
}
.er-band { order: -1; height: var(--band); flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.er-title { margin: 0; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 800; line-height: 1.15; }
.er-title span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: keep-all; overflow-wrap: anywhere; }
.er-apple { width: 36px; height: 36px; flex: none; }
.er-main[data-orient="land"] .er-title { font-size: 24px; }
/* 幅 320 級: 26px だと de「Tipp-Tipp-Malen」が3行に割れて2行で切れる(字の箱は約 116px) */
@media (max-width: 359px) { .er-title { font-size: 20px; } .er-apple { width: 28px; height: 28px; } }
/* 低い横(568×320): 帯に ◀ 点 のぞき窓(3.5)が並ぶと題名の箱は約 120px。24px だと de・es が2行で切れる */
@media (max-height: 360px) and (orientation: landscape) { .er-main[data-orient="land"] .er-title { font-size: 20px; } .er-apple { width: 28px; height: 28px; } }
.er-parents { display: flex; gap: 12px; flex: none; }
/* たなの中の「はじめの えに もどる」(◀ + 題名の りんご)。題名と同じ所に出す */
.er-top { flex: none; display: flex; align-items: center; gap: 4px; height: calc(var(--band) - 8px); min-height: 64px; padding: 0 8px 0 4px; background: var(--card); border-radius: 16px; box-shadow: 0 4px 0 var(--shadow); }
.er-top .er-tri { width: 40px; height: 40px; }
.er-top .er-apple { width: 48px; height: 48px; }
.er-top.pressed { box-shadow: 0 1px 0 var(--shadow); }
.er-grid {
  flex: 1; min-height: 0; display: grid; gap: 12px; align-content: center; justify-content: center;
  grid-template-columns: repeat(var(--cols), var(--card-size)); grid-auto-rows: var(--card-size);
  grid-template-rows: repeat(var(--rows), var(--card-size));
}
.er-card { width: var(--card-size); height: var(--card-size); background: var(--card); border-radius: 16px; box-shadow: 0 4px 0 var(--shadow); padding: 10px; }
.er-card.pressed { box-shadow: 0 1px 0 var(--shadow); }
.er-thumb { display: block; width: 100%; height: 100%; pointer-events: none; }
.er-main[data-step="lang"] .er-grid, .er-main[data-step="lang"] #site-home, .er-main[data-step="lang"] .er-nav { display: none; }
.er-grid.flip { animation: enter 180ms ease-out; }

/* ページ送り(erabu.md 3.4)。縦 = 格子の下の段 / 横 = 帯の中。矢印は子の的(80・影 4px)。先が無い側は hidden(列は空けたまま) */
/* 縦の ▶ の列は 160 まで・段の残りまで縮む(320 幅で pop の点3つ = 52 を並べると 80 + 52 + 160 + 間 24 が 296 を超える ← 3.6) */
.er-nav { --peek-w: 160px; flex: none; display: grid; grid-template-columns: 80px auto minmax(0, var(--peek-w)); align-items: center; justify-content: space-between; gap: 12px; height: 80px; }
.er-main[data-orient="port"] .er-nav { margin-top: 12px; }
/* 横: 帯の中の枠 --slot-w(erabu.js = ひろばの窓2つ と いちばん広い たなの段の広いほう)に左から並べる。中央ぞろえにすると
   段の幅が たなごとに違い、◀ が pop / cool で別の x に来て cool の窓の所に かかった(812×375 で 392 / 432 ← 3.6) */
.er-main[data-orient="land"] .er-nav { width: var(--slot-w); justify-content: start; margin-left: auto; margin-right: 12px; }
/* 横の帯は狭い(568×320 で題名が切れる)ので、1ページ目は ◀ の列を畳む。2ページ目からは ▶ の列を 104 に縮める
   (窓と年齢の札は出さず三角だけ。最後のページは列だけ残す)= ◀ が直前まで のぞき窓のあった所(右端から 160)に来ない
   (続けて押して戻らない)。◀ と窓 160 を同時に並べると題名が切れる。erabu.md 3.5 */
.er-main[data-orient="land"] .er-nav { grid-template-columns: auto auto var(--peek-w); }
.er-main[data-orient="land"] .er-nav[data-later] { --peek-w: 104px; }
.er-main[data-orient="land"] .er-nav[data-later] .er-peek { justify-content: center; }
.er-main[data-orient="land"] .er-nav[data-later] .er-peek-win { display: none; }
.er-main[data-orient="land"] .er-nav[data-later] .er-peek-side { flex: none; }
.er-main[data-orient="land"][data-paged] .er-grid { margin-top: 12px; }   /* 帯の矢印(80 = 帯の高さ)と札の間(layout() の 12 と対) */
.er-page { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: var(--card); border-radius: 16px; box-shadow: 0 4px 0 var(--shadow); }
.er-page[data-page="prev"] { grid-column: 1; }
.er-page[data-page="next"] { grid-column: 3; }
.er-page.pressed { box-shadow: 0 1px 0 var(--shadow); }
.er-tri { width: 48px; height: 48px; pointer-events: none; }
/* ▶ = のぞき窓(erabu.md 3.5): 次のページの先頭の絵(64 角)+ 年齢の札 + 三角。高さは矢印と同じ 80、幅は中身なり */
.er-peek { width: 100%; max-width: var(--peek-w); gap: 4px; padding: 8px; justify-content: flex-start; }
.er-peek-win { width: 64px; height: 64px; flex: none; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--shadow); pointer-events: none; }
.er-peek-win:empty { display: none; }
.er-peek-thumb { display: block; width: 100%; height: 100%; }
.er-peek-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.er-peek .er-tri { width: 40px; height: 40px; }
/* 点は 3ページまで1行、4ページからは2段(--dot-cols は erabu.js)。4つを1行に並べると幅 72 で、320 幅で ▶ が画面の外・低い横で題名が切れた */
.er-dots { grid-column: 2; display: grid; grid-template-columns: repeat(var(--dot-cols, 2), 12px); gap: 6px 8px; justify-content: center; pointer-events: none; }
.er-main[data-orient="land"] .er-dots { grid-template-columns: repeat(var(--dot-cols-land, 2), 12px); }   /* 横は 3ページから2段(erabu.js dotCols) */
.er-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); }
.er-dots i.on { background: var(--ink); }

/* ひろばの窓(erabu.md 3.6): manga の たな 1つ = 見本 64 | 三角 40(字も年齢の札も出さない)。幅 --hub-w は erabu.js(縦 = min(160, (内幅 − 12) / 2)・横 = 160 / 低い横 104) */
.er-nav[data-hub] { display: flex; justify-content: space-between; }
.er-main[data-orient="land"] .er-nav[data-hub] { justify-content: space-between; }   /* pop = 枠の左端(= たなの ◀)・cool = 右端 */
.er-nav[data-hub] .er-hub:only-child { margin-left: auto; }
.er-hub {
  width: var(--hub-w, 160px); padding: 8px; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 64px;
  grid-template-areas: "win tri"; column-gap: 4px; row-gap: 2px; align-content: center; justify-items: center; align-items: center;
}
.er-hub .er-peek-win { grid-area: win; }
.er-hub .er-tri { grid-area: tri; width: 40px; height: 40px; }
.er-nav[data-narrow] .er-hub { grid-template-rows: 64px; grid-template-areas: "win tri"; }
.er-nav[data-tiny] .er-hub { column-gap: 0; }
.er-nav[data-tiny] .er-hub .er-tri { width: 24px; height: 24px; }

/* ことば の一覧(札の格子・おとなのボタンと差し替える。覆いではない) */
/* 14言語 + とじる = 15枚。縦は3列 × 5段・横は5列 × 3段(2列 × 8段は 375×560 で、150px 詰めの3列 × 5段は 568×320 で とじる が画面の外へ出た)。
   名前は2行まで折る(`Bahasa Indonesia` が1行だと 150px の札で切れた)。チェックは札の右上に重ね、名前の幅を食わない */
.o-lang { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 56px; gap: 8px; align-content: center; }
@media (orientation: landscape) { .o-lang { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.f-btn { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; background: var(--card); border-radius: 12px; box-shadow: 0 2px 0 var(--shadow); font-size: 18px; font-weight: 700; }
.lang-item { position: relative; padding: 0 20px 0 4px; font-size: 16px; }   /* 右は選んだ印(右上 5px・幅 16px)の分。字が印に触れない */
.lang-close { padding: 0 4px; gap: 2px; font-size: 16px; }
.lang-item[aria-checked="true"] { box-shadow: inset 0 0 0 3px var(--ink), 0 2px 0 var(--shadow); }
.f-btn .lang-check { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; }
.lang-check { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.lang-item[aria-checked="true"] .lang-check { visibility: visible; }
.lang-back { width: 22px; height: 22px; }
/* 幅 320 では右 20px だと Bahasa Indonesia が3行に割れる(i18n.feature)。字と印を少し小さくして 14言語とも印に触れない(実測) */
@media (max-width: 359px) { .lang-item { padding-right: 18px; font-size: 14px; } .f-btn .lang-check { top: 4px; right: 4px; width: 14px; height: 14px; } }
.f-btn svg { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; width: 22px; height: 22px; }
.lang-name { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }

/* ── ぬる ── */
.nu-bar { height: var(--band); flex: none; display: flex; align-items: center; gap: 12px; position: relative; }
.nu-undo { margin-left: auto; }
.nu-slot { flex: none; display: grid; margin-left: auto; }   /* もとの おおきさに もどす と のこり は同じ枠に重ねる(nuru.md 4.8) */
.nu-slot > * { grid-area: 1 / 1; }
.nu-zoom { position: relative; }
/* 隠れても場所は残す(横の帯は space-between = 出たり消えたりで もどす が跳ぶ ← nuru.md 4.7)。見えず・押せず・焦点も来ない(inert)。[hidden] は display:none !important なので使わない */
.nu-zoom.off, .nu-nokori.off { visibility: hidden; pointer-events: none; }
.nu-slot + .nu-undo { margin-left: 0; }
/* のこり(nuru.md 4.8): 横長 = 進みの輪 +「のこり N」/ .stack(横の列・帯に入らない幅)= 輪の中に数 + 短い語を下に */
.nu-slot { justify-items: end; }
.kid-btn.nu-nokori { width: auto; min-width: var(--undo-w); padding: 0 12px 0 10px; gap: 6px; color: var(--ink); }
.nu-pr-box { position: relative; flex: none; width: 30px; height: 30px; display: block; pointer-events: none; }
.kid-btn svg.nu-pr { width: 100%; height: 100%; display: block; stroke-width: 5; }
.nu-pr .tr { stroke: #e3d7c2; }
.nu-pr .pg { stroke: #2f9e57; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 300ms ease-out; }
.nu-pr-n { display: none; }
.nu-nokori-t { font-size: 18px; font-weight: 800; line-height: 1; white-space: nowrap; pointer-events: none; }
.nu-nokori-w { display: none; }
.kid-btn.nu-nokori.stack { width: var(--undo-w); min-width: 0; padding: 4px 2px; flex-direction: column; gap: 2px; }
.nu-nokori.stack .nu-pr-box { width: 38px; height: 38px; }
.kid-btn.stack svg.nu-pr { stroke-width: 4; }
.nu-nokori.stack .nu-pr-n { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; line-height: 1; }
.nu-nokori.stack .nu-nokori-t { display: none; }
.nu-nokori.stack .nu-nokori-w { display: block; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; font-size: 13px; font-weight: 800; line-height: 1.1; pointer-events: none; }
.nu-zoom-n { position: absolute; top: 3px; right: 4px; display: flex; align-items: center; gap: 2px; color: var(--ink); font-size: 15px; font-weight: 800; line-height: 1; pointer-events: none; }   /* のこり と同じ輪 + 数(黒い通知の丸にしない) */
.nu-zoom-n[hidden] { display: none; }
.kid-btn svg.nu-pr-mini { width: 16px; height: 16px; stroke-width: 6; }
.kid-btn { width: var(--undo-w); height: var(--undo-h); flex: none; display: flex; align-items: center; justify-content: center; background: var(--card); border-radius: 16px; box-shadow: 0 4px 0 var(--shadow); }
.kid-btn svg { width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.nu-otona { width: 48px; height: 48px; flex: none; position: relative; display: flex; align-items: center; justify-content: center; }
.nu-otona-face { width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: 0 2px 0 var(--shadow); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.nu-otona-face svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.nu-ring { position: absolute; inset: 0; width: 48px; height: 48px; pointer-events: none; transform: rotate(-90deg); }
.nu-ring circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 200ms ease-out; }
.nu-otona.holding .nu-ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1500ms linear; }
.nu-tip { position: absolute; top: calc(100% - 6px); right: 0; z-index: 2; pointer-events: none; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; padding: 6px 10px; border-radius: 10px; white-space: nowrap; }
.nu-stage { flex: none; display: flex; justify-content: center; margin-top: 12px; }
.nu-art { width: var(--art); height: var(--art); position: relative; border-radius: 6px; box-shadow: 0 2px 0 var(--shadow); background: #fff; }
.nu-svg { display: block; width: 100%; height: 100%; touch-action: none; border-radius: 6px; }
.nu-svg path[data-r] { transform-box: fill-box; transform-origin: center; }
.nu-svg path.bump { animation: bump 150ms ease-out; }
@keyframes bump { 50% { transform: scale(1.05); } }
.nu-focus { fill: none; stroke: var(--focus); stroke-width: 7; }
/* L4 の光り(nuru.md 4.1d): 暗い縁の上に明るい芯 = どの色の上でも見える。寄せても太さは画面の px のまま */
.nu-hl-out, .nu-hl-in { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.nu-hl-out { stroke: var(--ink); }
.nu-hl { --hl-w: 4px; }
.nu-hl.zoomed { --hl-w: 6px; }   /* 寄せると線も太るので芯を太く */
.nu-hl-out { stroke-width: calc(var(--hl-w) + 5px); }
.nu-hl-in { stroke: #ffe14d; stroke-width: var(--hl-w); }   /* 色は nuru.js の HL_CORE と同じ */
.nu-hl.alt .nu-hl-in { stroke: #4de3ff; }   /* 黄色の ぬりの上(芯が溶ける)は水色 */
/* 塗り替えの1回目: 薄い なる色 + なる色の斜めの しま(しまの間に下の色が透ける = まだ変わっていない)+ 芯が1回ふくらむ(stroke だけ) */
.nu-hl-pv { stroke: none; }
.nu-hl-wash { fill-opacity: 0.45; }
.nu-hl.pulse .nu-hl-in { animation: hl-pulse 200ms ease-out; }
@keyframes hl-pulse { 50% { stroke-width: calc(var(--hl-w) + 3px); } }
/* L4 の なぞりの跡(nuru.md 4.1e)。指に透明・離すと消える。寄せても画面の px のまま */
.nu-trail { fill: none; stroke-width: 14px; stroke-opacity: 0.45; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* のこりの光り(nuru.md 4.8。4.1d の光りと同じ形。指に透明・出る / 消えるの1回ずつ = 点滅させない) */
.nu-nk path, .nu-nk circle { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.nu-nk .nu-nk-out { stroke: var(--ink); stroke-width: 9px; }
.nu-nk .nu-nk-in { stroke: #ffe14d; stroke-width: 4px; }
.nu-nk .nu-nk-tri { fill: #ffe14d; stroke: var(--ink); stroke-width: 3px; }
.nu-nk.swell .nu-nk-in { animation: nk-swell 400ms ease-out; }
@keyframes nk-swell { 50% { stroke-width: 8px; } }
/* なぞりの手本(nuru.md 4.1e): 絵の上に重ねる。指に透明。最初の押下で 200ms で消える(nuru.js dropCoach) */
.nu-coach { position: absolute; inset: 0; pointer-events: none; z-index: 1; transition: opacity 180ms ease-out; }
.nu-coach.gone { opacity: 0; }
.nu-coach svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nu-coach-under, .nu-coach-trail { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.nu-coach.still .nu-coach-under, .nu-coach.still .nu-coach-trail { stroke-dashoffset: 0; }
.nu-coach-under { stroke: #fff; stroke-width: 10; stroke-opacity: 0.7; }
.nu-coach-trail { stroke: url(#nu-coach-g); stroke-width: 6.5; stroke-opacity: 0.85; }
.nu-coach-touch { fill: #fff; fill-opacity: 0.6; stroke: var(--accent); stroke-width: 1.2; }
.nu-coach-hand { fill: #fff; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.nu-coach-line { fill: none; stroke: var(--ink); stroke-width: 0.8; stroke-linecap: round; }
.nu-coach-cap { position: absolute; left: 50%; bottom: clamp(6px, calc(var(--art) * 0.035), 12px); transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100% - 12px); box-sizing: border-box;
  padding: 0.45em 0.85em; border-radius: 999px; word-break: keep-all; overflow-wrap: anywhere; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 0 var(--shadow), 0 0 0 2px rgba(42, 36, 34, 0.12);
  color: var(--ink); font-size: clamp(12px, calc(var(--art) * 0.048), 17px); font-weight: 800; line-height: 1.3; text-align: center; }
.nu-art.dekita { animation: dekita 600ms ease-in-out; }
@keyframes dekita { 50% { transform: scale(1.04); } }
/* 絵が応える(nuru.md 4.5。L0 の絵の .pic-move。transform だけ・1回だけ。SVG の中の px = 絵の単位) */
.nu-svg .pic-move { transform-box: fill-box; transform-origin: 50% 50%; }
.nu-svg .pic-move[data-move="bounce"], .nu-svg .pic-move[data-move="float"] { transform-origin: 50% 100%; }
.nu-svg .pic-move.moving[data-move="bounce"] { animation: m-bounce 1000ms ease-in-out; }
.nu-svg .pic-move.moving[data-move="float"] { animation: m-float 1600ms ease-in-out; }
.nu-svg .pic-move.moving[data-move="spin"] { animation: m-spin 1600ms ease-in-out; }
@keyframes m-bounce { 18% { transform: translateY(-36px) scale(0.98, 1.03); } 36% { transform: translateY(0) scale(1.06, 0.92); } 54% { transform: translateY(-14px); } 70% { transform: translateY(0) scale(1.03, 0.97); } 82% { transform: none; } }
/* ふうせんは上の縁まで 20 単位しかない: 浮く量と傾きは、動いた外形(線の太さ込み)が 0〜400 に収まる分だけ(contract の見張り) */
@keyframes m-float { 45% { transform: translateY(-8px) rotate(-2deg); } 75% { transform: translateY(-3px) rotate(1deg); } }
/* 光は 36° ごと(10本): 回り終えた形 = 元の形(外したときに跳ばない)。光の数を変えたらここも */
@keyframes m-spin { 50% { transform: rotate(18deg) scale(1.06); } 100% { transform: rotate(36deg); } }
.nu-stars { position: absolute; inset: 0; pointer-events: none; }
.nu-stars span { position: absolute; width: 36px; height: 36px; transform: translate(-50%, -50%) scale(0); animation: star 1.2s ease-out forwards; }
.nu-star { width: 100%; height: 100%; display: block; }
@keyframes star { 20% { transform: translate(-50%, -50%) scale(1.15); } 70% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(0); } }
.nu-pal { flex: 1; min-height: 0; display: grid; gap: 8px; align-content: center; justify-content: center; grid-template-columns: repeat(var(--pal-cols), var(--sw)); grid-auto-rows: var(--sw); }
.nu-color { width: var(--sw); height: var(--sw); border-radius: 50%; background: var(--c); box-shadow: 0 4px 0 var(--shadow); transform: scale(calc(var(--sel, 1) * var(--press, 1))); }
/* おまかせ: パレットの11色を順に並べた輪(止まった絵。色を巡らせない ← nuru.md 4.3b) */
.nu-color.is-auto { background: conic-gradient(#e5483f 0 9.09%, #f28c28 0 18.18%, #f7d43a 0 27.27%, #9ccc3d 0 36.36%, #2f9e57 0 45.45%, #5cc3e8 0 54.55%, #3a6fd8 0 63.64%, #8a55c4 0 72.73%, #f39ac0 0 81.82%, #9a6a3f 0 90.91%, #f3c2ac 0); }
/* しろ(L4): 紙の色の地でも丸が見えるように 細い縁 */
.nu-color.is-white { box-shadow: inset 0 0 0 2px var(--shadow), 0 4px 0 var(--shadow); }
.nu-color[aria-checked="true"] { --sel: 1.08; box-shadow: inset 0 0 0 6px var(--ink), 0 4px 0 var(--shadow); }
.nu-color.pressed { --press: 0.94; }
.shake { animation: shake 120ms linear; }
.kid-btn.boing { animation: boing 180ms ease-out; }
@keyframes boing { 50% { transform: scale(1.06); } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.nu-main[data-orient="land"] { flex-direction: row; align-items: center; }
.nu-main[data-orient="land"] .nu-bar { width: var(--band); height: 100%; flex-direction: column; justify-content: space-between; padding: 0; gap: 0; }
.nu-main[data-orient="land"] .nu-undo, .nu-main[data-orient="land"] .nu-slot { margin-left: 0; }
.nu-main[data-orient="land"] .nu-slot { justify-items: center; }
.nu-main[data-orient="land"] .nu-stage { margin: 0 12px 0 0; }
.nu-main[data-orient="land"] .nu-pal { flex: 1; height: 100%; }
.nu-main[data-orient="land"] .nu-tip { top: auto; bottom: 4px; right: auto; left: calc(100% - 4px); }

/* ── おとなのかた ── */
.ot-side { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; }
.ot-view { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ot-title { margin: 0; font-size: 20px; font-weight: 800; }
.ot-preview { width: var(--pv, 200px); height: var(--pv, 200px); background: #fff; border-radius: 6px; box-shadow: 0 2px 0 var(--shadow); }
.ot-svg { display: block; width: 100%; height: 100%; border-radius: 6px; }
/* 大人宛ての一言(おまかせ・1歳は いっしょに)。幅 320 でも折り返して収める(otona.md 3.2) */
.ot-note { margin: 0; max-width: 32em; font-size: 13px; line-height: 1.45; color: var(--ink); text-align: center; }
.ot-status { margin: 0; min-height: 22px; font-size: 16px; font-weight: 700; color: var(--ink); }
.ot-actions { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.ot-btn { width: min(100%, 320px); min-width: 240px; height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--card); border-radius: 12px; box-shadow: 0 2px 0 var(--shadow); font-size: 18px; font-weight: 700; text-align: left; }
.ot-ico { width: 28px; height: 28px; flex: none; }
.ot-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ot-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-clear { margin-top: 12px; color: var(--accent); }
.ot-clear[data-armed] { box-shadow: inset 0 0 0 3px var(--accent), 0 2px 0 var(--shadow); }
.ot-sound { display: flex; align-items: center; gap: 8px; flex: none; }
.ot-sound-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; display: block; }
.ot-level { width: 72px; height: 48px; border-radius: 10px; background: var(--card); box-shadow: 0 2px 0 var(--shadow); font-size: 16px; font-weight: 700; }
.ot-level[aria-checked="true"] { box-shadow: inset 0 0 0 3px var(--ink), 0 2px 0 var(--shadow); }
.ot-main[data-step="lang"] .ot-actions, .ot-main[data-step="lang"] .ot-view { display: none; }
.ot-main[data-orient="land"] { flex-direction: row; align-items: center; gap: 12px; }
.ot-main[data-orient="land"] .ot-side { width: 64px; height: 100%; flex-direction: column; justify-content: flex-start; gap: 12px; }
.ot-main[data-orient="land"] .ot-actions { height: 100%; }
.ot-main[data-low="true"] .ot-btn { height: 48px; }
.ot-main[data-low="true"] .ot-actions { gap: 8px; }
.ot-main[data-low="true"] .ot-clear { margin-top: 0; }
.ot-main[data-low="true"] .ot-title { font-size: 16px; }
.ot-main[data-low="true"] .ot-note { font-size: 12px; line-height: 1.35; }
.ot-main[data-orient="land"] .ot-note { max-width: max(var(--pv), 200px); }

@media (prefers-reduced-motion: reduce) {
  .screen.enter, .er-grid.flip, .nu-art.dekita, .nu-svg path.bump, .shake, .nu-hl.pulse .nu-hl-in, .nu-nk.swell .nu-nk-in, .kid-btn.boing, .nu-svg .pic-move.moving { animation: none; }
  .nu-stars span { animation: none; transform: translate(-50%, -50%); }
  .nu-ring circle, .nu-otona.holding .nu-ring circle, .nu-pr .pg { transition: none; }
}