/* =========================================================
   デザイン基準 2.0（design-reference-2.png）の 共通部品と 画面
   ---------------------------------------------------------
   いちばん最後に読みます（base / screens / games / world の上書き）。
   木の札・木のボタン・つやのある大きいボタン・ぷっくりした カード・星・鍵 を
   すべての画面で 同じに使います。部品の作り方は scripts/core/kit.js。
   ========================================================= */
:root {
  --wood-hi: #fbd9a2;
  --wood-mid: #eebb78;
  --wood-lo: #d99a55;
  --wood-edge: #a9672c;
  --wood-dark: #87501f;
  --ink: #4a2c14;            /* 札の文字（こげ茶） */
  --card-bg: #fffaf0;
  --card-edge: #ead6b4;
  --kb-tile: clamp(50px, 8.4vmin, 66px);
  --gutter: clamp(10px, 2.4vmin, 20px);
}

/* ---------------------------------------------------------
   ボタン（.kb）：押すと沈む。効果音は ui.button が pointerdown で鳴らす
   --------------------------------------------------------- */
.btn.kb {
  position: relative;
  gap: 0.4em;
  border: 0;
  font-weight: 900;
  letter-spacing: 0.04em;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, filter 0.15s;
}
.kb-glyph { display: inline-flex; flex: none; width: 1.15em; height: 1.15em; }
.kb-glyph .kg-glyph { width: 100%; height: 100%; display: block; overflow: visible; }

/* 木の四角（もどる・ホーム） */
.btn.kb-tile {
  width: var(--kb-tile);
  height: var(--kb-tile);
  min-height: 0;
  padding: 0;
  border-radius: 28%;
  color: #8a4b1a;
  border: calc(var(--kb-tile) * 0.09) solid transparent;
  background:
    radial-gradient(ellipse 80% 60% at 40% 30%, #fffdf6, #fbeccf 70%, #f3d9ae) padding-box,
    linear-gradient(to bottom, #f2b66c, #cf8a43 60%, #b06f30) border-box;
  box-shadow: 0 0 0 2px var(--wood-dark), inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 5px 0 1px var(--wood-dark), 0 9px 12px rgba(60, 35, 10, 0.28);
}
.btn.kb-tile .kb-glyph { width: 58%; height: 58%; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.9)); }
.btn.kb-tile.pressed { transform: translateY(4px); box-shadow: 0 0 0 2px var(--wood-dark), inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 1px 0 1px var(--wood-dark), 0 3px 5px rgba(60, 35, 10, 0.25); }
.btn.kb-tile.kb-labelled { width: auto; padding: 0 0.9em 0 0.5em; border-radius: 18px; font-size: clamp(16px, 2.6vmin, 20px); }
.btn.kb-tile.kb-labelled .kb-glyph { width: 1.5em; height: 1.5em; }
.btn.kb-tile .kb-label { color: var(--ink); }

/* つやのある 丸いボタン（つぎへ＝みどり・もういちど＝オレンジ・ゲームをえらぶ＝あお） */
.btn.kb-pill {
  --c1: #fffdf6; --c2: #f6e2c0; --edge: #b7793c; --ink-pill: var(--ink); --stroke: transparent;
  min-height: 58px;
  padding: 8px 28px 9px 22px;
  border-radius: 999px;
  color: var(--ink-pill);
  font-size: clamp(18px, 3vmin, 25px);
  border: 3px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(to bottom, var(--c1), var(--c2));
  box-shadow: 0 0 0 2px var(--edge), inset 0 -5px 0 rgba(0, 0, 0, 0.1), 0 5px 0 2px var(--edge), 0 10px 14px rgba(40, 30, 10, 0.25);
  overflow: hidden;
  white-space: nowrap;
}
.btn.kb-pill::before { /* 上の つや */
  content: '';
  position: absolute;
  left: 8%; right: 8%; top: 3px; height: 42%;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08));
  pointer-events: none;
}
.btn.kb-pill .kb-label { position: relative; -webkit-text-stroke: 0.14em var(--stroke); paint-order: stroke fill; }
.btn.kb-pill .kb-glyph { position: relative; width: 1.2em; height: 1.2em; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.18)); }
.btn.kb-pill.pressed { transform: translateY(4px); box-shadow: 0 0 0 2px var(--edge), inset 0 -3px 0 rgba(0, 0, 0, 0.1), 0 1px 0 2px var(--edge), 0 3px 5px rgba(40, 30, 10, 0.2); }
.btn.kb-green { --c1: #8fe264; --c2: #3eaa2a; --edge: #2a7d1c; --ink-pill: #fff; --stroke: #2a7d1c; }
.btn.kb-orange { --c1: #ffc15a; --c2: #f47d1c; --edge: #c25a0e; --ink-pill: #fff; --stroke: #c25a0e; }
.btn.kb-blue { --c1: #6cc4ff; --c2: #2382ea; --edge: #1659b4; --ink-pill: #fff; --stroke: #1659b4; }
.btn.kb-wood {
  --c1: #fde3b4; --c2: #eab571; --edge: var(--wood-edge); --ink-pill: var(--ink);
  background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(150, 95, 45, 0.1) 9px 10px), linear-gradient(to bottom, var(--c1), var(--c2));
}
.btn.kb-wood .kb-glyph { color: #9a5a22; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8)); }
.btn.kb-big { min-height: 70px; font-size: clamp(22px, 3.8vmin, 32px); padding: 10px 36px 11px 28px; }
.btn.kb-small { min-height: 46px; font-size: clamp(15px, 2.3vmin, 19px); padding: 6px 18px 7px 14px; }

/* ---------------------------------------------------------
   上の段：左のボタン・木の札・右
   --------------------------------------------------------- */
.kit-head {
  position: relative;
  z-index: 3;
  flex: none;
  display: grid;
  grid-template-columns: minmax(var(--kb-tile), 1fr) minmax(0, auto) minmax(var(--kb-tile), 1fr);
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 6px;
}
.kit-head-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kit-head-side.r { justify-content: flex-end; }
.kit-plank {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-width: min(46vw, 9em);
  max-width: 100%;
  padding: 0.2em 1.3em 0.26em;
  font-size: clamp(19px, 4.2vmin, 34px);
  color: var(--ink);
  border-radius: 0.5em;
  border: 3px solid var(--wood-edge);
  background:
    radial-gradient(circle at 0.55em 50%, #8a5a30 0 0.09em, transparent 0.11em),
    radial-gradient(circle at calc(100% - 0.55em) 50%, #8a5a30 0 0.09em, transparent 0.11em),
    repeating-linear-gradient(to bottom, transparent 0 0.42em, rgba(150, 95, 45, 0.12) 0.42em 0.46em),
    linear-gradient(to bottom, var(--wood-hi), var(--wood-mid) 55%, var(--wood-lo));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), inset 0 -4px 0 rgba(140, 80, 30, 0.2), 0 5px 0 var(--wood-dark), 0 10px 14px rgba(60, 35, 10, 0.25);
}
.kit-plank.long { font-size: clamp(17px, 3.6vmin, 30px); }
.kit-plank-title { overflow: hidden; text-overflow: ellipsis; margin: 0; font-size: 1em; font-weight: 900; letter-spacing: 0.08em; white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.kit-plank-icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.kit-plank-icon svg { width: 100%; height: 100%; }
@media (max-width: 480px) {
  .kit-plank { padding-left: 0.8em; padding-right: 0.9em; min-width: 0; }
  .kit-plank.long { font-size: 16px; }
  .kit-plank.long .kit-plank-icon { display: none; }
  .kit-plank-title { letter-spacing: 0.02em; }
}

/* 星（ぷっくり・つや） */
.kit-stars { display: inline-flex; align-items: flex-end; gap: 0.08em; }
.kit-star { display: inline-flex; width: 1em; height: 1em; }
.kit-star svg { width: 100%; height: 100%; overflow: visible; }
.kit-stars.mini { font-size: clamp(16px, calc(var(--cw, 150px) * 0.15), 28px); }

/* 南京錠 */
.kit-lock { display: inline-flex; }
.kit-lock svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 3px rgba(60, 40, 10, 0.35)); }

/* キャラクター（一覧の すみで 見守る） */
.list-chara { position: absolute; z-index: 2; bottom: calc(4px + env(safe-area-inset-bottom)); right: 1%; width: clamp(64px, 11vmin, 116px); aspect-ratio: 120 / 145; }
.list-chara.bear { aspect-ratio: 120 / 140; }
@media (max-width: 700px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) { .list-chara { display: none; } }

/* =========================================================
   ホーム：空・草原・木・さく・小道 の中に 木の看板
   ========================================================= */
.home2 {
  --bw: min(34vw, 40vh, 330px);    /* 看板の幅 */
  --bh: calc(var(--bw) * 1.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.6vh, 28px);
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) calc(12px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.home2 > .world { --hz: 46%; --tree-h: 52%; --tree-y: 10%; --fence-h: 9%; }
.home-path {
  position: absolute; z-index: 0;
  left: 50%; bottom: 0; top: 44%;
  width: min(60vw, 520px);
  translate: -50% 0;
  background: linear-gradient(to bottom, #f1d9a8, #e6c085);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity: 0.85;
  pointer-events: none;
}
.home2 .home-sign { position: relative; z-index: 2; font-size: clamp(26px, 6.6vmin, 60px); animation: sign-drop 0.7s var(--ease-pop) both; }
.home2 .home-sign .ws-board { padding: 0.12em 0.9em 0.2em; }
.home-title { display: flex; flex-direction: column; align-items: center; line-height: 1.02; }
.home-title-sub { font-size: 0.34em; letter-spacing: 0.4em; padding-left: 0.4em; color: #8a5426; }
.home-bird { position: absolute; z-index: 3; right: -0.3em; top: -0.62em; width: 1.05em; aspect-ratio: 60 / 50; animation: bird-bob 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.home-bird svg { width: 100%; height: 100%; display: block; }
@keyframes bird-bob { 0%, 70%, 100% { rotate: 0deg; } 78% { rotate: -10deg; } 86% { rotate: 4deg; } }
.home-boards { position: relative; z-index: 2; display: flex; gap: clamp(14px, 3.4vw, 44px); align-items: flex-end; }

/* 看板（ボタン全体）：木の板 + 2 本の柱 */
.btn.hb {
  position: relative;
  display: block;
  width: var(--bw);
  height: calc(var(--bh) + var(--bw) * 0.12);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}
.btn.hb.hb-learn { animation-delay: 0.08s; }
.hb-post {
  position: absolute; z-index: 0;
  bottom: 0;
  width: 11%; height: 40%;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(to right, #b77a40, #d9a061 45%, #9a612c);
  border: 2px solid #7a4a1e;
  box-shadow: 0 4px 0 rgba(60, 90, 30, 0.25);
}
.hb-post.l { left: 18%; }
.hb-post.r { right: 18%; }
.hb-face {
  position: absolute; z-index: 1;
  left: 0; right: 0; top: 0;
  height: var(--bh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4% 6%;
  border-radius: calc(var(--bw) * 0.13);
  border: calc(var(--bw) * 0.022) solid var(--wood-edge);
  background:
    radial-gradient(ellipse 70% 40% at 50% 30%, rgba(255, 245, 220, 0.75), transparent 70%),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--bw) * 0.105), rgba(150, 95, 45, 0.14) calc(var(--bw) * 0.105) calc(var(--bw) * 0.112)),
    linear-gradient(to bottom, #fbdba6, #f0c182 55%, #e2a964);
  box-shadow:
    inset 0 calc(var(--bw) * 0.015) 0 rgba(255, 255, 255, 0.6),
    inset 0 calc(var(--bw) * -0.03) 0 rgba(140, 80, 30, 0.2),
    0 calc(var(--bw) * 0.03) 0 var(--wood-dark),
    0 calc(var(--bw) * 0.06) calc(var(--bw) * 0.07) rgba(60, 35, 10, 0.3);
  transition: transform 0.1s ease-out;
}
.btn.hb.pressed { transform: none; box-shadow: none; }
.btn.hb.pressed .hb-face { transform: translateY(calc(var(--bw) * 0.025)) scale(0.985); box-shadow: inset 0 calc(var(--bw) * 0.015) 0 rgba(255, 255, 255, 0.6), 0 calc(var(--bw) * 0.008) 0 var(--wood-dark), 0 calc(var(--bw) * 0.02) calc(var(--bw) * 0.03) rgba(60, 35, 10, 0.25); }
.hb-pic { display: flex; width: 100%; flex: 1; min-height: 0; align-items: flex-end; }
.hb-art { width: 100%; height: 100%; overflow: visible; }
.hb-label {
  flex: none;
  font-size: calc(var(--bw) * 0.2);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding-left: 0.08em;
  -webkit-text-stroke: 0.16em #fff;
  paint-order: stroke fill;
  text-shadow: 0 0.05em 0 rgba(120, 70, 30, 0.45), 0 0.09em 0.1em rgba(60, 35, 10, 0.3);
}
.hb-play .hb-label { color: #e8352b; }
.hb-learn .hb-label { color: #2369dc; }
.hb .badge-new { top: -12px; left: -8px; font-size: clamp(13px, calc(var(--bw) * 0.06), 18px); }
.btn.hb:not(.pressed) .hb-art { animation: hb-bob 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.btn.hb-learn:not(.pressed) .hb-art { animation-delay: -1.8s; }
@keyframes hb-bob { 0%, 100% { scale: 1 1; } 50% { scale: 1.015 0.99; } }

.home-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; width: calc(var(--bw) * 2 + clamp(14px, 3.4vw, 44px)); max-width: 100%; }
.home-foot .kb-small { min-width: 7.2em; }
.home-sound.off { filter: saturate(0.4); }
.home-parent { touch-action: none; overflow: visible; }
.home-parent .hold-ring { inset: -7px; border-radius: 999px; background: conic-gradient(#ff9a3c calc(var(--p) * 360deg), transparent 0); -webkit-mask: none; mask: none; z-index: -1; opacity: 0.9; }
.home-parent.holding { filter: brightness(1.05); }

@media (orientation: portrait) {
  .home2 { --bw: min(44vw, 31vh, 320px); --bh: calc(var(--bw) * 1.18); justify-content: space-evenly; padding-top: max(18px, 3vh); }
  .home2 > .world { --hz: 30%; --tree-h: 28%; --tree-y: 4%; --fence-h: 5%; }
  .home-path { top: 28%; }
  .home2 .home-sign { font-size: clamp(30px, 10vw, 60px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .home2 { --bw: min(30vw, 48vh, 260px); gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .home2 .home-sign { font-size: clamp(22px, 8vh, 34px); }
  .home-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; }
}

/* =========================================================
   一覧（まなぶ・あそぶ・レベル）：ぷっくりした クリーム色の カード
   ========================================================= */
.list-screen > .world { --hz: 26%; --tree-h: 30%; --tree-y: 3%; --fence-h: 6%; }
.list-screen .list-scroll { position: relative; z-index: 1; display: flex; overflow-x: hidden; padding: 8px var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
.k-grid {
  --g: clamp(8px, 1.8vmin, 18px);
  --cols: 5;
  --rows: 2;
  --head: clamp(74px, 13vmin, 100px);
  --cw: min(calc((100vw - 2 * var(--gutter) - 28px - (var(--cols) - 1) * var(--g)) / var(--cols)), calc((100vh - var(--head) - 34px - (var(--rows) - 1) * var(--g)) / var(--rows) / 1.2), 210px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--g);
  width: calc(var(--cw) * var(--cols) + var(--g) * (var(--cols) - 1));
  max-width: 100%;
  margin: auto;
}
.play-grid2 { --cols: 6; --rows: 2; }
@media (orientation: landscape) and (max-width: 1100px) and (min-height: 600px) { .play-grid2 { --cols: 4; --rows: 3; } }
@media (orientation: portrait) {
  .learn-grid2 { --cols: 3; --rows: 4; }
  .play-grid2 { --cols: 3; --rows: 4; }
  .list-screen > .world { --hz: 18%; --tree-h: 16%; --tree-y: 2%; --fence-h: 3%; }
}
@media (orientation: portrait) and (min-width: 600px) {
  .learn-grid2 { --cols: 4; --rows: 3; }
  .play-grid2 { --cols: 4; --rows: 3; }
}
@media (max-height: 520px) and (orientation: landscape) { .k-grid { --head: 66px; } }

.btn.k-card {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: var(--cw);
  height: calc(var(--cw) * 1.2);
  min-height: 0;
  gap: 0;
  padding: calc(var(--cw) * 0.05) calc(var(--cw) * 0.05) calc(var(--cw) * 0.04);
  border: 0;
  border-radius: calc(var(--cw) * 0.13);
  background: linear-gradient(to bottom, #fffefa, var(--card-bg) 60%, #fbefd9);
  color: var(--ink);
  box-shadow:
    0 0 0 2px var(--card-edge),
    inset 0 -4px 0 rgba(200, 160, 100, 0.16),
    inset 0 2px 0 #fff,
    0 6px 0 1px #d8bc92,
    0 11px 16px rgba(60, 45, 15, 0.22);
  animation: rise-in var(--dur-medium) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.btn.k-card.pressed { transform: translateY(5px); box-shadow: 0 0 0 2px var(--card-edge), inset 0 2px 0 #fff, 0 1px 0 1px #d8bc92, 0 3px 6px rgba(60, 45, 15, 0.2); }
.k-card-name {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-height: 1.3em;
  font-size: clamp(12px, calc(var(--cw) * 0.11), 21px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-align: center;
}
.k-card-pic {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--cw) * 0.03);
  border-radius: calc(var(--cw) * 0.09);
  background: radial-gradient(ellipse 72% 62% at 50% 48%, #fff 0 34%, color-mix(in srgb, var(--theme, #f3c27a) 30%, #fff8ea) 100%);
  box-shadow: inset 0 2px 5px rgba(140, 100, 50, 0.12);
}
.k-card-pic svg { width: 86%; height: 88%; filter: drop-shadow(0 3px 2px rgba(70, 50, 20, 0.2)); }
.k-card-foot { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; height: calc(var(--cw) * 0.2); padding-top: calc(var(--cw) * 0.025); }
.btn.k-card:not(.locked):not(.pressed) .k-card-pic > svg { animation: pic-bob 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.3s); }
.learn-grid2 .k-card-name { font-size: clamp(13px, calc(var(--cw) * 0.13), 24px); }
.learn-grid2 .btn.k-card { height: calc(var(--cw) * 1.12); }
.learn-grid2 .k-card-pic { margin-bottom: calc(var(--cw) * 0.02); }

/* ロック中のカード：グレー・絵は見える・大きな鍵・あとどれくらい */
.btn.k-card.locked { background: linear-gradient(to bottom, #f2efea, #e4dfd6); box-shadow: 0 0 0 2px #d6cfc4, inset 0 2px 0 #fff, 0 6px 0 1px #bdb4a6, 0 11px 16px rgba(50, 45, 35, 0.2); }
.btn.k-card.locked .k-card-pic { filter: grayscale(0.85) brightness(1.02) opacity(0.7); }
.btn.k-card.locked .k-card-name { color: #8d8478; }
.k-card .lock-center { position: absolute; z-index: 3; left: 50%; top: 52%; width: calc(var(--cw) * 0.42); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.btn.k-card.locked.lock-shake .lock-center { animation: lock-jiggle 0.5s ease-in-out; }
@keyframes lock-jiggle { 20% { rotate: -14deg; scale: 1.08; } 45% { rotate: 11deg; scale: 1.08; } 70% { rotate: -6deg; } 100% { rotate: 0deg; } }
.btn.k-card.almost .lock-center { animation: almost 2.4s ease-in-out infinite; }
.k-card .lock-hint { gap: 5px; }
.k-card .lock-left { font-size: 11px; color: #8d8478; font-weight: 800; }
.k-card .lock-pop { z-index: 5; }
/* ひらいた瞬間：鍵が ひらいて 消える → カードが ぽんっ */
.btn.k-card.just-unlocked { animation: rise-in var(--dur-medium) var(--ease-out) both, unlock-hop 0.6s var(--ease-pop) 1.05s; }
.btn.k-card.just-unlocked .k-card-pic { animation: unlock-color 1.1s ease-out both; }
@keyframes unlock-color { 0%, 45% { filter: grayscale(0.85) opacity(0.7); } 100% { filter: none; } }
.k-card .unlock-fx { animation: lock-open 1.1s ease-in 0.2s forwards; }
.k-card .unlock-fx .shackle { animation: shackle-up 0.35s ease-out 0.45s forwards; }
@keyframes shackle-up { to { translate: 0 -14px; rotate: -18deg; } }
@keyframes lock-open { 0%, 40% { opacity: 1; scale: 1; } 55% { scale: 1.15; } 100% { opacity: 0; scale: 0.6; translate: -50% -110%; } }
.k-card .badge-new { top: auto; bottom: -10px; left: 50%; translate: -50% 0; z-index: 4; font-size: 12px; padding: 2px 9px 3px; white-space: nowrap; }

/* =========================================================
   レベル選択
   ========================================================= */
.levels-screen { overflow: hidden; }
.levels-screen > .world { --hz: 26%; --tree-h: 30%; --tree-y: 3%; --fence-h: 6%; }
.lv-stage { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
.lv-grid { display: flex; flex-wrap: wrap; width: calc(var(--cols, 4) * var(--cw, 150px) + (var(--cols, 4) - 1) * var(--gap, 14px)); flex: none; gap: calc(var(--gap, 14px) + 18px) var(--gap, 14px); justify-content: center; align-content: center; margin-inline: auto; }
.lv-grid .btn.k-card { width: var(--cw, 150px); height: calc(var(--cw, 150px) * 1.18); }
.lv-name { gap: 0.25em; align-items: baseline; }
.lv-word { font-size: 0.82em; }
.lv-num { font-size: 1.45em; color: #e86a1c; -webkit-text-stroke: 0.1em #fff; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(150, 80, 20, 0.25); }
.lv-pic svg { width: 92%; height: 92%; }
.pv-sil { filter: brightness(0) opacity(0.5); }
.btn.lv-card.cleared .k-card-pic { background: radial-gradient(ellipse 72% 62% at 50% 48%, #fff 0 34%, #fdf0c6 100%); }
.btn.lv-card.next-up { box-shadow: 0 0 0 3px #ffb43a, 0 0 0 6px rgba(255, 210, 120, 0.55), inset 0 2px 0 #fff, 0 6px 0 2px #d99428, 0 11px 18px rgba(200, 120, 20, 0.35); }
.btn.lv-card.next-up:not(.pressed) { animation: rise-in var(--dur-medium) var(--ease-out) both, next-bob 1.6s ease-in-out 0.6s infinite; }
@keyframes next-bob { 50% { translate: 0 -5px; } }
.lv-next-tag {
  position: absolute; z-index: 4;
  left: 50%; top: 0;
  translate: -50% -76%;
  padding: 3px 10px 4px;
  font-size: clamp(11px, calc(var(--cw, 150px) * 0.085), 16px);
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  border-radius: 999px;
  background: linear-gradient(to bottom, #ff9b58, #f2662a);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #c94d17, 0 3px 0 2px #b0420f;
}
.btn.lv-card.locked .lock-center { width: calc(var(--cw, 150px) * 0.4); }
.btn.lv-card.lock-shake { animation: wiggle 0.5s ease-in-out; }

/* =========================================================
   ゲーム画面：上の段・レベル・ひとこと
   ========================================================= */
.game-screen > .kit-head { z-index: 4; }
.game-screen .kit-plank { font-size: clamp(16px, 3.2vmin, 26px); }
.level-badge2 {
  display: inline-flex; align-items: baseline; gap: 0.25em;
  padding: 0.18em 0.75em 0.24em;
  font-size: clamp(14px, 2.6vmin, 20px);
  font-weight: 900;
  color: var(--ink);
  border-radius: 999px;
  border: 2.5px solid var(--wood-edge);
  background: linear-gradient(to bottom, var(--wood-hi), var(--wood-mid));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 4px 0 var(--wood-dark);
  white-space: nowrap;
}
.level-badge2 b { font-size: 1.35em; color: #e86a1c; -webkit-text-stroke: 0.1em #fff; paint-order: stroke fill; }
/* ひとこと：クリーム色の ふきだし（木の札は 題名だけ） */
.game-screen .game-hint { margin-top: 0; margin-bottom: 4px; z-index: 3; }
.game-screen .game-hint .speech {
  padding: 0.32em 1.2em 0.38em;
  font-size: clamp(15px, 2.9vmin, 24px);
  font-weight: 900;
  color: var(--ink);
  border: 3px solid #f0c98e;
  border-radius: 1.2em;
  background: linear-gradient(to bottom, #fffef8, #fff4d8);
  box-shadow: 0 4px 0 #e3b26a, 0 8px 14px rgba(70, 50, 20, 0.18);
}
.game-screen .game-hint .speech::before { display: block; }
.game-screen .game-hint .speech.tail-left::before { left: 50%; top: calc(var(--tail) / -2 - 1px); transform: translateX(-50%) rotate(135deg); }
@media (min-width: 700px) and (min-height: 600px) { .game-screen .game-hint { margin-top: 0; margin-bottom: 8px; } .game-screen .game-bar .game-title { visibility: visible; } }
@media (max-width: 480px) { .game-screen .kit-plank .kit-plank-title { font-size: 0.86em; } .level-badge2 > span { display: none; } }
@media (max-height: 520px) and (orientation: landscape) {
  .game-screen > .kit-head { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 2px; }
  .game-screen .kit-plank { font-size: 15px; }
  .game-screen .game-hint .speech { font-size: 14px; padding: 0.2em 1em 0.26em; }
}

/* =========================================================
   結果：ゲームの世界のまま 看板・星・くま／うさぎ・紙吹雪・3 つのボタン
   ========================================================= */
.result-overlay { background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(255, 252, 240, 0.35), rgba(255, 246, 225, 0.62)); }
.result-overlay.failed { background: rgba(255, 248, 235, 0.45); }
.result-glow {
  position: absolute; z-index: 1;
  left: 50%; top: 22%;
  width: min(120vw, 1100px); aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 150, 0.32) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%);
  mask: radial-gradient(circle, #000 10%, transparent 62%);
  animation: glow-spin 18s linear infinite, fade-in 0.8s ease-out both;
  pointer-events: none;
}
@keyframes glow-spin { to { rotate: 360deg; } }
.result-panel {
  position: absolute; z-index: 3;
  inset: calc(8px + env(safe-area-inset-top)) var(--gutter) calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 2.4vh, 22px);
  pointer-events: none;
}
.result-panel > * { pointer-events: auto; }
.result-panel .result-top { position: static; translate: none; width: auto; max-width: min(92vw, 640px); gap: 8px; }
.result-overlay .result-sign { font-size: clamp(34px, 8.4vmin, 72px); }
.result-sign .ws-board { padding: 0.08em 0.9em 0.16em; }
.result-stars.big { font-size: clamp(46px, 11vmin, 96px); gap: 0.06em; margin-top: -0.06em; }
.result-stars.big .kit-star { animation: star-pop 0.55s var(--ease-pop) both; animation-delay: calc(0.6s + var(--i) * 0.17s); }
.result-stars.big .kit-star:nth-child(2) { translate: 0 -0.18em; font-size: 1.18em; }
@keyframes star-pop { 0% { scale: 0; rotate: -40deg; opacity: 0; } 70% { scale: 1.25; rotate: 8deg; opacity: 1; } 100% { scale: 1; rotate: 0deg; } }
.result-actions {
  position: static; translate: none;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  gap: 12px;
  width: min(86vw, 340px);
  animation: rise-in 0.45s var(--ease-out) 1.25s both;
}
.result-overlay.failed .result-actions { animation-delay: 0.5s; }
.result-actions .btn.kb-pill { justify-content: center; }
.result-actions .kb-levels { justify-self: center; }
.result-overlay .result-chara { width: clamp(84px, 18vmin, 190px); animation-delay: 1s; }
.result-overlay .result-chara.r { animation-delay: 1.15s; }
@media (orientation: landscape) and (max-height: 600px) {
  .result-panel { flex-direction: row; gap: clamp(12px, 4vw, 48px); }
  .result-actions { width: min(42vw, 300px); gap: 9px; }
  .result-actions .btn.kb-big { min-height: 56px; font-size: 22px; }
  .result-actions .btn.kb-pill:not(.kb-big):not(.kb-small) { min-height: 48px; font-size: 18px; }
  .result-overlay .result-sign { font-size: clamp(28px, 10vh, 48px); }
  .result-stars.big { font-size: clamp(38px, 15vh, 70px); }
  .result-overlay .result-chara { width: clamp(64px, 20vh, 110px); }
  .result-overlay .result-chara.r { display: none; }
}
@media (orientation: portrait) {
  .result-overlay .result-chara { bottom: calc(4px + env(safe-area-inset-bottom)); width: clamp(70px, 20vw, 150px); }
  .result-panel { justify-content: flex-start; padding-top: clamp(76px, 12vh, 130px); }
}
/* しっぱい（スマホ）：ゲームの 中身を 隠さないよう、ゲームを 小さく よせて 看板・ボタンを となりに 置く */
.game-screen.result-fail > .game-area { transition: transform 0.5s var(--ease-out); }
@media (orientation: landscape) and (max-height: 600px) {
  .game-screen.result-fail > .game-area { transform: scale(0.6); transform-origin: 0% 100%; }
  .result-overlay.failed { background: linear-gradient(to right, transparent 52%, rgba(255, 248, 235, 0.7) 64%); }
  .result-overlay.failed .result-panel { left: 58%; flex-direction: column; justify-content: center; gap: 10px; padding-top: 40px; }
  .result-overlay.failed .result-sign { font-size: clamp(22px, 7.4vh, 34px); }
  .result-overlay.failed .result-actions { width: min(100%, 300px); gap: 8px; }
  .result-overlay.failed .result-actions .btn.kb-pill:not(.kb-small) { min-height: 46px; font-size: 18px; }
  .result-overlay.failed .result-chara { display: none; }
}
@media (orientation: portrait) and (max-width: 599px) {
  .game-screen.result-fail > .game-area { transform: scale(0.5); transform-origin: 50% 100%; }
  .result-overlay.failed { background: linear-gradient(to bottom, rgba(255, 248, 235, 0.7) 44%, transparent 54%); }
  .result-overlay.failed .result-panel { bottom: 50%; justify-content: center; padding-top: 64px; gap: 10px; }
  .result-overlay.failed .result-sign { font-size: clamp(24px, 7.6vw, 32px); }
  .result-overlay.failed .result-actions { gap: 9px; }
  .result-overlay.failed .result-actions .btn.kb-pill:not(.kb-small) { min-height: 50px; font-size: 19px; }
  .result-overlay.failed .result-chara { width: 64px; }
}

/* かべをすりぬけろ・ボールわけ：答え合わせの場面を見せたまま（ボタンは 右・下へ） */
.result-overlay.scene-result { background: transparent; }
.result-overlay.scene-result .result-glow { display: none; }

/* =========================================================
   確認ダイアログ・お知らせ
   ========================================================= */
.modal .modal-actions .btn { min-height: 52px; }

/* =========================================================
   保護者画面（大人向けでも 同じ世界観）
   ========================================================= */
.parent-screen .parent-section { background: linear-gradient(to bottom, #fffdf7, #fff6e6); border: 2.5px solid #ecd2a6; border-radius: 22px; box-shadow: 0 4px 0 #dfbf8c, 0 10px 18px rgba(70, 50, 20, 0.1); }
.parent-screen .parent-section h2 { color: var(--ink); font-weight: 900; }
.vol-row { display: grid; grid-template-columns: 40px minmax(90px, 9em) 1fr 3.4em; align-items: center; gap: 10px; padding: 10px 0; border-top: 2px dashed rgba(91, 70, 54, 0.12); }
.vol-row:first-of-type { border-top: 0; }
.vol-icon { width: 34px; height: 34px; display: inline-flex; padding: 6px; border-radius: 10px; color: #fff; }
.vol-icon svg { width: 100%; height: 100%; }
.vol-row[data-key="bgm"] .vol-icon { background: linear-gradient(#6cc4ff, #2382ea); }
.vol-row[data-key="sfx"] .vol-icon { background: linear-gradient(#ffc15a, #f47d1c); }
.vol-row[data-key="speech"] .vol-icon { background: linear-gradient(#8fe264, #3eaa2a); }
.vol-name { font-size: 16px; font-weight: 800; display: flex; flex-direction: column; }
.vol-name small { font-size: 12px; color: var(--color-muted); font-weight: 600; }
.vol-val { font-size: 14px; font-weight: 800; color: var(--color-muted); text-align: right; font-variant-numeric: tabular-nums; }
.vol-range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; touch-action: none; }
.vol-range::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(to right, var(--fill, #2382ea) 0 var(--v, 50%), #e8ddcc var(--v, 50%)); box-shadow: inset 0 2px 3px rgba(80, 50, 20, 0.2); }
.vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #f1e6d4); border: 3px solid var(--fill, #2382ea); box-shadow: 0 3px 0 rgba(80, 50, 20, 0.25); }
.vol-range::-moz-range-track { height: 12px; border-radius: 6px; background: #e8ddcc; }
.vol-range::-moz-range-progress { height: 12px; border-radius: 6px; background: var(--fill, #2382ea); }
.vol-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--fill, #2382ea); }
.vol-row[data-key="bgm"] { --fill: #2382ea; }
.vol-row[data-key="sfx"] { --fill: #f47d1c; }
.vol-row[data-key="speech"] { --fill: #3eaa2a; }
@media (max-width: 520px) { .vol-row { grid-template-columns: 34px 1fr 3em; } .vol-row .vol-range { grid-column: 1 / -1; } }
.plank-glyph { display: inline-flex; width: 100%; height: 100%; color: #9a5a22; }

/* =========================================================
   ひらがな・カタカナ：大きい文字の札 ＋ 絵 ＋ ことば ＋ ◀ ▶ ＋ ひとこと（ふきだし）
   ========================================================= */
.kana-world { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.6vh, 16px); }
.kana-world .group-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; padding: 2px 4px 6px; gap: 6px; }
.kana-world .group-tab { min-width: clamp(38px, 6.4vmin, 56px); height: clamp(38px, 6.4vmin, 56px); font-size: clamp(18px, 3.4vmin, 28px); border-radius: 14px; }
.kana-main { --k: min(40vmin, 44vh, 360px); display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 24px); max-width: 100%; }
.kana-arrow { flex: none; width: clamp(38px, 6.4vmin, 64px); aspect-ratio: 60 / 80; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 4px 0 #87501f) drop-shadow(0 8px 8px rgba(60, 35, 10, 0.25)); touch-action: manipulation; }
.kana-arrow.next svg { transform: scaleX(-1); }
.kana-arrow svg { width: 100%; height: 100%; display: block; }
.kana-arrow:active { translate: 0 3px; }
.kana-arrow.boing { animation: boing 0.4s var(--ease-pop); }
.kana-panel {
  display: flex; align-items: center; gap: clamp(10px, 3vmin, 34px);
  padding: clamp(10px, 2.4vmin, 24px) clamp(14px, 3.6vmin, 40px);
  border-radius: 28px;
  border: 5px solid transparent;
  background: linear-gradient(to bottom, #fffdf7, #fdf2dd) padding-box, linear-gradient(to bottom, #f2b66c, #c9853f) border-box;
  box-shadow: 0 6px 0 var(--wood-dark), 0 14px 22px rgba(60, 35, 10, 0.22);
  min-width: 0;
}
.kana-card {
  flex: none;
  width: var(--k); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  border-radius: 22%;
  border: 4px solid #e2b87a;
  background: radial-gradient(ellipse at 50% 35%, #fff, #fbf6ec);
  box-shadow: inset 0 -6px 0 rgba(200, 160, 100, 0.18), 0 4px 0 #d3a463;
  touch-action: manipulation;
}
.kana-letter { font-size: calc(var(--k) * 0.72); font-weight: 900; line-height: 1; color: #ff5f86; -webkit-text-stroke: 0.035em #fff; paint-order: stroke fill; text-shadow: 0 0.035em 0 #c94a68, 0 0.07em 0.08em rgba(120, 40, 60, 0.25); }
.learn-katakana .kana-letter { color: #36b85a; text-shadow: 0 0.035em 0 #23843e, 0 0.07em 0.08em rgba(40, 100, 60, 0.25); }
.kana-card.boing { animation: boing 0.45s var(--ease-pop); }
.kana-right { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.kana-pic { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.kana-pic-art { width: calc(var(--k) * 0.86); aspect-ratio: 1; display: flex; }
.kana-pic-art svg { width: 100%; height: 100%; }
.kana-pic.flip .kana-pic-art { animation: page-in 0.4s var(--ease-out); }
.kana-pic.boing { animation: boing 0.45s var(--ease-pop); }
.kana-word { font-size: clamp(22px, calc(var(--k) * 0.17), 44px); font-weight: 900; color: var(--ink); letter-spacing: 0.08em; line-height: 1.1; }
.kana-word b { color: #ef3f62; }
.learn-katakana .kana-word b { color: #23a14a; }
.kana-bubble { position: absolute; z-index: 2; bottom: calc(100% - var(--k) * 0.12); left: 50%; translate: -50% 0; width: max-content; max-width: min(46vw, 330px); font-size: clamp(13px, 2.4vmin, 19px); padding: 6px 14px 7px; cursor: pointer; text-align: left; }
.kana-bubble.boing { animation: boing 0.45s var(--ease-pop); }
.kana-world .kana-row { gap: clamp(6px, 1.6vw, 14px); }
.kana-world .kana-tile { width: clamp(48px, 9.6vmin, 88px); height: clamp(48px, 9.6vmin, 88px); font-size: clamp(26px, 5.6vmin, 50px); }
.kana-tile.current { background: linear-gradient(to bottom, #fff4c4, #ffd25a); border-color: #c98a1c; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.7), 0 5px 0 #b07a14, 0 0 0 4px rgba(255, 230, 120, 0.7); }
@media (orientation: portrait) {
  .kana-main { --k: min(52vw, 26vh, 300px); }
  .kana-panel { flex-direction: column; gap: 6px; padding: 14px 16px 10px; }
  .kana-pic-art { width: calc(var(--k) * 0.7); }
  .kana-bubble { bottom: auto; top: calc(var(--k) * -0.18); left: auto; right: -10px; translate: none; max-width: 52vw; }
  .kana-arrow { width: clamp(32px, 9vw, 56px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .kana-main { --k: min(30vw, 44vh, 200px); }
  .kana-world { gap: 4px; }
  .kana-world .group-tab { min-width: 34px; height: 34px; font-size: 17px; }
  .kana-world .kana-tile { width: 44px; height: 44px; font-size: 24px; }
  .kana-word { font-size: 22px; }
  .kana-bubble { font-size: 12px; }
}

/* =========================================================
   ゲームごとの 小さな世界（同じ へや／つくえ でも 壁紙・小物が ちがう）
   ========================================================= */
.w-deco { pointer-events: none; filter: drop-shadow(0 5px 5px rgba(80, 50, 20, 0.18)); }
.w-deco svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* ボールわけ：そらいろの 星の かべがみ＋おもちゃの たな */
.world-v-balls .w-wall { background: radial-gradient(circle at 23px 23px, rgba(255, 255, 255, 0.75) 0 3px, transparent 4px) 0 0 / 46px 46px, radial-gradient(circle at 0 0, rgba(255, 220, 120, 0.35) 0 2px, transparent 3px) 0 0 / 23px 23px, linear-gradient(to bottom, #d9eefc, #c4e3f7 60%); }
.deco-balls { right: 4%; top: 7%; width: clamp(120px, 20vw, 250px); aspect-ratio: 170 / 150; }
/* おおきさじゅん：みどりの しまの かべ＋せいくらべの はしら */
.world-v-size .w-wall { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 18px, transparent 18px 36px), linear-gradient(to bottom, #dff3d6, #cdeac0 60%); }
.deco-size { right: 6%; bottom: 36%; height: min(48vh, 360px); aspect-ratio: 60 / 220; }
/* おぼえてもどそう：むらさきの こどもべや＋かべの絵＋ガーランド */
.world-v-memory .w-wall { background: radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.6) 0 5px, transparent 6px) 0 0 / 40px 40px, linear-gradient(to bottom, #ece2fb, #e0d2f6 60%); }
.deco-memory { right: 3%; top: 15%; width: clamp(150px, 24vw, 320px); aspect-ratio: 200 / 110; }
/* おかたづけ：もものいろの かべ＋とけい・うえきばち */
.world-v-cleanup .w-wall { background: radial-gradient(circle at 12px 12px, rgba(255, 255, 255, 0.55) 0 3px, transparent 4px) 0 0 / 24px 24px, linear-gradient(to bottom, #ffe6dc, #fbd5c6 60%); }
.deco-cleanup { right: 2%; bottom: 30%; width: clamp(70px, 10vw, 130px); aspect-ratio: 120 / 160; }
/* おなじならび：きいろい かべ＋もじの つみきの はた */
.world-v-sequence .w-wall { background: radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.6) 0 4px, transparent 5px) 0 0 / 40px 40px, linear-gradient(to bottom, #fff3c8, #ffe9ac 60%); }
.world-v-sequence .w-table { background: repeating-linear-gradient(176deg, transparent 0 34px, rgba(140, 86, 40, 0.08) 34px 36px), linear-gradient(to bottom, #f7d7a6, #ecbd80 70%, #e0ad6c); }
.deco-sequence { left: 3%; bottom: 5%; width: clamp(70px, 10vw, 130px); aspect-ratio: 90 / 120; }
/* はんぶんパズル：みどりの かべ＋こい色の 木の パズル台＋かべの パズルの 絵 */
.world-v-halves .w-wall { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 14px, transparent 14px 28px), linear-gradient(to bottom, #d6efe6, #c2e6d8 60%); }
.world-v-halves .w-table { background: repeating-linear-gradient(176deg, transparent 0 30px, rgba(80, 40, 10, 0.12) 30px 32px), linear-gradient(to bottom, #d79a5e, #c4834a 70%, #b37440); }
.deco-halves { right: 4%; top: 5%; width: clamp(90px, 14vw, 180px); aspect-ratio: 120 / 100; }
/* せまい たて画面：遊ぶ物の じゃまに なる小物は 出さない（壁紙の ちがいは のこる） */
@media (orientation: portrait) and (max-width: 700px) {
  .deco-balls, .deco-memory, .deco-size, .deco-cleanup { display: none; }
  .deco-halves { width: 26vw; top: auto; bottom: 76%; }
}
@media (max-height: 520px) and (orientation: landscape) { .w-deco { opacity: 0.85; } .deco-sequence, .deco-balls, .deco-memory { display: none; } }
@media (orientation: portrait) and (max-width: 700px) { .deco-sequence { display: none; } }

/* 大きい画面（タブレット・パソコン）では 動かす物を もう少し大きく（あまった空白を へらす） */
@media (min-width: 1000px) and (min-height: 700px) {
  :root { --piece: clamp(74px, 19vmin, 140px); }
  .game-animalhome, .game-garage, .game-cleanup, .game-shadow { --piece: clamp(80px, 20vmin, 150px); }
  .game-sequence { --piece: clamp(64px, min(20vmin, calc((100vw - 110px) / var(--len, 4))), 136px); }
  .half-left, .half-slot, .half-piece { --piece: clamp(96px, 26vmin, 200px); }
  .game-road { --cell: max(44px, min(calc((100vw - 64px) / var(--w)), calc((100dvh - 380px) / var(--h)), 140px)); }
}

/* あたらしい あそびが ひらいたよ（お知らせ）：鍵が ひらいて きえる → アイコンが ぽん */
.unlock-toast-lock { width: 46px; height: 46px; flex: none; }
.unlock-toast-lock .shackle { animation: shackle-up 0.35s ease-out 0.5s forwards; }
.unlock-toast-lock { animation: toast-lock 1.2s ease-in 0.3s forwards; }
@keyframes toast-lock { 0%, 50% { opacity: 1; scale: 1; } 65% { scale: 1.2; } 100% { opacity: 0; scale: 0.5; width: 0; } }
.unlock-toast .unlock-icon { animation: pop-in 0.5s var(--ease-pop) 1s both; }
.k-card .lock-hint-icon { width: clamp(16px, calc(var(--cw, 150px) * 0.15), 28px); height: clamp(16px, calc(var(--cw, 150px) * 0.15), 28px); display: inline-flex; flex: none; }
.k-card .lock-hint-icon svg, .lock-pop .lock-hint-icon svg { width: 100%; height: 100%; }
.lock-pop .lock-hint-icon { width: 26px; height: 26px; display: inline-flex; }
.k-card .lock-progress .dot { width: clamp(6px, calc(var(--cw, 150px) * 0.05), 9px); height: clamp(6px, calc(var(--cw, 150px) * 0.05), 9px); }
.k-card .lock-progress .bar { width: calc(var(--cw, 150px) * 0.36); }

/* すうじ：たて画面では 1〜10 を 5 こ × 2 だんに（くまと かさならない） */
@media (orientation: portrait) {
  .num-tiles { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; gap: 10px; padding-bottom: 6px; }
}
@media (orientation: portrait) and (max-width: 599px) {
  .num-tiles { padding-bottom: 64px; } /* 左下の くまの 上に ならべる */
  .num-tiles .num-tile { min-width: max(52px, 8vmin); height: max(52px, 8vmin); }
}
/* タブレット たて画面：下に 空きが 出ないよう、ひらがな・すうじを 一回り 大きく */
@media (orientation: portrait) and (min-width: 600px) {
  .num-block { width: min(46vw, 30vh, 320px); }
  .num-face { font-size: min(34vw, 22vh, 220px); }
  .num-world { gap: clamp(16px, 2.4vh, 32px); }
  .num-tray { padding: 18px; border-radius: 32px; }
  .num-apples { grid-template-columns: repeat(min(var(--n), 5), min(12.5vw, 9vh, 104px)); gap: 8px; }
  .num-tiles { gap: 14px; padding-bottom: 10px; }
  .num-tiles .num-tile { min-width: min(10vw, 84px); height: min(10vw, 84px); font-size: min(5vw, 42px); border-radius: 18px; }
  .kana-main { --k: min(56vw, 31vh, 380px); }
  .kana-world { gap: clamp(14px, 2.6vh, 30px); }
  .kana-world .group-tab { min-width: min(7.6vw, 62px); height: min(7.6vw, 62px); font-size: min(3.8vw, 30px); }
  .kana-world .kana-tile { width: min(12vw, 100px); height: min(12vw, 100px); font-size: min(6.6vw, 56px); }
  .kind-kana .w-window { display: none; } /* 行のタブと かさならないように */
}