/* =========================================================
   ゲーム画面のスタイル（共通 → 各ゲーム）
   値は base.css の変数（--color-* / --radius-* / --line-w …）を使います。
   ※ ピースの内側の余白は「%」の padding を使わないこと。
     padding の % は親の幅が基準になるため、横長のトレーの中ではピースの中身が潰れます。
     中身の大きさは --fill（ピースに対する割合）で決めます。
   ========================================================= */

/* ----- ゲーム画面の枠 ----- */
.game-screen > .game-bar { order: 0; }
.game-screen > .timer { order: 1; }
.game-screen > .game-hint { order: 2; }
.game-screen > .game-area { order: 3; }

.game-bar {
  display: grid;
  grid-template-columns: var(--btn-round) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-small);
  padding: var(--space-medium) var(--gutter) var(--space-xs);
  flex: none;
}

.timer {
  flex: none;
  height: 14px;
  margin: 6px var(--gutter) 0;
  border-radius: var(--radius-pill);
  background: #efe4d3;
  border: var(--line-w-thin) solid var(--color-line-soft);
  overflow: hidden;
}
.timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #9fd39a, #c6e3a0); transition: width 0.2s linear, background 1s; border-radius: var(--radius-pill); }
.timer.low .timer-fill { background: linear-gradient(90deg, #f6c88a, #f8dba0); }

/* ころんの ひとこと（吹き出しは base.css の .speech を使う） */
.game-hint {
  flex: none;
  justify-content: center;
  gap: 12px;
  padding: var(--space-small) var(--gutter) var(--space-xs);
  pointer-events: none;
  min-height: 62px;
}
.hint-mascot { width: 46px; height: 48px; }
.hint-mascot .mascot { width: 100%; height: 100%; }
.game-hint .speech { --tail: 15px; font-size: clamp(16px, 2.6vmin, 22px); padding: 6px 16px 7px; box-shadow: 0 3px 0 var(--color-line-soft); }
.game-hint.pop .speech { animation: bounce 0.45s var(--ease-out); }

/* ----- あそびば（ゲームごとの舞台。操作する物より目立たないように うすく） ----- */
.game-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
  padding: 8px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  position: relative;
  touch-action: none;
  isolation: isolate;
}
.game-area::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* 標準：つくえの上（下の方に木の天板） */
  background:
    linear-gradient(to bottom, transparent 0, transparent calc(100% - var(--floor, 42%)), rgba(91, 70, 54, 0.14) calc(100% - var(--floor, 42%)), rgba(91, 70, 54, 0.14) calc(100% - var(--floor, 42%) + 3px), transparent calc(100% - var(--floor, 42%) + 3px)),
    linear-gradient(to bottom, transparent calc(100% - var(--floor, 42%)), var(--ground-a, #f1dbb8) calc(100% - var(--floor, 42%)), var(--ground-b, #ead0a6));
}
/* へや（ボールわけ・おかたづけ）：かべ紙 + 木の床 */
.game-balls, .game-cleanup { --floor: 46%; }
.game-balls::before, .game-cleanup::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(168, 113, 63, 0.12) 58px 60px) 0 100% / 100% var(--floor) no-repeat,
    linear-gradient(to bottom, rgba(255, 236, 220, 0.6), rgba(255, 236, 220, 0.6) calc(100% - var(--floor)), #ecd2ad calc(100% - var(--floor)), #e4c497);
}
/* そと（どうぶつのおうち・みちをつなごう）：そら + くさはら */
.game-animalhome::before, .game-road::before {
  background:
    radial-gradient(ellipse 70% 30% at 20% 100%, #c4e0ac 0 60%, transparent 61%),
    radial-gradient(ellipse 70% 26% at 85% 100%, #cfe6b9 0 60%, transparent 61%),
    linear-gradient(to bottom, #e3f1f8, #f4f8ec 55%, #dcedca 55%, #d2e8bd);
}
/* まち（のりものガレージ）：そら + みちの色の地面 */
.game-garage::before {
  background:
    linear-gradient(to bottom, #e3f1f8, #f3f6f0 55%, #e2e6d6 55%, #d7dccb);
}
/* かべをすりぬけろ：そら + くさはら（下の「かべをすりぬけろ」の節） */
/* ロケット：舞台そのものが空なので、まわりは うすく */
.game-rocket::before { background: none; }

/* ----- ピース（動かす物）：少し浮いて見える・指で持ちやすい ----- */
.piece {
  --fill: 80%;
  width: var(--piece);
  height: var(--piece);
  flex: none;
  position: relative;
  border-radius: var(--radius-medium);
  background: var(--color-card);
  border: var(--line-w) solid var(--color-line);
  box-shadow: var(--shadow-block);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  transition: transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out;
}
.piece > * { width: var(--fill); height: var(--fill); flex: none; }
.piece.draggable:not(.drag-off):not(.dragging):active { transform: translateY(2px); box-shadow: var(--shadow-pressed); }
/* ゆっくり ふわふわ（「さわっていいもの」の合図）。ずれて動くように --i で遅らせる */
.tray-row > .piece.draggable:not(.drag-off) { animation: piece-idle 3.2s ease-in-out infinite; }
.tray-row > .piece:nth-child(2n) { animation-delay: -1.1s; }
.tray-row > .piece:nth-child(3n) { animation-delay: -2.2s; }
@keyframes piece-idle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

/* 置き場所：点線で「ここに置けそう」。ピースより少し大きい */
.slot {
  --fill: 80%;
  width: calc(var(--piece) * 1.06);
  height: calc(var(--piece) * 1.06);
  flex: none;
  position: relative;
  border: var(--line-w-thick) dashed rgba(91, 70, 54, 0.3);
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background-color var(--dur-fast);
}
.slot > .art { width: var(--fill); height: var(--fill); }
.slot.drop-hover, .place.drop-hover { border-color: var(--color-primary); background-color: var(--color-primary-soft); transform: scale(1.06); }
.slot.filled { border-style: solid; border-color: transparent; background: rgba(255, 255, 255, 0.35); }
.slot > .piece.placed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  animation: snap 0.4s var(--ease-pop);
}
@keyframes snap { 0% { transform: scale(1.2); } 60% { transform: scale(0.96); } 100% { transform: scale(1); } }
.nope { animation: nope 0.42s ease-in-out; }
@keyframes nope { 0%, 100% { translate: 0; } 25% { translate: -7px 0; } 50% { translate: 6px 0; } 75% { translate: -4px 0; } }

/* ピースを置いておく トレー（木のおぼん） */
.tray-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2vmin, 18px);
  padding: 14px;
  min-height: calc(var(--piece) + 28px);
  width: min(100%, 940px);
  background: rgba(255, 248, 236, 0.82);
  border: var(--line-w) solid rgba(91, 70, 54, 0.16);
  border-radius: var(--radius-large);
  box-shadow: inset 0 4px 0 rgba(91, 70, 54, 0.06), 0 4px 0 rgba(91, 70, 54, 0.08);
}
.slot-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2.6vmin, 26px); }

.silhouette { filter: brightness(0); opacity: 0.22; }

/* ----- 結果画面 ----- */
.result-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(251, 243, 229, 0.9);
  animation: fade-in var(--dur-medium) ease-out;
  overflow: hidden;
}
.result-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(480px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 22px 24px;
  background: var(--color-card);
  border: var(--line-w-thick) solid var(--color-line);
  border-radius: var(--radius-blob-lg);
  box-shadow: var(--shadow-block-lg), var(--shadow-soft);
  text-align: center;
  animation: pop-in var(--dur-medium) var(--ease-pop);
}
.result-mascot { width: clamp(84px, 16vmin, 124px); animation: bounce 0.7s var(--ease-out) 0.15s; }
.result-title { margin: 0; font-size: clamp(34px, 7vmin, 54px); font-weight: var(--fw); letter-spacing: 0.12em; padding-left: 0.12em; line-height: 1.1; }
.result-sub { margin: 0; font-size: clamp(17px, 2.8vmin, 22px); font-weight: var(--fw); color: var(--color-muted); line-height: 1.5; }
.result-stars { display: flex; gap: 8px; }
.result-stars .star { width: clamp(50px, 9vmin, 70px); height: clamp(50px, 9vmin, 70px); color: #eadfce; animation: star-in 0.5s var(--ease-pop) both; animation-delay: calc(0.3s + var(--i) * 0.22s); }
.result-stars .star:nth-child(2) { translate: 0 -8px; }
.result-stars .star.on { color: var(--color-gold); }
.result-stars .icon g { stroke: var(--color-line); stroke-width: 5; }
@keyframes star-in { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.result-unlock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--radius-medium);
  background: #fff3d6;
  border: var(--line-w-thin) dashed var(--color-primary);
  font-weight: var(--fw);
  font-size: clamp(15px, 2.6vmin, 20px);
  line-height: 1.4;
  text-align: left;
  word-break: keep-all; /* 「ひらいた / よ！」のような切れ方をしない */
  text-wrap: balance;
}
/* ボタン：いちばん押してほしい「つぎへ」を上に大きく。下に「もういちど」と「いちらん」 */
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 6px; width: 100%; }
.result-actions .btn-primary { order: -1; flex: 1 0 100%; max-width: 300px; min-height: var(--btn-h-lg); font-size: clamp(24px, 4vmin, 30px); box-shadow: var(--shadow-block-lg); }
.result-actions .btn-primary.pressed { box-shadow: var(--shadow-pressed); }
.result-actions .btn-primary + .btn-round, .result-actions .btn-ghost { order: 1; }
.result-actions .btn-round { order: 2; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti-piece { position: absolute; top: -20px; left: var(--x); width: 12px; height: 16px; background: var(--c); border-radius: 3px; opacity: 0.85; animation: fall var(--t) cubic-bezier(0.3, 0.2, 0.6, 1) var(--d) both; }
.confetti-piece.round { border-radius: 50%; width: 13px; height: 13px; }
@keyframes fall { from { transform: translateY(-20px) rotate(0); } to { transform: translateY(110vh) rotate(300deg); } }

/* ============ いろのボールわけ ============ */
.ball-boxes {
  --bw: clamp(84px, 17vmin, 160px);
  --gap: clamp(8px, 2vw, 22px);
  display: flex; justify-content: center; align-items: flex-end; gap: 14px var(--gap);
  flex: none; width: 100%; flex-wrap: wrap; padding-top: 18px;
}
.ball-boxes.count-4 { --bw: clamp(74px, 15vmin, 150px); }
.ball-boxes.count-5, .ball-boxes.count-6 { --bw: clamp(64px, 13vmin, 130px); }
/* せまい画面で 5〜6 箱：1 列に入らないので 3 箱ずつ 2 段にそろえる（5 + 1 にしない） */
@media (max-width: 600px) {
  .ball-boxes.count-5, .ball-boxes.count-6 { --bw: clamp(70px, 21vw, 100px); max-width: calc(var(--bw) * 3 + var(--gap) * 2 + 2px); margin: 0 auto; }
}
.ball-box { position: relative; width: var(--bw); height: calc(var(--bw) * 0.95); cursor: pointer; }
.box-front {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  background: var(--color-wood);
  border: var(--line-w) solid var(--color-line);
  border-radius: 10px 10px var(--radius-medium) var(--radius-medium);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.07), var(--shadow-block);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 2;
}
.box-label { width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.7) 0 12%, transparent 13%), var(--c); border: var(--line-w) solid var(--color-line); }
.box-count { font-size: clamp(14px, 2.4vmin, 20px); font-weight: var(--fw); min-height: 1.2em; line-height: 1.2; }
.box-lid {
  position: absolute;
  left: -5%; right: -5%;
  top: 18%;
  height: 16%;
  background: var(--color-wood-deep);
  border: var(--line-w) solid var(--color-line);
  border-radius: 10px;
  z-index: 3;
  transform-origin: 6% 100%;
  transition: transform 0.5s var(--ease-pop);
}
.ball-box.open .box-lid { transform: rotate(-28deg) translate(-4%, -40%); }
.box-inner {
  position: absolute;
  left: 4%; right: 4%;
  bottom: 62%;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  gap: 2px;
  z-index: 1;
  opacity: 0;
  transform: translateY(30%);
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}
.ball-box.open .box-inner { opacity: 1; transform: none; }
.box-inner .ball { width: calc(var(--bw) * 0.17); height: calc(var(--bw) * 0.17); border-width: 2px; position: relative; box-shadow: none; }
.box-inner .ball.miss { opacity: 0.4; }
.ball-box.perfect .box-front { background: #cfe8c4; }
.ball-box.drop-hover .box-front { background: #f6dcb4; }
.ball-box.drop-hover { transform: scale(1.05); transition: transform var(--dur-fast) var(--ease-out); }
.ball-box.gulp .box-front { animation: gulp 0.3s ease-out; }
@keyframes gulp { 50% { transform: scale(1.05, 0.94); } }
.ball-field { flex: 1; width: min(100%, 980px); position: relative; min-height: 140px; margin: 14px 0 6px; }
.ball {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.85) 0 13%, rgba(255, 255, 255, 0) 14%), var(--c);
  border: var(--line-w) solid rgba(91, 70, 54, 0.6);
  box-shadow: inset -4px -6px 0 rgba(0, 0, 0, 0.1), 0 5px 0 rgba(91, 70, 54, 0.14);
  touch-action: none;
}
.ball.is-white { border-color: rgba(91, 70, 54, 0.75); }
.ball-lg { width: clamp(56px, 10vmin, 78px); height: clamp(56px, 10vmin, 78px); }
.ball-md { width: clamp(48px, 8.5vmin, 68px); height: clamp(48px, 8.5vmin, 68px); }
.ball-sm { width: clamp(42px, 7.2vmin, 58px); height: clamp(42px, 7.2vmin, 58px); }
.ball-field.ended .ball { opacity: 0.55; }
.ball-result { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ball-result-total { margin: 0; font-size: clamp(18px, 3vmin, 24px); font-weight: var(--fw); }
.ball-result-colors { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 8px; }
@media (min-width: 600px) { .ball-result-colors { grid-template-columns: repeat(3, auto); } }
.color-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: var(--radius-pill); background: #fff; border: var(--line-w-thin) solid var(--color-line-soft); font-weight: var(--fw); font-size: 16px; }
.color-chip.perfect { border-color: var(--color-success); background: var(--color-success-soft); }
.chip-ball { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: var(--line-w-thin) solid var(--color-line); }
.chip-check { width: 18px; height: 18px; color: var(--color-success); }
.chip-check .icon g { stroke: var(--color-success); }

/* ============ かべをすりぬけろ ============
   壁の大きさ・位置は JS（scripts/games/wall.js）が測って CSS 変数に入れます。
     --ww / --wh : 手前に来たときの壁の幅・高さ   --hz : 地平線   --front : 壁が止まる手前の線
     --wp : 動かす形の大きさ   --hz-a : 地平線（あそびば全体から見た位置）
   壁の中の物は --u（壁の幅の 1/100）で大きさを決めるので、壁が拡大すると全部が同じ比率で大きくなります。 */
.game-wall {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
  padding: 2px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.game-wall::before { background: none; } /* 背景は 画面全体の .world（空・木・さく・花） */

/* ----- 画面：上のバー・説明の看板は world.css の共通部品 ----- */
.wall-screen > .world { --tree-h: 24%; --tree-y: 1.5%; --fence-y: 0.6%; --fence-h: 4.2%; transform-origin: 50% 55%; }

/* 道（市松タイル）は JS が SVG で描く */
.wall-road { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform-origin: 50% 40%; }
.wall-road svg { display: block; }
.game-wall.wall-side { flex-direction: row; align-items: stretch; gap: 14px; }

/* ----- 舞台（空・おか・道・手前の線） ----- */
.wall-stage { position: relative; flex: 1; min-width: 0; min-height: 0; }
.wall-stage.flying { z-index: 6; } /* くぐるとき、門は おぼんより手前 */
.wall-cam { position: absolute; inset: 0; will-change: transform; }
/* 手前の線：壁はここで止まる（「とうちゃく」が分かる） */
.wall-goal {
  position: absolute;
  top: calc(var(--front) - 7px);
  left: calc(50% - var(--ww) * 0.6);
  width: calc(var(--ww) * 1.2);
  height: 12px;
  border-radius: var(--radius-pill);
  background: #fff7dc;
  border: var(--line-w-thin) dashed #dcb36a;
  transition: background-color var(--dur-medium), box-shadow var(--dur-medium);
}
.wall-goal.reached { background: #fff0a6; border-style: solid; box-shadow: 0 0 0 6px rgba(255, 233, 140, 0.55); }

/* ----- 壁（おもちゃの もん）：この要素だけを translate + scale で動かす ----- */
.wall-gate {
  --u: calc(var(--ww) / 100);
  position: absolute;
  z-index: 1;
  left: calc(50% - var(--ww) / 2);
  top: calc(var(--front) - var(--wh));
  width: var(--ww);
  height: var(--wh);
  transform-origin: 50% 100%;
  will-change: transform;
}
.wall-gate.appear { animation: fade-in 0.7s ease-out both; }
.wall-shadow {
  position: absolute; left: 2%; right: 2%;
  bottom: calc(var(--u) * -2.4); height: calc(var(--u) * 5);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 104, 52, 0.34), rgba(74, 104, 52, 0));
}
.wall-body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.wall-body.landed { animation: wall-land 0.5s var(--ease-out); }
.gate-holder { position: absolute; inset: 0; }
.gate-art { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 calc(var(--u) * 0.8) calc(var(--u) * 0.8) rgba(80, 60, 30, 0.25)); }
.gate-flag { transform-box: fill-box; transform-origin: 0 50%; animation: flag-wave 1.6s ease-in-out infinite alternate; }
@keyframes flag-wave { from { transform: skewY(-6deg) scaleX(0.94); } to { transform: skewY(5deg) scaleX(1.04); } }
@keyframes wall-land { 35% { transform: scale(1.012, 0.975); } 70% { transform: scale(0.996, 1.008); } }

/* 穴：門の SVG で くりぬいた穴（ふちの厚み）＋ ここの .wh-plate（奥の暗いくぼみ）。成功すると くぼみが消えて 向こうが見える */
.wall-hole { position: absolute; z-index: 1; }
.wh-art { display: block; width: 100%; height: 100%; overflow: visible; }
.wh-ring { transition: stroke var(--dur-fast); }
.wh-plate { transition: opacity 0.6s ease-in; }
.wall-hole.open .wh-plate { opacity: 0; }
.wall-hole.glow { filter: drop-shadow(0 0 calc(var(--u) * 1.6) #fff19a) drop-shadow(0 0 calc(var(--u) * 0.8) #ffe36e); }
.wall-hole.glow .wh-ring, .wall-hole.filled .wh-ring { stroke: #fff2a8; }
.wall-hole.pass-glow { filter: drop-shadow(0 0 calc(var(--u) * 2) #fff3a8); }
.wall-hole.want .wh-ring { animation: rim-want 0.9s ease-in-out infinite alternate; }
@keyframes rim-want { from { stroke: rgba(255, 246, 200, 0); } to { stroke: #fff6c8; } }
/* 入れた形：穴の子要素（壁と いっしょに動く） */
.wall-hole > .wall-piece { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; cursor: default; animation: none; }
.wall-hole > .wall-piece::after { display: none; }
.wall-spark { position: absolute; inset: 0; pointer-events: none; }
.wall-spark > i {
  position: absolute; left: 50%; top: 50%;
  width: 14%; height: 14%; margin: -7% 0 0 -7%;
  border-radius: 50%;
  background: #ffe36e;
  border: calc(var(--u) * 0.4) solid #fff;
  animation: spark 0.75s ease-out forwards;
}
@keyframes spark { from { transform: rotate(var(--a)) translateY(0) scale(0.4); opacity: 1; } to { transform: rotate(var(--a)) translateY(-430%) scale(1); opacity: 0; } }

/* ----- 動かす形（下の おぼん） ----- */
.wall-tray {
  position: relative;
  z-index: 5;
  flex: none;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--wp) * 0.45);
  padding: 12px calc(var(--wp) * 0.3) 14px; /* 形は 道の上に じかに置く（おぼんの箱は 描かない） */
}
.wall-side .wall-tray, .wall-tray2 .wall-tray {
  display: grid;
  grid-template-columns: repeat(2, var(--wp));
  gap: calc(var(--wp) * 0.3) calc(var(--wp) * 0.36);
  padding: 14px 16px;
}
.wall-tray2 .wall-tray { padding: 10px 20px 12px; gap: calc(var(--wp) * 0.22) calc(var(--wp) * 0.5); }
.wall-side .wall-spot:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
.wall-spot { position: relative; width: var(--wp); height: var(--wp); flex: none; }
.wall-piece {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: grab;
  transition: scale 0.16s ease-out, filter 0.16s;
}
.wall-piece .wp-art { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wall-piece::after { /* 下の影：少し浮いている = 持ち上げられる */
  content: '';
  position: absolute; left: 18%; right: 18%; bottom: -7%; height: 11%;
  border-radius: 50%;
  background: rgba(80, 60, 30, 0.26);
}
.wall-spot > .wall-piece { animation: wp-bob 3s ease-in-out infinite; }
.wall-spot:nth-child(2) > .wall-piece { animation-delay: -1s; }
.wall-spot:nth-child(3) > .wall-piece { animation-delay: -2s; }
.wall-spot:nth-child(4) > .wall-piece { animation-delay: -0.5s; }
@keyframes wp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.wall-spot > .wall-piece.lifted { animation: none; z-index: 30; scale: 1.03; cursor: grabbing; filter: drop-shadow(0 12px 8px rgba(91, 70, 54, 0.22)); }
.wall-piece.lifted::after { opacity: 0; }
.wall-spot > .wall-piece.returning { animation: none; transition: transform 0.32s var(--ease-out), scale 0.2s ease-out; }
.wall-spot > .wall-piece.wobble { animation: wp-wobble 0.38s ease-in-out; }
@keyframes wp-wobble { 0% { scale: 1.08; } 22% { scale: 1.2 0.9; } 44% { scale: 0.93 1.12; } 66% { scale: 1.07 0.96; } 84% { scale: 0.98 1.03; } 100% { scale: 1; } }
.wall-spot > .wall-piece.hop { animation: wp-hop 0.45s var(--ease-out); }
@keyframes wp-hop { 40% { translate: 0 -14px; } }
.wall-spot > .wall-piece.plop { animation: wp-plop 0.9s ease-out forwards; }
.wall-spot:nth-child(2n) > .wall-piece.plop { --r: -1; }
@keyframes wp-plop {
  0% { translate: 0 0; rotate: 0deg; }
  30% { translate: 0 calc(var(--wp) * 0.2); rotate: calc(var(--r, 1) * 16deg); }
  50% { translate: 0 calc(var(--wp) * 0.08); rotate: calc(var(--r, 1) * 11deg); }
  70% { translate: 0 calc(var(--wp) * 0.2); rotate: calc(var(--r, 1) * 14deg); }
  85% { translate: 0 calc(var(--wp) * 0.15); }
  100% { translate: 0 calc(var(--wp) * 0.18); rotate: calc(var(--r, 1) * 12deg); }
}

.wall-retry { position: absolute; z-index: 9; left: 50%; top: calc(6% + clamp(110px, 18vmin, 170px)); translate: -50% 0; min-height: 76px; white-space: nowrap; padding-inline: 28px; font-size: clamp(22px, 3.8vmin, 30px); box-shadow: var(--shadow-block-lg); animation: rise-in var(--dur-medium) var(--ease-pop); }
.wall-fx { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.wall-ghost { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.wall-ghost .wp-art { width: 100%; height: 100%; display: block; overflow: visible; opacity: 0.7; }
.wall-finger {
  position: absolute; left: 58%; top: 58%;
  width: 30%; height: 30%; min-width: 26px; min-height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: var(--line-w) solid var(--color-line);
  box-shadow: 0 3px 0 rgba(91, 70, 54, 0.2);
}

/* ----- 成功：穴をくぐる → 向こうの景色 ----- */
.wall-tunnel { /* 穴のふちを通りぬける一瞬（まわりが 木の色で 暗くなる） */
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, transparent 40%, rgba(110, 70, 30, 0.75) 78%, rgba(70, 40, 15, 0.95));
}
.wall-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fffbe6, rgba(255, 251, 230, 0) 70%); animation: flash-out 0.9s ease-out forwards; }
@keyframes flash-out { from { opacity: 1; } to { opacity: 0; } }
.wall-rainbow { position: absolute; z-index: 0; left: 50%; top: 2%; width: min(90%, 620px); translate: -50% 0; opacity: 0.85; animation: rainbow-in 1.1s ease-out both; }
.wall-rainbow svg { display: block; width: 100%; }
@keyframes rainbow-in { from { opacity: 0; scale: 0.85; } }
.wall-winners {
  position: absolute; z-index: 4; left: 0; right: 0;
  bottom: 26%;
  display: flex; justify-content: center; gap: calc(var(--wp) * 0.3);
}
.wall-winner { width: calc(var(--wp) * 1.05); aspect-ratio: 1; animation: win-in 0.7s var(--ease-pop) calc(var(--i) * 0.12s) both, win-jump 0.9s ease-in-out calc(0.8s + var(--i) * 0.15s) infinite alternate; }
.wall-winner svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 5px rgba(60, 50, 20, 0.25)); }
@keyframes win-in { from { translate: 0 -120%; scale: 0.3; opacity: 0; } 60% { opacity: 1; } }
@keyframes win-jump { to { translate: 0 -14%; } }
.wall-clear-sign, .wall-retry-sign { position: absolute; z-index: 7; left: 50%; top: 5%; translate: -50% 0; font-size: clamp(30px, 8vmin, 66px); animation: sign-swing 0.9s var(--ease-pop) both; transform-origin: 50% -60%; }
@keyframes sign-swing { 0% { transform: translateY(-140%) rotate(-6deg); } 60% { transform: translateY(4%) rotate(2deg); } 100% { transform: none; } }
.wall-clear-sign .ws-board, .wall-retry-sign .ws-board { padding: 0.12em 0.7em 0.18em; white-space: nowrap; }
.clear-in { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.clear-stars { display: flex; gap: 0.06em; margin-top: -0.75em; margin-bottom: 0.06em; }
.clear-stars span { width: 0.8em; height: 0.8em; color: #f0e2c6; animation: star-pop 0.5s var(--ease-pop) calc(0.5s + var(--i) * 0.15s) both; }
.clear-stars span:nth-child(2) { translate: 0 -0.2em; }
.clear-stars span.on { color: #ffcd2e; filter: drop-shadow(0 2px 0 #c98a0c); }
.clear-stars .icon g { stroke: #b07a20; stroke-width: 5; }
@keyframes star-pop { from { scale: 0; } }
.wall-retry-sign { font-size: clamp(24px, 6vmin, 46px); }
.retry-in { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.retry-a { color: #7a4a24; }
.retry-b { color: #ef5a3c; -webkit-text-stroke: 0.1em #fff; paint-order: stroke fill; }
.wall-screen.scene-end .game-hint { visibility: hidden; } /* 看板と同じ言葉を 上に重ねない */
.wall-chara { position: absolute; z-index: 6; bottom: 6%; width: clamp(80px, 18vmin, 170px); aspect-ratio: 120 / 140; animation: chara-up 0.6s var(--ease-pop) both; }
.wall-chara.l { left: 3%; }
.wall-chara.r { right: 3%; aspect-ratio: 120 / 150; animation-delay: 0.12s; }
@keyframes chara-up { from { translate: 0 60%; opacity: 0; } }

/* 結果：ゲームの場面を見せたまま、下に ボタンだけ */
.result-overlay.scene-result { background: transparent; place-items: end center; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.scene-result .result-actions { flex-wrap: nowrap; gap: 10px; }
.scene-result .result-actions .btn:not(.btn-round) { min-height: 58px; padding: 8px 20px; white-space: nowrap; font-size: clamp(17px, 2.4vmin, 22px); }
.scene-result .result-actions .btn-round { width: 58px; height: 58px; }
.scene-result .result-actions .btn-primary { order: 0; flex: 0 0 auto; max-width: none; min-height: 64px; font-size: clamp(20px, 3vmin, 26px); }
.scene-result .result-actions .btn-ghost { order: -1; }
.scene-result .result-card { width: auto; max-width: calc(100vw - 20px); overflow: visible; padding: 10px 14px; background: rgba(255, 250, 240, 0.88); border-color: #e7b97a; animation: rise-in var(--dur-medium) var(--ease-out); }
.scene-result .result-mascot, .scene-result .result-title, .scene-result .result-stars, .scene-result .result-sub { display: none; }
/* 横向きスマホ：ボタンは 右（形が なくなった おぼんの場所）にたてに並べて、場面を かくさない */
@media (max-height: 520px) and (orientation: landscape) {
  .result-overlay.scene-result { place-items: center end; }
  .scene-result .result-actions { flex-direction: column; }
  .wall-winners { bottom: 34%; }
  .wall-side .wall-retry-sign { left: 32%; top: 3%; }
  .wall-side .wall-retry { left: auto; right: 2%; top: 6%; translate: none; min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .wall-spot > .wall-piece, .gate-flag { animation: none; }
}

/* ============ どうぶつのおうち／のりものガレージ／おかたづけ ============ */
.place-row { display: grid; gap: clamp(10px, 2vmin, 18px); width: min(100%, 980px); flex: 1; min-height: 0; max-height: 52%; }
.place-row.count-2 { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
.place-row.count-3 { grid-template-columns: repeat(3, 1fr); max-width: 780px; }
.place-row.count-4 { grid-template-columns: repeat(4, 1fr); }
@media (orientation: portrait) and (max-width: 700px) { .place-row.count-4 { grid-template-columns: repeat(2, 1fr); max-height: 60%; } }
.place {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 8px;
  border-radius: var(--radius-blob);
  background: rgba(255, 250, 242, 0.92);
  border: var(--line-w) dashed rgba(91, 70, 54, 0.32);
  box-shadow: 0 4px 0 rgba(91, 70, 54, 0.1);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background-color var(--dur-fast);
  cursor: pointer;
}
.place-art { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: center; }
.place-art .art { max-width: 100%; max-height: 100%; }
.place-name { font-weight: var(--fw); font-size: clamp(16px, 2.6vmin, 22px); letter-spacing: 0.06em; line-height: 1.3; }
.place-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 8px; }
.place-items .piece.placed { width: clamp(36px, 6.5vmin, 54px); height: clamp(36px, 6.5vmin, 54px); --fill: 100%; border: 0; background: transparent; box-shadow: none; animation: snap 0.4s var(--ease-pop); }
.place.happy { animation: bounce 0.45s var(--ease-out); }
.item-piece { --fill: 80%; }
/* 数が少ないゲームは、物を大きく（画面の空白を減らし、指で持ちやすく） */
.game-shadow { --piece: clamp(84px, 22vmin, 140px); }

/* ============ おなじならび ============ */
.seq-board {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 18px;
  background: var(--color-card);
  border-radius: var(--radius-blob);
  border: var(--line-w) solid rgba(91, 70, 54, 0.22);
  box-shadow: var(--shadow-block);
}
.seq-label { width: 40px; height: 40px; color: var(--color-primary); }
.seq-label .icon g { stroke: var(--color-line); stroke-width: 7; }
.seq-sample, .seq-slots { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.seq-cell, .seq-slot { --piece: clamp(54px, 11vmin, 100px); }
.seq-cell { width: var(--piece); height: var(--piece); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-medium); background: #fbf1e2; }
.seq-cell > * { width: 84%; height: 84%; }
.seq-arrow { width: 22px; height: 22px; color: var(--color-muted); flex: none; }
.seq-arrow .icon g { stroke: rgba(91, 70, 54, 0.4); stroke-width: 12; }
.seq-shape { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.seq-shape .art { width: 100%; height: 100%; }
.seq-shape.size-s .art { width: 58%; height: 58%; }
.seq-piece { --fill: 84%; }
@media (max-width: 480px) {
  .seq-board { padding: 10px; gap: 8px; }
  .seq-label { width: 28px; height: 28px; }
  .seq-sample, .seq-slots { gap: 4px; }
  .seq-cell, .seq-slot { --piece: clamp(44px, 12vw, 70px); }
  .seq-arrow { width: 12px; height: 12px; }
}

/* ============ おおきさじゅん ============ */
.size-direction { display: flex; align-items: center; gap: 10px; font-weight: var(--fw); font-size: clamp(16px, 2.8vmin, 22px); padding: 6px 16px; border-radius: var(--radius-pill); background: rgba(255, 250, 242, 0.85); }
.size-bar { width: clamp(110px, 34vmin, 300px); height: 26px; background: linear-gradient(90deg, #f5c8b0, var(--color-primary)); clip-path: polygon(0 75%, 100% 0, 100% 100%, 0 100%); border-radius: 4px; }
.size-direction.down .size-bar { background: linear-gradient(90deg, var(--color-primary), #f5c8b0); clip-path: polygon(0 0, 100% 75%, 100% 100%, 0 100%); }
.size-row { align-items: flex-end; flex-wrap: nowrap; }
.size-row .slot, .size-piece { --piece: clamp(56px, min(22vmin, calc((100vw - 40px) / var(--n, 5) - 34px)), 140px); } /* すき間ぶんを引いて、横にはみ出さない */
.size-row .slot { align-items: flex-end; }
.size-guide { width: calc(var(--s) * 70%); aspect-ratio: 1; border-radius: 50%; border: 3px dotted rgba(91, 70, 54, 0.25); margin-bottom: 8%; flex: none; }
.size-piece { --fill: 88%; align-items: flex-end; padding-bottom: 6px; }
.size-piece > .size-art { width: calc(var(--s) * 88%); height: calc(var(--s) * 88%); }
.slot > .size-piece.placed { display: flex; justify-content: center; align-items: flex-end; }

/* ============ はんぶんパズル ============ */
.half-board { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2.6vmin, 26px); }
.half-pair {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-blob);
  background: var(--color-card);
  border: var(--line-w) solid rgba(91, 70, 54, 0.22);
  box-shadow: var(--shadow-block);
  transition: gap var(--dur-medium) var(--ease-out);
}
.half-left, .half-slot, .half-piece { --piece: clamp(96px, 24vmin, 150px); width: calc(var(--piece) * 0.56); height: var(--piece); }
.half-left { display: flex; }
.half-slot { border-radius: 10px var(--radius-medium) var(--radius-medium) 10px; }
.half-piece { --fill: 100%; padding: 4px 4px 4px 0; border-radius: 10px var(--radius-medium) var(--radius-medium) 10px; }
.half-piece > * { width: 100%; height: 100%; }
.half-pair.joined { gap: 0; border-color: var(--color-success); animation: bounce 0.45s var(--ease-out); }
.half-pair.joined .half-slot { border-color: transparent; background: transparent; }

/* ============ みちをつなごう ============ */
.game-road { --cell: min(calc((100vw - 64px) / var(--w)), calc((100vh - 460px) / var(--h)), 112px); }
@supports (height: 100dvh) { .game-road { --cell: min(calc((100vw - 64px) / var(--w)), calc((100dvh - 460px) / var(--h)), 112px); } }
.road-wrap { padding: 10px; background: var(--color-card); border-radius: var(--radius-large); border: var(--line-w) solid rgba(91, 70, 54, 0.22); box-shadow: var(--shadow-block); }
.road-grid { position: relative; display: grid; grid-template-columns: repeat(var(--w), max(var(--cell), 48px)); grid-auto-rows: max(var(--cell), 48px); border-radius: var(--radius-small); overflow: hidden; }
.road-cell { width: 100%; height: 100%; }
.road-slot { border-radius: 10px; border-width: var(--line-w); background: rgba(255, 255, 255, 0.55); }
.road-slot.filled { background: transparent; }
.road-slot > .piece.placed { --fill: 100%; border-radius: 0; }
.road-piece { --piece: clamp(60px, var(--cell), 100px); --fill: 100%; overflow: hidden; border-radius: var(--radius-small); }
.road-car { position: absolute; width: calc(max(var(--cell), 48px) * 0.82); height: calc(max(var(--cell), 48px) * 0.82); pointer-events: none; z-index: 2; filter: drop-shadow(0 3px 0 rgba(91, 70, 54, 0.2)); }
.road-car.arrived { animation: bounce 0.6s var(--ease-out) 2; }

/* ============ おぼえてもどそう ============ */
.game-memory { --mc: min(calc((100vw - 72px) / var(--cols, 3)), calc((100vh - 420px) / var(--rows, 2)), 132px); }
@supports (height: 100dvh) { .game-memory { --mc: min(calc((100vw - 72px) / var(--cols, 3)), calc((100dvh - 420px) / var(--rows, 2)), 132px); } }
.memory-wrap { padding: 12px; background: var(--color-card); border-radius: var(--radius-large); border: var(--line-w) solid rgba(91, 70, 54, 0.22); box-shadow: var(--shadow-block); }
.memory-grid { display: grid; grid-template-columns: repeat(var(--cols), max(var(--mc), 64px)); gap: 10px; }
.memory-cell { --piece: max(var(--mc), 64px); width: var(--piece); height: var(--piece); border-style: solid; border-width: var(--line-w); border-color: rgba(91, 70, 54, 0.14); background: #fbf1e2; }
.memory-show, .memory-ghost { width: 80%; height: 80%; }
.memory-ghost { position: absolute; opacity: 0.35; pointer-events: none; }
.memory-grid.hiding .memory-cell { animation: flip 0.6s ease-in-out; }
@keyframes flip { 50% { transform: scaleX(0.05); } }
.btn-peek { flex: none; }
.memory-tray:empty { visibility: hidden; } /* 見ているあいだは からっぽの おぼんを出さない */

/* ----- 低い画面（横向きスマホなど） ----- */
@media (max-height: 520px) {
  :root { --piece: clamp(54px, 15vh, 90px); }
  .game-hint { min-height: 0; padding-top: 2px; }
  .hint-mascot { width: 34px; height: 36px; }
  .game-hint .speech { font-size: 15px; padding: 3px 12px 4px; }
  .game-bar { padding-top: 6px; }
  .tray-row { padding: 6px; min-height: calc(var(--piece) + 14px); }
  .result-card { padding: 12px 16px; gap: 6px; }
  .result-mascot { width: 64px; }
  /* 横向きスマホ：高さが足りないので、箱・空・フィールドを低く */
  .ball-boxes { --bw: clamp(76px, 24vh, 120px); padding-top: 10px; }
  .ball-boxes.count-4, .ball-boxes.count-5, .ball-boxes.count-6 { --bw: clamp(66px, 20vh, 100px); }
  .ball-field { min-height: 0; margin: 4px 0 0; }
  .ball-lg { width: clamp(40px, 11vh, 60px); height: clamp(40px, 11vh, 60px); }
  .ball-md { width: clamp(36px, 10vh, 54px); height: clamp(36px, 10vh, 54px); }
  .ball-sm { width: clamp(32px, 9vh, 48px); height: clamp(32px, 9vh, 48px); }
  .place-row { min-height: 0; }
  /* みちをつなごう：道と おぼんを 横にならべる */
  .game-road { flex-direction: row; justify-content: center; gap: 16px; --cell: min(calc((100vh - 190px) / var(--h)), calc((100vw - 380px) / var(--w)), 90px); }
  .road-grid { grid-template-columns: repeat(var(--w), max(var(--cell), 40px)); grid-auto-rows: max(var(--cell), 40px); }
  .road-car { width: calc(max(var(--cell), 40px) * 0.82); height: calc(max(var(--cell), 40px) * 0.82); }
  .road-tray { width: auto; max-width: 300px; --piece: clamp(52px, 15vh, 70px); }
  /* おぼえてもどそう：ます目と おぼんを 横にならべる（3×3 でも おぼんが画面の外に出ない） */
  .game-memory { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px 16px; --mc: min(calc((100vh - 230px) / var(--rows, 2)), calc((100vw - 400px) / var(--cols, 3)), 100px); }
  .memory-grid { grid-template-columns: repeat(var(--cols), max(var(--mc), 44px)); gap: 6px; }
  .memory-cell { --piece: max(var(--mc), 44px); }
  .memory-wrap { padding: 8px; }
  .memory-tray { width: auto; max-width: 320px; --piece: clamp(52px, 15vh, 70px); }
}

@media (prefers-reduced-motion: reduce) {
  .tray-row > .piece.draggable:not(.drag-off) { animation: none; }
}