/* === Theme overrides =====================================================
 * Cohesion principle: html + body share same bg color.
 * Cards stay rgba(255,255,255,0.04) translucent — float on the theme bg.
 * Mobile safety: explicit background-color + no fixed attachment,
 * so iOS Safari rubber-band scroll never shows white.
 * ============================================================================ */

/* ============================================================================
 *  视窗背景层（事件 #23 修复：style.css 的 max-width:688px 让桌面端两侧露默认色）
 *  策略：用 html::before 固定全屏定位，z-index:-1 沉底
 *  不依赖 html 的 background 蔓延（被 max-width 影响 + 浏览器 quirk）
 * ============================================================================ */
html[data-theme]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
html[data-theme="classic"]::before { background: #2d1b69; }
html[data-theme="p222"]::before    { background: rgb(6, 63, 48); }
html[data-theme="neon"]::before    { background: linear-gradient(180deg, #2a0d5c 0%, #160628 100%); }
html[data-theme="lux"]::before     { background: linear-gradient(180deg, #3a1410 0%, #1a0606 100%); }

/* 43 个新主题：消费 --bg-page 变量 */
html[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"])::before {
  background: var(--bg-page, #1a1a1a);
}

/* ============== classic · 原版深紫 ============== */
/* Recolor p222 green buttons → purple/yellow (classic palette) */
body[data-theme="classic"] .net-wrapper .button,
body[data-theme="classic"] .links img,
body[data-theme="classic"] .notice .gg{
  filter: hue-rotate(285deg) saturate(0.85);
}


/* ============== p222 · 深绿森林 (1:1 p222navi.com) ============== */
/* p222 puts texture on .wraper (not body) — different from classic */
html[data-theme="p222"],
body[data-theme="p222"]{
  background: rgb(6, 63, 48) !important;
  background-image: none !important;
}
body[data-theme="p222"] .wraper{
  background-image: url("../img/main_bg-p222.png") !important;
  background-size: cover !important;
  background-repeat: repeat !important;
}
body[data-theme="p222"] .header{ background: transparent !important }
body[data-theme="p222"] .net-wrapper span{ color: #fff !important }
body[data-theme="p222"] .net-wrapper > p{ color: #fff !important }
body[data-theme="p222"] .net-wrapper ul li p{ color: #fff !important }
body[data-theme="p222"] .net-wrapper ul li p i{ color: #fff !important }
body[data-theme="p222"] .footer p{ color: #fff !important; opacity:.9 !important }
body[data-theme="p222"] .marquee-wrap p{ color: #fff !important }
/* No CSS filter on p222 buttons (they're native p222 green) */
body[data-theme="p222"] .net-wrapper .button,
body[data-theme="p222"] .links img,
body[data-theme="p222"] .notice .gg{ filter: none !important }


/* ============== neon · 霓虹紫 ============== */
html[data-theme="neon"]{
  background-color: #1a0938 !important;
  background-image: linear-gradient(180deg, #2a0d5c 0%, #160628 100%) !important;
}
body[data-theme="neon"]{
  background: transparent !important;
}
body[data-theme="neon"] .header{ background: transparent !important }
body[data-theme="neon"] .net-wrapper span{ color: #ff5cff !important }
body[data-theme="neon"] .net-wrapper > p{ color: #ff5cff !important }
/* Recolor p222 green buttons → magenta/purple */
body[data-theme="neon"] .net-wrapper .button,
body[data-theme="neon"] .links img,
body[data-theme="neon"] .notice .gg{
  filter: hue-rotate(290deg) saturate(1.3) brightness(1.05);
}


/* ============== lux · 暖金 ============== */
html[data-theme="lux"]{
  background-color: #2a1410 !important;
  background-image: linear-gradient(180deg, #3a1410 0%, #1a0606 100%) !important;
}
body[data-theme="lux"]{
  background: transparent !important;
}
body[data-theme="lux"] .header{ background: transparent !important }
body[data-theme="lux"] .net-wrapper span{ color: #d4af37 !important }
body[data-theme="lux"] .net-wrapper > p{ color: #d4af37 !important }
/* Recolor p222 green buttons → warm gold */
body[data-theme="lux"] .net-wrapper .button,
body[data-theme="lux"] .links img,
body[data-theme="lux"] .notice .gg{
  filter: sepia(0.7) saturate(1.4) hue-rotate(-15deg) brightness(1.1);
}


/* ============== 动效层主题色变量（被 animations.css 消费） ============== */
body[data-theme="classic"]{
  --glow-color: 251, 246, 0;        /* 黄 */
  --glow-strong: 0.55;
  --glow-soft:   0.18;
}
body[data-theme="p222"]{
  --glow-color: 255, 220, 130;      /* 浅金 */
  --glow-strong: 0.60;
  --glow-soft:   0.20;
}
body[data-theme="neon"]{
  --glow-color: 255, 92, 255;       /* 品红 */
  --glow-strong: 0.70;
  --glow-soft:   0.25;
}
body[data-theme="lux"]{
  --glow-color: 212, 175, 55;       /* 暖金 */
  --glow-strong: 0.65;
  --glow-soft:   0.22;
}


/* ============================================================================
 *  43 个新主题通用规则：消费 CSS 变量（由 ThemeRegistry 注入）
 *  排除 4 个精品（它们用上面硬编码的 filter 魔法）
 *  PREMIUM_THEMES = ["classic", "p222", "neon", "lux"]
 * ========================================================================= */
html[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]){
  background: var(--bg-page, #1a1a1a) !important;
  background-image: none !important;
}
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]){
  background: transparent !important;
  color: var(--text-primary, #ffffff);
}
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .wraper{
  background-image: var(--bg-wraper, none) !important;
  background-color: transparent !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .header{
  background: transparent !important;
}
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .net-wrapper span{
  color: var(--text-accent, var(--text-primary, #ffffff)) !important;
}
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .net-wrapper > p{
  color: var(--text-accent, var(--text-primary, #ffffff)) !important;
}
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .net-wrapper ul li p,
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .net-wrapper ul li p i{
  color: var(--text-primary, #ffffff) !important;
}
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .footer p,
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .copyright{
  color: var(--copyright-color, var(--text-primary, #ffffff)) !important;
  opacity: .9 !important;
}
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .marquee-wrap p{
  color: var(--marquee-color, var(--text-primary, #ffffff)) !important;
}

/* —— 按钮图片调色（事件#22 补齐：43 个新主题之前漏的 filter）—— */
/* p222 按钮原色是绿色，每个主题通过 --btn-filter 调整到自己的色相 */
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .net-wrapper .button,
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .links img,
body[data-theme]:not([data-theme="classic"]):not([data-theme="p222"]):not([data-theme="neon"]):not([data-theme="lux"]) .notice .gg{
  filter: var(--btn-filter, none) !important;
}