/* =========================================
   Baby Balloon - 1歳半向けやさしいデザイン
   ========================================= */

/* リセット & 幼児向けタッチ最適化 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none; /* ピンチ・スクロール抑止 */
  -webkit-touch-callout: none; /* 長押しメニュー抑止 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; /* タップハイライト抑止 */
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic UI", sans-serif;
  background: #bfe9ff;
}

button { -webkit-tap-highlight-color: transparent; user-select: none; }

/* ゲーム全体 */
#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #87ceeb 0%, #b8e6fe 35%, #d6f0ff 55%, #e8f8e8 75%, #c8e8a0 100%);
  /* iOSセーフエリア対応不要だが念のため */
}

/* 背景：雲 */
.bg-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cloud {
  position: absolute;
  color: rgba(255,255,255,0.85);
  font-size: clamp(40px, 8vw, 90px);
  filter: blur(0.5px);
  animation: cloudDrift 28s linear infinite;
  text-shadow: 0 2px 12px rgba(255,255,255,0.6);
}
.cloud.c1 { top: 6%; left: -18%; animation-duration: 38s; }
.cloud.c2 { top: 14%; left: -25%; animation-duration: 52s; animation-delay: -12s; font-size: clamp(50px,10vw,110px); }
.cloud.c3 { top: 2%; left: -15%; animation-duration: 44s; animation-delay: -6s; opacity: 0.6; }

@keyframes cloudDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(135vw); }
}

/* 背景：丘 */
.bg-hills {
  position: absolute;
  bottom: -2%;
  left: -5%;
  right: -5%;
  height: 18%;
  background: radial-gradient(ellipse 80% 100% at 20% 100%, #a8d86e 0%, #8ec455 60%, transparent 70%),
              radial-gradient(ellipse 70% 90% at 75% 100%, #b4e07a 0%, #96cc5a 60%, transparent 70%);
  pointer-events: none;
  opacity: 0.9;
}

/* タッチキャッチャー：空タップでも反応 */
#touch-catcher {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* pointer-eventsはjsで制御：風船や動物の上では透過 */
}

/* レイヤー */
#balloon-layer, #animal-layer, #effect-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#balloon-layer { z-index: 5; }
#animal-layer { z-index: 10; }
#effect-layer { z-index: 20; pointer-events: none; }

/* =========================================
   風船
   ========================================= */
.balloon {
  position: absolute;
  bottom: -160px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  /* タップ領域を視覚より大きく */
  /* balloon自体のpaddingで拡張 */
  will-change: transform;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12));
  animation: balloonFloat var(--dur, 9s) linear forwards;
  /* ゆらゆら */
  transform-origin: center bottom;
}

.balloon-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size, 120px);
  height: calc(var(--size, 120px) * 1.28);
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  /* グラデで立体感 */
  background: radial-gradient(ellipse 38% 28% at 30% 22%, rgba(255,255,255,0.9) 0%, transparent 60%),
              radial-gradient(ellipse 100% 100% at 50% 50%, var(--col2) 0%, var(--col1) 68%);
  box-shadow: inset -8px -14px 18px rgba(0,0,0,0.09), inset 6px 8px 12px rgba(255,255,255,0.45);
  /* タップ領域拡張：見た目より大きく */
  /* 擬似的にpadding領域を追加 */
}
.balloon-inner::before {
  content: "";
  position: absolute;
  inset: -22px; /* タップ判定を22px拡張 */
  border-radius: 50%;
  /* デバッグ時は background: rgba(255,0,0,0.05); */
}

/* ハイライト */
.balloon-highlight {
  position: absolute;
  top: 14%;
  left: 22%;
  width: 26%;
  height: 22%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.85) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* 結び目 */
.balloon-knot {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 14px;
  background: var(--col1);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  border-radius: 0 0 4px 4px;
}

/* ひも */
.balloon-string {
  position: absolute;
  bottom: -58px;
  left: 50%;
  width: 2px;
  height: 58px;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06));
  transform: translateX(-50%) rotate(var(--tilt, 3deg));
  border-radius: 2px;
  pointer-events: none;
}
.balloon-string::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform: rotate(2deg);
  transform-origin: top;
  opacity: 0.5;
}

/* ゆらゆら浮遊 */
@keyframes balloonFloat {
  0%   { transform: translateY(0) translateX(0) rotate(-1.5deg); }
  15%  { transform: translateY(-18vh) translateX(10px) rotate(1.2deg); }
  30%  { transform: translateY(-36vh) translateX(-8px) rotate(-1deg); }
  50%  { transform: translateY(-58vh) translateX(12px) rotate(1deg); }
  70%  { transform: translateY(-78vh) translateX(-6px) rotate(-0.8deg); }
  100% { transform: translateY(-118vh) translateX(0) rotate(0deg); opacity: 0.95; }
}

/* 割れるアニメーション */
.balloon.popping {
  animation: none !important;
  pointer-events: none;
}
.balloon.popping .balloon-inner {
  animation: popScale 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes popScale {
  0% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.28); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* =========================================
   動物
   ========================================= */
.animal {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) scale(0.2);
  font-size: clamp(64px, 14vw, 120px);
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.18));
  will-change: transform;
  animation: animalAppear 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  /* タップ領域拡張 */
  padding: 28px;
  margin: -28px;
  -webkit-tap-highlight-color: transparent;
}
.animal::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
}

@keyframes animalAppear {
  0% { transform: translate(-50%, -50%) scale(0.15) rotate(-8deg); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.18) rotate(2deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}

.animal.bounce {
  animation: animalBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes animalBounce {
  0% { transform: translate(-50%, -50%) scale(1); }
  30% { transform: translate(-50%, -50%) scale(1.35) translateY(-12px); }
  60% { transform: translate(-50%, -50%) scale(0.92); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.animal.wiggle {
  animation: animalWiggle 0.6s ease;
}
@keyframes animalWiggle {
  0%,100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
  20% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.12); }
  40% { transform: translate(-50%, -50%) rotate(10deg) scale(1.12); }
  60% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.08); }
  80% { transform: translate(-50%, -50%) rotate(4deg); }
}

.animal.jump {
  animation: animalJump 0.62s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes animalJump {
  0% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -68%) scale(1.15); }
  55% { transform: translate(-50%, -50%) scale(0.96); }
  75% { transform: translate(-50%, -58%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.animal.leaving {
  animation: animalLeave 0.5s ease forwards;
}
@keyframes animalLeave {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0) translateY(-30px); opacity: 0; }
}

/* 動物の影 */
.animal::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 14%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.14) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ふきだし（動物名） */
.animal-label {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.92);
  color: #6b4a2b;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  pointer-events: none;
  opacity: 0;
  animation: labelIn 0.3s 0.35s ease forwards;
}
@keyframes labelIn { to { opacity: 1; } }

/* =========================================
   エフェクト：星・ハート・キラキラ
   ========================================= */
.effect-star, .effect-heart, .effect-sparkle, .effect-bubble {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  font-size: var(--es, 22px);
  line-height: 1;
  text-shadow: 0 1px 6px rgba(255,255,255,0.8);
}

.effect-star {
  animation: effectPop 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.effect-heart {
  animation: effectFloat 1.1s ease-out forwards;
}
.effect-sparkle {
  animation: effectTwinkle 1s ease forwards;
}

@keyframes effectPop {
  0% { transform: translate(-50%,-50%) scale(0) rotate(0deg); opacity: 0; }
  20% { transform: translate(-50%,-50%) scale(1.25) rotate(12deg); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 85px)) scale(0.85) rotate(25deg); opacity: 0; }
}
@keyframes effectFloat {
  0% { transform: translate(-50%,-50%) scale(0.6); opacity: 0; }
  18% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 110px)) scale(0.9); opacity: 0; }
}
@keyframes effectTwinkle {
  0% { transform: translate(-50%,-50%) scale(0) rotate(0); opacity: 0; }
  30% { transform: translate(-50%,-50%) scale(1.3) rotate(90deg); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0.3) rotate(180deg); opacity: 0; }
}

/* 背景で自然に出る小さなキラキラ */
.bg-sparkle {
  position: absolute;
  font-size: 14px;
  opacity: 0;
  animation: bgTwinkle 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bgTwinkle {
  0%,100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.55; transform: scale(1); }
}

/* タップ波紋 */
.tap-ripple {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.85);
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 70%);
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}
@keyframes ripple {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* =========================================
   音ボタン
   ========================================= */
#sound-toggle {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.88);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  transition: transform 0.15s;
  touch-action: manipulation;
}
#sound-toggle:active { transform: scale(0.92); }
#sound-toggle.muted { opacity: 0.55; }
#sound-toggle.muted #sound-icon::after {
  content: "×";
  position: absolute;
  font-size: 14px;
  font-weight: 800;
  color: #e74c3c;
  transform: translate(6px, -6px);
}

/* =========================================
   保護者ゾーン
   ========================================= */
#parent-zone {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
}
#parent-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.48);
  font-size: 15px;
  color: rgba(80,80,80,0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background 0.2s;
}
#parent-hold-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
#parent-hold-ring.visible { opacity: 1; border-color: rgba(255,255,255,0.55); }
#parent-hold-fill {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid #ff8a3d;
  clip-path: inset(0 50% 0 0);
  transform: rotate(-90deg);
  opacity: 0;
  transition: clip-path 0.1s linear;
}
#parent-hold-fill.filling { opacity: 1; }

/* 保護者パネル */
#parent-panel {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 20px;
  padding: 0;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 18px 48px rgba(0,0,0,0.18);
  width: min(420px, 92vw);
  max-width: 92vw;
  z-index: 100;
}
#parent-panel::backdrop {
  background: rgba(120, 180, 220, 0.42);
  backdrop-filter: blur(4px);
}
#parent-panel[open] { display: block; animation: panelIn 0.28s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes panelIn { from { transform: translate(-50%,-50%) scale(0.88); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }

#parent-form { padding: 22px 22px 18px; }
#parent-form h2 {
  font-size: 18px;
  color: #4a6a8a;
  margin-bottom: 14px;
  text-align: center;
}
.panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eef3f7;
  font-size: 14px;
  color: #445;
  cursor: pointer;
}
.panel-row span:first-child { flex: 1; font-weight: 600; }
.panel-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: #6ec1e4; }
.panel-row input[type="range"] { flex: 1; max-width: 140px; accent-color: #6ec1e4; }
#opt-volume-val { min-width: 38px; text-align: right; font-weight: 600; color: #6a8aaa; }
.panel-row select { border: 1.5px solid #d6e6f0; border-radius: 8px; padding: 6px 10px; background: #f7fbfe; color: #445; font-size: 13px; }
.panel-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}
.panel-actions button {
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
#btn-fullscreen { background: #e8f4ff; color: #4a7aaa; border: 1.5px solid #c8ddf0 !important; }
#btn-close-parent { background: #6ec1e4; color: #fff; min-width: 96px; }

/* =========================================
   初回ヒント
   ========================================= */
#first-hint {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  z-index: 15;
  background: rgba(255,255,255,0.92);
  color: #6b7a8a;
  padding: 12px 22px;
  border-radius: 999px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  pointer-events: none;
  animation: hintFloat 2.2s ease-in-out infinite;
  transition: opacity 0.6s, transform 0.6s;
}
#first-hint.hidden { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.92); pointer-events: none; }
#first-hint p { font-size: 15px; font-weight: 800; color: #5a7a9a; }
#first-hint .hint-sub { font-size: 12px; font-weight: 500; color: #8aa0b5; margin-top: 2px; }
@keyframes hintFloat { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }

/* 縦画面調整 */
@media (orientation: portrait) {
  .bg-hills { height: 14%; }
  #first-hint { bottom: 10%; }
}

/* モーション削減設定を尊重（激しい演出をさらに抑える） */
@media (prefers-reduced-motion: reduce) {
  .balloon { animation-duration: 14s !important; }
  .cloud { animation: none !important; opacity: 0.45; }
}

/* 全画面時 */
:fullscreen #game { background: linear-gradient(180deg, #87ceeb 0%, #b8e6fe 35%, #d6f0ff 55%, #e8f8e8 75%, #c8e8a0 100%); }
:fullscreen #animals-game { background: linear-gradient(180deg, #87ceeb 0%, #b8e6fe 32%, #d6f0ff 52%, #e2f5d0 74%, #b8e090 100%); }
:fullscreen #home-screen { background: linear-gradient(180deg, #87ceeb 0%, #b8e6fe 36%, #dff2ff 60%, #d4efb8 100%); }

/* =========================================
   ホーム画面
   ========================================= */
#home-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(180deg, #87ceeb 0%, #b8e6fe 36%, #dff2ff 60%, #d4efb8 100%);
  z-index: 60;
  touch-action: manipulation;
  padding: 20px;
}
#home-screen[hidden] { display: none !important; }
.home-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.home-title {
  position: relative;
  z-index: 1;
  font-size: clamp(20px, 3.2vw, 30px);
  font-weight: 900;
  color: #4a6a8a;
  background: rgba(255,255,255,0.92);
  padding: 10px 26px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  letter-spacing: 0.06em;
}
.home-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(16px, 4vw, 36px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.home-btn {
  width: clamp(148px, 30vw, 280px);
  height: clamp(148px, 30vw, 280px);
  border-radius: 32px;
  border: 4px solid rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,0.13), 0 3px 10px rgba(0,0,0,0.08), inset 0 -6px 0 rgba(0,0,0,0.06);
  transition: transform 0.14s, box-shadow 0.14s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  will-change: transform;
  /* 判定をさらに広げる */
  position: relative;
}
.home-btn::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 38px;
}
.home-btn:active { transform: scale(0.96); }
.home-btn:focus { outline: none; }
.home-btn:focus-visible { box-shadow: 0 0 0 4px rgba(110,193,228,0.4), 0 12px 28px rgba(0,0,0,0.13); }
.home-balloon { background: linear-gradient(180deg, #fff 0%, #fff7fb 100%); }
.home-animals { background: linear-gradient(180deg, #fff 0%, #f0fff4 100%); }
.home-emoji {
  font-size: clamp(56px, 9vw, 92px);
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
}
.home-label {
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 900;
  color: #5a6a7a;
  letter-spacing: 0.08em;
}
.home-sub {
  position: relative;
  z-index: 1;
  font-size: clamp(12px, 1.8vw, 15px);
  font-weight: 600;
  color: #6b8aa0;
  background: rgba(255,255,255,0.82);
  padding: 6px 16px;
  border-radius: 999px;
  margin-top: 2px;
}
@media (orientation: portrait) {
  .home-buttons { flex-direction: column; gap: 18px; }
  .home-btn { width: min(62vw, 260px); height: min(62vw, 260px); }
}

/* =========================================
   どうぶつゲーム
   ========================================= */
#animals-game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #87ceeb 0%, #b8e6fe 32%, #d6f0ff 52%, #e2f5d0 74%, #b8e090 100%);
  touch-action: none;
}
#animals-game[hidden] { display: none !important; }
#animals-layer, #animals-effect-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#animals-layer { z-index: 6; }
#animals-effect-layer { z-index: 21; }
#animals-touch-catcher {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.animals-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.deco-tree {
  position: absolute;
  bottom: 10%;
  left: 4%;
  font-size: clamp(32px, 6vw, 64px);
  opacity: 0.9;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.deco-flower {
  position: absolute;
  font-size: clamp(18px, 3vw, 30px);
  opacity: 0.85;
}
.deco-flower.f1 { bottom: 18%; right: 8%; }
.deco-flower.f2 { bottom: 26%; right: 14%; }

/* フィールド上の動物 */
.animal-field {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.16));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding: 26px;
  margin: -26px;
  transform: translate(-50%, -50%);
  animation: animalFieldIdle 3.2s ease-in-out infinite;
  transform-origin: center bottom;
}
.animal-field::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
}
.animal-field-emoji {
  font-size: clamp(72px, 12vw, 126px);
  line-height: 1;
  display: block;
  transition: transform 0.2s;
}
.animal-field-label {
  margin-top: 6px;
  background: rgba(255,255,255,0.93);
  color: #6b4a2b;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.11);
  pointer-events: none;
  opacity: 0;
  animation: labelIn 0.32s 0.4s ease forwards;
}
.animal-field::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 58%;
  height: 12%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.13) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
@keyframes animalFieldIdle {
  0%,100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-4px); }
}
.animal-field.appearing {
  animation: animalFieldAppear 0.58s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, animalFieldIdle 3.2s 0.6s ease-in-out infinite;
}
@keyframes animalFieldAppear {
  0% { transform: translate(-50%, -50%) scale(0.15) translateY(20px); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.16) translateY(-6px); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) translateY(0); opacity: 1; }
}
.animal-field.leaving {
  animation: animalFieldLeave 0.48s ease forwards !important;
  pointer-events: none;
}
@keyframes animalFieldLeave {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0) translateY(-22px); opacity: 0; }
}

/* タップ反応アニメーション - 基準の translate(-50%,-50%) を維持 */
.animal-field.anim-bounce { animation: animalFieldBounce 0.52s cubic-bezier(0.34,1.56,0.64,1) !important; }
@keyframes animalFieldBounce {
  0% { transform: translate(-50%, -50%) scale(1) translateY(0); }
  30% { transform: translate(-50%, -50%) scale(1.32) translateY(-14px); }
  60% { transform: translate(-50%, -50%) scale(0.94) translateY(2px); }
  100% { transform: translate(-50%, -50%) scale(1) translateY(0); }
}
.animal-field.anim-wiggle { animation: animalFieldWiggle 0.62s ease !important; }
@keyframes animalFieldWiggle {
  0%,100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
  20% { transform: translate(-50%, -50%) rotate(-11deg) scale(1.1); }
  40% { transform: translate(-50%, -50%) rotate(11deg) scale(1.1); }
  60% { transform: translate(-50%, -50%) rotate(-7deg) scale(1.06); }
  80% { transform: translate(-50%, -50%) rotate(4deg); }
}
.animal-field.anim-jump { animation: animalFieldJump 0.64s cubic-bezier(0.34,1.2,0.64,1) !important; }
@keyframes animalFieldJump {
  0% { transform: translate(-50%, -50%) translateY(0) scale(1); }
  32% { transform: translate(-50%, -50%) translateY(-42px) scale(1.12); }
  56% { transform: translate(-50%, -50%) translateY(0) scale(0.96); }
  76% { transform: translate(-50%, -50%) translateY(-14px) scale(1.04); }
  100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
}
.animal-field.anim-spin { animation: animalFieldSpin 0.72s cubic-bezier(0.34,1.56,0.64,1) !important; }
@keyframes animalFieldSpin {
  0% { transform: translate(-50%, -50%) rotate(0) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(360deg) scale(1.18); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
.animal-field.anim-grow { animation: animalFieldGrow 0.56s cubic-bezier(0.34,1.56,0.64,1) !important; }
@keyframes animalFieldGrow {
  0% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -50%) scale(1.48); }
  70% { transform: translate(-50%, -50%) scale(0.92); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.animal-field.anim-run { animation: animalFieldRun 0.62s ease !important; }
@keyframes animalFieldRun {
  0% { transform: translate(-50%, -50%) translateX(0) scale(1); }
  22% { transform: translate(-50%, -50%) translateX(-22px) scale(1.06) rotate(-2deg); }
  44% { transform: translate(-50%, -50%) translateX(22px) scale(1.06) rotate(2deg); }
  68% { transform: translate(-50%, -50%) translateX(-14px) scale(1.04); }
  100% { transform: translate(-50%, -50%) translateX(0) scale(1); }
}
.animal-field.anim-sleep { animation: animalFieldSleep 0.9s ease !important; }
@keyframes animalFieldSleep {
  0% { transform: translate(-50%, -50%) rotate(0) scale(1); }
  28% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.02) translateY(6px); }
  55% { transform: translate(-50%, -50%) rotate(-12deg) scale(0.98) translateY(8px); }
  100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
}
.animal-field.anim-sleep .animal-field-emoji { filter: saturate(0.9) brightness(0.98); }
/* 眠りZzz */
.animal-field.anim-sleep::after {
  content: "Zzz";
  position: absolute;
  top: -8px;
  right: 6px;
  font-size: 16px;
  font-weight: 800;
  color: #7aa8c8;
  background: rgba(255,255,255,0.9);
  padding: 2px 6px;
  border-radius: 999px;
  animation: zzzPop 0.9s ease forwards;
}
@keyframes zzzPop {
  0% { transform: translateY(6px) scale(0); opacity: 0; }
  30% { transform: translateY(0) scale(1.1); opacity: 1; }
  100% { transform: translateY(-10px) scale(1); opacity: 0; }
}

/* どうぶつヒント */
#animals-hint {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  z-index: 7;
  background: rgba(255,255,255,0.92);
  color: #6b7a8a;
  padding: 10px 20px;
  border-radius: 999px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  pointer-events: none;
  animation: hintFloat 2.2s ease-in-out infinite;
  transition: opacity 0.6s, transform 0.6s;
}
#animals-hint.hidden { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.92); }
#animals-hint p { font-size: 14px; font-weight: 800; color: #5a7a9a; }
#animals-hint .hint-sub { font-size: 11px; font-weight: 500; color: #8aa0b5; margin-top: 1px; }

/* 花エフェクト */
.effect-flower {
  position: absolute;
  pointer-events: none;
  font-size: var(--es, 20px);
  line-height: 1;
  will-change: transform, opacity;
  animation: effectFlower 1.05s ease-out forwards;
  text-shadow: 0 1px 6px rgba(255,255,255,0.8);
}
@keyframes effectFlower {
  0% { transform: translate(-50%,-50%) scale(0) rotate(-10deg); opacity: 0; }
  22% { transform: translate(-50%,-50%) scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 72px)) scale(0.9) rotate(10deg); opacity: 0; }
}

/* ホームに戻るボタン（長押し保護） */
#home-zone {
  position: fixed;
  top: 10px;
  left: 68px;
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
}
#home-zone[hidden] { display: none !important; }
#home-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.52);
  font-size: 16px;
  color: rgba(60,60,60,0.72);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background 0.2s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
#home-btn:active { transform: scale(0.94); }
#home-hold-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
#home-hold-ring.visible { opacity: 1; border-color: rgba(255,255,255,0.55); }
#home-hold-fill {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid #6ec1e4;
  clip-path: inset(0 50% 0 0);
  transform: rotate(-90deg);
  opacity: 0;
}
#home-hold-fill.filling { opacity: 1; }

/* 共通レイヤー調整：game/hidden時はpointer-events無効 */
#game[hidden], #animals-game[hidden] { pointer-events: none; }

/* 保護者パネル内のホームボタン */
#btn-go-home {
  background: #fff3e0;
  color: #8a6a3a;
  border: 1.5px solid #f0d8a8 !important;
}
#btn-go-home:active { transform: scale(0.97); }