/* ============================================================
   主题 A · 霓虹网格（Neon Grid）
   游戏赛博风：近黑蓝底 + 青色主色 + 品红点缀；网格 / 扫描线 / 切角卡片 / 等宽字标签
   用法：在 style.css 之后引入本文件即可覆盖（不修改 style.css 本身）
   ============================================================ */

:root {
  color-scheme: dark;

  --bg: #05070d;
  --bg-soft: #080c15;
  --panel: rgba(10, 17, 28, 0.74);
  --panel-strong: rgba(8, 13, 22, 0.94);

  /* 描边偏青，比原来的纯白描边更“电子” */
  --line: rgba(61, 220, 255, 0.16);
  --line-strong: rgba(61, 220, 255, 0.45);

  --text: #e6f4ff;
  --muted: #7f8ea8;

  --accent: #3ddcff;
  --accent-2: #ff2e88;
  /* 准星配色与光晕沿用 style.css 里的 --reticle / --reticle-lock / --glow-tint 默认值
     （琥珀橙 → 青柠）。想让准星跟主题走，把下面两行注释打开即可：
     --reticle: #3ddcff;  --reticle-lock: #ff2e88; */

  --bili: #45b6ff;
  --dy: #ff4d7d;

  /* 硬边风格：几乎不圆角 */
  --radius: 4px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.62);
  --glow: 0 0 0 1px rgba(61, 220, 255, 0.32), 0 0 26px rgba(61, 220, 255, 0.26);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  /* 数字专用栈：等宽体的数字带衬线又偏细，大号很难看，所以数字一律走 --num
     （圆润几何：Win Century Gothic / Mac Futura·Avenir Next；字形全圆弧，与硬边赛博框架形成对比） */
  --num: "DSEG7", "Century Gothic", "Futura", "Avenir Next", "Poppins", "Nunito",
         "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --num-weight: 700;
  --num-tracking: 1px;
  --num-scale: 1;
  /* 非数码管栈：用于英文/中文与数字混排的文本（DSEG7 没有完整字母表） */
  --num-sans: "Century Gothic", "Futura", "Avenir Next", "Poppins", "Nunito",
              "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

/* ===== 背景：赛博城市（实景图优先，缺失时自动降级为纯 CSS 霓虹辉光） ===== */
/* CYBERCITY-BG-START */
/* CSS 多背景的关键特性：某一层的 url 加载失败（404）只作废该层，其余层照常渲染。
   利用这点做「图片优先 + 渐变兜底」的双保险 —— 图片没部署时背景也不会黑屏：
     ① 顶层  linear-gradient    顶部压暗，保证导航/标题文字在任何背景上都可读
     ② 中层  url(实景图)        赛博城市夜景照（img/bg-city-neon.jpg）
     ③ 底层  多层 radial-gradient 霓虹辉光（青 + 品红）+ 深蓝底，照片缺失时即为最终背景 */
.bg-aurora {
  background-color: #05070d;
  background-image:
    linear-gradient(180deg, rgba(5, 7, 13, 0.40) 0%, rgba(5, 7, 13, 0) 30%),
    url("../img/bg-city-neon.jpg"),
    radial-gradient(ellipse 72% 48% at 22% 98%, rgba(61, 220, 255, 0.20), transparent 66%),
    radial-gradient(ellipse 62% 44% at 80% 102%, rgba(255, 46, 136, 0.15), transparent 68%),
    radial-gradient(ellipse 130% 95% at 50% -25%, #0b1a2c 0%, #070d18 52%, #05070d 100%);
  background-size: 100% 100%, cover, auto, auto, auto;
  background-position: top center, center bottom, 0 0, 0 0, center;
  background-repeat: no-repeat;
}
.galaxy-band {
  /* 贴地霓虹辉光：叠在照片下缘，让图片和主题主色咬合 */
  position: absolute; left: -10%; right: -10%; bottom: -6%; height: 50%;
  animation: none; transform: none; mix-blend-mode: screen;
  filter: blur(56px); opacity: 0.5;
  background:
    radial-gradient(ellipse 55% 100% at 28% 100%, rgba(61, 220, 255, 0.30), transparent 72%),
    radial-gradient(ellipse 45% 86% at 73% 100%, rgba(255, 46, 136, 0.18), transparent 74%);
  background-repeat: no-repeat;
}
.galaxy-haze { display: none; } /* 照片自带城市细节，原来的星点层不再需要 */
.grid-overlay {
  /* 霓虹网格（主题名）＋ 斜雨丝 ＋ 底部雾气；照片缺失时这层负责撑住"网格"辨识度 */
  background-image:
    linear-gradient(rgba(61, 220, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 220, 255, 0.06) 1px, transparent 1px),
    repeating-linear-gradient(76deg, rgba(180, 235, 255, 0.035) 0 1px, transparent 1px 10px),
    linear-gradient(0deg, rgba(10, 24, 38, 0.42) 0%, transparent 30%);
  background-size: 62px 62px, 62px 62px, auto, 100% 100%;
  /* 网格向四周渐隐，避免整屏死板的格子感 */
  -webkit-mask-image: radial-gradient(ellipse 92% 74% at 50% 26%, #000 42%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 74% at 50% 26%, #000 42%, transparent 100%);
}
@media (max-width: 860px) {
  /* 小屏偏右取景，保住中间那几栋主楼 */
  .bg-aurora { background-position: top center, 60% bottom, 0 0, 0 0, center; }
}
/* CYBERCITY-BG-END */

/* 粒子星空已移除；旧版光点/光圈节点也不再存在（新方案是「锁定准星」，见 style.css）。
   注意不要在这里隐藏 .cursor-glow —— 新的准星要用它做柔光。 */
.stars, .cursor-dot, .cursor-ring { display: none !important; }

/* ===== 顶部导航 ===== */
.site-header {
  background: rgba(5, 7, 13, 0.88);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(61, 220, 255, 0.10), 0 12px 34px rgba(0, 0, 0, 0.5);
}
.logo { font-family: var(--num-sans); font-weight: 700; letter-spacing: 1px; }
.logo-dot {
  width: 9px; height: 9px; border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: none;
}
.site-nav a {
  font-family: var(--num-sans); font-size: 12px; letter-spacing: 1.5px;
  border-radius: 2px; border: 1px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--accent); background: rgba(61, 220, 255, 0.08); border-color: var(--line-strong);
}

/* ===== 首屏 ===== */
.hero-text { position: relative; }
/* 左上角切角装饰 */
.hero-text::before {
  content: ""; position: absolute; left: -22px; top: -16px; width: 44px; height: 44px;
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent);
  opacity: 0.75; pointer-events: none;
}
.hero-eyebrow {
  font-family: var(--num-sans, var(--num)); color: var(--accent); letter-spacing: 4px;
  font-variant-numeric: tabular-nums lining-nums;
}
.hero-title { letter-spacing: 2px; text-shadow: 0 0 26px rgba(61, 220, 255, 0.42), 0 0 2px rgba(255, 255, 255, 0.85); }
.hero-m3 .m3-big { color: var(--accent); text-shadow: 0 0 30px rgba(61, 220, 255, 0.5); }
.hero-m3 .m3-small { -webkit-text-stroke: 2.2px rgba(61, 220, 255, 0.85); }
/* CONTENT CREATOR：改成描边字，与实心的站名拉开层次 */
.hero-outline { color: transparent; -webkit-text-stroke: 1.7px rgba(230, 244, 255, 0.58); }
.hero-outline:hover { -webkit-text-stroke-color: var(--accent); }
.hero-intro { font-size: 16px; }

/* 副标题保留站酷快乐体（个性），只换成青色 + 微光 */
.hero-slogan { color: var(--accent); text-shadow: 0 0 24px rgba(61, 220, 255, 0.35); }
.caret { width: 3px; background: var(--accent); }

/* ===== 按钮：方角 + 等宽大写 + 悬停扫光 ===== */
.hero-actions .btn {
  border-radius: 3px;
  font-family: var(--mono); font-size: 14px; letter-spacing: 2px;
  padding: 15px 32px;
}
.hero-actions .btn.wave-blue { border: 1px solid var(--line-strong); color: var(--accent); background: rgba(61, 220, 255, 0.06); }
.hero-actions .btn.wave-white { background: var(--accent); border: 1px solid var(--accent); color: #04121a; }
.hero-actions .btn.wave-blue { --wave: rgba(61, 220, 255, 0.30); }
.hero-actions .btn.wave-white { --wave: rgba(4, 18, 26, 0.22); }
.hero-actions .btn:hover { box-shadow: 0 0 28px rgba(61, 220, 255, 0.35); }

/* ===== 头像：从圆形渐变环改成方形发光框 ===== */
.hero-avatar {
  border-radius: 3px; padding: 3px;
  background: var(--accent);
  animation: none;
  box-shadow: 0 0 40px rgba(61, 220, 255, 0.35);
}
.hero-avatar img { border-radius: 2px; }
.hero-avatar::after { border-radius: 2px; }
.avatar-player {
  border-radius: 3px;
  background: rgba(4, 8, 14, 0.82);
  border: 1px solid var(--line-strong);
}
.avatar-player .ap-btn { border-radius: 2px; border-color: var(--line-strong); }
.avatar-player .ap-play { background: var(--accent); color: #04121a; }

/* ===== 粉丝卡片：HUD 面板 + 切角 ===== */
.fans-card {
  border-radius: 0;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  border: 1px solid var(--line-strong);
  background: var(--panel-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fans-card::before { display: none; } /* 去掉原来的渐变描边 */
.fans-card-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
}
.fans-card-head small { font-family: var(--num); font-variant-numeric: tabular-nums; }
.fans-total strong {
  font-family: var(--num); color: var(--accent);
  text-shadow: 0 0 24px rgba(61, 220, 255, 0.5);
}
.fans-item { border-radius: 2px; background: rgba(61, 220, 255, 0.04); }
.fans-item .fans-num { font-family: var(--num); }

/* ===== 跑马灯：保留无限滚动，只做视觉重装 ===== */
.marquee {
  transform: translateZ(0); margin: 0;
  /* 毛玻璃条：压在照片背景上把跑马灯文字托起来
     （左右用渐隐收边，避免出现生硬的色块边界） */
  background:
    linear-gradient(90deg, transparent, rgba(61, 220, 255, 0.07) 12%, rgba(61, 220, 255, 0.07) 88%, transparent),
    rgba(5, 9, 16, 0.55);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  padding: 16px 0;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.4);
}
.marquee-group .mq-item {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.marquee-group .mq-item:nth-child(4n + 1) {
  color: var(--accent); text-shadow: 0 0 14px rgba(61, 220, 255, 0.45);
}
.marquee-group .mq-sep { font-size: 12px; color: var(--accent); opacity: 0.75; }
  /* 悬停不再暂停：避免毛玻璃闪烁 + 滚动骤停 */

/* ===== 区块标题：▍ + 右侧延伸线 ===== */
.section { padding: 58px 0; }
.section-title {
  display: flex; align-items: center; gap: 14px;
  font-size: 26px; letter-spacing: 1px;
}
.section-title::before { content: "▍"; color: var(--accent); font-size: 0.85em; }
.section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.section-sub { font-family: var(--mono); font-size: 12.5px; }
.section-sub::before { content: "// "; color: var(--accent); }

/* ===== 工具卡：切角 + 角标 + 背面斜纹 ===== */
.card-grid { gap: 18px; }
.flip-front, .flip-back {
  border-radius: 0;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.flip-front { background: var(--panel); }
.flip-front::before {
  content: ""; position: absolute; left: 10px; top: 10px; width: 26px; height: 26px;
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent);
  opacity: 0.6; pointer-events: none;
}
.flip-back {
  border-color: var(--line-strong);
  background-image:
    repeating-linear-gradient(45deg, rgba(61, 220, 255, 0.10) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, rgba(61, 220, 255, 0.18), rgba(255, 46, 136, 0.14));
}
.flip-card { transition: transform 0.25s ease; }
.flip-card:hover { transform: translateY(-4px); }
.flip-card:hover .flip-front {
  border-color: var(--line-strong);
  box-shadow: 0 0 32px rgba(61, 220, 255, 0.18);
}
.card-icon, .article-icon {
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: rgba(61, 220, 255, 0.08);
  box-shadow: inset 0 0 18px rgba(61, 220, 255, 0.12);
}
.card-title { letter-spacing: 0.5px; }
.flip-back .card-meta { font-family: var(--mono); letter-spacing: 1px; color: var(--accent); }

/* ===== 标签 ===== */
.badge {
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: rgba(61, 220, 255, 0.10);
  color: var(--accent);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase;
}

/* ===== 文章条目：左侧色条 + 右下切角 ===== */
.article-item {
  border-radius: 0;
  border-left: 3px solid var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.article-item:hover, .article-item:focus-visible { border-left-color: var(--accent-2); }
.article-item .article-date { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* ===== 页脚（含版本号与 ICP 号，数字为主，走 --num） ===== */
.site-footer { font-family: var(--num-sans, var(--num)); font-size: 12px; letter-spacing: 0.5px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.65); }

/* ===== 滚动渐入（保留，稍微收紧） ===== */
.reveal { transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }

/* ===== 开屏加载 ===== */
.loader-ring { border-color: rgba(61, 220, 255, 0.18); border-top-color: var(--accent); }
.loader-name { font-family: var(--mono); letter-spacing: 3px; }
.loader-bar i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ===== 弹窗 / 管理条 ===== */
.modal-box {
  border-radius: 0;
  border: 1px solid var(--line-strong);
  background: #070b13;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.modal-box h3 { font-family: var(--mono); letter-spacing: 2px; color: var(--accent); }
.modal-box input, .modal-box textarea, .modal-box select {
  border-radius: 2px; background: rgba(0, 0, 0, 0.5);
}
.admin-bar { border-radius: 0; border: 1px solid var(--line-strong); }
.admin-btn { border-radius: 2px; font-family: var(--mono); font-size: 12px; }
.admin-bar-title { font-family: var(--mono); letter-spacing: 1.5px; text-transform: uppercase; }

/* ===== 移动端微调 ===== */
@media (max-width: 860px) {
  .hero-text::before { display: none; } /* 小屏隐藏切角装饰，避免贴边 */
  .section-title { font-size: 22px; }
}