/* ==========================================================================
   skin-guochao.css — 皮肤 E「国潮·脸谱谱式」（specs/024，概念展板 E 落地）
   --------------------------------------------------------------------------
   一句话：12 个场景族 = 12 张京剧脸谱（谱式颜色即语义：红忠/白奸/黑猛/蓝刚…），
   界面即戏台 —— 生宣底、如意头圆角、朱砂印牌编号、鎏金双裁边、行楷题头。

   与 023 两档的三条纪律一致：只覆写同名 token、零 @font-face、不动几何。
   本档新增两条自己的纪律（守闸 skin-system H 组钉死）：
     1. 照片背景只走 body::after 覆写（同源资产），并隐藏 flow 画布 ——
        画布的实纸填充会把照片盖成一块死色（021 的账反过来算）。
     2. tabbar 与四枚 tab 图标必须随皮肤重设（老板 024 批注：
        「下面的也要变化，小图标每一套都不一样」）—— 图标走 CSS content，
        不碰 app.js 的 TABS 结构，命中区与 aria 全部原样。
   ========================================================================== */

/* ---------- 1. 亮档 token：生宣 × 玄墨 × 朱砂 × 黛蓝 × 鎏金 ---------- */
html[data-skin="guochao"] {
  --paper: #FCF4E2;
  --paper-2: #FDFAF1;
  --paper-3: #F4E9CF;
  --ink: #211B14;
  --ink-soft: #4E4434;
  --ink-faint: #5C5142;              /* 对 --paper 实算 7.1:1 */

  /* 映射：.btn-primary 吃 --pine（黛蓝），.btn-accent 吃 --vermillion（朱砂）。
     实测：#FFF3D6 字在 #A4291F 上 6.5:1 ✓；#FCF4E2 字在 #274062 上 8.6:1 ✓ */
  --vermillion: #A4291F;
  --pine: #274062;
  --pine-deep: #17263C;
  --gold: #B8860B;

  --line: rgba(46, 36, 24, 0.36);
  --line-soft: rgba(46, 36, 24, 0.20);

  --dot: rgba(46, 36, 24, 0.05);
  --tape: rgba(246, 217, 122, 0.66);
  --scrim: rgba(33, 27, 20, 0.58);
  --on-accent: #FFF3D6;
  --on-tag: #EFE5CB;
  --vermillion-soft: rgba(164, 41, 31, 0.45);
  --flow-night: #7A1E14;
  --check-idle: #2E2418;
  --thumb-paper: #FDFAF1;

  --shadow-paper: 3px 4px 0 rgba(46, 36, 24, 0.16);
  --shadow-lift: 6px 8px 0 rgba(46, 36, 24, 0.20);
  --shadow-tag: 2px 2px 0 rgba(46, 36, 24, 0.55);
  --shadow-thumb: 3px 3px 0 rgba(46, 36, 24, 0.22);

  /* 题头走楷体/行楷栈：Windows 有 KaiTi，Android 落 Noto Serif CJK，
     再兜底黑体 —— 全程系统字体，零 webfont 纪律不破 */
  --font-display: "STKaiti", "KaiTi", "Noto Serif CJK SC", "Microsoft YaHei", serif;

  /* 如意头：对角不对称双半径（老板批准的"各皮肤自定圆角体系"） */
  --r-card: 8px 26px 8px 26px;
}

/* ---------- 2. 背景：戏台夜景照片压在宣纸 veil 下（加重版，024 批注） ---------- */
html[data-skin="guochao"] .flow-canvas { display: none; }
html[data-skin="guochao"] body::after {
  background-image:
    linear-gradient(rgba(252, 244, 226, 0.84), rgba(244, 233, 207, 0.90)),
    url("../../assets/skins/guochao-bg.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

/* ---------- 3. 组件：鎏金双裁边 + 朱砂印牌 ---------- */
html[data-skin="guochao"] .card {
  background: var(--paper-2);
  border: 1.5px solid var(--line-soft);
  outline: 1px solid rgba(184, 134, 11, 0.55);
  outline-offset: 3px;
  box-shadow: var(--shadow-paper);
}
html[data-skin="guochao"] .chip {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
}
html[data-skin="guochao"] .chip[aria-pressed="true"] {
  background: var(--vermillion);
  color: var(--on-accent);
  outline: 1px solid var(--gold);
  outline-offset: -3px;
}
/* 026：原来是一圈 1.5px 墨框 + 纸底（“水牌装在木架里”）——框拿掉，
   选中那颗仍然用鎏金底 + 深字（这一档的记忆点是金底云牌，不是一圈线）。 */
html[data-skin="guochao"] .seg { border: none; background: transparent; padding: 0; }
html[data-skin="guochao"] .seg-item { border: none; }
html[data-skin="guochao"] .seg-item[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
html[data-skin="guochao"] .seg-item[aria-selected="true"] { background: var(--gold); color: var(--ink); }
/* 选中项副文字：app.css 把 .k 定死成 --paper，在绢黄底上只有 2.1 —— 配对色必须跟着改 */
html[data-skin="guochao"] .seg-item[aria-pressed="true"] .k { color: var(--ink); }
html[data-skin="guochao"] .seg-item[aria-selected="true"] .k { color: var(--ink); }

html[data-skin="guochao"] .tile { border: 1.5px solid var(--line); }
html[data-skin="guochao"] .tile[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--vermillion);
  box-shadow: 3px 3px 0 rgba(164, 41, 31, 0.35);
}
/* 选中磁贴的字色对：app.css 是 background:--pine + color:--paper 成对，
   这里底换成绢黄，字必须跟着换深，否则纸色字落在金底上（booth 同款陷阱） */
html[data-skin="guochao"] .tile[aria-pressed="true"] { color: var(--ink); }
html[data-skin="guochao"] .tile[aria-pressed="true"] .mark { color: var(--ink); }
html[data-skin="guochao"] .tile[aria-pressed="true"] .label,
html[data-skin="guochao"] .tile[aria-pressed="true"] .tiny,
html[data-skin="guochao"] .tile[aria-pressed="true"] .faint { color: var(--ink); opacity: 1; }

html[data-skin="guochao"] .btn {
  border: 1.5px solid var(--ink);
  box-shadow: 2px 3px 0 rgba(46, 36, 24, 0.20);
  font-weight: 700;
}
html[data-skin="guochao"] .btn-primary {
  background: var(--pine);
  color: #EFE5CB;
  border-color: var(--pine-deep);
  box-shadow: 0 0 0 1px var(--gold) inset, 2px 3px 0 rgba(46, 36, 24, 0.22);
}
html[data-skin="guochao"] .btn-accent {
  background: var(--vermillion);
  color: var(--on-accent);
  border-color: #6E140C;
  box-shadow: 0 0 0 1px var(--gold) inset, 2px 3px 0 rgba(46, 36, 24, 0.22);
}

html[data-skin="guochao"] .tier-cell { border: 1.5px solid var(--line); background: var(--paper-2); }
html[data-skin="guochao"] .tier-cell[aria-pressed="true"] {
  background: var(--vermillion);
  color: var(--on-accent);
  border-radius: 14px 14px 3px 3px;
}
html[data-skin="guochao"] .tier-cell[aria-pressed="true"] .v { color: var(--on-accent); }
html[data-skin="guochao"] .tier-cell[aria-pressed="true"] .k { color: #F6D97A; }

/* 编号 = 朱砂印牌：从"一行小字"升格成一块盖在卡上的章 */
html[data-skin="guochao"] .q-num {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--on-accent);
  background: var(--vermillion);
  min-width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px 8px 8px 22px;
  transform: rotate(-3deg);
  padding: 0 6px;
}
html[data-skin="guochao"] .q-title,
html[data-skin="guochao"] .head h1,
html[data-skin="guochao"] .ticket-title,
html[data-skin="guochao"] .persona-title { font-family: var(--font-display); font-weight: 400; }

/* 票根 = 卷轴：描金边 + 朱砂批 + 篆刻章（不动 ::before/::after 伪元素结构，booth 教训） */
html[data-skin="guochao"] .ticket {
  border: 1.5px solid var(--line-soft);
  outline: 1px solid rgba(184, 134, 11, 0.5);
  outline-offset: 2px;
  box-shadow: var(--shadow-lift);
}
html[data-skin="guochao"] .ticket-blessing {
  background: rgba(164, 41, 31, 0.10);
  border-left: 3px solid var(--vermillion);
  font-family: var(--font-display);
  font-style: normal;
  color: var(--ink);
  opacity: 1;
}
html[data-skin="guochao"] .ticket-stamp {
  border-width: 2.5px;
  border-radius: 6px 6px 6px 18px;
  font-family: var(--font-display);
  opacity: 1;
}
html[data-skin="guochao"] .family-tag {
  background: var(--pine);
  color: var(--on-tag);
  border-radius: 3px 12px 3px 12px;
  font-weight: 700;
}

html[data-skin="guochao"] .lib-bar { background: linear-gradient(180deg, #C99A2E, #8A6A17); }
html[data-skin="guochao"] .progress { height: 6px; border-radius: 3px 12px 3px 12px; background: var(--paper-3); }
html[data-skin="guochao"] .progress > i { background: var(--vermillion); border-radius: 3px 12px 3px 12px; }
html[data-skin="guochao"] .badge.is-owned { border-color: var(--gold); background: var(--paper-3); color: var(--gold); }
html[data-skin="guochao"] .toast { border: 1.5px solid var(--gold); font-weight: 600; }
html[data-skin="guochao"] .level-num { color: var(--vermillion); font-family: var(--font-display); }
html[data-skin="guochao"] .why { border-left: 3px solid var(--gold); }
html[data-skin="guochao"] .safety { border-left: 3px solid var(--pine); }

/* ---------- 4. tabbar = 漆黑戏台板托金；四枚图标换成谱式汉字（024 批注） ---------- */
/* 026：戏台板上沿那根 2.5px 金线拿掉（老板：全局不要外边框、不要“跟上面分开”）；
   黑漆板本身与上方纸色 dock 的色差就是分界，不需要再画一条。 */
html[data-skin="guochao"] .tabbar {
  background: var(--ink);
  border-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-skin="guochao"] .tab { color: #9B8E77; border-radius: 12px 12px 3px 3px; }
html[data-skin="guochao"] .tab[aria-current="page"] {
  color: var(--ink);
  background: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 0 1px #F6D97A inset;
}
/* 图标契约：原 glyph 收掉，::before 换成楷体单字 —— 家/巡/阁/印。
   font-size:0 只作用在 .i 本体，::before 自己把字号提回来 */
html[data-skin="guochao"] .tab .i { font-size: 0; }
html[data-skin="guochao"] .tab .i::before {
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif;
  font-size: 1.05rem;
  line-height: 1;
}
html[data-skin="guochao"] .tab[data-tab="home"] .i::before    { content: "家"; }
html[data-skin="guochao"] .tab[data-tab="quest"] .i::before   { content: "巡"; }
html[data-skin="guochao"] .tab[data-tab="library"] .i::before { content: "阁"; }
html[data-skin="guochao"] .tab[data-tab="profile"] .i::before { content: "印"; }
/* 031：第五枚「广场」——同为字风语系（家巡阁印场） */
html[data-skin="guochao"] .tab[data-tab="plaza"] .i::before  { content: "场"; }

/* ---------- 5. 暗色变体：玄漆鎏金（同方向降明度） ---------- */
@media (prefers-color-scheme: dark) {
  html[data-skin="guochao"] {
    --paper: #17130E;
    --paper-2: #211B14;
    --paper-3: #2C2419;
    --ink: #F2E8CE;
    --ink-soft: #C7B998;
    --ink-faint: #A08F6C;            /* 暗档三级方向翻转：ink 最亮 */

    --vermillion: #C94532;
    --pine: #4A6EA8;
    --pine-deep: #8FB0E0;
    --gold: #C9A24B;

    --line: rgba(201, 162, 75, 0.46);
    --line-soft: rgba(201, 162, 75, 0.26);

    --dot: rgba(201, 162, 75, 0.05);
    --tape: rgba(201, 162, 75, 0.34);
    --scrim: rgba(0, 0, 0, 0.66);
    --on-accent: #FFF3D6;
    --on-tag: #17130E;
    --vermillion-soft: rgba(201, 69, 50, 0.5);
    --flow-night: #5C150C;
    --check-idle: #C9A24B;
    --thumb-paper: #211B14;

    --shadow-paper: 3px 4px 0 rgba(0, 0, 0, 0.5);
    --shadow-lift: 6px 8px 0 rgba(0, 0, 0, 0.55);
    --shadow-tag: 2px 2px 0 rgba(0, 0, 0, 0.6);
    --shadow-thumb: 3px 3px 0 rgba(0, 0, 0, 0.5);
  }
  html[data-skin="guochao"] body::after {
    background-image:
      linear-gradient(rgba(23, 19, 14, 0.86), rgba(23, 19, 14, 0.93)),
      url("../../assets/skins/guochao-bg.jpg");
  }
  html[data-skin="guochao"] .card { outline-color: rgba(201, 162, 75, 0.5); }
  html[data-skin="guochao"] .ticket { outline-color: rgba(201, 162, 75, 0.45); }
  html[data-skin="guochao"] .q-num { color: #17130E; }
  html[data-skin="guochao"] .tabbar { background: #0E0B07; }
  html[data-skin="guochao"] .tab { color: #7A6C52; }
  html[data-skin="guochao"] .tab[aria-current="page"] { background: var(--gold); color: #17130E; }
  /* 暗档的“金底深字”对全部换成黑漆金盘：亮档那些 浅gold+light ink 的组合
     在玄漆底上会反噬（实测选中态 2.1:1），统一换成 #3A2E18 底 + #F6D97A 字 */
  html[data-skin="guochao"] .seg-item[aria-pressed="true"],
  html[data-skin="guochao"] .seg-item[aria-selected="true"],
  html[data-skin="guochao"] .chip[aria-pressed="true"],
  html[data-skin="guochao"] .tile[aria-pressed="true"],
  html[data-skin="guochao"] .tier-cell[aria-pressed="true"] {
    background: #3A2E18;
    color: #F6D97A;
    border-color: #C9A24B;
  }
  html[data-skin="guochao"] .seg-item[aria-pressed="true"] .k,
  html[data-skin="guochao"] .seg-item[aria-selected="true"] .k,
  html[data-skin="guochao"] .tile[aria-pressed="true"] .mark,
  html[data-skin="guochao"] .tile[aria-pressed="true"] .label,
  html[data-skin="guochao"] .tile[aria-pressed="true"] .tiny,
  html[data-skin="guochao"] .tile[aria-pressed="true"] .faint,
  html[data-skin="guochao"] .tier-cell[aria-pressed="true"] .v,
  html[data-skin="guochao"] .tier-cell[aria-pressed="true"] .k { color: #F6D97A; }
}

/* ---------- 9. specs/025 支线页特色装饰（老板批注②：上下铺特东西，大胆一点） ----------
   这一档的记忆点：界面即戏台 —— 上缘一行如意云头（描金），下缘水牌从侧幕里隐下去。
   四条纪律：
     ① 只挂 .quest-body 的伪元素（挂在卡片上下那两条真空白带里，挂 view 会被 dock 与卡片挡住），不新增 DOM、不碰 app.js；
     ② z-index:-1 + pointer-events:none —— 落在字下、不吃点击（021 hit-test 现场拓）；
     ③ 形走 mask、色走 token，所以暗档自动跟着变，不往图里写死颜色；
     ④ prefers-reduced-motion 全静止。 */
html[data-skin="guochao"] .quest-body::before,
html[data-skin="guochao"] .quest-body::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -8px;
  right: -8px;
}
html[data-skin="guochao"] .quest-body::before {
  top: 2px;
  height: 26px;
  background: var(--gold);
  -webkit-mask: url("../../assets/skins/deco-guochao-cloud.svg") repeat-x center / 60px 26px;
  mask: url("../../assets/skins/deco-guochao-cloud.svg") repeat-x center / 60px 26px;
  opacity: .6;
}
html[data-skin="guochao"] .quest-body::after {
  bottom: 0;
  height: 44px;
  background: var(--vermillion);
  -webkit-mask: url("../../assets/skins/deco-guochao-slats.svg") no-repeat center bottom / 220px 44px;
  mask: url("../../assets/skins/deco-guochao-slats.svg") no-repeat center bottom / 220px 44px;
  animation: guochao-curtain 15s ease-in-out infinite alternate;
}
@keyframes guochao-curtain {
  from { transform: translateY(4px); opacity: .12; }
  to   { transform: translateY(-4px); opacity: .22; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="guochao"] .quest-body::after { animation: none; opacity: .16; }
}