/* ==========================================================================
   skin-pixel.css — 皮肤 F「像素·8-bit 街机」（specs/024，概念展板 F 落地）
   --------------------------------------------------------------------------
   一句话：界面放回 1985 —— NES 真实色表、零圆角、砖块切角、硬阶跃阴影、
   CRT 扫描线，街机厅实拍降采样成像素马赛克。抽一条支线 = 投一枚币。

   纪律同 023（只覆写同名 token / 零 @font-face / 不动几何）。
   本档自己的两条：
     1. 像素字体不引 webfont（守闸 E1）——拉丁与编号走系统等宽 + 大字距 + 800 字重，
        像素感由**几何**（0 圆角/硬阴影/扫描线/降采样照片）承担，不靠字体。
     2. 一切切角只落在无命中扩展区的组件上；.chip 永远不 clip ——
        它的 ::after 命中补丁（021 R5）会被 clip-path 剪掉。
   ========================================================================== */

/* ---------- 1. 亮档 token：NES PPU 色表 ---------- */
html[data-skin="pixel"] {
  /* 马力欧天空蓝。亮度必须 ≥.5：守闸 D3 用亮度判“纸的明暗方向”，
     概念稿的 #7FA8F5（.384）会被判成暗纸——方向翻转后整组假失败；
     #A6C2FA（.539）仍是同一片天，配 #0A0A2C 实算 10.8:1 */
  --paper: #A6C2FA;
  --paper-2: #FFFFFF;
  --paper-3: #C4D7FF;
  --ink: #0A0A2C;
  --ink-soft: #141450;
  --ink-faint: #222266;              /* 天空蓝上实算 5.9:1 */

  /* 砖块红 / 水管蓝 / 金币黄。.btn-accent 吃 --vermillion：白字 5.3:1 ✓；
     .btn-primary 吃 --pine：纸色字 10.2:1 ✓ */
  --vermillion: #C8301C;
  --pine: #1830A8;
  --pine-deep: #0C1858;
  --gold: #F8B400;

  --line: rgba(10, 10, 44, 0.45);
  --line-soft: rgba(10, 10, 44, 0.24);

  --dot: rgba(10, 10, 44, 0.07);
  --tape: rgba(248, 180, 0, 0.72);
  --scrim: rgba(10, 10, 44, 0.62);
  --on-accent: #FFFFFF;
  --on-tag: #FFFFFF;
  --vermillion-soft: rgba(200, 48, 28, 0.45);
  --flow-night: #7A1E10;
  --check-idle: #0A0A2C;
  --thumb-paper: #FFFFFF;

  --shadow-paper: 4px 4px 0 rgba(10, 10, 44, 0.28);
  --shadow-lift: 8px 8px 0 rgba(10, 10, 44, 0.32);
  --shadow-tag: 2px 2px 0 rgba(10, 10, 44, 0.9);
  --shadow-thumb: 3px 3px 0 rgba(10, 10, 44, 0.3);

  --font-display: "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;

  /* 形：全部剃平 —— 圆是 16-bit 之后的事 */
  --r-card: 0px;
  --r-btn: 0px;
  --r-pill: 0px;
}

/* ---------- 2. 背景：街机厅实拍 w=140 降采样 → 放大即像素马赛克 ---------- */
html[data-skin="pixel"] .flow-canvas { display: none; }
html[data-skin="pixel"] body::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(10, 10, 44, 0.14) 0 2px, transparent 2px 4px),
    linear-gradient(rgba(166, 194, 250, 0.72), rgba(166, 194, 250, 0.84)),
    url("../../assets/skins/pixel-bg.jpg");
  background-size: auto, auto, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  image-rendering: pixelated;
}
/* 网点层换成 8px 方点阵 —— 圆点属于纸，不属于像素 */
html[data-skin="pixel"] body::before {
  background-image: repeating-linear-gradient(90deg, var(--dot) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(0deg, var(--dot) 0 2px, transparent 2px 8px);
  background-size: auto;
}

/* ---------- 3. 组件：砖块 + 硬黑框 ---------- */
html[data-skin="pixel"] .card,
html[data-skin="pixel"] .tile,
html[data-skin="pixel"] .lib-row,
html[data-skin="pixel"] .stat,
html[data-skin="pixel"] .sheet,
html[data-skin="pixel"] .input,
html[data-skin="pixel"] .one-line-field textarea {
  /* 026：.seg 从这一组里拿出去 —— 卡片/输入框的 3px 砖块框是这一档的主体语言，
     但一排选项外面再套一圈黑框，就是老板点名要拆的“矩形外框”。 */
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--paper-2);
}
html[data-skin="pixel"] .card { box-shadow: var(--shadow-lift); }
html[data-skin="pixel"] .chip {
  border: 3px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-weight: 700;
  background: var(--paper-2);
}
html[data-skin="pixel"] .chip[aria-pressed="true"] { background: var(--gold); }

html[data-skin="pixel"] .tile[aria-pressed="true"] {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
html[data-skin="pixel"] .tile[aria-pressed="true"] .mark { color: var(--ink); }
html[data-skin="pixel"] .tile[aria-pressed="true"] .label,
html[data-skin="pixel"] .tile[aria-pressed="true"] .tiny,
html[data-skin="pixel"] .tile[aria-pressed="true"] .faint { color: var(--ink); opacity: 1; }

html[data-skin="pixel"] .btn {
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 800;
  letter-spacing: 0.04em;
}
html[data-skin="pixel"] .btn:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}
html[data-skin="pixel"] .btn-primary { background: var(--vermillion); color: var(--on-accent); }
html[data-skin="pixel"] .btn-accent { background: var(--pine); color: #FFFFFF; }
html[data-skin="pixel"] .btn-quiet { border: 3px dashed var(--ink); background: transparent; }
html[data-skin="pixel"] .btn.is-locked { background: var(--paper-3); box-shadow: none; border-style: dashed; }

/* 026：整排选项不再装在一块黑底板上（那也是一层“框”），改成直接坐在天空蓝纸上：
   未选中 = 纸色方块，选中 = 金币方块 —— NES 的区分靠色块，不靠边框。 */
html[data-skin="pixel"] .seg { padding: 0; background: transparent; border: none; }
html[data-skin="pixel"] .seg-item { border: none; border-radius: 0; background: var(--paper-2); color: var(--ink); }
html[data-skin="pixel"] .seg-item[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
html[data-skin="pixel"] .seg-item[aria-selected="true"] { background: var(--gold); color: var(--ink); }
html[data-skin="pixel"] .seg-item[aria-pressed="true"] .k { color: var(--ink); }
html[data-skin="pixel"] .seg-item[aria-selected="true"] .k { color: var(--ink); }

html[data-skin="pixel"] .tier-cell { border: 3px solid var(--ink); background: var(--paper-2); border-radius: 0; }
html[data-skin="pixel"] .tier-cell[aria-pressed="true"] {
  background: var(--vermillion);
  color: var(--on-accent);
  box-shadow: 4px 4px 0 var(--ink);
  transform: translateY(-2px);
}
html[data-skin="pixel"] .tier-cell[aria-pressed="true"] .v,
html[data-skin="pixel"] .tier-cell[aria-pressed="true"] .k { color: var(--on-accent); }

/* 编号 = 金币像素字：等宽 + 描边阴影，一步到位 */
html[data-skin="pixel"] .q-num {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--ink);
}
html[data-skin="pixel"] .q-title,
html[data-skin="pixel"] .head h1,
html[data-skin="pixel"] .ticket-title,
html[data-skin="pixel"] .persona-title,
html[data-skin="pixel"] .stat .n,
html[data-skin="pixel"] .level-num { font-weight: 800; }
/* Lv 数字：金币黄在白卡上只 1.85 —— 换砖红（白卡上 5.3），像素阴影保留 */
html[data-skin="pixel"] .level-num { color: var(--vermillion); text-shadow: 2px 2px 0 var(--ink); }
html[data-skin="pixel"] .eyebrow { font-family: var(--font-mono); font-weight: 700; }

/* 票根 = 车票：方齿孔用背景色圆缺角伪物？不 —— 伪元素是胶带与侧标（booth 教训），
   这里只加厚边、硬投影与 COIN 章 */
html[data-skin="pixel"] .ticket {
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink);
}
html[data-skin="pixel"] .ticket-body { border-radius: 0; }
html[data-skin="pixel"] .ticket-stamp {
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--gold);
  color: var(--ink);
  font-weight: 800;
  opacity: 1;
  transform: none;
}
html[data-skin="pixel"] .ticket-blessing {
  border: 3px dashed var(--ink);
  border-radius: 0;
  background: var(--paper-3);
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
  opacity: 1;
}
html[data-skin="pixel"] .family-tag { border: 2px solid var(--ink); border-radius: 0; font-weight: 700; }

html[data-skin="pixel"] .lib-bar { width: 8px; flex-basis: 8px; background: var(--pine); border-right: 2px solid var(--ink); }
html[data-skin="pixel"] .progress { height: 8px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper-3); }
html[data-skin="pixel"] .progress > i { border-radius: 0; background: var(--vermillion); }
html[data-skin="pixel"] .badge { border-radius: 0; border: 2px solid var(--ink); }
html[data-skin="pixel"] .badge.is-owned { background: var(--gold); color: var(--ink); }
html[data-skin="pixel"] .toast { border: 3px solid var(--gold); border-radius: 0; font-weight: 700; }
html[data-skin="pixel"] .check-box { border: 3px solid var(--ink); border-radius: 0; }
html[data-skin="pixel"] .why, html[data-skin="pixel"] .safety { border: 2px dashed var(--ink); border-radius: 0; }

/* ---------- 4. tabbar = 深蓝机厅板 + 金币选中块；图标换像素方块（024 批注） ---------- */
/* 026：上沿那根 4px 金边拿掉（老板：全局不要外边框、不要“跟上面分开”）。
   随之 --tabbar-h 回到默认 74 —— 上一轮为这根金边抬到 78 的那笔账同时作废
   （025 量到的“各视图恒正溢 4px”本来就是这根线造成的，线在才要补，线拆了就不补）。 */
html[data-skin="pixel"] .tabbar {
  background: var(--ink);
  border-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-skin="pixel"] .tab { color: #8C9CFF; border-radius: 0; }
html[data-skin="pixel"] .tab[aria-current="page"] {
  color: var(--ink);
  background: var(--gold);
  font-weight: 800;
}
html[data-skin="pixel"] .tab .i { font-size: 0; }
html[data-skin="pixel"] .tab .i::before {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.2rem;
  line-height: 1;
}
html[data-skin="pixel"] .tab[data-tab="home"] .i::before    { content: "▉"; }
html[data-skin="pixel"] .tab[data-tab="quest"] .i::before   { content: "✚"; }
html[data-skin="pixel"] .tab[data-tab="library"] .i::before { content: "▦"; }
html[data-skin="pixel"] .tab[data-tab="profile"] .i::before { content: "▤"; }
/* 031：第五枚「广场」——NES 金币菱（同档不与 ▉✚▦▤ 重） */
html[data-skin="pixel"] .tab[data-tab="plaza"] .i::before  { content: "◆"; }

/* ---------- 5. 暗色变体：午夜机厅（CRT 熄灭） ---------- */
@media (prefers-color-scheme: dark) {
  html[data-skin="pixel"] {
    --paper: #0B0B23;
    --paper-2: #1C1C46;
    --paper-3: #2B2B6E;
    --ink: #E8ECFF;
    --ink-soft: #AEB8E8;
    --ink-faint: #8E97C9;

    --vermillion: #E04A38;
    --pine: #3CBCFC;
    --pine-deep: #8ADFFF;
    --gold: #F8B400;

    --line: rgba(190, 200, 255, 0.42);
    --line-soft: rgba(190, 200, 255, 0.24);

    --dot: rgba(190, 200, 255, 0.06);
    --tape: rgba(248, 180, 0, 0.42);
    --scrim: rgba(0, 0, 0, 0.7);
    --on-accent: #0B0B23;
    --on-tag: #0B0B23;
    --vermillion-soft: rgba(224, 74, 56, 0.5);
    --flow-night: #5C1A10;
    --check-idle: #3CBCFC;
    --thumb-paper: #1C1C46;

    --shadow-paper: 4px 4px 0 rgba(60, 188, 252, 0.28);
    --shadow-lift: 8px 8px 0 rgba(60, 188, 252, 0.30);
    --shadow-tag: 2px 2px 0 rgba(60, 188, 252, 0.85);
    --shadow-thumb: 3px 3px 0 rgba(60, 188, 252, 0.28);
  }
  html[data-skin="pixel"] body::after {
    background-image:
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 2px, transparent 2px 4px),
      linear-gradient(rgba(11, 11, 35, 0.80), rgba(11, 11, 35, 0.90)),
      url("../../assets/skins/pixel-bg.jpg");
  }
  html[data-skin="pixel"] .card,
  html[data-skin="pixel"] .tile,
  html[data-skin="pixel"] .chip,
  html[data-skin="pixel"] .seg,
  html[data-skin="pixel"] .btn,
  html[data-skin="pixel"] .ticket,
  html[data-skin="pixel"] .tier-cell,
  html[data-skin="pixel"] .lib-row { border-color: #3CBCFC; }
  html[data-skin="pixel"] .btn { box-shadow: 4px 4px 0 #1F1F52; }
  /* 暗档金币选中块：ink 已翻成浅字，压在金币上反而看不见 —— 选中态固定深字 */
  html[data-skin="pixel"] .seg-item[aria-pressed="true"],
  html[data-skin="pixel"] .seg-item[aria-selected="true"],
  html[data-skin="pixel"] .seg-item[aria-pressed="true"] .k,
  html[data-skin="pixel"] .seg-item[aria-selected="true"] .k,
  html[data-skin="pixel"] .chip[aria-pressed="true"],
  html[data-skin="pixel"] .tile[aria-pressed="true"],
  html[data-skin="pixel"] .tile[aria-pressed="true"] .label,
  html[data-skin="pixel"] .tile[aria-pressed="true"] .tiny,
  html[data-skin="pixel"] .tile[aria-pressed="true"] .faint { color: #0B0B23; }
  html[data-skin="pixel"] .ticket { box-shadow: 6px 6px 0 #1F1F52; }
  html[data-skin="pixel"] .q-num { text-shadow: 3px 3px 0 #1F1F52; }
  html[data-skin="pixel"] .tabbar { background: #05050F; }
  html[data-skin="pixel"] .tab { color: #5E6B94; }
  html[data-skin="pixel"] .tab[aria-current="page"] { background: var(--gold); color: #0B0B23; }
}

/* ---------- 9. specs/025 支线页特色装饰 ----------
   这一档的记忆点：1985 的关卡布景 —— 上面一朵像素云匀速横飘（steps() 跳帧，
   不是平滑移动，那是 NES 的时钟感），下面一排问号砖块隔几拍弹一下。
   纪律同国潮档：.quest-body 伪元素 / z-index:-1 / pointer-events:none / reduced-motion 静止。 */
html[data-skin="pixel"] .quest-body::before,
html[data-skin="pixel"] .quest-body::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0;
  right: 0;
}
html[data-skin="pixel"] .quest-body::before {
  top: 6px;
  height: 32px;
  background: var(--paper-3);
  -webkit-mask: url("../../assets/skins/deco-pixel-cloud.svg") repeat-x left top / 64px 32px;
  mask: url("../../assets/skins/deco-pixel-cloud.svg") repeat-x left top / 64px 32px;
  animation: pixel-cloud 22s steps(44) infinite;
}
@keyframes pixel-cloud {
  from { -webkit-mask-position-x: 0; mask-position-x: 0; }
  to   { -webkit-mask-position-x: 352px; mask-position-x: 352px; }
}
html[data-skin="pixel"] .quest-body::after {
  bottom: 4px;
  height: 40px;
  /* 砖块：8px 一格的硬方格，两块一组，带上沿高光与下沿影 */
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 24px 24px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 44px 0 / 24px 24px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 88px 0 / 24px 24px no-repeat,
    linear-gradient(var(--paper-3), var(--paper-3)) 0 24px / 24px 4px no-repeat,
    linear-gradient(var(--paper-3), var(--paper-3)) 44px 24px / 24px 4px no-repeat,
    linear-gradient(var(--paper-3), var(--paper-3)) 88px 24px / 24px 4px no-repeat;
  left: 12px;
  right: auto;
  animation: pixel-brick 3.2s steps(2) infinite;
}
@keyframes pixel-brick {
  0%, 84%  { transform: translateY(0); }
  90%      { transform: translateY(-6px); }
  96%,100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="pixel"] .quest-body::before,
  html[data-skin="pixel"] .quest-body::after { animation: none; }
}

/* ---------- 10. specs/025 单屏化补账 ----------
   机厅档自带 2px 硬描边，档案页 7 张卡叠下来比默认档高出一截（实测 ≤667 高的窗口溢 23px）。
   描边是这一档的线条语言，不动；收的是卡间距 —— 档案页本来就不靠留白读。 */
@media (max-height: 700px) {
  html[data-skin="pixel"] #view-profile > .stack { gap: var(--sp-1); }
  /* 卡内那层 gap 也算账：7 张卡各收 4px 才能把 2px 描边多出来的高度全部补回 */
  html[data-skin="pixel"] #view-profile .card.stack { gap: var(--sp-1); }
}