/* ==========================================================================
   毛玻璃（Glassmorphism）· 四套主题共用
   --------------------------------------------------------------------------
   · 文件名沿用 glass-dark.css（三个页面已经 link 了它，不改 HTML 一行）。
   · 这里只写「结构」：卡片 / 输入框 / 按钮 / 顶栏 / 抽屉 / 弹窗 怎么玻璃化。
   · 每套主题长什么样，全部由 tokens.css 里的 --glass-* 与 --paper-wash-* 决定：
       夏日薄荷 / 暖阳手账 / 樱花粉 → 半透明白玻璃 + 彩色背景渐变
       暗夜微光                     → 原来的深空玻璃（值在暗夜块里，一个字节没动）
   · 本文件不出现任何颜色字面量，颜色一律走令牌；也不动任何尺寸与布局。
   ========================================================================== */

/* ---------- 1. 星点层：只有暗夜给了值，浅色主题的 --stars-* 是 none ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-deco);
  pointer-events: none;
  background-image: var(--stars-1), var(--stars-2);
  background-size: var(--stars-size-1), var(--stars-size-2);
  background-repeat: repeat;
  opacity: .9;
}

/* 引导页 / 弹窗不要整块实色，让背景渐变（或星空）透出来 */
.gate,
.game-modal,
.gate__sheet {
  background-color: transparent;
}

/* 引导页左边的纸质装饰便签：玻璃时代换成一块薄玻璃 */
.gate__paper {
  background-color: var(--glass-1);
  background-image: none;
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow), var(--glass-top);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  rotate: 0deg;
}

.gate__tape {
  display: none;
}

/* ---------- 2. 毛玻璃卡片：日记 / 迷你 / 互动 / 空状态 / 评论 / 提示 ---------- */
.card,
.entry,
.mini,
.qa,
.empty,
.qa__block,
.comments,
.toast,
.space__block,
.tagbar {
  background-color: var(--glass-1);
  background-image: none;                 /* 关掉纸纹与横线，玻璃要干净 */
  border: 1px solid var(--glass-line);    /* 白色高光边 */
  border-radius: var(--r-md);
  box-shadow: var(--glass-shadow), var(--glass-top);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  rotate: 0deg;                           /* 玻璃不歪：把便签的随机倾斜归零 */
  translate: 0 0;
  transition: box-shadow var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}

/* hover：轻微上浮的错觉交给阴影，不真的移动元素（避免抖动） */
.card:hover,
.entry:hover,
.mini:hover,
.qa:hover {
  background-color: var(--glass-2);
  box-shadow: var(--glass-shadow), var(--glass-top), var(--glass-glow);
}

/* 胶带贴纸在玻璃上会出戏，四套主题统一摘掉 */
.card::before,
.entry::before,
.mini::before,
.qa::before,
.empty::before,
.qa__block::before,
.space__panel::before,
.game-modal__panel::before {
  display: none;
}

/* 私密日记：同一块玻璃，稍微厚一点、实线边 */
.entry--private,
.mini--private,
.composer--private {
  background-color: var(--glass-2);
  border-style: solid;
  border-color: var(--glass-line);
}

/* 刚发布的那张给一点光晕 */
.entry[data-new="1"] {
  box-shadow: var(--glass-shadow), var(--glass-top), var(--glass-glow);
}

/* ---------- 3. 顶栏 / 侧边抽屉 / 登录框 / 游戏弹窗：厚一点的玻璃 ---------- */
.topbar {
  background-color: var(--glass-bar);
  background-image: none;
  border-bottom: 1px solid var(--glass-line);
  box-shadow: var(--shadow-note);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.topbar::after {
  background-image: none;
}

.space__panel {
  background-color: var(--glass-3);
  background-image: none;
  border-left: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
}

.space__scrim {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gate__card,
.game-modal__panel {
  background-color: var(--glass-3);
  background-image: none;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-md);
  box-shadow: var(--glass-shadow), var(--glass-top);
  backdrop-filter: blur(18px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
}

.game-modal__stage {
  background-color: var(--glass-1);
  background-image: none;
}

/* ---------- 4. 输入框：薄玻璃 + 高光边，去掉横线纸 ---------- */
.field__input {
  background-color: var(--glass-1);
  background-image: none;
  border-color: var(--glass-line);
  color: var(--c-ink);
}

.field__input::placeholder {
  color: var(--c-ink-faint);
}

.field__input:focus-visible {
  border-color: var(--c-primary);
  box-shadow: var(--glass-glow);
}

/* ---------- 5. 按钮 / 胶囊 / 主题卡：玻璃面，主色那一颗发光 ---------- */
.btn {
  background-color: var(--glass-1);
  border-color: var(--glass-line);
  color: var(--c-ink);
}

.btn:hover {
  background-color: var(--glass-2);
  border-color: var(--glass-line);
  box-shadow: var(--glass-top), var(--glass-glow);
}

.btn--primary {
  background-color: var(--c-primary);
  border-color: transparent;
  color: var(--c-on-primary);
  box-shadow: var(--glass-glow);
}

.btn--primary:hover {
  background-color: var(--c-primary-strong);
  box-shadow: var(--glass-glow), var(--glass-top);
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--glass-line);
  color: var(--c-ink-muted);
}

.chip,
.choice__box,
.theme-opt {
  background-color: var(--glass-1);
  border-color: var(--glass-line);
  color: var(--c-ink-muted);
}

.chip:hover,
.choice__box:hover,
.theme-opt:hover {
  background-color: var(--glass-2);
}

.chip[aria-pressed="true"],
.choice__box:has(input:checked),
.theme-opt[aria-pressed="true"] {
  background-color: var(--glass-2);
  border-color: var(--c-primary);
  color: var(--c-ink);
  box-shadow: var(--glass-top), var(--glass-glow);
}

.badge {
  background-color: var(--glass-1);
  border-color: var(--glass-line);
  color: var(--c-ink-muted);
}

/* 数字小圆片在玻璃上稍微点亮一点 */
.tab__count,
.chip__num {
  background-color: var(--glass-2);
  color: var(--c-ink);
}

/* 顶栏里的标签页保持原来那套（浅色主题是深色条 + 白胶囊，暗夜主题才需要玻璃化） */
:root[data-theme="dark"] .tab {
  color: var(--c-head-ink-muted);
}

:root[data-theme="dark"] .tab[aria-selected="true"] {
  background-color: var(--glass-2);
  border-color: var(--glass-line);
  color: var(--c-head-ink);
  box-shadow: var(--glass-top);
}

/* ---------- 6. 标题：只有暗夜带一点星尘光（浅色主题 --glass-title-glow 是 none） ---------- */
.view__title,
.card__title,
.gate__title,
.space__title {
  text-shadow: var(--glass-title-glow);
}

.view__title::after {
  background-image: linear-gradient(90deg, var(--c-primary) 0%, var(--c-gold) 100%);
  opacity: .5;
}

/* ---------- 7. 分隔线：玻璃细线，替掉纸上的虚线 ---------- */
.entry__actions,
.mini__foot,
.qa__actions,
.space__block,
.foot {
  border-color: var(--glass-line-soft);
  border-style: solid;
}

/* ---------- 8. 滚动条也跟着降温 ---------- */
.page,
.space__panel {
  scrollbar-color: var(--glass-line) transparent;
}

/* ---------- 9. 不支持毛玻璃时的兜底：退回实色，先保证字看得清 ---------- */
@supports not (backdrop-filter: blur(12px)) {
  .card,
  .entry,
  .mini,
  .qa,
  .empty,
  .space__panel,
  .gate__card,
  .game-modal__panel {
    background-color: var(--c-surface);
  }
}

/* ---------- 10. 手机上模糊少一点，换流畅与省电 ---------- */
@media screen and (max-width: 768px) {
  .card,
  .entry,
  .mini,
  .qa,
  .empty {
    background-color: var(--glass-2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .topbar,
  .space__panel,
  .gate__card,
  .game-modal__panel {
    backdrop-filter: blur(10px) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
  }
}