:root {
  --bg: #f4f7fb;
  --ink: #142033;
  --muted: #647084;
  --line: #d9e1ec;
  --panel: #ffffff;
  --blue: #4f7cff;
  --green: #20a779;
  --coral: #ef6b5b;
  --yellow: #f4b740;
  --shadow: 0 18px 55px rgba(25, 40, 74, 0.13);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    linear-gradient(135deg, rgba(79, 124, 255, 0.12), transparent 38%),
    linear-gradient(225deg, rgba(32, 167, 121, 0.12), transparent 42%),
    var(--bg);
}

button,
input {
  font: inherit;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 22px 18px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

h2 {
  margin-bottom: 0;
  font-size: 22px;
}

h3 {
  margin-bottom: 8px;
  font-size: 24px;
}

.sync-pill,
.count,
.level-badge {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 700;
}

.help-button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.help-button:hover {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  color: var(--blue);
}

.layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 22px 42px;
}

.panel {
  min-width: 0;
  border: 1px solid rgba(217, 225, 236, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  border-bottom: 1px solid var(--line);
}

.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue);
  background: #fff;
  cursor: pointer;
  font-size: 22px;
}

.adopt-view,
.care-view {
  padding: 22px;
}

.adopt-copy p,
#ownerLine {
  color: var(--muted);
  line-height: 1.65;
}

.adopt-form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  background: #fff;
  outline: none;
}

input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.14);
}

.species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}

.art-style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.species-card {
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.art-style-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  column-gap: 10px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--style-accent);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--style-accent) 22%, transparent), transparent 30%),
    #fff;
  cursor: pointer;
  text-align: left;
}

.style-egg-sprite {
  display: block;
  grid-row: span 2;
  width: 42px;
  height: 52px;
  background-image: var(--frame-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 8px 10px rgba(25, 40, 74, 0.14));
}

.species-card.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.14);
}

.art-style-card.selected {
  border-color: var(--style-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--style-accent) 18%, transparent);
}

.species-card span {
  display: block;
  font-size: 32px;
}

.adopt-egg {
  width: 42px;
  height: 54px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background-image: var(--frame-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  box-shadow: 0 10px 18px rgba(25, 40, 74, 0.12);
  color: transparent;
  font-size: 0;
}

.egg-mimi {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.92), transparent 18%),
    linear-gradient(145deg, #fff6d8, #ffd08a);
}

.egg-bobo {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.92), transparent 18%),
    linear-gradient(145deg, #e9f0ff, #9db9ff);
}

.egg-lulu {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.92), transparent 18%),
    linear-gradient(145deg, #ffe7e9, #ff9fa2);
}

.egg-nana {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.92), transparent 18%),
    linear-gradient(145deg, #e7fff3, #86ddba);
}

.egg-kiki {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.92), transparent 18%),
    linear-gradient(145deg, #fff9dc, #ffe07a);
}

.egg-dodo {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.92), transparent 18%),
    linear-gradient(145deg, #f2f4f8, #b8c0cc);
}

.adopt-egg::after {
  content: none;
  display: block;
  width: 68%;
  height: 18%;
  margin: 64% auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.species-card strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

.species-card em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.art-style-card span,
.art-style-card strong {
  display: block;
}

.art-style-card span {
  font-weight: 900;
}

.art-style-card strong {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.primary-button,
.care-actions button {
  border: 0;
  border-radius: 8px;
  padding: 13px 16px;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
  font-weight: 800;
}

.pet-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 238px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.pet-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--aura-size, 118px) * 0.92);
  height: var(--aura-size, 118px);
  border-radius: 999px;
  opacity: 0.14;
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--aura-color, #4f7cff) 46%, transparent) 0%,
      color-mix(in srgb, var(--aura-color, #4f7cff) 18%, transparent) 46%,
      transparent 72%);
  filter: blur(12px);
  transform: translate(-50%, -50%);
  transition: left 900ms ease, top 900ms ease, width 260ms ease, height 260ms ease;
}

.pet-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  line-height: 1;
  transform: translate(-50%, -50%) scaleX(var(--face, 1));
  transition: left 900ms ease, top 900ms ease, filter 220ms ease;
  user-select: none;
}

.pet-body {
  position: relative;
  width: var(--pet-size);
  height: calc(var(--pet-size) * 0.88);
  border: 4px solid rgba(29, 42, 66, 0.18);
  border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.9), transparent 16%),
    linear-gradient(150deg, color-mix(in srgb, var(--pet-color) 80%, white), color-mix(in srgb, var(--pet-color) 72%, #22304d));
  box-shadow: inset -12px -16px 0 rgba(18, 31, 54, 0.1), 0 18px 30px rgba(25, 40, 74, 0.18);
}

.sprite-body {
  display: grid;
  place-items: center;
  width: calc(var(--pet-size) * 1.08);
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pet-sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-image: var(--frame-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 18px 18px rgba(25, 40, 74, 0.18));
  transform: translate(-50%, -50%);
}

.sprite-body .stage-mark {
  right: -8px;
  bottom: -6px;
  z-index: 2;
}

.sprite-body .pet-shadow {
  left: 18%;
  right: 18%;
  bottom: -10%;
  z-index: -1;
}

.egg-shine,
.pet-shadow,
.tail,
.wing,
.ear,
.horn,
.crest,
.face,
.belly,
.paw,
.stage-mark {
  position: absolute;
}

.egg-shine {
  display: none;
  left: 23%;
  top: 16%;
  width: 22%;
  height: 31%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  transform: rotate(28deg);
}

.pet-shadow {
  left: 18%;
  right: 18%;
  bottom: -17%;
  height: 12%;
  border-radius: 999px;
  background: rgba(25, 40, 74, 0.15);
  filter: blur(3px);
}

.face {
  left: 50%;
  top: 42%;
  width: 58%;
  height: 38%;
  transform: translate(-50%, -50%);
}

.eye {
  position: absolute;
  top: 18%;
  width: 14%;
  height: 24%;
  border-radius: 999px;
  background: #172033;
  box-shadow: inset 2px 3px 0 rgba(255, 255, 255, 0.45);
}

.eye-left {
  left: 20%;
}

.eye-right {
  right: 20%;
}

.mouth {
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: 24%;
  height: 15%;
  border-bottom: 4px solid #172033;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.belly {
  left: 50%;
  bottom: 13%;
  width: 42%;
  height: 34%;
  border-radius: 999px 999px 48% 48%;
  background: rgba(255, 255, 255, 0.38);
  transform: translateX(-50%);
}

.ear {
  display: none;
  top: -11%;
  width: 28%;
  height: 32%;
  border: 4px solid rgba(29, 42, 66, 0.15);
  background: color-mix(in srgb, var(--pet-color) 74%, white);
  z-index: -1;
}

.ear-left {
  left: 10%;
  border-radius: 72% 22% 55% 26%;
  transform: rotate(-22deg);
}

.ear-right {
  right: 10%;
  border-radius: 22% 72% 26% 55%;
  transform: rotate(22deg);
}

.tail {
  display: none;
  right: -18%;
  top: 44%;
  width: 36%;
  height: 18%;
  border: 8px solid color-mix(in srgb, var(--pet-color) 74%, #293753);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  transform: rotate(-20deg);
  z-index: -1;
}

.wing {
  display: none;
  top: 38%;
  width: 34%;
  height: 30%;
  border-radius: 70% 30% 70% 30%;
  background: rgba(255, 255, 255, 0.46);
  z-index: -1;
}

.wing-left {
  left: -20%;
  transform: rotate(-24deg);
}

.wing-right {
  right: -20%;
  transform: rotate(24deg) scaleX(-1);
}

.horn {
  display: none;
  left: 50%;
  top: -21%;
  width: 20%;
  height: 30%;
  border-radius: 80% 80% 18% 18%;
  background: linear-gradient(#fff6c8, #f3b64b);
  transform: translateX(-50%);
  z-index: -1;
}

.crest {
  display: none;
  left: 50%;
  top: -14%;
  width: 38%;
  height: 24%;
  border-radius: 50% 50% 20% 20%;
  background: color-mix(in srgb, var(--pet-color) 68%, #f4b740);
  transform: translateX(-50%);
  z-index: -1;
}

.paw {
  display: none;
  bottom: -4%;
  width: 24%;
  height: 16%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pet-color) 58%, white);
}

.paw-left {
  left: 18%;
}

.paw-right {
  right: 18%;
}

.stage-mark {
  right: -8%;
  bottom: 4%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  color: #fff;
  background: #172033;
  font-size: 12px;
  font-weight: 900;
}

.style-gem {
  left: 50%;
  top: 63%;
  width: 13%;
  height: 13%;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 45% 55% 50% 50%;
  background: var(--pet-accent);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 12px color-mix(in srgb, var(--pet-accent) 52%, transparent);
}

.pet-body.art-korean {
  border-color: color-mix(in srgb, var(--pet-accent) 34%, rgba(29, 42, 66, 0.16));
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.96), transparent 15%),
    radial-gradient(circle at 74% 28%, color-mix(in srgb, var(--pet-accent) 35%, transparent), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--pet-color) 62%, white), color-mix(in srgb, var(--pet-accent) 42%, var(--pet-color)));
  box-shadow: inset -10px -16px 0 rgba(255, 126, 200, 0.12), 0 0 0 7px rgba(255, 126, 200, 0.1), 0 20px 34px rgba(25, 40, 74, 0.2);
}

.pet-body.art-korean .eye {
  height: 28%;
  background: linear-gradient(#273654, #0e1728);
  box-shadow: inset 2px 4px 0 #fff, 0 0 8px rgba(255, 255, 255, 0.55);
}

.pet-body.art-japanese {
  border-width: 3px;
  border-color: rgba(39, 54, 84, 0.2);
  border-radius: 54% 54% 46% 46%;
  background:
    radial-gradient(circle at 33% 24%, rgba(255, 255, 255, 0.96), transparent 18%),
    linear-gradient(150deg, color-mix(in srgb, var(--pet-color) 52%, white), color-mix(in srgb, var(--pet-accent) 42%, white));
}

.pet-body.art-japanese .eye {
  width: 16%;
  height: 29%;
  border-radius: 65% 65% 50% 50%;
}

.pet-body.art-japanese .mouth {
  width: 18%;
  border-bottom-width: 3px;
}

.pet-body.art-chinese {
  border-color: color-mix(in srgb, var(--pet-accent) 42%, rgba(29, 42, 66, 0.18));
  background:
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, 0.9), transparent 14%),
    linear-gradient(155deg, color-mix(in srgb, var(--pet-accent) 24%, #f3fff7), color-mix(in srgb, var(--pet-color) 66%, #1b5b4f));
}

.pet-body.art-chinese::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 64%;
  height: 14%;
  border-top: 3px solid rgba(255, 255, 255, 0.42);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.pet-body.art-chinese .horn {
  background: linear-gradient(#fff3c8, #d6ad4b);
}

.pet-body.art-american {
  border-width: 6px;
  border-color: rgba(23, 32, 51, 0.34);
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.95), transparent 15%),
    linear-gradient(145deg, color-mix(in srgb, var(--pet-color) 72%, #fff0cf), color-mix(in srgb, var(--pet-accent) 54%, #26395f));
  box-shadow: inset -12px -14px 0 rgba(23, 32, 51, 0.18), 0 18px 30px rgba(25, 40, 74, 0.24);
}

.pet-body.art-american .eye {
  width: 15%;
  height: 20%;
}

.pet-body.art-american .mouth {
  width: 30%;
  height: 18%;
  border-bottom-width: 5px;
}

.pet-body.stage-1 {
  height: calc(var(--pet-size) * 1.08);
  border-radius: 54% 54% 48% 48%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.92), transparent 16%),
    linear-gradient(150deg, #fff6dc, color-mix(in srgb, var(--pet-color) 28%, #fff0a8));
}

.pet-body.stage-1 .egg-shine {
  display: block;
}

.pet-body.stage-1 .face,
.pet-body.stage-1 .belly,
.pet-body.stage-1 .paw,
.pet-body.stage-1 .stage-mark {
  display: none;
}

.pet-body.stage-2 .face,
.pet-body.stage-3 .face {
  top: 48%;
}

.pet-body.stage-3 .paw,
.pet-body.stage-4 .paw,
.pet-body.stage-5 .paw,
.pet-body.stage-6 .paw,
.pet-body.stage-7 .paw,
.pet-body.stage-8 .paw,
.pet-body.stage-9 .paw,
.pet-body.stage-10 .paw {
  display: block;
}

.pet-body.stage-4 .ear,
.pet-body.stage-5 .ear,
.pet-body.stage-6 .ear,
.pet-body.stage-7 .ear,
.pet-body.stage-8 .ear,
.pet-body.stage-9 .ear,
.pet-body.stage-10 .ear {
  display: block;
}

.pet-body.stage-5 .tail,
.pet-body.stage-6 .tail,
.pet-body.stage-7 .tail,
.pet-body.stage-8 .tail,
.pet-body.stage-9 .tail,
.pet-body.stage-10 .tail {
  display: block;
}

.pet-body.stage-6 .crest,
.pet-body.stage-7 .crest,
.pet-body.stage-8 .crest,
.pet-body.stage-9 .crest,
.pet-body.stage-10 .crest {
  display: block;
}

.pet-body.stage-7 .wing,
.pet-body.stage-8 .wing,
.pet-body.stage-9 .wing,
.pet-body.stage-10 .wing {
  display: block;
}

.pet-body.stage-8 .horn,
.pet-body.stage-9 .horn,
.pet-body.stage-10 .horn {
  display: block;
}

.pet-body.stage-9 {
  filter: saturate(1.15);
}

.pet-body.stage-10 {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.95), transparent 16%),
    linear-gradient(150deg, color-mix(in srgb, var(--pet-color) 60%, #fff6b8), color-mix(in srgb, var(--pet-color) 72%, #1e3158));
  box-shadow: inset -12px -16px 0 rgba(18, 31, 54, 0.08), 0 0 0 8px rgba(244, 183, 64, 0.16), 0 22px 36px rgba(25, 40, 74, 0.22);
}

.pet-body.sprite-body {
  width: calc(var(--pet-size) * 1.08);
  height: auto;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.pet-body.sprite-body::after {
  content: none;
}

.pet-body.sprite-body .egg-shine,
.pet-body.sprite-body .tail,
.pet-body.sprite-body .wing,
.pet-body.sprite-body .ear,
.pet-body.sprite-body .horn,
.pet-body.sprite-body .crest,
.pet-body.sprite-body .face,
.pet-body.sprite-body .belly,
.pet-body.sprite-body .paw,
.pet-body.sprite-body .style-gem {
  display: none;
}

.pet-body.sprite-body .stage-mark {
  display: grid;
}

.pet-icon.is-idle {
  animation: pet-idle 2.8s ease-in-out infinite;
}

.pet-icon.is-walk {
  animation: pet-walk 520ms ease-in-out infinite;
}

.pet-icon.is-hop,
.pet-icon.is-sport {
  animation: pet-hop 620ms ease-in-out infinite;
}

.pet-icon.is-spin {
  animation: pet-spin 900ms ease-in-out;
}

.pet-icon.is-math {
  filter: drop-shadow(0 0 14px rgba(79, 124, 255, 0.42));
  animation: pet-focus 760ms ease-in-out infinite;
}

.pet-icon.is-chinese {
  filter: drop-shadow(0 0 14px rgba(239, 107, 91, 0.38));
  animation: pet-read 900ms ease-in-out infinite;
}

.pet-icon.is-english {
  filter: drop-shadow(0 0 14px rgba(32, 167, 121, 0.38));
  animation: pet-speak 640ms ease-in-out infinite;
}

.action-bubble {
  position: absolute;
  left: 50%;
  top: 18px;
  max-width: calc(100% - 32px);
  border: 1px solid rgba(217, 225, 236, 0.9);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(25, 40, 74, 0.12);
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  white-space: nowrap;
}

.action-bubble.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.stage-candy {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 54px;
  --candy-scale: 1;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 5px 7px;
  color: #233047;
  background: color-mix(in srgb, var(--candy-color) 16%, white);
  box-shadow: 0 9px 20px rgba(25, 40, 74, 0.16);
  cursor: pointer;
  transform: translate(-50%, -50%) scale(var(--candy-scale));
  animation: candy-float 2.4s ease-in-out infinite;
  z-index: 3;
}

.stage-candy span {
  font-size: 18px;
  line-height: 1;
}

.stage-candy em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.stage-candy.mature {
  background: color-mix(in srgb, var(--candy-color) 32%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--candy-color) 20%, transparent), 0 12px 26px rgba(25, 40, 74, 0.2);
}

.stage-candy.young {
  opacity: 0.88;
  padding: 4px 6px;
}

.stage-candy.young span {
  font-size: 15px;
}

.stage-candy.young em {
  font-size: 9px;
}

.candy-burst {
  position: absolute;
  left: 54%;
  top: 42%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--candy-color) 24%, white);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--candy-color) 14%, transparent);
  font-size: 25px;
  pointer-events: none;
  animation: candy-burst 1.05s ease forwards;
  z-index: 4;
}

@keyframes pet-idle {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) scaleX(var(--face, 1));
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px) scaleX(var(--face, 1));
  }
}

@keyframes pet-walk {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(-4deg) scaleX(var(--face, 1));
  }
  50% {
    transform: translate(-50%, -50%) rotate(5deg) scaleX(var(--face, 1));
  }
}

@keyframes pet-hop {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) scaleX(var(--face, 1));
  }
  45% {
    transform: translate(-50%, -50%) translateY(-30px) scaleX(var(--face, 1));
  }
}

@keyframes pet-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scaleX(var(--face, 1));
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scaleX(var(--face, 1));
  }
}

@keyframes pet-focus {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1) scaleX(var(--face, 1));
  }
  50% {
    transform: translate(-50%, -50%) scale(1.12) scaleX(var(--face, 1));
  }
}

@keyframes pet-read {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(-6deg) scaleX(var(--face, 1));
  }
  50% {
    transform: translate(-50%, -50%) rotate(6deg) scaleX(var(--face, 1));
  }
}

@keyframes pet-speak {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1) scaleX(var(--face, 1));
  }
  35% {
    transform: translate(-50%, -50%) scale(1.16, 0.9) scaleX(var(--face, 1));
  }
}

@keyframes candy-float {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) scale(var(--candy-scale));
  }
  50% {
    transform: translate(-50%, -50%) translateY(-6px) scale(var(--candy-scale));
  }
}

@keyframes candy-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -125%) scale(1.2);
  }
}

.pet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pet-tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.delete-pet-button {
  border: 1px solid rgba(239, 107, 91, 0.32);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--coral);
  background: rgba(239, 107, 91, 0.08);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.delete-pet-button:hover {
  background: rgba(239, 107, 91, 0.14);
}

.stats-grid {
  display: grid;
  gap: 12px;
  margin: 16px 0 18px;
}

.stat {
  display: grid;
  gap: 7px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf5;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.care-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.care-actions button:nth-child(2) {
  background: var(--coral);
}

.care-actions button:nth-child(3) {
  background: var(--green);
}

.care-actions button:nth-child(4) {
  background: var(--yellow);
  color: #2d2410;
}

.care-actions button:disabled {
  color: #7d8796;
  background: #e7edf5;
  cursor: not-allowed;
}

.pet-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
  padding: 22px;
}

.cloud-card {
  display: grid;
  gap: 12px;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.cloud-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cloud-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  font-size: 32px;
}

.cloud-icon-button {
  border: 0;
  cursor: pointer;
}

.cloud-icon-button:hover {
  transform: translateY(-1px);
}

.cloud-card h3 {
  margin: 0;
  font-size: 18px;
}

.cloud-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.cloud-candies {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 28px;
}

.cloud-candy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 5px 7px;
  color: var(--muted);
  background: color-mix(in srgb, var(--candy-color, #d9e1ec) 14%, #f4f7fb);
  font-size: 11px;
  font-weight: 800;
}

.cloud-candy b {
  font-size: 14px;
}

.cloud-candy.mature {
  color: #142033;
  background: color-mix(in srgb, var(--candy-color) 28%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--candy-color) 18%, transparent);
}

.cloud-candy.young {
  opacity: 0.78;
  transform: scale(0.9);
  transform-origin: center;
}

.empty-candy {
  background: #f4f7fb;
}

.mini-stats span {
  border-radius: 8px;
  padding: 8px;
  color: var(--muted);
  background: #f4f7fb;
  font-size: 12px;
  font-weight: 800;
}

.empty {
  grid-column: 1 / -1;
  color: var(--muted);
  padding: 28px;
  text-align: center;
}

.help-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(20, 32, 51, 0.38);
  z-index: 20;
}

.help-panel {
  width: min(760px, 100%);
  max-height: min(82vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(217, 225, 236, 0.95);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20, 32, 51, 0.24);
}

.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.help-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-height: calc(min(82vh, 760px) - 86px);
  overflow: auto;
  padding: 18px 22px 22px;
}

.help-content section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fbff;
}

.help-content h3 {
  margin-bottom: 8px;
  font-size: 17px;
}

.help-content p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.hidden {
  display: none;
}

@media (max-width: 860px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .help-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .topbar,
  .layout {
    padding-left: 14px;
    padding-right: 14px;
  }

  .species-grid,
  .art-style-grid,
  .care-actions,
  .mini-stats {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .help-modal {
    padding: 12px;
  }

  .help-head,
  .help-content {
    padding-left: 14px;
    padding-right: 14px;
  }
}