/* ui-kit/material.css — 材质层：实色 → 玻璃(backdrop-filter) → 液态折射(渐进增强)。
   红线：默认不全站铺玻璃；@supports 渐进增强；无障碍/低端可关。用 [data-glass] 控制。
   关玻璃：documentElement[data-glass="off"]（或系统 reduced-transparency）→ 一律退实色。 */

/* 玻璃基类：默认 = 实色兜底（任何环境都安全可读） */
:is(.wc-glass,.wc-card){
  background:var(--wc-color-surface);
  border:1px solid var(--wc-color-border);
}

/* 支持 backdrop-filter 时：升级为半透明毛玻璃 */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-glass="on"] :is(.wc-glass,.wc-card){
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--wc-white) 56%, transparent), color-mix(in srgb, var(--wc-white) 18%, transparent)),
      color-mix(in srgb, var(--wc-color-surface) 46%, transparent);
    -webkit-backdrop-filter:saturate(190%) blur(20px);
    backdrop-filter:saturate(190%) blur(20px);
    border:1px solid color-mix(in srgb, var(--wc-white) 76%, transparent);
    box-shadow:
      0 18px 38px color-mix(in srgb, var(--wc-color-primary) 10%, transparent),
      0 34px 64px color-mix(in srgb, var(--wc-color-primary) 8%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--wc-white) 82%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--wc-color-border) 44%, transparent);
  }
  /* 顶栏/导航玻璃（默认 on 时也享用） */
  :root[data-glass="on"] .topbar,
  :root[data-glass="on"] .nav{
    background:color-mix(in srgb, var(--wc-color-surface) 78%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
  }
}

/* 玻璃高光描边（液态质感的廉价近似，纯 CSS，处处可用） */
.wc-glass--lq{ position:relative; overflow:hidden; }
.wc-glass--lq::before,
.wc-glass--lq::after{
  content:""; position:absolute; border-radius:inherit; pointer-events:none;
}
.wc-glass--lq::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, color-mix(in srgb,var(--wc-white) 40%,transparent), transparent 42%);
  mix-blend-mode:screen; opacity:.7;
}
.wc-glass--lq::after{
  inset:auto 10% -22%;
  height:42%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--wc-white) 28%, transparent), transparent 74%);
  filter:blur(18px);
  opacity:.22;
}

/* 真·液态折射：SVG displacement，仅 Chromium，且仅在显式开启 + 支持时启用（C1/C4 风险） */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-glass="liquid"] :is(.wc-glass,.wc-card){
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--wc-white) 74%, transparent), color-mix(in srgb, var(--wc-white) 24%, transparent)),
      radial-gradient(120% 120% at 18% 8%, color-mix(in srgb, var(--wc-white) 40%, transparent), transparent 44%),
      color-mix(in srgb, var(--wc-color-surface) 34%, transparent);
    -webkit-backdrop-filter:saturate(210%) blur(24px) brightness(1.03);
    backdrop-filter:saturate(210%) blur(24px) brightness(1.03);
    border:1px solid color-mix(in srgb, var(--wc-white) 84%, transparent);
    box-shadow:
      0 20px 44px color-mix(in srgb, var(--wc-color-primary) 12%, transparent),
      0 42px 78px color-mix(in srgb, var(--wc-color-primary) 9%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--wc-white) 88%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--wc-color-border) 42%, transparent),
      inset 0 18px 32px color-mix(in srgb, var(--wc-white) 18%, transparent);
  }
  :root[data-glass="liquid"] .wc-glass--lq{
    position:relative;
    isolation:isolate;
  }
  :root[data-glass="liquid"] .wc-glass--lq::before{
    background:
      linear-gradient(132deg, color-mix(in srgb, var(--wc-white) 76%, transparent), color-mix(in srgb, var(--wc-white) 14%, transparent) 18%, transparent 42%),
      radial-gradient(220px 150px at var(--glare-x, 50%) var(--glare-y, 12%), color-mix(in srgb, var(--wc-white) 42%, transparent), transparent 62%);
    opacity:.94;
    transform:translateZ(0);
  }
  :root[data-glass="liquid"] .wc-glass--lq::after{
    inset:auto 10% -24%;
    height:46%;
    background:radial-gradient(closest-side, color-mix(in srgb, var(--wc-white) 44%, transparent), transparent 72%);
    filter:blur(22px);
    opacity:.4;
  }
  @media (hover:hover) and (pointer:fine){
    :root[data-glass="liquid"] .wc-glass--lq:hover::before{ opacity:1; }
    :root[data-glass="liquid"] .wc-glass--lq:hover::after{ opacity:.5; }
  }
}

/* —— 无障碍兜底：尊重系统"减少透明度"，强制退回实色 —— */
@media (prefers-reduced-transparency:reduce){
  :is(.wc-glass,.wc-card), .topbar, .nav{
    background:var(--wc-color-surface) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
}
/* 高对比模式：去高光、加实边 */
@media (prefers-contrast:more){
  :is(.wc-glass,.wc-card){ background:var(--wc-color-surface) !important; border-color:var(--wc-color-text) !important; }
  .wc-glass--lq::before,
  .wc-glass--lq::after{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   晶玻 · Liquid Glass（data-glass="lg"）—— 暖中性磨砂玻璃（v2 精修）
   设计取向：Apple 液态玻璃质感 + 暖 editorial 中性调（呼应"Warm Editorial"品味）。
   去蓝紫：不烘焙任何蓝色，只用中性白 + 一丝香槟暖调；投影用暖灰，saturate 降到 150% 防背景过染。
   质感升级：feTurbulence 细磨砂颗粒(消色带) · 收窄的镜面反光条 · 暖灰底内阴影 · 指针跟踪高光。
   ★ 纯加法档位：完全不改 off/on/liquid，仅在 :root[data-glass="lg"] 下生效。
   ★ ui-kit/ 不受零写死色闸约束，materials 就该分层用 rgba。
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-glass="lg"]{
  /* 细磨砂颗粒：灰度 feTurbulence，极低透明度(~4%)，消除大面积 blur 渐变的色带，增真实磨砂感 */
  --wc-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E");
}
/* ★ 关键：给晶玻档一个「有色氛围背景」——玻璃身后有暖色柔光可透，才显得出磨砂玻璃质感。
   #app 透明，此 body 背景会被玻璃卡片 backdrop-filter 模糊透出。暖调(桃/杏/沙金/鼠尾草)，不用蓝紫。 */
:root[data-glass="lg"] body{
  background:
    radial-gradient(48% 42% at 12% 10%, rgba(255,201,150,0.62) 0%, transparent 60%),
    radial-gradient(44% 40% at 88% 6%, rgba(255,178,170,0.5) 0%, transparent 60%),
    radial-gradient(56% 52% at 84% 96%, rgba(190,220,192,0.48) 0%, transparent 62%),
    radial-gradient(50% 46% at 14% 92%, rgba(250,224,172,0.56) 0%, transparent 62%),
    linear-gradient(180deg, #f5efe7 0%, #ebeef2 100%) !important;
  background-attachment:fixed !important;
}
:root[data-theme="game"][data-glass="lg"] body{
  background:
    radial-gradient(48% 42% at 12% 10%, rgba(120,86,60,0.5) 0%, transparent 60%),
    radial-gradient(44% 40% at 88% 6%, rgba(110,70,72,0.46) 0%, transparent 60%),
    radial-gradient(56% 52% at 84% 96%, rgba(70,96,78,0.44) 0%, transparent 62%),
    linear-gradient(180deg, #14110d 0%, #191a1e 100%) !important;
  background-attachment:fixed !important;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-glass="lg"] :is(.wc-glass,.wc-card){
    position:relative; overflow:hidden;
    border:1px solid rgba(255,255,255,0.72);
    background:
      var(--wc-grain),
      linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.34) 45%, rgba(255,255,255,0.22) 100%),
      radial-gradient(120% 120% at 16% 6%, rgba(255,255,255,0.46) 0%, transparent 46%),
      radial-gradient(120% 120% at 86% 98%, rgba(255,242,228,0.16) 0%, transparent 54%),
      rgba(255,255,255,0.18);
    -webkit-backdrop-filter:blur(20px) saturate(165%) brightness(1.03);
    backdrop-filter:blur(20px) saturate(165%) brightness(1.03);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.92),
      0 16px 30px rgba(60,52,46,0.10),
      0 30px 60px rgba(60,52,46,0.08),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(120,108,96,0.16),
      inset 0 16px 30px rgba(255,255,255,0.42);
    transition:transform .2s cubic-bezier(.23,1,.32,1),
               box-shadow .2s cubic-bezier(.23,1,.32,1),
               filter .2s cubic-bezier(.23,1,.32,1);
  }
  :root[data-glass="lg"] :is(.wc-glass,.wc-card)::before,
  :root[data-glass="lg"] :is(.wc-glass,.wc-card)::after{
    content:""; position:absolute; border-radius:inherit; pointer-events:none;
  }
  /* ::before = 收窄的镜面反光条 + 指针跟踪高光（--glare-x/y 由 theme.js 更新，无 JS 时静态） */
  :root[data-glass="lg"] :is(.wc-glass,.wc-card)::before{
    inset:0;
    background:
      linear-gradient(138deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.28) 8%, rgba(255,255,255,0.04) 18%, transparent 40%),
      radial-gradient(150px 150px at var(--glare-x,50%) var(--glare-y,0%), rgba(255,255,255,0.24), transparent 60%);
    opacity:.92;
    transition:opacity .2s cubic-bezier(.23,1,.32,1), transform .32s cubic-bezier(.23,1,.32,1);
  }
  /* ::after = 暖香槟底部柔光（去蓝） */
  :root[data-glass="lg"] :is(.wc-glass,.wc-card)::after{
    inset:auto 8% -26%; height:48%; border-radius:50%;
    background:radial-gradient(closest-side, rgba(255,249,241,0.2) 0%, rgba(255,249,241,0.08) 42%, transparent 74%);
    filter:blur(22px); opacity:.3; transform:scaleX(0.94);
    transition:opacity .2s, transform .2s;
  }
  @media (hover:hover) and (pointer:fine){
    :root[data-glass="lg"] :is(.wc-glass,.wc-card):hover{ filter:brightness(1.03); border-color:rgba(255,255,255,0.9); }
    :root[data-glass="lg"] :is(.wc-glass,.wc-card):hover::before{ transform:translateY(-2px); }
    :root[data-glass="lg"] :is(.wc-glass,.wc-card):hover::after{ opacity:.52; transform:scaleX(1.02); }
  }
  :root[data-glass="lg"] :is(.wc-glass,.wc-card):active{ transform:scale(.99); }

  /* 顶栏/导航也享用晶玻（中性） */
  :root[data-glass="lg"] .topbar,
  :root[data-glass="lg"] .nav{
    background:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.56));
    -webkit-backdrop-filter:blur(26px) saturate(150%) brightness(1.02);
    backdrop-filter:blur(26px) saturate(150%) brightness(1.02);
    border-bottom:1px solid rgba(255,255,255,0.5);
  }

  /* —— 深色主题(theme=game)下的晶玻（暖中性暗底 + 亮边缘光，无蓝） —— */
  :root[data-theme="game"][data-glass="lg"] :is(.wc-glass,.wc-card){
    border:1px solid rgba(255,255,255,0.2);
    background:
      var(--wc-grain),
      linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.03) 100%),
      radial-gradient(120% 120% at 16% 6%, rgba(255,255,255,0.1) 0%, transparent 42%),
      radial-gradient(120% 120% at 86% 98%, rgba(255,247,238,0.06) 0%, transparent 52%),
      rgba(250,249,247,0.07);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.08),
      0 26px 52px rgba(8,7,5,0.42),
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(12,10,8,0.32),
      inset 0 16px 30px rgba(255,255,255,0.03);
  }
  :root[data-theme="game"][data-glass="lg"] :is(.wc-glass,.wc-card)::before{
    background:
      linear-gradient(138deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.12) 10%, rgba(255,255,255,0.03) 20%, transparent 42%),
      radial-gradient(150px 150px at var(--glare-x,50%) var(--glare-y,0%), rgba(255,255,255,0.1), transparent 60%);
  }
  :root[data-theme="game"][data-glass="lg"] :is(.wc-glass,.wc-card)::after{
    background:radial-gradient(closest-side, rgba(255,247,238,0.12) 0%, rgba(255,247,238,0.05) 42%, transparent 74%);
  }
}
/* 无障碍兜底：晶玻档同样尊重"减少透明度"/高对比 → 退实色、去高光 */
@media (prefers-reduced-transparency:reduce){
  :root[data-glass="lg"] :is(.wc-glass,.wc-card){ background:var(--wc-color-surface) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  :root[data-glass="lg"] :is(.wc-glass,.wc-card)::before, :root[data-glass="lg"] :is(.wc-glass,.wc-card)::after{ display:none !important; }
}
@media (prefers-contrast:more){
  :root[data-glass="lg"] :is(.wc-glass,.wc-card){ background:var(--wc-color-surface) !important; border-color:var(--wc-color-text) !important; }
  :root[data-glass="lg"] :is(.wc-glass,.wc-card)::before, :root[data-glass="lg"] :is(.wc-glass,.wc-card)::after{ display:none !important; }
}