/* 亮剑：攻打县城 —— 宣纸战报主题（主菜单、暂停、结算共用） */
:root {
  --paper: #efe3c4; --paper2: #e4d5ae; --ink: #2a231b; --ink2: #5a4a38; --red: #b3261e; --red2: #7f1712; --gold: #d9a520; --line: #b9a36f;
  --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px;
  --kai: "STKaiti", "KaiTi", "楷体", "Kaiti SC", "Songti SC", serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #17130f; color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
[hidden] { display: none !important; }

#stage {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; transform-origin: 0 0; background: #17130f;
  --sal: var(--pl); --sar: var(--pr); --sat: var(--pt); --sab: var(--pb);
  --action: 76px; --gap: 12px; --edge: 28px; --bedge: 26px;
  --u: 1.2px;   /* 触屏单位：#touch 的按键和 #hud 里的字幕共用，所以定义在 #stage 上 */
}
#stage.rot { --sal: var(--pt); --sat: var(--pr); --sar: var(--pb); --sab: var(--pl); }
#gl { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#look { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; touch-action: none; }
#binoc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
#vignette { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 6; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(180, 20, 10, 0) 52%, rgba(190, 24, 12, .78) 100%); }

#labels { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 7; pointer-events: none; }
#labels span { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); font-size: 12px; font-weight: 800; color: #fff8e0; padding: 1px 6px; border-radius: 6px; background: rgba(30, 24, 18, .55); white-space: nowrap; }
#labels span.foe { background: rgba(140, 20, 14, .7); }

/* ---------- 战斗信息 ---------- */
#hud { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; pointer-events: none; }
#hud-left { position: absolute; left: calc(var(--sal) + 10px); top: calc(var(--sat) + 10px); max-width: 46%; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
#hp-row { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 10px; background: rgba(30, 24, 18, .55); }
#hp-pips { display: flex; gap: 3px; }
#hp-pips i { width: 15px; height: 17px; background: #d93a2b; border: 2px solid #fff3d6; border-radius: 3px 3px 7px 7px; }
#hp-pips i.off { background: rgba(0, 0, 0, .45); border-color: rgba(255, 243, 214, .5); }
#hp-pips.low i:not(.off) { background: #ff5a3c; }
#hp-pips.blink i:not(.off) { background: #fff; }
#lives, #score { font-size: 14px; font-weight: 900; color: #fff3d6; text-shadow: 0 1px 2px #000; white-space: nowrap; }
#score { color: #ffd84a; }
#objective { font-size: 14px; font-weight: 800; color: #fff3d6; background: rgba(30, 24, 18, .55); border-left: 4px solid var(--gold); padding: 5px 10px; border-radius: 4px 10px 10px 4px; line-height: 1.35; }
#objective b { color: #ffd84a; }
#cannon-row { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #fff3d6; background: rgba(30, 24, 18, .55); padding: 4px 9px; border-radius: 10px; }
#cannon-row i, #boss i { display: block; width: 130px; height: 9px; background: rgba(0, 0, 0, .5); border: 1px solid #fff3d6; border-radius: 5px; overflow: hidden; }
#cannon-bar { display: block; height: 100%; width: 100%; background: #6fbf5a; }
#cannon-bar.low { background: #ff5a3c; }

#hud-top { position: absolute; top: calc(var(--sat) + 10px); right: calc(var(--sar) + 10px); display: flex; gap: 8px; align-items: center; z-index: 20; pointer-events: auto; }
#hud-top button { min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 12px; white-space: nowrap; background: rgba(239, 227, 196, .93); border: 2px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 800; box-shadow: 0 3px 0 rgba(40, 30, 16, .45); touch-action: none; }
#hud-top button .kb { color: var(--red); margin-right: 5px; font-family: ui-monospace, Consolas, monospace; }
#hud-top button:active, #hud-top button.down { transform: translateY(2px); box-shadow: none; }
#demo-badge { padding: 7px 10px; border-radius: 10px; background: var(--red); color: #fff; font-size: 13px; font-weight: 900; border: 2px solid #ffb3a6; white-space: nowrap; }
body.touch-on .kb { display: none; }

#marker { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%); }
#marker i { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 15px solid #ffd84a; filter: drop-shadow(0 1px 2px #000); }
#marker span { font-size: 12px; font-weight: 900; color: #ffd84a; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; --cc: rgba(255, 246, 223, .95); }
#crosshair::before, #crosshair::after { content: ''; position: absolute; left: 50%; top: 50%; background: linear-gradient(var(--cc), var(--cc)) 0 0 / 100% 9px no-repeat, linear-gradient(var(--cc), var(--cc)) 0 100% / 100% 9px no-repeat; filter: drop-shadow(0 0 1.5px rgba(20, 14, 6, .95)); }
#crosshair::before { width: 2px; height: 30px; margin: -15px 0 0 -1px; }
#crosshair::after { width: 2px; height: 30px; margin: -15px 0 0 -1px; transform: rotate(90deg); }
#crosshair i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 2px rgba(20, 14, 6, .95); }
#crosshair.mag { --cc: #ff5a3c; }
#crosshair.ads { transform: scale(.72); }
#crosshair.hit { --cc: #fff; transform: scale(1.25) rotate(45deg); }
#crosshair.head { --cc: #ffd84a; transform: scale(1.5) rotate(45deg); }
#cross-tip { position: absolute; left: 50%; top: calc(50% + 26px); transform: translateX(-50%); font-size: 13px; font-weight: 900; color: #ffe9a8; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
#cross-tip.head { color: #ffd84a; font-size: 16px; }
#aim-info { position: absolute; left: 50%; top: calc(var(--sat) + 62px); transform: translateX(-50%); padding: 6px 14px; border-radius: 10px; background: rgba(30, 24, 18, .7); border: 2px solid var(--gold); color: #fff3d6; font-size: 14px; font-weight: 800; white-space: nowrap; }
#aim-info b { color: #ffd84a; }
#aim-info.ok { border-color: #6fbf5a; }
#aim-info.ok b { color: #9be07f; }

#skills { position: absolute; right: calc(var(--sar) + 12px); bottom: calc(var(--sab) + 12px); display: flex; gap: 8px; }
#skills div { min-width: 86px; padding: 6px 10px; border-radius: 10px; background: rgba(30, 24, 18, .62); border: 2px solid rgba(239, 227, 196, .55); color: #fff3d6; font-size: 12px; font-weight: 800; line-height: 1.35; text-align: center; }
#skills div b { display: inline-block; min-width: 20px; padding: 0 3px; margin-right: 4px; border-radius: 5px; background: #efe3c4; color: var(--ink); font-family: ui-monospace, Consolas, monospace; }
#skills div em { display: block; font-style: normal; color: #ffd84a; font-size: 12px; }
#skills div.off { border-color: rgba(255, 110, 90, .7); }
#skills div.off em { color: #ff9a88; }
#keyhint { position: absolute; left: calc(var(--sal) + 12px); bottom: calc(var(--sab) + 12px); max-width: 52%; font-size: 12px; font-weight: 700; color: #fff3d6; background: rgba(30, 24, 18, .55); border-radius: 10px; padding: 6px 10px; line-height: 1.6; }
#keyhint .kh { display: inline-block; white-space: nowrap; margin-right: .7em; }
#keyhint kbd { display: inline-block; min-width: 18px; padding: 0 4px; margin: 0 2px; border-radius: 4px; background: #efe3c4; color: var(--ink); font: 800 11px ui-monospace, Consolas, monospace; text-align: center; }
body.touch-on #skills, body.touch-on #keyhint { display: none; }

#boss { position: absolute; left: 50%; bottom: calc(var(--sab) + 14px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 10px; background: rgba(30, 24, 18, .7); color: #ffd0c8; font-size: 14px; font-weight: 900; white-space: nowrap; }
#boss i { width: 340px; height: 12px; border-color: #ffb3a6; }
#boss i b { display: block; height: 100%; background: linear-gradient(90deg, #ff5a3c, #b3261e); }
#boss.stun span::after { content: ' · 破绽！'; color: #ffd84a; }
#dialog { position: absolute; left: 50%; bottom: calc(var(--sab) + 86px); transform: translateX(-50%); max-width: min(70%, 720px); padding: 8px 16px; border-radius: 12px; background: rgba(30, 24, 18, .8); border: 2px solid rgba(239, 227, 196, .6); color: #fff8e6; font-size: 17px; font-weight: 700; line-height: 1.4; text-align: center; }
#dialog b { color: #ffd84a; margin-right: 8px; font-family: var(--kai); font-size: 19px; }
#dialog.foe b { color: #ff9a88; }
#prompt { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); padding: 8px 16px; border-radius: 12px; background: rgba(179, 38, 30, .9); border: 2px solid #ffd84a; color: #fff; font-size: 16px; font-weight: 900; white-space: nowrap; }
#stamp { position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%); font-family: var(--kai); font-size: 110px; font-weight: 900; color: #ffe9a8; letter-spacing: 8px; white-space: nowrap; text-shadow: 0 0 2px #5a0c06, 4px 4px 0 #8e1a12, -3px -3px 0 #8e1a12, 4px -3px 0 #8e1a12, -3px 4px 0 #8e1a12, 0 10px 24px rgba(0, 0, 0, .6); }
#stamp.red { color: #ff7a5c; }
#toast { position: absolute; left: 50%; top: calc(var(--sat) + 108px); transform: translateX(-50%); max-width: 80%; padding: 7px 14px; border-radius: 12px; background: rgba(42, 35, 27, .88); color: #fff8e6; font-size: 14px; font-weight: 700; text-align: center; border: 2px solid rgba(239, 227, 196, .5); }
#fps { position: absolute; left: calc(var(--sal) + 10px); bottom: calc(var(--sab) + 64px); z-index: 45; pointer-events: none; font: 700 11px/1.4 ui-monospace, Consolas, monospace; color: #fff; background: rgba(30, 24, 18, .72); padding: 3px 8px; border-radius: 8px; white-space: pre; }
body.touch-on #fps { bottom: auto; top: calc(var(--sat) + 100px); }

/* ---------- 触屏控件（枪战类布局：浮动摇杆 + 滑屏瞄准 + 功能键） ---------- */
#touch { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 12; pointer-events: none; --u: 1.2px; }
#joy-zone { position: absolute; left: 0; bottom: 0; width: 42%; height: 74%; pointer-events: auto; touch-action: none; }
#joy-base { position: absolute; left: calc(var(--sal) + var(--u) * 34); bottom: calc(var(--sab) + var(--u) * 24); width: calc(var(--u) * 112); height: calc(var(--u) * 112); border-radius: 50%; background: rgba(30, 24, 18, .22); border: 3px solid rgba(239, 227, 196, .55); pointer-events: none; }
#joy-base.active { border-color: var(--gold); background: rgba(30, 24, 18, .34); }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%; background: linear-gradient(180deg, #f6ebcd, #cdb67c); border: 2px solid #8a7340; box-shadow: 0 3px 0 rgba(40, 30, 16, .45); }
.tb { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); background: linear-gradient(180deg, #5f6b78, #3a4450); width: calc(var(--u) * var(--s)); height: calc(var(--u) * var(--s)); right: calc(var(--sar) + var(--u) * var(--r)); bottom: calc(var(--sab) + var(--u) * var(--b)); }
.tb span { font-size: 12px; font-weight: 900; white-space: nowrap; }
.tb em { font-style: normal; font-size: 11px; font-weight: 900; white-space: nowrap; color: #fff6c8; min-height: 0; }
.tb em:empty { display: none; }
.tb .kb { font: 800 10px ui-monospace, Consolas, monospace; color: #ffe9a8; margin: 0; }
.tb.down { transform: translateY(3px) scale(.95); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); filter: brightness(1.18); }
.tb[aria-disabled="true"] em { color: #ffd0a0; }
#act-fire { --s: 86; --r: 96; --b: 62; background: linear-gradient(180deg, #e2573f, #a83a28); }
#act-fire span { font-size: 15px; }
#act-fire2 { --s: 62; --b: 170; right: auto; left: calc(var(--sal) + var(--u) * 24); background: linear-gradient(180deg, #e2573f, #a83a28); }
#act-jump { --s: 62; --r: 18; --b: 22; background: linear-gradient(180deg, #5d9a52, #3d6e37); }
#act-ads { --s: 58; --r: 22; --b: 100; }
#act-ads.on { background: linear-gradient(180deg, #f0d277, #b98a2a); color: #2a231b; border-color: #fff3d6; }
#act-nade { --s: 54; --r: 104; --b: 160; background: linear-gradient(180deg, #6f7a44, #4a5230); }
#act-blade { --s: 54; --r: 196; --b: 96; background: linear-gradient(180deg, #d8ac42, #986b25); }
/* 触屏跑步：点一下开始跑，再点或松开摇杆 / 不往前推就停（2026-10-15 补上，之前只有键盘 Shift）
   2026-10-16：原来单独占最左一列（--r: 270，--b: 22），第三人称下正好压在主角身上。
   改收进「换弹 / 拔刀」那一竖列的第 3 格，与右侧的「站着」键同一水平带；情境键「操炮」让到该列最上一格。 */
#act-sprint { --s: 54; --r: 196; --b: 174; background: linear-gradient(180deg, #4f7fa8, #34587a); }
#act-sprint.on { background: linear-gradient(180deg, #f0d277, #b98a2a); color: #2a231b; border-color: #fff3d6; }
#act-stance { --s: 54; --r: 26; --b: 174; background: linear-gradient(180deg, #7d8a6a, #4f5a40); }
#act-use { --s: 60; --r: 196; --b: 246; background: linear-gradient(180deg, #c83a2c, #7f1712); border-color: #ffd84a; }
/* 换枪（缴获了长枪才出现）、命令（点开四个命令，横排在屏幕上方中间） */
#act-swap { --s: 50; --r: 196; --b: 24; background: linear-gradient(180deg, #8a6a3c, #5e4626); }
#act-order { --s: 54; --r: 104; --b: 236; background: linear-gradient(180deg, #b03a2e, #74201a); border-color: #ffd84a; }
#orders { position: absolute; top: calc(var(--sat, 0px) + var(--u) * 58); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * 8); pointer-events: none; }
#orders[hidden] { display: none; }
#orders .tb { position: static; --s: 58; border-radius: 14px; background: linear-gradient(180deg, #5f6b78, #3a4450); }
#orders .tb span { font-size: 15px; }
#orders .tb.on { background: linear-gradient(180deg, #f0d277, #b98a2a); color: #2a231b; border-color: #fff3d6; }
#stage.compact { --u: 1px; }
body.touch-on #boss { bottom: auto; top: calc(var(--sat) + 62px); }
body.touch-on #boss i { width: 220px; }
/* 触屏字幕放在摇杆与右侧功能键中间的空档：居中 38% 宽在平板上右端会伸进按键列，
   被最外的「跑步」键（右移 324u + 键宽 54u）压住后半句（2026-10-16） */
body.touch-on #dialog { left: calc(50% - var(--u) * 92); bottom: calc(var(--sab) + 16px); transform: translateX(-50%); max-width: max(300px, calc(100% - var(--sal) - var(--sar) - var(--u) * 520)); font-size: 14px; padding: 6px 10px; }
body.touch-on #dialog b { font-size: 15px; }
body.touch-on #aim-info { top: calc(var(--sat) + 100px); }

/* ---------- 菜单（主菜单 / 暂停 / 结算） ---------- */
.overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: calc(var(--sat) + 10px) calc(var(--sar) + 12px) calc(var(--sab) + 10px) calc(var(--sal) + 12px); background: rgba(20, 15, 10, .45); overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
#pause, #result { background: rgba(20, 15, 10, .72); }
.panel { position: relative; width: min(1040px, 100%); margin: auto; padding: 18px 22px; border-radius: 14px; background: linear-gradient(180deg, var(--paper), var(--paper2)); border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink2), 0 16px 40px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 12px; }
.head { display: flex; align-items: center; gap: 16px; }
.logo { font-family: var(--kai); font-weight: 900; font-size: 68px; line-height: 1; color: var(--ink); letter-spacing: 6px; text-shadow: 3px 3px 0 rgba(179, 38, 30, .28); white-space: nowrap; }
.sub { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sub strong { font-family: var(--kai); font-size: 30px; color: var(--red); letter-spacing: 3px; white-space: nowrap; }
.sub span { font-size: 13px; color: var(--ink2); font-weight: 700; line-height: 1.5; }
.seal { margin-left: auto; flex: none; padding: 6px 8px; border: 3px solid var(--red); color: var(--red); font-family: var(--kai); font-weight: 900; font-size: 17px; line-height: 1.15; border-radius: 6px; transform: rotate(6deg); text-align: center; }
.row { display: flex; gap: 10px; }
.btn { flex: 1; min-height: 46px; padding: 0 12px; border-radius: 10px; background: #fbf4dc; border: 2px solid var(--ink2); color: var(--ink); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; box-shadow: 0 3px 0 rgba(60, 46, 28, .35); }
.btn .ov { color: var(--red); font-weight: 900; overflow: hidden; text-overflow: ellipsis; }
.btn.primary { justify-content: center; background: linear-gradient(180deg, #c83a2c, var(--red2)); color: #fff3d6; border-color: var(--ink); font-size: 19px; font-family: var(--kai); letter-spacing: 3px; }
.btn.center { justify-content: center; }
.btn:focus-visible, .btn.focus { outline: 4px solid var(--gold); outline-offset: 1px; }
.btn:active { transform: translateY(2px); box-shadow: none; }
.opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.modes { display: flex; align-items: center; gap: 8px; }
.modes > span { font-size: 14px; font-weight: 800; color: var(--ink2); white-space: nowrap; }
.modes .btn { justify-content: center; }
.modes .btn[aria-pressed="true"] { background: var(--ink); color: #ffe9a8; border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.modes .btn[aria-pressed="true"]::before { content: '✔ '; }
/* 选章：四章一排，当前章节深底金字，没做好的章节变淡 */
.chapters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.chapters .btn { min-height: 44px; justify-content: center; gap: 6px; }
.chapters .cn { font-size: 12px; color: var(--ink2); }
.chapters .ct { font-family: var(--kai); font-size: 18px; letter-spacing: 2px; }
.chapters .cs { font-size: 11px; color: var(--ink2); font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chapters .btn.cur { background: var(--ink); color: #ffe9a8; border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.chapters .btn.cur .cn { color: #e8d49a; }
.chapters .btn[aria-disabled="true"] { opacity: .62; box-shadow: none; border-style: dashed; }
.foot { font-size: 12px; color: var(--ink2); font-weight: 700; line-height: 1.6; }
.foot kbd { display: inline-block; min-width: 18px; padding: 0 4px; margin: 0 1px; border-radius: 4px; background: var(--ink); color: var(--paper); font: 800 11px ui-monospace, Consolas, monospace; text-align: center; }
body.touch-on .pc-only { display: none; }
body:not(.touch-on) .touch-only { display: none; }
.title2 { font-family: var(--kai); font-size: 34px; font-weight: 900; color: var(--ink); letter-spacing: 4px; text-align: center; }
.cols { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 14px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.col .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; font-size: 14px; font-weight: 700; color: var(--ink2); }
.stats div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.stats b { color: var(--ink); }
.rank { text-align: center; font-family: var(--kai); font-size: 26px; color: var(--red); font-weight: 900; letter-spacing: 2px; }
.quote { text-align: center; font-size: 14px; color: var(--ink2); font-weight: 700; line-height: 1.6; }
.total { text-align: center; font-size: 20px; font-weight: 900; color: var(--ink); }
.total b { color: var(--red); font-size: 28px; }

/* 电脑矮窗口标题菜单：不滚动看全 */
@media (min-width: 900px) and (max-height: 900px) {
  #stage:not(.compact):not(.rot) #menu .panel { padding: 12px 18px; gap: 8px; }
  #stage:not(.compact):not(.rot) #menu .logo { font-size: 54px; }
  #stage:not(.compact):not(.rot) #menu .sub strong { font-size: 24px; }
  #stage:not(.compact):not(.rot) #menu .btn { min-height: 44px; }
}

/* 手机横屏紧凑布局（含竖屏旋转后） */
#stage.compact .panel { padding: 8px 12px; gap: 6px; border-radius: 10px; border-width: 2px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink2); }
#stage.compact .overlay { padding: calc(var(--sat) + 4px) calc(var(--sar) + 8px) calc(var(--sab) + 4px) calc(var(--sal) + 8px); align-items: flex-start; }
#stage.compact .logo { font-size: 34px; letter-spacing: 3px; }
#stage.compact .sub strong { font-size: 18px; letter-spacing: 1px; }
#stage.compact .sub span, #stage.compact .seal, #stage.compact .foot { display: none; }
#stage.compact .head { gap: 10px; }
#stage.compact .head .row { flex: 1; margin-left: 6px; }
#stage.compact .btn { min-height: 44px; font-size: 12px; padding: 0 6px; border-radius: 8px; gap: 3px; }
#stage.compact .btn.primary { font-size: 16px; }
#stage.compact .opts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#stage.compact .col .opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#stage.compact .modes { gap: 6px; }
#stage.compact .modes > span { font-size: 12px; }
#stage.compact .title2 { font-size: 22px; }
#stage.compact .cols { gap: 8px; }
#stage.compact .col { gap: 6px; }
#stage.compact .stats { font-size: 12px; gap: 0 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#stage.compact .stats div { padding: 2px 0; }
#stage.compact .rank { font-size: 19px; }
#stage.compact .quote { font-size: 11px; line-height: 1.3; }
#stage.compact .total { font-size: 15px; }
#stage.compact .total b { font-size: 20px; }
#stage.compact #hud-top button { padding: 0 9px; font-size: 12px; }
#stage.compact #objective { font-size: 12px; padding: 4px 8px; }
#stage.compact #hp-pips i { width: 12px; height: 14px; }
#stage.compact #stamp { font-size: 64px; letter-spacing: 4px; }
#stage.compact #dialog { font-size: 13px; }
#stage.compact #toast { font-size: 12px; top: auto; bottom: calc(var(--sab) + 64px); max-width: 40%; }
#stage.compact #prompt { font-size: 14px; top: 58%; }
#stage.compact #cannon-row i { width: 90px; }

#loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; background: #2a231b; color: #efe3c4; text-align: center; padding: 20px; }
.ld-title { font-family: var(--kai); font-size: 34px; font-weight: 900; letter-spacing: 4px; color: #ffe9a8; }
#ld-text { font-size: 15px; font-weight: 700; }
#ld-retry { padding: 9px 20px; border: 2px solid #efe3c4; border-radius: 10px; color: #efe3c4; font-weight: 800; }
#stage.compact .chapters { gap: 6px; flex: 1.15; display: flex; margin-right: 6px; }
#stage.compact .chapters .cn { display: none; }
#stage.compact .chapters .ct { font-size: 15px; letter-spacing: 1px; }
#stage.compact .chapters .cs { display: none; }

/* 2026-10-18：紧凑触屏布局，包含情境出现的按键预留位。 */

/* 按键单位 --u 由 main.js 的 layout() 按画面宽高算好写到 #touch 上（同原来的 clamp(.92px, min(.14cqw, .26cqh), 1px)）。
   2026-10-25 去掉 #stage 的 container-type：Chromium 126～132（不少国产手机 WebView 停在这段）有渲染缺陷，
   container-type 容器里 DOM 一变就整片不画，玩家只看到 3D 画面、菜单和按键全没了（点得到但看不见） */
#stage #touch { --u: .94px; }
#touch .tb { box-sizing: border-box; padding: 0; border-width: 2px; opacity: .82; }
#touch .tb.down, #touch .tb.on { opacity: 1; }
#touch .tb span { font-size: 12px; }
#touch .tb em { font-size: 10px; }
/* 2026-10-20：照硫磺岛那套——开火键在右侧一圈正中间、最大（中心 r112 b104，半径约 78）。贴拇指的右边是跳、格挡/开镜、姿势，
   往左依次是拔刀、手榴弹、换枪、跑步；互动（操炮 / 机枪 / 捡枪 / 松绑）和命令在圈外左侧各占一格。
   操炮、上机枪时只留开火、互动（离开）和命令（县城操炮时要能下令冲锋），其余全收起 */
#touch #act-fire { --s: 78; --r: 73; --b: 65; }
#touch #act-fire span { font-size: 15px; }
#touch #act-jump { --s: 46; --r: 11; --b: 81; }
#touch #act-stance { --s: 46; --r: 39; --b: 21; }
#touch #act-blade { --s: 46; --r: 102; --b: 4; }
#touch #act-nade { --s: 46; --r: 156; --b: 42; }
#touch #act-swap { --s: 46; --r: 156; --b: 120; }
#touch #act-reload {  --s: 46; --r: 158; --b: 176; }
#touch #act-sprint { --s: 46; --r: 102; --b: 158; }
#touch #act-ads { --s: 46; --r: 39; --b: 141; }
#touch #act-use { --s: 52; --r: 210; --b: 78; }
#touch #act-order { --s: 46; --r: 213; --b: 150; }
#touch #act-fire2 { --s: 48; --b: 144; }
#touch #joy-base { width: calc(var(--u) * 100); height: calc(var(--u) * 100); left: calc(var(--sal) + 20px); bottom: calc(var(--sab) + 16px); }
body.mounted #touch #act-jump, body.mounted #touch #act-stance, body.mounted #touch #act-blade, body.mounted #touch #act-nade, body.mounted #touch #act-swap, body.mounted #touch #act-sprint, body.mounted #touch #act-ads , body.mounted #touch #act-reload { display: none; }
#touch #orders { top: calc(var(--sat) + 56px); left: auto; right: calc(var(--sar) + 8px); transform: none; gap: 8px; }
#touch #orders .tb { width: 44px; height: 44px; border-radius: 10px; }
#touch #orders .tb span { font-size: 12px; }
/* 触屏字幕放在准星正上方（2026-10-29 长征玩家反馈：原来压在左下角，字小、被摇杆盖住）。
   底部左边是摇杆、右边是一圈功能键，中间空档太窄；准星上方不挡瞄准，眼睛也不用离开准星。
   提示条（toast）同时上移，免得两条叠在一起。 */
body.touch-on #stage #dialog { left: 50%; right: auto; top: auto; bottom: calc(50% + 28px); transform: translateX(-50%); width: auto; max-width: min(64%, 560px); box-sizing: border-box; font-size: 16px; padding: 6px 14px; background: rgba(20, 15, 10, .82); text-shadow: 0 1px 2px #000; }
body.touch-on #stage #dialog b { font-size: 17px; }
body.touch-on #toast { top: calc(var(--sat) + 56px); }


#touch .tb span, #touch .tb em { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: center; }

/* 三星评级与成就 */
.chapters .cstar { font-size: 12px; color: #c8901a; letter-spacing: 1px; white-space: nowrap; }
.chapters .btn.cur .cstar { color: #ffd35a; }
.honor { text-align: center; }
.honor .hstars { font-size: 30px; color: #d99a12; letter-spacing: 6px; line-height: 1.1; }
.honor .hconds { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.honor .hconds .ok { color: #2f7d32; }
.honor .hnote { font-size: 12px; color: var(--ink2); }
.honor .hach { margin-top: 2px; font-size: 14px; font-weight: 900; color: var(--red); }
#stage.compact .honor .hstars { font-size: 22px; }
#stage.compact .honor .hconds { font-size: 11px; }

/* 菜单首页只保留开始、选章和常用入口；二级页面仅纵向滚动。 */
#menu, #pause, #result { overflow-x: hidden; }
#menu .panel, #menu .head, #menu .row, #menu .btn { min-width: 0; }
.menu-page, .pause-settings { display: flex; flex-direction: column; gap: 10px; }
.menu-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#menu .chapters, #stage.compact #menu .chapters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; }
#menu .chapters .btn { flex-direction: column; gap: 2px; padding: 6px; white-space: normal; text-align: center; }
#menu .chapters .ct { letter-spacing: 0; overflow-wrap: anywhere; }
#menu .chapters .cstar:empty { display: none; }
#menu .menu-page .btn { white-space: normal; }
#menu .menu-page .opts { gap: 10px; }
#menu .modes { flex-wrap: wrap; gap: 10px; }
#menu .modes > span { flex-basis: 100%; }
#menu .page-head { align-items: center; justify-content: space-between; gap: 10px; }
#menu .page-head .title2 { margin: 0; }
#menu .page-head .btn { flex: 0 0 100px; }
#stage.compact #menu .head { flex-wrap: wrap; gap: 10px; }
#stage.compact #menu .head .row { flex-basis: 100%; margin: 0; gap: 10px; }
#stage.compact #menu .panel { gap: 10px; }
#stage.compact #menu .menu-page { gap: 10px; }
#stage.compact #menu .chapters .ct { font-size: 15px; }
#stage.compact #menu .menu-actions .btn { min-height: 44px; }
#result .row { flex-wrap: wrap; }
#result .row .btn { min-width: 140px; white-space: normal; text-align: center; }

#stage.compact #menu .modes { gap: 10px; }
#pause .cols, #pause .col, #pause .opts, #pause .modes { gap: 10px; }
#stage.compact #pause .cols, #stage.compact #pause .col, #stage.compact #pause .opts, #stage.compact #pause .modes { gap: 10px; }

/* 老内核（Chromium<69）不认 env()：上面先用 0px 兜底，认得的再换成安全区（css-env-fallback.mjs） */
@supports (top: env(safe-area-inset-top)) {
  :root { --pt: env(safe-area-inset-top, 0px); --pr: env(safe-area-inset-right, 0px); --pb: env(safe-area-inset-bottom, 0px); --pl: env(safe-area-inset-left, 0px); }
}