:root{
  --bg1:#fde2ea;
  --bg2:#dbeafe;
  --card:#ffffffcc;
  --cardSolid:#fff;
  --text:#18181b;
  --muted:#71717a;
  --pink:#fb7185;
  --pink2:#f472b6;
  --shadow:0 18px 40px rgba(15,23,42,.10);
  --ring:0 0 0 4px rgba(251,113,133,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(1200px 600px at 20% 0%, var(--bg1), transparent 60%),
             radial-gradient(1200px 600px at 80% 0%, var(--bg2), transparent 60%),
             linear-gradient(135deg, #fff, #f8fafc);
}

.app{max-width:1100px;margin:0 auto;padding:20px 16px 28px}

.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.title{font-size:20px;font-weight:700;letter-spacing:.2px}
.subtitle{font-size:12px;color:var(--muted);margin-top:4px}
.topbar-actions{display:flex;align-items:center;gap:10px}

.pill{
  border:1px solid rgba(24,24,27,.10);
  background:rgba(255,255,255,.55);
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  cursor:default;
  backdrop-filter:blur(10px);
}
.pill.ok{color:#0f766e;border-color:rgba(15,118,110,.25);background:rgba(240,253,250,.7)}
.pill.err{color:#b91c1c;border-color:rgba(185,28,28,.25);background:rgba(254,242,242,.75)}
.pill.save{color:#a21caf;border-color:rgba(162,28,175,.18);background:rgba(253,244,255,.75)}

.iconBtn{
  width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(24,24,27,.10);
  background:rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:transform .12s ease, box-shadow .12s ease;
}
.iconBtn:active{transform:translateY(1px)}
.iconBtn:focus-visible{outline:none;box-shadow:var(--ring)}

.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:16px}
@media (max-width: 880px){.grid{grid-template-columns:1fr;}}

.card{
  background:var(--card);
  border:1px solid rgba(24,24,27,.08);
  border-radius:20px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.cardHead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}
.cardTitle{font-weight:700;font-size:14px}

.chip{
  border:1px solid rgba(24,24,27,.10);
  background:rgba(255,255,255,.7);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.chip:active{transform:translateY(1px)}
.chip:focus-visible{outline:none;box-shadow:var(--ring)}

.stage{min-height:420px;position:relative;overflow:hidden}
.petWrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px 10px}

.pet{
  width:170px;height:170px;border-radius:38px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border:1px solid rgba(24,24,27,.08);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 25px rgba(251,113,133,.18);
  position:relative;
  transform:translateZ(0);
  animation:floaty 3.2s ease-in-out infinite;
}

.pet[data-type="cat"]::before{content:"🐱";font-size:92px;transform:translateY(3px)}
.pet[data-type="rabbit"]::before{content:"🐰";font-size:92px;transform:translateY(3px)}

.pet[data-anim="eat"]{animation:floaty 3.2s ease-in-out infinite, bounce .6s ease-in-out 1}
.pet[data-anim="clean"]{animation:floaty 3.2s ease-in-out infinite, wiggle .55s ease-in-out 1}
.pet[data-anim="happy"]{animation:floaty 3.2s ease-in-out infinite, swing .65s ease-in-out 1}
.pet[data-anim="sleep"]{animation:floaty 3.2s ease-in-out infinite, sleepy 1.2s ease-in-out infinite}

.bubble{
  margin-top:10px;
  padding:10px 12px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(24,24,27,.08);
  border-radius:14px;
  font-size:13px;
  color:rgba(24,24,27,.85);
  position:relative;
  max-width:280px;
}
.bubble::after{
  content:"";
  position:absolute;
  width:14px;height:14px;
  background:rgba(255,255,255,.8);
  border-left:1px solid rgba(24,24,27,.08);
  border-bottom:1px solid rgba(24,24,27,.08);
  left:26px;bottom:-7px;
  transform:rotate(45deg);
}

.levelLine{margin-top:10px;font-size:12px;color:var(--muted)}
.hint{padding:0 16px 14px;color:#b45309;font-size:12px;min-height:18px}

.side{display:flex;flex-direction:column;gap:16px}

.stats{padding:6px 16px 14px;display:flex;flex-direction:column;gap:10px}
.statRow{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center}
.sIcon{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.14)}
.sName{font-size:13px;color:rgba(24,24,27,.85)}
.sValue{font-size:12px;color:var(--pink)}
.bar{grid-column:2/4;height:10px;border-radius:999px;background:rgba(24,24,27,.06);overflow:hidden;border:1px solid rgba(24,24,27,.06)}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--pink2));width:0%;transition:width .35s ease}
.low .fill{background:linear-gradient(90deg,#fb7185,#f97316)}

.actions{padding:8px 12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.action{
  display:flex;gap:10px;align-items:center;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(24,24,27,.08);
  background:rgba(255,255,255,.75);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.action:hover{box-shadow:0 10px 24px rgba(15,23,42,.08);background:rgba(255,255,255,.9)}
.action:active{transform:translateY(1px)}
.action:disabled{opacity:.55;cursor:not-allowed}
.aIcon{width:34px;height:34px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.14);font-size:18px}
.aTitle{font-weight:700;font-size:13px}
.aSub{font-size:11px;color:var(--muted);margin-top:2px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.footer{margin-top:16px;text-align:center;color:rgba(113,113,122,.9);font-size:12px}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bounce{0%{transform:translateY(0)}35%{transform:translateY(-14px)}100%{transform:translateY(0)}}
@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}100%{transform:rotate(0)}}
@keyframes swing{0%{transform:rotate(0)}30%{transform:rotate(6deg)}60%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
@keyframes sleepy{0%,100%{filter:saturate(1)}50%{filter:saturate(.75)}}