/* 宠物蛋 · 样式（.g-petegg 前缀） */

.g-petegg {
  gap: 8px;
  padding-bottom: calc(12px + var(--safe-b));
}

/* ---------------- 顶部 ---------------- */

.g-petegg .pe-top { min-height: 40px; align-items: center; gap: 8px; }
.g-petegg .pe-top-left { min-width: 0; }
.g-petegg .pe-top-left .g-title { font-size: 15px; font-weight: 800; }

.g-petegg .pe-stage-title {
  margin-top: 2px;
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g-petegg .pe-top-right { gap: 6px; }

.g-petegg .pe-btn.sm {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  touch-action: manipulation;
}

/* ---------------- 小窝场景 ---------------- */

.g-petegg .pe-scene {
  position: relative;
  flex: 1;
  min-height: 300px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(126, 231, 135, 0.18);
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(150, 220, 255, 0.14), transparent 60%),
    radial-gradient(70% 55% at 20% 100%, rgba(126, 231, 135, 0.16), transparent 62%),
    radial-gradient(70% 55% at 85% 100%, rgba(255, 209, 102, 0.1), transparent 62%),
    linear-gradient(180deg, #16283c 0%, #1a3344 38%, #1d3c38 70%, #24462f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -30px rgba(0, 0, 0, 0.95);
  -webkit-user-select: none;
  user-select: none;
}

.g-petegg .pe-stars { position: absolute; inset: 0; pointer-events: none; }
.g-petegg .pe-stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(235, 246, 255, 0.75);
  animation: peTwinkle 3.2s ease-in-out infinite;
}

.g-petegg .pe-stars i:nth-child(1) { left: 14%; top: 16%; animation-delay: 0s; }
.g-petegg .pe-stars i:nth-child(2) { left: 28%; top: 34%; animation-delay: 0.7s; width: 2px; height: 2px; }
.g-petegg .pe-stars i:nth-child(3) { left: 72%; top: 20%; animation-delay: 1.1s; }
.g-petegg .pe-stars i:nth-child(4) { left: 84%; top: 40%; animation-delay: 0.4s; width: 2px; height: 2px; }
.g-petegg .pe-stars i:nth-child(5) { left: 50%; top: 12%; animation-delay: 1.6s; }

@keyframes peTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.3); }
}

.g-petegg .pe-nest {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 66%;
  height: 19%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    repeating-linear-gradient(102deg, rgba(190, 150, 90, 0.5) 0 3px, rgba(120, 84, 44, 0.45) 3px 7px),
    radial-gradient(60% 80% at 50% 30%, #8a5f33, #4a2f18 75%, #34200f);
  box-shadow: inset 0 7px 14px rgba(0, 0, 0, 0.4), 0 8px 18px -8px rgba(0, 0, 0, 0.6);
}

.g-petegg .pe-nest-straw {
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  border: 2px dashed rgba(230, 194, 130, 0.25);
}

.g-petegg .pe-egg {
  position: absolute;
  left: 50%;
  bottom: calc(8% + 9%);
  width: min(26vw, 116px);
  aspect-ratio: 0.78;
  transform: translateX(-50%) scale(calc(0.82 + 0.22 * var(--egg-grow, 0)));
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background:
    radial-gradient(40% 34% at 35% 26%, rgba(255, 255, 255, 0.95), transparent 65%),
    radial-gradient(70% 80% at 60% 70%, #ead9c8, #cfb6a3 70%, #b99c88);
  box-shadow: inset -6px -8px 16px rgba(120, 90, 70, 0.25), 0 16px 26px -12px rgba(0, 0, 0, 0.55);
  animation: peEggIdle 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.g-petegg .pe-egg.hidden { display: none; }

.g-petegg .pe-egg-spot {
  position: absolute;
  border-radius: 50%;
  background: rgba(150, 190, 170, 0.45);
}
.g-petegg .pe-egg-spot.s1 { left: 24%; top: 42%; width: 12px; height: 10px; }
.g-petegg .pe-egg-spot.s2 { left: 58%; top: 28%; width: 9px; height: 8px; }
.g-petegg .pe-egg-spot.s3 { left: 50%; top: 62%; width: 14px; height: 11px; opacity: 0.6; }

.g-petegg .pe-egg-crack {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 2px solid rgba(120, 90, 70, 0.55);
  transform-origin: top center;
  opacity: 0;
  transition: opacity 0.3s;
}
.g-petegg .pe-egg-crack.c1 { left: 44%; top: 22%; height: 26px; transform: rotate(18deg); }
.g-petegg .pe-egg-crack.c2 { left: 52%; top: 34%; height: 20px; transform: rotate(-24deg); }
.g-petegg .pe-egg.cracking .pe-egg-crack { opacity: 1; }
.g-petegg .pe-egg.cracking { animation: peEggWiggle 0.9s ease-in-out infinite; }

@keyframes peEggIdle {
  0%, 100% { transform: translateX(-50%) scale(calc(0.82 + 0.22 * var(--egg-grow, 0))) rotate(0deg); }
  50% { transform: translateX(-50%) scale(calc(0.82 + 0.22 * var(--egg-grow, 0))) rotate(-1.6deg); }
}

@keyframes peEggWiggle {
  0%, 100% { transform: translateX(-50%) scale(calc(0.82 + 0.22 * var(--egg-grow, 0))) rotate(0deg); }
  25% { transform: translateX(-50%) scale(calc(0.82 + 0.22 * var(--egg-grow, 0))) rotate(2.4deg); }
  75% { transform: translateX(-50%) scale(calc(0.82 + 0.22 * var(--egg-grow, 0))) rotate(-2.4deg); }
}

/* ---------------- 宠物（CSS 几何） ---------------- */

.g-petegg .pe-pet {
  position: absolute;
  left: 50%;
  bottom: calc(8% + 5%);
  width: min(34vw, 150px);
  height: min(38vw, 168px);
  transform: translateX(-50%) scale(var(--pet-scale, 0.62));
  transform-origin: 50% 100%;
  animation: pePetIdle 2.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45));
}

.g-petegg .pe-pet.hidden { display: none; }
.g-petegg .pe-pet.stage-baby { --pet-scale: 0.62; }
.g-petegg .pe-pet.stage-teen { --pet-scale: 0.82; }
.g-petegg .pe-pet.stage-adult { --pet-scale: 1; }

@keyframes pePetIdle {
  0%, 100% { transform: translateX(-50%) scale(var(--pet-scale, 0.62)) translateY(0); }
  50% { transform: translateX(-50%) scale(var(--pet-scale, 0.62)) translateY(-4px); }
}

.g-petegg .pe-body {
  position: absolute;
  left: 12%;
  bottom: 0;
  width: 76%;
  height: 54%;
  border-radius: 48% 48% 42% 42%;
  background: radial-gradient(60% 60% at 36% 28%, rgba(255, 255, 255, 0.35), transparent 62%), var(--pet-c, #f2b36a);
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.g-petegg .pe-belly {
  position: absolute;
  left: 20%;
  bottom: 8%;
  width: 60%;
  height: 62%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0.55;
}

.g-petegg .pe-head {
  position: absolute;
  left: 16%;
  top: 0;
  width: 68%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 34% 26%, rgba(255, 255, 255, 0.35), transparent 62%), var(--pet-c, #f2b36a);
  z-index: 3;
}

.g-petegg .pe-ear {
  position: absolute;
  top: -6%;
  width: 24%;
  height: 22%;
  background: var(--pet-c, #f2b36a);
  z-index: 2;
}
.g-petegg .pe-ear.left { left: 14%; transform: rotate(-18deg); }
.g-petegg .pe-ear.right { right: 14%; transform: rotate(18deg); }

.g-petegg .pe-eye {
  position: absolute;
  top: 40%;
  width: 14%;
  height: 20%;
  border-radius: 50%;
  background: #2b2b33;
  z-index: 4;
  animation: peBlink 4.6s infinite;
}
.g-petegg .pe-eye.left { left: 22%; }
.g-petegg .pe-eye.right { right: 22%; }
.g-petegg .pe-eye::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 10%;
  width: 40%;
  height: 34%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

@keyframes peBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.12); }
}

.g-petegg .pe-mouth {
  position: absolute;
  left: 50%;
  top: 66%;
  width: 16%;
  height: 10%;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  border-bottom: 2px solid #7a5544;
  z-index: 4;
}

.g-petegg .pe-blush {
  position: absolute;
  top: 62%;
  width: 16%;
  height: 9%;
  border-radius: 50%;
  background: rgba(255, 130, 140, 0.45);
  z-index: 4;
}
.g-petegg .pe-blush.left { left: 10%; }
.g-petegg .pe-blush.right { right: 10%; }

.g-petegg .pe-tail {
  position: absolute;
  right: 4%;
  bottom: 24%;
  width: 26%;
  height: 26%;
  border: 6px solid var(--pet-a, #d98a3d);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(24deg);
  z-index: 0;
  animation: peTail 1.8s ease-in-out infinite;
}

@keyframes peTail {
  0%, 100% { transform: rotate(24deg); }
  50% { transform: rotate(10deg); }
}

.g-petegg .pe-wing,
.g-petegg .pe-horn,
.g-petegg .pe-spikes,
.g-petegg .pe-tentacles { display: none; }

/* 猫 */
.g-petegg .species-cat .pe-ear {
  width: 0;
  height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-bottom: 28px solid var(--pet-c, #f2b36a);
  background: transparent;
  top: -12%;
}
.g-petegg .species-cat .pe-ear.left { left: 10%; transform: rotate(-14deg); }
.g-petegg .species-cat .pe-ear.right { right: 10%; transform: rotate(14deg); }

/* 狗 */
.g-petegg .species-dog .pe-ear {
  width: 26%;
  height: 30%;
  border-radius: 60% 20% 60% 60%;
  top: 8%;
  background: var(--pet-a, #9c6a3a);
}
.g-petegg .species-dog .pe-ear.left { left: 4%; transform: rotate(16deg); }
.g-petegg .species-dog .pe-ear.right { right: 4%; transform: rotate(-16deg); }

/* 兔 */
.g-petegg .species-rabbit .pe-ear {
  width: 18%;
  height: 42%;
  border-radius: 50% 50% 40% 40%;
  top: -34%;
  background: var(--pet-c, #f7ece6);
}
.g-petegg .species-rabbit .pe-ear.left { left: 22%; transform: rotate(-6deg); }
.g-petegg .species-rabbit .pe-ear.right { right: 22%; transform: rotate(6deg); }
.g-petegg .species-rabbit .pe-ear::after {
  content: "";
  position: absolute;
  inset: 16% 24%;
  border-radius: inherit;
  background: rgba(240, 170, 180, 0.65);
}

/* 龙 */
.g-petegg .species-dragon .pe-ear { display: none; }
.g-petegg .species-dragon .pe-horn {
  display: block;
  position: absolute;
  top: -14%;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 24px solid var(--pet-a, #3f9e54);
  z-index: 2;
}
.g-petegg .species-dragon .pe-horn.left { left: 22%; transform: rotate(-16deg); }
.g-petegg .species-dragon .pe-horn.right { right: 22%; transform: rotate(16deg); }
.g-petegg .species-dragon .pe-spikes {
  display: block;
  position: absolute;
  left: 40%;
  top: -10%;
  width: 20%;
  height: 12%;
  background: radial-gradient(circle at 50% 100%, var(--pet-a, #3f9e54) 0 46%, transparent 48%);
  z-index: 1;
}
.g-petegg .species-dragon .pe-wing {
  display: block;
  position: absolute;
  top: 38%;
  width: 30%;
  height: 36%;
  background: var(--pet-a, #3f9e54);
  opacity: 0.8;
  border-radius: 70% 10% 60% 20%;
  z-index: 0;
}
.g-petegg .species-dragon .pe-wing.left { left: -10%; transform: rotate(-16deg); }
.g-petegg .species-dragon .pe-wing.right { right: -10%; transform: scaleX(-1) rotate(-16deg); }

/* 水母 */
.g-petegg .species-jelly .pe-ear,
.g-petegg .species-jelly .pe-tail,
.g-petegg .species-jelly .pe-wing { display: none; }
.g-petegg .species-jelly .pe-body {
  left: 10%;
  bottom: 20%;
  width: 80%;
  height: 62%;
  border-radius: 50% 50% 42% 42% / 64% 64% 36% 36%;
  background: radial-gradient(60% 55% at 38% 26%, rgba(255, 255, 255, 0.55), transparent 60%), var(--pet-c, #c7b3f5);
  opacity: 0.92;
}
.g-petegg .species-jelly .pe-head { left: 12%; width: 76%; height: 56%; opacity: 0.9; }
.g-petegg .species-jelly .pe-tentacles {
  display: block;
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 26%;
  z-index: 0;
}
.g-petegg .species-jelly .pe-tentacles::before,
.g-petegg .species-jelly .pe-tentacles::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 7%;
  height: 100%;
  border-radius: 999px;
  background: var(--pet-c, #c7b3f5);
  opacity: 0.8;
}
.g-petegg .species-jelly .pe-tentacles::before { left: 16%; transform: rotate(6deg); }
.g-petegg .species-jelly .pe-tentacles::after { right: 16%; transform: rotate(-6deg); }

/* 鸟 */
.g-petegg .species-bird .pe-ear,
.g-petegg .species-bird .pe-tail { display: none; }
.g-petegg .species-bird .pe-body { height: 52%; border-radius: 50%; }
.g-petegg .species-bird .pe-head { left: 20%; width: 60%; height: 46%; }
.g-petegg .species-bird .pe-mouth {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #ffb454;
  border-bottom: 0;
  border-radius: 0;
  top: 62%;
}
.g-petegg .species-bird .pe-wing {
  display: block;
  position: absolute;
  top: 42%;
  width: 26%;
  height: 30%;
  border-radius: 60% 20% 60% 30%;
  background: var(--pet-a, #e0a41c);
  opacity: 0.85;
  z-index: 0;
}
.g-petegg .species-bird .pe-wing.left { left: -4%; transform: rotate(-14deg); }
.g-petegg .species-bird .pe-wing.right { right: -4%; transform: scaleX(-1) rotate(-14deg); }

/* 动作动画 */
.g-petegg .pe-pet.act-pet { animation: pePetHappy 0.55s ease; }
.g-petegg .pe-pet.act-play { animation: pePetJump 0.6s ease; }
.g-petegg .pe-pet.act-feed .pe-mouth { animation: peChew 0.4s ease 2; }
.g-petegg .pe-pet.act-clean { animation: peShake 0.6s ease; }

@keyframes pePetHappy {
  0%, 100% { transform: translateX(-50%) scale(var(--pet-scale, 0.62)); }
  40% { transform: translateX(-50%) scale(var(--pet-scale, 0.62)) translateY(-8px) rotate(-3deg); }
}
@keyframes pePetJump {
  0%, 100% { transform: translateX(-50%) scale(var(--pet-scale, 0.62)); }
  35% { transform: translateX(-50%) scale(var(--pet-scale, 0.62)) translateY(-26px); }
  60% { transform: translateX(-50%) scale(var(--pet-scale, 0.62)) translateY(0); }
}
@keyframes peChew {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  50% { transform: translateX(-50%) scaleY(0.4); }
}
@keyframes peShake {
  0%, 100% { transform: translateX(-50%) scale(var(--pet-scale, 0.62)) rotate(0deg); }
  25% { transform: translateX(-50%) scale(var(--pet-scale, 0.62)) rotate(3deg); }
  75% { transform: translateX(-50%) scale(var(--pet-scale, 0.62)) rotate(-3deg); }
}

/* 气泡与爱心 */
.g-petegg .pe-bubble {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  max-width: 78%;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 18, 26, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #e9f3ff;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: peBubble 0.3s ease both;
}
.g-petegg .pe-bubble.hidden { display: none; }

@keyframes peBubble {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.g-petegg .pe-hearts { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.g-petegg .pe-heart {
  position: absolute;
  left: 50%;
  bottom: 46%;
  width: 9px;
  height: 9px;
  background: #ff8fbf;
  transform: rotate(45deg);
  animation: peHeartFloat 1s ease-out forwards;
}
.g-petegg .pe-heart::before,
.g-petegg .pe-heart::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff8fbf;
}
.g-petegg .pe-heart::before { left: -5px; }
.g-petegg .pe-heart::after { top: -5px; }

@keyframes peHeartFloat {
  0% { opacity: 0.95; transform: translate(0, 0) rotate(45deg) scale(0.7); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -46px)) rotate(45deg) scale(1.1); }
}

/* ---------------- 亲密度 / 数值 / 操作 ---------------- */

.g-petegg .pe-growth {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 16px;
}

.g-petegg .pe-growth-label {
  flex: none;
  font-size: 10px;
  color: var(--faint);
  letter-spacing: 0.04em;
}

.g-petegg .pe-growth-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
}

.g-petegg .pe-growth-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #79b8ff, #7ee787);
  transition: width 0.35s ease;
}

.g-petegg .pe-growth-text {
  flex: none;
  font-size: 10px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.g-petegg .pe-stats { display: flex; flex-direction: column; gap: 5px; }

.g-petegg .pe-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--faint);
}

.g-petegg .pe-stat-name { flex: none; width: 28px; }

.g-petegg .pe-stat-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.g-petegg .pe-stat-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 0.35s ease;
}

.g-petegg .pe-stat.hunger .pe-stat-track i { background: linear-gradient(90deg, #e0a41c, #ffd166); }
.g-petegg .pe-stat.mood .pe-stat-track i { background: linear-gradient(90deg, #d05a8a, #ff8fbf); }
.g-petegg .pe-stat.clean .pe-stat-track i { background: linear-gradient(90deg, #2f6fd0, #79b8ff); }

.g-petegg .pe-stat.low .pe-stat-track i { animation: peLowPulse 1.2s ease-in-out infinite; }

@keyframes peLowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.g-petegg .pe-stat-val {
  flex: none;
  width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.g-petegg .pe-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.g-petegg .pe-action {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(126, 231, 135, 0.07);
  color: #dff7dd;
  font-size: 12.5px;
  font-weight: 700;
  touch-action: manipulation;
  transition: transform 0.12s ease, background 0.16s ease;
}

.g-petegg .pe-action:active { transform: scale(0.96); background: rgba(126, 231, 135, 0.16); }

.g-petegg .pe-new { min-height: 44px; }
.g-petegg .pe-new.hidden { display: none; }

/* ---------------- 图鉴 sheet ---------------- */

.g-petegg .pe-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 8, 6, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.g-petegg .pe-mask.show { display: flex; animation: fadeIn 0.18s ease both; }

.g-petegg .pe-sheet {
  width: 100%;
  max-width: 430px;
  padding: 16px 16px calc(16px + var(--safe-b));
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--line-2);
  border-bottom: 0;
  background: linear-gradient(180deg, #142218, #0e1712);
  box-shadow: 0 -22px 60px -18px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: peSheetIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes peSheetIn {
  from { transform: translateY(26px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

.g-petegg .pe-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 800;
  color: #e8f6e6;
}

.g-petegg .pe-x {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--dim);
  font-size: 19px;
  line-height: 1;
  touch-action: manipulation;
}

.g-petegg .pe-book-sub {
  margin: 6px 0 12px;
  font-size: 11px;
  color: var(--faint);
}

.g-petegg .pe-book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.g-petegg .pe-book-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.g-petegg .pe-book-item.got { border-color: rgba(126, 231, 135, 0.28); background: rgba(126, 231, 135, 0.06); }
.g-petegg .pe-book-item.current { box-shadow: 0 0 0 1px rgba(121, 184, 255, 0.4) inset; }

.g-petegg .pe-book-dot {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgba(255, 255, 255, 0.8), var(--c, #f2b36a) 52%, var(--a, #d98a3d));
}

.g-petegg .pe-book-name { flex: 1; font-size: 12px; font-weight: 700; color: var(--text); }

.g-petegg .pe-book-count { flex: none; font-size: 10px; color: var(--faint); }
.g-petegg .pe-book-item.got .pe-book-count { color: #8fe2a1; }

/* ---------------- 窄屏 ---------------- */

@media (max-height: 700px) {
  .g-petegg .pe-scene { min-height: 280px; }
  .g-petegg .pe-pet { width: min(32vw, 132px); height: min(36vw, 148px); }
  .g-petegg .pe-egg { width: min(24vw, 100px); }
  .g-petegg .pe-action { min-height: 42px; font-size: 12px; }
  .g-petegg .pe-stat { font-size: 10px; }
}

@media (max-width: 359px) {
  .g-petegg .pe-action { font-size: 12px; }
  .g-petegg .pe-top-left .g-title { font-size: 14px; }
}