* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Baloo 2', system-ui, sans-serif;
  user-select: none;
}

.app-root {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background 0.8s ease;
  overflow: hidden;
}

/* ---- celestial toggle ---- */
.celestial {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 1.6rem;
  background: rgba(255,255,255,0.35);
  border: none;
  border-radius: 50%;
  width: 44px; height: 44px;
  cursor: pointer;
  z-index: 30;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  transition: transform 0.3s;
}
.celestial:active { transform: scale(0.9) rotate(30deg); }

/* ---- Header ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 60px 6px 12px;
  z-index: 20;
}
.title {
  font-weight: 800;
  font-size: clamp(1.1rem, 4.5vw, 1.7rem);
  color: #fff;
  text-shadow: 0 2px 0 #ff7fb0, 0 3px 6px rgba(0,0,0,0.25);
  letter-spacing: 0.5px;
  text-align: center;
  flex: 1;
}
.coin-badge, .level-badge {
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #5a4a1a;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  white-space: nowrap;
}
.level-badge { color: #7a3a8a; }

/* ---- Stats ---- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  padding: 4px 14px 8px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  z-index: 20;
}
.stat { display: flex; align-items: center; gap: 6px; }
.stat-emoji { font-size: 1.15rem; }
.bar-track {
  flex: 1;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}
.stat-low .bar-fill { animation: pulseRed 0.8s infinite; }
.stat-low .bar-track { box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 8px #ff4d4d; }
@keyframes pulseRed {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(0.6) saturate(2); }
}

/* ---- Stage ---- */
.stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rug {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: min(75%, 380px);
  height: 60px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.18), transparent 70%);
  border-radius: 50%;
}

/* ---- Tom ---- */
.tom-wrap {
  position: relative;
  width: min(62vw, 300px);
  cursor: pointer;
  transform-origin: bottom center;
  animation: breathe 3.2s ease-in-out infinite;
  z-index: 5;
}
@keyframes breathe {
  0%,100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.025) translateY(-4px); }
}
.tom-svg { width: 100%; height: auto; display: block; overflow: visible; }
.tail { transform-origin: 55px 70px; animation: tailSway 2.5s ease-in-out infinite; }
@keyframes tailSway {
  0%,100% { transform: rotate(-4deg); }
  50% { transform: rotate(8deg); }
}

.tom-feed { animation: eatBounce 0.4s ease-in-out infinite; }
@keyframes eatBounce { 0%,100%{transform:scale(1);} 50%{transform:scale(1.04) translateY(-6px);} }
.tom-play { animation: playHop 0.35s ease infinite; }
@keyframes playHop { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-14px) rotate(2deg);} }
.tom-sleep { animation: sleepBreathe 2.5s ease-in-out infinite; opacity: 0.9; }
@keyframes sleepBreathe { 0%,100%{transform:scale(1) rotate(-3deg);} 50%{transform:scale(1.02) rotate(-3deg);} }
.tom-bathe { animation: shiver 0.15s linear infinite; }
@keyframes shiver { 0%{transform:translateX(-2px);}50%{transform:translateX(2px);}100%{transform:translateX(-2px);} }
.tom-talking { animation: talkWobble 0.4s ease-in-out infinite; }
@keyframes talkWobble { 0%,100%{transform:scale(1) rotate(0);} 25%{transform:scale(1.02) rotate(1deg);} 75%{transform:scale(1.02) rotate(-1deg);} }

.eat-item {
  position: absolute;
  top: 30%; left: 50%;
  font-size: 2.2rem;
  transform: translateX(-50%);
  animation: eatFloat 1.6s ease forwards;
  z-index: 6;
}
@keyframes eatFloat {
  0% { transform: translate(-50%,-60px) scale(1); opacity:1; }
  70% { transform: translate(-50%,20px) scale(0.8); opacity:1; }
  100% { transform: translate(-50%,30px) scale(0); opacity:0; }
}
.bubbles { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.bubbles span {
  position: absolute; bottom: 20%;
  font-size: 1.5rem;
  animation: rise 1.8s ease-in infinite;
}
@keyframes rise { 0%{transform:translateY(0);opacity:0;} 20%{opacity:1;} 100%{transform:translateY(-160px);opacity:0;} }
.zzz {
  position: absolute; top: 12%; right: 18%;
  font-size: 2rem; z-index: 7;
  animation: zzzFloat 2s ease-in-out infinite;
}
@keyframes zzzFloat { 0%,100%{transform:translateY(0);opacity:0.6;} 50%{transform:translateY(-12px);opacity:1;} }
.sparkles {
  position: absolute; inset: 0; z-index: 7;
  font-size: 2rem; text-align: center; padding-top: 5%;
  animation: sparkle 1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sparkle { 0%,100%{opacity:0.4; transform:scale(1);} 50%{opacity:1; transform:scale(1.2);} }

/* ---- Greeting / messages ---- */
.greeting {
  position: absolute;
  top: 8%;
  background: rgba(255,255,255,0.95);
  padding: 10px 18px;
  border-radius: 20px;
  font-weight: 600;
  color: #7a3a8a;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: popIn 0.4s ease, fadeOut 0.5s ease 2.1s forwards;
  z-index: 15;
}
.mic-error {
  position: absolute; top: 8%;
  background: #ff6b6b; color: #fff;
  padding: 10px 16px; border-radius: 16px;
  font-weight: 600; z-index: 15; text-align: center;
  max-width: 80%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.rec-indicator {
  position: absolute; top: 8%;
  background: rgba(255,255,255,0.95);
  color: #d63031; font-weight: 700;
  padding: 8px 16px; border-radius: 16px; z-index: 15;
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0.5; } }
@keyframes popIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

/* ---- Floaters ---- */
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
.floater {
  position: absolute; top: 35%;
  font-size: 1.6rem; font-weight: 700;
  color: #ff5c8a;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  animation: floatUp 1.2s ease forwards;
}
@keyframes floatUp {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 1; transform: translateY(-10px) scale(1); }
  100% { transform: translateY(-80px) scale(1.1); opacity: 0; }
}

/* ---- Sorry button ---- */
.sorry-btn {
  position: absolute; bottom: 12%;
  background: #ff9ff3; color: #7a2a6a;
  border: none; border-radius: 999px;
  padding: 12px 28px; font-family: inherit;
  font-weight: 800; font-size: 1.2rem;
  cursor: pointer; z-index: 15;
  box-shadow: 0 5px 0 #e07de0, 0 8px 14px rgba(0,0,0,0.25);
  animation: wiggle 0.6s ease-in-out infinite;
}
.sorry-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #e07de0; }
@keyframes wiggle { 0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);} }

/* ---- Toolbar ---- */
.toolbar {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 2vw, 16px);
  padding: 10px 8px calc(6px + env(safe-area-inset-bottom));
  z-index: 20;
}
.act-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 22px;
  padding: 8px clamp(6px, 2.2vw, 14px);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s;
  box-shadow: 0 4px 0 rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.15);
  min-width: 56px;
}
.act-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.act-active { background: #ffd6e5; box-shadow: 0 0 0 3px #ff5c8a, 0 4px 8px rgba(0,0,0,0.2); }
.act-icon { font-size: clamp(1.4rem, 5vw, 2rem); }
.act-label { font-size: 0.72rem; font-weight: 700; color: #555; }

/* ---- Food tray & overlays ---- */
.tray-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 40;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.tray {
  background: #fff;
  border-radius: 26px;
  padding: 20px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  animation: popIn 0.3s ease;
  max-width: 90%;
}
.tray-title { font-weight: 800; font-size: 1.15rem; color: #7a3a8a; text-align: center; margin-bottom: 14px; }
.tray-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.food-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff4e6; border: 2px solid #ffd6a5;
  border-radius: 18px; padding: 14px 20px;
  font-family: inherit; font-weight: 700; color: #a05a1a;
  cursor: pointer; transition: transform 0.1s;
}
.food-btn:active { transform: scale(0.92); }
.food-e { font-size: 2rem; }

.ball-game {
  position: relative;
  background: linear-gradient(160deg,#c8f7c5,#a3e4d7);
  border-radius: 26px;
  width: min(85%, 400px);
  height: min(60vh, 340px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  animation: popIn 0.3s ease;
  overflow: hidden;
}
.ball-game .tray-title { padding-top: 16px; }
.ball {
  position: absolute;
  font-size: 2.6rem;
  background: none; border: none; cursor: pointer;
  transition: left 0.1s, top 0.1s;
  animation: jitter 0.5s ease-in-out infinite;
}
@keyframes jitter { 0%,100%{transform:scale(1) rotate(-5deg);} 50%{transform:scale(1.15) rotate(5deg);} }
.close-game {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: #ff9ff3; color: #7a2a6a; border: none;
  border-radius: 999px; padding: 8px 24px; font-family: inherit;
  font-weight: 700; cursor: pointer;
}

/* ---- Toast ---- */
.toast {
  position: absolute;
  bottom: 100px; left: 50%;
  transform: translateX(-50%);
  background: rgba(45,45,68,0.92);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  z-index: 50;
  animation: popIn 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  white-space: nowrap;
}

/* ---- Footer ---- */
.footer {
  text-align: center;
  padding: 4px 8px calc(6px + env(safe-area-inset-bottom));
  font-size: 0.72rem;
  color: rgba(255,255,255,0.85);
  z-index: 20;
}
.footer a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}