/* =====================================================================
   theme-skin.css  —  子页面 / 弹层主题跟随皮肤层（附加层，不改主页）
   ---------------------------------------------------------------------
   设计原则：
   1) 只对「小屋的 8 个子场景」上色，主页 #hub-view 一律不碰。
   2) 配色由主题变量驱动：body[data-theme] / html[data-theme] 上挂
      --skin-* 变量，下方规则统一读取，避免为每个场景重复写死颜色。
   3) 默认主题（key=""，body 无 data-theme）不写任何覆盖，保持原样。
   4) 装饰纹样用 background 叠加实现（不用伪元素盖内容），
      确保文字与按钮始终在上层、手机端不遮挡。
   覆盖场景：
     排行榜 / 宝宝切磋榜 (.rank-layer .rank-card)
     留言板 (.msg-layer .msg-card)
     神秘商店 (.mystery-shop-layer .mystery-shop-card)
     帮喂面板 (#pet-app .pet-feed-panel)
     宝宝历练面板 (#pet-app .pet-adventure-panel)
     鱼塘钓鱼 (.pf-overlay .pf-panel / .pf-card)  ← hub.css 已部分覆盖，这里补装饰
     宠物切磋 (.pet-battle-overlay .pf-panel)
     小屋串门 (.ph-overlay .ph-card)
   ===================================================================== */

/* ---------- 主题变量：凤求凰（云雾蓝金） ---------- */
body[data-theme="fengqiu"],
html[data-theme="fengqiu"] {
  --skin-scrim: rgba(26, 40, 60, 0.55);
  --skin-panel: linear-gradient(180deg, #ffffff 0%, #eff7fd 100%);
  --skin-panel-border: rgba(201, 162, 75, 0.5);
  --skin-panel-text: #3c4b5c;
  --skin-title: #3a4a5e;
  --skin-sub: #8090a4;
  --skin-accent: #5a7a9e;
  --skin-accent-soft: #8fb4d4;
  --skin-head: linear-gradient(180deg, #f8fbff 0%, #eaf4fc 100%);
  --skin-item-bg: rgba(255, 255, 255, 0.94);
  --skin-item-border: rgba(190, 205, 225, 0.85);
  --skin-btn-bg: linear-gradient(135deg, #8fb4d4, #5a7a9e);
  --skin-btn-text: #ffffff;
  --skin-deco: radial-gradient(circle at 88% -6%, rgba(143, 180, 212, 0.28), transparent 42%),
               radial-gradient(circle at 8% 104%, rgba(201, 162, 75, 0.16), transparent 40%);
}

/* ---------- 主题变量：山海 / 清欢（青玉） ---------- */
body[data-theme="qinghuan"],
html[data-theme="qinghuan"] {
  --skin-scrim: rgba(16, 40, 33, 0.55);
  --skin-panel: linear-gradient(180deg, #ffffff 0%, #e9f5ee 100%);
  --skin-panel-border: rgba(79, 141, 119, 0.5);
  --skin-panel-text: #2f5f4c;
  --skin-title: #2c5b4e;
  --skin-sub: #5d8271;
  --skin-accent: #5fa98a;
  --skin-accent-soft: #8fd0ae;
  --skin-head: linear-gradient(180deg, #f2fbf6 0%, #e4f4ea 100%);
  --skin-item-bg: rgba(255, 255, 255, 0.95);
  --skin-item-border: rgba(143, 208, 174, 0.55);
  --skin-btn-bg: linear-gradient(135deg, #8fd0ae, #5fa98a);
  --skin-btn-text: #ffffff;
  --skin-deco: radial-gradient(circle at 90% -8%, rgba(143, 208, 174, 0.3), transparent 42%),
               radial-gradient(circle at 6% 106%, rgba(201, 168, 106, 0.18), transparent 40%);
}

/* ---------- 主题变量：库洛米（紫粉） ---------- */
body[data-theme="kuromi"],
html[data-theme="kuromi"] {
  --skin-scrim: rgba(46, 20, 70, 0.6);
  --skin-panel: linear-gradient(180deg, #f8f2ff 0%, #ece4f5 100%);
  --skin-panel-border: rgba(180, 140, 210, 0.6);
  --skin-panel-text: #4a2b5e;
  --skin-title: #4a2b5e;
  --skin-sub: #8a6aa0;
  --skin-accent: #7b4fb0;
  --skin-accent-soft: #9b6fd4;
  --skin-head: linear-gradient(180deg, #f9f3ff 0%, #ece4f5 100%);
  --skin-item-bg: rgba(250, 246, 255, 0.94);
  --skin-item-border: rgba(170, 140, 200, 0.75);
  --skin-btn-bg: linear-gradient(135deg, #9b6fd4, #7b4fb0);
  --skin-btn-text: #ffffff;
  --skin-deco: radial-gradient(circle at 88% -6%, rgba(200, 150, 235, 0.32), transparent 44%),
               radial-gradient(circle at 8% 104%, rgba(123, 79, 176, 0.2), transparent 42%);
}

/* =====================================================================
   1) 遮罩层背景
   ===================================================================== */
body[data-theme] .rank-layer,
body[data-theme] .mystery-shop-layer {
  background: var(--skin-scrim);
}
body[data-theme] .pf-overlay,
body[data-theme] .pet-battle-overlay,
body[data-theme] .ph-overlay {
  background: var(--skin-scrim);
}

/* =====================================================================
   2) 卡片 / 面板底：底色 + 装饰纹样（背景叠加，不盖内容）
   ===================================================================== */
body[data-theme] .rank-card,
body[data-theme] .mystery-shop-card,
body[data-theme] .ph-card,
body[data-theme] #pet-app .pet-feed-panel,
body[data-theme] #pet-app .pet-adventure-panel {
  background-image: var(--skin-deco), var(--skin-panel);
  border: 1px solid var(--skin-panel-border);
  color: var(--skin-panel-text);
  box-shadow: 0 22px 60px rgba(20, 28, 42, 0.28);
}

/* 宝箱类面板：圆角与滚动保持原布局，仅换色 */
body[data-theme] .mystery-shop-card {
  color: var(--skin-panel-text);
}

/* =====================================================================
   3) 头部 / 标题 / 副标题
   ===================================================================== */
body[data-theme] .rank-head,
body[data-theme] .mystery-shop-head,
body[data-theme] .ph-head,
body[data-theme] #pet-app .pet-feed-head,
body[data-theme] #pet-app .pet-adventure-head {
  background: var(--skin-head);
  border-bottom-color: var(--skin-item-border);
}

body[data-theme] .rank-title,
body[data-theme] .rank-title-line,
body[data-theme] .mystery-shop-title,
body[data-theme] .ph-title,
body[data-theme] .ph-side-title,
body[data-theme] .ph-board-title,
body[data-theme] #pet-app .pet-feed-title,
body[data-theme] #pet-app .pet-adventure-title {
  color: var(--skin-title);
}

body[data-theme] .rank-sub,
body[data-theme] .mystery-shop-sub,
body[data-theme] .mystery-shop-kicker,
body[data-theme] .ph-tip,
body[data-theme] .ph-quota,
body[data-theme] .ph-board-count,
body[data-theme] #pet-app .pet-adventure-help {
  color: var(--skin-sub);
}

body[data-theme] .rank-close,
body[data-theme] .mystery-shop-layer .rank-close,
body[data-theme] .ph-close {
  color: var(--skin-sub);
}

/* =====================================================================
   4) 标签页 / 切换按钮
   ===================================================================== */
body[data-theme] .rank-tab,
body[data-theme] .mystery-shop-tab,
body[data-theme] .ph-pet-chip {
  background: var(--skin-item-bg);
  border-color: var(--skin-item-border);
  color: var(--skin-sub);
}

body[data-theme] .rank-tab.active,
body[data-theme] .mystery-shop-tab.active,
body[data-theme] .ph-pet-chip-on {
  background: var(--skin-accent-soft);
  border-color: var(--skin-accent);
  color: var(--skin-btn-text);
}

/* =====================================================================
   5) 列表条目
   ===================================================================== */
body[data-theme] .rank-list-item,
body[data-theme] .mystery-shop-item,
body[data-theme] .mystery-shop-goods,
body[data-theme] .ph-search-item,
body[data-theme] .ph-comment,
body[data-theme] .ph-board {
  background: var(--skin-item-bg);
  border-color: var(--skin-item-border);
  color: var(--skin-panel-text);
}

body[data-theme] .msg-item {
  border-bottom-color: var(--skin-item-border);
}

body[data-theme] .rank-name,
body[data-theme] .mystery-shop-item-name,
body[data-theme] .mystery-shop-user-name,
body[data-theme] .ph-search-name,
body[data-theme] .ph-pet-name,
body[data-theme] .ph-comment-author,
body[data-theme] .msg-author {
  color: var(--skin-title);
}

body[data-theme] .rank-points,
body[data-theme] .rank-meta,
body[data-theme] .rank-no,
body[data-theme] .mystery-shop-item-meta,
body[data-theme] .mystery-shop-user-meta,
body[data-theme] .ph-search-meta,
body[data-theme] .ph-comment-meta,
body[data-theme] .ph-comment-time,
body[data-theme] .msg-time,
body[data-theme] .msg-meta,
body[data-theme] .msg-empty,
body[data-theme] .rank-empty,
body[data-theme] .ph-pets-empty,
body[data-theme] .ph-search-empty,
body[data-theme] .ph-comment-empty {
  color: var(--skin-sub);
}

body[data-theme] .rank-me-tag,
body[data-theme] .rank-badge,
body[data-theme] .msg-admin-tag,
body[data-theme] .ph-pet-tag,
body[data-theme] .ph-comment-admin {
  background: var(--skin-accent-soft);
  color: var(--skin-btn-text);
  border-color: transparent;
}

/* =====================================================================
   6) 按钮
   ===================================================================== */
body[data-theme] .rank-shop-btn,
body[data-theme] .msg-send-btn,
body[data-theme] .mystery-shop-confirm,
body[data-theme] .ph-btn-main,
body[data-theme] #pet-app .pet-adventure-link {
  background: var(--skin-btn-bg);
  border-color: transparent;
  color: var(--skin-btn-text);
}

body[data-theme] .mystery-shop-cancel,
body[data-theme] .mystery-shop-back,
body[data-theme] .ph-btn,
body[data-theme] .mystery-shop-tab {
  background: var(--skin-item-bg);
  border-color: var(--skin-item-border);
  color: var(--skin-title);
}

/* =====================================================================
   7) 输入控件
   ===================================================================== */
body[data-theme] .msg-textarea,
body[data-theme] .ph-search-input,
body[data-theme] .ph-comment-input,
body[data-theme] .mystery-shop-search {
  background: var(--skin-item-bg);
  border-color: var(--skin-item-border);
  color: var(--skin-panel-text);
}

body[data-theme] .msg-textarea::placeholder,
body[data-theme] .ph-search-input::placeholder,
body[data-theme] .ph-comment-input::placeholder {
  color: var(--skin-sub);
}

body[data-theme] .msg-login-hint {
  color: var(--skin-sub);
}

/* =====================================================================
   8) 进度 / 状态条
   ===================================================================== */
body[data-theme] .ph-sat-bar,
body[data-theme] .rank-charm-progress {
  background: var(--skin-item-bg);
  border-color: var(--skin-item-border);
  color: var(--skin-sub);
}
body[data-theme] .ph-sat-fill {
  background: var(--skin-btn-bg);
}

/* =====================================================================
   9) 钓鱼 / 切磋：hub.css 已给 panel 换色，这里补装饰与卡片
   ===================================================================== */
body[data-theme] .pf-overlay .pf-panel,
body[data-theme] .pet-battle-overlay .pf-panel {
  background-image: var(--skin-deco), var(--skin-panel);
  border-color: var(--skin-panel-border);
  color: var(--skin-panel-text);
}
body[data-theme] .pf-card,
body[data-theme] .pf-shop-item,
body[data-theme] .pf-result {
  background-color: var(--skin-item-bg);
  border-color: var(--skin-item-border);
}

/* =====================================================================
   10) 手机端：减弱装饰，保证不遮挡、不溢出
   ===================================================================== */
@media (max-width: 640px) {
  body[data-theme] .rank-card,
  body[data-theme] .mystery-shop-card,
  body[data-theme] .ph-card,
  body[data-theme] .pf-overlay .pf-panel,
  body[data-theme] .pet-battle-overlay .pf-panel {
    background-image: var(--skin-panel);
  }
}

/* 无障碍：尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  body[data-theme] .rank-card,
  body[data-theme] .mystery-shop-card,
  body[data-theme] .ph-card {
    animation: none;
  }
}