/* ============================================================
   84452cup 氛围与质感层 —— 「夜场泛光灯 2.0」
   ① 流场（flow field）：极光色斑缓慢漂移 + canvas 粒子流场（js）
   ② 玻璃（glass）：浮层统一毛玻璃质感（菜单/抽屉/toast/对话框）
   ③ 渐变（gradient）：标题渐变字、按钮光泽扫过、顶部信号光线
   本文件只做氛围叠加；布局与组件结构仍归 theme.css / design-language.css。
   ============================================================ */

/* —— ① 流场：极光色斑层 ——
   一个 190vmax 的固定层承载三组预模糊径向色斑（不使用 filter:blur，
   保证移动端合成开销可控），整体做 transform 漂移 + 缓旋。 */
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  top: -60vmax;
  left: 50%;
  width: 190vmax;
  height: 190vmax;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(24, 92, 88, .34), transparent 68%) 22% 30% / 62vmax 62vmax no-repeat,
    radial-gradient(closest-side, rgba(46, 108, 74, .22), transparent 66%) 74% 18% / 55vmax 55vmax no-repeat,
    radial-gradient(closest-side, rgba(23, 58, 110, .3), transparent 70%) 62% 78% / 72vmax 72vmax no-repeat,
    radial-gradient(closest-side, rgba(140, 190, 60, .08), transparent 64%) 12% 82% / 48vmax 48vmax no-repeat;
  mix-blend-mode: screen;
  opacity: .55;
  transform: translateX(-50%) scale(1);
  animation: auroraDrift 64s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes auroraDrift {
  0% { transform: translateX(-50%) rotate(0deg) scale(1) translateY(0); }
  50% { transform: translateX(-52%) rotate(9deg) scale(1.08) translateY(2.5vmax); }
  100% { transform: translateX(-48%) rotate(-7deg) scale(1.03) translateY(-2vmax); }
}

html[data-theme="light"] body::after {
  mix-blend-mode: multiply;
  opacity: .16;
  background:
    radial-gradient(closest-side, rgba(96, 176, 108, .3), transparent 68%) 22% 30% / 62vmax 62vmax no-repeat,
    radial-gradient(closest-side, rgba(52, 132, 94, .2), transparent 66%) 74% 18% / 55vmax 55vmax no-repeat,
    radial-gradient(closest-side, rgba(88, 148, 205, .22), transparent 70%) 62% 78% / 72vmax 72vmax no-repeat,
    radial-gradient(closest-side, rgba(150, 190, 70, .14), transparent 64%) 12% 82% / 48vmax 48vmax no-repeat;
}

/* canvas 粒子流场（元素由 ambient-effects.js 注入） */
#ambient-flow {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* —— ② 玻璃：浮层统一质感 —— */
/* 顶栏：玻璃加深 + 饱和度提升，底部接一条信号光线 */
.site-header {
  backdrop-filter: blur(22px) saturate(1.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
}
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, var(--lime-line) 26%, rgba(237, 246, 255, .5) 50%, var(--lime-line) 74%, transparent 96%);
  opacity: .5;
}

/* 数据库下拉菜单 */
.database-nav-menu {
  background:
    var(--glass-highlight),
    linear-gradient(180deg, var(--glass-bg-strong), rgba(7, 16, 28, .88));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme="light"] .database-nav-menu {
  background: var(--glass-highlight), var(--glass-bg-strong);
  box-shadow: 0 18px 44px rgba(21, 86, 6, .14), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* 赛季切换器下拉 */
.season-switcher ul {
  background: var(--glass-highlight), linear-gradient(180deg, var(--glass-bg-strong), rgba(7, 16, 28, .9));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
}
html[data-theme="light"] .season-switcher ul {
  background: var(--glass-highlight), var(--glass-bg-strong);
}

/* 移动端导航抽屉 */
.mobile-nav-drawer {
  background:
    var(--glass-highlight),
    linear-gradient(180deg, rgba(13, 30, 47, .92), rgba(6, 13, 23, .95));
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
}
html[data-theme="light"] .mobile-nav-drawer {
  background: var(--glass-highlight), rgba(255, 255, 255, .92);
}

/* 状态栏：轻微玻璃，与顶栏呼应 */
.status-rail {
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* 提示与闪报：磨砂玻璃片 */
.flash-message {
  background: linear-gradient(160deg, rgba(14, 30, 46, .9), rgba(7, 16, 28, .94));
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
html[data-theme="light"] .flash-message { background: rgba(255, 255, 255, .92); }
.toast {
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
}

/* 对话框：玻璃面板 + 背景磨砂暗场 */
dialog[open] {
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
}
dialog::backdrop {
  background: rgba(3, 8, 15, .55);
  backdrop-filter: blur(5px) saturate(1.1);
  -webkit-backdrop-filter: blur(5px) saturate(1.1);
}
html[data-theme="light"] dialog[open] {
  box-shadow: 0 30px 80px rgba(21, 86, 6, .2), inset 0 1px 0 rgba(255, 255, 255, .85);
}
html[data-theme="light"] dialog::backdrop { background: rgba(240, 243, 236, .5); }

/* —— ③ 渐变：标题渐变字 —— */
/* 夜场转播标题：白 → 冰青 → 一线青柠，随行宽自然过渡 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-heading h1 {
    background: linear-gradient(115deg, var(--text-1) 30%, #cfe0e8 58%, var(--lime) 108%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  html[data-theme="light"] .page-heading h1 {
    background: linear-gradient(115deg, #101a12 32%, #2c4634 70%, #23890c 108%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .home-stage h1 {
    background: linear-gradient(105deg, #ffffff 18%, #e8f4d8 46%, var(--lime) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  html[data-theme="light"] .home-stage h1 {
    background: linear-gradient(105deg, #131f15 22%, #1d4a10 96%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* —— ③ 渐变：主按钮光泽扫过 —— */
/* 斜切角保留（design-language 的 clip-path），光泽用伪元素在裁剪内滑动 */
button.primary,
a.button-link.primary {
  position: relative;
  overflow: hidden;
}
button.primary::after,
a.button-link.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .42) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .55s var(--ease-out);
}
button.primary:hover::after,
button.primary:focus-visible::after,
a.button-link.primary:hover::after,
a.button-link.primary:focus-visible::after {
  transform: translateX(130%);
}

/* 首页 hero 主按钮：泛光呼吸增强一圈外扩光环 */
@media (hover: hover) {
  button.primary.is-hero,
  a.button-link.primary.is-hero {
    box-shadow: 0 6px 18px var(--lime-wash), 0 0 0 1px var(--lime-line), inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  button.primary.is-hero:hover,
  a.button-link.primary.is-hero:hover {
    box-shadow: 0 12px 34px var(--lime-wash), 0 0 0 1px var(--lime-line), inset 0 1px 0 rgba(255, 255, 255, .3);
  }
}

/* —— 卡片悬浮：泛光灯下移感的补强 —— */
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); }
}

/* —— 文本选区：转播信号绿 —— */
::selection {
  background: rgba(183, 243, 74, .28);
  color: var(--text-1);
}
html[data-theme="light"] ::selection {
  background: rgba(35, 137, 12, .22);
  color: #101a12;
}

/* —— 性能与偏好降级 —— */
/* 小屏：降低极光强度，粒子层密度由 js 按面积控制 */
@media (max-width: 700px) {
  body::after { opacity: .38; }
}
/* 省流/低功耗设备：仅保留静态色斑 */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  button.primary::after,
  a.button-link.primary::after { transition: none; }
  button.primary:hover::after,
  a.button-link.primary:hover::after { transform: translateX(130%); }
  .card:hover { transform: none; }
  #ambient-flow { display: none; }
}

/* ============================================================
   质感细节打磨层（2026-08 第二轮，参考 Linear/Vercel 级细节）
   ⑦ 空态：统一「待播」视觉语言
   ⑧ 次级/幽灵按钮：顶部高光与悬停信号环
   ⑨ 指标卡：悬浮点亮
   ⑩ 输入件悬停、对话框关闭钮、平滑锚点滚动
   ============================================================ */

/* —— ⑦ 空态：转播待机画面 —— */
.empty-state,
.schedule-placeholder,
.fixture-empty {
  position: relative;
  border: 1px dashed var(--line-strong);
  background:
    radial-gradient(56% 120% at 50% 0%, rgba(183, 243, 74, .055), transparent 72%),
    var(--surface-inset);
}
.empty-state::before,
.schedule-placeholder::before,
.fixture-empty::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 140px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--lime-line), transparent);
  pointer-events: none;
}
.empty-state strong,
.schedule-placeholder b {
  letter-spacing: .02em;
}
.schedule-placeholder {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 18px 0;
  padding: 52px 24px;
  text-align: center;
  color: var(--text-2);
}
.schedule-placeholder b {
  color: var(--text-1);
  font-size: 19px;
}
.schedule-placeholder span {
  color: var(--text-3);
  font-size: 14px;
}
.fixture-empty {
  border-style: dashed;
}

/* —— ⑧ 次级按钮：金属拉丝面 + 顶部高光，悬停接信号环 —— */
button.secondary,
a.button-link.secondary {
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
button.secondary:hover,
a.button-link.secondary:hover {
  border-color: var(--lime-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 8px 22px rgba(0, 0, 0, .3),
    0 0 0 1px var(--lime-wash);
}
button.ghost:hover {
  background: var(--surface-hover);
}
html[data-theme="light"] button.secondary,
html[data-theme="light"] a.button-link.secondary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, #ffffff, var(--panel-2));
}

/* —— ⑨ 指标卡：悬浮点亮（转播台逐格响应） —— */
@media (hover: hover) {
  .metric {
    transition: transform .18s var(--ease-out), box-shadow .18s ease, border-color .18s ease;
  }
  .metric:hover {
    transform: translateY(-2px);
    border-color: var(--lime-line);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3), inset 0 2px 0 var(--lime-wash);
  }
  html[data-theme="light"] .metric:hover { box-shadow: 0 10px 24px rgba(21, 86, 6, .12); }
}

/* —— ⑩ 输入件悬停反馈 + 对话框关闭钮 + 平滑锚点 —— */
input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--line-strong);
}
.dialog-close {
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s var(--ease-out);
}
.dialog-close:hover {
  color: var(--text-1);
  border-color: var(--lime-line);
}
.dialog-close:active { transform: scale(.94); }
html { scroll-behavior: smooth; }

/* 表头：更清晰的分隔与字距 */
th { letter-spacing: .08em; }

/* —— ⑪ 拍卖舞台：泛光灯待机网格（操作台与直播页共用） ——
   空舞台不再是一整块纯黑；细网格 + 顶部泛光让画面保持「转播待机」质感。 */
.stage-canvas {
  background:
    radial-gradient(62% 64% at 50% 34%, rgba(183, 243, 74, .05), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 46px);
}
html[data-theme="light"] .stage-canvas {
  background:
    radial-gradient(62% 64% at 50% 34%, rgba(35, 137, 12, .05), transparent 72%),
    repeating-linear-gradient(0deg, rgba(16, 26, 18, .03) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(16, 26, 18, .03) 0 1px, transparent 1px 46px);
}