:root {
  --bg: #fff7e8;
  --panel: rgba(255, 255, 255, 0.68);
  --panel-strong: rgba(255, 255, 255, 0.86);
  --text: #4e3212;
  --muted: rgba(78, 50, 18, 0.66);
  --line: rgba(101, 62, 14, 0.11);
  --orange: #ff9f21;
  --orange-deep: #f08300;
  --yellow: #ffd85b;
  --yellow-soft: #ffe985;
  --pink: #ff82a4;
  --green: #4f9f39;
  --shadow: rgba(121, 72, 8, 0.18);
  --stage-glow: rgba(255, 208, 92, 0.42);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; margin: 0; }
body {
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
img { display: block; max-width: 100%; }

.app {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 16%, var(--stage-glow), transparent 38%),
    radial-gradient(circle at 18% 84%, rgba(255, 177, 72, 0.25), transparent 30%),
    linear-gradient(180deg, #fffaf1 0%, var(--bg) 55%, #ffefd3 100%);
  transition: background 0.55s ease, color 0.55s ease;
}
.app[data-theme="night"] {
  --bg: #101827;
  --panel: rgba(17, 27, 45, 0.72);
  --panel-strong: rgba(24, 35, 56, 0.88);
  --text: #fff0cd;
  --muted: rgba(255, 240, 205, 0.68);
  --line: rgba(255, 224, 156, 0.12);
  --shadow: rgba(0, 0, 0, 0.32);
  --stage-glow: rgba(255, 221, 128, 0.16);
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 218, 119, 0.22), transparent 42%),
    radial-gradient(circle at 18% 84%, rgba(78, 129, 255, 0.18), transparent 32%),
    linear-gradient(180deg, #101827 0%, #0b1020 100%);
}

.bg-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.glow { position: absolute; display: block; border-radius: 999px; filter: blur(10px); opacity: 0.58; }
.glow-one { width: 220px; height: 220px; top: 8%; left: 8%; background: rgba(255, 216, 91, 0.24); animation: drift 10s ease-in-out infinite; }
.glow-two { width: 280px; height: 280px; bottom: 8%; right: 8%; background: rgba(255, 159, 33, 0.20); animation: drift 12s ease-in-out infinite reverse; }
.glow-three { width: 160px; height: 160px; top: 28%; right: 24%; background: rgba(255, 130, 164, 0.15); animation: drift 9s ease-in-out infinite; }
.particles { position: absolute; inset: 0; }
.particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 163, 32, 0.66);
  animation: particleFloat var(--time, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.app[data-theme="night"] .particle { background: rgba(255, 237, 184, 0.58); box-shadow: 0 0 16px rgba(255, 237, 184, 0.6); }

.topbar,
.layout,
.footer { position: relative; z-index: 2; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1420px;
  margin: 0 auto 18px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 32px var(--shadow);
  border: 1px solid var(--line);
}
.brand-icon img { width: 42px; height: 42px; }
h1 { margin: 0; font-size: clamp(24px, 4vw, 36px); line-height: 1; letter-spacing: -0.04em; }
.brand p { margin: 8px 0 0; color: var(--muted); font-size: 14px; font-weight: 700; }
.top-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--panel-strong);
  box-shadow: 0 10px 28px var(--shadow);
  border: 1px solid var(--line);
  font-weight: 900;
  transition: transform 0.18s ease, background 0.18s ease;
}
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: translateY(0) scale(0.98); }
.chip.danger { color: #d05a17; }

.layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(420px, 1fr) minmax(280px, 360px);
  gap: 18px;
  max-width: 1420px;
  margin: 0 auto;
  align-items: start;
}
.panel,
.stage-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 34px;
  box-shadow: 0 24px 60px var(--shadow);
  backdrop-filter: blur(18px);
}
.panel { padding: 18px; }
.stage-panel {
  position: relative;
  min-height: 690px;
  padding: 18px;
  overflow: hidden;
}
.stage-panel::before {
  content: "";
  position: absolute;
  inset: 90px 8% auto;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.48), rgba(255, 230, 165, 0.12) 56%, transparent 72%);
  pointer-events: none;
}
.app[data-theme="night"] .stage-panel::before { background: radial-gradient(circle, rgba(255, 222, 149, 0.16), rgba(95, 125, 202, 0.08) 56%, transparent 72%); }

.pet-card-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
}
.pet-card-mini strong { display: block; font-size: 22px; font-weight: 1000; }
.pet-card-mini span { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 800; }
.mini-fruit {
  width: 50px;
  height: 45px;
  border-radius: 48%;
  background: linear-gradient(145deg, #ffbd45, #ff8f0d);
  position: relative;
  box-shadow: inset -7px -7px 14px rgba(119, 61, 0, 0.16), inset 7px 7px 14px rgba(255,255,255,0.2), 0 10px 20px var(--shadow);
}
.mini-fruit::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 26px;
  width: 22px;
  height: 14px;
  border-radius: 100% 0 100% 0;
  background: var(--green);
  transform: rotate(-20deg);
}
.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.score-card {
  padding: 13px 10px;
  text-align: center;
  border-radius: 22px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
}
.score-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; }
.score-card strong { display: block; margin-top: 3px; font-size: 24px; line-height: 1; font-weight: 1000; }

.bars { display: grid; gap: 13px; }
.bar-item { padding: 14px; border-radius: 22px; background: var(--panel-strong); border: 1px solid var(--line); }
.bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 950; margin-bottom: 10px; }
.bar-head b { font-variant-numeric: tabular-nums; }
.bar-track { height: 12px; border-radius: 999px; background: rgba(255, 184, 84, 0.18); overflow: hidden; }
.bar-track i {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd75c, #ff9d22 55%, #ff82a4);
  transition: width 0.35s cubic-bezier(.2,.8,.2,1);
}
.app[data-theme="night"] .bar-track { background: rgba(255, 224, 156, 0.13); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 16px; }
.action {
  min-height: 54px;
  padding: 12px 10px;
  border-radius: 22px;
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 16px 30px var(--shadow);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.action span { display: inline-block; margin-right: 6px; }
.action:hover { transform: translateY(-3px); filter: brightness(1.03); }
.action:active { transform: translateY(0) scale(0.98); }
.action.feed { background: linear-gradient(135deg, #ffb034, #ff8714); }
.action.pet { background: linear-gradient(135deg, #ff91b2, #ff5d86); }
.action.dance { color: #5a3708; background: linear-gradient(135deg, #ffe06b, #ffbd2d); }
.action.sleep { background: linear-gradient(135deg, #334155, #111827); }

.hud {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.message {
  max-width: min(100%, 570px);
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(76, 45, 10, 0.86);
  color: #fff8e9;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 12px 24px var(--shadow);
  transition: transform 0.22s ease;
}
.message.bump { transform: translateY(-3px) scale(1.025); }
.mood-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 900;
}
.mood-pill b { font-size: 20px; font-variant-numeric: tabular-nums; }

.falling-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.orange-drop {
  position: absolute;
  top: -58px;
  width: 44px;
  height: 41px;
  border-radius: 48%;
  pointer-events: auto;
  background: linear-gradient(145deg, #ffc04d, #ff9211 68%, #ec7200);
  box-shadow: inset -7px -8px 12px rgba(103, 52, 0, 0.15), inset 7px 7px 12px rgba(255,255,255,0.22), 0 10px 22px rgba(122,72,0,.18);
  animation: drop var(--duration, 6s) linear forwards, fruitSpin 1.7s ease-in-out infinite;
  border: 2px solid rgba(255, 255, 255, 0.44);
}
.orange-drop::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 23px;
  width: 17px;
  height: 11px;
  border-radius: 100% 0 100% 0;
  background: #3f9237;
  transform: rotate(-22deg);
}
.orange-drop::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 9px;
  width: 9px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
}
.orange-pop {
  position: absolute;
  color: #ff7c11;
  font-weight: 1000;
  font-size: 20px;
  animation: pop 0.8s ease-out forwards;
  pointer-events: none;
  z-index: 40;
  text-shadow: 0 2px 0 #fff;
}

.pet-stage {
  position: relative;
  height: 520px;
  margin: 26px auto 10px;
  display: grid;
  place-items: center;
  perspective: 1100px;
  isolation: isolate;
}
.lulu {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  width: min(78vw, 360px);
  aspect-ratio: 0.84;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.12s ease-out;
  cursor: pointer;
  filter: drop-shadow(0 26px 34px rgba(116, 68, 5, 0.16));
}
.lulu * { transform-style: preserve-3d; }
.lulu.idle { animation: idleFloat 2.8s ease-in-out infinite; }
.lulu.feed { animation: feedBounce 0.68s ease-out; }
.lulu.pet { animation: petWiggle 1.05s ease-in-out; }
.lulu.dance { animation: dance 0.58s ease-in-out infinite; }
.lulu.sleep { animation: sleep 2s ease-in-out infinite; }

.body {
  position: absolute;
  left: 50%;
  top: 17%;
  width: 83%;
  height: 64%;
  transform: translateX(-50%) translateZ(28px);
  border-radius: 48% 52% 43% 45%;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.34), transparent 22%),
    radial-gradient(circle at 66% 65%, rgba(186,113,0,.12), transparent 33%),
    linear-gradient(145deg, #ffe36e 0%, #ffd250 42%, #f8bf2d 100%);
  box-shadow:
    inset -22px -22px 42px rgba(160, 96, 0, .14),
    inset 16px 18px 36px rgba(255,255,255,.30),
    0 34px 54px rgba(133, 78, 4, .14);
}
.body::after,
.muzzle::after,
.arm::after,
.foot::after,
.fruit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.12) 0 1px, transparent 1.2px),
    radial-gradient(circle at 68% 62%, rgba(99,62,0,.08) 0 1px, transparent 1.2px);
  background-size: 11px 11px, 13px 13px;
  mix-blend-mode: soft-light;
  opacity: .75;
  pointer-events: none;
}
.ear {
  position: absolute;
  top: 28%;
  width: 19%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffe36b, #f5bb2b);
  box-shadow: inset -8px -8px 16px rgba(152, 89, 0, .13), inset 5px 5px 14px rgba(255,255,255,.24);
  z-index: 1;
}
.ear-left { left: 7%; transform: rotate(-20deg) translateZ(10px); }
.ear-right { right: 7%; transform: rotate(20deg) translateZ(10px); }
.ear i {
  position: absolute;
  inset: 26%;
  border-radius: 999px;
  background: rgba(210, 129, 16, .16);
}
.fruit {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 22%;
  height: 16%;
  transform: translateX(-50%) translateZ(80px);
  border-radius: 46%;
  background: linear-gradient(145deg, #ffc24e, #ff9412 65%, #ea7600);
  box-shadow: inset -9px -10px 16px rgba(108, 55, 0, .15), inset 7px 7px 14px rgba(255,255,255,.24), 0 12px 24px rgba(116, 67, 0, .16);
  z-index: 10;
}
.fruit i {
  position: absolute;
  left: 46%;
  top: -24%;
  width: 9%;
  height: 38%;
  border-radius: 999px;
  background: #408735;
  transform: rotate(-12deg);
}
.fruit b,
.fruit em {
  position: absolute;
  top: -22%;
  width: 42%;
  height: 30%;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(145deg, #5fab48, #327d32);
}
.fruit b { left: 50%; transform: rotate(-18deg); }
.fruit em { left: 30%; transform: rotate(210deg); }
.muzzle {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 75%;
  height: 31%;
  transform: translateX(-50%) translateZ(90px);
  border-radius: 54% 52% 48% 50%;
  background:
    radial-gradient(circle at 37% 20%, rgba(255,255,255,.24), transparent 18%),
    linear-gradient(145deg, #ffb43f 0%, #ff9e16 55%, #ed8504 100%);
  box-shadow: inset -17px -18px 30px rgba(116, 61, 0, .13), inset 14px 13px 24px rgba(255,255,255,.20), 0 18px 28px rgba(111, 59, 0, .08);
  z-index: 6;
}
.eye {
  position: absolute;
  top: 33%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #fff;
  transform: translateZ(118px);
  box-shadow: inset 0 -4px 10px rgba(90, 56, 0, .18), 0 4px 10px rgba(105, 65, 0, .12);
  z-index: 12;
  overflow: hidden;
  transition: height .25s ease, transform .25s ease;
}
.eye-left { left: 28%; }
.eye-right { right: 28%; }
.eye i {
  position: absolute;
  left: 23%;
  top: 22%;
  width: 58%;
  height: 58%;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 32%, #5b3e1a 0 12%, #151515 48%, #000 100%);
  transition: transform 0.12s ease-out;
}
.eye b {
  position: absolute;
  left: 35%;
  top: 25%;
  width: 21%;
  height: 21%;
  border-radius: 999px;
  background: #fff;
  box-shadow: 12px 18px 0 -4px rgba(255,255,255,.78);
}
.brow {
  position: absolute;
  top: 27%;
  width: 9%;
  height: 2.4%;
  border-radius: 999px;
  background: rgba(103, 60, 0, .55);
  z-index: 12;
  transform: translateZ(120px);
}
.brow-left { left: 31%; transform: translateZ(120px) rotate(-10deg); }
.brow-right { right: 31%; transform: translateZ(120px) rotate(10deg); }
.mouth {
  position: absolute;
  left: 50%;
  top: 58.5%;
  width: 13%;
  height: 6%;
  transform: translateX(-50%) translateZ(130px);
  border-radius: 0 0 999px 999px;
  background: radial-gradient(circle at 50% 80%, #e95d4d 0 20%, #5f2119 62%);
  z-index: 13;
  box-shadow: inset 0 3px 2px rgba(0,0,0,.18);
  transition: all .22s ease;
}
.overall {
  position: absolute;
  left: 50%;
  top: 68%;
  width: 47%;
  height: 20%;
  transform: translateX(-50%) translateZ(75px);
  border-radius: 28px 28px 34px 34px;
  background: linear-gradient(180deg, #fff6d7, #f7e3b1);
  box-shadow: inset 0 8px 18px rgba(255,255,255,.58), 0 10px 20px rgba(100, 61, 0, .1);
  border: 1px solid rgba(113, 72, 18, .08);
  z-index: 10;
}
.overall::before,
.overall::after {
  content: "";
  position: absolute;
  top: -12%;
  width: 17%;
  height: 70%;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6d7, #efd59c);
}
.overall::before { left: 14%; transform: rotate(-8deg); }
.overall::after { right: 14%; transform: rotate(8deg); }
.overall i,
.overall b {
  position: absolute;
  top: 14%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffbf45, #da8d12);
  box-shadow: inset -2px -2px 4px rgba(85,42,0,.2), inset 2px 2px 4px rgba(255,255,255,.28);
  z-index: 2;
}
.overall i { left: 20%; }
.overall b { right: 20%; }
.arm {
  position: absolute;
  top: 66%;
  width: 15%;
  height: 22%;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffdb61, #f0b92d);
  box-shadow: inset -9px -8px 15px rgba(130, 77, 0, .12), inset 5px 7px 14px rgba(255,255,255,.22), 0 8px 16px rgba(108, 65, 0, .12);
  z-index: 12;
}
.arm-left { left: 17%; transform: translateZ(86px) rotate(8deg); transform-origin: top center; }
.arm-right { right: 17%; transform: translateZ(86px) rotate(-8deg); transform-origin: top center; }
.foot {
  position: absolute;
  bottom: 0;
  width: 19%;
  height: 15%;
  border-radius: 999px 999px 44% 44%;
  background: linear-gradient(145deg, #ffd855, #eba722);
  box-shadow: inset -8px -8px 16px rgba(127, 74, 0, .14), inset 5px 7px 14px rgba(255,255,255,.22), 0 8px 12px rgba(110, 61, 0, .12);
  z-index: 4;
}
.foot-left { left: 30%; transform: translateZ(38px); }
.foot-right { right: 30%; transform: translateZ(38px); }
.tail {
  position: absolute;
  right: 2%;
  top: 64%;
  width: 25%;
  height: 10%;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffb143, #ed7d05);
  transform: translateZ(-10px) rotate(23deg);
  box-shadow: inset -7px -7px 14px rgba(116,61,0,.12), 0 8px 18px rgba(116,61,0,.12);
  z-index: -1;
}
.tail span {
  position: absolute;
  right: -1%;
  top: -9%;
  width: 21%;
  height: 40%;
  border-radius: 100% 0 100% 0;
  background: #3e9237;
  transform: rotate(-18deg);
}
.speech {
  position: absolute;
  left: 50%;
  top: 5%;
  padding: 10px 14px;
  border-radius: 999px;
  transform: translateX(-50%) translateZ(190px) translateY(12px) scale(.84);
  background: rgba(255,255,255,.88);
  color: #f05f8a;
  font-size: 14px;
  font-weight: 1000;
  box-shadow: 0 14px 28px rgba(116, 61, 0, .13);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
  z-index: 30;
}
.speech.show { opacity: 1; transform: translateX(-50%) translateZ(190px) translateY(-8px) scale(1); }
.shadow {
  position: absolute;
  bottom: 42px;
  left: 50%;
  width: min(58vw, 310px);
  height: 44px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(105, 63, 0, .13);
  filter: blur(8px);
  z-index: -1;
}
.app[data-theme="night"] .shadow { background: rgba(0,0,0,.38); }

.info-panel h2 { margin: 2px 0 14px; font-size: 22px; letter-spacing: -0.02em; }
.tips { display: grid; gap: 10px; }
.tips p {
  margin: 0;
  padding: 14px;
  border-radius: 22px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 760;
}
.tips b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: #5a3507;
}
.progress-card,
.install-box {
  margin-top: 16px;
  padding: 16px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 224, 136, .42), rgba(255, 255, 255, .5));
  border: 1px solid var(--line);
}
.app[data-theme="night"] .progress-card,
.app[data-theme="night"] .install-box { background: rgba(255, 255, 255, 0.06); }
.progress-title { display: flex; justify-content: space-between; align-items: center; font-weight: 1000; margin-bottom: 14px; }
.ring {
  --p: 0%;
  width: 150px;
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: conic-gradient(#ff9f21 var(--p), rgba(255, 159, 33, .14) 0);
  position: relative;
}
.ring::after {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: inherit;
  background: var(--panel-strong);
}
.ring span { position: relative; z-index: 2; font-size: 22px; font-weight: 1000; }
.install-box strong { display: block; margin-bottom: 8px; font-size: 15px; }
.install-box span { display: block; color: var(--muted); font-size: 14px; line-height: 1.65; font-weight: 780; }
.footer { max-width: 1420px; margin: 18px auto 0; text-align: center; color: var(--muted); font-size: 13px; font-weight: 900; }

.low .mouth { width: 16%; height: 3.2%; border-radius: 999px; background: rgba(82, 45, 12, .78); }
.low .eye { transform: translateZ(118px) scaleY(.74); }
.good .mouth { width: 13%; height: 4%; border-radius: 999px; }
.happy .mouth { width: 15%; height: 7%; border-radius: 0 0 999px 999px; }
.happy .eye { transform: translateZ(118px) scaleY(1.04); }
.sleep .eye { transform: translateZ(118px) scaleY(.12); }
.sleep .mouth { width: 11%; height: 3%; border-radius: 999px; }
.sleep .fruit { animation: fruitBob 2s ease-in-out infinite; }
.dance .arm-left { animation: armDanceLeft .42s ease-in-out infinite; }
.dance .arm-right { animation: armDanceRight .42s ease-in-out infinite; }
.dance .tail { animation: tailWag .35s ease-in-out infinite; }
.pet .arm-left { animation: armPetLeft .5s ease-in-out infinite; }
.pet .arm-right { animation: armPetRight .5s ease-in-out infinite; }
.feed .muzzle { animation: chew .34s ease-in-out 3; }
.feed .fruit { animation: fruitBob .34s ease-in-out 2; }
.level-up { animation: levelGlow 1.4s ease-out; }

@keyframes drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(18px,-14px,0) scale(1.06); } }
@keyframes particleFloat { 0% { transform: translateY(24px) scale(.55); opacity: 0; } 45% { opacity: .85; } 100% { transform: translateY(-52px) scale(1.12); opacity: 0; } }
@keyframes drop { to { transform: translateY(calc(100vh + 90px)); opacity: .1; } }
@keyframes fruitSpin { 0%,100% { rotate: -8deg; } 50% { rotate: 8deg; } }
@keyframes pop { 0% { transform: translateY(0) scale(.8); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-46px) scale(1.28); opacity: 0; } }
@keyframes idleFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes feedBounce { 0%,100% { translate: 0 0; scale: 1; } 45% { translate: 0 -10px; scale: 1.055; } }
@keyframes petWiggle { 0%,100% { rotate: 0deg; } 20% { rotate: -3deg; } 45% { rotate: 4deg; } 70% { rotate: -2deg; } }
@keyframes dance { 0%,100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -18px; rotate: 4deg; } }
@keyframes sleep { 0%,100% { translate: 0 11px; rotate: -2deg; } 50% { translate: 0 15px; rotate: -4deg; } }
@keyframes armDanceLeft { 0%,100% { transform: translateZ(86px) rotate(18deg); } 50% { transform: translateZ(86px) rotate(-24deg); } }
@keyframes armDanceRight { 0%,100% { transform: translateZ(86px) rotate(-18deg); } 50% { transform: translateZ(86px) rotate(24deg); } }
@keyframes armPetLeft { 0%,100% { transform: translateZ(86px) rotate(4deg); } 50% { transform: translateZ(86px) rotate(18deg); } }
@keyframes armPetRight { 0%,100% { transform: translateZ(86px) rotate(-4deg); } 50% { transform: translateZ(86px) rotate(-18deg); } }
@keyframes tailWag { 0%,100% { transform: translateZ(-10px) rotate(13deg); } 50% { transform: translateZ(-10px) rotate(34deg); } }
@keyframes chew { 0%,100% { scale: 1; } 50% { scale: 1.045 .96; } }
@keyframes fruitBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes levelGlow { 0% { filter: drop-shadow(0 0 0 rgba(255, 184, 48, 0)); } 35% { filter: drop-shadow(0 0 34px rgba(255, 184, 48, .95)); } 100% { filter: drop-shadow(0 26px 34px rgba(116, 68, 5, 0.16)); } }

@media (max-width: 1120px) {
  .layout { grid-template-columns: 1fr; }
  .panel { position: relative; }
  .stats-panel { order: 2; }
  .stage-panel { order: 1; min-height: 660px; }
  .info-panel { order: 3; }
  .actions { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .app { padding: 12px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .chip { padding: 10px 8px; font-size: 13px; }
  .stage-panel { min-height: 590px; padding: 12px; border-radius: 28px; }
  .pet-stage { height: 430px; margin-top: 22px; }
  .lulu { width: min(86vw, 320px); }
  .actions { grid-template-columns: 1fr 1fr; }
  .message { border-radius: 20px; width: 100%; }
  .mood-pill { width: 100%; justify-content: space-between; }
}