/* ==========================================================================
   洛可可城堡 · Rococo Castle Skin
   灵感：花知晓 Castle Series —— 白瓷浮雕外壳 / 香槟金描边 / 玫瑰内芯 / 苔绿丝绒衬
   --------------------------------------------------------------------------
   设计原则（防止廉价感的三条铁律）：
   1. 金色只用香槟金 #C9A55C，绝不用 #FFD700 类高饱和黄
   2. 浮雕靠「三层阴影 + 双层内高光」叠出来，不靠粗边框
   3. 纹样尺寸小、密度低 —— 极繁主义也要留呼吸，满铺即俗
   --------------------------------------------------------------------------
   覆盖式加载于 style.css 之后；加 data-castle="off" 到 <html> 可整体回退
   ========================================================================== */

/* 重要：原 style.css 只写了 :root[data-theme="xxx"]，但 data-theme 在 <body> 上，
   导致变量从未生效。这里统一挂在 html[data-castle="on"] 上：
   后加载 + 同特异性 → 稳定覆盖任何主题；关掉城堡皮肤即回退到原主题系统。 */
html[data-castle="on"] {
  /* 底色：奶油白瓷 */
  --bg:        #FDF7F1;
  --bg-2:      #F7EBE1;
  --surface:   #FFFCF8;
  --surface-2: #FBF2EA;

  /* 文字：可可棕（不用纯黑，纯黑配金会脏） */
  --text:   #46352F;
  --text-2: #8A7167;
  --text-3: #BCAA9C;

  /* 主色：香槟金 */
  --accent:      #C0954F;
  --accent-soft: #F5E7D4;
  --accent-2:    #DDA0AE;   /* 玫瑰粉，仅点缀 */
  --moss:        #8CA488;   /* 苔绿衬里，仅点缀 */

  /* 金阶（浮雕专用） */
  --gold-hi: #FBF0D6;
  --gold-1:  #E4CE9C;
  --gold-2:  #C0954F;
  --gold-3:  #8E6B31;

  --line:   rgba(192, 149, 79, .30);
  --line-2: rgba(192, 149, 79, .16);
  --shadow: 0 22px 46px -28px rgba(122, 88, 58, .48);

  --radius: 14px;
  --arch:   50% 50% var(--radius) var(--radius) / 30% 30% var(--radius) var(--radius);

  --font-display: "STZhongsong", "华文中宋", "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --font-orn:     "Cormorant Garamond", "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body:    "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* ============ 1. 全局：贝母珠光底 + 极细噪点 ============ */
html[data-castle="on"] body {
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(255, 248, 236, .95), transparent 62%),
    radial-gradient(900px  560px at 92% 6%,   rgba(246, 227, 232, .70), transparent 60%),
    radial-gradient(760px  520px at 50% 108%, rgba(224, 236, 220, .55), transparent 64%),
    var(--bg);
  background-attachment: fixed;
}

/* 珠光薄膜：叠一层几乎看不见的虹彩，去掉数码塑料感
   注意：section 是 z-index:2，所以这层必须 ≥3 才能覆盖内容；
   强度刻意压低（白 .26 / 噪点 .018），保证文字对比度不受影响 */
html[data-castle="on"] body::before {
  content: "";
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.26) 46%, rgba(255,246,252,.18) 52%, rgba(255,255,255,0) 62%),
    repeating-linear-gradient(122deg, rgba(192,149,79,.018) 0 2px, transparent 2px 7px);
  mix-blend-mode: soft-light;
}

/* ============ 2. 金箔文字 ============ */
.gilt,
html[data-castle="on"] .hero__title,
html[data-castle="on"] .days__n {
  background-image: linear-gradient(100deg,
    #9A7233 0%, #D9BE80 18%, #FCF3DC 32%, #C79C53 46%,
    #8E6B31 62%, #E4CE9C 78%, #9A7233 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gilt-sweep 9s linear infinite;
}
@keyframes gilt-sweep { to { background-position: 240% 0; } }

/* ============ 3. 通用浮雕卡（洛可可瓷片） ============ */
html[data-castle="on"] .card,
html[data-castle="on"] .note,
html[data-castle="on"] .stat,
html[data-castle="on"] .panel,
html[data-castle="on"] .ai-card,
html[data-castle="on"] .ai-drop,
html[data-castle="on"] .secret__note {
  position: relative;
  background: linear-gradient(158deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.95),
    inset 0  0 0 1px rgba(255,255,255,.50),
    inset 0 -1px 0 rgba(142,107,49,.09),
    0 16px 36px -26px rgba(122,88,58,.42);
  overflow: hidden;
}
/* 斜向珠光扫过 */
html[data-castle="on"] .card::after,
html[data-castle="on"] .note::after,
html[data-castle="on"] .panel::after,
html[data-castle="on"] .ai-card::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.62) 47%, rgba(255,250,240,.34) 53%, transparent 64%);
  transform: translateX(-130%);
  transition: transform .85s cubic-bezier(.22,.61,.36,1);
}
html[data-castle="on"] .card:hover::after,
html[data-castle="on"] .note:hover::after,
html[data-castle="on"] .panel:hover::after,
html[data-castle="on"] .ai-card:hover::after { transform: translateX(130%); }

html[data-castle="on"] .card:hover,
html[data-castle="on"] .note:hover,
html[data-castle="on"] .panel:hover,
html[data-castle="on"] .ai-card:hover {
  border-color: rgba(192,149,79,.62);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 26px 50px -24px rgba(122,88,58,.5),
    0 0 0 3px rgba(228,206,156,.20);
}

/* ============ 4. 拱形门窗（洛可可核心造型） ============ */
html[data-castle="on"] .arch {
  border-radius: var(--arch);
  overflow: hidden;
  border: 1px solid rgba(192,149,79,.42);
  box-shadow:
    inset 0 2px 6px rgba(142,107,49,.16),
    inset 0 0 0 4px rgba(255,255,255,.72),
    inset 0 0 0 5px rgba(192,149,79,.22);
}
html[data-castle="on"] .card__media {
  border-radius: var(--arch);
  overflow: hidden;
  border: 1px solid rgba(192,149,79,.42);
  box-shadow:
    inset 0 2px 6px rgba(142,107,49,.16),
    inset 0 0 0 3px rgba(255,255,255,.62),
    inset 0 0 0 4px rgba(192,149,79,.20);
}
html[data-castle="on"] .card__media .ph,
html[data-castle="on"] .card__media video,
html[data-castle="on"] .card__media img { border-radius: var(--arch); }

/* 标签胶囊 → 金线小牌 */
html[data-castle="on"] .chip {
  border: 1px solid rgba(192,149,79,.34);
  background: rgba(255,253,248,.8);
  color: var(--text-2);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-castle="on"] .chip:hover { border-color: rgba(192,149,79,.62); color: var(--text); }
html[data-castle="on"] .chip.is-on {
  background: linear-gradient(160deg, var(--gold-1), var(--gold-2));
  border-color: rgba(142,107,49,.5);
  color: #3E2E14;
  box-shadow: inset 0 1px 0 rgba(255,252,240,.85), 0 8px 18px -10px rgba(142,107,49,.5);
}

/* 分段按钮 → 瓷片 */
html[data-castle="on"] .seg { background: rgba(255,253,248,.75); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
html[data-castle="on"] .seg__btn { border-radius: 999px; color: var(--text-2); }
html[data-castle="on"] .seg__btn.is-on {
  background: linear-gradient(160deg, var(--gold-1), var(--gold-2));
  color: #3E2E14;
  box-shadow: inset 0 1px 0 rgba(255,252,240,.85), 0 6px 14px -8px rgba(142,107,49,.5);
}

/* 头像 → 金框圆章 */
html[data-castle="on"] .about__avatar,
html[data-castle="on"] .about__avatar-ph {
  border-radius: 50%;
  border: 1px solid rgba(192,149,79,.5);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.8),
    inset 0 0 0 5px rgba(192,149,79,.26),
    0 18px 38px -20px rgba(122,88,58,.5);
}
html[data-castle="on"] .about__avatar img { border-radius: 50%; }

/* 副标题 */
html[data-castle="on"] .sec-desc { color: var(--text-2); letter-spacing: .04em; }

/* 向下滚动提示 → 金珠 */
html[data-castle="on"] .hero__scroll span { background: var(--gold-2); opacity: .5; }

/* ============ 5. 导航：金线 + 毛玻璃瓷釉 ============ */
html[data-castle="on"] .nav {
  background: rgba(253, 247, 241, .82);
  backdrop-filter: blur(16px) saturate(1.14);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 10px 30px -22px rgba(122,88,58,.35);
}
html[data-castle="on"] .nav.is-stuck { box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 14px 34px -24px rgba(122,88,58,.45); }
html[data-castle="on"] .brand__mark {
  background: radial-gradient(circle at 32% 28%, var(--gold-hi), var(--gold-2) 68%, var(--gold-3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 8px -3px rgba(142,107,49,.55);
}
html[data-castle="on"] .nav__links a::after { background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); height: 1px; }

/* ============ 6. 首屏：城堡拱门 ============ */
html[data-castle="on"] .hero { position: relative; overflow: hidden; }

/* 拱门框：两道金线从顶部垂下，在上方收成拱 */
html[data-castle="on"] .hero::before {
  content: "";
  position: absolute; left: 50%; top: 6%;
  width: min(760px, 84vw); height: 76%;
  transform: translateX(-50%);
  border: 1px solid rgba(192,149,79,.34);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  pointer-events: none;
}
html[data-castle="on"] .hero::after {
  content: "";
  position: absolute; left: 50%; top: 6%;
  width: min(792px, 87vw); height: 76%;
  transform: translateX(-50%);
  border: 1px solid rgba(192,149,79,.16);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  pointer-events: none;
}
html[data-castle="on"] .hero__inner { position: relative; z-index: 2; }

/* 首屏光晕改为金色烛光 */
html[data-castle="on"] .hero__glow {
  background:
    radial-gradient(560px 340px at 50% 42%, rgba(255,236,204,.85), transparent 66%),
    radial-gradient(420px 300px at 22% 74%, rgba(246,222,228,.55), transparent 68%),
    radial-gradient(480px 320px at 80% 70%, rgba(222,234,218,.50), transparent 70%);
}

/* 标题：中宋 + 字距，配装饰英文 */
html[data-castle="on"] .hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .10em;
  line-height: 1.35;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.9));
}
html[data-castle="on"] .hero__title em { font-style: normal; }
html[data-castle="on"] .hero__sub { letter-spacing: .06em; color: var(--text-2); }

/* ============ 7. 按钮：金边浮雕 ============ */
html[data-castle="on"] .btn,
html[data-castle="on"] .btn--solid,
html[data-castle="on"] .btn--ghost {
  position: relative; overflow: hidden;
  border-radius: 999px;
  letter-spacing: .06em;
  transition: .3s cubic-bezier(.22,.61,.36,1);
}
html[data-castle="on"] .btn--solid {
  background: linear-gradient(160deg, var(--gold-1), var(--gold-2) 62%, var(--gold-3));
  color: #3C2C14;
  border: 1px solid rgba(142,107,49,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,252,240,.9),
    inset 0 -2px 6px rgba(142,107,49,.28),
    0 10px 24px -12px rgba(142,107,49,.6);
  text-shadow: 0 1px 0 rgba(255,248,226,.5);
}
html[data-castle="on"] .btn--solid:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 6px rgba(142,107,49,.3),
    0 16px 32px -12px rgba(142,107,49,.68),
    0 0 0 4px rgba(228,206,156,.22);
}
html[data-castle="on"] .btn--ghost {
  background: rgba(255,253,248,.72);
  color: var(--text);
  border: 1px solid rgba(192,149,79,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-castle="on"] .btn--ghost:hover {
  border-color: var(--gold-2);
  background: rgba(255,255,255,.95);
  transform: translateY(-2px);
}

/* ============ 8. 纪念日：拱形龛位 ============ */
html[data-castle="on"] .days { position: relative; }
html[data-castle="on"] .days__n {
  font-family: var(--font-orn), var(--font-display);
  font-size: clamp(64px, 13vw, 132px);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.85)) drop-shadow(0 10px 22px rgba(142,107,49,.22));
}
html[data-castle="on"] .days__l { letter-spacing: .34em; color: var(--text-2); font-size: 12.5px; }

/* ============ 9. 区块标题：玫瑰蝴蝶结中缝 ============ */
html[data-castle="on"] .sec-title,
html[data-castle="on"] .notes h2,
html[data-castle="on"] .tools h2,
html[data-castle="on"] .ai h2,
html[data-castle="on"] .about h2,
html[data-castle="on"] .wall h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .14em;
  text-align: center;
  position: relative;
}

/* ============ 10. 分隔：城堡塔楼剪影 + 珍珠线 ============ */
.castle-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 0 auto; padding: 26px 20px 6px;
  max-width: 720px; position: relative;
}
.castle-divider .pearl-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,149,79,.55) 22%, rgba(192,149,79,.55) 78%, transparent);
  position: relative;
}
.castle-divider .pearl-line::after {
  content: ""; position: absolute; inset: -3px 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 1.5px, transparent 2px) 0 0 / 13px 7px;
  opacity: .55;
}
.castle-divider svg { flex: none; opacity: .78; }

/* ============ 11. 装饰角花（四角卷草） ============ */
.rococo-corner { position: absolute; width: 78px; height: 78px; pointer-events: none; opacity: .5; }
.rococo-corner.tl { top: 8px;    left: 8px;  }
.rococo-corner.tr { top: 8px;    right: 8px; transform: scaleX(-1); }
.rococo-corner.bl { bottom: 8px; left: 8px;  transform: scaleY(-1); }
.rococo-corner.br { bottom: 8px; right: 8px; transform: scale(-1); }

/* ============ 12. 动效层：花瓣 / 光晕 ============ */
/* 层级说明：section=2，nav=60，secret=90，lb=100，toast=120
   花瓣 3 / 光晕 4 —— 飘在内容之上、导航与灯箱之下 */
#petalCanvas {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
}
#cursorGlow {
  position: fixed; z-index: 4; pointer-events: none;
  width: 460px; height: 460px; left: 0; top: 0;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,238,206,.42) 0%, rgba(255,238,206,.16) 34%, transparent 68%);
  opacity: 0; transition: opacity .5s;
  will-change: transform;
}
#cursorGlow.on { opacity: 1; }
@media (hover: none) { #cursorGlow { display: none; } }

/* 进场：拱门开窗 */
html[data-castle="on"] .hero__inner { animation: arch-open 1.5s cubic-bezier(.16,.84,.32,1) both; }
@keyframes arch-open {
  from { clip-path: inset(0 50% 0 50% round 50%); opacity: 0; }
  to   { clip-path: inset(0 0 0 0 round 0);       opacity: 1; }
}

/* 呼吸烛光 */
.candle {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #FFF2CE, rgba(228,206,156,0));
  animation: candle 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes candle {
  0%,100% { opacity: .25; transform: scale(1)   translateY(0); }
  50%     { opacity: .9;  transform: scale(1.5) translateY(-6px); }
}

/* ============ 13. 页脚 ============ */
html[data-castle="on"] .foot { border-top: 1px solid var(--line); }

/* ============ 14. 私密角落：午夜城堡 ============ */
html[data-castle="on"] #secret {
  background:
    radial-gradient(720px 520px at 50% 20%, #2B2A3E, #14131D 70%);
  color: #F3E9D6;
}
html[data-castle="on"] #secret .gilt {
  background-image: linear-gradient(100deg, #9A7233, #F3DEA8 30%, #FFF8E4 46%, #C79C53 64%, #8E6B31);
}

/* ============ 15. 无障碍 / 降级 ============ */
@media (prefers-reduced-motion: reduce) {
  html[data-castle="on"] .gilt,
  html[data-castle="on"] .candle,
  html[data-castle="on"] .hero__inner { animation: none; }
  #petalCanvas { display: none; }
}

/* 移动端：关掉重装饰，保性能与可读 */
@media (max-width: 640px) {
  #cursorGlow { display: none; }
  html[data-castle="on"] .hero::before,
  html[data-castle="on"] .hero::after { display: none; }
  .rococo-corner { width: 54px; height: 54px; opacity: .38; }
}