/* =========================================================
   薪火长征路 · 山河作证 — 游戏页暗色皮肤
   games/route.html / run.html / defend.html 共用。
   与首页（home.css）及子页（pages-skin.css）同一套语言：
   墨底 · 宣纸字 · 丹砂点缀 · 旧金细线。

   分层原则：
   1) 页面外壳（顶栏 / 标题 / 说明面板 / 页脚）全部转为暗色；
   2) canvas 内的游戏世界保持原画（可玩性优先），只换暗色画框；
   3) 叠在浅色画布上的 HUD（里程 / 弹药）保留深色文字，保证对比度；
   4) 结业证书仍是一张纸 —— 纸就该是纸，不做暗化。

   加载顺序：各页内联 <style> → 本文件
   ========================================================= */

/* ---------- 令牌：把游戏页的"浅米黄 + 中国红"翻到山河纪 ---------- */
:root{
  --red:        #a6241b;
  --red-deep:   #5a1410;
  --red-bright: #c0392b;
  --army:       #8a6e3c;
  --army-deep:  #5c4a28;

  --beige:      #ede3d2;
  --beige-soft: #0c0908;   /* 原解锁卡浅底 → 墨底 */
  --paper:      #0f0b09;   /* 仅用于 route 地图面板底色 */
  --ink:        #ede3d2;   /* 游戏页里 --ink 是"文字色"，翻成宣纸色 */

  --muted:      #a2947f;
  --line:       rgba(216,174,98,.18);
  --gold:       #d8ae62;

  --gold-lt:    #e8c985;
  --gold-dk:    #8a6e3c;
  --hairline:   rgba(216,174,98,.14);

  --font-title: "Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",Georgia,serif;
}

/* ---------- 基底 ---------- */
body{
  background:
    radial-gradient(60% 42% at 50% -6%,rgba(166,36,27,.14),transparent 70%),
    radial-gradient(42% 34% at 88% 10%,rgba(216,174,98,.05),transparent 72%),
    #0c0908;
  background-attachment:fixed;
  color:var(--ink);
}
::selection{background:rgba(166,36,27,.55);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- 顶栏 ---------- */
.g-header{
  background:linear-gradient(180deg,rgba(12,9,8,.97),rgba(12,9,8,.89));
  border-bottom:1px solid rgba(216,174,98,.16);
  box-shadow:0 1px 0 rgba(166,36,27,.22);
}
.g-brand{color:var(--ink)}
.g-brand .s{
  width:auto;height:auto;border-radius:0;background:transparent;
  color:var(--red-bright);font-size:20px;
  filter:drop-shadow(0 0 10px rgba(192,57,43,.5));
}
.g-title{color:var(--ink)}
.g-progress{color:var(--muted)}
.g-progress b{color:var(--gold-lt)}
.sound-btn{color:var(--ink);border-color:rgba(216,174,98,.24)}
.sound-btn:hover{background:rgba(216,174,98,.1)}

.lang-switch{
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(216,174,98,.2);
}
.lang-switch button{color:var(--muted)}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button.on{background:var(--red);color:#f7ecdb;font-weight:600}

/* ---------- 标题区 / 返回 ---------- */
.head h1{color:var(--ink);letter-spacing:.14em}
.head .sub{color:var(--muted);letter-spacing:.14em}
.head .back{
  color:var(--gold);
  border:1px solid rgba(216,174,98,.34);
  letter-spacing:.06em;
}
.head .back:hover{background:rgba(216,174,98,.1);color:var(--gold-lt);border-color:rgba(216,174,98,.6)}

/* ---------- 按钮 ---------- */
.btn-main{
  background:var(--red);color:#f7ecdb;
  border:1px solid rgba(216,174,98,.2);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  letter-spacing:.1em;
}
.btn-main:hover{background:var(--red-bright)}

/* ---------- 锐角化 ----------
   游戏页原为 14–20px 大圆角（偏 app 风），首页与子页统一走 2–4px 近直角，
   这里把面板类收齐，避免同一站里两种圆角语言并存。按钮保留胶囊形。 */
.map-panel,.game-panel,.panel,.unlock-card,.start-card,.cert-card{
  border-radius:3px;
}
.stage{border-radius:3px}

/* =========================================================
   route —— 地图面板（整张纸翻转成暗色地形图）
   ========================================================= */
.map-panel{
  background:var(--paper);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(216,174,98,.22),0 0 0 5px #0a0706;
}
.map-head{
  background:#171210;
  border-bottom:1px dashed rgba(216,174,98,.28);
  color:var(--muted);
}
.map-head .mh-l{color:var(--gold-lt)}
.map-head .seal{background:transparent;color:var(--red-bright);border-radius:0;font-size:15px}
.map-head b{color:var(--gold)}
.map-stage{background:#0f0b09}
.map-foot{
  background:#171210;
  border-top:1px dashed rgba(216,174,98,.28);
  color:var(--muted);
}
.legend .l1{background:var(--red)}
.legend .l2{background:transparent;border:2px solid var(--gold)}
.legend .l3{background:var(--gold-dk)}

.seg{stroke:rgba(216,174,98,.34)}
.seg.done{
  stroke:var(--red-bright);
  filter:drop-shadow(0 0 6px rgba(166,36,27,.55));
}
.node circle.core{fill:#120d0b;stroke:var(--gold)}
.node.done circle.core{fill:var(--red);stroke:var(--gold-lt)}
.node.current circle.core{fill:var(--gold);stroke:var(--gold-lt)}
.node text{fill:#d8ccba}
.node.current text{fill:var(--gold-lt);font-weight:bold}
.cartouche text{fill:var(--gold-dk)}
.terrain path{opacity:.72}

/* route —— 答题面板 */
.game-panel{
  background:linear-gradient(180deg,#171210 0%,#100b09 100%);
  border:1px solid var(--hairline);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lv-badge{background:var(--red);color:#f7ecdb;border:1px solid rgba(216,174,98,.22)}
.lv-badge .dot{background:var(--gold-lt)}
.lv-count{color:var(--muted)}
.game-panel h2{color:var(--ink)}
.game-panel h2 .no{color:var(--gold)}
.lv-tip{color:var(--muted)}
.lv-tip b{color:var(--gold-lt)}

.bar{background:rgba(255,255,255,.07)}
.bar i{background:linear-gradient(90deg,var(--gold-dk),var(--red))}

.slots-label{color:var(--muted)}
.slots{
  background:rgba(255,255,255,.025);
  border:1px dashed rgba(216,174,98,.26);
}
.slots .ph{color:rgba(162,148,127,.65)}
.slot{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--ink);
}
.slot .n{background:var(--army);color:#f7ecdb}
.slot.ok{border-color:rgba(138,110,60,.8);background:rgba(138,110,60,.18);color:#e8dcc0}
.slot.bad{border-color:var(--red-bright);background:rgba(166,36,27,.22);color:#f5dcda}
.arrow{color:var(--gold-dk)}

.card{
  background:linear-gradient(158deg,rgba(26,20,15,.94),rgba(11,8,7,.96));
  border:1px solid var(--hairline);
  color:var(--ink);
}
.card:hover{
  border-color:rgba(216,174,98,.5);
  box-shadow:0 10px 26px rgba(0,0,0,.42);
}
.card .idx{background:rgba(216,174,98,.14);color:var(--gold)}
.card .c-title{color:var(--ink)}
.card .c-desc{color:var(--muted)}
.card .c-date{color:var(--gold)}
.card.picked{opacity:.38}
.card.picked .idx{background:var(--red);color:#f7ecdb}

.btn-ghost{
  border:1px solid rgba(216,174,98,.3);
  background:transparent;color:var(--muted);
}
.btn-ghost:hover{
  background:rgba(216,174,98,.1);
  border-color:rgba(216,174,98,.55);
  color:var(--gold-lt);
}
.btn-ghost.on{background:var(--red);border-color:rgba(216,174,98,.3);color:#f7ecdb}

.toast{
  background:#171210;border:1px solid rgba(216,174,98,.3);color:var(--ink);
  box-shadow:0 18px 46px rgba(0,0,0,.6);
}
.toast.ok{background:#141a10;border-color:rgba(138,110,60,.7);color:#e8dcc0}

/* route —— 解锁卡 / 故事 */
.overlay{background:rgba(5,3,3,.82)}
.unlock-card{
  background:linear-gradient(180deg,#17120f,#0c0908);
  border-top:1px solid rgba(216,174,98,.5);
  box-shadow:0 40px 100px rgba(0,0,0,.75);
}
.unlock-body h3{color:var(--ink)}
.unlock-head .u-tag{background:rgba(166,36,27,.9);color:#f7ecdb;border:1px solid rgba(216,174,98,.24)}
.unlock-head .u-date{color:var(--muted)}
.story{
  color:var(--ink);
  background:rgba(216,174,98,.05);
  border-left:2px solid var(--gold);
  border-radius:0 3px 3px 0;
}
.unlock-body p.intro{color:var(--muted)}
.photo{border:1px solid var(--hairline)}

/* route —— 证书：纸就留纸。
   注意这里是全站唯一的浅色块，卡内控件要跟着走浅色，
   否则白纸上会出现一个突兀的墨色输入框。 */
.cert-card{
  background:#fffaf0;
  box-shadow:0 40px 100px rgba(0,0,0,.75),0 0 0 1px rgba(216,174,98,.3);
}
.cert-card h2{color:#5a1410}
.cert-card .sub{color:#8a7a5e}
.name-row{color:#5a4a38}
.name-row input{
  border:1px solid rgba(140,110,60,.4);
  background:#fff;
  color:#3a2c1e;
}
.name-row input:focus{border-color:#a6241b}
.btn-line{
  border:1px solid rgba(166,36,27,.55);color:#8f1116;
}
.btn-line:hover{background:rgba(166,36,27,.08);color:#5a1410}

/* =========================================================
   run / defend —— 舞台与说明面板
   ========================================================= */
.stage{
  border:1px solid rgba(216,174,98,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(216,174,98,.12);
}

.panel{
  background:linear-gradient(180deg,rgba(23,18,16,.96),rgba(12,9,8,.97));
  border:1px solid var(--hairline);
  border-radius:3px;
  box-shadow:0 22px 54px rgba(0,0,0,.42);
}
.rules li{color:#c4b6a0}
.rules .n{background:var(--red);color:#f7ecdb}
.rules b{color:var(--gold-lt)}
.legend{border-top:1px dashed rgba(216,174,98,.18)}
.legend .it{color:var(--muted)}
.foot{color:rgba(162,148,127,.75)}
.foot a{color:var(--gold-dk);border-bottom:1px solid rgba(216,174,98,.3)}
.foot a:hover{color:var(--gold-lt)}

/* run —— 开屏/结束遮罩改均匀墨色（游戏开始时遮罩消失，露出原画）。
   原先是"中间实、四周透"的径向渐变，暗化后会在浅色天空上留下一个暗斑，
   故改为均匀半透，只留一点画面轮廓。 */
.g-run .ov{
  background:linear-gradient(180deg,rgba(10,7,6,.94) 0%,rgba(10,7,6,.88) 100%);
}
.g-run .ov h2{color:var(--ink);letter-spacing:.18em}
.g-run .ov .ov-sub{color:var(--muted)}
.g-run .ov .ov-line{color:var(--ink)}
.g-run .ov .ov-line b{color:var(--gold-lt)}
.g-run .ov .ov-line2{color:var(--muted)}
.g-run .ov .ov-line2 b{color:var(--gold)}
.g-run .ov .ov-hint{color:var(--muted)}
.g-run .ov .star{color:var(--gold-lt)}
.g-run .ov .keys kbd{
  color:var(--ink);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(216,174,98,.28);
}
/* HUD 压在浅色画布上，保留深色数字 */
.g-run .hud{color:#6b5a3e}
.g-run .hud b{color:#7a0c10}
.g-run .hud .hud-r b{color:#8a6a45}

/* defend —— 遮罩本就叠在夜色画布上，只统一字色 */
.g-defend .ov .kicker{color:var(--gold)}
.g-defend .ov h2{color:var(--ink)}
.g-defend .ov .ov-sub{color:var(--muted)}
.g-defend .ov .ov-hint{color:var(--muted)}
.g-defend .ov .big{color:var(--red-bright)}
.g-defend .stats b{color:var(--gold-lt)}
.g-defend .stats span{color:var(--muted)}
.g-defend .diff button{
  border:1px solid rgba(216,174,98,.3);
  background:transparent;color:var(--muted);
}
.g-defend .diff button.on{background:var(--red);color:#f7ecdb;border-color:rgba(216,174,98,.3)}

/* 触屏手柄 */
.pad button{
  border:1px solid rgba(216,174,98,.26);
  background:rgba(255,255,255,.05);
  color:var(--ink);
}
.pad #btnJump{
  background:linear-gradient(180deg,var(--red-bright),var(--red));
  border-color:rgba(216,174,98,.28);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.pad #btnJump:active{background:var(--red-deep)}