/* ==========================================================================
   小羊游戏厅 · 赛博像素主题层（cyber.css）
   --------------------------------------------------------------------------
   这一层**只覆盖变量和加装饰**，不碰布局。所有选择器都基于 style.css 已有的
   类名，所以 app.js 动态渲染出来的卡片、筛选、搜索全部自动跟着变。
   加载顺序：style.css → cyber.css（必须是后面那个）。

   设计口径
     · 底：近黑蓝一档到底，加网格 + 扫描线 + 顶部辉光，像在看一台 CRT
     · 主色：电光青 #00e9ff，辅色：品红 #ff2d95 / 酸绿 #b6ff3a（只做点缀）
     · 形状：圆角全部归零，卡片切角，边框 1px 硬线，投影是"位移 + 发光"两层
     · 字体：英文/数字用 Press Start 2P（像素字体），中文回落系统字，
             避免整个站加载几 MB 的中文像素字库
   ========================================================================== */

/* ---------- 像素字体（只含 Latin，见 assets/fonts/NOTICE.txt）---------- */
@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. 设计变量：把 style.css 的"暖纸 + 橙"整套换掉
   --------------------------------------------------------------------------
   三个选择器都要写：style.css 里 :root 是浅色、[data-theme="dark"] 是深色，
   主题切换只改 <html data-theme>。同权重下后加载的这份会赢，但必须三种情况都覆盖。
   ========================================================================== */
:root,
[data-theme="light"],
[data-theme="dark"] {
  /* 表面 */
  --paper: #05070f;
  --paper-2: #080d1a;
  --card: #0a1222;
  --ink: #d9f7ff;
  --ink-soft: #86a9c6;
  --ink-faint: #4d6c88;
  /* 线 / 强调 */
  --line: #00e9ff;
  --line-soft: rgba(0, 233, 255, 0.16);
  --accent: #00e9ff;
  --accent-soft: rgba(0, 233, 255, 0.12);
  --shadow: #00131a;
  --shadow-a: 4px 4px 0 var(--shadow);
  --shadow-b: 7px 7px 0 var(--shadow);

  /* 赛博专用 */
  --cy-magenta: #ff2d95;
  --cy-lime: #b6ff3a;
  --cy-amber: #ffb020;
  --cy-glow: 0 0 18px rgba(0, 233, 255, 0.45);
  --cy-panel-top: rgba(0, 233, 255, 0.07);
  --cy-scan: rgba(0, 0, 0, 0.22);
  --cy-grid: rgba(0, 233, 255, 0.07);
  /* 吉祥物是"浅底 + 黑线"的插画，直接反相会变成黑羊。
     压一点亮度 + 加青色光晕，当全息投影看，保留辨识度。 */
  --cy-mascot-filter: brightness(0.92) saturate(0.92) drop-shadow(0 0 26px rgba(0, 233, 255, 0.35)) drop-shadow(0 0 60px rgba(0, 233, 255, 0.18));

  /* 形状：像素风不留圆角 */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  /* 切角尺寸（卡片/按钮的"缺角"，靠 clip-path 实现） */
  --cut: 10px;

  /* 字体 */
  --font-pixel: "Press Start 2P", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* 浅色主题：白昼终端。同样是赛博口径，只是把底色翻过来 */
[data-theme="light"] {
  --paper: #e8f4fa;
  --paper-2: #d7ecf6;
  --card: #ffffff;
  --ink: #04121c;
  --ink-soft: #2f5568;
  --ink-faint: #6d8fa3;
  --line: #0077a8;
  --line-soft: rgba(0, 119, 168, 0.22);
  --accent: #0077a8;
  --accent-soft: rgba(0, 119, 168, 0.1);
  --shadow: #04121c;
  --cy-magenta: #c4006e;
  --cy-lime: #2f7a00;
  --cy-amber: #a85c00;
  --cy-glow: 0 0 16px rgba(0, 119, 168, 0.35);
  --cy-panel-top: rgba(0, 119, 168, 0.06);
  --cy-scan: rgba(0, 40, 60, 0.06);
  --cy-grid: rgba(0, 119, 168, 0.1);
  --cy-mascot-filter: none;
}

/* ==========================================================================
   2. 底子：网格 + 顶部辉光 + 扫描线
   ========================================================================== */
body {
  background-color: var(--paper);
  /* 两道来源叠一起：顶部青光辉光 + 透视网格地面 */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, var(--cy-panel-top), transparent 70%),
    linear-gradient(var(--cy-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cy-grid) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  background-attachment: fixed;
  letter-spacing: 0.01em;
  /* 跑马灯用 rotate(-0.35deg) scale(1.02) 做出"斜贴纸"，手机上会多出 4px
     横向滚动。clip 不产生滚动容器，sticky 顶栏照旧跟着视口走。 */
  overflow-x: clip;
}

/* 原来那个点阵纹理换成"网点 + 扫描线"，z-index 仍是 -1 */
body::before {
  background-image:
    repeating-linear-gradient(0deg, var(--cy-scan) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 0%, rgba(0, 233, 255, 0.08), transparent 60%);
  background-size: 100% 3px, 100% 100%;
  opacity: 1;
  mask-image: none;
  -webkit-mask-image: none;
}

/* 扫描线放在最上层但点不到（pointer-events:none），给整页一层 CRT 味 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.16) 0 1px,
    transparent 1px 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

[data-theme="light"] body::after { opacity: 0.22; }

::selection {
  background: var(--accent);
  color: #001018;
  text-shadow: none;
}

/* 滚动条也做成像素块 */
* {
  scrollbar-color: var(--accent) transparent;
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); }
*::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 2px solid var(--paper);
}

/* ==========================================================================
   3. 字体口径
   ========================================================================== */
/* 英文标签、数字、状态位一律像素字，中文继续用系统字（像素字库没有中文） */
.mono,
.eyebrow,
.tag,
.badge,
.chip,
.card__foot,
.hero__note,
.footer__bottom,
.btn {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.eyebrow,
.badge,
.tag {
  font-family: var(--font-pixel);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* 标题：硬描边 + 双色错位，像显像管没对齐 */
h1, h2, h3, .h1, .card__title, .featured__title, .sec-head h2 {
  text-shadow:
    1px 0 0 rgba(255, 45, 149, 0.55),
    -1px 0 0 rgba(0, 233, 255, 0.55);
}

.hero__title {
  text-shadow:
    2px 0 0 rgba(255, 45, 149, 0.7),
    -2px 0 0 rgba(0, 233, 255, 0.7),
    0 0 24px rgba(0, 233, 255, 0.25);
}

/* 那句手写体的"不用下载"：给个荧光笔效果，但改成霓虹灯管 */
.brush {
  background-image: linear-gradient(transparent 62%, rgba(0, 233, 255, 0.35) 62%);
  box-shadow: 0 2px 0 0 rgba(255, 45, 149, 0.6);
}

/* ==========================================================================
   4. 导航
   ========================================================================== */
.nav {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 0 rgba(0, 233, 255, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.brand__mark {
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--cy-magenta);
}

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cy-magenta));
  transition: right 0.22s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { right: 0; }

/* ==========================================================================
   5. 按钮 / 标签 / 筛选片
   ========================================================================== */
.btn {
  border-radius: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  position: relative;
  transition: transform 0.08s steps(2), box-shadow 0.15s var(--ease),
    background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--shadow), var(--cy-glow);
  transform: translate(-1px, -1px);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #001018;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--shadow), 0 0 22px rgba(0, 233, 255, 0.45);
}
.btn--primary:hover {
  background: #7cf6ff;
  color: #001018;
}

/* 切角：像素风的"缺口"。
   注意：收款码 .support__qr 故意不在这里 —— clip-path 会削掉卡片四个角，
   一旦卡片缩到刚好贴住二维码，缺角就可能切进静区，扫不出来。 */
.card,
.featured,
.note-card,
.search,
.btn,
.chip {
  --cut: 10px;
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

/* 收款码：白底卡片 + 青色霓虹描边，但**不做任何裁切/滤镜**，保证可扫 */
.support__qr {
  /* 全屏扫描线是 body::after（fixed, z-index 9999, multiply）。二维码上压一层横纹
     会吃掉对比度，手机可能扫不出来 —— 把这张卡顶到扫描线之上。 */
  position: relative;
  z-index: 10000;
  border: 1px solid var(--accent);
  background: #fff;
  box-shadow: 3px 3px 0 var(--shadow), 0 0 26px rgba(0, 233, 255, 0.35);
  transition: box-shadow 0.2s var(--ease), transform 0.12s steps(2);
}
.support__qr:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow), 0 0 34px rgba(0, 233, 255, 0.55);
}

.chip {
  border-radius: 0;
  border: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.chip[aria-pressed="true"],
.chip.is-active,
.chip--on {
  background: var(--accent);
  border-color: var(--accent);
  color: #001018;
  box-shadow: 0 0 16px rgba(0, 233, 255, 0.5);
}

.tag {
  border-radius: 0;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink-soft);
  font-size: 10px;
  padding: 3px 7px;
}
.tag::before { content: "▸ "; color: var(--accent); }

.badge {
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--shadow);
}
.badge--new { background: var(--cy-magenta); color: #1a0010; }

/* ==========================================================================
   6. 游戏卡片
   ========================================================================== */
.card {
  background: linear-gradient(180deg, var(--cy-panel-top), transparent 55%), var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform 0.1s steps(2), box-shadow 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.card:hover {
  transform: translate(-2px, -2px);
  border-color: var(--accent);
  box-shadow: 6px 6px 0 var(--shadow), var(--cy-glow);
}

/* 封面：app.js 会给每个封面写内联 --c1/--c2（浅绿、淡橙这类暖色）。
   不能只靠 filter，因为 brightness 压到 0.5 还是"灰白"，而且会连 emoji 一起压暗。
   做法是「深底打底 + 原渐变压在下面透一点色 + 青/品红 screen 辉光」，
   出来的效果像一块块亮着的屏幕，同时每张卡还保留自己的色相（能区分）。 */
.card__cover {
  position: relative;
  image-rendering: pixelated;
  background:
    linear-gradient(150deg, rgba(5, 7, 15, 0.78) 0%, rgba(5, 7, 15, 0.93) 100%),
    linear-gradient(150deg, var(--c1, #0a1222), var(--c2, #0a1222));
  box-shadow: inset 0 0 0 1px rgba(0, 233, 255, 0.16),
    inset 0 -22px 30px rgba(0, 0, 0, 0.5);
}

/* 荧光屏：左上青、右下品红的斜向辉光（screen 混合把下面的暗色带出霓虹） */
.card__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 82% at 14% 0%, rgba(0, 233, 255, 0.4), transparent 62%),
    radial-gradient(130% 92% at 100% 104%, rgba(255, 45, 149, 0.34), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* 扫描线 + 像素网格（盖在辉光之上，但必须让 emoji 透出来） */
.card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(0, 233, 255, 0.14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 233, 255, 0.14) 1px, transparent 1px);
  background-size: 100% 3px, 22px 22px, 22px 22px;
  opacity: 0.7;
}

.card__glyph {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  filter: saturate(1.2) contrast(1.05)
    drop-shadow(0 0 10px rgba(0, 233, 255, 0.55))
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45));
}
.card:hover .card__glyph {
  filter: saturate(1.35) contrast(1.1)
    drop-shadow(0 0 18px rgba(255, 45, 149, 0.6))
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45));
}

.card__title .arrow { color: var(--accent); }

.card__foot {
  border-top: 1px dashed var(--line-soft);
  color: var(--ink-faint);
}

.card--soon {
  opacity: 0.55;
  filter: grayscale(0.6);
}

/* ==========================================================================
   7. 今日推荐
   ========================================================================== */
.featured {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(0, 233, 255, 0.08), transparent 60%),
    var(--card);
  box-shadow: 5px 5px 0 var(--shadow), 0 0 40px rgba(0, 233, 255, 0.12) inset;
}

.featured__badge {
  border-radius: 0;
  background: var(--cy-magenta);
  color: #1a0010;
  box-shadow: 2px 2px 0 var(--shadow);
}

.featured__glyph {
  position: relative;
  z-index: 1;
  filter: saturate(1.2) contrast(1.05) drop-shadow(0 0 22px rgba(0, 233, 255, 0.6))
    drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
}

/* 推荐位右边那块大渐变跟封面同款处理：深底压屏 + 青品红辉光，
   否则整页只有它是"亮粉彩"的，会显得没做完。 */
.featured__visual {
  background:
    linear-gradient(150deg, rgba(5, 7, 15, 0.74) 0%, rgba(5, 7, 15, 0.92) 100%),
    linear-gradient(150deg, var(--f-c1, #0a1222), var(--f-c2, #0a1222));
  box-shadow: inset 0 0 0 1px rgba(0, 233, 255, 0.18),
    inset 0 -30px 40px rgba(0, 0, 0, 0.5);
}

/* 原 ::after 是黑点阵，这里换成霓虹辉光 + 扫描线（内容不需要压暗了，
   因为底色已经是深的）。glyph 已提 z-index，不会被盖住。 */
.featured__visual::after {
  background-image:
    radial-gradient(120% 84% at 16% 4%, rgba(0, 233, 255, 0.42), transparent 62%),
    radial-gradient(130% 92% at 100% 100%, rgba(255, 45, 149, 0.36), transparent 60%),
    linear-gradient(rgba(0, 233, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 233, 255, 0.14) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 26px 26px, 26px 26px;
  opacity: 0.95;
}

/* ==========================================================================
   8. 跑马灯 / 说明卡 / 支持
   ========================================================================== */
.marquee {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(0, 233, 255, 0.05);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.note-card {
  border: 1px solid var(--line-soft);
  background: var(--card);
  box-shadow: 3px 3px 0 var(--shadow);
}

.support {
  border-color: var(--line-soft) !important;
}

.search input,
input[type="search"],
input[type="text"] {
  border-radius: 0;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  font-family: var(--font-mono);
}
.search input:focus,
input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--cy-glow);
  outline: none;
}

/* 吉祥物：整张图是"浅底 + 黑线"画的，深色主题下反相才融得进去 */
.mascot__art {
  filter: var(--cy-mascot-filter);
  transition: filter 0.3s var(--ease);
}
.mascot__sticker,
.mascot__sticker2 {
  border-radius: 0;
  border: 1px solid var(--line);
  box-shadow: 2px 2px 0 var(--cy-magenta);
}

/* ==========================================================================
   9. 页脚
   ========================================================================== */
.footer {
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35));
}
.footer__bottom {
  border-top: 1px dashed var(--line-soft);
  color: var(--ink-faint);
}

/* ==========================================================================
   10. 动效：闪烁光标 / 标题故障 / 悬停扫描
   ========================================================================== */
/* 页脚加一个常驻的像素光标，像终端在等人输入 */
.footer__bottom::after {
  content: "_";
  display: inline-block;
  margin-left: 6px;
  color: var(--accent);
  animation: cy-blink 1.1s steps(2) infinite;
}
@keyframes cy-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 主标题轻微故障位移，幅度很小，不晃眼 */
@keyframes cy-glitch {
  0%, 92%, 100% { transform: translate(0, 0); }
  93% { transform: translate(-2px, 1px); }
  95% { transform: translate(2px, -1px); }
  97% { transform: translate(-1px, 0); }
}
.hero__title { animation: cy-glitch 7s steps(1) infinite; }

/* 卡片悬停时一道扫描光划过 */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(0, 233, 255, 0.18) 50%, transparent 65%);
  background-size: 260% 100%;
  transition: opacity 0.2s var(--ease);
}
.card { position: relative; overflow: hidden; }
.card:hover::after {
  opacity: 1;
  animation: cy-sweep 0.7s var(--ease);
}
@keyframes cy-sweep {
  from { background-position: 130% 0; }
  to { background-position: -40% 0; }
}

/* 无障碍：认"减少动效"的系统设置 */
@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .card:hover::after,
  .footer__bottom::after {
    animation: none !important;
  }
  body::after { display: none; }
}

/* ==========================================================================
   11. 打印就别加这些花了
   ========================================================================== */
@media print {
  body::before,
  body::after { display: none; }
  .card::after { display: none; }
}