/* ============================================================
   Aurum Rosé · 多主题系统
   主题通过 <html data-theme="..."> 切换
   noir（默认） / porcelain / abyss / sakura / moss
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* ---------- 主题 0：暗夜金 ---------- */
:root{
  --serif:'Cormorant Garamond','Playfair Display',Georgia,'Songti SC',serif;
  --zh:'Noto Serif SC','Songti SC',serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --radius:30px;

  --bg-1:#0b080d; --bg-2:#09060b; --bg-3:#06050a;
  --glow-1:rgba(196,101,138,.26);
  --glow-2:rgba(112,78,182,.20);
  --glow-3:rgba(216,180,119,.15);

  --c1:#e79ab5; --c1-deep:#c4658a;
  --c2:#d8b477; --c2-lt:#f2dcb0;
  --c1-rgb:231,154,181;
  --c1-deep-rgb:196,101,138;
  --c2-rgb:216,180,119;

  --text:#f7eff2;
  --muted:rgba(247,239,242,.50);
  --muted-2:rgba(247,239,242,.32);

  --line:rgba(255,255,255,.075);
  --line-a:rgba(216,180,119,.24);
  --line-a2:rgba(216,180,119,.36);

  --card-1:rgba(255,255,255,.068);
  --card-2:rgba(255,255,255,.018);
  --card-bd:rgba(255,255,255,.075);
  --sheen-1:rgba(255,255,255,.10);
  --sheen-2:rgba(216,180,119,.09);

  --surf:rgba(255,255,255,.035);
  --surf-2:rgba(255,255,255,.07);
  --track:rgba(255,255,255,.07);

  --btn-grad:linear-gradient(135deg,#fbe6cd,#d8b477 46%,#b3864f);
  --btn-ink:#1a0e15;
  --btn-glow:rgba(216,180,119,.85);

  --title-grad:linear-gradient(180deg,#fff 0%,#f8e4ea 40%,#cba36d 100%);
  --title-grad-s:linear-gradient(180deg,#fff 0%,#f6dde4 46%,#c69a63 100%);
  --h1-shadow:0 30px 70px rgba(0,0,0,.5);

  --heart-grad:linear-gradient(135deg,#f7d3dd 0%,#c4658a 48%,#7d3355 100%);
  --heart-glow:rgba(196,101,138,.55);

  --grain:.055;
  --vig:rgba(0,0,0,.55);
  --nav-bg:rgba(7,5,10,.88);
  --nav-bg2:rgba(7,5,10,.42);
  --panel-bg:rgba(14,10,17,.85);
  --disc-bg:radial-gradient(circle at 50% 50%,#1d1a20 0 30%,#0b090e 31% 100%);
  --lb-bg:rgba(4,3,6,.94);
  --lb-ink:#fff;
  --shadow:0 50px 100px -50px rgba(0,0,0,.95);
  --ph-bg:#0d0a10;
  --ink-base:#07050a;
}

/* ---------- 主题 1：月白 · 朱砂 ---------- */
html[data-theme="porcelain"]{
  --bg-1:#fbf7f1; --bg-2:#f5efe6; --bg-3:#ece4d8;
  --glow-1:rgba(217,120,96,.15);
  --glow-2:rgba(120,140,160,.13);
  --glow-3:rgba(180,64,47,.08);

  --c1:#b4402f; --c1-deep:#8e2f22;
  --c2:#a67c4e; --c2-lt:#8a6440;
  --c1-rgb:180,64,47;
  --c1-deep-rgb:142,47,34;
  --c2-rgb:166,124,78;

  --text:#231d19;
  --muted:rgba(35,29,25,.56);
  --muted-2:rgba(35,29,25,.34);

  --line:rgba(35,29,25,.10);
  --line-a:rgba(180,64,47,.24);
  --line-a2:rgba(180,64,47,.46);

  --card-1:rgba(255,255,255,.80);
  --card-2:rgba(255,255,255,.52);
  --card-bd:rgba(255,255,255,.92);
  --sheen-1:rgba(255,255,255,.95);
  --sheen-2:rgba(180,64,47,.07);

  --surf:rgba(255,255,255,.62);
  --surf-2:rgba(255,255,255,.88);
  --track:rgba(35,29,25,.10);

  --btn-grad:linear-gradient(135deg,#cf5a45,#b4402f 48%,#8e2f22);
  --btn-ink:#fff9f5;
  --btn-glow:rgba(180,64,47,.38);

  --title-grad:linear-gradient(180deg,#2b2420 0%,#54372e 42%,#b4402f 100%);
  --title-grad-s:linear-gradient(180deg,#2b2420 0%,#54372e 46%,#b4402f 100%);
  --h1-shadow:0 24px 50px rgba(120,90,70,.20);

  --heart-grad:linear-gradient(135deg,#f3c6b8 0%,#c9503e 50%,#8e2f22 100%);
  --heart-glow:rgba(180,64,47,.32);

  --grain:.10;
  --vig:rgba(255,252,246,.55);
  --nav-bg:rgba(251,247,241,.92);
  --nav-bg2:rgba(251,247,241,.50);
  --panel-bg:rgba(255,255,255,.94);
  --disc-bg:radial-gradient(circle at 50% 50%,#e9e1d5 0 30%,#d2c8b8 31% 100%);
  --lb-bg:rgba(250,246,240,.97);
  --lb-ink:#2b2420;
  --shadow:0 40px 80px -50px rgba(90,68,52,.42);
  --ph-bg:#eee6db;
  --ink-base:#fbf7f1;
}

/* ---------- 主题 2：深海 ---------- */
html[data-theme="abyss"]{
  --bg-1:#050c14; --bg-2:#04090f; --bg-3:#02060b;
  --glow-1:rgba(72,180,190,.24);
  --glow-2:rgba(88,120,224,.20);
  --glow-3:rgba(120,220,230,.10);

  --c1:#7fe3e0; --c1-deep:#3fa9ad;
  --c2:#8fa8ff; --c2-lt:#c3d0ff;
  --c1-rgb:127,227,224;
  --c1-deep-rgb:63,169,173;
  --c2-rgb:143,168,255;

  --text:#e8f6f8;
  --muted:rgba(232,246,248,.50);
  --muted-2:rgba(232,246,248,.30);

  --line:rgba(160,220,230,.10);
  --line-a:rgba(127,227,224,.26);
  --line-a2:rgba(127,227,224,.50);

  --card-1:rgba(150,220,235,.07);
  --card-2:rgba(120,180,220,.02);
  --card-bd:rgba(160,220,235,.10);
  --sheen-1:rgba(200,245,250,.12);
  --sheen-2:rgba(127,227,224,.10);

  --surf:rgba(140,210,225,.05);
  --surf-2:rgba(140,210,225,.10);
  --track:rgba(160,220,230,.10);

  --btn-grad:linear-gradient(135deg,#c8faf6,#7fe3e0 45%,#37a3a8);
  --btn-ink:#032024;
  --btn-glow:rgba(127,227,224,.50);

  --title-grad:linear-gradient(180deg,#f4ffff 0%,#b8f0f0 42%,#5c9fd0 100%);
  --title-grad-s:linear-gradient(180deg,#f4ffff 0%,#b8f0f0 46%,#5c9fd0 100%);
  --h1-shadow:0 30px 70px rgba(0,20,30,.8);

  --heart-grad:linear-gradient(135deg,#c8faf6 0%,#3fa9ad 50%,#1c4a68 100%);
  --heart-glow:rgba(127,227,224,.42);

  --grain:.05;
  --vig:rgba(0,4,8,.60);
  --nav-bg:rgba(4,9,15,.90);
  --nav-bg2:rgba(4,9,15,.45);
  --panel-bg:rgba(8,16,24,.88);
  --disc-bg:radial-gradient(circle at 50% 50%,#0f1d26 0 30%,#060d13 31% 100%);
  --lb-bg:rgba(2,6,10,.95);
  --lb-ink:#e8f6f8;
  --shadow:0 50px 100px -50px rgba(0,0,0,.95);
  --ph-bg:#071019;
  --ink-base:#050c14;
}

/* ---------- 主题 3：樱花乳 ---------- */
html[data-theme="sakura"]{
  --bg-1:#fff9f6; --bg-2:#fdf0eb; --bg-3:#f8e6e8;
  --glow-1:rgba(224,107,139,.18);
  --glow-2:rgba(240,162,94,.14);
  --glow-3:rgba(255,190,200,.20);

  --c1:#e06b8b; --c1-deep:#b84f6d;
  --c2:#f0a25e; --c2-lt:#c97c3e;
  --c1-rgb:224,107,139;
  --c1-deep-rgb:184,79,109;
  --c2-rgb:240,162,94;

  --text:#4a3038;
  --muted:rgba(74,48,56,.56);
  --muted-2:rgba(74,48,56,.34);

  --line:rgba(74,48,56,.09);
  --line-a:rgba(224,107,139,.26);
  --line-a2:rgba(224,107,139,.48);

  --card-1:rgba(255,255,255,.84);
  --card-2:rgba(255,255,255,.58);
  --card-bd:rgba(255,255,255,.96);
  --sheen-1:rgba(255,255,255,.95);
  --sheen-2:rgba(224,107,139,.10);

  --surf:rgba(255,255,255,.68);
  --surf-2:rgba(255,255,255,.92);
  --track:rgba(74,48,56,.10);

  --btn-grad:linear-gradient(135deg,#ffbccb,#e06b8b 46%,#b84f6d);
  --btn-ink:#fffaf9;
  --btn-glow:rgba(224,107,139,.40);

  --title-grad:linear-gradient(180deg,#5a3a44 0%,#b84f6d 44%,#f0a25e 100%);
  --title-grad-s:linear-gradient(180deg,#5a3a44 0%,#b84f6d 48%,#f0a25e 100%);
  --h1-shadow:0 24px 50px rgba(180,110,130,.22);

  --heart-grad:linear-gradient(135deg,#ffd9e2 0%,#e06b8b 50%,#a8415f 100%);
  --heart-glow:rgba(224,107,139,.36);

  --grain:.09;
  --vig:rgba(255,250,247,.55);
  --nav-bg:rgba(255,249,246,.92);
  --nav-bg2:rgba(255,249,246,.52);
  --panel-bg:rgba(255,255,255,.94);
  --disc-bg:radial-gradient(circle at 50% 50%,#f3e2e4 0 30%,#dfc8cc 31% 100%);
  --lb-bg:rgba(255,250,247,.97);
  --lb-ink:#4a3038;
  --shadow:0 40px 80px -50px rgba(160,90,110,.38);
  --ph-bg:#f6e6e5;
  --ink-base:#fff9f6;
}

/* ---------- 主题 4：苔痕 · 铜 ---------- */
html[data-theme="moss"]{
  --bg-1:#0a1510; --bg-2:#07100c; --bg-3:#040b08;
  --glow-1:rgba(80,180,140,.20);
  --glow-2:rgba(185,129,87,.16);
  --glow-3:rgba(127,201,160,.10);

  --c1:#7fc9a0; --c1-deep:#4a9c74;
  --c2:#b98157; --c2-lt:#e0b48c;
  --c1-rgb:127,201,160;
  --c1-deep-rgb:74,156,116;
  --c2-rgb:185,129,87;

  --text:#eaf3ee;
  --muted:rgba(234,243,238,.48);
  --muted-2:rgba(234,243,238,.30);

  --line:rgba(180,220,200,.09);
  --line-a:rgba(127,201,160,.24);
  --line-a2:rgba(127,201,160,.46);

  --card-1:rgba(160,220,190,.062);
  --card-2:rgba(120,180,150,.018);
  --card-bd:rgba(180,220,200,.09);
  --sheen-1:rgba(200,245,220,.11);
  --sheen-2:rgba(185,129,87,.10);

  --surf:rgba(150,210,180,.05);
  --surf-2:rgba(150,210,180,.09);
  --track:rgba(180,220,200,.09);

  --btn-grad:linear-gradient(135deg,#d6f0e0,#7fc9a0 46%,#4a9c74);
  --btn-ink:#062018;
  --btn-glow:rgba(127,201,160,.46);

  --title-grad:linear-gradient(180deg,#f4fdf8 0%,#c9ecd9 42%,#b98157 100%);
  --title-grad-s:linear-gradient(180deg,#f4fdf8 0%,#c9ecd9 46%,#b98157 100%);
  --h1-shadow:0 30px 70px rgba(0,16,8,.85);

  --heart-grad:linear-gradient(135deg,#d6f0e0 0%,#4a9c74 50%,#2c5a45 100%);
  --heart-glow:rgba(127,201,160,.42);

  --grain:.05;
  --vig:rgba(0,8,4,.58);
  --nav-bg:rgba(8,18,13,.90);
  --nav-bg2:rgba(8,18,13,.45);
  --panel-bg:rgba(10,22,16,.88);
  --disc-bg:radial-gradient(circle at 50% 50%,#14241b 0 30%,#080f0b 31% 100%);
  --lb-bg:rgba(3,9,6,.95);
  --lb-ink:#eaf3ee;
  --shadow:0 50px 100px -50px rgba(0,0,0,.95);
  --ph-bg:#081410;
  --ink-base:#0a1510;
}

/* ============================================================
   基础
   ============================================================ */
html{ scroll-behavior:smooth; background:var(--ink-base); }

body{
  font-family:var(--zh);
  color:var(--text);
  background:var(--ink-base);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.7;
  padding-bottom:104px;
  transition:background .7s var(--ease), color .7s var(--ease);
}

::selection{ background:rgba(var(--c1-rgb),.28); color:var(--text); }

/* ---------- 背景层 ---------- */
.bg-layer{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  transition:background .9s var(--ease);
  background:
    radial-gradient(1200px 760px at 12% -12%, var(--glow-1), transparent 62%),
    radial-gradient(1000px 820px at 92% 4%, var(--glow-2), transparent 64%),
    radial-gradient(1100px 900px at 48% 112%, var(--glow-3), transparent 62%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-3) 100%);
}
.bg-grain{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  opacity:var(--grain); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}
.bg-vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  transition:background .9s var(--ease);
  background:radial-gradient(circle at 50% 45%, transparent 42%, var(--vig) 100%);
}
#stars{ position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5; }

#cursorGlow{
  position:fixed; width:520px; height:520px; border-radius:50%;
  pointer-events:none; z-index:-1; opacity:0; transition:opacity .6s;
  background:radial-gradient(circle, rgba(var(--c2-rgb),.10), transparent 65%);
  left:0; top:0;
  transform:translate3d(-9999px,-9999px,0);
  will-change:transform;
}

/* ---------- 滚动进度 ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:200;
  background:rgba(var(--c1-rgb),.08);
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--c1-deep),var(--c2-lt));
  box-shadow:0 0 14px rgba(var(--c2-rgb),.8);
  transition:width .12s linear;
}

/* ---------- 顶部极简栏（品牌 + 主题） ---------- */
.topbar-min{
  position:fixed; top:0; left:0; right:0; z-index:125;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px clamp(18px,4vw,54px);
  transition:.6s var(--ease);
  border-bottom:1px solid transparent;
  pointer-events:none;
}
.topbar-min > *{ pointer-events:auto; }
.topbar-min.scrolled{
  padding-top:12px; padding-bottom:12px;
  background:linear-gradient(180deg, var(--nav-bg), var(--nav-bg2));
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--line);
}
.brand{
  display:flex; align-items:baseline; gap:10px; text-decoration:none;
  color:var(--text); white-space:nowrap; flex:0 0 auto;
}
.brand .b-mark{
  font-family:var(--serif); font-size:1.4rem; color:var(--c2-lt);
  letter-spacing:.04em; font-style:italic; transition:color .6s;
}
.brand .b-sub{
  font-size:.62rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--muted-2); font-family:var(--serif);
}
.nav-tools{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

/* ---------- 底部悬浮胶囊导航 ---------- */
.nav{
  position:fixed; left:50%; bottom:22px; top:auto;
  transform:translateX(-50%);
  z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:8px 10px;
  max-width:calc(100vw - 32px);
  border-radius:999px;
  background:linear-gradient(180deg, var(--nav-bg), var(--nav-bg2));
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--line);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transition:.6s var(--ease);
}
.nav.scrolled{
  bottom:16px;
  border-color:var(--line-a);
  box-shadow:0 32px 70px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.09);
}
.nav-links{
  display:flex; gap:2px; list-style:none; align-items:center;
  overflow-x:auto; scrollbar-width:none;
  min-width:0; justify-content:center;
}
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{
  display:block; padding:9px 16px; border-radius:999px;
  color:var(--muted); text-decoration:none; font-size:.82rem;
  letter-spacing:.14em; white-space:nowrap; transition:.45s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{
  color:var(--c2-lt);
  background:rgba(var(--c2-rgb),.10);
  box-shadow:inset 0 0 0 1px rgba(var(--c2-rgb),.26);
}

/* ---------- 通用 ---------- */
.wrap{ max-width:1140px; margin:0 auto; padding:0 clamp(18px,4vw,54px); }
section{ position:relative; }
.sec{ padding:clamp(80px,12vh,150px) 0; }
.sec-head{ text-align:center; margin-bottom:clamp(40px,6vh,72px); }
.eyebrow{
  font-family:var(--serif); font-style:italic; font-size:.76rem;
  letter-spacing:.46em; text-transform:uppercase; color:var(--c2); opacity:.92;
  transition:color .6s;
}
.sec-title{
  font-size:clamp(1.85rem,4.4vw,3rem); font-weight:700;
  letter-spacing:.03em; margin:16px 0 0; line-height:1.32;
  background:var(--title-grad-s);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sec-title em{
  font-family:var(--serif); font-style:italic; font-weight:600;
  -webkit-text-fill-color:transparent;
}
.rule{
  width:70px; height:1px; margin:22px auto 0;
  background:linear-gradient(90deg,transparent,var(--c2),transparent);
  position:relative;
}
.rule::after{
  content:"◆"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); font-size:7px; color:var(--c2);
  background:var(--ink-base); padding:0 6px;
}
.sec-sub{
  color:var(--muted); font-size:.93rem; line-height:2.05;
  max-width:560px; margin:22px auto 0; letter-spacing:.03em;
}

.card{
  position:relative; border-radius:var(--radius);
  background:linear-gradient(160deg, var(--card-1), var(--card-2));
  border:1px solid var(--card-bd);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:background .7s var(--ease), border-color .7s var(--ease);
}
/* 每张卡一个 backdrop-filter = 一个 GPU 模糊图层。
   平面版同时可见 16 张卡，安卓 WebView 会直接掉到个位数帧。
   这里不加模糊，靠 --card-1/--card-2 半透明层叠出磨砂感，
   视觉几乎无差，省掉 16 个实时模糊。 */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  /* 大屏桌面端才开真模糊，AMD/Intel 核显也扛得住 */
  @media (min-width:900px) and (pointer:fine){
    .card{
      backdrop-filter:blur(20px) saturate(140%);
      -webkit-backdrop-filter:blur(20px) saturate(140%);
    }
  }
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(135deg, var(--sheen-1), transparent 30%, transparent 72%, var(--sheen-2));
  opacity:.55;
}
.card > *{ position:relative; z-index:1; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 38px; border:none; border-radius:999px; cursor:pointer;
  font-family:var(--zh); font-size:.92rem; font-weight:700; letter-spacing:.14em;
  text-decoration:none; transition:.5s var(--ease); position:relative; overflow:hidden;
}
.btn-gold{
  color:var(--btn-ink);
  background:var(--btn-grad);
  box-shadow:0 22px 46px -20px var(--btn-glow), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 30px 60px -20px var(--btn-glow); }
.btn-line{
  color:var(--text); background:var(--surf);
  box-shadow:inset 0 0 0 1px var(--line-a);
  
}
.btn-line:hover{ transform:translateY(-3px); background:var(--surf-2); box-shadow:inset 0 0 0 1px var(--line-a2); }
.btn-ghost{
  color:var(--muted); background:transparent;
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn-ghost:hover{ color:var(--text); box-shadow:inset 0 0 0 1px var(--line-a); }
.btn:active{ transform:scale(.975); }

/* ---------- HERO ---------- */
.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:120px 0 120px; overflow:hidden;
}
.hero-inner{ position:relative; z-index:2; max-width:820px; margin:0 auto; padding:0 22px; }

.orbit{
  position:relative; width:min(300px,64vw); aspect-ratio:1;
  margin:0 auto clamp(34px,6vh,58px);
}
.orbit .ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(var(--c2-rgb),.18);
  animation:spin 34s linear infinite;
}
.orbit .ring::before{
  content:""; position:absolute; top:-2.5px; left:50%;
  width:5px; height:5px; border-radius:50%; background:var(--c2-lt);
  box-shadow:0 0 12px 2px rgba(var(--c2-rgb),.9);
}
.orbit .ring.r2{ inset:14%; border-color:rgba(var(--c1-rgb),.20); animation-duration:22s; animation-direction:reverse; }
.orbit .ring.r2::before{ background:var(--c1); box-shadow:0 0 12px 2px rgba(var(--c1-rgb),.9); }
.orbit .ring.r3{ inset:28%; border-color:var(--line); animation-duration:15s; }
.orbit .ring.r3::before{ width:3.5px; height:3.5px; background:var(--text); box-shadow:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.heart-core{
  position:absolute; top:50%; left:50%; width:34%; aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(-45deg);
  animation:beat 3.6s var(--ease) infinite;
}
.heart-core i{
  position:absolute; width:100%; height:100%;
  background:var(--heart-grad);
  border-radius:50% 50% 0 50%;
  box-shadow:0 0 70px 8px var(--heart-glow), inset 0 0 30px rgba(255,255,255,.18);
  transition:background .8s var(--ease);
}
.heart-core i:nth-child(2){ left:-100%; border-radius:50% 50% 50% 0; }
.heart-core i:nth-child(3){ top:-100%; border-radius:50% 0 50% 50%; }
.heart-core i:nth-child(4){ left:-100%; top:-100%; border-radius:0 50% 50% 50%; }
@keyframes beat{
  0%,100%{ transform:translate(-50%,-50%) rotate(-45deg) scale(1); }
  18%{ transform:translate(-50%,-50%) rotate(-45deg) scale(1.07); }
  36%{ transform:translate(-50%,-50%) rotate(-45deg) scale(1); }
  54%{ transform:translate(-50%,-50%) rotate(-45deg) scale(1.045); }
}

.hero h1{
  font-size:clamp(2.3rem,7.4vw,4.6rem); font-weight:700;
  line-height:1.14; letter-spacing:.02em; margin:0 0 18px;
  background:var(--title-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:var(--h1-shadow);
}
.hero h1 em{
  font-family:var(--serif); font-style:italic; font-weight:600;
  -webkit-text-fill-color:transparent;
}
.hero .hero-en{
  font-family:var(--serif); font-style:italic; font-size:clamp(.92rem,2vw,1.15rem);
  letter-spacing:.30em; color:var(--c2); opacity:.85; margin-bottom:26px;
}
.typing-line{
  min-height:30px; font-size:.98rem; letter-spacing:.09em;
  color:var(--muted); font-weight:600;
}
.typing-line .cursor{
  display:inline-block; width:1px; height:1em; margin-left:3px;
  background:var(--c2-lt); vertical-align:-2px;
  animation:blink 1.05s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:clamp(34px,6vh,52px); }

.scroll-hint{
  position:absolute; left:50%; bottom:112px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  color:var(--muted-2); font-size:.6rem; letter-spacing:.42em; text-transform:uppercase;
  font-family:var(--serif);
}
.scroll-hint .line{
  width:1px; height:44px;
  background:linear-gradient(180deg,var(--c2),transparent);
  animation:dropLine 2.4s var(--ease) infinite;
}
@keyframes dropLine{
  0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
  40%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  70%{ transform:scaleY(1); transform-origin:bottom; opacity:1; }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
}

/* ---------- 时光 ---------- */
.time-deck{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.time-card{ padding:clamp(30px,4vw,46px) clamp(22px,3vw,38px); text-align:center; }
.time-card .tc-top{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px; }
.time-card .tc-mark{ font-size:1.05rem; color:var(--c2); opacity:.9; }
.time-card .tc-name{ font-size:.98rem; letter-spacing:.24em; color:var(--text); font-weight:700; }
.time-card .tc-en{
  display:block; font-family:var(--serif); font-style:italic; font-size:.72rem;
  letter-spacing:.3em; color:var(--muted-2); margin-bottom:26px; text-transform:uppercase;
}
.digits{ display:flex; justify-content:center; gap:clamp(6px,1.6vw,14px); flex-wrap:wrap; }
.digit{ min-width:clamp(50px,13vw,66px); }
.digit .d-num{
  font-family:var(--serif); font-size:clamp(1.9rem,6vw,2.7rem); font-weight:600;
  line-height:1.05; color:var(--text); font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  text-shadow:0 0 28px rgba(var(--c2-rgb),.30);
}
.digit .d-lab{
  font-size:.63rem; letter-spacing:.26em; color:var(--muted-2); margin-top:9px;
}
.time-note{
  margin-top:30px; text-align:center; font-size:.9rem; color:var(--muted);
  letter-spacing:.06em; line-height:2.1;
}
.time-note b{ color:var(--c2-lt); font-family:var(--serif); font-size:1.16rem; letter-spacing:.02em; }

/* ---------- 异地天气（单卡双城） ---------- */
.dcard{
  padding:clamp(24px,3.4vw,38px) clamp(22px,3.4vw,40px);
  margin-top:clamp(24px,4vh,40px);
  position:relative;
  overflow:hidden;
}
/* 左上角一抹暖光 */
.dcard::before{
  content:"";
  position:absolute; inset:-40% 55% 40% -20%;
  background:radial-gradient(circle at 30% 30%, rgba(var(--c1-rgb),.14), transparent 62%);
  pointer-events:none; z-index:0;
}
.dcard::after{
  content:"";
  position:absolute; inset:40% -20% -40% 55%;
  background:radial-gradient(circle at 70% 70%, rgba(var(--c2-rgb),.13), transparent 62%);
  pointer-events:none; z-index:0;
}
.dcard > *{ position:relative; z-index:1; }

/* 顶行 */
.dc-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding-bottom:clamp(14px,2vw,20px);
  border-bottom:1px solid var(--line);
}
.dc-eyebrow{
  font-family:var(--serif); font-style:italic;
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--c2); opacity:.85;
}
.dc-gap{
  font-family:var(--serif); font-style:italic;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2);
}
.dc-gap b{
  font-family:var(--serif); font-style:normal;
  font-size:.92rem; letter-spacing:.04em; color:var(--c2-lt);
  margin-right:2px;
}

/* 双城 */
.dc-pair{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(8px,2vw,26px);
  padding-top:clamp(18px,2.6vw,26px);
}
.dc-side{ display:flex; flex-direction:column; gap:6px; }
.dc-side.right{ align-items:flex-end; text-align:right; }

.dc-city{
  font-family:var(--zh);
  font-size:.74rem; letter-spacing:.26em;
  color:var(--muted); font-weight:600;
  text-transform:none;
}

/* 温度：改用衬线体、大字号、渐变填充 */
.dc-temp{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-style:normal; font-weight:600;
  font-size:clamp(2.9rem,9vw,4.4rem);
  line-height:.92; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(170deg,#ffffff 0%, var(--c2-lt) 48%, var(--c1) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 22px rgba(var(--c2-rgb),.28));
}
.dc-temp i{
  font-style:normal; font-size:.36em; font-weight:400;
  vertical-align:.62em; margin-left:2px;
  -webkit-text-fill-color:var(--c2);
  opacity:.8;
}

.dc-foot{
  display:flex; align-items:baseline; gap:10px;
  font-size:.7rem; letter-spacing:.16em;
}
.dc-side.right .dc-foot{ flex-direction:row-reverse; }
.dc-desc{ color:var(--muted); }
.dc-clock{
  font-family:var(--serif); font-style:italic;
  font-size:.74rem; letter-spacing:.08em;
  color:var(--muted-2);
}

/* 中缝：细线 + 心跳符号 */
.dc-mid{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:0 clamp(2px,1vw,12px);
}
.dc-thread{
  width:1px; height:clamp(18px,3.4vh,30px);
  background:linear-gradient(180deg,transparent,var(--line-a2),transparent);
}
.dc-glyph{
  font-size:.82rem; color:var(--c2);
  filter:drop-shadow(0 0 9px rgba(var(--c2-rgb),.75));
  animation:beat 3.6s var(--ease) infinite;
  transform-origin:center;
  -webkit-text-fill-color:currentColor;
}

@media (max-width:600px){
  .dc-pair{
    grid-template-columns:1fr;
    gap:clamp(10px,3vw,16px);
    justify-items:center;
  }
  .dc-side,
  .dc-side.right{ align-items:center; text-align:center; }
  .dc-side.right .dc-foot{ flex-direction:row; }
  .dc-mid{ flex-direction:row; width:100%; }
  .dc-thread{
    width:clamp(28px,12vw,64px); height:1px;
    background:linear-gradient(90deg,transparent,var(--line-a2),transparent);
  }
  .dc-temp{ font-size:clamp(2.4rem,13vw,3.2rem); }
}

/* ---------- 爱意数据 ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; }
.stat{ padding:32px 20px; text-align:center; transition:.55s var(--ease); }
.stat:hover{ transform:translateY(-7px); border-color:var(--line-a2); }
.stat .s-ico{ font-size:1.15rem; color:var(--c2); opacity:.85; }
.stat .s-val{
  font-family:var(--serif); font-size:clamp(1.9rem,5vw,2.5rem); font-weight:600;
  color:var(--text); margin:14px 0 6px; font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.stat .s-lab{ font-size:.7rem; letter-spacing:.28em; color:var(--muted-2); }

.meter{ margin-top:22px; padding:clamp(26px,4vw,40px); }
.meter .m-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.8rem; letter-spacing:.2em; color:var(--muted); margin-bottom:18px;
}
.meter .m-head b{ font-family:var(--serif); font-size:1.3rem; color:var(--c2-lt); letter-spacing:.02em; }
.m-track{ height:5px; border-radius:99px; background:var(--track); overflow:hidden; position:relative; }
.m-fill{
  height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--c1-deep),var(--c1) 45%,var(--c2-lt));
  box-shadow:0 0 22px rgba(var(--c2-rgb),.7);
  transition:width 1.6s var(--ease);
}

/* ---------- 相册 ---------- */
.album-bar{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:34px; }
.album-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(140px,22vw,250px),1fr));
  gap:clamp(10px,1.6vw,18px);
}
.ph{
  position:relative; aspect-ratio:1; border-radius:20px; overflow:hidden;
  cursor:zoom-in; background:var(--ph-bg);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.55);
  transition:.65s var(--ease);
  border:1px solid var(--line);
  animation:phIn .8s var(--ease) both;
}
@keyframes phIn{ from{ opacity:0; transform:translateY(22px) scale(.97); } to{ opacity:1; transform:none; } }
.ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:1.1s var(--ease); filter:saturate(.94) contrast(1.03);
}
.ph:hover{ transform:translateY(-6px); border-color:var(--line-a2); }
.ph:hover img{ transform:scale(1.07); filter:saturate(1.06) contrast(1.05); }
.ph .ph-del{
  position:absolute; top:9px; right:9px; width:28px; height:28px;
  border-radius:50%; border:1px solid rgba(255,255,255,.30);
  background:rgba(10,8,12,.72);
  color:#fff; font-size:.85rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:.35s; z-index:2;
}
.ph:hover .ph-del{ opacity:1; }
.ph .ph-del:hover{ background:var(--c1-deep); border-color:transparent; }
.album-empty{
  grid-column:1/-1; padding:clamp(50px,10vh,90px) 22px; text-align:center;
  border:1px dashed var(--line-a); border-radius:24px;
  color:var(--muted); cursor:pointer; transition:.45s var(--ease);
  background:var(--surf); line-height:2.1; font-size:.92rem;
}
.album-empty:hover{ border-color:var(--line-a2); color:var(--c2-lt); background:var(--surf-2); }

/* 灯箱 */
.lightbox{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:center; justify-content:center;
  background:var(--lb-bg);
  
  padding:5vh 5vw;
}
.lightbox.on{ display:flex; animation:fadeIn .4s ease; }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.lightbox img{
  max-width:92vw; max-height:88vh; border-radius:12px;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.6);
  animation:lbIn .55s var(--ease);
}
@keyframes lbIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
.lightbox .lb-close{
  position:absolute; top:24px; right:26px; width:42px; height:42px;
  border-radius:50%; border:1px solid var(--line-a);
  background:var(--surf); color:var(--lb-ink); font-size:1.2rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.3s;
}
.lightbox .lb-close:hover{ background:rgba(var(--c1-rgb),.20); border-color:var(--c1); }

/* ---------- 愿望 ---------- */
.wish-form{ display:flex; gap:10px; max-width:620px; margin:0 auto 30px; }
.wish-form input{
  flex:1; padding:16px 24px; border-radius:999px;
  border:1px solid var(--line-a);
  background:var(--surf);
  color:var(--text); font-family:inherit; font-size:.94rem; letter-spacing:.04em;
  outline:none; transition:.4s;
}
.wish-form input::placeholder{ color:var(--muted-2); }
.wish-form input:focus{
  border-color:var(--line-a2);
  background:var(--surf-2);
  box-shadow:0 0 0 4px rgba(var(--c2-rgb),.09);
}
.wish-form button{
  padding:0 32px; border:none; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.86rem; letter-spacing:.16em;
  color:var(--btn-ink); background:var(--btn-grad);
  box-shadow:0 16px 34px -16px var(--btn-glow);
  transition:.45s var(--ease);
}
.wish-form button:hover{ transform:translateY(-2px); }

.wish-list{ display:flex; flex-direction:column; gap:10px; max-width:680px; margin:0 auto; }
.wish{
  display:flex; align-items:center; gap:16px;
  padding:18px 22px; border-radius:18px;
  background:var(--surf);
  border:1px solid var(--line);
  transition:.45s var(--ease); animation:phIn .6s var(--ease) both;
}
.wish:hover{ background:var(--surf-2); border-color:var(--line-a); }
.wish .wk{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto; cursor:pointer;
  border:1.5px solid var(--line-a2); position:relative; transition:.35s;
}
.wish .wk.done{
  border-color:transparent;
  background:linear-gradient(135deg,var(--c1-deep),var(--c2));
  box-shadow:0 0 16px rgba(var(--c2-rgb),.5);
}
.wish .wk.done::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:11px; color:var(--btn-ink); font-weight:800;
}
.wish .wt{ flex:1; font-size:.95rem; letter-spacing:.03em; color:var(--text); line-height:1.65; }
.wish .wt.done{ color:var(--muted-2); text-decoration:line-through; text-decoration-color:var(--line-a2); }
.wish .wd{
  background:none; border:none; color:var(--muted-2); cursor:pointer;
  font-size:1rem; transition:.3s; padding:4px;
}
.wish .wd:hover{ color:var(--c1); transform:rotate(90deg); }
.wish-empty{ text-align:center; color:var(--muted-2); font-size:.88rem; letter-spacing:.08em; line-height:2.2; padding:30px 0; }

/* ---------- 游戏区 ---------- */
.game-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(clamp(240px,30vw,300px),1fr));
  gap:clamp(14px,2vw,22px);
}
.game-card{
  display:block; text-decoration:none; color:inherit;
  padding:clamp(28px,3.6vw,38px) clamp(22px,3vw,30px);
  border-radius:24px; position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--card-1), var(--card-2));
  border:1px solid var(--card-bd);
  transition:.6s var(--ease);
  min-height:210px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.game-card::before{
  content:""; position:absolute; inset:-40% -40% auto auto; width:220px; height:220px;
  border-radius:50%; opacity:0; transition:.7s var(--ease);
  background:radial-gradient(circle, rgba(var(--c2-rgb),.30), transparent 68%);
  filter:blur(8px);
}
.game-card:hover{
  transform:translateY(-8px);
  border-color:var(--line-a2);
  box-shadow:0 44px 80px -40px rgba(0,0,0,.5), inset 0 0 0 1px var(--line-a);
}
.game-card:hover::before{ opacity:1; }
.game-card .g-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; z-index:1; }
.game-card .g-ico{
  font-size:1.5rem; line-height:1;
  filter:drop-shadow(0 0 16px rgba(var(--c2-rgb),.6));
}
.game-card .g-no{
  font-family:var(--serif); font-style:italic; font-size:.78rem;
  letter-spacing:.2em; color:var(--muted-2);
}
.game-card h3{
  font-size:1.16rem; font-weight:700; letter-spacing:.06em; margin:26px 0 10px;
  color:var(--text); position:relative; z-index:1;
}
.game-card p{
  font-size:.82rem; line-height:1.9; color:var(--muted);
  letter-spacing:.03em; position:relative; z-index:1; margin-bottom:24px;
}
.game-card .g-go{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--c2); font-family:var(--serif); font-style:italic;
  position:relative; z-index:1; transition:.5s var(--ease);
}
.game-card:hover .g-go{ gap:16px; color:var(--c2-lt); }

/* ---------- 情书 ---------- */
.letter{
  max-width:760px; margin:0 auto; padding:clamp(38px,6vw,70px) clamp(24px,5vw,64px);
  text-align:center; position:relative;
}
.letter .q{
  font-family:var(--serif); font-size:4.2rem; line-height:.7;
  color:rgba(var(--c2-rgb),.28); margin-bottom:26px; display:block;
}
.letter p{
  font-size:clamp(1rem,2.2vw,1.18rem); line-height:2.4; letter-spacing:.06em;
  color:var(--text);
}
.letter .sign{
  margin-top:34px; font-family:var(--serif); font-style:italic;
  font-size:1rem; letter-spacing:.18em; color:var(--c2);
}

/* ---------- 页脚 ---------- */
.foot{
  text-align:center; padding:clamp(50px,8vh,80px) 22px 40px;
  border-top:1px solid var(--line);
  margin-top:40px;
}
.foot .f-line{
  font-family:var(--serif); font-style:italic; font-size:.78rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--muted-2);
}
.foot .f-name{ color:var(--c2); }
.foot .f-note{
  margin-top:14px; font-size:.78rem; letter-spacing:.16em; color:var(--muted-2);
}

/* ---------- 音乐播放器（竖直展开） ---------- */
.player{
  position:fixed; right:22px; bottom:92px; z-index:160;
  display:flex; flex-direction:column; align-items:center; gap:0;
  transition:.65s var(--ease);
}
.player .disc{
  width:56px; height:56px; border-radius:50%; flex:0 0 auto; cursor:pointer;
  position:relative; transition:.5s var(--ease); z-index:2;
  background:var(--disc-bg);
  box-shadow:0 12px 34px -10px rgba(0,0,0,.55), inset 0 0 0 1px var(--line-a);
}
.player .disc::before{
  content:""; position:absolute; inset:4px; border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 1.4px, rgba(255,255,255,.06) 1.4px 2px);
}
.player .disc::after{
  content:"♥"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:19px; height:19px; border-radius:50%; font-size:9px; line-height:19px;
  text-align:center; color:var(--btn-ink);
  background:var(--btn-grad);
}
.player .disc:hover{ transform:translateY(-3px); border-color:var(--line-a2); }
.player.playing .disc{ animation:spin 7s linear infinite; }

/* 竖直面板：从唱片上方升起 */
.player .panel{
  display:flex; flex-direction:column; align-items:stretch; gap:6px;
  width:66px; max-height:0; opacity:0; overflow:hidden; pointer-events:none;
  margin-bottom:0; padding:0 8px;
  border-radius:22px;
  background:var(--panel-bg);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid transparent;
  transition:max-height .55s var(--ease), opacity .35s var(--ease),
             padding .55s var(--ease), margin .55s var(--ease),
             border-color .4s var(--ease);
}
.player.open .panel{
  max-height:260px; opacity:1; pointer-events:auto;
  padding:12px 8px; margin-bottom:10px;
  border-color:var(--line-a);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07);
}
.player .panel .p-title{
  font-family:var(--zh); font-size:.6rem; line-height:1.55;
  letter-spacing:.02em; color:var(--muted); text-align:center;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; padding:0 2px; margin-bottom:2px;
  min-height:2.9em;
}
.player .panel .p-div{
  width:22px; height:1px; margin:2px auto;
  background:linear-gradient(90deg,transparent,var(--line-a2),transparent);
}
.player .panel .p-div:last-of-type{ display:none; }
.player .panel button{
  width:100%; background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:.92rem; padding:7px 0; transition:.3s; border-radius:10px;
  line-height:1;
}
.player .panel button:hover{ color:var(--c2-lt); background:var(--surf-2); }
/* 面板内关闭按钮：面板展开时出现在顶部右侧 */
.player .panel .p-close{
  position:absolute; top:2px; right:2px; width:16px; height:16px;
  border-radius:50%; border:1px solid var(--line-a);
  background:transparent; color:var(--muted);
  font-size:.55rem; line-height:1; display:none;
  align-items:center; justify-content:center; cursor:pointer;
  padding:0; z-index:3;
}
.player.open .panel{ position:relative; }
.player.open .panel .p-close{ display:flex; }
.player .panel .p-close:hover{ color:var(--c1); border-color:var(--c1); }
.player .eq{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:2px; height:13px; margin:4px auto 0;
  writing-mode:horizontal-tb;
}
.player .eq span{
  width:13px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--c1-deep),var(--c2-lt));
  transform:scaleX(.28); transform-origin:left center;
}
.player.playing .eq span{ animation:eqH .62s ease-in-out infinite; }
.player.playing .eq span:nth-child(2){ animation-delay:.12s }
.player.playing .eq span:nth-child(3){ animation-delay:.24s }
.player.playing .eq span:nth-child(4){ animation-delay:.06s }
@keyframes eqH{ 0%,100%{ transform:scaleX(.28) } 50%{ transform:scaleX(1) } }

/* ---------- 动画 ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:1.05s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.10s } .reveal.d2{ transition-delay:.20s }
.reveal.d3{ transition-delay:.32s } .reveal.d4{ transition-delay:.44s }

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .nav{ bottom:18px; padding:7px 8px; }
  .nav.scrolled{ bottom:12px; }
  .nav-links a{ padding:8px 11px; font-size:.75rem; letter-spacing:.06em; }
  .brand .b-sub{ display:none; }
  .time-deck{ grid-template-columns:1fr; }
  .player{ right:14px; bottom:86px; }
  .scroll-hint{ bottom:100px; }
}
@media (max-width:560px){
  .topbar-min{ padding:14px 16px; }
  .brand .b-mark{ font-size:1.2rem; }
  .nav{ bottom:16px; padding:6px 7px; max-width:calc(100vw - 20px); }
  .nav.scrolled{ bottom:10px; }
  .nav-links{ gap:0; }
  .nav-links a{ padding:7px 9px; font-size:.7rem; letter-spacing:.02em; }
  .hero{ padding-top:100px; padding-bottom:112px; }
  .wish-form{ flex-direction:column; }
  .wish-form button{ padding:15px; }
  .game-card{ min-height:180px; }
  .player{ right:12px; bottom:78px; }
  .player .disc{ width:48px; height:48px; }
  .player .panel{ width:58px; }
  .scroll-hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   主题切换器
   ============================================================ */
#themeSwitcher,
#themeSwitcher3d{ position:relative; }
.ts-toggle{
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-a); background:var(--surf);
  display:flex; align-items:center; justify-content:center;
  transition:.4s var(--ease); padding:0;
}
.ts-toggle:hover{ background:var(--surf-2); border-color:var(--line-a2); transform:rotate(20deg); }
.ts-toggle .ts-dot,
.ts-opt .ts-dot{
  width:15px; height:15px; border-radius:50%; display:block;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 10px rgba(var(--c2-rgb),.5);
}
.ts-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:150;
  min-width:190px; padding:8px;
  border-radius:18px;
  background:var(--panel-bg);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--line-a);
  box-shadow:0 28px 60px -24px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none;
  transition:.38s var(--ease);
  transform-origin:top right;
}
#themeSwitcher.open .ts-panel,
#themeSwitcher3d.open .ts-panel{ opacity:1; transform:none; pointer-events:auto; }
.ts-panel .ts-title{
  font-family:var(--serif); font-style:italic; font-size:.62rem;
  letter-spacing:.38em; text-transform:uppercase;
  color:var(--muted-2); padding:8px 10px 10px;
}
.ts-opt{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  background:none; border:none; color:var(--text);
  font-family:var(--zh); font-size:.82rem; letter-spacing:.06em;
  transition:.3s var(--ease); text-align:left;
}
.ts-opt:hover{ background:var(--surf-2); }
.ts-opt.on{ background:rgba(var(--c2-rgb),.14); box-shadow:inset 0 0 0 1px var(--line-a2); }
.ts-opt .ts-name{ flex:1; }
.ts-opt .ts-en{
  font-family:var(--serif); font-style:italic; font-size:.66rem;
  letter-spacing:.16em; color:var(--muted-2);
}
@media (max-width:520px){
  .ts-toggle{ width:30px; height:30px; }
  .ts-panel{ min-width:172px; }
}

/* ============================================================
   视图切换按钮（平面 ⇄ 3D 玫瑰）
   源码1 与 源码2 共用同一套样式
   ============================================================ */
.view-switch{
  display:inline-flex; align-items:center; gap:6px;
  height:32px;
  padding:0 12px 0 10px;
  border-radius:999px;
  cursor:pointer;
  background:var(--surf);
  border:1px solid var(--line-a);
  color:var(--text);
  font-family:var(--zh);
  font-size:.72rem; letter-spacing:.14em;
  line-height:1;
  transition:background .38s var(--ease), border-color .38s var(--ease),
             transform .3s var(--ease), box-shadow .38s var(--ease);
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
}
.view-switch:hover{
  background:var(--surf-2);
  border-color:var(--line-a2);
  box-shadow:0 0 18px -6px rgba(var(--c2-rgb),.7);
}
.view-switch:active{ transform:scale(.95); }

/* 图标：轻微呼吸，提示可点 */
.view-switch .vs-ico{
  font-size:.94rem;
  color:var(--c2-lt);
  line-height:1;
  animation:vsBreath 3.4s var(--ease) infinite;
}
@keyframes vsBreath{
  0%, 100%{ opacity:.72; transform:scale(1); }
  50%     { opacity:1;   transform:scale(1.14); }
}
.view-switch .vs-txt{
  font-style:normal;
  color:var(--c2-lt);
  opacity:.92;
}

/* 划过时一道细光扫过 */
.view-switch::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-40%;
  width:40%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.20) 50%,
    transparent 100%);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
}
.view-switch:hover::after{
  animation:vsSweep .82s var(--ease) 1;
}
@keyframes vsSweep{
  0%  { left:-40%; opacity:0; }
  18% { opacity:1; }
  100%{ left:120%; opacity:0; }
}

@media (max-width:560px){
  .view-switch{
    height:28px;
    padding:0 9px 0 7px;
    gap:4px;
    font-size:.64rem;
    letter-spacing:.08em;
  }
  .view-switch .vs-ico{ font-size:.84rem; }
}
@media (max-width:400px){
  .view-switch .vs-txt{ display:none; }
  .view-switch{ width:28px; padding:0; justify-content:center; }
}