:root {
  --bg: #ffffff;
  --bg-alt: #f7f8fa;
  --text: #1a1d26;
  --text-muted: #6b7280;
  --accent: #4f46e5;
  --accent-dark: #4338ca;
  --border: #e5e7eb;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  --radius: 12px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

.accent {
  color: var(--accent);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Page */
.section {
  position: relative;
  z-index: 1;
  padding: 80px 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.15) 60%);
}

/* Wings background (responsive: desktop landscape / mobile portrait cherry blossoms) */
.wings-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: #fdf4fa;
  background-image: url("assets/bg-desktop.jpg");
  background-size: cover;
  background-position: center;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  animation: bg-kenburns 24s ease-in-out infinite alternate;
}

@keyframes bg-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@media (max-width: 768px) {
  .wings-bg {
    background-image: url("assets/bg-mobile.jpg");
  }
}

.bg-photo {
  position: absolute;
  inset: 0;
  background-image: url("assets/bg-egret.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Brand logo */
.brand-fixed {
  position: fixed;
  top: 8px;
  left: 10px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
}

.brand-name {
  display: inline-flex;
  align-items: baseline;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-style: italic;
  transform: skewX(-10deg);
  line-height: 1;
  -webkit-text-stroke: 1px rgba(20, 30, 60, 0.9);
  filter: drop-shadow(0 2px 0 rgba(10, 16, 35, 0.55)) drop-shadow(0 4px 6px rgba(10, 20, 50, 0.35));
}

.brand-name .char-1 {
  background: linear-gradient(180deg, #dfe9ff 0%, #7fa3e0 45%, #3b5fa8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 20px;
}

.brand-name .char-2 {
  background: linear-gradient(180deg, #ffe9a8 0%, #ffb340 45%, #f07800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 12px;
  margin-left: 4px;
}

/* WeChat join-group pill (inside love card icon row) */
.vx-ball {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.vx-ball:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.5);
}

.vx-ball svg {
  flex: none;
}

.vx-ball-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1;
}

.love-join-hint {
  margin: 16px 0 0;
  font-size: 12px;
  color: #64748b;
  letter-spacing: 0.02em;
}

/* WeChat join-group inline QR (inside love card) */
.vx-inline {
  margin: 18px auto 0;
  width: 200px;
  max-width: 100%;
  padding-top: 16px;
  border-top: 1px dashed rgba(148, 163, 184, 0.45);
}

.vx-qr-inline {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.vx-inline .vx-again {
  margin: 10px 0 0;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}

/* WeChat add-friend layer */
.vx-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 16, 32, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.vx-layer[hidden] {
  display: none;
}

.vx-card {
  position: relative;
  width: 300px;
  max-width: 100%;
  max-height: calc(100% - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 18px;
  padding: 32px 24px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  transform: translateZ(0);
}

@keyframes vxPop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.vx-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
}

.vx-close:hover {
  color: #475569;
}

.vx-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
}

.vx-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.vx-hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
}

.vx-qr {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  cursor: zoom-in;
}

.vx-qr.flash {
  background: #dcfce7;
}

.vx-again {
  margin: 12px 0 0;
  font-size: 12px;
  color: #94a3b8;
}

/* User login / register floating button */
.user-ball {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 128px;
  padding: 10px 16px 10px 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #d4af37, #f0d060);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}

.user-ball:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.6);
}

.user-ball-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* User auth / member layer */
.user-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 16, 32, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.user-layer[hidden] {
  display: none;
}

.user-card {
  position: relative;
  width: 340px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  padding: 32px 24px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: vxPop 0.25s ease-out;
}

.user-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
}

.user-close:hover {
  color: #475569;
}

.user-title {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}

.user-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.user-tab {
  flex: 1;
  padding: 9px 0;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.user-tab.active {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  border-color: #b8860b;
  color: #fff;
}

.user-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s;
  background: #fff;
}

.user-input:focus {
  border-color: #d4af37;
}

.user-error {
  margin: 0;
  font-size: 13px;
  color: #dc2626;
  text-align: left;
  padding: 2px 4px;
}

.user-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.user-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.45);
}

/* Member center */
.member-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  margin-bottom: 16px;
  padding: 12px;
  padding-top: 84px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fdf6e3, #fff8ec);
  border: 1px solid #f0e3c0;
}

.member-badge-title {
  position: absolute;
  left: 12px;
  top: 8px;
  height: 66px;
  max-width: 540px;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
  z-index: 2;
}
.member-badge-title[hidden] {
  display: none;
}

.member-head-badges {
  position: absolute;
  right: 12px;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 62%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.member-head-badges[hidden] {
  display: none;
}
.member-head-badges img {
  height: 22px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

.member-avatar-wrap {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #d4af37, #f0d060);
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.35);
  overflow: hidden;
}

.member-avatar.has-image {
  color: transparent;
}

.avatar-edit {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #4f46e5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}

.avatar-edit:hover {
  transform: scale(1.12);
}

.member-info {
  flex: 1;
  min-width: 0;
}

.member-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.member-name #member-username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-role {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  flex: none;
}

.member-role.admin {
  background: #dc2626;
}

.member-points {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
}

.member-points b {
  color: #b8860b;
  font-size: 16px;
}

.member-sub {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
  margin-left: 4px;
}

.frame-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.frame-box {
  width: 46px;
  height: 46px;
  margin: 0 auto 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-shop .frame-tile .frame-box {
  margin-bottom: 6px;
}

.badge-tile.active-tile {
  border: 1px solid #d4af37;
  box-shadow: 0 0 0 1px #d4af37;
}

.upload-chance-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chance-btn {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #f6c945, #d4af37);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
  transition: all 0.2s;
}

.chance-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.55);
}

.checkin-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #f6c945, #d4af37);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}

.checkin-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(212, 175, 55, 0.55);
}

.checkin-btn:disabled {
  background: #cbd5e1;
  box-shadow: none;
  cursor: default;
  transform: none;
}

.member-section {
  margin-top: 20px;
  text-align: left;
}

.member-section-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.member-section > .badge-desc {
  font-size: 12px;
  margin: -4px 0 10px;
  color: #64748b;
}

.member-badges,
.badge-shop {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.member-badges .badge-tile {
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.member-badges .badge-tile:not(.active-tile):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.member-badges .badge-tile-badge {
  cursor: default;
}
.member-badges .badge-tile-badge:hover {
  transform: none;
  box-shadow: none;
}

.badge-tile.active-tile {
  border-color: #f5a623;
  box-shadow: 0 0 0 2px #f5a623, 0 6px 16px rgba(245, 166, 35, 0.35);
}

.badge-tile {
  width: 72px;
  text-align: center;
}

.badge-disc {
  width: 52px;
  height: 52px;
  margin: 0 auto 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(255, 255, 255, 0.35), 0 6px 14px rgba(0, 0, 0, 0.2);
}

.badge-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge-name {
  font-size: 11px;
  color: #475569;
}

.badge-shop .badge-tile {
  width: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.badge-shop .badge-tile:hover {
  border-color: #d4af37;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

.badge-shop .badge-tile.owned {
  opacity: 0.55;
  cursor: default;
}

.badge-shop .badge-tile.owned:hover {
  border-color: #e2e8f0;
  box-shadow: none;
}

.badge-shop .badge-cost {
  font-size: 12px;
  font-weight: 700;
  color: #b8860b;
}

.member-badges .badge-cost {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5a623, #e08e1a);
  color: #fff;
  box-shadow: 0 2px 6px rgba(245, 166, 35, 0.35);
}

.badge-desc {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.3;
}

.member-collect {
  align-items: stretch;
}
.member-collect-tile {
  width: 124px;
  padding: 8px 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #fff;
}
.member-collect-tile .badge-name {
  font-weight: 700;
}
.member-collect-tile.is-locked {
  opacity: 0.58;
  cursor: default;
}
.member-collect-tile.is-locked:hover {
  transform: none;
  box-shadow: none;
}
.badge-status {
  font-size: 10px;
  font-weight: 700;
  color: #b8860b;
}
.member-collect-tile.is-locked .badge-status {
  color: #94a3b8;
}
.member-collect-tile.active-tile .badge-status {
  color: #c05621;
}
.badge-how {
  font-size: 10px;
  color: #64748b;
  line-height: 1.4;
  text-align: center;
}
.badge-shop .badge-how {
  max-width: 108px;
}

.badge-shop .badge-tile.owned .badge-disc::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #16a34a;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}

.badge-shop .frame-tile.owned {
  opacity: 1;
  cursor: pointer;
}

.badge-shop .frame-tile.owned:hover {
  border-color: #d4af37;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

.badge-shop .frame-tile.owned[disabled],
.badge-shop .frame-tile:disabled {
  opacity: 1;
  cursor: default;
}

.badge-shop .frame-tile:disabled .badge-cost {
  color: #16a34a;
}

.badge-shop .frame-tile:disabled:hover {
  border-color: #e2e8f0;
  box-shadow: none;
}

.user-logout {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.user-logout:hover {
  background: #fef2f2;
  border-color: #ef4444;
}

/* Album detail upload button */
.album-upload-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 8px 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.album-upload-btn[hidden] {
  display: none;
}

.album-upload-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.6);
}

.album-upload-btn-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}

/* ===== Love quotes card (in normal flow, scrolls with page) ===== */
.love-section {
  padding: 24vh 20px 24px;
  display: flex;
  justify-content: center;
}

.love-card {
  position: relative;
  width: 640px;
  max-width: 100%;
  background: linear-gradient(150deg, rgba(222, 236, 255, 0.8), rgba(255, 255, 255, 0.52));
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 28px;
  padding: 34px 44px 26px;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(64, 96, 160, 0.22);
  cursor: pointer;
  user-select: none;
  transition: transform 0.25s, box-shadow 0.25s;
}

.love-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(64, 96, 160, 0.3);
}

.love-quote {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #33456b;
  letter-spacing: 0.04em;
  min-height: 26px;
  line-height: 1.5;
}

.love-mark {
  color: #33456b;
}

.love-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: #33456b;
  margin: 0 1px;
  vertical-align: -0.18em;
  animation: love-blink 1s steps(2, start) infinite;
}

@keyframes love-blink {
  50% { opacity: 0; }
}

.love-text {
  margin: 16px 0 20px;
  font-size: 20px;
  line-height: 2;
  font-weight: 600;
  color: #2b3a55;
  text-align: left;
}

.love-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

@media (max-width: 640px) {
  .love-card {
    padding: 26px 22px 20px;
    border-radius: 22px;
  }

  .love-quote {
    font-size: 15px;
  }

  .love-text {
    font-size: 17px;
    line-height: 1.9;
  }
}

/* Gallery */
.section {
  padding-top: 32px;
}

.upload-status {
  text-align: center;
  font-size: 14px;
  min-height: 22px;
  margin-bottom: 24px;
}

.upload-status.error {
  color: #dc2626;
}

.upload-status.ok {
  color: #16a34a;
}

.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tab {
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  row-gap: 72px;
}

.gallery-item {
  position: relative;
  border-radius: 14px;
  background: #000;
  transform: rotate(-0.5deg);
  box-shadow:
    0 0 0 3px rgba(238, 242, 255, 0.95),
    0 0 0 6px rgba(160, 180, 225, 0.55),
    0 0 18px rgba(170, 200, 255, 0.6),
    0 0 55px rgba(190, 215, 255, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: grab;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 10px rgba(210, 225, 255, 0.35);
  pointer-events: none;
}

.gallery-item.dragging {
  opacity: 0.6;
  transform: scale(0.96);
  cursor: grabbing;
  box-shadow: 0 0 0 3px var(--accent), 0 0 25px rgba(212, 175, 55, 0.7);
}

.gallery-item:hover {
  transform: rotate(-0.5deg) translateY(-5px) scale(1.02);
  box-shadow:
    0 0 0 3px rgba(245, 248, 255, 1),
    0 0 0 7px rgba(170, 195, 240, 0.7),
    0 0 28px rgba(180, 210, 255, 0.85),
    0 0 70px rgba(200, 220, 255, 0.5),
    0 12px 30px rgba(0, 0, 0, 0.4);
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  display: block;
  max-height: 320px;
  object-fit: cover;
  border-radius: 14px;
}

.gallery-item video {
  object-fit: contain;
  background: #000;
}

/* Gallery decorations: neon gradient frame coiling the card & stars */
.gallery-deco {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Gradient neon band wrapping the card frame (covers the white outer border) */
.deco-dragon-body {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 195, 90, 0.85)) drop-shadow(0 0 18px rgba(255, 160, 40, 0.45));
}

.dragon-halo {
  filter: blur(3px);
}

.dragon-band {
  stroke-linecap: round;
}

/* Flowing light traveling along the picture frame */
.dragon-flow {
  stroke-dasharray: 6 16;
  stroke-linecap: round;
  animation: dragonFlow 2.8s linear infinite;
}

@keyframes dragonFlow {
  to { stroke-dashoffset: -88; }
}

/* Butterfly decorations floating above the card */
.deco-butterfly {
  position: absolute;
  top: 0;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(210, 225, 255, 0.9)) drop-shadow(0 0 16px rgba(190, 205, 255, 0.5));
  animation: butterflyFloat 6s ease-in-out infinite;
}

.deco-butterfly .wing-l,
.deco-butterfly .wing-r {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: wingFlap 1.6s ease-in-out infinite;
}

.deco-butterfly .wing-r {
  transform-origin: 0% 50%;
  animation-delay: -0.08s;
}

.butterfly-spark {
  fill: #ffffff;
  animation: sparkPulse 1.6s ease-in-out infinite;
}

@keyframes sparkPulse {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 1; }
}

@keyframes wingFlap {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.55); }
}

@keyframes butterflyFloat {
  0%, 100% { transform: translateY(0) rotate(-7deg); }
  50% { transform: translateY(-10px) rotate(8deg); }
}

.deco-star {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
  animation: starTwinkle 2s ease-in-out infinite;
}

.deco-star::before,
.deco-star::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 5px #fff;
}

.deco-star::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.deco-star::after {
  height: 100%;
  width: 2px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.1; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(45deg); }
}

.gallery-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  color: #fff;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gallery-meta .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.gallery-delete {
  margin-left: auto;
}

.gallery-tag {
  top: 0;
  bottom: auto;
  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
  padding: 10px 12px 28px;
}

.gallery-delete {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.2s;
}

body[data-role="guest"] .gallery-delete,
body[data-role="user"] .gallery-delete {
  display: none;
}

body[data-role="guest"] .gallery-item,
body[data-role="user"] .gallery-item {
  cursor: default;
}

.gallery-delete:hover {
  background: #dc2626;
}

.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 48px 0;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  font-size: 15px;
}

/* Floating music ball */
.music-ball {
  position: fixed;
  right: 20px;
  bottom: 28px;
  z-index: 100;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}

.music-ball:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.6);
}

.music-ball.playing {
  animation: ball-pulse 1.6s ease-in-out infinite;
}

@keyframes ball-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45); }
  50% { box-shadow: 0 8px 32px rgba(124, 58, 237, 0.75); }
}

/* ===== 音乐播放器面板 - QQ风格深色主题 ===== */
.music-panel {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 100;
  width: 400px;
  max-width: calc(100vw - 40px);
  background: linear-gradient(180deg, #4a4a4a 0%, #3d3d3d 100%);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.music-panel[hidden] {
  display: none;
}

/* 头部信息栏 */
.music-player-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 16px 8px;
}

.music-player-header-left {
  flex: 1;
  min-width: 0;
}

.music-player-song-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.music-player-song-name::before {
  content: "\266A";
  font-size: 14px;
  color: #ccc;
}

.music-player-artist {
  font-size: 12px;
  color: #aaa;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-player-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.music-player-time {
  font-size: 12px;
  color: #ccc;
  font-variant-numeric: tabular-nums;
}

.music-player-shuffle-btn {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.music-player-shuffle-btn:hover,
.music-player-shuffle-btn.active {
  color: #ff6b35;
}

/* 中间主体：列表 + 圆形封面 */
.music-player-body {
  display: flex;
  padding: 0 16px 10px;
  gap: 14px;
  align-items: center;
}

.music-player-list-wrap {
  flex: 1;
  min-width: 0;
}

.music-player-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 140px;
  overflow-y: auto;
}

.music-player-list::-webkit-scrollbar {
  width: 4px;
}

.music-player-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}

/* 列表项 */
.music-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
  color: #ddd;
}

.music-list-item:hover {
  background: rgba(255,255,255,0.08);
}

.music-list-item.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.music-list-item .song-info {
  flex: 1;
  min-width: 0;
}

.music-list-item .song-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-list-item .song-singer {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-list-item .song-idx {
  font-size: 12px;
  color: #888;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.music-list-item.active .song-idx {
  color: #ff6b35;
}

.music-list-empty {
  text-align: center;
  color: #888;
  padding: 24px 12px;
  font-size: 12px;
}

/* 圆形专辑封面 */
.music-player-cover-wrap {
  flex-shrink: 0;
}

.music-player-cover {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.25);
  position: relative;
  background: #555;
}

.music-player-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes music-cover-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.music-player-cover.spinning .music-player-cover-img {
  animation: music-cover-spin 10s linear infinite;
}

.music-player-cover.paused .music-player-cover-img {
  animation-play-state: paused;
}

/* 封面上的播放/暂停按钮 */
.music-player-cover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.2s;
}

.music-player-cover:hover .music-player-cover-overlay {
  opacity: 1;
}

.music-player-cover-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.music-player-cover-play:hover {
  background: rgba(0,0,0,0.6);
  transform: scale(1.1);
}

/* 控制按钮行 */
.music-player-ctrls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.music-player-ctrl-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.music-player-ctrl-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.1);
}

.music-player-progress-box {
  flex: 1;
  max-width: 140px;
  padding: 0 4px;
}

.music-player-progress {
  width: 100%;
  height: 3px;
  accent-color: #ff6b35;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
}

.music-player-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b35;
  cursor: pointer;
}

.music-player-progress::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b35;
  cursor: pointer;
  border: none;
}

/* 底部工具栏 */
.music-player-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.music-player-tool-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: none;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
}

.music-player-tool-btn:hover {
  color: #fff;
}

.music-player-tool-btn.active {
  color: #ff6b35;
}

.music-player-volume-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
}

.music-player-volume {
  flex: 1;
  height: 3px;
  accent-color: #ff6b35;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
}

.music-player-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b35;
  cursor: pointer;
}

.music-player-volume::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b35;
  cursor: pointer;
  border: none;
}

.music-player-close-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}

.music-player-close-btn:hover {
  color: #fff;
}

/* ===== Mid-Autumn decorations on both sides ===== */
.fest-deco {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.fest-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fest-left {
  left: 18px;
  gap: 26px;
}

.fest-right {
  right: 18px;
  gap: 24px;
}

/* Moon with rabbit */
.fest-moon {
  width: 132px;
  height: auto;
  filter: drop-shadow(0 0 22px rgba(255, 214, 120, 0.85)) drop-shadow(0 0 46px rgba(255, 200, 90, 0.4));
  animation: moonFloat 5s ease-in-out infinite;
}

@keyframes moonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Osmanthus branch */
.fest-osmanthus {
  width: 108px;
  height: auto;
  opacity: 0.95;
  animation: osmanthusSway 4.5s ease-in-out infinite;
  transform-origin: 60% 100%;
}

@keyframes osmanthusSway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3deg); }
}

/* Red lantern */
.fest-lantern {
  width: 96px;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(255, 100, 60, 0.6));
  animation: lanternSway 3.6s ease-in-out infinite;
  transform-origin: 50% 0;
}

@keyframes lanternSway {
  0%, 100% { transform: rotate(-3.5deg); }
  50% { transform: rotate(3.5deg); }
}

.fest-lantern-small {
  width: 70px;
  height: auto;
  filter: drop-shadow(0 0 14px rgba(255, 110, 70, 0.55));
  animation: lanternSway 4.2s ease-in-out infinite 0.6s;
  transform-origin: 50% 0;
}

/* Particle canvas layer */
.fest-canvas {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Sakura falling petals layer */
.sakura-canvas {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 768px) {
  .sakura-canvas { opacity: 0.85; }
}

@media (max-width: 1024px) {
  .fest-moon { width: 100px; }
  .fest-osmanthus { width: 84px; }
  .fest-lantern { width: 76px; }
  .fest-lantern-small { width: 58px; }
  .fest-left { left: 10px; }
  .fest-right { right: 10px; }
}

@media (max-width: 768px) {
  .fest-deco {
    display: block;
    opacity: 0.9;
  }
  .fest-side {
    top: 46%;
  }
  .fest-moon { width: 62px; }
  .fest-osmanthus { width: 46px; opacity: 0.85; }
  .fest-lantern { width: 44px; }
  .fest-lantern-small { width: 34px; }
  .fest-left { left: 4px; gap: 12px; }
  .fest-right { right: 4px; gap: 10px; }
  .fest-canvas { opacity: 0.7; }
}

@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    row-gap: 20px;
  }
  .gallery-item img {
    max-height: none;
    min-height: 300px;
    object-fit: cover;
    cursor: pointer;
  }
  .gallery-item video {
    max-height: none;
    min-height: 320px;
    object-fit: contain;
    cursor: pointer;
  }
  .gallery-item {
    transform: rotate(0deg);
  }
  .gallery-item:hover {
    transform: translateY(-4px) scale(1.01);
  }
}

/* Fullscreen media viewer */
.viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.viewer-overlay[hidden] {
  display: none;
}

.viewer-stage {
  max-width: 96vw;
  max-height: 94vh;
}

.viewer-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.viewer-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.viewer-stage img {
  max-width: 96vw;
  max-height: 94vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

.viewer-stage video {
  max-width: 96vw;
  max-height: 94vh;
  border-radius: 6px;
  background: #000;
  outline: none;
  cursor: default;
}

body.viewer-open {
  overflow: hidden;
}

/* ===== Sign-in leaderboard ===== */
.rank-ball {
  position: fixed;
  right: 20px;
  bottom: 220px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 12px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}

.rank-ball:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.6);
}

.rank-ball-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1;
}

/* Popup layer (default, narrow screens) */
.rank-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 16, 32, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.rank-layer[hidden] {
  display: none;
}

.rank-card {
  position: relative;
  width: 380px;
  max-width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: vxPop 0.25s ease-out;
}

.rank-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 18px 20px 12px;
  background: linear-gradient(135deg, #eef1ff, #f7f6ff);
  border-bottom: 1px solid #e6e8f0;
}

.rank-title {
  font-size: 17px;
  font-weight: 800;
  color: #312e81;
  letter-spacing: 0.02em;
}

.rank-sub {
  font-size: 11px;
  color: #8b8fb8;
  flex: 1;
}

.rank-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  z-index: 1;
}

.rank-close:hover {
  color: #475569;
}

.rank-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
}

.rank-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
}

.rank-list-item.me {
  background: #eef1ff;
}

.rank-no {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #8b93b8, #6b7396);
}

.rank-no.r1 {
  background: linear-gradient(135deg, #ffd86b, #f5a623);
  color: #7a4b00;
}

.rank-no.r2 {
  background: linear-gradient(135deg, #dbe2ea, #9aa6b6);
  color: #3f4b5c;
}

.rank-no.r3 {
  background: linear-gradient(135deg, #e8b083, #c97a3d);
  color: #6b3a12;
}

.rank-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rank-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2437;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-name .rank-me-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #4f46e5;
  background: #e0e2ff;
  border-radius: 6px;
  padding: 1px 5px;
  vertical-align: 1px;
}

.rank-badge {
  display: inline-block;
  height: 15px;
  width: auto;
  margin-left: 4px;
  vertical-align: -3px;
  object-fit: contain;
}

.rank-title-line {
  display: block;
  margin-top: 2px;
  line-height: 0;
}

.rank-title-img {
  height: 20px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.rank-meta {
  font-size: 11px;
  color: #8b93b8;
}

.rank-points {
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
  color: #6b7396;
}

.rank-points b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #f5a623;
  line-height: 1.2;
}

.rank-empty {
  text-align: center;
  color: #94a3b8;
  padding: 40px 16px;
  font-size: 13px;
}

.rank-shop-btn {
  display: block;
  margin: 10px 10px 2px;
  width: calc(100% - 20px);
  border: 1px solid #e8c48a;
  border-radius: 11px;
  padding: 9px 12px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 232, 176, 0.35), transparent 42%),
    linear-gradient(135deg, #3a1022 0%, #7b1e3a 55%, #4a1228 100%);
  color: #f8e7c0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.28), 0 6px 16px rgba(80, 18, 36, 0.22);
}
.rank-shop-btn:hover {
  filter: brightness(1.08);
}

@media (max-width: 640px) {
  .rank-ball {
    bottom: 216px;
  }
}

/* Fixed right-side panel on wide screens */
@media (min-width: 1440px) {
  .rank-ball {
    display: none;
  }

  .rank-layer {
    display: flex;
    position: fixed;
    top: auto;
    right: 26px;
    left: auto;
    bottom: 176px;
    transform: none;
    align-items: flex-end;
    z-index: 60;
    background: none;
    backdrop-filter: none;
    padding: 0;
    pointer-events: none;
  }

  .rank-layer[hidden] {
    display: none;
  }

  .rank-card {
    width: 264px;
    max-height: calc(100vh - 240px);
    pointer-events: auto;
    box-shadow: 0 18px 50px rgba(49, 46, 129, 0.16);
    border: 1px solid #eceefe;
  }
}

@media (min-width: 1600px) {
  .rank-layer {
    right: 48px;
  }
}


.mystery-shop-layer {
  position: fixed;
  inset: 0;
  z-index: 100200;
  background: rgba(18, 8, 14, 0.72);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mystery-shop-layer[hidden] { display: none; }
.mystery-shop-layer .rank-close { color: #e8c48a; }
.mystery-shop-card {
  position: relative;
  width: 440px;
  max-width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 0%, rgba(232, 176, 90, 0.16), transparent 36%),
    linear-gradient(180deg, #2a1018 0%, #14080c 100%);
  border: 1px solid rgba(232, 196, 138, 0.4);
  box-shadow: 0 28px 80px rgba(20, 6, 10, 0.55);
  color: #f6ead7;
}
.mystery-shop-head {
  padding: 20px 22px 12px;
  border-bottom: 1px solid rgba(232, 196, 138, 0.18);
}
.mystery-shop-kicker {
  display: block;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d4b07a;
  margin-bottom: 4px;
}
.mystery-shop-title {
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffe9c4;
}
.mystery-shop-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #cbb59a;
}
.mystery-shop-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
}
.mystery-shop-tab {
  flex: 1;
  border: 1px solid rgba(232, 196, 138, 0.28);
  background: transparent;
  color: #d9c4a6;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.mystery-shop-tab.active {
  background: linear-gradient(135deg, #f0d19a, #c9924a);
  color: #3a1a12;
  border-color: transparent;
}
.mystery-shop-msg {
  margin: 10px 16px 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  background: rgba(255, 244, 220, 0.1);
  color: #f3e0c0;
}
.mystery-shop-msg.is-error {
  background: rgba(180, 40, 50, 0.22);
  color: #ffd0d4;
}
.mystery-shop-msg.is-ok {
  background: rgba(46, 120, 70, 0.28);
  color: #d9f5df;
}
.mystery-shop-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 18px;
}
.mystery-shop-goods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mystery-shop-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 248, 236, 0.06);
  border: 1px solid rgba(232, 196, 138, 0.16);
}
.mystery-shop-art {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, #4a1b28, #1c0b12 72%);
  overflow: hidden;
}
.mystery-shop-art svg { width: 58px; height: 58px; display: block; }
.mystery-shop-item-name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #fff3dc;
}
.mystery-shop-item-meta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #d2b48c;
}
.mystery-shop-give,
.mystery-shop-cancel {
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.mystery-shop-give {
  background: linear-gradient(135deg, #f0d19a, #c9924a);
  color: #3a1a12;
}
.mystery-shop-give:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mystery-shop-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #ead9c0;
  border: 1px solid rgba(232, 196, 138, 0.25);
}
.mystery-shop-empty {
  text-align: center;
  padding: 46px 16px;
  color: #cbb59a;
}
.mystery-shop-empty-mark {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 14px;
  border: 1px dashed rgba(232, 196, 138, 0.45);
  border-radius: 999px;
  letter-spacing: 0.24em;
  font-size: 12px;
  color: #e8c48a;
}
.mystery-shop-picker-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #ffe9c4;
}
.mystery-shop-back {
  border: 1px solid rgba(232, 196, 138, 0.3);
  background: transparent;
  color: #e8c48a;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.mystery-shop-search {
  width: 100%;
  border: 1px solid rgba(232, 196, 138, 0.28);
  background: rgba(255, 248, 236, 0.06);
  color: #fff3dc;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  outline: none;
  margin-bottom: 10px;
}
.mystery-shop-search::placeholder { color: #b9a086; }
.mystery-shop-users {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.mystery-shop-user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(232, 196, 138, 0.12);
  background: rgba(255, 248, 236, 0.04);
  color: inherit;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}
.mystery-shop-user:hover,
.mystery-shop-user.is-on {
  border-color: #e8c48a;
  background: rgba(232, 196, 138, 0.12);
}
.mystery-shop-user-name { font-weight: 800; font-size: 13px; }
.mystery-shop-user-meta { font-size: 11px; color: #cbb59a; margin-top: 2px; }
.mystery-shop-confirm {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(240, 209, 154, 0.1);
  border: 1px solid rgba(232, 196, 138, 0.22);
}
.mystery-shop-confirm p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #ffe9c4;
}
.mystery-shop-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.frame-preview.is-img {
  background: none;
  border-radius: 0;
  overflow: visible;
}

.frame-tile-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.rank-avatar-wrap {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-avatar-wrap .rank-avatar {
  width: var(--inner, 20px);
  height: var(--inner, 20px);
  font-size: calc(var(--inner, 20px) * 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.member-avatar-wrap.has-frame-img .member-avatar {
  width: var(--inner, 30px);
  height: var(--inner, 30px);
  font-size: calc(var(--inner, 30px) * 0.4);
}

.avatar-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.admin-panel {
  background: rgba(255, 244, 235, 0.45);
  border: 1px dashed #e0b07d;
  border-radius: 14px;
  padding: 12px;
}

/* 后台折叠分组：同类管理用「+」合并，点开后展开调整 */
.admin-group {
  margin-top: 14px;
}
.admin-group[hidden] { display: none; }
.admin-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #e0b07d;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff7ee, #ffeed9);
  color: #8d5a2b;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.admin-group-head:hover { background: linear-gradient(180deg, #fff2e2, #ffe6c9); }
.admin-group-name { min-width: 0; }
.admin-group-plus {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffb74d;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.18s ease;
}
.admin-group-head[aria-expanded="true"] .admin-group-plus { transform: rotate(45deg); }
.admin-group-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-group-body[hidden] { display: none; }
.admin-group-body > .admin-panel { margin-top: 0; }

/* 切磋技能特效管理（管理员逐宠物配置） */
.battle-skill-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}
.battle-skill-item {
  padding: 10px;
  border: 1px solid #f0cfa8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
}
.battle-skill-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.battle-skill-name { font-size: 14px; font-weight: 800; color: #5d4037; }
.battle-skill-mode-group { display: inline-flex; }
.battle-skill-mode {
  padding: 5px 12px;
  border: 1px solid #e0b07d;
  background: #fff;
  color: #8d5a2b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.battle-skill-mode:first-child { border-radius: 999px 0 0 999px; }
.battle-skill-mode:last-child { border-radius: 0 999px 999px 0; border-left: none; }
.battle-skill-mode.active { background: #ffb74d; border-color: #ffb74d; color: #fff; cursor: default; }
.battle-skill-current { font-size: 12px; color: #a1887f; }
.battle-skill-replace { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.battle-skill-replace-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #8d6e63;
  cursor: pointer;
}
.battle-skill-replace-input { width: auto; margin: 0; cursor: pointer; }
.battle-skill-replace-tip { font-size: 12px; color: #a1887f; }
.battle-skill-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.battle-skill-slot {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.battle-skill-slot-label { font-size: 12px; font-weight: 700; color: #8d6e63; }
.battle-skill-thumb-box {
  width: 100%;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #e0b07d;
  border-radius: 10px;
  background: #fffaf4;
  overflow: hidden;
}
.battle-skill-thumb { max-width: 100%; max-height: 100%; object-fit: contain; }
.battle-skill-empty { font-size: 12px; color: #bfa79a; }
.battle-skill-slot-ops { display: flex; gap: 8px; }
.battle-skill-slot-ops .chance-btn { padding: 5px 12px; font-size: 12px; }
.battle-skill-clear {
  padding: 5px 12px;
  border: 1px solid #e0b07d;
  border-radius: 999px;
  background: #fff;
  color: #c62828;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.battle-skill-hurts { margin-top: 10px; }
.battle-skill-hurt-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.battle-skill-hurt {
  position: relative;
  width: 74px;
  height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0b07d;
  border-radius: 10px;
  background: #fffaf4;
  overflow: hidden;
}
.battle-skill-hurt img { max-width: 100%; max-height: 100%; object-fit: contain; }
.battle-skill-hurt .battle-skill-clear {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}
.battle-skill-add { padding: 5px 12px; font-size: 12px; }
.battle-skill-asset {
  width: 100%;
  max-width: 260px;
  padding: 5px 10px;
  font-size: 12px;
}
.battle-skill-hurt-list .battle-skill-asset { width: auto; max-width: 190px; }

.admin-select {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #1f2437;
  font-size: 14px;
}

.admin-amount {
  width: 90px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #1f2437;
  font-size: 14px;
  text-align: center;
}

.chance-btn.admin-plus {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.chance-btn.admin-minus {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}

.badge-sparkles {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.spark-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(255, 235, 170, 0.95), 0 0 2px rgba(255, 214, 120, 0.6);
  opacity: 0;
  animation: sparkPulse var(--sd, 2s) var(--sdel, 0s) infinite ease-in-out;
}

.spark-cross {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  animation: sparkPulse var(--sd, 2.2s) var(--sdel, 0s) infinite ease-in-out;
}

.spark-cross::before,
.spark-cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(135deg, #fff, #ffe9a8);
  border-radius: 2px;
  box-shadow: 0 0 6px 1px rgba(255, 235, 170, 0.85);
}

.spark-cross::before {
  width: 100%;
  height: 2px;
  transform: translate(-50%, -50%);
}

.spark-cross::after {
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%);
}

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

@keyframes orbPulse {
  0%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
  50% { opacity: 0.9; transform: translate(-50%,-50%) scale(1.2); }
}

@keyframes ringExpand {
  0%   { transform: translate(-50%,-50%) scale(0.5); opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(1.6); opacity: 0; }
}

/* 流光粒子 - 光球 (level 2+) */
.spark-orb {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,235,170,0.4) 50%, transparent 70%);
  box-shadow: 0 0 8px 2px rgba(255,220,120,0.6), 0 0 2px 1px rgba(255,255,255,0.9);
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%,-50%);
  animation: orbPulse var(--sd, 2s) var(--sdel, 0s) infinite ease-in-out;
}

/* 流光圆环 (level 4+) */
.spark-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,235,170,0.55);
  box-shadow: 0 0 10px rgba(255,220,120,0.35), inset 0 0 8px rgba(255,255,255,0.15);
  animation: ringExpand var(--sd, 1.8s) infinite ease-out;
}

/* ===== 徽章特效等级 ===== */
/* level 1 (基础): 圆盘静止 */
.badge-fx-1 .badge-disc { animation: none; }

/* level 2 (cost>=70): 圆盘呼吸光晕 */
.badge-fx-2 .badge-disc {
  animation: discGlow 2.4s ease-in-out infinite;
}
@keyframes discGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 0 4px rgba(255,255,255,0.35), 0 6px 14px rgba(0,0,0,0.2); }
  50%      { box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 0 0 5px rgba(255,235,170,0.55), 0 0 16px rgba(255,220,120,0.35), 0 6px 14px rgba(0,0,0,0.2); }
}

/* level 3 (cost>=100): 圆盘旋转流光 + 呼吸光晕 */
.badge-fx-3 .badge-disc {
  animation: discGlow 2.4s ease-in-out infinite;
  position: relative;
}
.badge-fx-3 .badge-disc::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,235,170,0.5) 25%, rgba(255,220,120,0.8) 50%, rgba(255,235,170,0.5) 75%, transparent 100%);
  z-index: -1;
  animation: discSpin 2s linear infinite;
  mask: radial-gradient(circle at center, transparent 55%, black 65%);
  -webkit-mask: radial-gradient(circle at center, transparent 55%, black 65%);
}
@keyframes discSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* level 4 (cost>=140): 双环旋转 + 脉冲 */
.badge-fx-4 .badge-disc {
  animation: discGlow 2.4s ease-in-out infinite;
  position: relative;
}
.badge-fx-4 .badge-disc::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,235,170,0.6) 20%, rgba(255,200,80,0.9) 40%, rgba(255,235,170,0.6) 60%, transparent 80%);
  z-index: -1;
  animation: discSpin 1.5s linear infinite;
  mask: radial-gradient(circle at center, transparent 52%, black 68%);
  -webkit-mask: radial-gradient(circle at center, transparent 52%, black 68%);
}
.badge-fx-4 .badge-disc::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, transparent 0%, rgba(255,255,255,0.35) 30%, transparent 60%);
  z-index: -1;
  animation: discSpin 3s linear infinite reverse;
  mask: radial-gradient(circle at center, transparent 58%, black 70%);
  -webkit-mask: radial-gradient(circle at center, transparent 58%, black 70%);
}

/* level 5 (cost>=200): 最强特效 - 三环旋转 + 强烈光晕 + 粒子密度提升 */
.badge-fx-5 .badge-disc {
  animation: discGlowStrong 1.8s ease-in-out infinite;
  position: relative;
}
@keyframes discGlowStrong {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 4px rgba(255,235,170,0.45), 0 6px 14px rgba(0,0,0,0.2); }
  50%      { box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 0 0 6px rgba(255,220,120,0.75), 0 0 24px rgba(255,200,80,0.5), 0 6px 14px rgba(0,0,0,0.2); }
}
.badge-fx-5 .badge-disc::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,235,170,0.7) 15%, rgba(255,200,60,1) 30%, rgba(255,235,170,0.7) 45%, rgba(255,255,255,0.4) 60%, transparent 75%);
  z-index: -1;
  animation: discSpin 1.2s linear infinite;
  mask: radial-gradient(circle at center, transparent 48%, black 65%);
  -webkit-mask: radial-gradient(circle at center, transparent 48%, black 65%);
}
.badge-fx-5 .badge-disc::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 120deg, transparent 0%, rgba(255,255,255,0.5) 25%, transparent 50%, rgba(255,235,170,0.3) 75%);
  z-index: -1;
  animation: discSpin 2.5s linear infinite reverse;
  mask: radial-gradient(circle at center, transparent 55%, black 68%);
  -webkit-mask: radial-gradient(circle at center, transparent 55%, black 68%);
}

/* ===== Albums home ===== */
.albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}

.album-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.album-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(120, 150, 220, 0.25);
}

.album-cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #dfe9ff, #f6ecff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 34px;
  font-weight: 700;
  color: #b8c4e0;
  letter-spacing: 0.2em;
}

.album-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.06em;
}

.album-count {
  font-size: 13px;
  color: var(--text-muted);
}

.album-blank {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(165, 185, 230, 0.55);
  background: rgba(255, 255, 255, 0.25);
  cursor: default;
}

.album-blank:hover {
  transform: none;
  border-color: rgba(165, 185, 230, 0.55);
  box-shadow: none;
}

.album-blank-mark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--text-muted);
  opacity: 0.5;
  user-select: none;
}

/* Album detail head */
.album-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.album-back {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.album-back:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.album-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.08em;
  margin: 0;
}

/* Admin: blank slot toggles */
.album-admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.album-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.album-admin-name {
  color: var(--text);
  font-weight: 600;
}

.album-toggle {
  min-width: 64px;
  padding: 5px 14px;
  font-size: 12px;
}

.album-toggle.on {
  background: linear-gradient(135deg, #f3b562, #e58f3a);
  border-color: #e58f3a;
  color: #fff;
}

@media (max-width: 640px) {
  .albums-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
  }
  .album-blank {
    min-height: 150px;
  }
  .album-title {
    font-size: 19px;
  }
}

/* ===== Album admin: rename + reorder ===== */
.album-admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.album-admin-idx {
  flex: 0 0 auto;
  min-width: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.album-name-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.album-name-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(120, 150, 220, 0.18);
}

.album-name-input:disabled {
  background: rgba(230, 234, 244, 0.6);
  color: var(--text-muted);
  cursor: not-allowed;
}

.album-admin-ops {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.album-move {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.album-move:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.album-del {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: rgba(255, 255, 255, 0.8);
  color: #dc2626;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.album-del:hover {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

.album-admin-add {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.album-admin-add-btn {
  min-width: 160px;
}

.album-admin-modal-msg {
  margin: 0 0 10px;
  font-size: 13px;
}

.album-move:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.album-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Background admin row ===== */
.bg-admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bg-admin-row .chance-btn {
  flex: 1 1 auto;
}

/* ===== Album admin cover (custom thumbnail) ===== */
.album-admin-row {
  flex-wrap: wrap;
}

.album-admin-cover {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.album-cover-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border);
}

.album-cover-thumb.empty {
  display: none;
}

.album-cover-btn,
.album-cover-reset {
  font-size: 12px;
  padding: 5px 10px;
}

.album-admin-cover .chance-btn {
  flex: 0 0 auto;
}

/* ===== Video album cover ===== */
.album-cover video,
.album-cover-thumb.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album-cover video {
  pointer-events: none;
}

/* ===== Album module size + admin drag reorder ===== */
.album-card.size-2 {
  grid-column: span 2;
}

.album-card.size-3 {
  grid-column: span 3;
}

.album-card[draggable="true"] {
  cursor: grab;
}

.album-card.album-blank[draggable="true"] {
  cursor: grab;
}

.album-card.dragging {
  opacity: 0.45;
  transform: scale(0.98);
}

.album-card.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}

.album-size-select {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.album-size-select:focus {
  outline: none;
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .album-card.size-3 {
    grid-column: span 2;
  }
}

/* ===== Cover picker (choose from uploaded album media) ===== */
.cover-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(20, 16, 38, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cover-picker-overlay[hidden] {
  display: none;
}

.cover-picker-panel {
  width: min(680px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  padding: 16px;
}

.cover-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cover-picker-title {
  font-size: 15px;
  color: var(--text);
}

.cover-picker-close {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.cover-picker-close:hover {
  background: rgba(0, 0, 0, 0.14);
}

.cover-picker-grid {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.cover-pick-item {
  position: relative;
  display: block;
  border: none;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  aspect-ratio: 1;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.cover-pick-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.cover-pick-thumb {
  display: block;
  width: 100%;
  height: 100%;
}

.cover-pick-thumb img,
.cover-pick-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.cover-pick-badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  line-height: 1.6;
}

.cover-picker-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.cover-picker-hint {
  margin-top: 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* ===== 隐藏的相册管理浮窗 ===== */
.album-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 295;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.album-admin-modal[hidden] {
  display: none;
}
.album-admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 38, 0.55);
}
.album-admin-modal-card {
  position: relative;
  width: min(820px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #fffdf7;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.album-admin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.album-admin-modal-head b {
  font-size: 16px;
  color: var(--text);
}
.album-admin-modal-close {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.album-admin-modal-close:hover {
  background: rgba(0, 0, 0, 0.14);
}
.album-admin-modal-body {
  padding: 16px 18px 18px;
  overflow-y: auto;
}
.album-admin-coin {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.album-admin-coin .member-section-title {
  margin-top: 0;
}
.album-admin-modal .album-admin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* === Avatar frame flowing light (shimmer) effect === */
/* 每个头像框按兑换价档位拥有专属流光: 金币越高层数越多、速度越快、光晕越强 */
@keyframes frameShimmer {
  to { transform: rotate(360deg); }
}

@keyframes frameSpinRev {
  to { transform: rotate(-360deg); }
}

@keyframes frameGlowPulse {
  0%, 100% { box-shadow: 0 0 3px 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: var(--fx-glow, 0 0 10px rgba(255, 255, 255, 0.4)); }
}

@keyframes frameTwinkle {
  0%, 100% { opacity: 0.15; }
  45%, 55% { opacity: 0.95; }
}

/* Shared shimmer ring — colors/speed driven by per-frame fx-* variables */
.member-avatar-wrap.has-frame-img::after,
.member-avatar-wrap.has-frame::after,
.rank-avatar-wrap::after,
.frame-box::after {
  content: "";
  position: absolute;
  inset: var(--shimmer-inset, -3px);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--fx-a, rgba(255, 215, 130, 0.6)) 12%,
    var(--fx-b, rgba(255, 248, 220, 0.92)) 22%,
    var(--fx-c, rgba(180, 225, 255, 0.55)) 38%,
    transparent 48%,
    transparent 62%,
    var(--fx-c, rgba(210, 175, 255, 0.5)) 72%,
    var(--fx-a, rgba(255, 205, 130, 0.65)) 85%,
    transparent 98%
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent var(--shimmer-inner, 60%),
    #000 var(--shimmer-outer, 63%)
  );
  mask: radial-gradient(
    circle,
    transparent var(--shimmer-inner, 60%),
    #000 var(--shimmer-outer, 63%)
  );
  animation: frameShimmer var(--fx-speed, 4s) linear infinite;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}

/* Ensure frame-box is positioned for pseudo-element */
.frame-box {
  position: relative;
}

/* Smaller ring for ranking avatars (34px) */
.rank-avatar-wrap {
  --shimmer-inset: -2px;
  --shimmer-inner: 56%;
  --shimmer-outer: 60%;
}

/* ===== 各档位流光主题 (价格越高越华丽) ===== */

/* 流金 60分: 单带金流, 慢速, 无光晕 */
.fx-frame_luna {
  --fx-a: rgba(255, 209, 102, 0.75);
  --fx-b: rgba(255, 249, 224, 0.95);
  --fx-c: rgba(212, 160, 60, 0.5);
  --fx-speed: 4.6s;
}

/* 紫辉 100分: 紫青双色极光 + 柔光呼吸 */
.fx-frame_aurora {
  --fx-a: rgba(167, 139, 250, 0.75);
  --fx-b: rgba(224, 231, 255, 0.95);
  --fx-c: rgba(103, 232, 249, 0.7);
  --fx-speed: 3.4s;
  --fx-glow: 0 0 10px 1px rgba(167, 139, 250, 0.55);
}

.member-avatar-wrap.fx-frame_aurora.has-frame-img::after,
.member-avatar-wrap.fx-frame_aurora.has-frame::after,
.rank-avatar-wrap.fx-frame_aurora::after,
.frame-box.fx-frame_aurora::after {
  animation: frameShimmer var(--fx-speed) linear infinite,
    frameGlowPulse calc(var(--fx-speed) * 1.6) ease-in-out infinite;
}

/* 赤焰 140分: 橙红火焰双带, 快速旋转 + 火光脉冲 */
.fx-frame_flame {
  --fx-a: rgba(251, 146, 60, 0.85);
  --fx-b: rgba(254, 240, 138, 0.95);
  --fx-c: rgba(239, 68, 68, 0.7);
  --fx-speed: 2.4s;
  --fx-glow: 0 0 12px 2px rgba(249, 115, 22, 0.65);
}

.member-avatar-wrap.fx-frame_flame.has-frame-img::after,
.member-avatar-wrap.fx-frame_flame.has-frame::after,
.rank-avatar-wrap.fx-frame_flame::after,
.frame-box.fx-frame_flame::after {
  animation: frameShimmer var(--fx-speed) linear infinite,
    frameGlowPulse calc(var(--fx-speed) * 1.3) ease-in-out infinite;
}

/* 青翠 180分: 翠绿三重流光 + 光晕 + 内圈反向细流环 */
.fx-frame_emerald {
  --fx-a: rgba(52, 211, 153, 0.85);
  --fx-b: rgba(209, 250, 229, 0.95);
  --fx-c: rgba(16, 185, 129, 0.7);
  --fx-speed: 2.8s;
  --fx-glow: 0 0 12px 2px rgba(16, 185, 129, 0.6);
}

.member-avatar-wrap.fx-frame_emerald.has-frame-img::after,
.member-avatar-wrap.fx-frame_emerald.has-frame::after,
.rank-avatar-wrap.fx-frame_emerald::after,
.frame-box.fx-frame_emerald::after {
  animation: frameShimmer var(--fx-speed) linear infinite,
    frameGlowPulse calc(var(--fx-speed) * 1.4) ease-in-out infinite;
}

.member-avatar-wrap.fx-frame_emerald.has-frame-img::before,
.member-avatar-wrap.fx-frame_emerald.has-frame::before,
.rank-avatar-wrap.fx-frame_emerald::before,
.frame-box.fx-frame_emerald::before {
  content: "";
  position: absolute;
  inset: calc(var(--shimmer-inset, -3px) + 2px);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--fx-b) 0deg 8deg,
    transparent 8deg 24deg
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent calc(var(--shimmer-inner, 60%) - 8%),
    #000 calc(var(--shimmer-inner, 60%) - 4%)
  );
  mask: radial-gradient(
    circle,
    transparent calc(var(--shimmer-inner, 60%) - 8%),
    #000 calc(var(--shimmer-inner, 60%) - 4%)
  );
  animation: frameSpinRev calc(var(--fx-speed) * 2.2) linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

/* 冰魄 220分(顶级): 三色冰蓝满环疾旋 + 双层反向虚线环 + 星芒闪烁 + 强光晕 */
.fx-frame_crystal {
  --fx-a: rgba(56, 189, 248, 0.9);
  --fx-b: rgba(240, 249, 255, 0.98);
  --fx-c: rgba(129, 140, 248, 0.75);
  --fx-speed: 2s;
  --fx-glow: 0 0 14px 3px rgba(56, 189, 248, 0.7);
}

.member-avatar-wrap.fx-frame_crystal.has-frame-img::after,
.member-avatar-wrap.fx-frame_crystal.has-frame::after,
.rank-avatar-wrap.fx-frame_crystal::after,
.frame-box.fx-frame_crystal::after {
  animation: frameShimmer var(--fx-speed) linear infinite,
    frameGlowPulse calc(var(--fx-speed) * 1.25) ease-in-out infinite;
}

.member-avatar-wrap.fx-frame_crystal.has-frame-img::before,
.member-avatar-wrap.fx-frame_crystal.has-frame::before,
.rank-avatar-wrap.fx-frame_crystal::before,
.frame-box.fx-frame_crystal::before {
  content: "";
  position: absolute;
  inset: calc(var(--shimmer-inset, -3px) - 1px);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--fx-b) 0deg 6deg,
    transparent 6deg 18deg,
    var(--fx-a) 18deg 22deg,
    transparent 22deg 36deg
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent calc(var(--shimmer-inner, 60%) - 10%),
    #000 calc(var(--shimmer-inner, 60%) - 5%)
  );
  mask: radial-gradient(
    circle,
    transparent calc(var(--shimmer-inner, 60%) - 10%),
    #000 calc(var(--shimmer-inner, 60%) - 5%)
  );
  animation: frameSpinRev calc(var(--fx-speed) * 1.8) linear infinite,
    frameTwinkle calc(var(--fx-speed) * 1.5) ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* === Message board (留言板) === */
.msg-ball {
  position: fixed;
  right: 20px;
  bottom: 158px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 12px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #d4af37, #e8c060);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}

.msg-ball:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(232, 192, 96, 0.6);
}

@media (max-width: 640px) {
  .msg-ball {
    bottom: 154px;
  }
}

@media (min-width: 1440px) {
  .msg-ball {
    display: none;
  }

  .msg-layer {
    display: flex;
    position: fixed;
    top: auto;
    right: 26px;
    left: auto;
    bottom: 16px;
    transform: none;
    align-items: flex-end;
    z-index: 60;
    background: none;
    backdrop-filter: none;
    padding: 0;
    pointer-events: none;
  }

  .msg-layer[hidden] {
    display: none;
  }

  .msg-card {
    width: 264px;
    max-height: calc(100vh - 240px);
    pointer-events: auto;
    box-shadow: 0 18px 50px rgba(49, 46, 129, 0.16);
    border: 1px solid #eceefe;
  }
}

@media (min-width: 1600px) {
  .msg-layer {
    right: 48px;
  }
}

.msg-card {
  display: flex;
  flex-direction: column;
}

.msg-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  min-height: 120px;
  max-height: 360px;
}

.msg-list::-webkit-scrollbar {
  width: 4px;
}

.msg-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.msg-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  padding: 28px 0;
}

.msg-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f1f5;
}

.msg-item:last-child {
  border-bottom: none;
}

.msg-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.msg-body {
  flex: 1;
  min-width: 0;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.msg-author {
  font-size: 13px;
  font-weight: 700;
  color: #1f2437;
}

.msg-admin-tag {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #4f46e5;
  background: #e0e2ff;
  border-radius: 4px;
  padding: 0 4px;
  line-height: 1.6;
}

.msg-time {
  font-size: 11px;
  color: #a0a4b8;
  flex: 1;
}

.msg-del-btn {
  border: none;
  background: none;
  color: #e74c3c;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.msg-del-btn:hover {
  opacity: 1;
}

.msg-text {
  font-size: 13px;
  line-height: 1.6;
  color: #374151;
  word-break: break-word;
  margin: 0;
}

.msg-input-area {
  display: flex;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid #e6e8f0;
  background: #fafaff;
  border-radius: 0 0 18px 18px;
}

.msg-textarea {
  flex: 1;
  resize: none;
  border: 1px solid #d8dae5;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  font-family: inherit;
  color: #1f2437;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.msg-textarea:focus {
  border-color: #d4af37;
}

.msg-send-btn {
  flex: none;
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #d4af37, #e8c060);
  cursor: pointer;
  transition: transform 0.15s;
}

.msg-send-btn:hover:not(:disabled) {
  transform: scale(1.05);
}

.msg-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.msg-login-hint {
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  padding: 10px 0 14px;
  margin: 0;
}

/* ============================================================
   桌面宝宝 - 鹿灵 (集成到首页)
   所有选择器限定在 #pet-app 下避免冲突
   ============================================================ */

#pet-app .pet-speech-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #ffffff;
  border: 2px solid #8fbc8f;
  border-radius: 18px;
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #2d5a2d;
  white-space: nowrap;
  margin-bottom: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 18px rgba(60, 120, 60, 0.18);
  max-width: 320px;
  text-align: center;
  z-index: 10;
}
#pet-app .pet-speech-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#pet-app .pet-speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: #8fbc8f;
}
#pet-app .pet-speech-bubble::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  border: 7px solid transparent;
  border-top-color: #ffffff;
  z-index: 1;
}

/* 宝宝动画 */
@keyframes pet-anim-jump {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}
@keyframes pet-anim-squash {
  0%   { transform: scaleY(1) scaleX(1); }
  40%  { transform: scaleY(0.65) scaleX(1.2); }
  100% { transform: scaleY(1) scaleX(1); }
}
@keyframes pet-anim-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-10px) rotate(-3deg); }
  40% { transform: translateX(10px) rotate(3deg); }
  60% { transform: translateX(-7px) rotate(-2deg); }
  80% { transform: translateX(7px) rotate(2deg); }
}
@keyframes pet-anim-pet-head {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(2deg); }
}
@keyframes pet-anim-sleep-breathe {
  0%, 100% { transform: scale(1); filter: brightness(0.8); }
  50% { transform: scale(1.04); filter: brightness(0.85); }
}
@keyframes pet-anim-sing-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes pet-anim-eat {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.88); }
}

#pet-app .pet-container.anim-jump    .pet-img { animation: pet-anim-jump 0.6s ease-out; }
#pet-app .pet-container.anim-squash  .pet-img { animation: pet-anim-squash 0.5s ease-in-out; }
#pet-app .pet-container.anim-shake   .pet-img { animation: pet-anim-shake 0.5s ease-in-out; }
#pet-app .pet-container.anim-pet     .pet-img { animation: pet-anim-pet-head 0.4s ease-in-out infinite; }
#pet-app .pet-container.anim-sleep   .pet-img { animation: pet-anim-sleep-breathe 3s ease-in-out infinite; }
#pet-app .pet-container.anim-sing    .pet-img { animation: pet-anim-sing-sway 0.7s ease-in-out infinite; }
#pet-app .pet-container.anim-eat     .pet-img { animation: pet-anim-eat 0.35s ease-in-out 3; }

/* 特效层 */
#pet-app .effect-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

/* Zzz */
@keyframes pet-zzz-float {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(20px, -70px) scale(1.3); }
}
#pet-app .zzz {
  position: absolute;
  font-size: 26px;
  color: #4a9a4a;
  font-weight: 700;
  animation: pet-zzz-float 2.2s ease-out infinite;
}

/* 爱心 */
@keyframes pet-heart-float {
  0%   { opacity: 1; transform: translateY(0) scale(0.8) rotate(0); }
  100% { opacity: 0; transform: translateY(-90px) scale(1.4) rotate(15deg); }
}
#pet-app .heart {
  position: absolute;
  width: 28px;
  height: 28px;
  animation: pet-heart-float 1.6s ease-out forwards;
}
#pet-app .heart svg { width: 100%; height: 100%; display: block; }

/* 食物 */
@keyframes pet-food-fall {
  0%   { transform: translateY(-120px) rotate(0deg); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(0) rotate(360deg); opacity: 0; }
}
#pet-app .food {
  position: absolute;
  width: 34px;
  height: 34px;
  animation: pet-food-fall 1.1s ease-in forwards;
}
#pet-app .food svg { width: 100%; height: 100%; display: block; }

/* 音符 */
@keyframes pet-note-float {
  0%   { opacity: 0; transform: translateY(0) rotate(-12deg) scale(0.8); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-80px) rotate(18deg) scale(1.2); }
}
#pet-app .note {
  position: absolute;
  width: 26px;
  height: 30px;
  animation: pet-note-float 2s ease-out infinite;
}
#pet-app .note svg { width: 100%; height: 100%; display: block; }

/* 星星粒子 */
@keyframes pet-star-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.5) rotate(0deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-100px) scale(1.5) rotate(360deg); }
}
#pet-app .star {
  position: absolute;
  width: 26px;
  height: 26px;
  animation: pet-star-float 1.8s ease-out forwards;
}
#pet-app .star svg { width: 100%; height: 100%; display: block; }

/* 挥手打招呼动画 */
@keyframes pet-anim-wave {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  15%  { transform: rotate(-12deg) translateY(-3px); }
  30%  { transform: rotate(10deg) translateY(-6px); }
  45%  { transform: rotate(-12deg) translateY(-3px); }
  60%  { transform: rotate(10deg) translateY(-6px); }
  75%  { transform: rotate(-8deg) translateY(-3px); }
  90%  { transform: rotate(6deg) translateY(-2px); }
}
#pet-app .pet-container.anim-wave .pet-img { animation: pet-anim-wave 0.6s ease-in-out 4; }

/* 欢呼跳跃动画 */
@keyframes pet-anim-cheer {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  20%  { transform: translateY(-70px) scale(1.15, 0.9) rotate(-8deg); }
  35%  { transform: translateY(-90px) scale(1.1, 1) rotate(8deg); }
  50%  { transform: translateY(-70px) scale(1.15, 0.9) rotate(-5deg); }
  65%  { transform: translateY(-30px) scale(1, 1.1) rotate(3deg); }
  80%  { transform: translateY(-50px) scale(1.12, 0.9) rotate(-3deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
#pet-app .pet-container.anim-cheer .pet-img { animation: pet-anim-cheer 1.2s ease-out; }

/* 状态提示 */
#pet-app .pet-status-hint {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(45, 106, 45, 0.85);
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 10002;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
#pet-app .pet-status-hint.show { opacity: 1; }

/* 等级系统 */
#pet-app .level-panel {
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  border: 2px solid #ffd54f;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(255, 193, 7, 0.2);
}
#pet-app .level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
#pet-app .level-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ff9800, #ffc107);
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.35);
}
#pet-app .level-badge svg { width: 14px; height: 14px; fill: #fff; }
#pet-app .exp-text {
  font-size: 11px;
  color: #8d6e63;
  font-weight: 600;
}
#pet-app .exp-bar {
  width: 100%;
  height: 8px;
  background: #ffe0b2;
  border-radius: 4px;
  overflow: hidden;
}
#pet-app .exp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffb74d, #ff9800);
  border-radius: 4px;
  transition: width 0.5s ease;
  width: 0%;
}
#pet-app .cooldown-hint {
  font-size: 10px;
  color: #a1887f;
  margin-top: 5px;
  text-align: center;
}

/* 升级特效 */
@keyframes pet-levelup-glow {
  0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(255, 193, 7, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}
#pet-app .level-panel.leveling-up {
  animation: pet-levelup-glow 1s ease-out 3;
}
@keyframes pet-levelup-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
#pet-app .level-badge.leveling-up {
  animation: pet-levelup-bounce 0.5s ease-in-out 3;
}

/* 饱食度 */
.satiety-panel {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border: 2px solid #ffb74d;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(255, 152, 0, 0.18);
}
.satiety-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.satiety-label {
  font-size: 12px;
  font-weight: 700;
  color: #e65100;
}
.satiety-text {
  font-size: 11px;
  color: #8d6e63;
  font-weight: 600;
}
.satiety-bar {
  width: 100%;
  height: 8px;
  background: #ffe0b2;
  border-radius: 4px;
  overflow: hidden;
}
.satiety-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ffb74d, #ff7043);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* 经验飘字 */
@keyframes pet-exp-float {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  20% { opacity: 1; transform: translateY(-10px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-50px) scale(1); }
}
#pet-app .exp-popup {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  color: #ff9800;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
  animation: pet-exp-float 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}

/* ===== 悬浮球 + 弹出菜单 ===== */
#pet-app .pet-menu-ball {
  position: fixed;
  left: 20px;
  bottom: 100px;
  z-index: 10001;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(45, 106, 45, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  font-family: inherit;
}
#pet-app .pet-menu-ball:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 30px rgba(74, 154, 74, 0.6);
}
#pet-app .pet-menu-ball.active {
  background: transparent;
  box-shadow: 0 8px 24px rgba(255, 152, 0, 0.5);
}
@keyframes pet-ball-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(45, 106, 45, 0.45); }
  50% { box-shadow: 0 8px 32px rgba(74, 154, 74, 0.75); }
}
#pet-app .pet-menu-ball:not(.active) {
  animation: pet-ball-pulse 1.6s ease-in-out infinite;
}

/* 弹出菜单面板 */
#pet-app .pet-menu-panel {
  position: fixed;
  left: 20px;
  bottom: 96px;
  z-index: 10000;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 22px 16px 18px;
  box-shadow: 0 10px 36px rgba(60, 120, 60, 0.18);
  width: 168px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(143, 188, 143, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
  transform-origin: bottom left;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#pet-app .pet-menu-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* 宝宝信息提示 */
#pet-app .pet-info-tooltip {
  position: fixed;
  left: 120px;
  top: 80px;
  z-index: 9998;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(143, 188, 143, 0.3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  text-align: center;
  min-width: 140px;
}
#pet-app .pet-info-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}
#pet-app .pet-info-name {
  font-size: 14px;
  font-weight: 700;
  color: #2d6a2d;
  margin-bottom: 2px;
}
#pet-app .pet-info-desc {
  font-size: 11px;
  color: #5a8a5a;
  line-height: 1.3;
}
#pet-app .pet-menu-title {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #2d6a2d;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px dashed #c0dcc0;
  letter-spacing: 1px;
}
#pet-app .pet-menu-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 7px;
  border: none;
  border-radius: 12px;
  background: #f0f8f0;
  color: #2d5a2d;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.22s ease;
  font-family: inherit;
  font-weight: 500;
}
#pet-app .pet-menu-btn:hover {
  background: #d8eed8;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(60, 120, 60, 0.15);
}
#pet-app .pet-menu-btn:active { transform: translateX(2px) scale(0.97); }
#pet-app .pet-menu-btn.active {
  background: linear-gradient(135deg, #4a9a4a, #6ab86a);
  color: #fff;
  box-shadow: 0 4px 14px rgba(74, 154, 74, 0.35);
}
#pet-app .pet-menu-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* 大小滑块 */
#pet-app .pet-size-slider-container {
  display: none;
  padding: 10px 6px 4px;
  margin-top: 2px;
  background: #f5faf5;
  border-radius: 10px;
}
#pet-app .pet-size-slider-container.show { display: block; }
#pet-app .pet-size-slider {
  width: 100%;
  accent-color: #4a9a4a;
  cursor: pointer;
}
#pet-app .pet-size-label {
  font-size: 12px;
  color: #6a8a6a;
  text-align: center;
  margin-top: 6px;
  font-weight: 500;
}

/* 聊天输入框 */
#pet-app .pet-chat-container {
  display: none;
  position: fixed;
  left: 208px;
  bottom: 28px;
  z-index: 10001;
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  padding-top: 28px;
  box-shadow: 0 10px 30px rgba(60, 120, 60, 0.2);
  width: 270px;
  border: 2px solid #c0dcc0;
  user-select: none;
}
#pet-app .pet-chat-container.show { display: block; }
#pet-app .pet-chat-container.dragging {
  cursor: grabbing;
  box-shadow: 0 16px 40px rgba(60, 120, 60, 0.35);
  border-color: #4a9a4a;
}
#pet-app .pet-chat-drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: linear-gradient(90deg, #c0dcc0, #a8d0a8);
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #2d5a2d;
  opacity: 0.7;
  transition: opacity 0.2s;
}
#pet-app .pet-chat-drag-handle:hover {
  opacity: 1;
}
#pet-app .pet-chat-container label {
  display: block;
  font-size: 13px;
  color: #2d5a2d;
  font-weight: 600;
  margin-bottom: 8px;
}
#pet-app .pet-chat-input {
  width: 100%;
  padding: 9px 12px;
  border: 2px solid #d0e8d0;
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  color: #2d5a2d;
  transition: border-color 0.2s;
}
#pet-app .pet-chat-input:focus { border-color: #4a9a4a; }
#pet-app .pet-chat-hint {
  font-size: 11px;
  color: #aaa;
  margin-top: 6px;
}

/* 歌曲选择面板 */
#pet-app .pet-select-panel {
  position: fixed;
  left: 208px;
  bottom: 28px;
  z-index: 10001;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 10px 36px rgba(60, 120, 60, 0.2);
  width: 280px;
  border: 1px solid rgba(143, 188, 143, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) translateX(0) scale(0.92);
  transform-origin: bottom left;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#pet-app .pet-select-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) translateX(0) scale(1);
}
#pet-app .pet-select-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: #2d6a2d;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px dashed #c0dcc0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#pet-app .pet-panel-close-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: #fffde7;
  border-radius: 50%;
  color: #8b6914;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}
#pet-app .pet-panel-close-btn:hover { background: #fff3d0; color: #b8860b; }

/* 歌曲列表 */
#pet-app .pet-song-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#pet-app .pet-song-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid #f0e0a0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fffde7;
}
#pet-app .pet-song-item:hover {
  border-color: #daa520;
  background: #fff8e1;
}
#pet-app .pet-song-item.active {
  border-color: #daa520;
  background: linear-gradient(135deg, #fff8e1, #fff3d0);
}
#pet-app .pet-song-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #daa520, #ffd700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#pet-app .pet-song-item-icon svg { width: 16px; height: 16px; fill: #fff; }
#pet-app .pet-song-item-info { flex: 1; min-width: 0; }
#pet-app .pet-song-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #8b6914;
  margin-bottom: 2px;
}
#pet-app .pet-song-item-style {
  font-size: 11px;
  color: #b8a040;
}
#pet-app .pet-song-item.playing .pet-song-item-icon {
  animation: pet-anim-sing-sway 0.7s ease-in-out infinite;
}
#pet-app .pet-song-item-admin {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  flex-shrink: 0;
}
#pet-app .pet-song-item-admin-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(200,60,60,0.15);
  color: #c0392b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
#pet-app .pet-song-item-admin-btn:hover {
  background: rgba(200,60,60,0.3);
  transform: scale(1.1);
}
#pet-app .pet-song-item-replace-btn {
  background: rgba(52,152,219,0.15);
  color: #2980b9;
}
#pet-app .pet-song-item-replace-btn:hover {
  background: rgba(52,152,219,0.3);
}
#pet-app .pet-song-item-rename-btn {
  background: rgba(46,204,113,0.15);
  color: #27ae60;
}
#pet-app .pet-song-item-rename-btn:hover {
  background: rgba(46,204,113,0.3);
}

/* ===== 宝宝音乐播放器面板 ===== */
#pet-app .pet-music-panel {
  position: fixed;
  left: 208px;
  bottom: 28px;
  z-index: 10001;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(184, 134, 11, 0.25);
  width: 320px;
  border: 1px solid rgba(218, 165, 32, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
  transform-origin: bottom left;
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
#pet-app .pet-music-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#pet-app .pet-music-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #fff3d0;
}
#pet-app .pet-music-song-name {
  font-size: 15px;
  font-weight: 700;
  color: #b8860b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
#pet-app .pet-music-body {
  padding: 18px 18px 12px;
}
#pet-app .pet-music-cover {
  width: 100px;
  height: 100px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #daa520;
  position: relative;
  background: linear-gradient(135deg, #fff8e1, #fffde7);
  display: flex;
  align-items: center;
  justify-content: center;
}
#pet-app .pet-music-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#pet-app .pet-music-cover-default {
  font-size: 48px;
  color: #daa520;
}
@keyframes pet-cover-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#pet-app .pet-music-cover.spinning {
  animation: pet-cover-spin 10s linear infinite;
}
#pet-app .pet-music-cover.spinning.paused {
  animation-play-state: paused;
}
#pet-app .pet-music-time-row {
  text-align: center;
  font-size: 13px;
  color: #8b6914;
  margin-bottom: 12px;
  font-weight: 500;
}
#pet-app .pet-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}
#pet-app .pet-music-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fffde7;
  color: #b8860b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
#pet-app .pet-music-btn:hover {
  background: #fff3d0;
  transform: scale(1.1);
}
#pet-app .pet-music-btn:active {
  transform: scale(0.95);
}
#pet-app .pet-music-btn.play-btn {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #daa520, #ffd700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(218, 165, 32, 0.4);
}
#pet-app .pet-music-btn.play-btn:hover {
  background: linear-gradient(135deg, #c89614, #e6c200);
}
#pet-app .pet-music-progress-row {
  padding: 0 6px;
  margin-bottom: 12px;
}
#pet-app .pet-music-progress {
  width: 100%;
  height: 4px;
  accent-color: #daa520;
  cursor: pointer;
  border-radius: 2px;
}
#pet-app .pet-music-options {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}
#pet-app .pet-music-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8b6914;
  cursor: pointer;
  user-select: none;
}
#pet-app .pet-music-opt input[type="checkbox"] {
  accent-color: #daa520;
  cursor: pointer;
}
#pet-app .pet-music-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  margin-bottom: 12px;
  color: #8b6914;
}
#pet-app .pet-music-volume {
  flex: 1;
  accent-color: #daa520;
  cursor: pointer;
}
#pet-app .pet-music-list {
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid #fff3d0;
  padding: 8px 0;
}
#pet-app .pet-music-list .pet-song-item {
  margin: 0 10px 6px;
}
#pet-app .pet-music-list .pet-song-item:last-child {
  margin-bottom: 0;
}

/* 迷你音乐悬浮球 */
#pet-app .pet-mini-music {
  position: fixed;
  left: 88px;
  bottom: 28px;
  z-index: 10001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a9a4a, #6ab86a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 14px rgba(74, 154, 74, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
#pet-app .pet-mini-music:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(74, 154, 74, 0.55);
}
#pet-app .pet-mini-music.playing {
  animation: pet-mini-pulse 1.5s ease-in-out infinite;
}
@keyframes pet-mini-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(74, 154, 74, 0.4); }
  50% { box-shadow: 0 4px 20px rgba(74, 154, 74, 0.65); }
}

/* ===== 右下角常驻音乐迷你条（红色箭头收起藏到右侧） ===== */
.music-widget {
  position: fixed;
  right: 14px;
  /* 抬到底部导航栏之上，避免被 nav 裁切 */
  bottom: calc(var(--hub-tab-h, 58px) + 14px);
  z-index: 170;
  width: min(560px, calc(100vw - 28px));
}

.mw-card {
  position: relative;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 0;
  border-radius: 20px;
  background: linear-gradient(120deg, #33353f 0%, #23242c 60%, #2b2433 100%);
  box-shadow: 0 14px 34px rgba(20, 18, 40, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  overflow: hidden;
  color: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.mw-card * {
  -webkit-user-select: none;
  user-select: none;
}

/* 左侧红色收起箭头把手 */
.mw-grip {
  align-self: stretch;
  width: 26px;
  border: none;
  background: linear-gradient(180deg, #ff6b45, #f63d2f);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px 0 0 20px;
  flex: 0 0 auto;
  transition: background 0.2s;
}

.mw-grip:hover {
  background: linear-gradient(180deg, #ff8262, #ff4b3a);
}

.mw-grip svg {
  transition: transform 0.25s;
}

/* 黑胶唱片 */
.mw-cover {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.mw-cover::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

.mw-vinyl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: block;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.14) 0%, transparent 45%),
    radial-gradient(circle, #191a20 0 22%, #2e2f38 24% 26%, #1a1b21 30% 42%, #2f3039 46% 49%, #191a20 54% 100%);
  background-size: 100% 100%, 100% 100%;
}

.mw-cover img {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 50%;
  object-fit: cover;
  display: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.music-widget.playing .mw-cover img,
.music-widget.playing .mw-vinyl {
  animation: mw-disc-spin 9s linear infinite;
}

@keyframes mw-disc-spin {
  to { transform: rotate(360deg); }
}

.mw-disc-ic {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background: rgba(20, 20, 28, 0.35);
  border-radius: 50%;
  transition: background 0.2s;
}

.mw-cover:hover .mw-disc-ic {
  background: rgba(20, 20, 28, 0.55);
}

/* 信息列 */
.mw-info {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  padding: 4px 2px;
  line-height: 1.35;
}

.mw-title {
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
}

.mw-title .mw-tmark {
  color: #ffd24d;
  font-size: 13px;
}

.mw-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-artist {
  font-size: 12px;
  color: #b9bac4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 播放控制组 */
.mw-ctrls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.mw-cbtn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #e8e9ee;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.mw-cbtn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.mw-cbtn:active {
  transform: scale(0.92);
}

.mw-cbtn-play {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ff8a3c, #ff4d3a);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 90, 58, 0.5);
}

.mw-cbtn-play:hover {
  background: linear-gradient(135deg, #ff9a58, #ff5f4a);
  color: #fff;
}

/* 右侧信息 + 小图标 */
.mw-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.mw-time {
  font-size: 11.5px;
  color: #c8cad4;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
  white-space: nowrap;
}

.mw-ic {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #d4d6de;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.mw-ic:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.mw-ic.active {
  color: #ff6b45;
}

/* 底部细进度条：视觉细轨道 + 可点热区放大 */
.mw-progress-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.mw-progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  outline: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
}

.mw-progress::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff8a3c, #ff4d3a);
  opacity: 0.92;
}

.mw-progress::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff8a3c, #ff4d3a);
  opacity: 0.92;
}

.mw-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ff4d3a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.mw-progress::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ff4d3a;
}

/* 收起状态 */
.music-widget.collapsed .mw-card {
  transform: translateX(calc(100% + 46px));
  opacity: 0;
  pointer-events: none;
}

/* 收起态容器放行点击：容器是一条 fixed 隐形区域，若保持可点击
   会挡住底部弹层（如主题列表最后一行「库洛米」）的触摸事件。
   仅保留展开红点(mw-tab)可点。 */
.music-widget.collapsed {
  pointer-events: none;
}

.music-widget.collapsed .mw-tab {
  pointer-events: auto;
}

.mw-tab {
  position: fixed;
  right: 20px;
  bottom: calc(var(--hub-tab-h, 58px) + 20px);
  z-index: 171;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ff6b45, #f63d2f);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(246, 61, 47, 0.5);
  animation: mw-tab-pop 0.3s ease-out;
  transition: transform 0.2s, box-shadow 0.2s;
}

.mw-tab:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 26px rgba(246, 61, 47, 0.65);
}

.mw-tab[hidden] {
  display: none;
}

/* 仙途游戏弹层开启时，音乐条浮到弹层之上，方便在游戏里手动点开/暂停 */
body:has(#hub-xiuxian-layer:not([hidden])) .music-widget {
  z-index: 9500;
}

body:has(#hub-xiuxian-layer:not([hidden])) .mw-tab {
  z-index: 9501;
}

@keyframes mw-tab-pop {
  from { transform: translateX(30px) scale(0.7); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

/* 歌单浮层 */
.mw-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  left: 0;
  background: rgba(40, 41, 51, 0.98);
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 480px);
  color: #fff;
  z-index: 3;
}

.mw-pop[hidden] {
  display: none;
}

.mw-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 6px;
}

.mw-pop-t {
  font-size: 15px;
  font-weight: 700;
}

.mw-pop-q {
  flex: 1;
  font-size: 12px;
  color: #9b9daa;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mw-pop-q.err {
  color: #ff8a80;
}

.mw-pop-x {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #dfe0e6;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.mw-url-row {
  display: flex;
  gap: 6px;
  padding: 4px 14px 6px;
}

.mw-url {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.mw-url::placeholder {
  color: #868892;
}

.mw-load {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: none;
  border-radius: 9px;
  background: linear-gradient(135deg, #ff8a3c, #ff4d3a);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

.mw-vol-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 14px 8px;
  color: #b9bac4;
}

.mw-vol-row input {
  flex: 1;
  accent-color: #ff6b45;
}

.mw-songlist {
  list-style: none;
  margin: 0;
  padding: 0 6px 8px;
  overflow-y: auto;
  max-height: 46vh;
}

.mw-song {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13px;
  cursor: pointer;
  color: #d8d9e0;
  transition: background 0.15s;
}

.mw-song:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mw-song.active {
  background: rgba(255, 107, 69, 0.16);
  color: #fff;
}

.mw-song-idx {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-size: 12px;
  color: #8b8d9b;
}

.mw-song.active .mw-song-idx {
  color: #ff8a3c;
}

.mw-song-name {
  flex: 0 0 auto;
  max-width: 55%;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-song-singer {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: #8b8d9b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-song-empty {
  list-style: none;
  padding: 22px 12px;
  text-align: center;
  color: #8b8d9b;
  font-size: 13px;
}

/* 窄屏压缩 */
@media (max-width: 460px) {
  .music-widget {
    width: calc(100vw - 16px);
    right: 8px;
  }

  .mw-cbtn {
    width: 30px;
    height: 30px;
  }

  .mw-time {
    display: none;
  }

  .mw-ic {
    width: 28px;
    height: 28px;
  }

  .mw-title {
    font-size: 13.5px;
  }
}

/* ============================================================
   桌面宝宝 - 朱雀 (独立命名空间 #pet2-app)
   金色主题, 与 #pet-app 完全隔离
   ============================================================ */

#pet2-app .pet2-speech-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #ffffff;
  border: 2px solid #daa520;
  border-radius: 18px;
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #8b6914;
  white-space: nowrap;
  margin-bottom: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 18px rgba(218, 165, 32, 0.18);
  max-width: 320px;
  text-align: center;
  z-index: 10;
}
#pet2-app .pet2-speech-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#pet2-app .pet2-speech-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  border: 7px solid transparent;
  border-top-color: #ffffff;
  z-index: 1;
}

/* 宝宝动画 (复用关键帧, 选择器绑定 pet2-) */
#pet2-app .pet2-container.pet2-anim-jump    .pet2-img { animation: pet-anim-jump 0.6s ease-out; }
#pet2-app .pet2-container.pet2-anim-squash  .pet2-img { animation: pet-anim-squash 0.5s ease-in-out; }
#pet2-app .pet2-container.pet2-anim-shake    .pet2-img { animation: pet-anim-shake 0.5s ease-in-out; }
#pet2-app .pet2-container.pet2-anim-pet     .pet2-img { animation: pet-anim-pet-head 0.4s ease-in-out infinite; }
#pet2-app .pet2-container.pet2-anim-sleep    .pet2-img { animation: pet-anim-sleep-breathe 3s ease-in-out infinite; }
#pet2-app .pet2-container.pet2-anim-sing     .pet2-img { animation: pet-anim-sing-sway 0.7s ease-in-out infinite; }
#pet2-app .pet2-container.pet2-anim-eat      .pet2-img { animation: pet-anim-eat 0.35s ease-in-out 3; }
#pet2-app .pet2-container.pet2-anim-eat-new .pet2-img { animation: pet2-anim-eat-new 0.5s ease-in-out 2; }
#pet2-app .pet2-container.pet2-anim-eat-new {
  filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.5));
}
#pet2-app .pet2-container.pet2-anim-wave     .pet2-img { animation: pet-anim-wave 0.6s ease-in-out 4; }
#pet2-app .pet2-container.pet2-anim-cheer    .pet2-img { animation: pet-anim-cheer 1.2s ease-out; }

/* 特效层 */
#pet2-app .effect-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

/* Zzz */
#pet2-app .pet2-zzz {
  position: absolute;
  font-size: 26px;
  color: #daa520;
  font-weight: 700;
  animation: pet-zzz-float 2.2s ease-out infinite;
}

/* 飞行云絮尾迹 (移动时由 JS emitTrail 生成) */
@keyframes pet2-wind-puff {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  18%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--puff-x, -40px)), calc(-50% + var(--puff-y, -18px))) scale(1.5); }
}
#pet2-app .pet2-wind-puff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffffff 0%, rgba(255, 255, 255, 0.92) 34%, rgba(210, 226, 255, 0.55) 62%, rgba(210, 226, 255, 0) 78%);
  box-shadow: 0 0 8px rgba(190, 210, 255, 0.65);
  pointer-events: none;
  animation: pet2-wind-puff 0.7s ease-out forwards;
  will-change: transform, opacity;
}

/* 爱心 */
#pet2-app .pet2-heart {
  position: absolute;
  width: 28px;
  height: 28px;
  animation: pet-heart-float 1.6s ease-out forwards;
}
#pet2-app .pet2-heart svg { width: 100%; height: 100%; display: block; }

/* 金币粒子 */
@keyframes pet2-coin-float {
  0% { opacity: 0; transform: translateY(0) scale(0.5) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.4) rotate(360deg); }
}
#pet2-app .pet2-coin {
  position: absolute;
  width: 28px;
  height: 28px;
  animation: pet2-coin-float 1.6s ease-out forwards;
}
#pet2-app .pet2-coin svg { width: 100%; height: 100%; display: block; }

/* 食物 */
#pet2-app .pet2-food {
  position: absolute;
  width: 34px;
  height: 34px;
  animation: pet-food-fall 1.1s ease-in forwards;
}
#pet2-app .pet2-food svg { width: 100%; height: 100%; display: block; }

/* 音符 */
#pet2-app .pet2-note {
  position: absolute;
  width: 26px;
  height: 30px;
  animation: pet-note-float 2s ease-out infinite;
}
#pet2-app .pet2-note svg { width: 100%; height: 100%; display: block; }

/* 星星粒子 */
#pet2-app .pet2-star {
  position: absolute;
  width: 26px;
  height: 26px;
  animation: pet-star-float 1.8s ease-out forwards;
}
#pet2-app .pet2-star svg { width: 100%; height: 100%; display: block; }

/* 状态提示 */
#pet2-app .pet2-status-hint {
  position: fixed;
  right: 50%;
  bottom: 24px;
  transform: translateX(50%);
  background: rgba(184, 134, 11, 0.88);
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 10002;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
#pet2-app .pet2-status-hint.show { opacity: 1; }

/* 等级系统 */
#pet2-app .level-panel {
  background: linear-gradient(135deg, #fffde7, #fff8e1);
  border: 2px solid #ffd54f;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(255, 193, 7, 0.2);
}
#pet2-app .level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
#pet2-app .level-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #daa520, #ffd700);
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(218, 165, 32, 0.35);
}
#pet2-app .level-badge svg { width: 14px; height: 14px; fill: #fff; }
#pet2-app .exp-text {
  font-size: 11px;
  color: #8b6914;
  font-weight: 600;
}
#pet2-app .exp-bar {
  width: 100%;
  height: 8px;
  background: #ffe0b2;
  border-radius: 4px;
  overflow: hidden;
}
#pet2-app .exp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #daa520);
  border-radius: 4px;
  transition: width 0.5s ease;
  width: 0%;
}
#pet2-app .cooldown-hint {
  font-size: 10px;
  color: #a1887f;
  margin-top: 5px;
  text-align: center;
}

/* 升级特效 */
#pet2-app .level-panel.leveling-up {
  animation: pet-levelup-glow 1s ease-out 3;
}
#pet2-app .level-badge.leveling-up {
  animation: pet-levelup-bounce 0.5s ease-in-out 3;
}

/* 经验飘字 */
#pet2-app .pet2-exp-popup {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  color: #daa520;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
  animation: pet-exp-float 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}

/* ===== 悬浮球 + 弹出菜单 (右侧) ===== */
#pet2-app .pet2-menu-ball {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 10001;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(218, 165, 32, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  font-family: inherit;
}
#pet2-app .pet2-menu-ball:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.6);
}
#pet2-app .pet2-menu-ball.active {
  background: transparent;
  box-shadow: 0 8px 24px rgba(255, 152, 0, 0.5);
}
@keyframes pet2-ball-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(218, 165, 32, 0.45); }
  50% { box-shadow: 0 8px 32px rgba(255, 215, 0, 0.75); }
}
#pet2-app .pet2-menu-ball:not(.active) {
  animation: pet2-ball-pulse 1.6s ease-in-out infinite;
}

/* 弹出菜单面板 */
#pet2-app .pet2-menu-panel {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 10000;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 22px 16px 18px;
  box-shadow: 0 10px 36px rgba(184, 134, 11, 0.18);
  width: 168px;
  border: 1px solid rgba(218, 165, 32, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
  transform-origin: bottom right;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#pet2-app .pet2-menu-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* 宝宝信息提示 */
#pet2-app .pet2-info-tooltip {
  position: fixed;
  right: 120px;
  top: 80px;
  z-index: 9998;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(218, 165, 32, 0.3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  text-align: center;
  min-width: 140px;
}
#pet2-app .pet2-info-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}
#pet2-app .pet2-info-name {
  font-size: 14px;
  font-weight: 700;
  color: #b8860b;
  margin-bottom: 2px;
}
#pet2-app .pet2-info-desc {
  font-size: 11px;
  color: #8b6914;
  line-height: 1.3;
}

#pet2-app .pet2-menu-title {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #b8860b;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px dashed #e6c84a;
  letter-spacing: 1px;
}
#pet2-app .pet2-menu-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 7px;
  border: none;
  border-radius: 12px;
  background: #fffde7;
  color: #8b6914;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.22s ease;
  font-family: inherit;
  font-weight: 500;
}
#pet2-app .pet2-menu-btn:hover {
  background: #fff3d0;
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.15);
}
#pet2-app .pet2-menu-btn:active { transform: translateX(-2px) scale(0.97); }
#pet2-app .pet2-menu-btn.active {
  background: linear-gradient(135deg, #daa520, #ffd700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(218, 165, 32, 0.35);
}
#pet2-app .pet2-menu-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* 大小滑块 */
#pet2-app .pet2-size-slider-container {
  display: none;
  padding: 10px 6px 4px;
  margin-top: 2px;
  background: #fffde7;
  border-radius: 10px;
}
#pet2-app .pet2-size-slider-container.show { display: block; }
#pet2-app .pet2-size-slider {
  width: 100%;
  accent-color: #daa520;
  cursor: pointer;
}
#pet2-app .pet2-size-label {
  font-size: 12px;
  color: #8b6914;
  text-align: center;
  margin-top: 6px;
  font-weight: 500;
}

/* 聊天输入框 */
#pet2-app .pet2-chat-container {
  display: none;
  position: fixed;
  right: 90px;
  bottom: 28px;
  z-index: 10001;
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  padding-top: 28px;
  box-shadow: 0 10px 30px rgba(184, 134, 11, 0.2);
  width: 270px;
  border: 2px solid #e6c84a;
  user-select: none;
}
#pet2-app .pet2-chat-container.show { display: block; }
#pet2-app .pet2-chat-container.dragging {
  cursor: grabbing;
  box-shadow: 0 16px 40px rgba(184, 134, 11, 0.35);
  border-color: #daa520;
}
#pet2-app .pet2-chat-drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: linear-gradient(90deg, #e6c84a, #daa520);
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #8b6914;
  opacity: 0.7;
  transition: opacity 0.2s;
}
#pet2-app .pet2-chat-drag-handle:hover {
  opacity: 1;
}
#pet2-app .pet2-chat-container label {
  display: block;
  font-size: 13px;
  color: #8b6914;
  font-weight: 600;
  margin-bottom: 8px;
}
#pet2-app .pet2-chat-input {
  width: 100%;
  padding: 9px 12px;
  border: 2px solid #f0e0a0;
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  color: #8b6914;
  transition: border-color 0.2s;
}
#pet2-app .pet2-chat-input:focus { border-color: #daa520; }
#pet2-app .pet2-chat-hint {
  font-size: 11px;
  color: #aaa;
  margin-top: 6px;
}

/* 关闭按钮 */
#pet2-app .pet2-panel-close-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: #fffde7;
  border-radius: 50%;
  color: #8b6914;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}
#pet2-app .pet2-panel-close-btn:hover { background: #fff3d0; color: #b8860b; }

/* 歌曲列表 */
#pet2-app .pet2-song-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid #f0e0a0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fffde7;
}
#pet2-app .pet2-song-item:hover {
  border-color: #daa520;
  background: #fff8e1;
}
#pet2-app .pet2-song-item.active {
  border-color: #daa520;
  background: linear-gradient(135deg, #fff8e1, #fff3d0);
}
#pet2-app .pet2-song-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #daa520, #ffd700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#pet2-app .pet2-song-item-icon svg { width: 16px; height: 16px; fill: #fff; }
#pet2-app .pet2-song-item-info { flex: 1; min-width: 0; }
#pet2-app .pet2-song-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #8b6914;
  margin-bottom: 2px;
}
#pet2-app .pet2-song-item-style {
  font-size: 11px;
  color: #b8a040;
}
#pet2-app .pet2-song-item.playing .pet2-song-item-icon {
  animation: pet-anim-sing-sway 0.7s ease-in-out infinite;
}
#pet2-app .pet2-song-item-admin {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  flex-shrink: 0;
}
#pet2-app .pet2-song-item-admin-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(200,60,60,0.15);
  color: #c0392b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
#pet2-app .pet2-song-item-admin-btn:hover {
  background: rgba(200,60,60,0.3);
  transform: scale(1.1);
}
#pet2-app .pet2-song-item-replace-btn {
  background: rgba(52,152,219,0.15);
  color: #2980b9;
}
#pet2-app .pet2-song-item-replace-btn:hover {
  background: rgba(52,152,219,0.3);
}
#pet2-app .pet2-song-item-rename-btn {
  background: rgba(46,204,113,0.15);
  color: #27ae60;
}
#pet2-app .pet2-song-item-rename-btn:hover {
  background: rgba(46,204,113,0.3);
}

/* ===== 宝宝音乐播放器面板 ===== */
#pet2-app .pet2-music-panel {
  position: fixed;
  right: 90px;
  bottom: 28px;
  z-index: 10001;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(184, 134, 11, 0.25);
  width: 320px;
  border: 1px solid rgba(218, 165, 32, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
  transform-origin: bottom right;
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
#pet2-app .pet2-music-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#pet2-app .pet2-music-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #fff3d0;
}
#pet2-app .pet2-music-song-name {
  font-size: 15px;
  font-weight: 700;
  color: #b8860b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
#pet2-app .pet2-music-body {
  padding: 18px 18px 12px;
}
#pet2-app .pet2-music-cover {
  width: 100px;
  height: 100px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #daa520;
  position: relative;
  background: linear-gradient(135deg, #fff8e1, #fffde7);
  display: flex;
  align-items: center;
  justify-content: center;
}
#pet2-app .pet2-music-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#pet2-app .pet2-music-cover-default {
  font-size: 48px;
  color: #daa520;
}
#pet2-app .pet2-music-cover.spinning {
  animation: pet-cover-spin 10s linear infinite;
}
#pet2-app .pet2-music-cover.spinning.paused {
  animation-play-state: paused;
}
#pet2-app .pet2-music-time-row {
  text-align: center;
  font-size: 13px;
  color: #8b6914;
  margin-bottom: 12px;
  font-weight: 500;
}
#pet2-app .pet2-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}
#pet2-app .pet2-music-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fffde7;
  color: #b8860b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
#pet2-app .pet2-music-btn:hover {
  background: #fff3d0;
  transform: scale(1.1);
}
#pet2-app .pet2-music-btn:active {
  transform: scale(0.95);
}
#pet2-app .pet2-music-btn.play-btn {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #daa520, #ffd700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(218, 165, 32, 0.4);
}
#pet2-app .pet2-music-btn.play-btn:hover {
  background: linear-gradient(135deg, #c89614, #e6c200);
}
#pet2-app .pet2-music-progress-row {
  padding: 0 6px;
  margin-bottom: 12px;
}
#pet2-app .pet2-music-progress {
  width: 100%;
  height: 4px;
  accent-color: #daa520;
  cursor: pointer;
  border-radius: 2px;
}
#pet2-app .pet2-music-options {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}
#pet2-app .pet2-music-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8b6914;
  cursor: pointer;
  user-select: none;
}
#pet2-app .pet2-music-opt input[type="checkbox"] {
  accent-color: #daa520;
  cursor: pointer;
}
#pet2-app .pet2-music-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  margin-bottom: 12px;
  color: #8b6914;
}
#pet2-app .pet2-music-volume {
  flex: 1;
  accent-color: #daa520;
  cursor: pointer;
}
#pet2-app .pet2-music-list {
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid #fff3d0;
  padding: 8px 0;
}
#pet2-app .pet2-music-list .pet2-song-item {
  margin: 0 10px 6px;
}
#pet2-app .pet2-music-list .pet2-song-item:last-child {
  margin-bottom: 0;
}

/* === 朱雀新喂食动画 === */
@keyframes pet2-anim-eat-new {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.15, 0.85) rotate(-3deg); }
  40%  { transform: scale(0.9, 1.1) rotate(3deg); }
  60%  { transform: scale(1.12, 0.88) rotate(-2deg); }
  80%  { transform: scale(0.95, 1.05) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
/* 喂食时光芒背景 */
#pet2-app .pet2-container.pet2-anim-eat-new::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px; right: -20px; bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.25) 0%, transparent 70%);
  animation: pet2-eat-glow 0.8s ease-in-out;
  pointer-events: none;
  z-index: -1;
}
@keyframes pet2-eat-glow {
  0%   { opacity: 0; transform: scale(0.5); }
  50%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* === 鹿灵 ↔ 朱雀 共用宝宝菜单 === */
 .pet-hidden {
  display: none !important;
 }

 /* 朱雀/朝暮清欢激活：隐藏鹿灵本体与其专属浮层，保留共享悬浮球/菜单/等级面板 */
 #pet-app.role-dragon #pet-container,
 #pet-app.role-dragon .pet-info-tooltip,
 #pet-app.role-dragon .pet-chat-container,
 #pet-app.role-dragon .pet-music-panel,
 #pet-app.role-dragon .pet-status-hint,
 #pet-app.role-dragon .effect-layer,
 #pet-app.role-dragon .pet-speech-bubble,
 #pet-app.role-qinghuan #pet-container,
 #pet-app.role-qinghuan .pet-info-tooltip,
 #pet-app.role-qinghuan .pet-chat-container,
 #pet-app.role-qinghuan .pet-music-panel,
 #pet-app.role-qinghuan .pet-status-hint,
 #pet-app.role-qinghuan .effect-layer,
 #pet-app.role-qinghuan .pet-speech-bubble {
  display: none !important;
 }

 /* 朱雀本体始终隐藏自身悬浮球与菜单面板（统一走共享菜单） */
 #pet2-app .pet2-menu-ball,
 #pet2-app .pet2-menu-panel {
  display: none !important;
 }

 /* 共享悬浮球中的宝宝头像 */
 #pet-app .pet-menu-ball .pet-role-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
 }

 /* 朱雀本体悬浮漂移动画 (叠加于SVG本体状态动画上, 拖拽时暂停) */
 #pet2-container.dragon-float:not(.dragging) {
  animation: pet2-drift 4s ease-in-out infinite;
  will-change: transform;
 }
 @keyframes pet2-drift {
  0%    { transform: translate(-4px, -12px) rotate(-2deg); }
  25%   { transform: translate(2px, -2px) rotate(-0.6deg); }
  50%   { transform: translate(5px, 7px) rotate(1.6deg); }
  75%   { transform: translate(-1px, -3px) rotate(0.3deg); }
  100%  { transform: translate(-4px, -12px) rotate(-2deg); }
 }

#pet-app .pet-switch,
#pet2-app .pet-switch {
  border-top: 1px dashed rgba(120, 120, 130, 0.18);
  padding: 10px 2px 4px;
  margin: 2px 0 6px;
}
#pet-app .pet-switch-title,
#pet2-app .pet-switch-title {
  font-size: 11px;
  color: #9898a6;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 3px;
}
#pet-app .pet-switch-options,
#pet2-app .pet-switch-options {
  display: flex;
  gap: 8px;
}
#pet-app .pet-switch-btn,
#pet2-app .pet-switch-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(120, 120, 130, 0.10);
  padding: 8px 4px 6px;
  cursor: pointer;
  color: #5a5a66;
  font-size: 12px;
  line-height: 1.2;
  font-family: inherit;
  transition: all 0.2s;
}
#pet-app .pet-switch-btn img,
#pet2-app .pet-switch-btn img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
#pet-app .pet-switch-btn:hover,
#pet2-app .pet-switch-btn:hover {
  background: rgba(120, 120, 130, 0.16);
}
#pet-app .pet-switch-btn.active,
#pet2-app .pet-switch-btn.active {
  border-color: #ff9f43;
  background: rgba(255, 159, 67, 0.15);
  color: #c2571a;
}
.pet-switch-btn[data-locked="1"] img {
  filter: grayscale(0.55);
  opacity: 0.75;
}

/* ============================================================
   朱雀 状态驱动动画层
   本体已从内嵌 SVG 换为 39 帧 WebP 循环动图 (dragon-idle.webp),
   待机悬浮/摆尾/金币下落由动图自播放; 下方 pet2-st-* / pet2-anim-*
   类提供整体变换动画 (攻击前扑/走路弹跳/睡觉呼吸等), 对 img 同样生效。
   针对旧 SVG 内部图层 (.pet2-character/.pet2-tailWag/眼睛/嘴/火焰) 的
   规则已无匹配目标, 保留仅为兼容回退。
   ============================================================ */

/* 呼吸: 整只从脚底中心缓缓起伏 */
@keyframes pet2-breath {
  0%, 100% { transform: scaleX(1.012) scaleY(1); }
  50%      { transform: scaleX(1.035) scaleY(1.028); }
}
#pet2-app .pet2-img .pet2-character {
  transform-box: view-box;
  transform-origin: 75px 146px;
  animation: pet2-breath 3.8s ease-in-out infinite;
  will-change: transform;
}

/* 尾巴轻摆 (默认待机慢摆) */
@keyframes pet2-tail-wag {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(8deg); }
}
#pet2-app .pet2-img .pet2-tailWag {
  transform-box: view-box;
  transform-origin: 96px 130px;
  animation: pet2-tail-wag 3.4s ease-in-out infinite;
}
/* 走路/唱歌时尾巴摆得更欢快, 睡觉时几乎不动 */
#pet2-app .pet2-container.pet2-st-walk .pet2-tailWag,
#pet2-app .pet2-container.pet2-anim-sing .pet2-tailWag {
  animation-duration: 1.1s;
}
#pet2-app .pet2-container.pet2-anim-sleep .pet2-tailWag {
  animation-duration: 6.5s;
  animation-timing-function: ease-in-out;
}

/* ---- 眼睛: 睁开/闭眼 两套图层 ---- */
#pet2-app .pet2-img .pet2-eye-open { transition: opacity 0.06s linear; }
#pet2-app .pet2-img .pet2-eye-closed {
  opacity: 0;
  transition: opacity 0.08s linear;
}
/* JS 控制的快速眨眼 */
#pet2-app .pet2-img.pet2-blink .pet2-eye-open { opacity: 0; }
#pet2-app .pet2-img.pet2-blink .pet2-eye-closed { opacity: 1; }

/* 持续开心/休息状态的闭眼 (睡觉/唱歌/吃饭/被摸头) */
#pet2-app .pet2-container.pet2-anim-sleep #pet2-img .pet2-eye-open,
#pet2-app .pet2-container.pet2-anim-sing  #pet2-img .pet2-eye-open,
#pet2-app .pet2-container.pet2-anim-eat   #pet2-img .pet2-eye-open,
#pet2-app .pet2-container.pet2-anim-eat-new #pet2-img .pet2-eye-open,
#pet2-app .pet2-container.pet2-anim-pet   #pet2-img .pet2-eye-open {
  opacity: 0;
}
#pet2-app .pet2-container.pet2-anim-sleep #pet2-img .pet2-eye-closed,
#pet2-app .pet2-container.pet2-anim-sing  #pet2-img .pet2-eye-closed,
#pet2-app .pet2-container.pet2-anim-eat   #pet2-img .pet2-eye-closed,
#pet2-app .pet2-container.pet2-anim-eat-new #pet2-img .pet2-eye-closed,
#pet2-app .pet2-container.pet2-anim-pet   #pet2-img .pet2-eye-closed {
  opacity: 1;
}

/* ---- 嘴: 默认 ω 微笑, 张大嘴仅在互动状态显示 ---- */
#pet2-app .pet2-img .pet2-mouth-open { opacity: 0; }
#pet2-app .pet2-container.pet2-anim-sing #pet2-img .pet2-mouth,
#pet2-app .pet2-container.pet2-anim-eat  #pet2-img .pet2-mouth,
#pet2-app .pet2-container.pet2-anim-eat-new #pet2-img .pet2-mouth,
#pet2-app .pet2-container.pet2-st-attack #pet2-img .pet2-mouth {
  opacity: 0;
}
#pet2-app .pet2-container.pet2-anim-sing #pet2-img .pet2-mouth-open,
#pet2-app .pet2-container.pet2-anim-eat  #pet2-img .pet2-mouth-open,
#pet2-app .pet2-container.pet2-anim-eat-new #pet2-img .pet2-mouth-open,
#pet2-app .pet2-container.pet2-st-attack #pet2-img .pet2-mouth-open {
  opacity: 1;
}

/* 张大嘴的开合咀嚼 (吃东西/唱歌) */
@keyframes pet2-jaw {
  0%, 100% { transform: scaleY(0.82); }
  50%      { transform: scaleY(1.14); }
}
#pet2-app .pet2-container.pet2-anim-eat #pet2-img .pet2-mouth-open,
#pet2-app .pet2-container.pet2-anim-eat-new #pet2-img .pet2-mouth-open {
  transform-box: view-box;
  transform-origin: 75px 78px;
  animation: pet2-jaw 0.28s ease-in-out infinite;
}
#pet2-app .pet2-container.pet2-anim-sing #pet2-img .pet2-mouth-open {
  transform-box: view-box;
  transform-origin: 75px 78px;
  animation: pet2-jaw 0.55s ease-in-out infinite;
}
/* 攻击的吼叫: 张更大, 更快 */
@keyframes pet2-roar {
  0%, 100% { transform: scaleY(0.85) scaleX(1); }
  40%      { transform: scaleY(1.28) scaleX(1.06); }
}
#pet2-app .pet2-container.pet2-st-attack #pet2-img .pet2-mouth-open {
  transform-box: view-box;
  transform-origin: 75px 78px;
  animation: pet2-roar 0.3s ease-in-out 2;
}

/* ---- 攻击: 前扑冲击 + 两侧火焰 ---- */
@keyframes pet2-attack-lunge {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  22%  { transform: translate(-9px, 5px) rotate(-9deg) scale(1.03); }
  45%  { transform: translate(4px, -7px) rotate(5deg) scale(1.06); }
  68%  { transform: translate(-3px, 1px) rotate(-3deg) scale(1.03); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
#pet2-app .pet2-container.pet2-st-attack #pet2-img {
  animation: pet2-attack-lunge 0.6s ease-out 1;
}
#pet2-app .pet2-img .pet2-flame { opacity: 0; }
@keyframes pet2-attack-flame {
  0%   { opacity: 0; transform: translateY(2px) scale(0.35); }
  18%  { opacity: 1; transform: translateY(-1px) scale(1.12); }
  100% { opacity: 0; transform: translateY(-16px) scale(0.55); }
}
#pet2-app .pet2-container.pet2-st-attack #pet2-img .pet2-flame {
  opacity: 1;
  transform-box: view-box;
  transform-origin: 40px 30px;
  animation: pet2-attack-flame 0.7s ease-out 1;
}
#pet2-app .pet2-container.pet2-st-attack #pet2-img .pet2-flame-r {
  transform-origin: 112px 30px;
  animation-delay: 0.05s;
}

/* ---- 移动(散步/拖动): 御风飞行 ----
   dragon-idle.webp 本体是趴在彩虹云上的姿态, 移动时以"驾云飞驰"表现:
   用独立 transform 属性 (translate/rotate) 做漂浮起伏, 避免与 JS 写的
   style.transform=scaleX(-1) 朝向翻转冲突。身后云絮尾迹由 pet2-app.js
   的 emitTrail()/createWindPuff() 在 effect-layer 生成。 */
@keyframes pet2-fly-glide {
  0%   { translate: 0 -4.5%;  rotate: 0deg; }
  25%  { translate: 0 -10%;   rotate: -4.5deg; }
  50%  { translate: 0 -2%;    rotate: 0deg; }
  75%  { translate: 0 -7.5%;  rotate: 4.5deg; }
  100% { translate: 0 -4.5%;  rotate: 0deg; }
}
#pet2-app .pet2-container.pet2-st-walk #pet2-img {
  animation: pet2-fly-glide 0.68s ease-in-out infinite;
  will-change: transform;
}
/* 飞行时的呼吸/漂浮幅度更大一点, 更有御风感 */
#pet2-app .pet2-container.pet2-st-walk .pet2-img {
  filter: drop-shadow(0 6px 10px rgba(80, 60, 120, 0.18));
}

/* ---- 睡觉: 呼噜慢呼吸 (覆盖 pet2-anim-sleep 原有的亮度变暗) ---- */
@keyframes pet2-sleep-breathe {
  0%, 100% { transform: scale(1); filter: brightness(0.85); }
  50%      { transform: scale(1.05); filter: brightness(0.9); }
}
#pet2-app .pet2-container.pet2-anim-sleep #pet2-img {
  animation: pet2-sleep-breathe 3.4s ease-in-out infinite;
}


/* ============================================================
   桌面宝宝 - 朱雀 (独立命名空间 #pet3-app)
   金色主题, 与 #pet-app 完全隔离
   ============================================================ */

#pet3-app .pet3-speech-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #ffffff;
  border: 2px solid #daa520;
  border-radius: 18px;
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #8b6914;
  white-space: nowrap;
  margin-bottom: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 18px rgba(218, 165, 32, 0.18);
  max-width: 320px;
  text-align: center;
  z-index: 10;
}
#pet3-app .pet3-speech-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#pet3-app .pet3-speech-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  border: 7px solid transparent;
  border-top-color: #ffffff;
  z-index: 1;
}

/* 宝宝动画 (复用关键帧, 选择器绑定 pet3-) */
#pet3-app .pet3-container.pet3-anim-jump    .pet3-img { animation: pet-anim-jump 0.6s ease-out; }
#pet3-app .pet3-container.pet3-anim-squash  .pet3-img { animation: pet-anim-squash 0.5s ease-in-out; }
#pet3-app .pet3-container.pet3-anim-shake    .pet3-img { animation: pet-anim-shake 0.5s ease-in-out; }
#pet3-app .pet3-container.pet3-anim-pet     .pet3-img { animation: pet-anim-pet-head 0.4s ease-in-out infinite; }
#pet3-app .pet3-container.pet3-anim-sleep    .pet3-img { animation: pet-anim-sleep-breathe 3s ease-in-out infinite; }
#pet3-app .pet3-container.pet3-anim-sing     .pet3-img { animation: pet-anim-sing-sway 0.7s ease-in-out infinite; }
#pet3-app .pet3-container.pet3-anim-eat      .pet3-img { animation: pet-anim-eat 0.35s ease-in-out 3; }
#pet3-app .pet3-container.pet3-anim-eat-new .pet3-img { animation: pet3-anim-eat-new 0.5s ease-in-out 2; }
#pet3-app .pet3-container.pet3-anim-eat-new {
  filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.5));
}
#pet3-app .pet3-container.pet3-anim-wave     .pet3-img { animation: pet-anim-wave 0.6s ease-in-out 4; }
#pet3-app .pet3-container.pet3-anim-cheer    .pet3-img { animation: pet-anim-cheer 1.2s ease-out; }

/* 特效层 */
#pet3-app .effect-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

/* Zzz */
#pet3-app .pet3-zzz {
  position: absolute;
  font-size: 26px;
  color: #daa520;
  font-weight: 700;
  animation: pet-zzz-float 2.2s ease-out infinite;
}

/* 飞行云絮尾迹 (移动时由 JS emitTrail 生成) */
@keyframes pet3-wind-puff {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  18%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--puff-x, -40px)), calc(-50% + var(--puff-y, -18px))) scale(1.5); }
}
#pet3-app .pet3-wind-puff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffffff 0%, rgba(255, 255, 255, 0.92) 34%, rgba(210, 226, 255, 0.55) 62%, rgba(210, 226, 255, 0) 78%);
  box-shadow: 0 0 8px rgba(190, 210, 255, 0.65);
  pointer-events: none;
  animation: pet3-wind-puff 0.7s ease-out forwards;
  will-change: transform, opacity;
}

/* 爱心 */
#pet3-app .pet3-heart {
  position: absolute;
  width: 28px;
  height: 28px;
  animation: pet-heart-float 1.6s ease-out forwards;
}
#pet3-app .pet3-heart svg { width: 100%; height: 100%; display: block; }

/* 金币粒子 */
@keyframes pet3-coin-float {
  0% { opacity: 0; transform: translateY(0) scale(0.5) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.4) rotate(360deg); }
}
#pet3-app .pet3-coin {
  position: absolute;
  width: 28px;
  height: 28px;
  animation: pet3-coin-float 1.6s ease-out forwards;
}
#pet3-app .pet3-coin svg { width: 100%; height: 100%; display: block; }

/* 食物 */
#pet3-app .pet3-food {
  position: absolute;
  width: 34px;
  height: 34px;
  animation: pet-food-fall 1.1s ease-in forwards;
}
#pet3-app .pet3-food svg { width: 100%; height: 100%; display: block; }

/* 音符 */
#pet3-app .pet3-note {
  position: absolute;
  width: 26px;
  height: 30px;
  animation: pet-note-float 2s ease-out infinite;
}
#pet3-app .pet3-note svg { width: 100%; height: 100%; display: block; }

/* 星星粒子 */
#pet3-app .pet3-star {
  position: absolute;
  width: 26px;
  height: 26px;
  animation: pet-star-float 1.8s ease-out forwards;
}
#pet3-app .pet3-star svg { width: 100%; height: 100%; display: block; }

/* 状态提示 */
#pet3-app .pet3-status-hint {
  position: fixed;
  right: 50%;
  bottom: 24px;
  transform: translateX(50%);
  background: rgba(184, 134, 11, 0.88);
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 10002;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
#pet3-app .pet3-status-hint.show { opacity: 1; }

/* 等级系统 */
#pet3-app .level-panel {
  background: linear-gradient(135deg, #fffde7, #fff8e1);
  border: 2px solid #ffd54f;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(255, 193, 7, 0.2);
}
#pet3-app .level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
#pet3-app .level-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #daa520, #ffd700);
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(218, 165, 32, 0.35);
}
#pet3-app .level-badge svg { width: 14px; height: 14px; fill: #fff; }
#pet3-app .exp-text {
  font-size: 11px;
  color: #8b6914;
  font-weight: 600;
}
#pet3-app .exp-bar {
  width: 100%;
  height: 8px;
  background: #ffe0b2;
  border-radius: 4px;
  overflow: hidden;
}
#pet3-app .exp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #daa520);
  border-radius: 4px;
  transition: width 0.5s ease;
  width: 0%;
}
#pet3-app .cooldown-hint {
  font-size: 10px;
  color: #a1887f;
  margin-top: 5px;
  text-align: center;
}

/* 升级特效 */
#pet3-app .level-panel.leveling-up {
  animation: pet-levelup-glow 1s ease-out 3;
}
#pet3-app .level-badge.leveling-up {
  animation: pet-levelup-bounce 0.5s ease-in-out 3;
}

/* 经验飘字 */
#pet3-app .pet3-exp-popup {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  color: #daa520;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
  animation: pet-exp-float 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}

/* ===== 悬浮球 + 弹出菜单 (右侧) ===== */
#pet3-app .pet3-menu-ball {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 10001;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(218, 165, 32, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  font-family: inherit;
}
#pet3-app .pet3-menu-ball:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.6);
}
#pet3-app .pet3-menu-ball.active {
  background: transparent;
  box-shadow: 0 8px 24px rgba(255, 152, 0, 0.5);
}
@keyframes pet3-ball-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(218, 165, 32, 0.45); }
  50% { box-shadow: 0 8px 32px rgba(255, 215, 0, 0.75); }
}
#pet3-app .pet3-menu-ball:not(.active) {
  animation: pet3-ball-pulse 1.6s ease-in-out infinite;
}

/* 弹出菜单面板 */
#pet3-app .pet3-menu-panel {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 10000;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 22px 16px 18px;
  box-shadow: 0 10px 36px rgba(184, 134, 11, 0.18);
  width: 168px;
  border: 1px solid rgba(218, 165, 32, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
  transform-origin: bottom right;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#pet3-app .pet3-menu-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* 宝宝信息提示 */
#pet3-app .pet3-info-tooltip {
  position: fixed;
  right: 120px;
  top: 80px;
  z-index: 9998;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(218, 165, 32, 0.3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  text-align: center;
  min-width: 140px;
}
#pet3-app .pet3-info-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}
#pet3-app .pet3-info-name {
  font-size: 14px;
  font-weight: 700;
  color: #b8860b;
  margin-bottom: 2px;
}
#pet3-app .pet3-info-desc {
  font-size: 11px;
  color: #8b6914;
  line-height: 1.3;
}

#pet3-app .pet3-menu-title {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #b8860b;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px dashed #e6c84a;
  letter-spacing: 1px;
}
#pet3-app .pet3-menu-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 7px;
  border: none;
  border-radius: 12px;
  background: #fffde7;
  color: #8b6914;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.22s ease;
  font-family: inherit;
  font-weight: 500;
}
#pet3-app .pet3-menu-btn:hover {
  background: #fff3d0;
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.15);
}
#pet3-app .pet3-menu-btn:active { transform: translateX(-2px) scale(0.97); }
#pet3-app .pet3-menu-btn.active {
  background: linear-gradient(135deg, #daa520, #ffd700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(218, 165, 32, 0.35);
}
#pet3-app .pet3-menu-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* 大小滑块 */
#pet3-app .pet3-size-slider-container {
  display: none;
  padding: 10px 6px 4px;
  margin-top: 2px;
  background: #fffde7;
  border-radius: 10px;
}
#pet3-app .pet3-size-slider-container.show { display: block; }
#pet3-app .pet3-size-slider {
  width: 100%;
  accent-color: #daa520;
  cursor: pointer;
}
#pet3-app .pet3-size-label {
  font-size: 12px;
  color: #8b6914;
  text-align: center;
  margin-top: 6px;
  font-weight: 500;
}

/* 聊天输入框 */
#pet3-app .pet3-chat-container {
  display: none;
  position: fixed;
  right: 90px;
  bottom: 28px;
  z-index: 10001;
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  padding-top: 28px;
  box-shadow: 0 10px 30px rgba(184, 134, 11, 0.2);
  width: 270px;
  border: 2px solid #e6c84a;
  user-select: none;
}
#pet3-app .pet3-chat-container.show { display: block; }
#pet3-app .pet3-chat-container.dragging {
  cursor: grabbing;
  box-shadow: 0 16px 40px rgba(184, 134, 11, 0.35);
  border-color: #daa520;
}
#pet3-app .pet3-chat-drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: linear-gradient(90deg, #e6c84a, #daa520);
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #8b6914;
  opacity: 0.7;
  transition: opacity 0.2s;
}
#pet3-app .pet3-chat-drag-handle:hover {
  opacity: 1;
}
#pet3-app .pet3-chat-container label {
  display: block;
  font-size: 13px;
  color: #8b6914;
  font-weight: 600;
  margin-bottom: 8px;
}
#pet3-app .pet3-chat-input {
  width: 100%;
  padding: 9px 12px;
  border: 2px solid #f0e0a0;
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  color: #8b6914;
  transition: border-color 0.2s;
}
#pet3-app .pet3-chat-input:focus { border-color: #daa520; }
#pet3-app .pet3-chat-hint {
  font-size: 11px;
  color: #aaa;
  margin-top: 6px;
}

/* 关闭按钮 */
#pet3-app .pet3-panel-close-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: #fffde7;
  border-radius: 50%;
  color: #8b6914;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}
#pet3-app .pet3-panel-close-btn:hover { background: #fff3d0; color: #b8860b; }

/* 歌曲列表 */
#pet3-app .pet3-song-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid #f0e0a0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fffde7;
}
#pet3-app .pet3-song-item:hover {
  border-color: #daa520;
  background: #fff8e1;
}
#pet3-app .pet3-song-item.active {
  border-color: #daa520;
  background: linear-gradient(135deg, #fff8e1, #fff3d0);
}
#pet3-app .pet3-song-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #daa520, #ffd700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#pet3-app .pet3-song-item-icon svg { width: 16px; height: 16px; fill: #fff; }
#pet3-app .pet3-song-item-info { flex: 1; min-width: 0; }
#pet3-app .pet3-song-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #8b6914;
  margin-bottom: 2px;
}
#pet3-app .pet3-song-item-style {
  font-size: 11px;
  color: #b8a040;
}
#pet3-app .pet3-song-item.playing .pet3-song-item-icon {
  animation: pet-anim-sing-sway 0.7s ease-in-out infinite;
}
#pet3-app .pet3-song-item-admin {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  flex-shrink: 0;
}
#pet3-app .pet3-song-item-admin-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(200,60,60,0.15);
  color: #c0392b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
#pet3-app .pet3-song-item-admin-btn:hover {
  background: rgba(200,60,60,0.3);
  transform: scale(1.1);
}
#pet3-app .pet3-song-item-replace-btn {
  background: rgba(52,152,219,0.15);
  color: #2980b9;
}
#pet3-app .pet3-song-item-replace-btn:hover {
  background: rgba(52,152,219,0.3);
}
#pet3-app .pet3-song-item-rename-btn {
  background: rgba(46,204,113,0.15);
  color: #27ae60;
}
#pet3-app .pet3-song-item-rename-btn:hover {
  background: rgba(46,204,113,0.3);
}

/* ===== 宝宝音乐播放器面板 ===== */
#pet3-app .pet3-music-panel {
  position: fixed;
  right: 90px;
  bottom: 28px;
  z-index: 10001;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(184, 134, 11, 0.25);
  width: 320px;
  border: 1px solid rgba(218, 165, 32, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
  transform-origin: bottom right;
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
#pet3-app .pet3-music-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#pet3-app .pet3-music-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #fff3d0;
}
#pet3-app .pet3-music-song-name {
  font-size: 15px;
  font-weight: 700;
  color: #b8860b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
#pet3-app .pet3-music-body {
  padding: 18px 18px 12px;
}
#pet3-app .pet3-music-cover {
  width: 100px;
  height: 100px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #daa520;
  position: relative;
  background: linear-gradient(135deg, #fff8e1, #fffde7);
  display: flex;
  align-items: center;
  justify-content: center;
}
#pet3-app .pet3-music-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#pet3-app .pet3-music-cover-default {
  font-size: 48px;
  color: #daa520;
}
#pet3-app .pet3-music-cover.spinning {
  animation: pet-cover-spin 10s linear infinite;
}
#pet3-app .pet3-music-cover.spinning.paused {
  animation-play-state: paused;
}
#pet3-app .pet3-music-time-row {
  text-align: center;
  font-size: 13px;
  color: #8b6914;
  margin-bottom: 12px;
  font-weight: 500;
}
#pet3-app .pet3-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}
#pet3-app .pet3-music-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fffde7;
  color: #b8860b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
#pet3-app .pet3-music-btn:hover {
  background: #fff3d0;
  transform: scale(1.1);
}
#pet3-app .pet3-music-btn:active {
  transform: scale(0.95);
}
#pet3-app .pet3-music-btn.play-btn {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #daa520, #ffd700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(218, 165, 32, 0.4);
}
#pet3-app .pet3-music-btn.play-btn:hover {
  background: linear-gradient(135deg, #c89614, #e6c200);
}
#pet3-app .pet3-music-progress-row {
  padding: 0 6px;
  margin-bottom: 12px;
}
#pet3-app .pet3-music-progress {
  width: 100%;
  height: 4px;
  accent-color: #daa520;
  cursor: pointer;
  border-radius: 2px;
}
#pet3-app .pet3-music-options {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}
#pet3-app .pet3-music-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8b6914;
  cursor: pointer;
  user-select: none;
}
#pet3-app .pet3-music-opt input[type="checkbox"] {
  accent-color: #daa520;
  cursor: pointer;
}
#pet3-app .pet3-music-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  margin-bottom: 12px;
  color: #8b6914;
}
#pet3-app .pet3-music-volume {
  flex: 1;
  accent-color: #daa520;
  cursor: pointer;
}
#pet3-app .pet3-music-list {
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid #fff3d0;
  padding: 8px 0;
}
#pet3-app .pet3-music-list .pet3-song-item {
  margin: 0 10px 6px;
}
#pet3-app .pet3-music-list .pet3-song-item:last-child {
  margin-bottom: 0;
}

/* === 朱雀新喂食动画 === */
@keyframes pet3-anim-eat-new {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.15, 0.85) rotate(-3deg); }
  40%  { transform: scale(0.9, 1.1) rotate(3deg); }
  60%  { transform: scale(1.12, 0.88) rotate(-2deg); }
  80%  { transform: scale(0.95, 1.05) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
/* 喂食时光芒背景 */
#pet3-app .pet3-container.pet3-anim-eat-new::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px; right: -20px; bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.25) 0%, transparent 70%);
  animation: pet3-eat-glow 0.8s ease-in-out;
  pointer-events: none;
  z-index: -1;
}
@keyframes pet3-eat-glow {
  0%   { opacity: 0; transform: scale(0.5); }
  50%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* === 鹿灵 ↔ 朱雀 共用宝宝菜单 === */
 .pet-hidden {
  display: none !important;
 }

 /* 朱雀/朝暮清欢激活：隐藏鹿灵本体与其专属浮层，保留共享悬浮球/菜单/等级面板 */
 #pet-app.role-dragon #pet-container,
 #pet-app.role-dragon .pet-info-tooltip,
 #pet-app.role-dragon .pet-chat-container,
 #pet-app.role-dragon .pet-music-panel,
 #pet-app.role-dragon .pet-status-hint,
 #pet-app.role-dragon .effect-layer,
 #pet-app.role-dragon .pet-speech-bubble,
 #pet-app.role-qinghuan #pet-container,
 #pet-app.role-qinghuan .pet-info-tooltip,
 #pet-app.role-qinghuan .pet-chat-container,
 #pet-app.role-qinghuan .pet-music-panel,
 #pet-app.role-qinghuan .pet-status-hint,
 #pet-app.role-qinghuan .effect-layer,
 #pet-app.role-qinghuan .pet-speech-bubble {
  display: none !important;
 }

 /* 朱雀本体始终隐藏自身悬浮球与菜单面板（统一走共享菜单） */
 #pet3-app .pet3-menu-ball,
 #pet3-app .pet3-menu-panel {
  display: none !important;
 }

 /* 共享悬浮球中的宝宝头像 */
 #pet-app .pet-menu-ball .pet-role-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
 }

 /* 朱雀本体悬浮漂移动画 (叠加于SVG本体状态动画上, 拖拽时暂停) */
 #pet3-container.qinghuan-float:not(.dragging) {
  animation: pet3-drift 4s ease-in-out infinite;
  will-change: transform;
 }
 @keyframes pet3-drift {
  0%    { transform: translate(-4px, -12px) rotate(-2deg); }
  25%   { transform: translate(2px, -2px) rotate(-0.6deg); }
  50%   { transform: translate(5px, 7px) rotate(1.6deg); }
  75%   { transform: translate(-1px, -3px) rotate(0.3deg); }
  100%  { transform: translate(-4px, -12px) rotate(-2deg); }
 }

#pet-app .pet-switch,
#pet3-app .pet-switch {
  border-top: 1px dashed rgba(120, 120, 130, 0.18);
  padding: 10px 2px 4px;
  margin: 2px 0 6px;
}
#pet-app .pet-switch-title,
#pet3-app .pet-switch-title {
  font-size: 11px;
  color: #9898a6;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 3px;
}
#pet-app .pet-switch-options,
#pet3-app .pet-switch-options {
  display: flex;
  gap: 8px;
}
#pet-app .pet-switch-btn,
#pet3-app .pet-switch-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(120, 120, 130, 0.10);
  padding: 8px 4px 6px;
  cursor: pointer;
  color: #5a5a66;
  font-size: 12px;
  line-height: 1.2;
  font-family: inherit;
  transition: all 0.2s;
}
#pet-app .pet-switch-btn img,
#pet3-app .pet-switch-btn img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
#pet-app .pet-switch-btn:hover,
#pet3-app .pet-switch-btn:hover {
  background: rgba(120, 120, 130, 0.16);
}
#pet-app .pet-switch-btn.active,
#pet3-app .pet-switch-btn.active {
  border-color: #ff9f43;
  background: rgba(255, 159, 67, 0.15);
  color: #c2571a;
}

/* ============================================================
   朱雀 状态驱动动画层
   本体已从内嵌 SVG 换为 39 帧 WebP 循环动图 (dragon-idle.webp),
   待机悬浮/摆尾/金币下落由动图自播放; 下方 pet3-st-* / pet3-anim-*
   类提供整体变换动画 (攻击前扑/走路弹跳/睡觉呼吸等), 对 img 同样生效。
   针对旧 SVG 内部图层 (.pet3-character/.pet3-tailWag/眼睛/嘴/火焰) 的
   规则已无匹配目标, 保留仅为兼容回退。
   ============================================================ */

/* 呼吸: 整只从脚底中心缓缓起伏 */
@keyframes pet3-breath {
  0%, 100% { transform: scaleX(1.012) scaleY(1); }
  50%      { transform: scaleX(1.035) scaleY(1.028); }
}
#pet3-app .pet3-img .pet3-character {
  transform-box: view-box;
  transform-origin: 75px 146px;
  animation: pet3-breath 3.8s ease-in-out infinite;
  will-change: transform;
}

/* 尾巴轻摆 (默认待机慢摆) */
@keyframes pet3-tail-wag {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(8deg); }
}
#pet3-app .pet3-img .pet3-tailWag {
  transform-box: view-box;
  transform-origin: 96px 130px;
  animation: pet3-tail-wag 3.4s ease-in-out infinite;
}
/* 走路/唱歌时尾巴摆得更欢快, 睡觉时几乎不动 */
#pet3-app .pet3-container.pet3-st-walk .pet3-tailWag,
#pet3-app .pet3-container.pet3-anim-sing .pet3-tailWag {
  animation-duration: 1.1s;
}
#pet3-app .pet3-container.pet3-anim-sleep .pet3-tailWag {
  animation-duration: 6.5s;
  animation-timing-function: ease-in-out;
}

/* ---- 眼睛: 睁开/闭眼 两套图层 ---- */
#pet3-app .pet3-img .pet3-eye-open { transition: opacity 0.06s linear; }
#pet3-app .pet3-img .pet3-eye-closed {
  opacity: 0;
  transition: opacity 0.08s linear;
}
/* JS 控制的快速眨眼 */
#pet3-app .pet3-img.pet3-blink .pet3-eye-open { opacity: 0; }
#pet3-app .pet3-img.pet3-blink .pet3-eye-closed { opacity: 1; }

/* 持续开心/休息状态的闭眼 (睡觉/唱歌/吃饭/被摸头) */
#pet3-app .pet3-container.pet3-anim-sleep #pet3-img .pet3-eye-open,
#pet3-app .pet3-container.pet3-anim-sing  #pet3-img .pet3-eye-open,
#pet3-app .pet3-container.pet3-anim-eat   #pet3-img .pet3-eye-open,
#pet3-app .pet3-container.pet3-anim-eat-new #pet3-img .pet3-eye-open,
#pet3-app .pet3-container.pet3-anim-pet   #pet3-img .pet3-eye-open {
  opacity: 0;
}
#pet3-app .pet3-container.pet3-anim-sleep #pet3-img .pet3-eye-closed,
#pet3-app .pet3-container.pet3-anim-sing  #pet3-img .pet3-eye-closed,
#pet3-app .pet3-container.pet3-anim-eat   #pet3-img .pet3-eye-closed,
#pet3-app .pet3-container.pet3-anim-eat-new #pet3-img .pet3-eye-closed,
#pet3-app .pet3-container.pet3-anim-pet   #pet3-img .pet3-eye-closed {
  opacity: 1;
}

/* ---- 嘴: 默认 ω 微笑, 张大嘴仅在互动状态显示 ---- */
#pet3-app .pet3-img .pet3-mouth-open { opacity: 0; }
#pet3-app .pet3-container.pet3-anim-sing #pet3-img .pet3-mouth,
#pet3-app .pet3-container.pet3-anim-eat  #pet3-img .pet3-mouth,
#pet3-app .pet3-container.pet3-anim-eat-new #pet3-img .pet3-mouth,
#pet3-app .pet3-container.pet3-st-attack #pet3-img .pet3-mouth {
  opacity: 0;
}
#pet3-app .pet3-container.pet3-anim-sing #pet3-img .pet3-mouth-open,
#pet3-app .pet3-container.pet3-anim-eat  #pet3-img .pet3-mouth-open,
#pet3-app .pet3-container.pet3-anim-eat-new #pet3-img .pet3-mouth-open,
#pet3-app .pet3-container.pet3-st-attack #pet3-img .pet3-mouth-open {
  opacity: 1;
}

/* 张大嘴的开合咀嚼 (吃东西/唱歌) */
@keyframes pet3-jaw {
  0%, 100% { transform: scaleY(0.82); }
  50%      { transform: scaleY(1.14); }
}
#pet3-app .pet3-container.pet3-anim-eat #pet3-img .pet3-mouth-open,
#pet3-app .pet3-container.pet3-anim-eat-new #pet3-img .pet3-mouth-open {
  transform-box: view-box;
  transform-origin: 75px 78px;
  animation: pet3-jaw 0.28s ease-in-out infinite;
}
#pet3-app .pet3-container.pet3-anim-sing #pet3-img .pet3-mouth-open {
  transform-box: view-box;
  transform-origin: 75px 78px;
  animation: pet3-jaw 0.55s ease-in-out infinite;
}
/* 攻击的吼叫: 张更大, 更快 */
@keyframes pet3-roar {
  0%, 100% { transform: scaleY(0.85) scaleX(1); }
  40%      { transform: scaleY(1.28) scaleX(1.06); }
}
#pet3-app .pet3-container.pet3-st-attack #pet3-img .pet3-mouth-open {
  transform-box: view-box;
  transform-origin: 75px 78px;
  animation: pet3-roar 0.3s ease-in-out 2;
}

/* ---- 攻击: 前扑冲击 + 两侧火焰 ---- */
@keyframes pet3-attack-lunge {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  22%  { transform: translate(-9px, 5px) rotate(-9deg) scale(1.03); }
  45%  { transform: translate(4px, -7px) rotate(5deg) scale(1.06); }
  68%  { transform: translate(-3px, 1px) rotate(-3deg) scale(1.03); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
#pet3-app .pet3-container.pet3-st-attack #pet3-img {
  animation: pet3-attack-lunge 0.6s ease-out 1;
}
#pet3-app .pet3-img .pet3-flame { opacity: 0; }
@keyframes pet3-attack-flame {
  0%   { opacity: 0; transform: translateY(2px) scale(0.35); }
  18%  { opacity: 1; transform: translateY(-1px) scale(1.12); }
  100% { opacity: 0; transform: translateY(-16px) scale(0.55); }
}
#pet3-app .pet3-container.pet3-st-attack #pet3-img .pet3-flame {
  opacity: 1;
  transform-box: view-box;
  transform-origin: 40px 30px;
  animation: pet3-attack-flame 0.7s ease-out 1;
}
#pet3-app .pet3-container.pet3-st-attack #pet3-img .pet3-flame-r {
  transform-origin: 112px 30px;
  animation-delay: 0.05s;
}

/* ---- 移动(散步/拖动): 御风飞行 ----
   dragon-idle.webp 本体是趴在彩虹云上的姿态, 移动时以"驾云飞驰"表现:
   用独立 transform 属性 (translate/rotate) 做漂浮起伏, 避免与 JS 写的
   style.transform=scaleX(-1) 朝向翻转冲突。身后云絮尾迹由 pet3-app.js
   的 emitTrail()/createWindPuff() 在 effect-layer 生成。 */
@keyframes pet3-fly-glide {
  0%   { translate: 0 -4.5%;  rotate: 0deg; }
  25%  { translate: 0 -10%;   rotate: -4.5deg; }
  50%  { translate: 0 -2%;    rotate: 0deg; }
  75%  { translate: 0 -7.5%;  rotate: 4.5deg; }
  100% { translate: 0 -4.5%;  rotate: 0deg; }
}
#pet3-app .pet3-container.pet3-st-walk #pet3-img {
  animation: pet3-fly-glide 0.68s ease-in-out infinite;
  will-change: transform;
}
/* 飞行时的呼吸/漂浮幅度更大一点, 更有御风感 */
#pet3-app .pet3-container.pet3-st-walk .pet3-img {
  filter: drop-shadow(0 6px 10px rgba(80, 60, 120, 0.18));
}

/* ---- 睡觉: 呼噜慢呼吸 (覆盖 pet3-anim-sleep 原有的亮度变暗) ---- */
@keyframes pet3-sleep-breathe {
  0%, 100% { transform: scale(1); filter: brightness(0.85); }
  50%      { transform: scale(1.05); filter: brightness(0.9); }
}
#pet3-app .pet3-container.pet3-anim-sleep #pet3-img {
  animation: pet3-sleep-breathe 3.4s ease-in-out infinite;
}

/* ===== 宝宝账号化：游客隐藏 / 未激活锁定 / 激活面板 ===== */
body[data-pet="hidden"] #pet-app,
body[data-pet="hidden"] #pet2-app,
body[data-pet="hidden"] #pet3-app {
  display: none !important;
}

/* 已登录未激活：宝宝本体可见但锁定，不可拖拽/点击 */
body[data-pet="inactive"] #pet-container,
body[data-pet="inactive"] #pet2-container,
body[data-pet="inactive"] #pet3-container {
  filter: grayscale(0.75);
  opacity: 0.5;
  pointer-events: none !important;
}
body[data-pet="inactive"] #pet-app .pet-switch,
body[data-pet="inactive"] #pet-app .level-panel,
body[data-pet="inactive"] #pet-app .satiety-panel,
body[data-pet="inactive"] #pet-app .pet-menu-btn,
body[data-pet="inactive"] #pet-app .pet-size-slider-container {
  display: none !important;
}

/* 激活面板默认隐藏，仅未激活时显示 */
#pet-app .pet-activate-panel { display: none; }
body[data-pet="inactive"] #pet-app .pet-activate-panel { display: block; }

#pet-app .pet-activate-panel {
  margin: 6px 0 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 248, 225, 0.65);
  border: 1px solid rgba(218, 165, 32, 0.45);
}
#pet-app .pet-activate-title {
  font-size: 14px;
  font-weight: 700;
  color: #8a6d0b;
  margin-bottom: 4px;
}
#pet-app .pet-activate-desc {
  font-size: 11px;
  line-height: 1.5;
  color: #9a7b1a;
  margin-bottom: 10px;
}
#pet-app .pet-activate-options {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
#pet-app .pet-activate-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 2px solid rgba(218, 165, 32, 0.35);
  background: #fffde7;
  cursor: pointer;
  transition: all 0.2s ease;
}
#pet-app .pet-activate-option img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
#pet-app .pet-activate-option span {
  font-size: 12px;
  color: #8a6d0b;
}
#pet-app .pet-activate-option.active {
  border-color: #daa520;
  background: linear-gradient(145deg, #fff8e1, #fdf0c0);
  box-shadow: 0 2px 8px rgba(218, 165, 32, 0.35);
}
#pet-app .pet-activate-lock,
.pet-switch-lock {
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 159, 67, 0.18);
  color: #c2571a;
  white-space: nowrap;
}
#pet-app .pet-activate-btn {
  width: 100%;
  padding: 9px 0;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(145deg, #e0b84a, #b8860b);
  transition: filter 0.2s ease;
}
#pet-app .pet-activate-btn:hover { filter: brightness(1.06); }
#pet-app .pet-activate-btn:disabled {
  filter: grayscale(0.5);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== 排行榜：签到 / 宝宝 切换标签 ===== */
.rank-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
  background: #fff;
}
.rank-tab {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 7px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7396;
  background: #eef1ff;
  cursor: pointer;
  transition: all 0.18s ease;
}
.rank-tab:hover { background: #e2e6ff; }
.rank-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}
.rank-card > .rank-tabs {
  padding: 8px 10px 0;
  flex-shrink: 0;
}
.rank-pet-avatar {
  overflow: hidden;
  padding: 0;
  background: #f3f4ff;
}
.rank-pet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== 宝宝排名面板：宝宝排行 + 宝宝切磋排行（分开显示）===== */
.pet-rank-layer { z-index: 100000; }
.pet-rank-card { width: 400px; max-height: 84vh; }
.pet-rank-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 12px 14px;
}
.pet-rank-section[hidden] { display: none; }
.pet-rank-sec-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px 4px;
}
.pet-rank-sec-title {
  font-size: 14px;
  font-weight: 800;
  color: #312e81;
}
.pet-rank-sec-sub {
  flex: 1;
  font-size: 11px;
  color: #8b8fb8;
}
.pet-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pet-rank-list .rank-list-item { padding: 8px 8px; }

.pet-rank-reward-note {
  margin: 4px 8px 8px;
  padding: 8px 10px;
  background: #fff8e1;
  border: 1px solid #ffe0b2;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: #6d4c41;
}
.pet-rank-reward-last {
  margin: 0 8px 10px;
  padding: 6px 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: #3730a3;
}

/* ===== 宝宝改名 ===== */
#pet-app .pet-name-row { display: none; }
body[data-pet="active"] #pet-app .pet-name-row:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(255, 248, 225, 0.6);
  border: 1px dashed rgba(218, 165, 32, 0.5);
}
#pet-app .pet-name-label { font-size: 11px; color: #9a7b1a; }
#pet-app .pet-name-value { font-size: 14px; font-weight: 700; color: #8a6d0b; }
#pet-app .pet-rename-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(145deg, #e0b84a, #b8860b);
}
#pet-app .pet-rename-btn:hover { filter: brightness(1.08); }
#pet-app .pet-rename-msg { font-size: 10px; margin-left: 2px; }
#pet-app .pet-rename-editor { display: none; }
#pet-app .pet-rename-editor:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 6px 0 2px;
}
#pet-app .pet-rename-input {
  flex: 1 1 100%;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(218, 165, 32, 0.55);
  font-size: 12px;
  background: #fffde7;
  color: #6b5308;
  box-sizing: border-box;
}
#pet-app .pet-rename-input:focus { outline: none; border-color: #daa520; }
#pet-app .pet-rename-save,
#pet-app .pet-rename-cancel {
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
#pet-app .pet-rename-save { color: #fff; background: linear-gradient(145deg, #e0b84a, #b8860b); }
#pet-app .pet-rename-save:disabled { opacity: 0.6; cursor: not-allowed; }
#pet-app .pet-rename-cancel { color: #8a6d0b; background: #fff8e1; border: 1px solid rgba(218, 165, 32, 0.5); }

/* === 合养宝宝面板 === */
#pet-app .pet-co-raise-panel {
  position: fixed;
  left: 208px;
  bottom: 28px;
  z-index: 10002;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(184, 134, 11, 0.25);
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: min(72vh, calc(100vh - 120px));
  border: 1px solid rgba(218, 165, 32, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
  transform-origin: bottom left;
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  display: flex;
  flex-direction: column;
}
#pet-app .pet-co-raise-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#pet-app .pet-co-raise-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(218, 165, 32, 0.2);
  background: linear-gradient(135deg, #fffbe6, #fff5cc);
}
#pet-app .pet-co-raise-title {
  font-size: 15px;
  font-weight: 700;
  color: #8b6914;
}
#pet-app .pet-co-raise-body {
  padding: 12px 14px 14px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
#pet-app .cr-hint { font-size: 12px; color: #9ca3af; padding: 4px 0; }
#pet-app .cr-error {
  font-size: 12px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 8px;
}
#pet-app .cr-section-title { font-size: 12px; font-weight: 700; color: #b8860b; margin: 10px 0 6px; }
#pet-app .cr-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fffbe6, #fff7d6);
  border: 1px solid rgba(218, 165, 32, 0.35);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
}
#pet-app .cr-pet { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; }
#pet-app .cr-card-name { font-size: 14px; font-weight: 700; color: #8b6914; }
#pet-app .cr-card-meta { font-size: 12px; color: #b45309; }
#pet-app .cr-card-partner { font-size: 12px; color: #6b7280; margin-top: 2px; }
#pet-app .cr-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #f0e6c8;
  border-radius: 12px;
  margin-bottom: 6px;
  background: #fffdf5;
}
#pet-app .cr-invite-name { font-size: 13px; font-weight: 600; color: #374151; }
#pet-app .cr-invite-sub { font-size: 11px; color: #9ca3af; }
#pet-app .cr-invite-actions { display: flex; gap: 6px; flex-shrink: 0; }
#pet-app .cr-form { display: flex; gap: 6px; }
#pet-app .cr-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #e5d9a8;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
  background: #fff;
}
#pet-app .cr-input:focus { border-color: #d4af37; box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15); }
#pet-app .cr-btn {
  border: 1px solid #e5d9a8;
  background: #fff;
  color: #8b6914;
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
#pet-app .cr-btn:hover { background: #fff7d6; }
#pet-app .cr-btn-primary { background: linear-gradient(135deg, #f5a623, #e9b949); color: #fff; border-color: #e9b949; }
#pet-app .cr-btn-primary:hover { filter: brightness(1.06); }
#pet-app .cr-btn-danger { background: #fff; color: #dc2626; border-color: #fecaca; }
#pet-app .cr-btn-danger:hover { background: #fef2f2; }
#pet-app .cr-block { display: block; width: 100%; }
#pet-app .cr-dialog-title { font-size: 14px; font-weight: 700; color: #8b6914; margin-bottom: 10px; }
#pet-app .cr-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid #ece3c2;
  background: #fff;
  border-radius: 12px;
  padding: 9px 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
#pet-app .cr-option:hover { border-color: #e9b949; }
#pet-app .cr-option.active {
  border-color: #f5a623;
  background: linear-gradient(135deg, #fffbe6, #fff3c4);
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.15);
}
#pet-app .cr-option-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
#pet-app .cr-option-text { display: flex; flex-direction: column; }
#pet-app .cr-option-text b { font-size: 13px; color: #374151; }
#pet-app .cr-option-text i { font-size: 11px; color: #9ca3af; font-style: normal; }
#pet-app .cr-species { display: flex; gap: 8px; margin: 2px 0 10px; }
#pet-app .cr-species-btn {
  flex: 1;
  border: 1px solid #ece3c2;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  font-size: 12px;
  color: #8b6914;
  cursor: pointer;
}
#pet-app .cr-species-btn.active {
  border-color: #f5a623;
  background: linear-gradient(135deg, #fffbe6, #fff3c4);
  font-weight: 700;
}
#pet-app .cr-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
body[data-co-raise="1"] .pet-switch { display: none !important; }

/* ===== 喂吃的：饼干 / 提拉米苏 / 药水 ===== */
#pet-app .pet-feed-panel {
  position: fixed;
  left: 208px;
  bottom: 28px;
  z-index: 10002;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(184, 134, 11, 0.25);
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: min(72vh, calc(100vh - 120px));
  border: 1px solid rgba(218, 165, 32, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
  transform-origin: bottom left;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#pet-app .pet-feed-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#pet-app .pet-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(218, 165, 32, 0.2);
  background: linear-gradient(135deg, #fffbe6, #fff5cc);
  border-radius: 20px 20px 0 0;
}
#pet-app .pet-feed-title {
  font-size: 15px;
  font-weight: 700;
  color: #8b6914;
}
#pet-app .pet-feed-body {
  padding: 12px 14px 14px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
#pet-app .pf-note {
  font-size: 12px;
  color: #6b7280;
  background: #fffbe6;
  border: 1px solid #f3e4b0;
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 8px;
}
#pet-app .pf-satiety { margin-bottom: 8px; }
#pet-app .pf-satiety-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #8b6914;
  margin-bottom: 4px;
}
#pet-app .pf-satiety-row b { font-size: 12px; color: #b8860b; }
#pet-app .pf-satiety-bar {
  height: 8px;
  border-radius: 999px;
  background: #f3ecd2;
  overflow: hidden;
}
#pet-app .pf-satiety-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd166, #f5a623);
  transition: width 0.3s ease;
}
#pet-app .pf-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #4b5563;
  background: #f8faf5;
  border: 1px solid #e8e6d5;
  border-radius: 10px;
  padding: 7px 9px;
  margin-bottom: 6px;
}
#pet-app .pf-state.bad {
  color: #b45309;
  background: #fff7ed;
  border-color: #fed7aa;
}
#pet-app .pf-state-label { color: #9ca3af; }
#pet-app .pf-state.bad .pf-state-label { color: #d97706; }
#pet-app .pf-state-value { font-weight: 600; text-align: right; }
#pet-app .pf-points {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #8b6914;
  margin-bottom: 10px;
}
#pet-app .pf-points b { color: #b8860b; font-size: 13px; }
#pet-app .pf-items { display: flex; flex-direction: column; gap: 8px; }
#pet-app .pf-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #f0e0a0;
  border-radius: 12px;
  background: #fffde7;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  font-family: inherit;
}
#pet-app .pf-item:hover:not(.is-disabled) {
  border-color: #f5a623;
  background: #fff8dd;
  transform: translateY(-1px);
}
#pet-app .pf-item.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #fafafa;
  border-color: #e8e6d5;
}
#pet-app .pf-item-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff3c4;
  color: #b8860b;
}
#pet-app .pf-item.is-disabled .pf-item-icon { background: #eeeeee; color: #9ca3af; }
#pet-app .pf-item-icon svg { width: 19px; height: 19px; display: block; }
#pet-app .pf-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#pet-app .pf-item-main b { font-size: 13px; color: #8b6914; }
#pet-app .pf-item-main i { font-size: 11px; color: #9ca3af; font-style: normal; }
#pet-app .pf-item-price {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: #b8860b;
  background: #fff3c4;
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
#pet-app .pf-item-price.free { color: #15803d; background: #dcfce7; }
#pet-app .pf-item.is-disabled .pf-item-price { color: #9ca3af; background: #eeeeee; }
#pet-app .pf-item-hint {
  position: absolute;
  right: 12px;
  bottom: 2px;
  font-size: 10px;
  color: #9ca3af;
}
#pet-app .pf-msg {
  margin-top: 10px;
  font-size: 12px;
  border-radius: 8px;
  padding: 6px 8px;
}
#pet-app .pf-msg.ok { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; }
#pet-app .pf-msg.err { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; }
/* 去鱼塘入口（鱼塘夜话） */
#pet-app .pf-goto-fishing {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #8a6a3d;
}
#pet-app .pf-goto-fishing-btn {
  flex: none;
  border: 1px solid #d4af37;
  border-radius: 999px;
  background: linear-gradient(135deg, #fdf6e3, #fff8ec);
  color: #b8860b;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
#pet-app .pf-goto-fishing-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

/* ===== 宝宝历练 ===== */
#pet-app .pet-adventure-panel {
  position: fixed;
  right: 208px;
  bottom: 28px;
  z-index: 10002;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(184, 134, 11, 0.25);
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: min(74vh, calc(100vh - 120px));
  border: 1px solid rgba(218, 165, 32, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
  transform-origin: bottom right;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#pet-app .pet-adventure-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#pet-app .pet-adventure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(218, 165, 32, 0.2);
  background: linear-gradient(135deg, #fffbe6, #fff5cc);
  border-radius: 20px 20px 0 0;
}
#pet-app .pet-adventure-title { font-size: 15px; font-weight: 700; color: #8b6914; }
#pet-app .pet-adventure-head-ops { display: flex; align-items: center; gap: 6px; }
#pet-app .pet-adventure-link {
  border: 1px solid rgba(218, 165, 32, 0.5);
  background: #fffdf3;
  color: #8b6914;
  font-size: 12px;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
#pet-app .pet-adventure-link:hover { background: #fff3d0; color: #b8860b; }
#pet-app .pet-adventure-body {
  padding: 12px 14px 14px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
#pet-app .pa-note { font-size: 12px; color: #6b7280; padding: 8px 0; }
#pet-app .pa-cooldown {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 7px 9px;
  margin-bottom: 10px;
}
#pet-app .pa-cooldown b { color: #c2410c; }
#pet-app .pa-section-title { font-size: 12px; color: #9ca3af; margin-bottom: 6px; }
#pet-app .pa-pets { display: flex; gap: 8px; margin-bottom: 10px; }
#pet-app .pa-pet {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 2px solid #f0e6c8;
  background: #fffdf5;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
#pet-app .pa-pet:hover:not(.locked):not(:disabled) { border-color: #f5c76b; }
#pet-app .pa-pet.on { border-color: #f5a623; background: #fff7e0; box-shadow: 0 2px 8px rgba(245, 166, 35, 0.25); }
#pet-app .pa-pet.locked, #pet-app .pa-pet:disabled { opacity: 0.55; cursor: not-allowed; }
#pet-app .pa-pet-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; pointer-events: none; }
#pet-app .pa-pet-name { font-size: 12px; color: #8b6914; font-weight: 600; }
#pet-app .pa-pet-lv { font-size: 10px; color: #9ca3af; }
#pet-app .pa-pet-lock { font-size: 10px; color: #dc2626; }
#pet-app .pa-rate { font-size: 12px; color: #8b6914; text-align: center; margin-bottom: 8px; }
#pet-app .pa-rate b { color: #b8860b; }
#pet-app .pa-rate-hint { color: #9ca3af; }
#pet-app .pa-cost { font-size: 11px; color: #9ca3af; text-align: center; margin: -2px 0 8px; }
#pet-app .pa-cost b { color: #b8860b; }
#pet-app .pa-result-mult { font-size: 11px; color: #b8860b; background: #fff7e0; border-radius: 8px; padding: 1px 6px; }
#pet-app .pa-start {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ffd166, #f5a623);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
}
#pet-app .pa-start:hover:not(.is-disabled) { filter: brightness(1.05); }
#pet-app .pa-start.is-disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; box-shadow: none; }
#pet-app .pa-result {
  margin-top: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid #e8e6d5;
  background: #f8faf5;
}
#pet-app .pa-result.ok { border-color: #bbf7d0; background: #f0fdf4; }
#pet-app .pa-result.fail { border-color: #fed7aa; background: #fff7ed; }
#pet-app .pa-result-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
#pet-app .pa-result-tag { font-size: 13px; font-weight: 700; }
#pet-app .pa-result.ok .pa-result-tag { color: #15803d; }
#pet-app .pa-result.fail .pa-result-tag { color: #c2410c; }
#pet-app .pa-result-double {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-radius: 999px;
  padding: 1px 8px;
}
#pet-app .pa-result-theme { font-size: 11px; color: #9ca3af; margin-left: auto; }
#pet-app .pa-result-story { font-size: 12px; color: #4b5563; line-height: 1.6; margin-bottom: 8px; }
#pet-app .pa-result-rewards { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#pet-app .pa-result-label { font-size: 11px; color: #9ca3af; }
#pet-app .pa-reward {
  font-size: 12px;
  font-weight: 600;
  color: #8b6914;
  background: #fff2c4;
  border: 1px solid #f3dd9a;
  border-radius: 999px;
  padding: 2px 9px;
}
#pet-app .pa-result-debuff { font-size: 12px; color: #b45309; line-height: 1.5; }
#pet-app .pa-result-debuff.mild { color: #6b7280; }
#pet-app .pf-item-price.bag { color: #15803d; background: #dcfce7; }

/* ===== 历练背包 ===== */
#pet-app .pet-bag-panel {
  position: fixed;
  right: 208px;
  bottom: 28px;
  z-index: 10005;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(184, 134, 11, 0.28);
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, calc(100vh - 120px));
  border: 1px solid rgba(218, 165, 32, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
  transform-origin: bottom right;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#pet-app .pet-bag-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#pet-app .pet-bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(218, 165, 32, 0.2);
  background: linear-gradient(135deg, #fffbe6, #fff5cc);
  border-radius: 20px 20px 0 0;
}
#pet-app .pet-bag-title { font-size: 15px; font-weight: 700; color: #8b6914; }
#pet-app .pet-bag-body { padding: 12px 14px 14px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
#pet-app .pb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid #f0e6c8;
  background: #fffdf5;
  border-radius: 12px;
}
#pet-app .pb-item.empty { opacity: 0.6; }
#pet-app .pb-item-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff7e0;
  border-radius: 10px;
  color: #b8860b;
}
#pet-app .pb-item-icon svg { width: 20px; height: 20px; display: block; }
#pet-app .pb-item-main { flex: 1 1 auto; min-width: 0; }
#pet-app .pb-item-main b { display: block; font-size: 13px; color: #8b6914; }
#pet-app .pb-item-main i { font-size: 11px; color: #9ca3af; font-style: normal; }
#pet-app .pb-item-count { font-size: 14px; font-weight: 700; color: #b8860b; }
#pet-app .pb-note {
  font-size: 11px;
  color: #6b7280;
  background: #fffbe6;
  border: 1px solid #f3e4b0;
  border-radius: 8px;
  padding: 6px 8px;
}

/* ===== 历练说明弹窗 ===== */
#pet-app .pet-adventure-help {
  position: fixed;
  inset: 0;
  z-index: 100006;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(60, 45, 20, 0.35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#pet-app .pet-adventure-help[hidden] { display: none; }
#pet-app .pet-adventure-help-card {
  width: min(420px, 100%);
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  background: #fffdf5;
  border: 1px solid rgba(218, 165, 32, 0.4);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(184, 134, 11, 0.3);
  overflow: hidden;
}
#pet-app .pet-adventure-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fffbe6, #fff5cc);
  border-bottom: 1px solid rgba(218, 165, 32, 0.2);
  font-size: 15px;
  font-weight: 700;
  color: #8b6914;
}
#pet-app .pet-adventure-help-body { padding: 12px 16px 16px; overflow-y: auto; }
#pet-app .pa-help-block { margin-bottom: 14px; }
#pet-app .pa-help-block b { display: block; font-size: 13px; color: #8b6914; margin-bottom: 6px; }
#pet-app .pa-help-block ul { margin: 0; padding-left: 18px; }
#pet-app .pa-help-block li { font-size: 12px; color: #4b5563; line-height: 1.7; }
#pet-app .pa-help-block p { font-size: 12px; color: #6b7280; line-height: 1.6; margin: 6px 0 0; }

/* 窄屏：合养/喂食/历练面板改为贴边全宽，避免右侧被裁切 */
@media (max-width: 600px) {
  #pet-app .pet-co-raise-panel,
  #pet-app .pet-feed-panel,
  #pet-app .pet-adventure-panel,
  #pet-app .pet-bag-panel {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    bottom: 84px;
    max-height: calc(100vh - 140px);
    transform-origin: bottom center;
  }
}

/* ===== 宠物切磋：回合对战 ===== */
.pet-battle-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(255, 244, 232, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pet-battle-overlay[hidden] { display: none; }

.pet-battle-card {
  width: min(760px, 100%);
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(160deg, #fffaf4, #fff1e0);
  border: 2px solid #ffd9a8;
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(230, 150, 60, 0.28);
}

.pet-battle-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 10px;
}
.pet-battle-title {
  flex: 1;
  font-size: 20px;
  font-weight: 800;
  color: #e65100;
}
.pet-battle-skip {
  border: 2px solid #ffd9a8;
  background: #fff;
  color: #e65100;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.pet-battle-skip:hover { background: #fff3e0; }
.pet-battle-skip:active { transform: translateY(1px); }
.pet-battle-skip[hidden] { display: none; }
.pet-battle-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #ffe3c0;
  color: #a15c1a;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}
.pet-battle-close:hover { background: #ffd6a6; }

.pet-battle-list-view {
  padding: 4px 20px 22px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pet-battle-list-view[hidden] { display: none; }
.pet-battle-arena[hidden] { display: none; }
.pet-battle-hint {
  margin: 0 0 12px;
  text-align: center;
  font-size: 13px;
  color: #a1887f;
}
/* 切磋准备界面：饱食度状态一行（鱼塘夜话） */
.pet-battle-satline {
  margin: -6px 0 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #a1887f;
}
.pet-battle-satline.is-good { color: #43a047; }
.pet-battle-satline.is-bad { color: #ef6c00; }
.pet-battle-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}
.pet-battle-empty {
  margin: 14px 4px 6px;
  text-align: center;
  font-size: 13px;
  color: #b39a8c;
  line-height: 1.7;
}
.pet-battle-empty[hidden] { display: none; }

.pet-battle-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid #ffe3c0;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pet-battle-item:hover {
  transform: translateY(-2px);
  border-color: #ffc98a;
  box-shadow: 0 8px 18px rgba(255, 167, 74, 0.22);
}
.pet-battle-item-img {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 14px;
  background: #fff3e0;
}
.pet-battle-item-info { flex: 1; min-width: 0; }
.pet-battle-item-name {
  font-size: 15px;
  font-weight: 800;
  color: #5d4037;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pet-battle-item-sub { margin-top: 2px; font-size: 12px; color: #a1887f; }
.pet-battle-item-user { margin-top: 1px; font-size: 11px; color: #bfa79a; }
.pet-battle-item-go {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ffb74d, #ff8a3d);
  box-shadow: 0 4px 10px rgba(255, 138, 61, 0.3);
}

.pet-battle-arena { padding: 4px 18px 24px; }
.pet-battle-turn {
  min-height: 20px;
  margin-bottom: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #8d6e63;
}
.pet-battle-ground {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.pet-battle-side {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pet-battle-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  max-width: 100%;
}
.pet-battle-name {
  font-size: 14px;
  font-weight: 800;
  color: #5d4037;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.pet-battle-lv {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #ffb74d;
}
.pet-battle-sub {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #a1887f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pet-battle-hpbar {
  width: 100%;
  max-width: 220px;
  height: 12px;
  border-radius: 999px;
}
.pet-battle-hp-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, #ffcc80, #ff7043);
}
.pet-battle-stage {
  position: relative;
  width: 100%;
  height: 156px;
  margin-top: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pet-battle-img {
  height: 124px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transform-origin: center bottom;
  pointer-events: none;
  -webkit-user-drag: none;
}
.pet-battle-fx { position: absolute; inset: 0; pointer-events: none; }
.pet-battle-vs {
  flex: 0 0 auto;
  align-self: center;
  padding-bottom: 60px;
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  color: #ffb74d;
  text-shadow: 0 2px 0 #fff;
}

.pet-battle-stage.pb-attack-right { animation: pb-lunge-right 0.64s ease-in-out; }
.pet-battle-stage.pb-attack-left { animation: pb-lunge-left 0.64s ease-in-out; }
@keyframes pb-lunge-right {
  0% { transform: translateX(0); }
  45% { transform: translateX(var(--lunge, 70px)); }
  100% { transform: translateX(0); }
}
@keyframes pb-lunge-left {
  0% { transform: translateX(0); }
  45% { transform: translateX(calc(var(--lunge, 70px) * -1)); }
  100% { transform: translateX(0); }
}
.pet-battle-stage.pb-hit { animation: pb-hit 0.33s ease; }
@keyframes pb-hit {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  70% { transform: translateX(7px); }
}

/* 技能模式：兽类受击连续抖动（人形不抖动，改播自身受击动图） */
.pet-battle-stage.pb-shake { animation: pb-shake 0.16s linear infinite; }
@keyframes pb-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* 技能模式影像分层：技能特效1/2(1) < 本体(2) < 技能动作(2, 叠在本体之上) < 受击叠加(3) < 伤害飘字(4)
   技能模式攻击素材展示为「武魂真身」级巨大附体：底边贴地(不悬浮)，高约本体 2.6 倍(124px → 320px)，
   可略宽于本方站位以包裹本体；舞台同步加高，保证不越界遮挡血条与飘字；普通模式不受影响。
   素材底部的透明留白用 --pb-skill-fx-drop 整体下压抵消。 */
.pet-battle-arena.pb-skill .pet-battle-stage { height: 344px; }
.pet-battle-arena.pb-skill { --pb-skill-fx-drop: 32px; }
.pet-battle-img {
  position: relative;
  z-index: 2;
}
/* 技能动作：展示在攻击方自身宠物身上，底边贴攻击方脚底 */
.pet-battle-attackfx {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, var(--pb-skill-fx-drop, 32px));
  height: 320px;
  width: auto;
  max-width: 130%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 2;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* 技能特效1：渲染在敌方图层，底边贴敌方脚底 */
.pet-battle-behind {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, var(--pb-skill-fx-drop, 32px));
  height: 320px;
  width: auto;
  max-width: 130%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 1;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* 技能特效2：与技能特效1同图层同尺寸，可同时播放（DOM 在特效1之后，叠在其上） */
.pet-battle-behind2 {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, var(--pb-skill-fx-drop, 32px));
  height: 320px;
  width: auto;
  max-width: 130%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 1;
  pointer-events: none;
  -webkit-user-drag: none;
}
.pet-battle-hurtfx {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 124px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
  -webkit-user-drag: none;
}
.pet-battle-fx { z-index: 4; }

.pet-battle-mode {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.pet-battle-mode-btn {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid #e0b07d;
  border-radius: 999px;
  background: #fff8f0;
  color: #8d5a2b;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.pet-battle-mode-btn.active {
  background: linear-gradient(180deg, #ffb74d, #ff9800);
  border-color: #ff9800;
  color: #fff;
  box-shadow: 0 6px 14px rgba(255, 152, 0, 0.32);
}
.pet-battle-mode-tip {
  margin: 0 0 10px;
  font-size: 12px;
  color: #a1887f;
  text-align: center;
}

.pet-battle-dmg {
  position: absolute;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  font-size: 22px;
  font-weight: 900;
  color: #ff5252;
  text-shadow: 0 2px 0 #fff, 0 0 10px rgba(255, 82, 82, 0.35);
  pointer-events: none;
  animation: pb-dmg-float 1s ease-out forwards;
}
.pet-battle-dmg.skill {
  font-size: 27px;
  color: #ff9800;
  text-shadow: 0 2px 0 #fff, 0 0 12px rgba(255, 152, 0, 0.45);
}
.pet-battle-dmg.crit {
  font-size: 30px;
  color: #ff1744;
  text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 23, 68, 0.55);
}
.pet-battle-crit {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  font-size: 34px;
  font-weight: 900;
  color: #ff1744;
  text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255, 23, 68, 0.6);
  pointer-events: none;
  animation: pb-crit-float 1.1s ease-out forwards;
}
@keyframes pb-crit-float {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.4) rotate(-8deg); }
  28% { opacity: 1; transform: translate(-50%, -18px) scale(1.35) rotate(4deg); }
  60% { transform: translate(-50%, -34px) scale(1.1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -72px) scale(1) rotate(0); }
}
@keyframes pb-dmg-float {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.5); }
  25% { opacity: 1; transform: translate(-50%, -14px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -66px) scale(1); }
}

.pet-battle-result {
  padding: 30px 24px 34px;
  text-align: center;
}
.pet-battle-result[hidden] { display: none; }
.pet-battle-result-title {
  margin-bottom: 12px;
  font-size: 26px;
  font-weight: 900;
  color: #e65100;
}
.pet-battle-result-desc {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.7;
  color: #8d6e63;
}
.pet-battle-confirm {
  border: none;
  cursor: pointer;
  padding: 12px 44px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ffb74d, #ff8a3d);
  box-shadow: 0 8px 18px rgba(255, 138, 61, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pet-battle-confirm:hover { box-shadow: 0 10px 22px rgba(255, 138, 61, 0.42); }
.pet-battle-confirm:active { transform: translateY(1px); }

.pet-battle-records-btn {
  border: 2px solid #ffd9a8;
  background: #fff;
  color: #e65100;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.pet-battle-records-btn:hover { background: #fff3e0; }
.pet-battle-records-btn:active { transform: translateY(1px); }
.pet-battle-records-btn[hidden] { display: none; }

.pet-battle-records-view {
  padding: 4px 20px 22px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pet-battle-records-view[hidden] { display: none; }
.pet-battle-records-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}
.pet-battle-record {
  padding: 10px 14px;
  background: #fff;
  border: 2px solid #ffe3c0;
  border-left: 6px solid #ffb74d;
  border-radius: 16px;
}
.pet-battle-record.win { border-left-color: #4caf50; }
.pet-battle-record.lose { border-left-color: #bdbdbd; }
.pet-battle-record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.pet-battle-record-result {
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: #ff8a3d;
  padding: 1px 12px;
  border-radius: 999px;
}
.pet-battle-record.win .pet-battle-record-result { background: #4caf50; }
.pet-battle-record.lose .pet-battle-record-result { background: #9e9e9e; }
.pet-battle-record-time { font-size: 12px; color: #a1887f; }
.pet-battle-record-line {
  font-size: 13px;
  font-weight: 700;
  color: #5d4037;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pet-battle-record-hp { margin-top: 2px; font-size: 12px; color: #a1887f; }
.pet-battle-records-foot { margin-top: 16px; text-align: center; }


.pet-battle-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0 10px;
  flex-wrap: wrap;
}
.pet-battle-quota {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
  color: #6d4c41;
}
.pet-battle-quota b { color: #e65100; font-size: 16px; }
.pet-battle-score-chip { color: #8d6e63; }
.pet-battle-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pet-battle-buy,
.pet-battle-refresh,
.pet-battle-rules-btn {
  border: 1px solid #ffcc80;
  background: #fff8e1;
  color: #e65100;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.pet-battle-buy:disabled,
.pet-battle-refresh:disabled { opacity: 0.5; cursor: not-allowed; }
.pet-battle-rules {
  margin: 0 0 10px;
  padding: 10px 14px;
  background: #fff8e1;
  border: 1px solid #ffe0b2;
  border-radius: 12px;
  font-size: 13px;
  color: #5d4037;
  line-height: 1.55;
}
.pet-battle-rules[hidden] { display: none; }
.pet-battle-rules-title { font-weight: 900; margin: 0 0 6px; }
.pet-battle-rules ul { margin: 0; padding-left: 18px; }
.pet-battle-rules li { margin: 2px 0; }

@media (max-width: 560px) {
  .pet-battle-card { max-height: 92vh; }
  .pet-battle-stage { height: 128px; margin-top: 10px; }
  .pet-battle-img { height: 104px; }
  .pet-battle-name { max-width: 92px; font-size: 13px; }
  .pet-battle-vs { font-size: 18px; padding-bottom: 48px; }
  .pet-battle-list-view { padding: 4px 14px 18px; }
  .pet-battle-arena { padding: 4px 12px 20px; }
  .pet-battle-records-view { padding: 4px 14px 18px; }
}

/* ===== 语音唱歌：紧凑播放器 + 用户分组列表 ===== */
#pet-app .pet-music-head,
#pet2-app .pet2-music-head,
#pet3-app .pet3-music-head {
  padding: 8px 12px;
}
#pet-app .pet-music-song-name,
#pet2-app .pet2-music-song-name,
#pet3-app .pet3-music-song-name {
  font-size: 13px;
}
#pet-app .pet-music-body,
#pet2-app .pet2-music-body,
#pet3-app .pet3-music-body {
  padding: 6px 12px 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
#pet-app .pet-music-cover,
#pet2-app .pet2-music-cover,
#pet3-app .pet3-music-cover {
  width: 32px;
  height: 32px;
  margin: 0;
  border-width: 2px;
  flex-shrink: 0;
}
#pet-app .pet-music-cover-default,
#pet2-app .pet2-music-cover-default,
#pet3-app .pet3-music-cover-default {
  font-size: 14px;
}
#pet-app .pet-music-time-row,
#pet-app .pet-music-options,
#pet-app .pet-music-volume-row,
#pet2-app .pet2-music-time-row,
#pet2-app .pet2-music-options,
#pet2-app .pet2-music-volume-row,
#pet3-app .pet3-music-time-row,
#pet3-app .pet3-music-options,
#pet3-app .pet3-music-volume-row {
  display: none;
}
#pet-app .pet-music-controls,
#pet2-app .pet2-music-controls,
#pet3-app .pet3-music-controls {
  margin: 0;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}
#pet-app .pet-music-btn,
#pet2-app .pet2-music-btn,
#pet3-app .pet3-music-btn {
  width: 28px;
  height: 28px;
}
#pet-app .pet-music-btn.play-btn,
#pet2-app .pet2-music-btn.play-btn,
#pet3-app .pet3-music-btn.play-btn {
  width: 34px;
  height: 34px;
}
#pet-app .pet-music-btn svg,
#pet2-app .pet2-music-btn svg,
#pet3-app .pet3-music-btn svg {
  width: 14px;
  height: 14px;
}
#pet-app .pet-music-btn.play-btn svg,
#pet2-app .pet2-music-btn.play-btn svg,
#pet3-app .pet3-music-btn.play-btn svg {
  width: 16px;
  height: 16px;
}
#pet-app .pet-music-progress-row,
#pet2-app .pet2-music-progress-row,
#pet3-app .pet3-music-progress-row {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
}
#pet-app .pet-music-list,
#pet2-app .pet2-music-list,
#pet3-app .pet3-music-list {
  max-height: 300px;
}
.pet-audio-user {
  margin: 0 10px 6px;
  border: 2px solid #f0e0a0;
  border-radius: 12px;
  background: #fffde7;
  overflow: hidden;
}
.pet-audio-user-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.pet-audio-user-head:hover {
  background: #fff8e1;
}
.pet-audio-user-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: #8b6914;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-audio-plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #daa520;
  background: #fff;
  color: #b8860b;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.pet-audio-plus:hover {
  background: #fff3d0;
}
.pet-audio-tracks {
  display: none;
  padding: 0 6px 6px;
}
.pet-audio-user.open .pet-audio-tracks {
  display: block;
}
.pet-audio-tracks .pet-song-item,
.pet-audio-tracks .pet2-song-item,
.pet-audio-tracks .pet3-song-item {
  margin: 0 0 4px;
  padding: 6px 8px;
}
.pet-audio-tracks .pet-song-item:last-child,
.pet-audio-tracks .pet2-song-item:last-child,
.pet-audio-tracks .pet3-song-item:last-child {
  margin-bottom: 0;
}
.pet-audio-tracks .pet-song-item-name,
.pet-audio-tracks .pet2-song-item-name,
.pet-audio-tracks .pet3-song-item-name {
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pet-audio-like {
  display: flex;
  align-items: center;
  gap: 3px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #c9a227;
  padding: 2px 4px;
  flex-shrink: 0;
}
.pet-audio-like svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.pet-audio-like.is-on {
  color: #e74c3c;
}
.pet-audio-like-count {
  font-size: 11px;
  font-weight: 700;
  min-width: 8px;
}
#pet-app .pet-music-list > .pet-song-item,
#pet2-app .pet2-music-list > .pet2-song-item,
#pet3-app .pet3-music-list > .pet3-song-item {
  margin: 0 10px 8px;
}

/* ===== 首页抽奖入口（仅保留抽奖按钮） ===== */
.lottery-entry {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: flex;
  justify-content: center;
}
.lottery-entry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 44px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #fff;
  background: linear-gradient(135deg, #f6c945, #d4af37 55%, #e0729b);
  box-shadow: 0 14px 30px rgba(212, 175, 55, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.lottery-entry-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(212, 175, 55, 0.5);
}
@media (max-width: 640px) {
  .lottery-entry { padding: 0 16px 30px; }
  .lottery-entry-btn { padding: 12px 34px; font-size: 16px; }
}

/* 乾坤阁：窄屏悬浮球（右侧排行悬浮球上方）；宽屏保留居中横幅入口（侧栏面板常驻，悬浮球会重叠故隐藏） */
.qiankun-ball {
  position: fixed;
  right: 20px;
  bottom: 284px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 12px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6c945, #d4af37 55%, #e0729b);
  color: #fff;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.qiankun-ball:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(224, 114, 155, 0.6);
}
@media (max-width: 640px) {
  .qiankun-ball { bottom: 280px; }
}
@media (min-width: 1440px) {
  .qiankun-ball { display: none; }
}
@media (max-width: 1439.98px) {
  .lottery-entry { display: none; }
}

/* ===== 抽奖管理（奖品池 / 素材） ===== */
.lottery-admin-material {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.lottery-admin-preview {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 244, 220, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.4);
}
.lottery-admin-material-ops {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lottery-admin-material-ops .chance-btn {
  flex: 0 0 auto;
}
.lottery-prize-list {
  max-height: 320px;
}
.lottery-prize-row {
  gap: 6px;
}
.lottery-prize-row .album-admin-idx {
  min-width: 16px;
}
.lottery-prize-name {
  flex: 1 1 120px;
}
.lottery-prize-type {
  flex: 0 0 96px;
}
.lottery-prize-item {
  flex: 0 0 120px;
}
.lottery-prize-num {
  flex: 0 0 64px;
  width: 64px;
}
.lottery-prize-enable {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.lottery-prize-enable input {
  cursor: pointer;
}

/* ===== 抽奖页 · 横向滚轮老虎机 ===== */
.lottery-reel {
  position: relative;
  overflow: hidden;
  height: 84px;
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: inset 0 0 18px rgba(176, 138, 74, 0.12);
}
.lottery-reel-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0;
  will-change: transform;
}
.reel-cell {
  flex: 0 0 118px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff8ec, #ffeed6);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #8a6a3d;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
}
.reel-cell.coins {
  color: #b3591f;
  border-color: rgba(224, 140, 60, 0.5);
}
.reel-cell.none {
  color: #9aa0aa;
  border-color: rgba(154, 160, 170, 0.35);
}
.reel-cell.is-win {
  box-shadow: 0 0 0 2px #e0729b, 0 8px 20px rgba(224, 114, 155, 0.4);
  animation: reel-win 0.6s ease;
}
@keyframes reel-win {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.lottery-reel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(224, 114, 155, 0), #e0729b, rgba(224, 114, 155, 0));
  z-index: 3;
  pointer-events: none;
}
.lottery-reel::after {
  content: "▼";
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  color: #e0729b;
  font-size: 13px;
  z-index: 4;
  pointer-events: none;
}
.lottery-reel.is-spinning .reel-cell {
  filter: blur(0.4px);
}

/* ===== 抽奖页 · 概率说明（右上角） ===== */
.lottery-topbar {
  position: relative;
}
.lottery-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.lottery-odds-btn {
  border: 1px solid rgba(212, 175, 55, 0.5);
  background: rgba(255, 255, 255, 0.85);
  color: #b3591f;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.lottery-odds-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(212, 175, 55, 0.26);
}
.lottery-odds {
  position: absolute;
  right: 24px;
  top: 56px;
  z-index: 30;
  width: min(320px, calc(100vw - 32px));
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 18px 40px rgba(120, 90, 140, 0.22);
}
.lottery-odds-title {
  font-size: 13px;
  letter-spacing: 0.24em;
  color: #b08a4a;
  margin-bottom: 8px;
}
.lottery-odds-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.lottery-odds-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #6f5a44;
}
.lottery-odds-list .odds-pct {
  font-weight: 800;
  color: #c8801f;
}
.lottery-odds-note {
  margin-top: 10px;
  font-size: 12px;
  color: #9aa0aa;
}

/* ===== 钓鱼小游戏（与宠物切磋同一套暖色视觉） ===== */
.pf-overlay { align-items: center; }

.pf-card {
  width: min(760px, 100%);
  max-height: min(90vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(160deg, #fffaf4, #fff1e0);
  border: 2px solid #ffd9a8;
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(230, 150, 60, 0.28);
}

.pf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 8px;
  border-bottom: 1px dashed #ffe0bb;
}
.pf-title {
  flex: 1;
  font-size: 20px;
  font-weight: 800;
  color: #e65100;
}
.pf-coins {
  font-size: 13px;
  font-weight: 700;
  color: #a1887f;
}
.pf-coins b { color: #e65100; font-size: 15px; }
.pf-nav {
  border: 2px solid #ffd9a8;
  background: #fff;
  color: #c8801f;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pf-nav:hover { background: #fff3d0; color: #b8860b; }
.pf-close {
  border: 2px solid #ffb74d;
  background: #ffe0b2;
  color: #e65100;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 800;
  cursor: pointer;
}
.pf-close:hover { background: #ffd6a6; }

.pf-body { padding: 12px 18px 20px; overflow-y: auto; }
.pf-view { display: block; }
.pf-view[hidden] { display: none; }

.pf-topbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pf-tag {
  font-size: 12px;
  font-weight: 700;
  color: #8d6e63;
  background: #fff6e8;
  border: 1px solid #ffe0bb;
  border-radius: 999px;
  padding: 3px 10px;
}
.pf-tag-rain { color: #1e6bb8; background: #e8f2ff; border-color: #bcdcff; }
.pf-tag-weather { color: #c8801f; }

/* 水面 */
.pf-water {
  position: relative;
  height: 168px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #cdeafd 0%, #9ed6f7 42%, #6bb8e8 100%);
  border: 2px solid #b6e0fb;
  box-shadow: inset 0 -14px 30px rgba(30, 110, 170, .22);
}
.pf-water-fight { height: 190px; }
.pf-water-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-rod {
  position: absolute;
  left: 10px;
  bottom: 0;
  height: 132px;
  object-fit: contain;
  transform-origin: left bottom;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18));
}
.pf-line {
  position: absolute;
  left: 76px;
  bottom: 118px;
  width: 0;
  height: 2px;
  background: rgba(255, 255, 255, .9);
  border-radius: 2px;
  transform-origin: left center;
  opacity: 0;
}
.pf-line-ready { opacity: 1; }
.pf-line-cast { animation: pf-line-out .62s ease-out forwards; }
@keyframes pf-line-out {
  0% { width: 0; opacity: .2; }
  60% { width: 62%; opacity: 1; }
  100% { width: 60%; opacity: 1; }
}

.pf-float-idle {
  position: absolute;
  right: 26%;
  bottom: 46%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}
.pf-float {
  position: absolute;
  right: 26%;
  bottom: 47%;
  width: 22px;
  height: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity .2s ease;
}
.pf-float-img { width: 100%; height: 100%; object-fit: contain; }
.pf-float::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ff7043 0 45%, #fff 45% 100%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .08);
}
.pf-float-custom::after { display: none; }
.pf-float:not([hidden]) { opacity: 1; }
#pf-float.pf-float { opacity: 1; }
.pf-float-bob { animation: pf-bob .42s ease-in-out; }
@keyframes pf-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-6deg); }
}
.pf-float-plunge { animation: pf-plunge .5s ease-in forwards; }
@keyframes pf-plunge {
  0% { transform: translateY(0); }
  70% { transform: translateY(16px); }
  100% { transform: translateY(24px); opacity: .9; }
}
.pf-splash {
  position: absolute;
  right: 24%;
  bottom: 44%;
  width: 46px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .95);
  opacity: 0;
  transform: scale(.4);
}
.pf-splash-img { border: none; width: 64px; height: 40px; }
.pf-splash-on { animation: pf-splash .6s ease-out; }
@keyframes pf-splash {
  0% { opacity: .95; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* 选竿 / 选饵 */
.pf-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 620px) { .pf-picks { grid-template-columns: 1fr; } }
.pf-pick-col { min-width: 0; }
.pf-pick-title { font-size: 13px; font-weight: 800; color: #8d6e63; margin: 10px 0 6px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 116px;
  padding: 8px 12px;
  border: 2px solid #ffe0bb;
  background: #fff;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.pf-chip:hover { border-color: #ffcc80; }
.pf-chip-on { border-color: #ff9800; background: #fff6e8; box-shadow: 0 4px 12px rgba(255, 152, 0, .18); }
.pf-chip-name { font-size: 14px; font-weight: 800; color: #5d4037; }
.pf-chip-sub { font-size: 11px; color: #a1887f; }
.pf-empty { font-size: 12px; color: #bfa79a; }

/* 按钮 */
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-btn-main {
  border: none;
  background: linear-gradient(180deg, #ffb74d, #f57c00);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 11px 26px;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(245, 124, 0, .3);
}
.pf-btn-main:active { transform: translateY(1px); }
.pf-btn-main:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.pf-btn {
  border: 2px solid #ffd9a8;
  background: #fff;
  color: #c8801f;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 14px;
  cursor: pointer;
}
.pf-btn:hover { background: #fff3d0; }
.pf-btn:disabled { opacity: .55; cursor: not-allowed; }
.pf-btn-alert { border-color: #ff9800; background: #fff6e8; }
.pf-hint { margin-top: 10px; font-size: 12px; color: #a1887f; line-height: 1.6; }

/* QTE */
.pf-qte-tip {
  margin-top: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: #e65100;
  min-height: 24px;
}
.pf-bar {
  position: relative;
  height: 26px;
  margin-top: 10px;
  border-radius: 13px;
  background: #fff6e8;
  border: 2px solid #ffe0bb;
  overflow: hidden;
}
.pf-bar-safe {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, #a5d6a7, #66bb6a);
  opacity: .85;
}
.pf-bar-danger { position: absolute; inset: 0; }
.pf-bar-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 8px;
  margin-left: -4px;
  border-radius: 6px;
  background: #fff;
  border: 2px solid #ef6c00;
  box-shadow: 0 0 8px rgba(239, 108, 0, .5);
  transition: background .1s linear, border-color .1s linear;
}
.pf-marker-safe { background: #fff; border-color: #2e7d32; box-shadow: 0 0 10px rgba(46, 125, 50, .55); }
.pf-marker-danger { background: #ff5252; border-color: #b71c1c; }
.pf-meter-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pf-meter-label { font-size: 12px; font-weight: 700; color: #8d6e63; }
.pf-meter {
  flex: 1;
  height: 12px;
  border-radius: 8px;
  background: #ffe0bb;
  overflow: hidden;
}
.pf-meter-fill {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #81c784, #43a047);
  transition: width .08s linear, background .2s linear;
}
.pf-meter-low { background: linear-gradient(90deg, #ff8a65, #e53935); }
.pf-timer { font-size: 13px; font-weight: 800; color: #8d6e63; min-width: 46px; text-align: right; }
.pf-hold { display: block; width: 100%; margin-top: 12px; }
.pf-hold.pf-hidden { display: none; }
.pf-hold.pf-down { background: linear-gradient(180deg, #f57c00, #e65100); }

/* 结算 */
.pf-result { text-align: left; }
.pf-result-title { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 12px; }
.pf-result-ok { color: #43a047; }
.pf-result-fail { color: #ef6c00; }
.pf-result-body { display: flex; gap: 14px; align-items: center; }
.pf-result-info { flex: 1; min-width: 0; }
.pf-result-name { font-size: 17px; font-weight: 800; color: #5d4037; display: flex; align-items: center; gap: 8px; }
.pf-result-desc { margin-top: 6px; font-size: 13px; color: #8d6e63; line-height: 1.65; }
.pf-result-desc-center { text-align: center; }
.pf-result-price { margin-top: 6px; font-size: 13px; font-weight: 700; color: #c8801f; }
.pf-result-msgs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pf-badge-new, .pf-badge-ok {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}
.pf-badge-new { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.pf-badge-ok { background: #fff6e8; color: #c8801f; border: 1px solid #ffd9a8; }

/* 鱼图 / 稀有度 */
.pf-fish-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #eaf6ff;
  border: 2px solid #cfe8f8;
  overflow: hidden;
}
.pf-fish-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pf-fish-thumb.pf-ph { font-size: 24px; font-weight: 800; color: #6bb8e8; }
.pf-fish-big { width: 96px; height: 96px; border-radius: 20px; }
.pf-fish-locked { filter: grayscale(1) brightness(.75); }
.pf-r1 { border-color: #cfe8f8; }
.pf-r2 { border-color: #a5d6a7; }
.pf-r3 { border-color: #90caf9; }
.pf-r4 { border-color: #ce93d8; }
.pf-r5 { border-color: #ffcc80; box-shadow: 0 0 12px rgba(255, 183, 77, .55); }
.pf-rarity {
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff6e8;
  color: #c8801f;
  border: 1px solid #ffe0bb;
}
.pf-rarity.pf-r3 { color: #1565c0; background: #e8f2ff; border-color: #bcdcff; }
.pf-rarity.pf-r4 { color: #6a1b9a; background: #f6e8ff; border-color: #e0c0ff; }
.pf-rarity.pf-r5 { color: #b8860b; background: #fff8e1; border-color: #ffd9a8; }

/* 列表 / 网格 */
.pf-sub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pf-sub-title { flex: 1; font-size: 16px; font-weight: 800; color: #e65100; }
.pf-sub-info { font-size: 12px; font-weight: 700; color: #a1887f; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pf-card-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 2px solid #ffe0bb;
  border-radius: 16px;
  cursor: pointer;
}
.pf-card-on { border-color: #ff9800; background: #fff6e8; }
.pf-check { width: 16px; height: 16px; accent-color: #f57c00; flex: 0 0 auto; }
.pf-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-card-name { font-size: 13px; font-weight: 800; color: #5d4037; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pf-card-sub { font-size: 11px; color: #a1887f; }

/* 鱼篓四出口（鱼塘夜话）：喂 / 留 / 卖 / 鉴 */
.pf-bag-meta { font-size: 12px; font-weight: 700; color: #a1887f; margin: -4px 0 10px; }
.pf-card-item.pf-card-col { flex-direction: column; align-items: stretch; gap: 6px; }
.pf-card-main { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.pf-card-acts { display: flex; gap: 4px; }
.pf-act {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 3px 4px 2px;
  border-radius: 10px;
  background: #fff6e8;
  border: 1px solid #ffe0bb;
  font-size: 13px;
  line-height: 1.15;
  color: #8d6e63;
  cursor: pointer;
}
.pf-act i { font-style: normal; font-size: 10px; font-weight: 700; }
.pf-act:hover { border-color: #ff9800; color: #e65100; }
.pf-act.pf-act-on { background: #fff3cd; border-color: #ffd54f; color: #a67c00; }
.pf-act.pf-act-state { cursor: default; background: #f1f8e9; border-color: #dcedc8; color: #7cb342; }
.pf-act.pf-act-state:hover { border-color: #dcedc8; color: #7cb342; }
.pf-card-item.pf-kept { border-color: #ffd54f; box-shadow: inset 0 0 0 1px #ffd54f; background: #fffdf4; }

/* 喂食面板（鱼塘夜话） */
.pf-feed-fishlist { margin-bottom: 10px; }
.pf-feed-fishnames { display: block; font-size: 12px; font-weight: 700; color: #8d6e63; background: #fff6e8; border: 1px dashed #ffd9a8; border-radius: 12px; padding: 6px 10px; }
.pf-feed-empty { color: #bf360c; }
.pf-feed-pets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pf-feed-pet {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 2px solid #ffe0bb;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
}
.pf-feed-pet-on { border-color: #ff9800; background: #fff6e8; }
.pf-feed-pet-off { opacity: .55; cursor: not-allowed; }
.pf-feed-avatar { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; border: 2px solid #ffe0bb; background: #eaf6ff; }
.pf-feed-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-feed-pet-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-feed-pet-name { font-size: 13px; font-weight: 800; color: #5d4037; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-feed-state { font-style: normal; font-size: 11px; font-weight: 700; color: #7cb342; background: #f1f8e9; border-radius: 8px; padding: 1px 6px; }
.pf-feed-bar { height: 8px; border-radius: 99px; background: #f1e6d6; overflow: hidden; }
.pf-feed-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb74d, #ff9800); border-radius: 99px; transition: width .3s; }
.pf-feed-taste { font-size: 11px; color: #2e7d32; }
.pf-feed-taste-no { color: #a1887f; }
.pf-feed-loading { font-size: 13px; color: #a1887f; padding: 10px 2px; }
.pf-feed-result {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px 14px;
  background: #fff;
  border: 2px solid #ffe0bb;
  border-radius: 16px;
}
.pf-feed-avatar.pf-feed-eat { width: 72px; height: 72px; animation: pf-feed-chew .55s ease-in-out 3; }
@keyframes pf-feed-chew {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-8px) scale(1.06); }
  60% { transform: translateY(0) scale(.94); }
}
.pf-feed-line { font-size: 14px; font-weight: 700; color: #5d4037; background: #fff6e8; border: 1px solid #ffd9a8; border-radius: 12px; padding: 8px 14px; max-width: 90%; }
.pf-feed-levelup { font-size: 14px; font-weight: 800; color: #e65100; }
.pf-feed-cap { font-size: 11px; color: #a1887f; }
.pf-float { position: absolute; top: 6px; font-size: 13px; font-weight: 800; pointer-events: none; animation: pf-float-up 1.4s ease-out forwards; }
.pf-float-exp { left: 18%; color: #1565c0; }
.pf-float-sat { right: 18%; color: #ef6c00; }
@keyframes pf-float-up {
  0% { opacity: 0; transform: translateY(10px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px); }
}

/* 回礼动效（鱼塘夜话）：冒光 → 抖动 → 礼盒掉落 → 点开 */
.pf-feed-avatar.pf-feed-gift-anim {
  animation: pf-feed-chew .55s ease-in-out 3, pf-feed-glow .8s ease-in-out 1.65s 2, pf-feed-shake .25s ease-in-out 1.7s 2;
}
@keyframes pf-feed-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0); }
  50% { box-shadow: 0 0 18px 6px rgba(255, 213, 79, .85); }
}
@keyframes pf-feed-shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
.pf-gift-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.pf-giftbox {
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .15));
  animation: pf-gift-drop .45s cubic-bezier(.2, .9, .3, 1.4) 2.2s both;
}
.pf-giftbox.pf-gift-open { animation: pf-gift-pop .4s ease-out both; }
@keyframes pf-gift-drop {
  0% { opacity: 0; transform: translateY(-46px) scale(.7); }
  70% { opacity: 1; transform: translateY(4px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pf-gift-pop {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.25) rotate(-8deg); }
  100% { transform: scale(1.05) rotate(0); }
}
.pf-gift-reward { font-size: 14px; font-weight: 800; color: #e65100; animation: pf-gift-reward-in .4s ease-out both; }
@keyframes pf-gift-reward-in {
  0% { opacity: 0; transform: scale(.8); }
  100% { opacity: 1; transform: scale(1); }
}

.pf-milestones { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pf-ms {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: #fff6e8;
  border: 1px dashed #ffd9a8;
}
.pf-ms-text { flex: 1; font-size: 13px; font-weight: 700; color: #8d6e63; }
.pf-ms-ready { background: #e8f5e9; border-color: #a5d6a7; }
.pf-ms-ready .pf-ms-text { color: #2e7d32; }
.pf-ms-done { opacity: .7; }
.pf-ms-state { font-size: 12px; font-weight: 700; color: #a1887f; }
.pf-ms-btn { padding: 5px 14px; }

.pf-codex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 2px solid #ffe0bb;
  border-radius: 16px;
  text-align: center;
}
.pf-codex-locked { background: #fafafa; border-style: dashed; }
.pf-codex-name { font-size: 13px; font-weight: 800; color: #5d4037; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; }
.pf-codex-desc { font-size: 11px; color: #a1887f; line-height: 1.55; }
.pf-codex-price { font-size: 11px; font-weight: 700; color: #c8801f; }

.pf-grid-shop { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.pf-shop-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: #fff;
  border: 2px solid #ffe0bb;
  border-radius: 16px;
}
.pf-shop-name { font-size: 14px; font-weight: 800; color: #5d4037; }
.pf-shop-desc { font-size: 11px; color: #a1887f; line-height: 1.55; min-height: 32px; }
.pf-shop-meta { font-size: 11px; font-weight: 700; color: #c8801f; }
.pf-buy { margin-top: 4px; }

@media (max-width: 640px) {
  .pf-water { height: 142px; }
  .pf-water-fight { height: 160px; }
  .pf-fish-thumb { width: 52px; height: 52px; }
  .pf-fish-big { width: 80px; height: 80px; }
}

/* ===== 后台 · 钓鱼管理 ===== */
.fishing-admin-sub {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: #8d6e63;
}
.fishing-admin-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fishing-asset-slot {
  flex: 1 1 190px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fishing-admin-label { font-size: 12px; font-weight: 700; color: #8d6e63; }
.fishing-thumb-box {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #e0b07d;
  border-radius: 10px;
  background: #fffaf4;
  overflow: hidden;
}
.fishing-thumb { max-width: 100%; max-height: 100%; object-fit: contain; }
.fishing-thumb-empty { font-size: 12px; color: #bfa79a; }
.fishing-row-ops { display: flex; gap: 8px; }
.fishing-row-ops .chance-btn { padding: 5px 12px; font-size: 12px; }
.fishing-asset {
  width: 100%;
  max-width: 240px;
  padding: 5px 10px;
  font-size: 12px;
}
.fishing-admin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.fishing-row {
  padding: 10px;
  border: 1px solid #f0cfa8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
}
.fishing-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.fishing-row-name { font-size: 14px; font-weight: 800; color: #5d4037; }
.fishing-row-id { font-size: 12px; color: #a1887f; }
.fishing-row-body { display: flex; flex-wrap: wrap; gap: 12px; }
.fishing-row-img {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.fishing-fields {
  flex: 1 1 320px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  min-width: 0;
}
.fishing-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fishing-field span { font-size: 11px; font-weight: 700; color: #a1887f; }
.fishing-field-wide { grid-column: 1 / -1; }
.fishing-admin-rules { margin-bottom: 8px; }


/* ===== 魅力联动新增样式 ===== */
/* 魅力榜里的本周送花进度 */
.rank-charm-progress {
  display: block;
  margin: 2px 0 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 235, 242, 0.9), rgba(255, 246, 230, 0.9));
  border: 1px solid rgba(214, 158, 178, 0.35);
  font-size: 13px;
  line-height: 1.7;
  color: #7c5566;
}
.rank-charm-progress .rank-charm-line { display: block; }
.rank-charm-progress .rank-charm-line b { color: #c2426a; font-weight: 700; }
.rank-charm-progress .rank-charm-bondline { color: #a06a86; margin-top: 2px; }

/* 送花确认框里的「用鲜花抵扣」开关 */
.charm-flower-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 246, 230, 0.85);
  border: 1px solid rgba(214, 178, 128, 0.4);
  cursor: pointer;
  font-size: 13px;
  color: #8a6a3d;
  user-select: none;
}
.charm-flower-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #d0668a;
  cursor: pointer;
  flex-shrink: 0;
}
.charm-flower-toggle-label { font-weight: 600; }
.charm-flower-toggle-hint { color: #a08a6a; font-size: 12px; margin-left: auto; }

/* 羁绊达成等提示 */
.charm-bonus-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(240, 214, 232, 0.7);
  border: 1px solid rgba(200, 140, 180, 0.4);
  font-size: 13px;
  color: #8b3a63;
  line-height: 1.6;
}

/* ===== 宠物小屋：悬浮球 ===== */
.house-ball {
  position: fixed;
  right: 20px;
  bottom: 220px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 12px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1 55%, #a855f7);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.house-ball:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.55);
}
@media (max-width: 640px) {
  .house-ball { bottom: 216px; }
}
/* ≥1440px 时右侧被固定的签到排行面板（right:26/48px，宽 264px）占用，
   把悬浮球左移到面板左侧，避免遮挡；其它悬浮球在此断点直接隐藏，小屋没有常驻面板所以保留入口 */
@media (min-width: 1440px) {
  .house-ball { right: 328px; }
}

/* ===== 宠物小屋：弹层 ===== */
.ph-card {
  position: relative;
  width: min(980px, 100%);
  max-height: min(92vh, 880px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(160deg, #fffaf4, #fff1e0);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 22px 60px rgba(120, 72, 30, 0.22);
  color: #4a3320;
}

.ph-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  background: linear-gradient(180deg, #fff6e6, #ffeed6);
  flex: 0 0 auto;
}
.ph-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #8a5a1e;
}
.ph-owner {
  font-size: 13px;
  font-weight: 700;
  color: #a9793a;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.18);
  color: #8a5a1e;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.ph-close:hover {
  background: rgba(212, 175, 55, 0.34);
  transform: scale(1.08);
}

.ph-search {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.ph-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  background: #fffdf8;
  font-size: 13px;
  color: #4a3320;
  outline: none;
}
.ph-search-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}
.ph-search-input:disabled {
  background: #f6f1e8;
  color: #b3a48c;
}
.ph-search-list {
  position: absolute;
  left: 18px;
  right: 18px;
  top: calc(100% - 4px);
  z-index: 5;
  max-height: 236px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: #fffdf8;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 14px 34px rgba(120, 72, 30, 0.2);
}
.ph-search-list[hidden] { display: none; }
.ph-search-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  text-align: left;
}
.ph-search-item:hover { background: rgba(212, 175, 55, 0.14); }
.ph-search-name {
  font-size: 13px;
  font-weight: 800;
  color: #6b4420;
}
.ph-search-meta {
  font-size: 11px;
  color: #a98f6a;
  white-space: nowrap;
}
.ph-search-empty {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  color: #a98f6a;
  text-align: center;
}

.ph-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 14px;
  padding: 14px 18px;
  overflow-y: auto;
}

.ph-stage {
  position: relative;
  min-height: 260px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #cfe9ff 0%, #e8f6ff 52%, #dff0d0 52%, #c6e4ab 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
}
.ph-stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-stage-bg[hidden] { display: none; }
.ph-stage-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 100%;
}
.ph-stage-ground[hidden] { display: none; }
.ph-stage-decor {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 30%;
  max-width: 150px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(60, 30, 0, 0.2));
  pointer-events: none;
}
.ph-stage-decor[hidden] { display: none; }

.ph-pet-wrap {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 62%;
  max-width: 320px;
  pointer-events: none;
}
.ph-pet-img {
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(60, 30, 0, 0.28));
  animation: ph-bob 3.4s ease-in-out infinite;
}
.ph-pet-img[hidden] { display: none; }
@keyframes ph-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.ph-pet-empty {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 700;
  color: #a9793a;
}
.ph-pet-empty[hidden] { display: none; }

.ph-pet-meta {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ph-pet-name {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 900;
  color: #6b4420;
}
.ph-pet-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.9);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.ph-pet-tag[hidden] { display: none; }

.ph-sat {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ph-sat-bar {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(90, 60, 20, 0.16);
}
.ph-sat-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7bd66a, #4caf50);
  transition: width 0.35s ease;
}
.ph-sat-fill.is-warn { background: linear-gradient(90deg, #ffd166, #ffa726); }
.ph-sat-fill.is-low { background: linear-gradient(90deg, #ff8a80, #ef5350); }
.ph-sat-text {
  font-size: 11px;
  font-weight: 800;
  color: #6b4420;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.ph-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.ph-side-title {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #a9793a;
}
.ph-pets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 168px;
  overflow-y: auto;
}
.ph-pets-empty {
  font-size: 12px;
  color: #a98f6a;
}
.ph-pet-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 12px;
  background: #fffdf8;
  cursor: pointer;
  font-size: 13px;
  color: #6b4420;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.ph-pet-chip:hover { transform: translateY(-1px); }
.ph-pet-chip-on {
  border-color: #d4af37;
  background: linear-gradient(180deg, #fff4dc, #ffe9c2);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.22);
}
.ph-pet-chip-name { font-weight: 800; }
.ph-pet-chip-lv { font-size: 11px; color: #a9793a; }

.ph-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 2px;
}
.ph-btn {
  padding: 10px 14px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 12px;
  background: #fffdf8;
  font-size: 13px;
  font-weight: 800;
  color: #8a5a1e;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
}
.ph-btn:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); }
.ph-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ph-btn-main {
  border: none;
  background: linear-gradient(135deg, #f2b24a, #d98b2b);
  color: #fff;
  box-shadow: 0 6px 16px rgba(217, 139, 43, 0.34);
}

.ph-tip {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #a98f6a;
  min-height: 0;
}
.ph-quota {
  color: #8a5a1e;
  font-weight: 700;
}
.ph-tip[hidden] { display: none; }

.ph-board {
  flex: 0 0 auto;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(212, 175, 55, 0.22);
  background-color: #fffaf0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.ph-board-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #a9793a;
}
.ph-board-count { color: #c9a86a; }
.ph-comment-list {
  max-height: 176px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.ph-comment-empty {
  margin: 0;
  font-size: 12px;
  color: #a98f6a;
}
.ph-comment {
  display: flex;
  gap: 8px;
}
.ph-comment-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f6c945, #e0729b);
  background-size: cover;
  background-position: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.ph-comment-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fffdf8;
  border: 1px solid rgba(212, 175, 55, 0.22);
}
.ph-comment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.ph-comment-author {
  font-size: 12px;
  font-weight: 800;
  color: #6b4420;
}
.ph-comment-admin,
.ph-comment-host {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.ph-comment-admin { background: #4f46e5; color: #fff; }
.ph-comment-host { background: #d4af37; color: #fff; }
.ph-comment-time {
  font-size: 11px;
  color: #b3a48c;
}
.ph-comment-del {
  margin-left: auto;
  padding: 2px 8px;
  border: none;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.ph-comment-del:hover { background: rgba(220, 38, 38, 0.2); }
.ph-comment-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5b4229;
  word-break: break-word;
}
.ph-comment-input {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.ph-comment-input[hidden] { display: none; }
.ph-comment-box {
  flex: 1 1 auto;
  box-sizing: border-box;
  min-height: 44px;
  max-height: 96px;
  padding: 8px 12px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  background: #fffdf8;
  font-family: inherit;
  font-size: 13px;
  color: #4a3320;
  resize: vertical;
  outline: none;
}
.ph-comment-box:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}
.ph-comment-input .ph-btn { flex: 0 0 auto; }
.ph-board .ph-tip { margin-top: 8px; }

@media (max-width: 640px) {
  .ph-card { max-height: 94vh; width: 100%; border-radius: 18px; }
  .ph-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }
  .ph-stage { min-height: 210px; }
  .ph-pet-wrap { width: 50%; bottom: 20%; }
  .ph-side-title { margin-top: 2px; }
  .ph-pets {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
  }
  .ph-pet-chip { flex: 1 1 auto; min-width: 132px; }
  .ph-actions { flex-direction: row; flex-wrap: wrap; }
  .ph-btn { flex: 1 1 auto; }
  .ph-owner { font-size: 12px; }
  .ph-title { font-size: 16px; }
}