.weather-chip {
  gap: 6px;
  background: rgba(255, 255, 255, .82);
  cursor: pointer;
}
.weather-chip:hover {
  filter: brightness(1.03);
}
.weather-chip.is-rainy {
  background: rgba(218, 235, 248, .92);
  border-color: #9cbdd2;
  color: #31556d;
}
.pet-layer {
  position: absolute;
  /* 上緣略伸進天空區，避免往上走時角／頭頂被 .garden-stage overflow:hidden 裁掉 */
  inset: 132px 0 10px;
  z-index: 7;
  pointer-events: none;
  overflow: visible;
}
.pet-sprite {
  position: absolute;
  /* 基準盒略放大；物種差異用 --pet-visual-scale 對齊黃金獵犬 */
  width: 100px;
  height: 140px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  overflow: visible;
  transition: left 3.8s ease-in-out, top 3.8s ease-in-out;
  filter: drop-shadow(0 5px 4px rgba(44, 58, 34, .18));
}
/* 四向 sheet（獅鷲等角尖較高）：給頭頂多一點顯示空間，避免被按鈕盒裁視覺 */
.pet-sprite.has-directional-sprite {
  height: 148px;
}
.pet-sprite.has-directional-sprite .pet-sprite-visual {
  height: 112px;
}
.pet-sprite.has-directional-sprite .pet-directional-sheet {
  width: 104px;
  height: 104px;
  /* 角尖往上長時，略上移整格以免貼底把頭頂推出可視區外 */
  transform: translateY(-4px) scale(var(--pet-visual-scale, 1));
  transform-origin: 50% 90%;
}
.pet-sprite.has-directional-sprite .pet-name-tag {
  top: 108px;
}
.pet-sprite.is-dragging {
  cursor: grabbing;
  z-index: 20;
  filter: drop-shadow(0 10px 10px rgba(44, 58, 34, .28));
}
.pet-sprite.is-dragging .pet-sprite-visual {
  transform: scaleX(var(--pet-face, 1)) scale(calc(var(--pet-user-scale, 1) * var(--pet-visual-scale, 1) * 1.12));
}
.pet-sprite.has-directional-sprite.is-dragging .pet-sprite-visual {
  transform: scaleX(var(--pet-face, 1)) scale(calc(var(--pet-user-scale, 1) * 1.12));
}
.pet-sprite.is-settling .pet-sprite-body {
  animation: petSettleBounce .45s ease;
}
@keyframes petSettleBounce {
  0% { transform: translateY(-10px) scale(1.06, .94); }
  55% { transform: translateY(2px) scale(.97, 1.04); }
  100% { transform: translateY(0) scale(1); }
}
.pet-sprite.is-walking,
.pet-sprite.has-directional-sprite {
  transition: left var(--pet-move-ms, 3600ms) linear, top var(--pet-move-ms, 3600ms) linear;
}
/* 四向 walk sheet 影格已含抬腳／身體起伏；動畫基準含 -4px 上移，避免角尖被裁 */
.pet-sprite.has-directional-sprite.is-walking .pet-directional-sheet {
  animation: petWalkBobLight var(--pet-step-ms, 750ms) ease-in-out infinite;
}
@keyframes petWalkBobLight {
  0%, 100% { transform: translateY(-4px) scale(var(--pet-visual-scale, 1)); }
  50% { transform: translateY(-6px) scale(var(--pet-visual-scale, 1)); }
}
/* 無四向 sheet 的舊寵物若仍用 is-walking，保留稍明顯的彈跳 */
.pet-sprite.is-walking:not(.has-directional-sprite) .pet-sprite-body {
  animation: petWalkBobBody 0.55s ease-in-out infinite;
}
@keyframes petWalkBobBody {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.pet-sprite-visual {
  display: block;
  position: relative;
  width: 100%;
  height: 104px;
  overflow: visible;
  /* user 體型券 × 物種 visualScale（對齊黃金獵犬） */
  transform: scaleX(var(--pet-face, 1)) scale(calc(var(--pet-user-scale, 1) * var(--pet-visual-scale, 1)));
  transform-origin: 50% 78%;
  transition: transform .25s ease;
}
.pet-sprite-body {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 78%;
}
.pet-sprite:hover .pet-sprite-visual {
  transform: scaleX(var(--pet-face, 1)) scale(calc(var(--pet-user-scale, 1) * var(--pet-visual-scale, 1) * 1.08));
}
/* 四向 sheet 的 visualScale 已加在 .pet-directional-sheet，這裡只乘 user-scale，避免叠乘 */
.pet-sprite.has-directional-sprite .pet-sprite-visual {
  transform: scaleX(var(--pet-face, 1)) scale(var(--pet-user-scale, 1));
}
.pet-sprite.has-directional-sprite:hover .pet-sprite-visual {
  transform: scaleX(var(--pet-face, 1)) scale(calc(var(--pet-user-scale, 1) * 1.08));
}
.pet-sprite.is-dragging .pet-sprite-visual {
  transform: scaleX(var(--pet-face, 1)) scale(calc(var(--pet-user-scale, 1) * var(--pet-visual-scale, 1) * 1.12));
}
.pet-sprite.has-directional-sprite.is-dragging .pet-sprite-visual {
  transform: scaleX(var(--pet-face, 1)) scale(calc(var(--pet-user-scale, 1) * 1.12));
}
.pet-sprite svg { width: 100%; height: 100%; overflow: visible; }
.pet-roamer {
  position: relative;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  overflow: visible;
  transform-origin: 50% 78%;
}
/* 田面寵物：portrait 尺寸；visualScale 由外層 .pet-sprite-visual 統一乘，這裡不再叠乘 */
.pet-roamer img {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(36, 65, 74, .18));
}
.pet-roamer--jelly img,
.pet-roamer--tide_gecko img,
.pet-roamer--sea_bunny img,
.pet-roamer--crystal_hermit img,
.pet-roamer--cloud_ray img {
  width: 84px;
  height: 84px;
}
.pet-roamer--seahorse img {
  width: 78px;
  height: 88px;
}
.pet-roamer--sprite {
  width: 100px;
  height: 100px;
}
.pet-directional-sheet {
  display: block;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: drop-shadow(0 5px 5px rgba(36, 65, 74, .2));
  transform: translateY(-2px) scale(var(--pet-visual-scale, 1));
  transform-origin: 50% 90%;
}
.pet-name-tag {
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translateX(-50%) scaleX(1);
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #4b493f;
  font-size: .68rem;
  box-shadow: 0 2px 7px rgba(0,0,0,.08);
  z-index: 3;
}
.pet-accessory {
  position:absolute; left:50%; top:4px; z-index:2; width:54px; height:54px;
  transform:translateX(-50%) scaleX(var(--pet-face, 1)); pointer-events:none;
}
.pet-accessory img, .accessory-art img, .pet-preview-accessory img {
  width:100%; height:100%; object-fit:contain; display:block;
}
.pet-accessory.accessory-slot--neck { top:47px; width:62px; height:42px; }
.pet-accessory.accessory-slot--back { top:24px; left:65%; width:68px; height:58px; }
.pet-size--small .pet-accessory { transform:translateX(-50%) scale(.82) scaleX(var(--pet-face, 1)); }
.pet-size--wide .pet-accessory.accessory-slot--back { left:58%; top:18px; transform:translateX(-50%) scale(1.12) scaleX(var(--pet-face, 1)); }
.pet-size--tall .pet-accessory.accessory-slot--neck { top:51px; }
.pet-heart {
  position: absolute;
  left: 50%;
  top: -3px;
  opacity: 0;
  font-size: 20px;
  transform: translateX(-50%) scaleX(1);
  z-index: 3;
}
.pet-sprite.is-reacting .pet-heart { animation: petHeart 1.1s ease-out; }
.pet-sprite.react-spin .pet-sprite-body { animation: petSpin .85s ease-in-out; }
.pet-sprite.react-tail_chase .pet-sprite-body { animation: petSpin .8s ease-in-out; }
.pet-sprite.react-belly .pet-sprite-body { animation: petBelly 1.1s ease; }
.pet-sprite.react-patrol .pet-sprite-body { animation: petPatrol 1.2s ease-in-out; }
.pet-sprite.react-stretch .pet-sprite-body { animation: petStretch 1s ease; transform-origin: bottom; }
.pet-sprite.react-roll .pet-sprite-body { animation: petRoll 1s ease-in-out; }
.pet-sprite.react-paw .pet-sprite-body { animation: petPaw .85s ease-in-out; }
.pet-sprite.react-happy_jump .pet-sprite-body { animation: petJump .9s ease-in-out; }
.pet-sprite.react-groom .pet-sprite-body { animation: petGroom 1.2s ease; }
.pet-sprite.react-sparkle .pet-sprite-body { animation: petSparkle 1.1s ease; }
.pet-sprite.react-ripple .pet-sprite-body { animation: petRipple 1.1s ease; }
.pet-sprite.react-swim .pet-sprite-body { animation: petSwim .95s ease-in-out; }
.pet-sprite.react-bubble .pet-sprite-body { animation: petBubble 1.05s ease-in-out; }
.pet-sprite.react-spiral .pet-sprite-body { animation: petSpiral 1.05s ease-in-out; }
.pet-sprite.react-crystal .pet-sprite-body { animation: petCrystal 1.05s ease-in-out; }
.pet-sprite.react-glide .pet-sprite-body { animation: petGlide 1.05s ease-in-out; }
.pet-sprite.is-liquid3d .pet-sprite-body { animation: petLiquidFloat 3.2s ease-in-out infinite; transform-origin: 50% 82%; }
.pet-sprite.is-liquid3d .pet-svg--jelly { animation: jellyBodyBreath 2.1s ease-in-out infinite; transform-origin: 50% 78%; }
.pet-sprite.is-liquid3d .jelly-shine { animation: jellyShineDrift 2.6s ease-in-out infinite; transform-origin: 46px 39px; }
.pet-sprite.is-liquid3d .jelly-core { animation: jellyCorePulse 1.8s ease-in-out infinite; transform-origin: center; }
.pet-sprite.is-liquid3d .jelly-ripple { animation: jellyRippleLoop 1.9s ease-out infinite; transform-origin: center; }
.pet-sprite.is-gecko3d { filter: drop-shadow(0 6px 5px rgba(44,58,34,.18)); }
.pet-sprite.is-gecko3d .pet-svg--gecko { animation: geckoBreathe 2.3s ease-in-out infinite; transform-origin: 46% 72%; }
.pet-sprite.is-gecko3d .gecko-tail { animation: geckoTailSway 1.35s ease-in-out infinite; transform-origin: 66px 50px; }
.pet-sprite.is-gecko3d .gecko-fin { animation: geckoFinGlow 2.4s ease-in-out infinite; transform-origin: 50px 28px; }
.pet-sprite.is-gecko3d .gecko-cheek-fin { animation: geckoFinWobble 1.8s ease-in-out infinite; transform-origin: center; }
.pet-sprite.is-wavepet3d .pet-svg { animation: wavepetFloat 2.4s ease-in-out infinite; transform-origin: 50% 75%; }
.pet-sprite.is-wavepet3d .wavepet-body { animation: wavepetBreathe 2s ease-in-out infinite; transform-origin: center; }
.pet-sprite.is-wavepet3d .wavepet-tail { animation: wavepetTail 1.45s ease-in-out infinite; transform-origin: 52px 55px; }
.pet-sprite.is-wavepet3d .wavepet-fin,
.pet-sprite.is-wavepet3d .ray-wing { animation: wavepetFin 1.8s ease-in-out infinite; transform-origin: center; }
.pet-sprite.is-wavepet3d .crystal-shell { animation: crystalShellGlow 2.2s ease-in-out infinite; transform-origin: center; }
.pet-sprite.is-wavepet3d .bubble-dot { animation: bubbleDotFloat 1.8s ease-in-out infinite; transform-origin: center; }
.pet-sprite.is-liquid3d .pet-roamer { animation: jellyBodyBreath 2.1s ease-in-out infinite; }
.pet-sprite.is-gecko3d .pet-roamer { animation: geckoBreathe 2.3s ease-in-out infinite; }
.pet-sprite.is-wavepet3d .pet-roamer { animation: wavepetFloat 2.4s ease-in-out infinite; }
@keyframes petHeart { 0% { opacity:0; transform:translate(-50%,8px) scale(.6); } 35% {opacity:1;} 100% {opacity:0; transform:translate(-50%,-35px) scale(1.25);} }
@keyframes petSpin { to { transform: rotate(360deg); } }
@keyframes petBelly { 45% { transform: rotate(8deg) scaleY(.55); } 70% { transform: rotate(-8deg) scaleY(.7); } }
@keyframes petPatrol { 30% { transform: translateX(70px) scaleX(.9); } 65% { transform: translateX(-55px) scaleX(-1); } }
@keyframes petStretch { 50% { transform: scaleX(1.3) scaleY(.72); } }
@keyframes petRoll { to { transform: rotate(-360deg); } }
@keyframes petPaw { 50% { transform: translateY(-10px) rotate(-9deg); } }
@keyframes petJump { 35%,75% { transform: translateY(-24px); } 55% { transform: translateY(0); } }
@keyframes petGroom { 30%,70% { transform: rotate(7deg) scale(.95); } 50% { transform: rotate(-7deg) scale(.95); } }
@keyframes petSparkle { 35% { filter: drop-shadow(0 0 12px #f0c8ff); transform: scale(1.18); } }
@keyframes petRipple { 35% { filter: drop-shadow(0 0 13px rgba(95,205,220,.72)); transform: scaleX(1.18) scaleY(.86); } 70% { transform: scaleX(.92) scaleY(1.08); } }
@keyframes petSwim { 30% { transform: translateX(9px) translateY(-5px) rotate(3deg); } 70% { transform: translateX(-6px) translateY(2px) rotate(-3deg); } }
@keyframes petBubble { 40% { transform: translateY(-9px) scale(1.08); filter: drop-shadow(0 0 10px rgba(150,220,255,.55)); } }
@keyframes petSpiral { 45% { transform: translateY(-7px) rotate(8deg); filter: drop-shadow(0 0 10px rgba(255,228,156,.55)); } }
@keyframes petCrystal { 45% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(180,240,255,.75)); } }
@keyframes petGlide { 35% { transform: translateX(14px) translateY(-5px) scaleX(1.08); } 70% { transform: translateX(-8px) scaleX(.96); } }
@keyframes petLiquidFloat {
  0%,100% { filter: drop-shadow(0 5px 4px rgba(44,58,34,.18)); }
  50% { filter: drop-shadow(0 9px 8px rgba(50,125,135,.24)) drop-shadow(0 0 10px rgba(111,225,235,.35)); }
}
@keyframes jellyBodyBreath {
  0%,100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-3px) scale(1.04,.96); }
  70% { transform: translateY(1px) scale(.97,1.05); }
}
@keyframes jellyShineDrift {
  0%,100% { transform: translate(0,0) rotate(0deg); opacity:.55; }
  50% { transform: translate(5px,3px) rotate(12deg); opacity:.82; }
}
@keyframes jellyCorePulse {
  0%,100% { transform: scale(.82); opacity:.58; }
  50% { transform: scale(1.3); opacity:.96; }
}
@keyframes jellyRippleLoop {
  0% { transform: scale(.55); opacity:.8; }
  80%,100% { transform: scale(1.9); opacity:0; }
}
@keyframes geckoBreathe {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.03,.98); }
}
@keyframes geckoTailSway {
  0%,100% { transform: rotate(-4deg); }
  50% { transform: rotate(9deg); }
}
@keyframes geckoFinGlow {
  0%,100% { opacity:.78; filter:none; }
  50% { opacity:1; filter:drop-shadow(0 0 5px rgba(111,220,230,.55)); }
}
@keyframes geckoFinWobble {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@keyframes wavepetFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes wavepetBreathe {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.03,.97); }
}
@keyframes wavepetTail {
  0%,100% { transform: rotate(-5deg); }
  50% { transform: rotate(8deg); }
}
@keyframes wavepetFin {
  0%,100% { transform: scaleY(1); opacity:.86; }
  50% { transform: scaleY(.88); opacity:1; }
}
@keyframes crystalShellGlow {
  0%,100% { filter:none; }
  50% { filter:drop-shadow(0 0 7px rgba(170,235,255,.72)); }
}
@keyframes bubbleDotFloat {
  0%,100% { transform: translateY(0); opacity:.7; }
  50% { transform: translateY(-4px); opacity:.95; }
}

.rain-layer, .cloud-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}
.rain-drop {
  position: absolute;
  top: -40px;
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .55) 35%, rgba(190, 225, 248, .92));
  animation: gardenRain linear infinite;
}
/* 小雨：細短、稀疏、慢 */
.rain-light .rain-drop { width: 1.5px; height: 13px; opacity: .78; }
/* 中雨 */
.rain-medium .rain-drop { width: 2px; height: 17px; opacity: .88; }
/* 大雨：粗長、密、快，並讓整片天色更陰 */
.rain-heavy .rain-drop { width: 2.6px; height: 22px; opacity: .95;
  background: linear-gradient(transparent, rgba(255, 255, 255, .45) 30%, rgba(170, 212, 240, .95)); }
.rain-heavy::before {
  content: ""; position: absolute; inset: 0; background: rgba(90,110,130,.14); pointer-events: none;
}
@keyframes gardenRain { to { transform: translate(-90px, 160vh); } }

.pet-modal-card { max-width: 920px; }
.pet-modal-title { display:flex; align-items:center; gap:8px; }
.pet-system-logo {
  width:38px; height:38px; border-radius:50%; display:inline-grid; place-items:center;
  background:#eaf8ff; overflow:hidden; box-shadow:0 2px 8px rgba(57,100,116,.16);
}
.pet-system-logo img { width:46px; height:46px; object-fit:contain; transform:translateY(3px); }
.pet-chip-logo {
  width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center;
  background:#eaf8ff; overflow:hidden; margin-right:4px; vertical-align:middle;
}
.pet-chip-logo img { width:28px; height:28px; object-fit:contain; transform:translateY(2px); }
.pet-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.pet-tab {
  border:1px solid #cfbfaf; background:#fffaf2; color:#55483d;
  border-radius:999px; padding:8px 14px; cursor:pointer;
}
.pet-tab.is-active { background:#6f8c5d; border-color:#6f8c5d; color:#fff; }
.pet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pet-card {
  display:grid; grid-template-columns:124px 1fr; gap:20px; align-items:center;
  border:1px solid #ded2c5; background:#fffdfa; border-radius:16px; padding:18px 20px;
  min-height:150px;
}
.pet-card.is-equipped { border-color:#7f9b6a; box-shadow:0 0 0 2px rgba(127,155,106,.14); }
.pet-avatar {
  position:relative; isolation:isolate;
  width:112px; height:112px; border-radius:50%; display:grid; place-items:center;
  font-size:34px; background:var(--pet-bg,#eee2d1);
}
.pet-avatar--fox { font-size:48px; }
.pet-avatar--rename { background:linear-gradient(150deg,#f7ecd8,#e9d3ae); }
.pet-avatar--ticket {
  display: grid;
  place-items: center;
  font-size: 2rem;
}
.ticket-emoji { line-height: 1; }
.ticket-use-form {
  padding: 12px 4px 8px;
}
.ticket-use-form label {
  display: block;
  margin: 12px 0;
  font-size: .9rem;
}
.ticket-use-form .pet-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}
.pet-avatar--image { overflow:hidden; }
.pet-avatar--image img {
  width:100%; height:100%; object-fit:contain;
  transform:translate(var(--portrait-x,0),var(--portrait-y,0)) scale(var(--portrait-scale,1.18));
  transform-origin:center; transition:transform .18s ease;
  filter: drop-shadow(0 3px 4px rgba(30,90,100,.18));
}
.pet-avatar--mosaic img {
  image-rendering:pixelated;
  filter:grayscale(.55) saturate(.45) brightness(.72);
}
.pet-avatar--mosaic::after {
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit;
  background:repeating-conic-gradient(rgba(255,255,255,.10) 0 25%,rgba(42,34,29,.13) 0 50%) 0 0/14px 14px;
  pointer-events:none;
}
.pet-avatar-lock {
  position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:rgba(55,45,38,.72); border:2px solid rgba(255,255,255,.78);
  font-weight:800; font-size:18px; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.pet-preview-wrap { position:relative; width:112px; height:112px; }
.pet-preview-wrap .pet-avatar { position:absolute; inset:0; }
.pet-preview-accessory {
  position:absolute; z-index:2; left:50%; top:-4px; width:58px; height:58px;
  transform:translateX(-50%); pointer-events:none;
}
.pet-preview-accessory.accessory-slot--neck { top:53px; width:68px; height:42px; }
.pet-preview-accessory.accessory-slot--back { top:23px; left:70%; width:76px; height:64px; }
.pet-preview-wrap.pet-size--small .pet-preview-accessory { transform:translateX(-50%) scale(.82); }
.pet-preview-wrap.pet-size--wide .pet-preview-accessory.accessory-slot--back { left:60%; transform:translateX(-50%) scale(1.12); }
.accessory-shop-art { overflow:hidden; }
.accessory-shop-art .accessory-art { display:block; width:86px; height:86px; }
.accessory-shop-art .accessory-art:not(:has(img)) { font-size:38px; }
.pet-avatar--tide_gecko img,
.pet-avatar--sea_bunny img,
.pet-avatar--seahorse img,
.pet-avatar--crystal_hermit img,
.pet-avatar--cloud_ray img { width:150px; height:150px; transform:translateY(5px) scale(1.65); }
.pet-card h4 { margin:0 0 3px; color:#453c34; }
.pet-card p { margin:0; font-size:.82rem; color:#74685d; line-height:1.45; }
.pet-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; font-size:.76rem; }
.pet-meta span { background:#f3eee7; border-radius:999px; padding:3px 7px; }
.pet-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.pet-mini-btn {
  border:1px solid #8ca077; color:#516944; background:#fff; border-radius:8px;
  padding:6px 9px; font-size:.78rem; cursor:pointer;
}
.pet-mini-btn.primary { background:#6f8c5d; color:#fff; border-color:#6f8c5d; }
.pet-mode-btn { background:#fbfaf6; color:#607651; border-color:#9caf8d; }
.pet-mode-btn.is-current,
.pet-mode-btn.is-current:disabled {
  background:#6f8c5d;
  border-color:#6f8c5d;
  color:#fff;
  opacity:1;
}
.pet-mini-btn:disabled { opacity:.5; cursor:default; }
.pet-select { max-width:150px; border:1px solid #cfc3b7; border-radius:8px; padding:6px; font-size:.78rem; }
.rarity-seasonal { color:#79549c; }
.leader-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.leader-board { min-width: 0; }
.leader-card { border:1px solid #dfd5ca; border-radius:14px; overflow:hidden; }
.leader-me { background:#f3f8ed; padding:12px 14px; color:#48603e; margin-bottom:12px; border-radius:12px; font-size:.92rem; line-height:1.45; }
.leader-me--original, .leader-me--partner { background:#f7f3ea; color:#6a5b4a; }
.leader-row {
  display:grid; grid-template-columns:42px 1fr auto; gap:8px; padding:10px 12px;
  border-bottom:1px solid #eee7df; align-items:center; font-size:.9rem;
}
.leader-row:last-child { border-bottom:0; }
.leader-row--visit { width:100%; border:0; border-bottom:1px solid #eee7df; text-align:left; cursor:pointer; background:#fffdf9; font:inherit; }
.leader-row--visit:hover, .leader-row--visit:focus-visible { background:#edf6e8; outline:none; }
.leader-row--visit small { display:block; color:#769361; font-size:.7rem; margin-top:2px; }
.leader-rank { font-weight:700; color:#796b5e; }
.leader-score { font-variant-numeric:tabular-nums; font-weight:700; color:#506b43; }
@media (max-width: 720px) {
  .leader-boards { grid-template-columns: 1fr; }
}
.empty-pets { grid-column:1/-1; padding:28px; text-align:center; color:#786d62; }
.album-preview {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 20px; margin-bottom:16px; border-radius:16px;
  background:linear-gradient(135deg,#f3f8ed,#eef8fb); border:1px solid #d7e2cf;
}
.album-preview h4, .album-series h4 { margin:2px 0 4px; color:#453c34; }
.album-preview p { margin:0; color:#74685d; font-size:.82rem; }
.album-kicker { color:#6f8c5d; font-size:.72rem; letter-spacing:.12em; }
.album-list { display:grid; gap:14px; }
.album-series { border:1px solid #ded2c5; border-top:4px solid var(--series-color); border-radius:16px; padding:16px; background:#fffdfa; }
.album-series header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.album-series header > strong { color:var(--series-color); }
.album-progress { height:7px; margin:10px 0 14px; border-radius:999px; overflow:hidden; background:#eee8df; }
.album-progress i { display:block; height:100%; border-radius:inherit; background:var(--series-color); }
.album-pets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.album-pet {
  display:block; width:100%; margin:0; padding:6px 4px 8px;
  border:1px solid transparent; border-radius:12px;
  background:transparent; font:inherit; color:#5d5248;
  text-align:center; min-width:0; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.album-pet:hover, .album-pet:focus-visible {
  background:#f7f3ea; border-color:#e2d6c6; outline:none; transform:translateY(-1px);
}
.album-pet-art { position:relative; width:76px; height:76px; margin:0 auto 6px; pointer-events:none; }
.album-pet-art .pet-avatar { width:76px; height:76px; }
.album-pet-art .pet-avatar--image img { width:100%; height:100%; }
.album-pet strong, .album-pet span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-pet strong { font-size:.78rem; }
.album-pet span { margin-top:2px; color:#8a7d70; font-size:.65rem; }
.album-pet.is-hidden-character .pet-avatar { opacity:.92; }
.album-series.is-focus {
  box-shadow:0 0 0 2px rgba(201,137,58,.35);
}

/* 商店：未解鎖條件可點進圖鑑 */
.pet-mini-btn--codex {
  width:100%;
  background:linear-gradient(180deg,#fff8ee,#f3e7d6);
  color:#7a4f24;
  border:1px dashed #c9a57a;
  font-size:.78rem;
  line-height:1.35;
  white-space:normal;
  height:auto;
  min-height:36px;
  padding:8px 10px;
}
.pet-mini-btn--codex:hover, .pet-mini-btn--codex:focus-visible {
  background:linear-gradient(180deg,#fff1dc,#ecd9bc);
  outline:none;
}
.pet-mini-btn--link {
  background:transparent;
  color:#7a4f24;
  border:1px solid #d9c7b0;
  font-size:.78rem;
}
.pet-card--locked { opacity:.98; }
.pet-actions { display:flex; flex-wrap:wrap; gap:8px; }

/* 寵物圖鑑詳情 */
.codex-detail {
  border:1px solid #ded2c5;
  border-radius:18px;
  padding:16px 18px 18px;
  background:linear-gradient(180deg,#fffdf9,#faf6ee);
}
.codex-back { margin-bottom:12px; }
.codex-hero {
  display:flex; align-items:center; gap:16px; margin-bottom:12px;
}
.codex-art-wrap .pet-avatar,
.codex-detail .codex-art {
  width:96px; height:96px; flex:0 0 auto;
}
.codex-art-wrap .pet-avatar--image img { width:100%; height:100%; }
.codex-detail.is-hidden-character .codex-art-wrap .pet-avatar { opacity:.92; }
.codex-hero-text { min-width:0; flex:1; }
.codex-hero-text h4 { margin:2px 0 6px; font-size:1.15rem; color:#3d2e1f; }
.codex-status { margin:0; color:#7a4f24; font-size:.88rem; font-weight:600; }
.codex-owned-meta { margin:4px 0 0; color:#6f8c5d; font-size:.82rem; }
.codex-desc {
  margin:0 0 14px; color:#5d5248; font-size:.9rem; line-height:1.65;
}
.codex-guide {
  border-radius:14px;
  padding:14px 14px 12px;
  background:#fff;
  border:1px solid #e8dfd3;
  margin-bottom:14px;
}
.codex-guide h5 {
  margin:0 0 8px; font-size:.92rem; color:#453c34; letter-spacing:.04em;
}
.codex-condition {
  display:inline-block;
  margin:0 0 10px;
  padding:4px 10px;
  border-radius:999px;
  background:#f3e7d6;
  color:#7a4f24;
  font-size:.8rem;
  font-weight:600;
}
.codex-guide-body {
  color:#5d5248; font-size:.88rem; line-height:1.7;
}
.codex-progress-block { margin-top:14px; }
.codex-progress-label {
  font-size:.82rem; color:#6a5b4a; margin-bottom:6px;
}
.codex-progress {
  height:8px; border-radius:999px; overflow:hidden; background:#eee8df;
}
.codex-progress i {
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#c9893a,#e0b36a);
}
.codex-progress-ok { margin:8px 0 0; color:#4f7a3e; font-size:.82rem; font-weight:600; }
.codex-progress-hint { margin:8px 0 0; color:#8a7a66; font-size:.82rem; }
.codex-actions {
  display:flex; flex-wrap:wrap; gap:8px;
}

/* 購買結果彈窗（成功／餘額不足／網路失敗） */
.pet-purchase-dialog {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(40, 28, 18, 0.45);
  backdrop-filter: blur(2px);
}
.pet-purchase-dialog-card {
  width: min(360px, 100%);
  border-radius: 18px;
  padding: 22px 20px 18px;
  background: #fffdf9;
  border: 1px solid #e2d6c6;
  box-shadow: 0 16px 40px rgba(61, 46, 31, 0.22);
  text-align: center;
}
.pet-purchase-dialog-card h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  line-height: 1.4;
  color: #3d2e1f;
}
.pet-purchase-dialog-card p {
  margin: 0 0 16px;
  color: #6a5b4a;
  font-size: 0.92rem;
  line-height: 1.6;
}
.pet-purchase-dialog-card--success {
  border-color: #b7d4a4;
  background: linear-gradient(180deg, #f7fbf3, #fffdf9);
}
.pet-purchase-dialog-card--success h3 { color: #3f6b34; }
.pet-purchase-dialog-card--fail {
  border-color: #e2c2b0;
  background: linear-gradient(180deg, #fff7f3, #fffdf9);
}
.pet-purchase-dialog-card--fail h3 { color: #9a4b32; }
.pet-purchase-dialog-card .pet-mini-btn {
  min-width: 120px;
  padding: 8px 16px;
  font-size: 0.9rem;
}

@media (max-width: 700px) {
  .pet-grid { grid-template-columns:1fr; }
  /* 手機螢幕頂端預留更多天空，四向向上列不會被舞台容器截去頭頂。 */
  .pet-layer { inset:112px 0 6px; }
  .pet-sprite { width:64px; height:60px; }
  .pet-name-tag { top:51px; }
  .pet-card { grid-template-columns:88px 1fr; gap:12px; padding:14px; }
  .pet-preview-wrap, .pet-card .pet-avatar { width:82px; height:82px; }
  .pet-card .pet-avatar--image img { width:100%; height:100%; }
  .album-pets { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .album-preview { padding:14px; }
  .codex-hero { gap:12px; }
  .codex-art-wrap .pet-avatar, .codex-detail .codex-art { width:84px; height:84px; }
}
/* 減少動態的退出改由遊戲內「動效：關閉」開關（.fx-off）控制，不用系統設定，
   否則 weiyo 系統開著減少動態時會看不到寵物與雨。 */