* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, "Comic Sans MS", "Chalkboard SE", sans-serif;
  background: #7ec8e3;
}

img { pointer-events: none; }

/* ---------- Main scene ---------- */
#scene {
  position: fixed;
  inset: 0;
  background: url("../assets/bg/room.jpg") center bottom / cover no-repeat, #f7e6c4;
}

#cat-wrap {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  height: 56vh;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.cat-layer {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  filter: drop-shadow(0 12px 10px rgba(60, 40, 10, 0.35));
}

/* Reaction animations applied to #cat-wrap */
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  30% { transform: translateX(-50%) translateY(-4%) scale(1.03); }
  60% { transform: translateX(-50%) translateY(0) scale(0.99); }
}
@keyframes wiggle {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-3deg); }
  75% { transform: translateX(-50%) rotate(3deg); }
}
@keyframes shiver {
  0%, 100% { transform: translateX(-50%); }
  20%, 60% { transform: translateX(calc(-50% - 6px)); }
  40%, 80% { transform: translateX(calc(-50% + 6px)); }
}
#cat-wrap.anim-bounce { animation: bounce 0.6s ease 2; }
#cat-wrap.anim-wiggle { animation: wiggle 0.5s ease 3; }
#cat-wrap.anim-shiver { animation: shiver 0.4s ease 2; }

/* Tap zones (invisible) */
.tap-zone { position: absolute; z-index: 5; }
#zone-head  { top: 0;    left: 15%; width: 70%; height: 32%; }
#zone-belly { top: 38%;  left: 20%; width: 60%; height: 34%; }
#zone-tail  { top: 62%;  left: -8%; width: 30%; height: 38%; }
#zone-paws  { top: 78%;  left: 25%; width: 55%; height: 22%; }

/* ---------- Buttons ---------- */
.big-btn {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 4px solid #fff;
  font-size: 44px;
  line-height: 1;
  background: #ffb84d;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 20;
  transition: transform 0.1s ease;
}
.big-btn:active { transform: scale(0.88); }
#btn-food { left: 18px; }
#btn-game { right: 18px; background: #7ed3f7; }

/* Mic button: center bottom */
#btn-mic { left: calc(50% - 44px); background: #ff8fb3; }
#btn-mic.off { background: #c9c9c9; filter: grayscale(1); opacity: 0.85; }
#btn-mic.hot {
  background: #ff5252;
  animation: micPulse 0.7s ease infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 82, 82, 0.7); }
  50% { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3), 0 0 0 18px rgba(255, 82, 82, 0); }
}

/* ---------- Food tray ---------- */
#tray {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  display: flex;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 25;
}
#tray.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#tray .food {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  border: 3px solid #ffd9a0;
  background: #fff7ec;
  font-size: 40px;
  cursor: pointer;
  transition: transform 0.1s ease;
}
#tray .food:active { transform: scale(0.85); }

/* Flying food morsel */
.morsel {
  position: fixed;
  font-size: 44px;
  z-index: 30;
  pointer-events: none;
  transition: all 0.55s cubic-bezier(0.3, -0.2, 0.6, 1);
}

/* ---------- Mini-game ---------- */
#minigame {
  position: fixed;
  inset: 0;
  background: linear-gradient(#8fd7f5, #cfeffb 70%, #a3e0f0);
  overflow: hidden;
  z-index: 50;
}
#minigame.hidden { display: none; }

#mg-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #ff8a8a;
  color: #fff;
  font-size: 34px;
  font-weight: bold;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}
#mg-stars {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: 20px;
  font-size: 34px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 60;
}
#mg-cat {
  position: absolute;
  bottom: -2%;
  left: 50%;
  transform: translateX(-50%);
  height: 26vh;
  z-index: 55;
  transition: transform 0.2s ease;
}
#mg-cat.cheer { transform: translateX(-50%) translateY(-5%) scale(1.08); }

.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.95), rgba(190,235,255,0.55) 45%, rgba(140,200,240,0.45));
  border: 2px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 52;
  box-shadow: inset -6px -6px 14px rgba(120, 180, 220, 0.4);
}
.bubble span { pointer-events: none; }
.bubble.popped {
  animation: pop 0.22s ease forwards;
}
@keyframes pop {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- Start overlay ---------- */
#start-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(#ffd88a, #ffb457);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#start-card { text-align: center; }
#start-cat {
  height: 42vh;
  max-height: 420px;
  filter: drop-shadow(0 14px 12px rgba(120, 70, 0, 0.35));
  animation: bob 2s ease infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
#start-title {
  font-size: clamp(44px, 9vw, 72px);
  font-weight: bold;
  color: #fff;
  text-shadow: 0 4px 0 #e08a00, 0 8px 18px rgba(0, 0, 0, 0.25);
  margin: 8px 0 20px;
  letter-spacing: 2px;
}
#start-btn {
  font-size: clamp(26px, 5vw, 36px);
  font-weight: bold;
  padding: 18px 44px;
  border-radius: 50px;
  border: 5px solid #fff;
  background: #58c15c;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 0 #3d9440, 0 12px 22px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease;
}
#start-btn:active { transform: translateY(5px); }
#start-overlay.fade { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }