/* =========================================================
   新しいデザインの共通部品（design-reference.png・ホーム・かべをすりぬけろ が基準）
   木のおもちゃ・丸み・厚み・やわらかい影・押すと沈む。すべての画面で同じに見えるように。
   このファイルは base.css / screens.css / games.css のあとに読みます（上書き）。
   ========================================================= */

/* ----- 画面と世界（背景は .world、その上に UI） ----- */
.world-screen { isolation: isolate; overflow: hidden; }
.world-screen > header, .world-screen > .timer, .world-screen > .game-hint, .world-screen > .game-area,
.world-screen > .learn-stage, .world-screen > .list-scroll, .world-screen > .parent-scroll { position: relative; z-index: 1; }

/* なか（へや・つくえ） */
.world.indoor > div { position: absolute; }
.w-wall {
  inset: 0;
  background:
    radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.6) 0 4px, transparent 5px) 0 0 / 46px 46px,
    linear-gradient(to bottom, #fde9d2, #f9dcc0 60%);
}
.w-window { width: clamp(110px, 18vw, 230px); aspect-ratio: 100 / 90; left: 7%; top: 9%; filter: drop-shadow(0 6px 6px rgba(80, 50, 20, 0.18)); }
.w-window svg { display: block; width: 100%; height: 100%; }
.w-floor {
  left: 0; right: 0; bottom: 0; height: 38%;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12% - 2px), rgba(120, 72, 30, 0.18) calc(12% - 2px) 12%),
    linear-gradient(to bottom, #e9b97c, #d9a061);
  box-shadow: 0 -8px 0 #f6e2c8, 0 -11px 0 #d9a86a;
}
.w-rug { left: 50%; bottom: 4%; width: min(70%, 700px); height: 20%; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, #bfe0ff 0 30%, #9ecbf4 31% 55%, #ffd7e4 56% 75%, #f7b9cc 76%); opacity: 0.85; }
.w-table {
  left: -4%; right: -4%; bottom: 0; height: 74%;
  border-radius: 40px 40px 0 0;
  background:
    repeating-linear-gradient(176deg, transparent 0 34px, rgba(140, 86, 40, 0.1) 34px 36px),
    linear-gradient(to bottom, #f0c48a, #e1a866 70%, #d39a58);
  box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.35), 0 -6px 18px rgba(80, 50, 20, 0.15);
}
/* そと の種類 */
.w-bunting { left: -2%; right: -2%; top: 0; height: clamp(34px, 6vh, 60px); }
.w-bunting svg, .w-stars svg, .w-town svg { display: block; width: 100%; height: 100%; }
.w-town { left: 0; right: 0; top: calc(var(--hz) - 9%); height: 8%; }
.world-evening .w-sky { background: linear-gradient(to bottom, #8f9fe0 0%, #f5a3a8 calc(var(--hz) * 0.6), #ffd59a var(--hz)); }
.world-evening .w-ground { background: linear-gradient(to bottom, #9ac476, #78a85c); }
.world-evening .w-hills { filter: hue-rotate(-12deg) saturate(0.8) brightness(0.92); }
.world-evening .w-trees { filter: brightness(0.82) saturate(0.9) drop-shadow(0 6px 6px rgba(40, 30, 60, 0.25)); }
.w-sun { width: clamp(70px, 12vmin, 130px); aspect-ratio: 1; left: 64%; top: calc(var(--hz) - 12%); border-radius: 50%; background: radial-gradient(circle, #fff3c4, #ffc36a 60%, rgba(255, 170, 90, 0) 72%); }
.world-night .w-sky { background: linear-gradient(to bottom, #1d2457 0%, #39408a calc(var(--hz) * 0.7), #5c5fa8 var(--hz)); }
.world-night .w-ground { background: linear-gradient(to bottom, #4c6b5a, #344d42); }
.world-night .w-hills { filter: brightness(0.45) saturate(0.6); }
.world-night .w-trees { filter: brightness(0.4) saturate(0.6); }
.world-night .w-flowers { opacity: 0.4; }
.w-stars { left: 0; right: 0; top: 0; height: var(--hz); animation: twinkle 3s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: 0.6; } }
.w-moon { width: clamp(46px, 8vmin, 80px); aspect-ratio: 1; right: 12%; top: 8%; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #fffbe0, #ffe9a0 70%); box-shadow: 0 0 30px rgba(255, 240, 180, 0.6); }

/* ボタンの見た目は base.css（.btn / .btn-primary …）。ここでは上書きしない（.home-card などの色が消えないように） */

/* ----- 吹き出し・バッジ・お知らせ・ダイアログ ----- */
.speech { background: #fffdf6; border-color: #d9a462; color: #6b4426; box-shadow: 0 4px 0 #e3c294, 0 8px 14px rgba(70, 50, 20, 0.15); }
.talk-mascot .chara { width: 100%; height: 100%; }
.badge-new {
  background: linear-gradient(to bottom, #ff8fa0, #f0607a);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 2px #c94a62, 0 4px 0 2px #b23f56;
  font-weight: 900;
}
.toast {
  background: linear-gradient(to bottom, #fffdf6, #f8e6c6);
  border: 3px solid #d99a55;
  color: #6b4426;
  box-shadow: inset 0 3px 0 #fff, 0 6px 0 #b97a3c, 0 12px 20px rgba(70, 50, 20, 0.25);
}
.unlock-icon { background: linear-gradient(#fffdf6, #fbe7c6); border: 2.5px solid #d99a55; border-radius: 16px; }
.modal-backdrop { background: rgba(80, 55, 30, 0.38); }
.modal {
  position: relative;
  color: #6b4426;
  border: 4px solid #b27843;
  border-radius: 26px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 30px, rgba(150, 95, 45, 0.08) 30px 32px),
    linear-gradient(to bottom, #fff7e8, #fbe6c4);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.7), 0 8px 0 #a06a37, 0 18px 30px rgba(50, 30, 10, 0.3);
}
.modal-title { color: #7a4a24; font-weight: 900; }

/* ----- ゲームの上の部分：もどる・名前の札・レベル・説明の看板 ----- */
.game-bar { padding-top: 10px; }

.game-hint { padding-top: 0; min-height: 0; }
.game-hint .talk-mascot { display: none; }
.game-hint .speech {
  padding: 0.3em 1.2em 0.36em;
  font-size: clamp(17px, 3.2vmin, 26px);
  font-weight: 900;
  color: #7a4a24;
  border-radius: 0.6em;
  border: 3px solid #b27843;
  background: repeating-linear-gradient(to bottom, transparent 0 0.9em, rgba(150, 95, 45, 0.12) 0.9em 0.98em), linear-gradient(to bottom, #fbdcaa, #efbf7f 60%, #e2a865);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), 0 5px 0 #a06a37, 0 9px 14px rgba(70, 50, 20, 0.22);
}
.game-hint .speech::before { display: none; }
@media (min-width: 700px) and (min-height: 600px) { .game-hint { margin-top: -66px; margin-bottom: 14px; } }

.timer {
  height: 18px;
  margin: 4px clamp(60px, 14vw, 160px) 6px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #c99a62, #e2b67e);
  border: 2.5px solid #9a6534;
  box-shadow: inset 0 3px 4px rgba(80, 40, 10, 0.35), 0 3px 0 rgba(255, 255, 255, 0.5);
}
.timer-fill { background: linear-gradient(to bottom, #b6ef8a, #6cc35a); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45); }
.timer.low .timer-fill { background: linear-gradient(to bottom, #ffd98a, #ffb43a); }
.game-area::before { background: none; }

/* ----- 動かす物・置く場所・おぼん ----- */
.piece { background: transparent; border: 0; box-shadow: none; border-radius: 20px; }
.piece::after { /* 床の影：少し浮いている = 持てる */
  content: '';
  position: absolute; left: 18%; right: 18%; bottom: -4%; height: 10%;
  border-radius: 50%;
  background: rgba(70, 50, 20, 0.22);
  z-index: -1;
}
.piece.placed::after, .drag-layer > .piece::after { display: none; }
.piece .art { filter: none; }
.piece.draggable:not(.drag-off):not(.dragging):active { transform: translateY(2px); box-shadow: none; }
.tray-row > .piece.draggable:not(.drag-off) { animation: piece-idle 3s ease-in-out infinite; }
@keyframes piece-idle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.drag-layer > .dragging { filter: drop-shadow(0 16px 10px rgba(70, 50, 20, 0.3)); }
.slot {
  border: 3px dashed rgba(255, 255, 255, 0.9);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25));
  box-shadow: inset 0 3px 8px rgba(80, 50, 20, 0.15), 0 0 0 2px rgba(150, 100, 50, 0.18);
  border-radius: 22px;
}
.slot.drop-hover, .place.drop-hover { border-color: #fff27a; background-color: rgba(255, 246, 180, 0.6); box-shadow: 0 0 0 4px rgba(255, 220, 90, 0.6), 0 0 22px rgba(255, 230, 120, 0.8); transform: scale(1.06); }
.slot.filled { border-color: transparent; background: transparent; box-shadow: none; }
.slot > .piece.placed { background: transparent; }
.nope { animation: nope 0.42s ease-in-out; }
.tray-row {
  background:
    repeating-linear-gradient(to bottom, transparent 0 22px, rgba(150, 95, 45, 0.1) 22px 24px),
    linear-gradient(to bottom, #f8dcae, #e9bc80);
  border: 3px solid #c08a50;
  border-radius: 26px;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.5), inset 0 -6px 0 rgba(150, 90, 40, 0.15), 0 6px 0 #a87038, 0 12px 18px rgba(70, 50, 20, 0.2);
}

/* ----- 結果：ゲームの世界のまま 看板・星・くま／うさぎ・ボタン ----- */
.result-overlay {
  background: radial-gradient(ellipse 90% 70% at 50% 40%, rgba(255, 252, 240, 0.25), rgba(255, 248, 230, 0.55));
  display: block;
  padding: 0;
  animation: fade-in 0.4s ease-out;
}
.result-overlay.failed { background: rgba(255, 248, 235, 0.35); }
.result-top {
  position: absolute; z-index: 3;
  left: 50%; top: calc(12px + env(safe-area-inset-top));
  translate: -50% 0;
  width: min(92vw, 640px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.result-sign { 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; } }
.result-sign .ws-board { padding: 0.12em 0.8em 0.2em; white-space: nowrap; }
.result-sign-in { display: flex; flex-direction: column; align-items: center; line-height: 1.08; }
.result-sign-in.fail { font-size: 0.72em; line-height: 1.25; }
.result-title { margin: 0; font-size: 1em; letter-spacing: 0.06em; padding: 0; }
.result-sign .result-stars { display: flex; gap: 0.06em; margin: -0.78em 0 0.04em; }
.result-sign .result-stars .star { width: 0.82em; height: 0.82em; color: inherit; animation: star-in 0.5s var(--ease-pop) both; animation-delay: calc(0.55s + var(--i) * 0.16s); }
.result-sign .result-stars .star:nth-child(2) { translate: 0 -0.2em; }
.retry-a { color: #7a4a24; }
.retry-b { color: #ef5a3c; -webkit-text-stroke: 0.1em #fff; paint-order: stroke fill; }
.result-sub, .result-detail, .result-unlock {
  margin: 0;
  padding: 8px 18px;
  border-radius: 18px;
  background: rgba(255, 252, 244, 0.94);
  border: 2.5px solid #e2b77c;
  box-shadow: 0 4px 0 #d1a066;
  font-size: clamp(15px, 2.4vmin, 20px);
  font-weight: 800;
  color: #6b4426;
  text-align: center;
  animation: rise-in 0.4s var(--ease-out) 0.5s both;
}
.result-unlock { display: flex; align-items: center; gap: 10px; border-style: solid; border-color: #f0a35c; background: #fff6dc; }
.result-chara { position: absolute; z-index: 2; bottom: calc(12px + env(safe-area-inset-bottom)); width: clamp(84px, 17vmin, 170px); aspect-ratio: 120 / 140; animation: chara-up 0.6s var(--ease-pop) 0.3s both; }
.result-chara.l { left: 2%; }
.result-chara.r { right: 2%; aspect-ratio: 120 / 150; animation-delay: 0.45s; }
@keyframes chara-up { from { translate: 0 70%; opacity: 0; } }
.result-actions {
  position: absolute; z-index: 3;
  left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  translate: -50% 0;
  width: auto; margin: 0;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
  animation: rise-in 0.4s var(--ease-out) 0.8s both;
}
.result-actions .btn { white-space: nowrap; }
.result-actions .btn-primary { order: 0; flex: none; max-width: none; }

.confetti-piece { width: 11px; height: 14px; opacity: 0.8; }
@media (max-height: 520px) and (orientation: landscape) {
  .result-sign { font-size: clamp(24px, 9vh, 40px); }
  .result-actions { left: auto; right: 12px; translate: none; flex-direction: column; bottom: auto; top: 50%; translate: 0 -50%; }
  .result-chara { width: clamp(70px, 22vh, 110px); }
  .result-top { gap: 6px; }
}
@media (max-width: 480px) {
  .result-actions .btn-big { min-height: 62px; }
  .result-chara { bottom: 100px; width: 80px; }
}

/* ----- あそぶ一覧（まなぶ一覧と同じ質感・すこし わくわく） ----- */
.play-list > .world { --hz: 30%; --tree-h: 34%; --tree-y: 4%; --fence-h: 7%; }
.play-list .list-scroll { position: relative; z-index: 1; display: flex; align-items: center; padding-top: 14px; }

@keyframes pic-bob { 50% { translate: 0 -3px; rotate: -2deg; } }

.lock-hint-icon { width: clamp(18px, calc(var(--tile) * 0.16), 26px); height: clamp(18px, calc(var(--tile) * 0.16), 26px); }
.lock-progress .dot { width: 8px; height: 8px; background: #e6dccd; border-color: rgba(150, 110, 70, 0.4); }
.lock-progress .dot.on { background: #ffb43a; border-color: #c98a1c; }
.unlock-fx { width: 44px; height: 44px; padding: 0; border: 0; background: none; }
.wiggle { animation: wiggle 0.5s ease-in-out; }
@keyframes wiggle { 25% { rotate: -4deg; } 50% { rotate: 3deg; } 75% { rotate: -2deg; } }
@media (orientation: portrait) {
  .play-list > .world { --hz: 22%; --tree-h: 20%; --tree-y: 2%; --fence-h: 4%; }
}

/* ----- まなぶ：カテゴリの世界 ----- */
.learn-screen { overflow: hidden; }
.learn-screen > .world { --hz: 30%; --tree-h: 30%; --tree-y: 3%; --fence-h: 6%; }
.learn-stage { flex: 1; min-height: 0; position: relative; padding: 4px var(--gutter) calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.learn-stage > * { flex: 1; min-height: 0; }
.learn-buddy { position: absolute; z-index: 2; left: 10px; bottom: calc(6px + env(safe-area-inset-bottom)); width: clamp(60px, 11vmin, 110px); aspect-ratio: 120 / 140; pointer-events: auto; }
.learn-buddy.rabbit { aspect-ratio: 120 / 150; }
.learn-field {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), var(--cell, 120px));
  grid-auto-rows: calc(var(--cell, 120px) * var(--asp, 1));
  justify-content: center; align-content: center;
  gap: 14px;
  height: 100%;
}
.learn-field.balloons { --asp: 1.35; }
.learn-item {
  position: relative;
  padding: 0; border: 0; background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation;
  animation: rise-in 0.45s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.item-art { position: relative; z-index: 1; width: 86%; height: 86%; display: flex; }
.item-art svg { width: 100%; height: 100%; }
.learn-item.boing .item-art, .learn-item.boing.kana-tile, .learn-item.boing.num-tile, .num-block.boing, .num-apple.boing { animation: boing 0.5s var(--ease-pop); }
@keyframes boing { 0% { transform: scale(1); } 25% { transform: scale(1.18, 0.86) translateY(4%); } 55% { transform: scale(0.94, 1.1) translateY(-12%); } 100% { transform: none; } }
.learn-item.boing::after { /* さわった物が ふわっと光る */
  content: ''; position: absolute; inset: 4%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 170, 0.9), rgba(255, 246, 170, 0) 70%);
  animation: glow-out 0.8s ease-out forwards;
}
@keyframes glow-out { from { opacity: 1; scale: 0.7; } to { opacity: 0; scale: 1.25; } }
/* 足もとの台：草・水・道・線路・海・空・お皿・たな */
.item-base { position: absolute; z-index: 0; left: 6%; right: 6%; bottom: 4%; height: 20%; border-radius: 50%; }
.base-grass .item-base { background: radial-gradient(ellipse at 50% 40%, #b6e58c, #7cc356 70%, rgba(124, 195, 86, 0)); }
.base-water .item-base { height: 46%; bottom: 8%; background: radial-gradient(ellipse at 50% 40%, #c4ecff, #6cbcf0 70%, #4f9fd6); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5); }
.base-branch .item-base { left: 0; right: 10%; height: 9%; bottom: 22%; border-radius: 10px; background: linear-gradient(to bottom, #b07a48, #7a4e28); }
.base-road .item-base { left: -4%; right: -4%; height: 24%; border-radius: 10px; background: linear-gradient(to bottom, #9aa1ad, #7b828e); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12); }
.base-road .item-base::after { content: ''; position: absolute; left: 6%; right: 6%; top: 46%; height: 3px; background: repeating-linear-gradient(90deg, #fff 0 12px, transparent 12px 22px); }
.base-rail .item-base { left: -4%; right: -4%; height: 22%; border-radius: 6px; background: linear-gradient(to bottom, transparent 22%, #8a8f99 22% 30%, transparent 30% 70%, #8a8f99 70% 78%, transparent 78%), repeating-linear-gradient(90deg, #a9774a 0 9px, transparent 9px 20px), #cdbf9c; }
.base-sea .item-base { left: -4%; right: -4%; height: 32%; border-radius: 40% 40% 12px 12px; background: radial-gradient(ellipse at 50% 0, #b4e3ff, #5aaee8 70%); box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.6); }
.base-sky .item-base { height: 34%; bottom: 10%; background: radial-gradient(ellipse, #fff 0 40%, rgba(255, 255, 255, 0) 70%); }
.base-plate .item-base { height: 26%; background: radial-gradient(ellipse at 50% 40%, #fff 0 45%, #e3e6ec 62%, #c8ccd6 66%, rgba(0, 0, 0, 0) 70%); }
.base-plank .item-base { left: -6%; right: -6%; height: 12%; bottom: 6%; border-radius: 6px; background: linear-gradient(to bottom, #e8b97c, #c88b4c); box-shadow: 0 5px 0 #9a6534, 0 9px 10px rgba(70, 40, 10, 0.2); }
.learn-field.balloons .learn-item .item-art { width: 92%; height: 96%; animation: balloon-bob 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.37s); }
@keyframes balloon-bob { 50% { translate: 0 -5%; rotate: 2deg; } }
.learn-field.balloons .learn-item.boing .item-art { animation: boing 0.5s var(--ease-pop); }
.learn-field.vehicles .learn-item.boing .item-art { animation: drive 0.7s var(--ease-out); }
@keyframes drive { 0% { transform: none; } 40% { transform: translateX(14%); } 70% { transform: translateX(-4%); } 100% { transform: none; } }
/* かたち：木の型はめ台 */
.shape-board { display: flex; padding: clamp(10px, 2vmin, 22px); border-radius: 30px; background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(150, 95, 45, 0.08) 40px 42px), linear-gradient(to bottom, #f6d49e, #e2ad6a); border: 4px solid #b27843; box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.5), inset 0 -8px 0 rgba(150, 90, 40, 0.2), 0 8px 0 #9a6534, 0 16px 24px rgba(70, 50, 20, 0.25); }
.shape-board > .learn-field { flex: 1; }
/* ピクニックの しきもの・たな */
.art-world { display: flex; }
.art-world > .learn-field { flex: 1; }
.world-picnic { border-radius: 30px; background: repeating-conic-gradient(#ffd0cc 0 25%, #fffaf2 0 50%) 0 0 / 44px 44px; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.6), 0 10px 20px rgba(70, 50, 20, 0.2); padding: 10px; }
/* 名札 */
.name-tag {
  position: absolute; z-index: 5;
  translate: -50% -100%;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 16px 6px;
  font-size: clamp(22px, 4.2vmin, 38px);
  font-weight: 900; color: #7a4a24; white-space: nowrap;
  border-radius: 16px;
  border: 3px solid #b27843;
  background: linear-gradient(to bottom, #fbdcaa, #efbf7f 60%, #e2a865);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), 0 5px 0 #a06a37, 0 9px 14px rgba(70, 50, 20, 0.25);
  pointer-events: none;
  animation: tag-pop 0.35s var(--ease-pop) both;
}
.name-tag.out { opacity: 0; transition: opacity 0.3s; }
.name-tag-pic { width: 1.4em; height: 1.4em; display: inline-flex; }
@keyframes tag-pop { from { scale: 0.4; opacity: 0; } }
/* すうじ */
.num-world { display: flex; flex-direction: column; gap: 12px; }
.num-top { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 48px); }
.num-block {
  flex: none;
  width: min(32vmin, 260px); aspect-ratio: 1;
  border-radius: 26px; border: 4px solid #fff;
  background: linear-gradient(to bottom, #ffc7d2, #ff8fa6);
  box-shadow: 0 0 0 3px #d9607c, inset 0 6px 0 rgba(255, 255, 255, 0.5), inset 0 -10px 0 rgba(150, 40, 70, 0.18), 0 10px 0 3px #c24f6a, 0 18px 24px rgba(70, 40, 30, 0.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.num-face { font-size: min(20vmin, 170px); font-weight: 900; color: #fff; line-height: 1; -webkit-text-stroke: 0.05em #c94a68; paint-order: stroke fill; text-shadow: 0 0.05em 0 #b23f5c; }
.num-tray { flex: 0 1 auto; padding: 14px; border-radius: 28px; background: radial-gradient(ellipse at 50% 40%, #fff, #f1f3f8); border: 3px solid #e0e3ea; box-shadow: inset 0 4px 10px rgba(80, 80, 100, 0.12), 0 8px 16px rgba(70, 50, 20, 0.2); }
.num-apples { display: grid; grid-template-columns: repeat(min(var(--n), 5), min(11vmin, 84px)); gap: 6px; justify-content: center; }
.num-apple { padding: 0; border: 0; background: none; aspect-ratio: 1; cursor: pointer; animation: apple-drop 0.45s var(--ease-pop) both; animation-delay: calc(var(--i) * 70ms); }
.num-apple svg { width: 100%; height: 100%; }
.num-apple.counted { filter: drop-shadow(0 0 8px #fff27a); }
@keyframes apple-drop { from { translate: 0 -60%; opacity: 0; } }
.num-tiles { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.num-tile, .kana-tile, .group-tab {
  min-width: clamp(46px, 8vmin, 72px); height: clamp(46px, 8vmin, 72px);
  padding: 0 0.3em;
  border-radius: 14px; border: 3px solid #b27843;
  font-size: clamp(24px, 4.6vmin, 40px); font-weight: 900; color: #7a4a24;
  background: linear-gradient(to bottom, #fde2b4, #eebd7e);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 5px 0 #9a6534, 0 9px 12px rgba(70, 50, 20, 0.2);
  cursor: pointer;
}
.num-tile.current, .group-tab.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); }
/* ひらがな・カタカナ：木札と 絵本 */
.kana-world { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.8vh, 18px); }
.group-tabs { flex: none; display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding: 4px 4px 10px; scrollbar-width: none; }
.group-tab { min-width: clamp(42px, 7vmin, 60px); height: clamp(42px, 7vmin, 60px); font-size: clamp(20px, 3.8vmin, 30px); flex: none; }

.book-noimg { margin: auto; font-size: min(12vmin, 90px); font-weight: 900; color: #e7d8bf; }

@keyframes page-in { from { transform: perspective(600px) rotateY(-50deg); transform-origin: 0 50%; opacity: 0.4; } }

.kana-row { flex: none; display: flex; gap: clamp(8px, 2vw, 18px); justify-content: center; }
.kana-tile { width: clamp(58px, 12vmin, 104px); height: clamp(58px, 12vmin, 104px); font-size: clamp(32px, 7vmin, 62px); border-radius: 18px; }
/* からだ */
.body-world { display: flex; align-items: center; justify-content: center; }
.body-figure { position: relative; height: 100%; max-height: 100%; aspect-ratio: 200 / 300; max-width: 100%; }
.body-figure > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.body-spots { position: absolute; inset: 0; }
.body-spot { position: absolute; translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; animation: none; }
.body-spot::before { /* さわれる場所：うすい光の輪が ときどき ふわっと出る */
  content: ''; position: absolute; inset: 18%; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 0 10px rgba(255, 220, 120, 0.7);
  opacity: 0; animation: spot-pulse 3.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 0.3s);
}
@keyframes spot-pulse { 0%, 60%, 100% { opacity: 0; scale: 0.8; } 75% { opacity: 1; scale: 1; } }
.body-spot.boing::after { inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 140, 0.9), rgba(255, 220, 90, 0) 70%); }
@media (max-height: 520px) and (orientation: landscape) {
  .learn-stage { padding-top: 0; }
  .num-block { width: min(40vh, 200px); }
  .num-face { font-size: min(26vh, 130px); }
  .num-apples { grid-template-columns: repeat(min(var(--n), 5), min(13vh, 60px)); }
  .learn-buddy { width: 56px; }
}
@media (orientation: portrait) {
  .num-top { flex-direction: column; }
  .num-block { width: min(40vw, 30vh, 220px); }
  .num-face { font-size: min(30vw, 22vh, 150px); }
}

/* ----- 保護者画面（大人向けでも 同じ世界観） ----- */
.parent-section { background: rgba(255, 252, 244, 0.95); border: 2.5px solid #e2b77c; box-shadow: 0 5px 0 #d1a066, 0 10px 16px rgba(70, 50, 20, 0.12); border-radius: 22px; }
.parent-lead { background: rgba(255, 252, 244, 0.85); padding: 8px 14px; border-radius: 14px; }
.switch { background: linear-gradient(#d8cdbd, #e9e0d2); border-color: #b27843; }
.switch-input:checked + .switch { background: linear-gradient(#8fd774, #5fb84c); }
.switch::after { border-color: #b27843; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }

/* =========================================================
   ゲームごとの世界（見た目・成功の動き）。大きさ・並びは games.css
   ========================================================= */

/* ----- いろのボールわけ：おもちゃ部屋・ふたに穴のある おもちゃ箱 ----- */
.ball {
  border: 0;
  background:
    radial-gradient(circle at 33% 27%, #fff 0 7%, rgba(255, 255, 255, 0.55) 8% 15%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 50% 50%, var(--c) 55%, color-mix(in srgb, var(--c) 72%, #000) 100%);
  box-shadow: inset -5px -7px 10px rgba(0, 0, 0, 0.16), 0 7px 6px rgba(70, 50, 20, 0.22);
}
.ball.is-white { background: radial-gradient(circle at 33% 27%, #fff 0 20%, #f4f4f8 45%, #cfd3de 100%); box-shadow: inset -5px -7px 10px rgba(60, 70, 100, 0.2), 0 7px 6px rgba(70, 50, 20, 0.22); }
.ball-box { cursor: pointer; }
.box-back { position: absolute; left: 3%; right: 3%; bottom: 60%; height: 14%; border-radius: 8px 8px 0 0; background: #8a5a30; }
.box-front {
  height: 72%;
  border: 3px solid #9a6534;
  border-radius: 10px 10px 18px 18px;
  background:
    linear-gradient(to bottom, transparent 0 30%, var(--c) 30% 70%, transparent 70%),
    repeating-linear-gradient(to bottom, transparent 0 12px, rgba(120, 72, 30, 0.12) 12px 13px),
    linear-gradient(to bottom, #f6d49e, #e2ad6a);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), inset 0 -8px 0 rgba(120, 70, 30, 0.18), 0 7px 0 #8a5a30, 0 12px 14px rgba(70, 50, 20, 0.25);
}
.box-label { width: 30%; border: 3px solid #fff; background: radial-gradient(circle at 34% 30%, #fff 0 12%, var(--c) 40%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }
.box-count { color: #6b4426; background: rgba(255, 252, 244, 0.9); border-radius: 10px; padding: 0 6px; }
.box-count:empty { display: none; }
.box-lid {
  left: -4%; right: -4%; top: 20%; height: 15%;
  border: 3px solid #9a6534; border-radius: 12px;
  background: radial-gradient(ellipse 22% 42% at 50% 50%, #3a2414 0 60%, color-mix(in srgb, var(--c) 70%, #fff) 64% 78%, transparent 80%), linear-gradient(to bottom, #f6d49e, #d9a061);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #8a5a30;
}
.ball-box.open .box-lid { transform: rotate(-32deg) translate(-6%, -46%); }
.ball.falling { position: absolute; z-index: 4; left: 50%; top: 0; width: calc(var(--bw) * 0.28); height: calc(var(--bw) * 0.28); translate: -50% 0; pointer-events: none; animation: ball-fall 0.5s cubic-bezier(0.5, 0, 0.9, 0.6) forwards; }
@keyframes ball-fall { 0% { transform: translateY(-140%) scale(1.25); opacity: 1; } 70% { transform: translateY(40%) scale(0.75); opacity: 1; } 100% { transform: translateY(70%) scale(0.4); opacity: 0; } }
.ball-box.drop-hover .box-lid { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #8a5a30, 0 0 0 4px rgba(255, 230, 120, 0.8), 0 0 18px rgba(255, 230, 120, 0.9); }
.ball-box.perfect .box-front { box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), 0 7px 0 #8a5a30, 0 0 0 4px rgba(120, 210, 110, 0.7); }
.ball-field.ended .ball { opacity: 0.4; }
.color-chip { border: 2.5px solid #e2b77c; background: #fffdf6; color: #6b4426; }
.color-chip.perfect { border-color: #7cc35a; background: #effae6; }

/* ----- どうぶつのおうち：草原の中の いけ・木・いぬごや・ぼくじょう ----- */
.place-row.layout-homes { align-items: end; }
.home-place { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 26px; justify-content: flex-end; }
.home-place .place-art { width: 100%; }
.home-place .place-art .art { width: 100%; height: 100%; max-height: 100%; }
.home-place .place-items { position: absolute; left: 50%; top: 58%; translate: -50% -50%; gap: 0; z-index: 2; }
.home-tree .place-items { top: 46%; left: 62%; }
.home-doghouse .place-items { top: 72%; left: 45%; }
.home-farm .place-items { top: 70%; left: 34%; }
.place-items .piece.placed { width: clamp(40px, 8vmin, 70px); height: clamp(40px, 8vmin, 70px); }
.place-name {
  position: relative; z-index: 3;
  margin-top: -6px;
  padding: 2px 12px 3px;
  border-radius: 12px; border: 2.5px solid #b27843;
  background: linear-gradient(to bottom, #fbdcaa, #eebc7c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 3px 0 #a06a37;
  color: #7a4a24; font-weight: 900; font-size: clamp(14px, 2.4vmin, 20px);
  white-space: nowrap;
}
.place.drop-hover { border-color: transparent; background: rgba(255, 246, 180, 0.35); box-shadow: 0 0 0 4px rgba(255, 220, 90, 0.6), 0 0 24px rgba(255, 230, 120, 0.8); }
.place.happy { animation: happy 0.5s var(--ease-out); }
@keyframes happy { 40% { transform: scale(1.04, 0.97); } 70% { transform: scale(0.99, 1.02); } }
/* 場所ごとの 成功の動き */
.piece.placed.go-swim { animation: snap 0.4s var(--ease-pop), swim 2.4s ease-in-out 0.4s infinite; }
@keyframes swim { 0%, 100% { translate: -22% 0; rotate: -6deg; } 50% { translate: 22% -4%; rotate: 6deg; } }
.piece.placed.go-fly { animation: fly-in 0.9s var(--ease-out), perch 1.8s ease-in-out 0.9s infinite; }
@keyframes fly-in { 0% { transform: translate(-120%, 160%) scale(0.7) rotate(-20deg); } 60% { transform: translate(10%, -30%) rotate(8deg); } 100% { transform: none; } }
@keyframes perch { 50% { translate: 0 -6%; } }
.piece.placed.go-enter { animation: enter-house 1.1s var(--ease-out) forwards; }
@keyframes enter-house { 0% { transform: translateX(-60%) scale(1); } 50% { transform: translateX(0) scale(1); } 100% { transform: translateY(-8%) scale(0.72); } }
.piece.placed.go-walk { animation: snap 0.4s var(--ease-pop), walk 2.6s ease-in-out 0.4s infinite; }
@keyframes walk { 0%, 100% { translate: -18% 0; } 25% { translate: -9% -5%; } 50% { translate: 18% 0; scale: -1 1; } 75% { translate: 9% -5%; scale: -1 1; } }
/* ----- のりものガレージ：上から 空港・線路・道路・海 の レーン ----- */
.place-row.layout-lanes { display: flex; flex-direction: column; gap: 8px; width: min(100%, 1000px); max-height: none; }
.lane { flex: 1; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 54px; padding: 0 0 0 10px; border: 0; border-radius: 18px; box-shadow: 0 5px 0 rgba(60, 50, 30, 0.2), inset 0 3px 0 rgba(255, 255, 255, 0.25); overflow: hidden; }
.lane .place-name { margin: 0; flex: none; }
.lane .place-items { flex: 1; justify-content: center; gap: 10px; }
.lane .place-items .piece.placed { width: clamp(54px, 10vmin, 96px); height: clamp(54px, 10vmin, 96px); }
.lane-runway { background: linear-gradient(to bottom, transparent 46%, #fff 46% 54%, transparent 54%) 0 0 / 60px 100%, linear-gradient(to bottom, #8fd27a 0 14%, #a2a9b5 14% 86%, #8fd27a 86%); }
.lane-runway .place-items { background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(255, 255, 255, 0.85) 30px 54px) 0 50% / 100% 6px no-repeat; }
.lane-rail { background: linear-gradient(to bottom, transparent 30%, #8a8f99 30% 36%, transparent 36% 64%, #8a8f99 64% 70%, transparent 70%), repeating-linear-gradient(90deg, #a9774a 0 12px, transparent 12px 30px), linear-gradient(#d9ccaa, #c7b48c); }
.lane-road { background: linear-gradient(to bottom, #e9ecf1 0 8%, transparent 8% 92%, #e9ecf1 92%), repeating-linear-gradient(90deg, #fff 0 26px, transparent 26px 48px) 0 50% / 100% 4px no-repeat, linear-gradient(#9aa1ad, #7f8692); }
.lane-sea { background: radial-gradient(ellipse 30px 8px at 50% 0, rgba(255, 255, 255, 0.7) 0 60%, transparent 62%) 0 30% / 70px 30px, linear-gradient(#8fd2ff, #4f9fd6); }
.piece.placed.go-drive { animation: drive-in 0.9s var(--ease-out); }
@keyframes drive-in { from { transform: translateX(-70vw); } }
.piece.placed.go-glide { animation: drive-in 1.1s cubic-bezier(0.2, 0.7, 0.3, 1); }
.piece.placed.go-sail { animation: drive-in 1.2s var(--ease-out), sail 2.4s ease-in-out 1.2s infinite; }
@keyframes sail { 50% { translate: 0 -6%; rotate: -4deg; } }
.piece.placed.go-takeoff { animation: drive-in 0.9s var(--ease-out), hover 2.2s ease-in-out 0.9s infinite; }
@keyframes hover { 0%, 100% { translate: 0 -10%; rotate: -8deg; } 50% { translate: 0 -18%; rotate: -5deg; } }
/* ----- おかたづけ：ちらかった部屋 → きれいに ----- */
.place-row.layout-room { align-items: end; max-height: 46%; }
.furniture-place { background: none; border: 0; box-shadow: none; padding: 0; justify-content: flex-end; border-radius: 20px; }
.furniture-place .place-art .art { width: 100%; height: 100%; }
.furniture-place .place-items { position: absolute; left: 50%; bottom: 26%; translate: -50% 0; gap: 0; z-index: 2; flex-wrap: nowrap; }
.piece.placed.go-tuck { animation: tuck 0.7s var(--ease-out) forwards; }
@keyframes tuck { 0% { transform: translateY(-40%) scale(1.1); } 100% { transform: scale(0.82); } }
.room-floor { position: relative; flex: 1; width: min(100%, 980px); min-height: 160px; margin-top: 8px; }
.room-floor .piece.abs { rotate: var(--r, 0deg); }
.mess { position: absolute; width: 26px; height: 18px; border-radius: 4px; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); rotate: 20deg; transition: opacity 0.6s, scale 0.6s; }
.mess-1 { width: 40px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #5ea4ee 0 80%, #f5d3a8 80%); rotate: -30deg; }
.mess-2 { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffd25a); }
.mess.gone { opacity: 0; scale: 0.2; }
.game-cleanup.sparkling::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 70%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px), radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px), radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 40% 66%, rgba(255, 250, 200, 0.9) 0 3px, transparent 4px); animation: sparkle 1.2s ease-in-out infinite alternate; }
@keyframes sparkle { from { opacity: 0.3; } to { opacity: 1; } }

/* ----- かげあわせ：夕方の庭。地面に かげ ----- */
.shadow-slot { border: 0; background: none; box-shadow: none; align-items: flex-end; }
.shadow-slot .ground-shadow { position: absolute; left: 12%; right: 12%; bottom: 2%; height: 14%; border-radius: 50%; background: radial-gradient(ellipse, rgba(40, 20, 60, 0.4), rgba(40, 20, 60, 0) 70%); }
.shadow-slot .art.silhouette { filter: brightness(0); opacity: 0.42; transition: transform 0.6s var(--ease-out), opacity 0.6s; transform-origin: 50% 100%; }
.shadow-slot.drop-hover { box-shadow: 0 0 0 4px rgba(255, 220, 120, 0.5), 0 0 24px rgba(255, 220, 140, 0.7); background: rgba(255, 240, 200, 0.2); border-radius: 50%; }
.shadow-slot.lit .art.silhouette { transform: translate(18%, 4%) skewX(-24deg) scaleY(0.85); opacity: 0.3; }
.shadow-slot.lit { animation: happy 0.5s var(--ease-out); }

/* ----- おなじならび：積み木の机と 見本の たな ----- */
.seq-board { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; }
.seq-shelf { position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 8px 18px 14px 64px; border-radius: 16px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25)); box-shadow: 0 10px 0 -2px #c88b4c, 0 12px 0 #9a6534, 0 18px 18px rgba(70, 40, 10, 0.2); }
.seq-peek { position: absolute; left: 6px; bottom: 6px; width: 52px; aspect-ratio: 120 / 140; }
.seq-sample { gap: 10px; }
.seq-cell { background: none; animation: rise-in 0.4s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms); }
.seq-arrow-down { width: 34px; height: 24px; background: linear-gradient(#ffb43a, #f08a24); clip-path: polygon(30% 0, 70% 0, 70% 45%, 100% 45%, 50% 100%, 0 45%, 30% 45%); filter: drop-shadow(0 3px 0 #b8641a); }
.seq-slots { gap: 10px; padding: 10px 14px; border-radius: 18px; background: rgba(140, 86, 40, 0.18); box-shadow: inset 0 4px 8px rgba(80, 40, 10, 0.25); }
.seq-slot { border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.28); }
.seq-num { font-size: 22px; font-weight: 900; color: rgba(255, 255, 255, 0.9); text-shadow: 0 2px 0 rgba(120, 70, 30, 0.35); }
.seq-slot.filled .seq-num { display: none; }
.seq-slots.wave .slot > .piece { animation: wave 0.6s var(--ease-out) both; }
.seq-slots.wave .slot:nth-child(2) > .piece { animation-delay: 0.12s; }
.seq-slots.wave .slot:nth-child(3) > .piece { animation-delay: 0.24s; }
.seq-slots.wave .slot:nth-child(4) > .piece { animation-delay: 0.36s; }
@keyframes wave { 40% { transform: translateY(-26%); } }
.seq-shape .art { width: 100%; height: 100%; }
.seq-shape.size-s .art { width: 62%; height: 62%; }

/* ----- おおきさじゅん：背くらべの 目もり と 床 ----- */
.size-stage { position: relative; display: flex; justify-content: center; padding: 18px 26px 0; }
.size-chart { position: absolute; inset: 0 0 6px; border-radius: 20px 20px 0 0; background: repeating-linear-gradient(to top, rgba(255, 255, 255, 0) 0 22px, rgba(255, 255, 255, 0.7) 22px 25px), linear-gradient(to right, #ffe6ee, #e6f3ff); opacity: 0.85; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.7); }
.size-stage .size-row { position: relative; gap: clamp(10px, 2vmin, 20px); padding-bottom: 8px; border-bottom: 10px solid #c88b4c; border-radius: 0 0 6px 6px; }
.size-slot { border-style: dashed; border-color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.3); }
.size-guide { border-color: rgba(150, 100, 60, 0.35); }
.size-slot.hop > .piece { animation: wave 0.5s var(--ease-out); }

/* ----- はんぶんパズル：木のパズル台 ----- */
.half-board { padding: clamp(12px, 2vmin, 22px); border-radius: 28px; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(120, 72, 30, 0.08) 46px 48px), linear-gradient(to bottom, #f2c88e, #dca363); border: 4px solid #a8743f; box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.45), 0 9px 0 #8a5a30, 0 16px 22px rgba(70, 40, 10, 0.25); }
.half-pair { gap: 6px; padding: 8px; border-radius: 18px; background: rgba(120, 72, 30, 0.22); border: 0; box-shadow: inset 0 4px 8px rgba(80, 40, 10, 0.3); }
.half-left { border-radius: 14px 4px 4px 14px; background: #fffaf0; box-shadow: 0 3px 0 #d9b583; overflow: hidden; }
.half-slot { border-color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.35); border-radius: 4px 14px 14px 4px; }
.half-piece { background: #fffaf0; border-radius: 4px 14px 14px 4px; box-shadow: 0 4px 0 #d9b583; }
.half-pair.joined { gap: 0; border: 0; animation: none; }
.half-pair.joined .half-left, .half-pair.joined .half-slot .piece { box-shadow: none; }
.half-pair.joined > * { animation: alive 1.6s ease-in-out 0.3s infinite; transform-origin: 50% 100%; }
@keyframes alive { 0%, 100% { transform: none; } 25% { transform: rotate(-3deg) translateY(-4%); } 50% { transform: none; } 75% { transform: rotate(3deg) translateY(-4%); } }

/* ----- みちをつなごう：まちの地図 ----- */
.road-wrap { padding: 10px; border-radius: 24px; background: linear-gradient(#e9c590, #d9a868); border: 3px solid #a8743f; box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), 0 8px 0 #8a5a30, 0 14px 20px rgba(70, 40, 10, 0.25); }
.road-grid { border-radius: 14px; }
.road-slot { border: 3px dashed rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.35); border-radius: 8px; }
.road-piece { border-radius: 12px; box-shadow: 0 5px 0 #6aa04a, 0 8px 10px rgba(40, 70, 30, 0.25); }
.road-car.driving::after { content: ''; position: absolute; left: -16%; top: 55%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.85); animation: puff 0.45s ease-out infinite; }
@keyframes puff { from { scale: 0.4; opacity: 0.9; } to { scale: 1.4; opacity: 0; translate: -60% -30%; } }
.road-grid.arrived { animation: happy 0.6s var(--ease-out); }

/* ----- おぼえてもどそう：テーブルと ランチョンマット・テーブルクロス ----- */
.memory-wrap { position: relative; padding: 16px; border-radius: 26px; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(120, 72, 30, 0.08) 46px 48px), linear-gradient(to bottom, #f2c88e, #dca363); border: 4px solid #a8743f; box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.45), 0 9px 0 #8a5a30, 0 16px 22px rgba(70, 40, 10, 0.25); }
.memory-cell { border: 0; border-radius: 50%; background: radial-gradient(circle, #fffaf2 0 58%, #ffd3df 60% 66%, #fff1e2 68%); box-shadow: 0 3px 0 rgba(150, 90, 40, 0.3); }
.memory-cell.drop-hover { box-shadow: 0 0 0 4px rgba(255, 220, 90, 0.7), 0 0 18px rgba(255, 230, 120, 0.9); }
.memory-cloth {
  position: absolute; inset: -10px -12px;
  z-index: 5; border-radius: 22px 22px 30px 30px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 14px, transparent 14px 28px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 0 14px, transparent 14px 28px), linear-gradient(#ff9fb4, #f07a96);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.6), 0 12px 20px rgba(70, 30, 40, 0.3);
  transform: translateY(-140%); opacity: 0;
  transition: transform 0.65s cubic-bezier(0.3, 1.2, 0.5, 1), opacity 0.3s;
  pointer-events: none;
}
.memory-cloth.down { transform: none; opacity: 1; }
.memory-cloth.up { transform: translateY(-140%); opacity: 0; transition: transform 0.6s ease-in, opacity 0.6s ease-in; }
.memory-tray.arrive .piece { animation: rise-in 0.4s var(--ease-pop) both; animation-delay: calc(var(--i, 0) * 90ms); }
.btn-peek { background: linear-gradient(to bottom, #fffdf6, #f8e6c6); }

/* ----- 調整（自己レビュー 1 回目） ----- */
.game-screen > .game-hint { order: 1; }
.game-screen > .timer { order: 2; }
.game-screen.result-shown > .game-hint, .game-screen.result-shown > .timer { visibility: hidden; }
.tray-row { width: auto; min-width: min(100%, 340px); max-width: 100%; padding: 14px 28px; }
.item-piece { --fill: 94%; }
.place-row { max-height: 58%; width: min(100%, 1100px); }
.place-row.layout-lanes { max-width: none; width: min(100%, 1100px); }
.result-actions .btn-ghost { order: 0; }
.result-actions .btn-primary { order: 1; }

.room-floor .item-piece { --piece: clamp(80px, 15vmin, 130px); }
.mess { scale: 1.6; }
/* おおきさじゅん：うしろに 背くらべの 色つきの棒（だんだん高く）＝ どっちが大きいか 見て分かる */
.size-chart { display: none; }
.size-stage { padding: 0 20px; }
.size-stage .size-row { border-bottom: 12px solid #c88b4c; box-shadow: 0 6px 0 #9a6534; }
.size-slot { border: 0; background: none; box-shadow: none; overflow: visible; }
.size-slot::before {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; z-index: 0;
  height: calc(var(--s) * 100%);
  border-radius: 12px 12px 0 0;
  background: repeating-linear-gradient(to top, transparent 0 14px, rgba(255, 255, 255, 0.7) 14px 16px), linear-gradient(to top, #ffd0dc, #ffe9b8);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.8), 0 4px 10px rgba(70, 50, 20, 0.15);
}
.size-slot.drop-hover::before { box-shadow: inset 0 0 0 3px #fff27a, 0 0 18px rgba(255, 230, 120, 0.9); }
.size-slot > * { position: relative; z-index: 1; }
.size-guide { display: none; }

.scene-night .result-overlay, .scene-evening .result-overlay { background: none; }

/* ----- 調整（自己レビュー 2 回目：5 サイズ確認の結果） ----- */
/* まなぶ：並びが画面より広がらない（flex の min-width:auto の ループを止める） */
.learn-field, .art-world > .learn-field, .shape-board > .learn-field { min-width: 0; width: 100%; overflow: visible; }
.art-world, .shape-board { min-width: 0; }
/* ひらがな・カタカナ：行のタブは 折り返して 全部見える */
.group-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; }

/* おかたづけ：家具は 行の高さに おさめる。ちらかった物は 床の中に */
.place-row { grid-template-rows: minmax(0, 1fr); }
.place-row > .place { height: 100%; min-height: 0; }
.place-row.layout-room, .place-row.layout-homes { flex: 1 1 0; }
.furniture-place .place-art, .home-place .place-art { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.furniture-place .place-art .art, .home-place .place-art .art { width: auto; max-width: 100%; height: 100%; }
.room-floor { flex: 1 1 0; min-height: 120px; }
/* かげあわせ：かげが 暗い木に まぎれないよう、足もとに 夕日の当たった 芝生 */
.shadow-row { margin-top: auto; }
.shadow-slot::before { content: ''; position: absolute; left: -8%; right: -8%; bottom: -6%; height: 36%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 236, 170, 0.75), rgba(200, 230, 140, 0.4) 55%, rgba(200, 230, 140, 0) 72%); }
.shadow-slot .art.silhouette { opacity: 0.55; }
/* スマホ縦：箱・おうちを大きく */
@media (orientation: portrait) {
  .ball-boxes { --bw: clamp(96px, 27vw, 160px); }
  .place-row.layout-homes.count-3, .place-row.layout-homes.count-4, .place-row.layout-room.count-3, .place-row.layout-room.count-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); max-height: 60%; }
}
/* スマホ横：おなじならび は おぼんを右に、おぼえてもどそう の「もういちど みる」は右下 */
@media (max-height: 520px) and (orientation: landscape) {
  .game-sequence { flex-direction: row; justify-content: center; gap: 16px; }
  .game-sequence .tray-row { flex-direction: column; min-width: 0; padding: 10px; }
  .game-sequence .seq-cell, .game-sequence .seq-slot, .game-sequence .seq-piece { --piece: clamp(46px, 14vh, 70px); }
  .game-memory .btn-peek { position: absolute; right: 12px; bottom: 10px; }
  .place-row.layout-room { max-height: 50%; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .game-hint { margin-top: -58px; margin-bottom: 6px; }
  .game-hint .speech { font-size: 15px; }
  .room-floor .item-piece { --piece: clamp(56px, 17vh, 80px); }
  .room-floor { min-height: 90px; }
}
.room-floor .piece.abs { position: absolute; }
.wall-stage.flying .gate-art, .wall-stage.flying .wall-hole { filter: none; }
.wall-stage.flying .wall-cam { will-change: transform; }

/* ---------- 読み上げログ（?speechdebug／保護者画面の「読み上げテスト」） ---------- */
.sdbg { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 9999; max-height: 42vh; display: flex; flex-direction: column;
  background: rgba(30, 24, 18, .92); color: #f6efe4; border-radius: 12px; font: 12px/1.45 ui-monospace, monospace; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.sdbg-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.15); }
.sdbg-flags { color: #ffd479; margin-right: auto; }
.sdbg-btn { font: inherit; padding: 4px 10px; border-radius: 8px; border: 0; background: #f6efe4; color: #3b2a1a; }
.sdbg-list { margin: 0; padding: 6px 8px 8px 8px; list-style: none; overflow: auto; }
.sdbg-list li { white-space: pre-wrap; }
.sdbg-start, .sdbg-file-start { color: #8ff0a4; }
.sdbg-drop-stale, .sdbg-expired { color: #ff9d8a; font-weight: bold; }
.sdbg-say { color: #9fd3ff; }
.setting-tools .btn { flex: none; }

/* =========================================================
   ロケットをとばそう（設計図 220×320 から切り出した部品。R = 部品の基準の長さ）
   部品の絵は おぼん・ドラッグ中・ロケットの上で 同じ大きさ（var(--w)*R × var(--h)*R）
   ========================================================= */
.game-rocket {
  --R: clamp(40px, min(calc((100dvh - 280px) / 6.4), calc((100vw - 60px) / 3.4)), 100px);
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
.rocket-stage { position: relative; z-index: 1; flex: 1; min-height: calc(var(--R) * 3.75); width: 100%; transition: transform 2.4s cubic-bezier(0.5, 0, 0.8, 0.4); }
.launch-pad { position: absolute; left: 50%; bottom: 0; width: calc(var(--R) * 3.4); height: calc(var(--R) * 0.5); translate: -50% 0; z-index: 1; }
.launch-pad svg, .launch-tower svg { width: 100%; height: 100%; display: block; }
.launch-tower { position: absolute; left: calc(50% + var(--R) * 1.15); bottom: calc(var(--R) * 0.4); width: calc(var(--R) * 0.6); height: calc(var(--R) * 3.4); z-index: 0; }
.tower-light { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.rocket-build { position: absolute; left: 50%; bottom: calc(var(--R) * 0.42); width: calc(var(--R) * 2.2); height: calc(var(--R) * 3.2); translate: -50% 0; z-index: 2; }
.rocket-slot {
  position: absolute; left: calc(var(--x) * var(--R)); top: calc(var(--y) * var(--R));
  width: calc(var(--w) * var(--R)); height: calc(var(--h) * var(--R));
  border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; display: block;
}
.part-ghost { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0.4; transition: opacity 0.2s, filter 0.2s; }
.part-ghost * { fill: rgba(255, 255, 255, 0.55) !important; stroke: #fff !important; stroke-dasharray: 5 4; stroke-width: 2.5 !important; }
.part-ghost [stroke-opacity], .part-ghost .engine-glow, .part-ghost circle[r="2"] { display: none; }
.rocket-slot:not(.filled):not(.waiting) .part-ghost { animation: ghost-pulse 2.2s ease-in-out infinite; }
@keyframes ghost-pulse { 50% { opacity: 0.62; } }
.rocket-slot.waiting .part-ghost { opacity: 0.12; animation: none; }
.rocket-slot.drop-hover { transform: none; background: none; box-shadow: none; }
.rocket-slot.drop-hover .part-ghost { opacity: 0.95; filter: drop-shadow(0 0 8px #fff27a) drop-shadow(0 0 3px #ffd94a); animation: none; }
.rocket-slot.filled .part-ghost { display: none; }
.rocket-slot.nope { animation: nope 0.42s ease-in-out; }
.rocket-slot > .piece.placed, .rocket-slot > .piece.fixed {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; box-shadow: none; animation: none; padding: 0;
}
.rocket-slot > .piece.placed::after, .rocket-slot > .piece.fixed::after { display: none; }
.part-art { width: 100%; height: 100%; display: block; overflow: visible; }
.rocket-slot > .piece > .part-art { width: 100%; height: 100%; }
/* おぼんの部品：絵は ロケットと同じ大きさ。持つ場所（枠）は 指で持ちやすいよう 少し大きめ */
.rocket-piece { --fill: auto; width: max(calc(var(--w) * var(--R) + 14px), 60px); height: max(calc(var(--h) * var(--R) + 10px), 60px); border-radius: 18px; }
.rocket-piece > .part-art { width: calc(var(--w) * var(--R)); height: calc(var(--h) * var(--R)); flex: none; filter: drop-shadow(0 3px 2px rgba(60, 40, 20, 0.25)); }
.rocket-tray { align-items: flex-end; gap: clamp(8px, 2vw, 18px); flex-wrap: wrap; justify-content: center; padding: 10px 18px; min-height: 0; }
.rocket-flame { position: absolute; left: calc(var(--R) * 0.8); top: calc(var(--R) * 3.08); width: calc(var(--R) * 0.6); height: calc(var(--R) * 1.2); opacity: 0; transform-origin: 50% 0; transform: scaleY(0.3); transition: opacity 0.3s, transform 0.5s var(--ease-out); pointer-events: none; z-index: 0; }
.rocket-flame svg { width: 100%; height: 100%; display: block; }
.rocket-build.ignite .rocket-flame { opacity: 1; transform: scaleY(0.75); animation: flame 0.18s ease-in-out infinite alternate; }
.rocket-build.launch .rocket-flame { transform: scaleY(1.3); }
@keyframes flame { from { scale: 0.92 1; } to { scale: 1.08 1.12; } }
.rocket-build.ready .engine-glow { animation: glow 0.6s ease-in-out infinite alternate; }
@keyframes glow { to { fill: #fff3a0; } }
.rocket-build.ignite { animation: rumble 0.09s linear infinite; }
@keyframes rumble { 0% { translate: -50% 0; } 25% { translate: calc(-50% + 1.5px) 0.5px; } 75% { translate: calc(-50% - 1.5px) 0; } }
.rocket-build.launch { animation: none; transition: transform 2.6s cubic-bezier(0.45, 0, 0.7, 0.6); transform: translateY(-160vh); }
.rocket-smoke { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--R) * 0.3); width: 0; height: 0; }
.rocket-smoke span { position: absolute; width: calc(var(--R) * 1); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #dfe3ea 70%); translate: -50% 0; opacity: 0; }
.rocket-smoke.puff span { animation: smoke 1.8s ease-out forwards; animation-delay: calc(var(--i) * 0.08s); }
@keyframes smoke { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc((var(--i) - 4) * 42%), -10%) scale(2.6); } }
.rocket-stage.lift .launch-pad, .rocket-stage.lift .launch-tower, .rocket-stage.lift .rocket-smoke { transition: transform 2.6s cubic-bezier(0.5, 0, 0.9, 0.5); transform: translateY(80vh); }
.rocket-space { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, #2b2f6e, #12153a 70%); transition: opacity 1.4s; overflow: hidden; }
.game-rocket.in-space .rocket-space { opacity: 1; }
.game-rocket.in-space .rocket-tray { opacity: 0; transition: opacity 0.6s; }
.space-star { position: absolute; width: 3px; height: 14px; border-radius: 2px; background: #fff7d6; opacity: 0.9; animation: streak 0.9s linear var(--d) infinite; }
@keyframes streak { from { transform: translateY(-40vh); } to { transform: translateY(60vh); } }
.planet { position: absolute; right: 12%; top: 18%; width: clamp(70px, 16vmin, 160px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd2a6, #f08a5c 60%, #b8503a); box-shadow: 0 0 0 clamp(6px, 1.4vmin, 12px) rgba(255, 220, 150, 0.35); }
.planet.small { right: auto; left: 10%; top: 60%; width: clamp(34px, 7vmin, 70px); background: radial-gradient(circle at 35% 30%, #c8f0ff, #6ab8f0 60%, #3a7cc0); }
.game-screen.in-space > .world { opacity: 0; transition: opacity 1.4s; }
.game-screen.in-space { background: #12153a; }
.countdown { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; font-weight: var(--fw); color: #fff; }
.countdown:not(:empty) { font-size: clamp(90px, 26vmin, 210px); color: #ffb43a; -webkit-text-stroke: 6px #fff; paint-order: stroke fill; text-shadow: 0 8px 0 #c4561f, 0 14px 20px rgba(0, 0, 0, 0.35); }
.countdown.tick { animation: tick 0.9s var(--ease-out); }
@keyframes tick { 0% { transform: scale(0.4); opacity: 0; } 30% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0.85; } }
/* 横向きスマホ：ロケットと おぼんを 横にならべる */
@media (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .game-rocket { --R: clamp(36px, calc((100dvh - 150px) / 3.75), 90px); flex-direction: row; justify-content: center; align-items: stretch; }
  .rocket-stage { flex: 0 1 calc(var(--R) * 4.4); min-height: 0; }
  .rocket-tray { flex: 0 1 auto; width: auto; min-width: 0; max-width: calc(var(--R) * 3.2 + 60px); align-self: center; align-content: center; }
}

/* =========================================================
   みちをつなごう：道のマスと おぼんの道は 同じ大きさ（置いても大きさが変わらない）
   ========================================================= */
.game-road { --cell: max(44px, min(calc((100vw - 64px) / var(--w)), calc((100dvh - 400px) / var(--h)), 120px)); }
.game-road .road-grid { grid-template-columns: repeat(var(--w), var(--cell)); grid-auto-rows: var(--cell); }
.game-road .road-car { width: calc(var(--cell) * 0.8); height: calc(var(--cell) * 0.8); }
.game-road .road-piece { --piece: var(--cell); }
.game-road .road-tray { min-width: 0; padding: 12px 18px; gap: 12px; }
@media (max-height: 520px) {
  .game-road { flex-direction: row; justify-content: center; gap: 18px; --cell: max(40px, min(calc((100dvh - 150px) / var(--h)), calc((100vw - 120px) / (var(--w) + 2.4)), 100px)); }
  .game-road .road-tray { flex-wrap: wrap; width: calc(var(--cell) * 2 + 54px); max-width: none; align-content: center; justify-content: center; }
}

/* =========================================================
   大きさの見直し（実機レビュー）：持つ物は 指で持ちやすく、置く場所は 持つ物と ほぼ同じ大きさ
   ========================================================= */
.game-animalhome, .game-garage, .game-cleanup, .game-memory, .game-shadow { --piece: clamp(80px, 20vmin, 128px); }
.home-place .place-art { align-items: flex-end; }
.place-items .piece.placed { width: clamp(56px, 12vmin, 92px); height: clamp(56px, 12vmin, 92px); }
/* ガレージ：レーンの高さは ほどほど。乗り物は レーンの高さに合わせる（線路だけ大きい／船だけ小さい を防ぐ） */
.place-row.layout-lanes { flex: 1 1 auto; justify-content: center; }
.lane { flex: 1 1 0; max-height: 128px; min-height: 64px; container-type: size; }
.lane .place-items .piece.placed { width: auto; height: 82cqh; aspect-ratio: 1; }
/* おなじならび：見本・みぞ・おぼん の 積み木は ぜんぶ同じ大きさ */
.game-sequence { --piece: clamp(64px, min(20vmin, calc((100vw - 110px) / var(--len, 4))), 112px); }
.game-sequence .seq-cell, .game-sequence .seq-slot, .game-sequence .seq-piece { --piece: inherit; }
/* おおきさじゅん：小さい物も 指で持てる大きさ（大小の差は 0.5〜1 倍） */
.game-size { --piece: clamp(56px, min(26vmin, calc((100vw - 30px) / var(--n, 5) - 10px)), 150px); }
.game-size .size-row, .game-size > .tray-row { gap: 6px; }
.game-shadow { --piece: clamp(84px, 24vmin, 150px); }
.game-size .size-row .slot, .game-size .size-piece { --piece: inherit; }
.game-memory .memory-tray { min-width: 0; }
@media (max-height: 520px) {
  :root { --piece: clamp(64px, 20vh, 96px); }
  .game-animalhome, .game-garage, .game-cleanup, .game-memory, .game-shadow { --piece: clamp(64px, 21vh, 96px); }
  .tray-row { min-width: 0; padding: 8px 14px; }
  .game-sequence { flex-direction: row; justify-content: center; gap: 16px; --piece: clamp(56px, min(19vh, calc((100vw - 300px) / (var(--len, 4) + 2))), 92px); }
  .game-sequence > .tray-row { flex-wrap: wrap; max-width: calc(var(--piece) * 2 + 60px); align-content: center; }
  .game-size { --piece: clamp(64px, min(23vh, calc((100vw - 40px) / var(--n, 5) - 22px)), 100px); }
  .game-memory { --mc: min(calc((100dvh - 200px) / var(--rows, 2)), calc((100vw - 120px - var(--piece) * 2) / var(--cols, 3)), 100px); }
  .game-memory .memory-tray { flex: 0 1 auto; max-width: calc(var(--piece) * 2 + 50px); flex-wrap: wrap; align-content: center; }
  .lane { min-height: 0; }
}
.game-size .size-piece { --fill: 100%; padding-bottom: 4px; }
.game-size .size-piece > .size-art { width: calc(var(--s) * 100%); height: calc(var(--s) * 100%); }

/* =========================================================
   ロック中のゲーム：中身は見えるが グレーで 半透明・大きな鍵・あとどれくらい
   ========================================================= */

.lock-center {
  position: absolute; left: 50%; top: 38%; width: calc(var(--tile) * 0.42); aspect-ratio: 1; translate: -50% -50%;
  z-index: 3; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(70, 50, 20, 0.35));
}
.lock-center svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lock-center .shackle { transform-box: fill-box; transform-origin: 85% 100%; }

.lock-hint { gap: 5px; flex-wrap: wrap; justify-content: center; }
.lock-progress .dot { width: 10px; height: 10px; }
.lock-left { font-size: 11px; font-weight: 700; color: #9a8370; letter-spacing: 0.02em; }
/* さわったとき：鍵が ぷるん */

@keyframes lock-shake { 15% { rotate: -14deg; } 35% { rotate: 12deg; } 55% { rotate: -8deg; } 75% { rotate: 5deg; } 100% { rotate: 0deg; } }

@keyframes shackle-tug { 30% { transform: translateY(-6%); } 60% { transform: none; } }
.lock-pop {
  position: absolute; left: 50%; bottom: calc(100% - 14px); translate: -50% 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 14px 10px;
  border-radius: 18px; background: #fffdf6; border: 3px solid #e2b77c; box-shadow: 0 6px 12px rgba(70, 50, 20, 0.25);
  white-space: nowrap; animation: pop-in 0.35s var(--ease-pop) both, pop-out 0.4s ease-in 2.2s forwards; pointer-events: none;
}
.lock-pop::after { content: ''; position: absolute; left: 50%; top: 100%; translate: -50% -2px; border: 10px solid transparent; border-top-color: #e2b77c; }
.lock-pop b { font-size: clamp(14px, 2.6vmin, 18px); color: #7a4a24; }
.lock-pop-row { display: flex; align-items: center; gap: 6px; }
.lock-pop .lock-progress .dot { width: 14px; height: 14px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.7); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(-6px); } }
/* ひらいた瞬間：グレー → 鍵がひらく → 色がもどる → ぽんっ → あたらしい！ */

@keyframes color-back { from { filter: grayscale(0.85) opacity(0.6); } to { filter: none; } }
.lock-center.unlock-fx { animation: lock-away 0.5s ease-in 0.75s both; }
.lock-center.unlock-fx .shackle { animation: shackle-open 0.35s var(--ease-pop) 0.3s both; }
@keyframes shackle-open { to { transform: translateY(-16%) rotate(28deg); } }
@keyframes lock-away { to { opacity: 0; scale: 1.4; translate: -50% -80%; } }
@keyframes unlock-hop { 40% { transform: translateY(-14px) scale(1.06); } 70% { transform: translateY(2px) scale(0.98); } }

@media (prefers-reduced-motion: reduce) {
  .lock-center.unlock-fx, .lock-center.unlock-fx .shackle { animation-duration: 0.01s; animation-delay: 0s; }
}

.lock-pop { bottom: auto; top: 46%; }
.lock-pop::after { display: none; }

/* ログは さわっても アプリの操作を じゃましない（ボタンだけ押せる）。上に小さく出す */
.sdbg { top: 6px; bottom: auto; left: auto; right: 6px; width: min(460px, 70vw); max-height: 34vh; pointer-events: none; opacity: 0.92; }
.sdbg-btn { pointer-events: auto; }

/* 結果のとき：からっぽの おぼんは しまう（ゲームの世界と 置いた物だけ 見せる） */
.game-screen.result-shown .tray-row, .game-screen.result-shown .btn-peek { opacity: 0; transition: opacity 0.4s; pointer-events: none; }
/* ボールわけ：答え合わせの 箱（ふたが開いて 中が見える）を かくさない。まとめは 下へ */
/* 看板とまとめは 箱の下（床の上）へ。箱の中の答えが 見える */
.result-balls .result-top { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); }
.result-balls .result-sign { font-size: clamp(26px, 6vmin, 52px); }
.game-screen.result-shown .ball-field { opacity: 0.25; }
@media (max-height: 520px) {
  .result-balls .result-top { bottom: calc(6px + env(safe-area-inset-bottom)); gap: 4px; }
  .result-balls .result-sign { font-size: clamp(22px, 7vh, 34px); }
  .result-balls .result-detail { padding: 4px 12px; }
}
/* はんぶんパズル：はめた右半分は 左半分と まったく同じ大きさ・高さ（境界が ずれない） */
.half-slot.filled { border-width: 0; background: transparent; box-shadow: none; }
.half-slot > .piece.placed { inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; animation: none; }
.half-slot > .piece.placed > * { width: 100%; height: 100%; }
.half-left .art, .half-left svg { width: 100%; height: 100%; }
.half-slot > .piece.placed { background: #fffaf0; border-radius: 4px 14px 14px 4px; }

/* 置いた物の動きは「その場から」始める（指から すっと おさまる動き＝drag.js の FLIP と つながる。瞬間移動しない） */
@keyframes snap { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes drive-in { 0% { transform: none; } 45% { transform: translateX(14%); } 100% { transform: none; } }
@keyframes fly-in { 0% { transform: none; } 45% { transform: translateY(-28%) rotate(-10deg); } 100% { transform: none; } }
@keyframes enter-house { 0% { transform: none; } 45% { transform: translateY(-10%); } 100% { transform: translateY(-6%) scale(0.74); } }
@keyframes tuck { 0% { transform: none; } 40% { transform: translateY(-14%) scale(1.04); } 100% { transform: scale(0.82); } }
/* 発射：ロケットは 少し上がって 画面に残り、地面が下へ消える → 星が流れて「宇宙を とんでいる」 */
.rocket-build.launch { transform: translateY(-24vh); transition: transform 2.8s cubic-bezier(0.45, 0, 0.4, 1); }
.game-rocket.in-space .rocket-build.launch { animation: space-bob 1.6s ease-in-out 1.6s infinite; }
@keyframes space-bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -10px; } }
.rocket-smoke, .rocket-smoke span, .launch-pad, .launch-tower, .countdown, .rocket-space { pointer-events: none; }
.sdbg-copy { position: fixed; left: -9999px; top: 0; width: 10px; height: 10px; opacity: 0; }
.sdbg-settle, .sdbg-cancel { color: #c9b6ff; }

/* スマホ縦：へやの窓が 上の看板と重なって ごちゃごちゃするので 出さない（壁と床だけで へやに見える） */
@media (max-aspect-ratio: 3/4) and (max-width: 600px) {
  .world.indoor .w-window { display: none; }
}

/* おぼえてもどそう：おぼんの物と 置き場所（まる）の物を 同じ大きさに（置いたときに 大きくならない） */
.game-memory .memory-tray { --piece: max(var(--mc), 44px); }

/* どうぶつのおうち：おうちの絵は 4:3 のまま（縦長の箱で 絵が宙に浮かない）。名札は 絵のすぐ下、あまった高さは 上の空へ */
.home-place { justify-content: flex-end; }
.home-place .place-art { position: relative; flex: 0 1 auto; width: 100%; aspect-ratio: 200 / 150; height: auto; max-height: calc(100% - 2.4em); min-height: 0; }
.home-place .place-art .art { width: 100%; height: 100%; max-width: none; }
@media (orientation: portrait) and (min-width: 600px) {
  .place-row.layout-homes.count-2 { max-width: 760px; }
}

/* おかたづけ：おもちゃばこ は 箱の口に のぞくように入る（前の星マークの上に はりつけない） */
.furniture-place[data-place="toybox"] .place-items { bottom: 58%; }
.furniture-place[data-place="toybox"] .place-items .piece.placed { --peek: 1; }