/* ===========================================================
   土拨鼠大作战 3D · 第一人称
   UI 配色沿用原作的草原绿体系，但改为覆盖在 3D 画面之上的轻量 HUD。
   =========================================================== */

:root {
  --ink: #eef4df;
  --soft: #b6c4a4;
  --gold: #ffcf6b;
  --line: #435744;
  --panel: #1b2a22;
  --panel-solid: #21382d;
  --red: #ed9b8c;
  --purple: #b69be8;
  --teal: #8fe8b0;
  color-scheme: dark;
}

* { box-sizing: border-box; }

.hidden { display: none; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #101a15;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  cursor: none;
}
body.unlocked #scene { cursor: default; }

/* ---------- 视角切换 ---------- */
.view-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 22;
  min-width: 92px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #58704f;
  border-radius: 6px;
  background: #1a2b22e8;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.view-btn:hover { background: #2b4235; }
.view-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }

/* ---------- 准星 ---------- */
.crosshair {
  position: fixed;
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  pointer-events: none;
  z-index: 20;
  opacity: 0.9;
}
.crosshair svg { width: 100%; height: 100%; }
.ch-ring {
  fill: none;
  stroke: rgba(255,255,255,.34);
  stroke-width: 1.2;
}
.ch-dot { fill: #fff8dc; }
.ch-tick line {
  stroke: rgba(255,255,255,.6);
  stroke-width: 1.6;
  stroke-linecap: round;
}
/* 大招蓄力环：stroke-dasharray 由 JS 设置 */
.ch-charge {
  fill: none;
  stroke: #d9a8ff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 113;
  stroke-dashoffset: 113;
  transform: rotate(-90deg);
  transform-origin: 20px 20px;
  opacity: 0.95;
}
body.no-lock .crosshair { opacity: 0.25; }

/* ---------- 通用条 ---------- */
.track {
  position: relative;
  height: 8px;
  background: #101e17;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px #0008;
}
.track.thin { height: 6px; }
.fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  transition: width .1s linear;
}
.fill.hp { background: linear-gradient(90deg, #d8635a, #ff9f8e); }
.fill.energy { background: linear-gradient(90deg, #d9a63f, var(--gold)); }
.fill.stress { background: linear-gradient(90deg, #8a6fd0, var(--purple)); }
.fill.charge { background: linear-gradient(90deg, #8a5fd0, #f0c8ff); }

/* 应激负荷 75 过载线 */
.overload-mark {
  position: absolute;
  top: -2px; bottom: -2px;
  left: 75%;
  width: 2px;
  background: #ff8f7a;
  opacity: .85;
  box-shadow: 0 0 5px #ff6a4a;
}
body.overloaded .overload-mark { animation: pulseMark .7s ease-in-out infinite; }
@keyframes pulseMark { 50% { opacity: .3; } }

/* ---------- 顶部 ---------- */
.hud-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 12px 16px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: linear-gradient(180deg, #0d1712cc, #0d171200);
  pointer-events: none;
  z-index: 15;
}
.vitals {
  display: grid;
  grid-template-columns: repeat(3, 148px);
  gap: 10px;
  padding: 10px 12px;
  background: #1a2b22e0;
  border: 1px solid var(--line);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}
.vlabel {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #cfdcc0;
  margin-bottom: 5px;
}
.mission {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--gold);
  background: #1a2b22e0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  backdrop-filter: blur(6px);
}

/* ---------- 左下 ---------- */
.hud-left {
  position: fixed;
  left: 14px; bottom: 34px;
  width: min(400px, 42vw);
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
  z-index: 15;
}
.combatbar {
  font-size: 12.5px;
  color: #e5e9cd;
  background: #21382de0;
  border: 1px solid #4f6a4c;
  border-radius: 8px;
  padding: 9px 12px;
  line-height: 1.65;
  backdrop-filter: blur(6px);
}
.combatbar strong { color: #ffd377; }
.combatbar .warn { color: #ffb1a4; }
.power-panel {
  background: #262a33e0;
  border: 1px solid #6a5a80;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  color: #ddc6f6;
  display: grid;
  gap: 6px;
  backdrop-filter: blur(6px);
}
.status-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  font-size: 11px;
  padding: 4px 8px;
  background: #1a2b22e0;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--soft);
  backdrop-filter: blur(6px);
}
.chip strong { color: var(--gold); font-weight: 600; }

/* ---------- 右下目标 ---------- */
.hud-right {
  position: fixed;
  right: 14px; bottom: 34px;
  z-index: 15;
  pointer-events: none;
}
.objective {
  background: #1a2b22e0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 12px;
  min-width: 168px;
  backdrop-filter: blur(6px);
}
.obj-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 3px 0;
  color: var(--soft);
}
.obj-row.done { color: var(--teal); }
.obj-row b { color: var(--ink); font-weight: 600; }
.obj-title {
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 5px;
}
/* dev 版：当季食物说明 */
.obj-season {
  font-size: 10.5px;
  color: #9db392;
  line-height: 1.6;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #3d5940;
}

/* ---------- dev 版本角标 ---------- */
.dev-intro {
  background: #33301f;
  border: 1px solid #7a6428;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
}
.dev-badge {
  display: inline-block;
  background: #a8813a;
  color: #1e1a0c;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 8px;
}
.dev-intro p { font-size: 12.5px; margin: 8px 0; }
.dev-intro ul { margin: 8px 0; padding-left: 18px; }
.dev-intro li { font-size: 12px; color: #d5e1c8; line-height: 1.7; margin-bottom: 5px; }
.dev-intro code {
  background: #00000044; padding: 1px 5px; border-radius: 3px;
  font-size: 11px; color: #ffcf6b;
}

.version-tag {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 11px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  z-index: 24;
  pointer-events: none;
  opacity: .9;
}
.version-tag.dev {
  background: #4a3a1c;
  border: 1px solid #a8813a;
  color: #ffcf6b;
}

/* 渲染后端徽标：如实显示跑在 WebGPU 还是 WebGL2 兜底。
   单独放右上角，避免和底部的版本角标挤在一起。 */
.backend-tag {
  position: fixed;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  background: rgba(18, 22, 18, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  z-index: 25;
  pointer-events: none;
  white-space: nowrap;
}
.version-tag.stable {
  background: #23362b;
  border: 1px solid #435744;
  color: #8fa083;
}
.version-tag.beta {
  background: #243b50;
  border: 1px solid #4f83a7;
  color: #a9dcff;
}

/* ---------- 提示气泡 ---------- */
.toast {
  position: fixed;
  top: 108px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #16261dd9;
  border: 1px solid #6d8a5e;
  color: #f2f6e4;
  padding: 9px 18px;
  border-radius: 22px;
  font-size: 13px;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  z-index: 25;
  max-width: 76vw;
  text-align: center;
  backdrop-filter: blur(6px);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 交互提示 ---------- */
.interact-prompt {
  position: fixed;
  left: 50%;
  top: calc(50% + 46px);
  transform: translateX(-50%);
  font-size: 12.5px;
  color: #ffeec2;
  background: #1a2b22cc;
  border: 1px solid #8a7a4a;
  border-radius: 16px;
  padding: 5px 14px;
  opacity: 0;
  transition: opacity .16s;
  pointer-events: none;
  z-index: 22;
}
.interact-prompt.on { opacity: 1; }
.interact-prompt kbd { margin: 0 2px; }

/* ---------- 背后威胁方向指示 ---------- */
.threat {
  position: fixed;
  left: 50%; top: 50%;
  width: 240px; height: 240px;
  margin: -120px 0 0 -120px;
  pointer-events: none;
  z-index: 19;
}
.threat-mark {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 13px solid #ff5a44;
  filter: drop-shadow(0 0 4px #000a);
  transform-origin: 50% 105px;
}

/* 呼救标记：绿色 + 呼吸脉冲 + 文字标签 */
.threat-mark[data-kind="help"] {
  border-bottom-width: 15px;
  animation: helpPulse 0.85s ease-in-out infinite;
}
@keyframes helpPulse {
  0%, 100% { filter: drop-shadow(0 0 3px #0008); opacity: .75; }
  50% { filter: drop-shadow(0 0 10px #7fffc0); opacity: 1; }
}

/* 标签文字放在箭头外侧（箭头朝上时，文字在下方） */
.threat-mark::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 17px;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: #bff5d8;
  text-shadow: 0 1px 3px #000c;
  white-space: nowrap;
  letter-spacing: .5px;
}
/* data-label 存在但为空字符串时也必须隐藏 ——
   仅用 :not([data-label]) 挡不住空值（属性存在但内容为空），
   会留下一堆空的伪元素。 */
.threat-mark:not([data-label])::after,
.threat-mark[data-label=""]::after { content: none; }

/* 藏狐蓄力时的攻击模式名：用暖色，与呼救的绿色区分 */
.threat-mark[data-kind="fox"][data-label]:not([data-label=""])::after {
  color: #ffcf8a;
}

/* ---------- 全屏按钮 ---------- */
.fs-btn {
  position: fixed;
  top: 14px; right: 54px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #1e3328dd;
  border: 1px solid #6d8a5e;
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs-btn:hover { background: #2b4235; }
.fs-btn.active {
  border-color: var(--gold);
  background: #2f4634;
  color: #ffe9a8;
}

body.fullscreen .hud-top { padding-top: 18px; }
body.fullscreen .footbar { display: none; }

/* ---------- 设置面板 ---------- */
.set-btn {
  position: fixed;
  top: 14px; right: 92px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #1e3328dd;
  border: 1px solid #6d8a5e;
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  z-index: 30;
  display: flex; align-items: center; justify-content: center;
}
.set-btn:hover { background: #2b4235; }

.set-sheet {
  position: fixed;
  top: 54px; right: 16px;
  width: min(460px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  background: #1e3328f5;
  border: 1px solid #6d8a5e;
  border-radius: 14px;
  padding: 20px 22px;
  z-index: 31;
  box-shadow: 0 14px 40px #0009;
}
.set-sheet[hidden] { display: none; }
body.settings-open .hud-top,
body.settings-open .hud-left,
body.settings-open .hud-right,
body.settings-open .crosshair,
body.settings-open .toast,
body.settings-open .banner,
body.settings-open .interact-prompt,
body.settings-open .threat {
  opacity: 0.12;
}
.set-sheet h3 { margin: 0 0 14px; font-size: 16px; color: var(--gold); }

.scheme-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.scheme-card {
  text-align: left;
  background: #16261d;
  border: 1px solid #3d5940;
  border-radius: 9px;
  padding: 9px 12px;
  cursor: pointer;
  color: #cddcc0;
  font: inherit;
}
.scheme-card:hover { background: #1e3328; }
.scheme-card.cur { border-color: var(--gold); background: #2a3a24; }
.version-card { display: block; text-decoration: none; }
.version-settings .version-note { font-size: 11px; color: #93a488; margin: 4px 0 0; line-height: 1.5; }
.version-settings .version-note a { color: var(--teal); }
.scheme-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.scheme-card.cur .scheme-name { color: var(--gold); }
.scheme-desc { font-size: 11px; color: #93a488; margin-top: 3px; line-height: 1.5; }

.bind-list { display: flex; flex-direction: column; gap: 4px; }
.bind-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: #14221899;
}
.bind-row.capturing { background: #2c4433; outline: 1px solid var(--gold); }
.bind-label { font-size: 12px; color: #cddcc0; }
.bind-keys { display: flex; gap: 4px; flex-wrap: wrap; }
.key {
  font-size: 11px;
  padding: 2px 8px;
  background: #2c4433;
  border: 1px solid #5f7f5c;
  border-radius: 5px;
  color: #e8f0dc;
  font-family: inherit;
}
.key.alt { background: #24382b; border-color: #45613f; color: #a9bda0; }
.key.mouse { background: #3a3348; border-color: #6a5a80; color: #e2c8f9; }
.rebind {
  font: inherit;
  font-size: 11px;
  padding: 3px 9px;
  background: #2b4235;
  border: 1px solid #5d7a58;
  border-radius: 5px;
  color: var(--gold);
  cursor: pointer;
}
.rebind:hover { background: #3a5544; }

.conflict-box {
  font-size: 11.5px;
  color: #ffb1a4;
  background: #3a2420;
  border: 1px solid #7a4a3a;
  border-radius: 7px;
  padding: 7px 10px;
  margin-bottom: 12px;
  line-height: 1.7;
}
.conflict {
  display: inline-block;
  background: #00000033;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 2px 3px 0 0;
}
.set-actions { margin-top: 12px; }
.ghost-btn {
  font: inherit; font-size: 12px;
  background: #2b4235; border: 1px solid #5d7a58;
  border-radius: 8px; padding: 8px 16px;
  color: var(--ink); cursor: pointer;
}
.ghost-btn:hover { background: #3a5544; }

/* ---------- 游戏反馈 ---------- */
.feedback-overlay {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: max(10px, calc(10px + var(--safe-top))) max(10px, calc(10px + var(--safe-right)))
    max(10px, calc(10px + var(--safe-bottom))) max(10px, calc(10px + var(--safe-left)));
  background: #0b1410cc;
}
.feedback-panel { width: min(620px, 100%); max-height: 92vh; max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px); overflow-y: auto; padding: 22px; background: #1e3328f5; border: 1px solid #7f9c6c; border-radius: 14px; box-shadow: 0 18px 50px #000b; }
.feedback-panel h2 { margin: 8px 0 16px; font-size: 22px; }
.feedback-label { display: block; margin: 10px 0 5px; color: var(--soft); font-size: 12px; }
.feedback-panel select, .feedback-panel textarea { width: 100%; border: 1px solid #5d7a58; border-radius: 7px; background: #142218; color: var(--ink); font: inherit; padding: 9px 10px; }
.feedback-panel textarea { min-height: 140px; resize: vertical; line-height: 1.55; user-select: text; -webkit-user-select: text; }
.feedback-panel details { margin-top: 12px; color: var(--soft); }
.feedback-panel summary { cursor: pointer; font-size: 12px; }
.feedback-panel pre { max-height: 170px; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 9px; background: #101e17; color: #b9cdb0; font: 11px/1.45 monospace; user-select: text; }
.feedback-status { min-height: 20px; color: var(--gold); font-size: 12px; }

/* ---------- 大字横幅 ---------- */
.banner {
  position: fixed;
  left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 5px;
  color: var(--gold);
  text-shadow: 0 3px 14px #000b;
  opacity: 0;
  pointer-events: none;
  z-index: 26;
  transition: opacity .4s;
  text-align: center;
}
.banner.on { opacity: 1; }

/* ---------- 覆盖面板 ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1410bb;
  backdrop-filter: blur(8px);
  padding: 20px;
  z-index: 40;
}
.overlay[hidden] { display: none; }
.panel {
  width: min(660px, 95vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 30px 34px;
  background: #1e3328f2;
  border: 1px solid #7f9c6c;
  border-radius: 18px;
  box-shadow: 0 22px 60px #0009;
}
.eyebrow {
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.panel h2 { font-size: 27px; margin: 9px 0 12px; line-height: 1.3; }
.panel p { font-size: 13.5px; color: #d5e1c8; line-height: 1.85; margin: 11px 0; }
.panel b { color: var(--gold); }
.keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.keys span {
  font-size: 12.5px;
  color: #cddcc0;
  background: #16261d;
  border: 1px solid #3d5940;
  border-radius: 7px;
  padding: 8px 11px;
}
kbd {
  display: inline-block;
  background: #2c4433;
  border: 1px solid #5f7f5c;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: inherit;
  color: #e8f0dc;
  margin: 0 2px;
}
button.primary {
  font: inherit;
  font-weight: 600;
  color: #1a2419;
  background: linear-gradient(180deg, #ffd97e, #e8b54c);
  border: none;
  border-radius: 9px;
  padding: 12px 26px;
  cursor: pointer;
  margin-top: 14px;
  font-size: 14px;
}
button.primary:hover { filter: brightness(1.08); }
button.primary:focus-visible { outline: 3px solid #fff; }
.panel .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.panel .ghost {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #2b4235;
  border: 1px solid #5d7a58;
  border-radius: 9px;
  padding: 11px 18px;
  cursor: pointer;
}
.panel .ghost:hover { background: #3a5544; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 9px;
  margin: 16px 0;
}
.stat {
  background: #16261d;
  border: 1px solid #3d5940;
  border-radius: 9px;
  padding: 11px 13px;
}
.stat .v { font-size: 20px; color: var(--gold); font-weight: 700; }
.stat .l { font-size: 11px; color: var(--soft); margin-top: 3px; }

.level-list { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.level-chip {
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 16px;
  border: 1px solid #40583f;
  background: #16261d;
  color: #8b9c82;
}
.level-chip.cur { border-color: var(--gold); color: var(--gold); }
.level-chip.done { border-color: #4d8f5c; color: var(--teal); }

.panel.level-select-panel {
  height: min(680px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.level-select-panel h2,
.level-select-panel p { flex: 0 0 auto; }
.level-select-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
  padding: 2px 4px 8px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.level-select-footer {
  flex: 0 0 auto;
  padding-top: 8px;
  border-top: 1px solid #3d5940;
}
.level-select-footer .ghost { margin: 0; }
.level-option {
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 10px 11px;
  text-align: left;
  color: var(--ink);
  background: #16261d;
  border: 1px solid #496348;
  border-radius: 7px;
  font: inherit;
  cursor: pointer;
}
.level-option:hover:not(:disabled), .level-option:focus-visible {
  border-color: var(--gold);
  background: #263a2b;
  outline: none;
}
.level-option:focus-visible { box-shadow: 0 0 0 2px #ffcf6b66; }
.level-option-top { display: flex; justify-content: space-between; gap: 6px; color: #9caf90; font-size: 10.5px; }
.level-option-top b { color: var(--gold); font-size: 12px; }
.level-option strong { font-size: 13px; line-height: 1.35; }
.level-option small { color: #a9b9a0; font-size: 10.5px; line-height: 1.45; }
.level-option.done { border-color: #4d8f5c; }
.level-option.done .level-option-top span { color: var(--teal); }
.level-option.locked { opacity: .72; cursor: not-allowed; border-color: #3a483b; }
.title-actions { align-items: stretch; }

/* ---------- 加载 ---------- */
.loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #101a15;
  z-index: 60;
  transition: opacity .5s;
}
.loader.gone { opacity: 0; pointer-events: none; }
.loader-inner { text-align: center; }
.loader-marmot { font-size: 46px; animation: hop 1s ease-in-out infinite; }
@keyframes hop {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-12px) scale(1.06); }
}
.loader-text { color: var(--soft); font-size: 13px; margin: 12px 0; }
.loader-track {
  width: 190px; height: 5px;
  background: #1d2f24;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto;
}
.loader-fill {
  height: 100%; width: 0%;
  background: var(--gold);
  transition: width .2s;
}

/* ---------- 开发测试工具 ---------- */
.test-mode-btn {
  position: fixed;
  left: 12px;
  bottom: 42px;
  z-index: 32;
  border: 1px solid #8b7441;
  border-radius: 5px;
  padding: 6px 10px;
  color: #ffe1a0;
  background: #211f18ed;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.test-mode-btn[hidden], .test-panel[hidden] { display: none; }
.test-mode-btn:hover { background: #393324; }
/* 「沙盒控制/测试」入口按钮纳入触屏布局调整：位置(left/top 中心定位)、
   大小与透明度由 TouchLayout 写 inline 样式 / CSS 变量。 */
#testModeBtn {
  transform: translate(-50%, -50%) scale(var(--touch-button-scale, 1));
  transform-origin: center;
  opacity: var(--touch-button-opacity, 1);
  touch-action: none;
}
/* 非 test/沙盒模式下按钮带 hidden；进入布局编辑时临时显示以便调整位置，
   退出编辑后恢复原有默认隐藏语义（不改 hidden 属性）。 */
body.touch-layout-editing #testModeBtn { display: inline-block; cursor: grab; outline: 1px dashed rgba(255, 232, 177, .72); outline-offset: 3px; }
#testModeBtn.layout-selected { outline: 2px solid #ffe0a1; outline-offset: 4px; }
#testModeBtn.layout-dragging { cursor: grabbing; filter: brightness(1.25); }
.test-panel {
  /* The sandbox/test panel is a separate fixed surface.  It must not inherit
     the draggable #testModeBtn left/top/transform/z-index layout state. */
  position: fixed;
  left: max(12px, calc(12px + var(--safe-left, 0px)));
  right: auto;
  top: max(12px, calc(12px + var(--safe-top, 0px)));
  bottom: max(78px, calc(78px + var(--safe-bottom, 0px)));
  z-index: 32;
  box-sizing: border-box;
  width: min(340px, calc(100vw - 24px - var(--safe-left, 0px) - var(--safe-right, 0px)));
  max-height: calc(100vh - 90px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
  max-height: calc(100dvh - 90px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
  overflow: auto;
  padding: 12px;
  border: 1px solid #78683f;
  border-radius: 7px;
  color: var(--ink);
  background: #171e18f5;
  box-shadow: 0 8px 28px #0008;
  font-size: 12px;
}
.test-panel header, .test-log-actions, .test-actions, .test-note-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.test-panel header { justify-content: space-between; margin-bottom: 10px; }
.test-panel header strong { color: #ffdc8a; font-size: 13px; }
.test-panel button {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #53644d;
  border-radius: 4px;
  color: var(--ink);
  background: #26352a;
  font: inherit;
  cursor: pointer;
}
.test-panel button:hover { border-color: #d7ba72; background: #344531; }
.test-panel header button { width: 28px; min-height: 26px; flex: 0 0 28px; margin-left: auto; padding: 0; font-size: 18px; transform: none; }
.test-toggle { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.test-toggle input { accent-color: #d8b65c; }
.test-actions, .test-log-actions { margin-top: 8px; }
.test-panel [data-test-action="export"] { border-color: #738d61; color: #c9efb4; }
.test-note-label { display: block; margin: 10px 0 5px; color: var(--soft); }
.test-note-row input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #465846;
  border-radius: 4px;
  color: var(--ink);
  background: #101811;
  font: inherit;
}
.test-log-meta { margin-top: 8px; color: #a9b99f; font-size: 10px; }

/* ---------- 帮助 ---------- */
.help-btn {
  position: fixed;
  top: 14px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #1e3328dd;
  border: 1px solid #6d8a5e;
  color: var(--gold);
  font-size: 15px;
  cursor: pointer;
  z-index: 30;
}
.help-btn:hover { background: #2b4235; }
.help-sheet {
  position: fixed;
  top: 54px; right: 16px;
  width: min(400px, 92vw);
  background: #1e3328f5;
  border: 1px solid #6d8a5e;
  border-radius: 14px;
  padding: 20px 22px;
  z-index: 30;
  box-shadow: 0 14px 40px #0009;
}
.help-sheet[hidden] { display: none; }
.help-sheet h3 { margin: 0 0 12px; font-size: 16px; color: var(--gold); }
.help-sheet .note { font-size: 12px; color: var(--soft); line-height: 1.7; }
.help-sheet .keys { grid-template-columns: 1fr; margin: 12px 0; }
.help-sheet .keys span { font-size: 12px; padding: 6px 10px; }

/* ---------- 底部 ---------- */
.footbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 5px 14px;
  font-size: 10.5px;
  color: #6f8168;
  background: linear-gradient(0deg, #0d1712cc, transparent);
  pointer-events: none;
  z-index: 14;
}

/* ---------- 常驻电影感暗角 ----------
   贴地视角下天空占地极小，画面边缘容易被草地/雾填满成一片平色。
   一圈极轻的径向压边（中心 60% 完全透明）把视线收回中心，
   同时给画面加一点"镜头感"。刻意做得非常弱，避免遮挡预警线。 */
#cineVignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 16;
  background: radial-gradient(ellipse at center,
    transparent 0%, transparent 55%, #0a120d2b 82%, #0a120d5c 100%);
}

/* ---------- 屏幕状态描边 ----------
   玩家的地面光环在第一人称贴地视角下会被透视压成横贯视野的亮带，
   因此改为用屏幕四周的描边表达自身状态：视野无遮挡，信息一样清楚。 */
#stateVignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 17;
  opacity: 0;
  transition: opacity .28s, box-shadow .28s;
}
#stateVignette.boost {
  opacity: 1;
  box-shadow: inset 0 0 90px 8px #ffb43a55;
}
#stateVignette.overdrive {
  opacity: 1;
  box-shadow: inset 0 0 120px 12px #c47bff77;
  animation: vigPulse 1.1s ease-in-out infinite;
}
#stateVignette.overloaded {
  opacity: 1;
  box-shadow: inset 0 0 100px 10px #ff403066;
}
#stateVignette.fatigue {
  opacity: 1;
  box-shadow: inset 0 0 80px 6px #8a7fb855;
}
#stateVignette.social {
  opacity: 1;
  box-shadow: inset 0 0 85px 7px #5fd89655;
}
@keyframes vigPulse { 50% { opacity: .55; } }

/* ---------- 受伤红闪 ---------- */
#flashLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 18;
  background: radial-gradient(ellipse at center, transparent 45%, #d8342a99 100%);
  opacity: 0;
  transition: opacity .35s;
}
#flashLayer.on { opacity: 1; transition: opacity .06s; }

/* ---------- 大招白闪 ---------- */
#ultFlashLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 18;
  background: radial-gradient(ellipse at center, rgba(245,232,255,.92) 0%, rgba(214,182,255,.55) 45%, rgba(190,150,240,.18) 100%);
  opacity: 0;
  transition: opacity .35s ease-out;
}
#ultFlashLayer.on { opacity: 1; transition: opacity .05s; }

/* ---------- 窄屏 ---------- */
@media (max-width: 860px) {
  .test-mode-btn { bottom: 34px; left: 8px; }
  .test-panel {
    left: max(8px, calc(8px + var(--safe-left, 0px)));
    right: max(8px, calc(8px + var(--safe-right, 0px)));
    bottom: max(68px, calc(68px + var(--safe-bottom, 0px)));
    width: min(340px, calc(100vw - 16px - var(--safe-left, 0px) - var(--safe-right, 0px)));
  }
  .hud-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px 10px;
  }
  .set-btn, .fs-btn, .help-btn {
    top: 62px;
    width: 28px;
    height: 28px;
  }
  .help-btn { right: 10px; }
  .fs-btn { right: 44px; }
  .set-btn { right: 78px; }
  .view-btn { top: 96px; right: 10px; }
  .vitals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 8px 9px;
    padding-right: 112px;
  }
  .vlabel { gap: 3px; font-size: 9px; white-space: nowrap; }
  .vlabel span { white-space: nowrap; }
  .mission {
    min-width: 0;
    padding: 7px 10px;
    font-size: 11px;
    line-height: 1.4;
  }
  .toast { top: 142px; max-width: calc(100vw - 32px); }
  .hud-left {
    width: calc(100vw - 28px);
    bottom: 30px;
  }
  .hud-right { display: none; }
  .banner { top: 31%; max-width: calc(100vw - 32px); font-size: 24px; line-height: 1.25; }
  .panel h2 { font-size: 22px; }
  .panel.level-select-panel { height: min(760px, 92vh); }
  .level-select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .level-option { min-height: 104px; padding: 8px; }
  .level-option strong { font-size: 12px; }
  .level-option small { font-size: 10px; }
}
@media (max-width: 420px) {
  .overlay { padding: 10px; }
  .panel { width: 100%; padding: 20px 16px; max-height: 94vh; border-radius: 12px; }
  .level-select-grid { gap: 5px; }
  .level-option { min-height: 110px; }
  .title-actions { flex-direction: column; gap: 2px; }
}

@media (max-height: 620px) {
  .hud-top { padding: 6px 10px; }
  .toast { top: 88px; }
}
/* ---------- Mobile browser viewport and safe-area handling ---------- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html, body {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
}
.panel { overscroll-behavior: contain; touch-action: pan-y; }
.set-sheet, .help-sheet, .test-panel { overscroll-behavior: contain; touch-action: pan-y; }

/* The game canvas remains full-bleed; only this coarse-pointer layer is added. */
.touch-controls {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 22;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
body.touch-playing .touch-controls { display: block; }
.touch-mode #scene { touch-action: none; }
.touch-look-zone {
  position: absolute;
  left: 42%; right: 0;
  top: calc(var(--safe-top) + 23dvh);
  bottom: calc(138px + var(--safe-bottom));
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.touch-look-zone span {
  position: absolute;
  right: 12px; top: 0;
  padding: 4px 8px;
  border-radius: 12px;
  color: rgba(238,244,223,.62);
  background: rgba(10,18,13,.3);
  font-size: 10px;
  pointer-events: none;
}
.touch-joystick {
  position: absolute;
  left: calc(14px + var(--safe-left));
  bottom: calc(14px + var(--safe-bottom));
  width: 128px; height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(228,238,207,.43);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,43,34,.42) 0 40%, rgba(14,25,19,.32) 41% 100%);
  box-shadow: inset 0 0 0 16px rgba(217,230,199,.055), 0 2px 12px #0005;
  color: rgba(238,244,223,.72);
  font-size: 10px;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.touch-joystick.active { border-color: rgba(255,207,107,.82); }
.touch-stick {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 1px solid rgba(255,225,163,.8);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,238,193,.76), rgba(183,145,73,.58));
  box-shadow: 0 2px 8px #0008;
  pointer-events: none;
  will-change: transform;
}
.touch-joystick span { position: absolute; bottom: 11px; text-shadow: 0 1px 3px #000; }
/* 疾跑档位环：半径(px) = 疾跑触发阈值 × 摇杆满行程(maxStick)，
   由 TouchControls 写 --stick-sprint-radius，与真实疾跑判定同一口径
   （fallback 37.44px = 默认阈值 0.78 × 48px）。 */
.stick-sprint-ring {
  --stick-sprint-radius: 37.44px;
  --stick-sprint-size: 74.88px;
  --stick-sprint-offset: -37.44px;
  position: absolute; left: 50%; top: 50%;
  /* X5 老内核兼容：不使用 calc(乘法)，具体 px 尺寸由 TouchControls 同步写入。 */
  width: var(--stick-sprint-size, 74.88px);
  height: var(--stick-sprint-size, 74.88px);
  margin-left: var(--stick-sprint-offset, -37.44px);
  margin-top: var(--stick-sprint-offset, -37.44px);
  border: 1.5px dashed rgba(228,238,207,.32);
  border-radius: 50%;
  pointer-events: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.touch-joystick.stick-sprint .stick-sprint-ring {
  border-color: rgba(255,207,107,.95);
  box-shadow: 0 0 12px rgba(255,207,107,.45), inset 0 0 12px rgba(255,207,107,.18);
}
.touch-joystick.stick-sprint { border-color: rgba(255,207,107,.95); }
.touch-actions {
  position: absolute;
  right: calc(12px + var(--safe-right));
  bottom: calc(12px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(3, 52px);
  gap: 5px;
  pointer-events: auto;
}
.touch-actions button, .touch-pause {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 3px;
  color: var(--ink);
  background: rgba(20,34,26,.78);
  border: 1px solid rgba(166,192,142,.7);
  box-shadow: 0 2px 9px #0007;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.touch-actions button {
  width: 52px; height: 52px;
  border-radius: 15px;
}
.touch-actions button b { font-size: 16px; line-height: 1.1; color: var(--gold); }
.touch-actions button small { margin-top: 2px; font-size: 9px; line-height: 1; }
.touch-actions button[data-touch-action="attack"] { border-color: #c27665; }
.touch-actions button[data-touch-action="sprint"] { border-color: #8bb677; }
.touch-actions button.pressed, .touch-pause.pressed {
  transform: scale(.94);
  background: rgba(87,104,66,.93);
  border-color: var(--gold);
}
.touch-pause {
  position: absolute;
  top: calc(7px + var(--safe-top));
  right: calc(218px + var(--safe-right));
  width: 38px; height: 38px;
  border-radius: 12px;
  font-size: 18px;
  pointer-events: auto;
}
.touch-mode button { -webkit-touch-callout: none; }
.touch-mode .panel, .touch-mode .set-sheet, .touch-mode .help-sheet,
.touch-mode .test-panel { touch-action: pan-y; }

@media (max-width: 860px) {
  html, body { height: 100dvh; min-height: 100dvh; }
  #scene { touch-action: none; }
  .overlay {
    padding: max(10px, calc(8px + var(--safe-top)))
      max(10px, calc(8px + var(--safe-right)))
      max(10px, calc(8px + var(--safe-bottom)))
      max(10px, calc(8px + var(--safe-left)));
  }
  .panel { max-height: min(92vh, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px)); }
  .panel.level-select-panel {
    height: min(680px, 92vh, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px));
  }
  .set-sheet, .help-sheet {
    top: calc(54px + var(--safe-top));
    width: min(460px, calc(100vw - var(--safe-left) - var(--safe-right) - 32px));
    overflow-y: auto;
    right: calc(16px + var(--safe-right));
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 74px);
  }
  .footbar { padding-bottom: calc(5px + var(--safe-bottom)); }
  .hud-top {
    top: 0; left: 0; right: 0;
    padding: calc(48px + var(--safe-top)) calc(9px + var(--safe-right)) 7px calc(9px + var(--safe-left));
  }
  .hud-right {
    display: block;
    top: auto;
    right: calc(10px + var(--safe-right));
    bottom: calc(140px + var(--safe-bottom));
    width: min(174px, 45vw);
  }
  .hud-right .objective { min-width: 0; padding: 7px 8px; font-size: 10px; }
  .hud-right .obj-row { gap: 5px; }
  .hud-right .obj-title { font-size: 9px; }
  .hud-right .obj-season { display: none; }
  .hud-left { display: none; }
  .mission { padding-right: 8px; }
  .vitals { padding-right: 9px; }
  .view-btn { top: calc(7px + var(--safe-top)); right: calc(118px + var(--safe-right)); }
  .help-btn, .fs-btn, .set-btn { top: calc(7px + var(--safe-top)); }
  .help-btn { right: calc(10px + var(--safe-right)); }
  .fs-btn { right: calc(46px + var(--safe-right)); }
  .set-btn { right: calc(82px + var(--safe-right)); }
  .touch-joystick { width: 120px; height: 120px; }
  .touch-look-zone { bottom: calc(132px + var(--safe-bottom)); }
  .toast { top: calc(142px + var(--safe-top)); }
  .footbar { display: none; }
  .version-tag { bottom: calc(5px + var(--safe-bottom)); }
  .test-mode-btn { bottom: calc(34px + var(--safe-bottom)); left: calc(8px + var(--safe-left)); }
  .test-panel {
    top: max(8px, calc(8px + var(--safe-top, 0px)));
    bottom: max(68px, calc(68px + var(--safe-bottom, 0px)));
    left: max(8px, calc(8px + var(--safe-left, 0px)));
    right: auto;
    width: min(340px, calc(100vw - 16px - var(--safe-left, 0px) - var(--safe-right, 0px)));
    max-height: calc(100dvh - 76px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
  }
}
@media (max-width: 420px) {
  .vlabel { font-size: 8.5px; }
  .vitals { gap: 5px; padding-left: 7px; padding-right: 7px; }
  .mission { font-size: 10px; padding: 6px 8px; }
  .objective { line-height: 1.3; }
  .touch-joystick { width: 112px; height: 112px; }
  .touch-stick { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .touch-actions { grid-template-columns: repeat(3, 48px); gap: 4px; }
  .touch-actions button { width: 48px; height: 48px; border-radius: 14px; }
  .touch-look-zone { bottom: calc(128px + var(--safe-bottom)); }
  .panel { max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px); }
  .panel.level-select-panel {
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
    min-height: 0;
  }
  .level-select-grid { min-height: 0; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .touch-look-zone span { display: none; }
  .hud-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding-top: calc(38px + var(--safe-top));
  }
  .vitals { padding-top: 5px; padding-bottom: 5px; }
  .mission { padding-top: 4px; padding-bottom: 4px; font-size: 9.5px; line-height: 1.25; }
  .hud-right { bottom: calc(130px + var(--safe-bottom)); width: min(154px, 24vw); }
  .hud-right .objective { padding: 5px 6px; font-size: 9px; }
  .touch-look-zone {
    left: 38%;
    top: calc(var(--safe-top) + 35dvh);
    bottom: calc(124px + var(--safe-bottom));
  }
  .touch-joystick { width: 104px; height: 104px; }
  .touch-stick { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .touch-actions { grid-template-columns: repeat(3, 46px); gap: 4px; }
  .touch-actions button { width: 46px; height: 46px; border-radius: 13px; }
  .touch-pause { width: 34px; height: 34px; }
  .panel { padding: 16px 20px; }
  .panel h2 { font-size: 19px; }
  .panel p { line-height: 1.45; margin: 7px 0; }
  .panel.level-select-panel { height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 12px); }
  .level-select-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .level-option { min-height: 74px; padding: 6px 8px; gap: 4px; }
  .set-sheet, .help-sheet {
    top: calc(42px + var(--safe-top));
    width: min(460px, calc(100vw - var(--safe-left) - var(--safe-right) - 32px));
    overflow-y: auto;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 52px);
  }
  .test-panel {
    top: max(8px, calc(8px + var(--safe-top, 0px)));
    bottom: max(62px, calc(62px + var(--safe-bottom, 0px)));
    max-height: calc(100dvh - 70px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
  }
}
/* Keep the build badge out of the thumb/action hit zones while playing. */
body.touch-playing .version-tag { display: none; }

/* ===========================================================
   HUD 轻量化（桌面与移动端共用）
   - 默认只保留行动所需的摘要，详细战斗状态由“详情”按需呼出。
   - 小面积面板使用低透明度 + 毛玻璃；菜单/交互时再提高不透明度。
   =========================================================== */
:root {
  --hud-bg: rgba(10, 22, 15, .46);
  --hud-bg-soft: rgba(14, 30, 21, .34);
  --hud-bg-strong: rgba(13, 29, 20, .82);
  --hud-border: rgba(208, 231, 182, .24);
  --hud-border-strong: rgba(225, 239, 196, .52);
  --hud-shadow: 0 5px 18px rgba(0, 0, 0, .22);
  --hud-blur: blur(9px) saturate(1.08);
  --hud-text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* 顶部渐变只压暗边缘，不再形成一条厚重的实色横幅。
   三张 HUD 卡由布局系统接管为 fixed 定位后 .hud-top 只剩背景渐变，
   min-height 用来保住这条压暗渐变的默认观感。 */
.hud-top {
  padding: 9px 14px;
  gap: 12px;
  min-height: 58px;
  background: linear-gradient(180deg, rgba(8, 17, 12, .52), rgba(8, 17, 12, 0));
}
.vitals,
.mission,
.combatbar,
.power-panel,
.chip,
.objective {
  border-color: var(--hud-border);
  box-shadow: var(--hud-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  text-shadow: var(--hud-text-shadow);
}
.vitals {
  grid-template-columns: repeat(3, minmax(104px, 126px));
  gap: 8px;
  padding: 7px 10px;
  background: var(--hud-bg);
  border-radius: 9px;
}
.vlabel { margin-bottom: 4px; font-size: 10.5px; text-shadow: var(--hud-text-shadow); }
.track { height: 7px; background: rgba(5, 14, 9, .64); }
.track.thin { height: 5px; }
.mission {
  flex: 0 1 min(340px, 31vw);
  min-width: 210px;
  max-height: 63px;
  overflow: hidden;
  padding: 7px 10px;
  background: var(--hud-bg-soft);
  border-radius: 9px;
  font-size: 11.5px;
  line-height: 1.42;
}
.mission b, .objective b, .obj-title { text-shadow: var(--hud-text-shadow); }

/* 桌面端左下信息采用“单行摘要”；完整警告/状态按需展开。 */
.hud-left {
  left: 14px;
  bottom: 28px;
  width: min(310px, 27vw);
  gap: 5px;
}
.combatbar {
  max-height: 29px;
  overflow: hidden;
  padding: 6px 9px;
  background: var(--hud-bg);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.power-panel {
  gap: 4px;
  padding: 6px 9px;
  background: rgba(30, 28, 42, .44);
  border-color: rgba(210, 184, 244, .28);
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.35;
}
.power-panel > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.status-row { display: none; gap: 5px; }
.chip { padding: 3px 7px; font-size: 10px; background: var(--hud-bg-soft); }
.hud-details-open .combatbar {
  max-height: 84px;
  white-space: normal;
  overflow: auto;
}
.hud-details-open .status-row { display: flex; }
.hud-details-open .power-panel > span { white-space: normal; }

.hud-details-btn {
  position: absolute;
  left: 0;
  top: -25px;
  min-width: 42px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--hud-border);
  border-radius: 11px;
  color: rgba(239, 246, 222, .82);
  background: rgba(8, 20, 13, .34);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: inherit;
  font-size: 10px;
  line-height: 20px;
  text-shadow: var(--hud-text-shadow);
  cursor: pointer;
  pointer-events: auto;
}
.hud-details-btn:hover,
.hud-details-btn:focus-visible {
  color: var(--gold);
  background: rgba(28, 52, 34, .72);
  border-color: var(--hud-border-strong);
  outline: none;
}

.hud-right { right: 14px; bottom: 28px; }
.objective {
  min-width: 150px;
  max-width: min(205px, 18vw);
  padding: 7px 10px;
  background: var(--hud-bg);
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.35;
}
.obj-row { gap: 10px; padding: 2px 0; }
.obj-title { font-size: 10px; margin-bottom: 4px; }

/* 中心信息只在短暂提示时出现，背景轻透，避免压住准星与远景。 */
.crosshair {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  opacity: .72;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .72));
}
.ch-ring { stroke: rgba(255, 255, 255, .24); stroke-width: 1; }
.ch-dot { fill: #fffbe8; }
.ch-tick line { stroke: rgba(255, 255, 255, .48); stroke-width: 1.35; }
.ch-charge { opacity: .82; stroke-width: 2.3; }
.interact-prompt {
  top: calc(50% + 34px);
  padding: 4px 11px;
  color: #fff1c6;
  background: rgba(13, 28, 19, .46);
  border-color: rgba(255, 213, 121, .42);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  text-shadow: var(--hud-text-shadow);
}
.toast {
  top: 92px;
  padding: 7px 14px;
  background: rgba(13, 28, 19, .58);
  border-color: rgba(202, 232, 175, .34);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: var(--hud-text-shadow);
}
.banner {
  top: 24%;
  max-width: min(76vw, 720px);
  padding: 4px 16px;
  border-radius: 14px;
  background: rgba(8, 18, 12, .18);
  text-shadow: 0 2px 11px rgba(0, 0, 0, .9);
}

/* 顶部工具按钮：低对比常驻，悬停/聚焦时再提高可读性。 */
.view-btn,
.fs-btn,
.set-btn,
.help-btn {
  background: rgba(15, 33, 23, .56);
  border-color: var(--hud-border);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: var(--hud-text-shadow);
}
.view-btn:hover, .fs-btn:hover, .set-btn:hover, .help-btn:hover,
.view-btn:focus-visible, .fs-btn:focus-visible, .set-btn:focus-visible, .help-btn:focus-visible {
  background: rgba(35, 65, 43, .84);
  border-color: var(--hud-border-strong);
  outline: none;
}

/* 菜单属于阅读态：背景更实、描边更亮，仍保留毛玻璃层次。 */
.overlay { background: rgba(4, 12, 8, .68); backdrop-filter: blur(10px) saturate(.9); -webkit-backdrop-filter: blur(10px) saturate(.9); }
.panel,
.set-sheet,
.help-sheet {
  background: var(--hud-bg-strong);
  border-color: rgba(210, 235, 182, .46);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  text-shadow: var(--hud-text-shadow);
}
.panel { padding: 26px 30px; }
.set-sheet, .help-sheet { padding: 17px 19px; }
.scheme-card, .keys span, .stat, .level-chip, .level-option {
  background: rgba(11, 27, 17, .54);
  border-color: rgba(204, 228, 181, .22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.scheme-card:hover, .level-option:hover:not(:disabled), .level-option:focus-visible { background: rgba(36, 67, 43, .78); }

/* 触控按钮也保持透气，按下态才提高实心度。 */
.touch-actions button, .touch-pause {
  background: rgba(15, 31, 22, .58);
  border-color: rgba(196, 222, 169, .54);
  box-shadow: 0 3px 13px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  text-shadow: var(--hud-text-shadow);
}
.touch-actions button.pressed, .touch-pause.pressed { background: rgba(87, 104, 66, .9); }
.touch-look-zone span { background: rgba(7, 17, 11, .22); text-shadow: var(--hud-text-shadow); }

/* 横屏要给拇指区与安全区留出更多垂直空间。 */
@media (max-width: 860px) {
  .hud-top { padding: calc(43px + var(--safe-top)) calc(9px + var(--safe-right)) 5px calc(9px + var(--safe-left)); gap: 5px; min-height: calc(128px + var(--safe-top)); }
  .vitals { gap: 6px; padding: 6px 8px; background: rgba(10, 22, 15, .38); }
  .mission { flex: none; width: 100%; min-width: 0; max-height: 49px; padding: 5px 8px; font-size: 10.5px; line-height: 1.3; }
  .hud-right { right: calc(10px + var(--safe-right)); bottom: calc(138px + var(--safe-bottom)); width: min(164px, 42vw); }
  .objective { max-width: none; padding: 6px 8px; background: rgba(10, 22, 15, .38); font-size: 10px; }
  .hud-details-btn { display: none; }
  .toast { top: calc(126px + var(--safe-top)); max-width: calc(100vw - 32px); }
  .interact-prompt { top: calc(50% + 30px); max-width: calc(100vw - 32px); }
  .banner { top: 20%; max-width: calc(100vw - 28px); font-size: 21px; letter-spacing: 3px; }
  .overlay { padding: max(10px, calc(8px + var(--safe-top))) max(10px, calc(8px + var(--safe-right))) max(10px, calc(8px + var(--safe-bottom))) max(10px, calc(8px + var(--safe-left))); }
  .panel { padding: 22px 22px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hud-top { padding-top: calc(35px + var(--safe-top)); }
  .vitals { padding-top: 4px; padding-bottom: 4px; }
  .mission { max-height: 35px; padding-top: 3px; padding-bottom: 3px; font-size: 9px; }
  .hud-right { bottom: calc(126px + var(--safe-bottom)); width: min(148px, 25vw); }
  .objective { padding: 5px 6px; font-size: 9px; }
  .obj-row { padding: 1px 0; }
  .crosshair { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .banner { top: 17%; font-size: 18px; }
}
@media (max-width: 420px) {
  .vitals { gap: 4px; padding-left: 6px; padding-right: 6px; }
  .vlabel { font-size: 8px; }
  .mission { font-size: 9.5px; }
}

@media (prefers-reduced-transparency: reduce) {
  .vitals, .mission, .combatbar, .power-panel, .chip, .objective,
  .view-btn, .fs-btn, .set-btn, .help-btn,
  .touch-actions button, .touch-pause { background: rgba(12, 28, 18, .82); }
  .panel, .set-sheet, .help-sheet { background: rgba(13, 29, 20, .94); }
}

/* HUD 信息卡（顶部状态/关卡信息/本关目标）实玩时不拦截指针，避免挡视角与按键；
   仅触屏布局编辑态（body.touch-layout-editing）可点选/拖动，
   位置 left/top 与缩放/透明度由 src/ui/touch-layout.js 写入。 */
.vitals, .mission, .objective { pointer-events: none; }
body.touch-layout-editing .vitals,
body.touch-layout-editing .mission,
body.touch-layout-editing .objective {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  outline: 1px dashed rgba(255, 232, 177, .72);
  outline-offset: 3px;
}
body.touch-layout-editing .vitals.layout-selected,
body.touch-layout-editing .mission.layout-selected,
body.touch-layout-editing .objective.layout-selected {
  outline: 2px solid #ffe0a1;
  outline-offset: 4px;
}
body.touch-layout-editing .vitals.layout-dragging,
body.touch-layout-editing .mission.layout-dragging,
body.touch-layout-editing .objective.layout-dragging { cursor: grabbing; filter: brightness(1.18); }

.combat-detail { display: none; }
.hud-details-open .combat-detail { display: block; margin-top: 3px; }
.hud-details-open .combatbar { max-height: 86px; }

@media (max-width: 860px) {
  .hud-right { bottom: calc(164px + var(--safe-bottom)); }
  .objective { min-width: 0; max-width: min(188px, 48vw); max-height: min(148px, 30dvh); padding: 5px 7px; overflow: hidden; }
  .objective .obj-row { gap: 7px; padding: 2px 0; }
  /* 常驻目标卡在移动端收紧：关卡提示最多两行省略，避免遮挡画面。 */
  .obj-hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hud-right { bottom: calc(126px + var(--safe-bottom)); }
  .objective { max-width: min(160px, 29vw); max-height: min(150px, 42dvh); }
}

/* 窄屏横向时，三行任务信息压缩到卡片内，避免最后一行被裁掉。 */
@media (orientation: landscape) and (max-height: 520px) {
  .mission { font-size: 8px; line-height: 1.2; padding-top: 2px; padding-bottom: 2px; max-height: 35px; }
}
@media (max-width: 420px) {
  /* 竖屏用标题/帮助说明承载“右侧拖动”提示，避免与短提示重叠。 */
  .touch-look-zone span { display: none; }
}

/* 小屏按实际按钮/状态条高度留白，避免暂停键压住状态条；同时提升强光下字号和底板对比。 */
@media (max-width: 860px) {
  .hud-top { padding-top: calc(50px + var(--safe-top)); }
  .vitals { background: rgba(8, 19, 12, .52); }
  .vlabel { color: #e8f0dc; font-size: 9.5px; text-shadow: 0 1px 3px #000, 0 0 5px #000b; }
  .mission { background: rgba(8, 20, 12, .46); max-height: 56px; font-size: 10.5px; line-height: 1.28; }
  .objective { background: rgba(8, 19, 12, .52); }
  .toast { top: calc(148px + var(--safe-top)); }
}
@media (max-width: 420px) {
  .vlabel { font-size: 9px; }
  .mission { font-size: 10px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hud-top { padding-top: calc(46px + var(--safe-top)); }
  .mission { max-height: 38px; padding-top: 2px; padding-bottom: 2px; font-size: 9.5px; line-height: 1.1; }
  .toast { top: calc(127px + var(--safe-top)); }
}

/* 细描边采用双层背景模拟渐变边框，不增加面板面积。 */
.vitals, .mission, .combatbar, .power-panel, .objective,
.touch-actions button, .touch-pause {
  border-color: transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.vitals {
  background-image: linear-gradient(rgba(10, 22, 15, .52), rgba(10, 22, 15, .52)),
    linear-gradient(120deg, rgba(225, 239, 196, .46), rgba(106, 151, 107, .18) 56%, rgba(255, 207, 107, .3));
}
.mission {
  background-image: linear-gradient(rgba(8, 20, 12, .46), rgba(8, 20, 12, .46)),
    linear-gradient(120deg, rgba(255, 207, 107, .32), rgba(177, 215, 169, .18) 52%, rgba(225, 239, 196, .34));
}
.combatbar {
  background-image: linear-gradient(rgba(10, 22, 15, .46), rgba(10, 22, 15, .46)),
    linear-gradient(120deg, rgba(225, 239, 196, .34), rgba(106, 151, 107, .16) 60%, rgba(255, 207, 107, .2));
}
.power-panel {
  background-image: linear-gradient(rgba(30, 28, 42, .44), rgba(30, 28, 42, .44)),
    linear-gradient(120deg, rgba(214, 185, 247, .34), rgba(148, 111, 208, .18) 60%, rgba(255, 207, 107, .18));
}
.objective {
  background-image: linear-gradient(rgba(8, 19, 12, .52), rgba(8, 19, 12, .52)),
    linear-gradient(120deg, rgba(255, 207, 107, .3), rgba(106, 151, 107, .16) 58%, rgba(225, 239, 196, .32));
}
.touch-actions button, .touch-pause {
  background-image: linear-gradient(rgba(15, 31, 22, .58), rgba(15, 31, 22, .58)),
    linear-gradient(135deg, rgba(225, 239, 196, .34), rgba(106, 151, 107, .15) 60%, rgba(255, 207, 107, .3));
}
.touch-actions button.pressed, .touch-pause.pressed {
  background-image: linear-gradient(rgba(87, 104, 66, .9), rgba(87, 104, 66, .9)),
    linear-gradient(135deg, rgba(255, 225, 163, .72), rgba(255, 207, 107, .48));
}
@media (max-width: 860px) {
  .hud-right { z-index: 24; }
}

/* HUD 可读性精修：把上方按钮行与状态条完全分层，释放状态条宽度，
   并让摘要目标维持清楚、可按的触控面积。 */
@media (max-width: 860px) {
  .vitals { padding-right: 8px; }
  .vlabel {
    font-size: 10.5px;
    color: #edf4e5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 5px rgba(0, 0, 0, .72);
  }
  .vlabel span:last-child { font-size: 10px; }
  .mission { font-size: 11px; line-height: 1.3; }
}
@media (max-width: 420px) {
  .vlabel { font-size: 10px; }
  .vlabel span:last-child { font-size: 9.5px; }
  .mission { font-size: 10.5px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .mission { max-height: 44px; font-size: 10px; line-height: 1.2; }
}

/* 关卡提示常驻显示在目标卡内（移动端上方有媒体查询压缩为最多两行）。 */
.obj-hint {
  padding: 5px 0 4px;
  color: #e0e9d4;
  font-size: 10px;
  line-height: 1.45;
  text-shadow: var(--hud-text-shadow);
}
.objective { max-height: min(280px, 60vh); overflow: hidden; }
@media (max-width: 860px) {
  .mission { max-height: 46px; }
}

.touch-help { display: none; }
.touch-mode .touch-help { display: block; }

/* 摘要任务卡固定为两行：关卡名与实时状态；减少顶部遮挡高度。 */
.mission { max-height: 46px; line-height: 1.3; }

/* 触控拇指区最后一层微调：扩大按钮间隔，避免误触；关卡卡片在横屏不铺满全宽。 */
.touch-joystick span {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .touch-actions { gap: 5px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .touch-actions { gap: 5px; }
  .mission {
    width: min(520px, calc(100vw - var(--safe-left) - var(--safe-right) - 24px));
    justify-self: start;
  }
}

/* Circular touch skill wheel: positions are supplied by src/ui/touch-layout.js. */
#touchSafeInsets { position: fixed; width: 0; height: 0; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); visibility: hidden; pointer-events: none; }
.touch-actions { position: absolute; inset: 0; right: auto; bottom: auto; display: block; pointer-events: none; }
.touch-actions button {
  position: absolute; left: 0; top: 0;
  width: var(--touch-button-size, 56px); height: var(--touch-button-size, 56px);
  padding: 2px; border-radius: 50%;
  opacity: var(--touch-button-opacity, 1);
  transform: translate(-50%, -50%) scale(var(--touch-button-scale, 1));
  transform-origin: center;
  pointer-events: auto;
  touch-action: none;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.touch-actions button b { font-size: 15px; text-shadow: 0 1px 3px #000; }
.touch-actions button small { font-size: 9px; font-weight: 700; color: #f3f5e8; text-shadow: 0 1px 3px #000, 0 0 4px #000; }
.touch-actions button[data-touch-action="attack"] {
  --touch-button-size: 76px;
  border: 2px solid rgba(255, 203, 141, .95);
  background-image: linear-gradient(rgba(91, 38, 25, .78), rgba(44, 24, 22, .74)), linear-gradient(135deg, #ffdfae, #bd705e 50%, #ffc879);
  box-shadow: 0 0 0 4px rgba(255, 190, 126, .14), 0 4px 15px #000a, inset 0 1px 4px #fff7;
}
.touch-actions button[data-touch-action="attack"] b { font-size: 22px; }
.touch-actions button[data-touch-action="attack"] small { font-size: 10px; }
/* 触屏和桌面都保持完整攻击主键；左右滑时由外侧提示环显示对应招式。 */
.touch-mode .touch-actions button[data-touch-action="attack"] {
  /* 攻击键首帧即显示完整主键；此前闲置态透明化会让首次触摸看起来像“点击后才出现”。 */
  border-color: rgba(255, 203, 141, .95);
  background-image: linear-gradient(rgba(91, 38, 25, .78), rgba(44, 24, 22, .74)), linear-gradient(135deg, #ffdfae, #bd705e 50%, #ffc879);
  box-shadow: 0 0 0 4px rgba(255, 190, 126, .14), 0 4px 15px #000a, inset 0 1px 4px #fff7;
}
/* 攻击键分两层：外圈=整圆渐变/光晕（按下缩放等升级动画仍绑在外圈 button 上），
   内圈=.attack-core 触发核心；尺寸/透明度由布局编辑面板经 CSS 变量
   --attack-core-scale / --attack-core-opacity 调节（持久化在 marmot.touch-layout.v1）。 */
.touch-actions button[data-touch-action="attack"] b,
.touch-actions button[data-touch-action="attack"] small { position: relative; z-index: 1; }
.attack-core {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--attack-core-scale, .55));
  transform-origin: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 228, 184, .96), rgba(209, 96, 66, .9) 62%, rgba(122, 44, 30, .82));
  box-shadow: 0 0 12px rgba(255, 184, 110, .5), inset 0 1px 3px rgba(255, 255, 255, .55);
  opacity: var(--attack-core-opacity, .92);
  pointer-events: none;
  transition: opacity .12s ease;
}

/* 攻击主键外侧是左右滑提示环；预览状态由 TouchControls 使用 AttackGesture 同一阈值写入 data-swipe-preview。 */
.attack-swipe-ring {
  position: absolute; inset: -12px; border: 1px solid rgba(255, 225, 163, .34);
  border-radius: 50%; pointer-events: none; transition: border-color .1s ease, box-shadow .1s ease;
}
.attack-swipe-ring::before, .attack-swipe-ring::after {
  content: ''; position: absolute; top: 50%; width: 19px; height: 19px; margin-top: -10px;
  border-top: 2px solid rgba(214, 232, 189, .5); border-bottom: 2px solid rgba(214, 232, 189, .5);
  opacity: .7; transition: opacity .1s ease, border-color .1s ease;
}
.attack-swipe-ring::before { left: -3px; border-left: 3px solid rgba(255, 207, 107, .72); transform: skewX(-16deg); }
.attack-swipe-ring::after { right: -3px; border-right: 3px solid rgba(255, 207, 107, .72); transform: skewX(16deg); }
.attack-swipe-hint {
  position: absolute; top: 50%; margin-top: -6px; color: rgba(239, 244, 222, .7);
  font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 3px #000;
  opacity: .72; transition: color .1s ease, opacity .1s ease, transform .1s ease;
}
.attack-swipe-hint.parry { right: calc(100% + 10px); }
.attack-swipe-hint.roll { left: calc(100% + 10px); }
.touch-actions button[data-touch-action="attack"][data-swipe-preview="parry"] .attack-swipe-ring,
.touch-actions button[data-touch-action="attack"][data-swipe-fired="parry"] .attack-swipe-ring {
  border-color: rgba(143, 232, 176, .95); box-shadow: 0 0 14px rgba(143, 232, 176, .6);
}
.touch-actions button[data-touch-action="attack"][data-swipe-preview="roll"] .attack-swipe-ring,
.touch-actions button[data-touch-action="attack"][data-swipe-fired="roll"] .attack-swipe-ring {
  border-color: rgba(255, 207, 107, .98); box-shadow: 0 0 14px rgba(255, 207, 107, .68);
}
.touch-actions button[data-touch-action="attack"][data-swipe-preview="parry"] .attack-swipe-hint.parry,
.touch-actions button[data-touch-action="attack"][data-swipe-fired="parry"] .attack-swipe-hint.parry { color: #9ff0bb; opacity: 1; transform: translateX(-3px); }
.touch-actions button[data-touch-action="attack"][data-swipe-preview="roll"] .attack-swipe-hint.roll,
.touch-actions button[data-touch-action="attack"][data-swipe-fired="roll"] .attack-swipe-hint.roll { color: #ffe092; opacity: 1; transform: translateX(3px); }
.touch-actions button[data-touch-action="jump"] { border-color: rgba(247, 224, 150, .88); }
.touch-actions button[data-touch-action="sprint"] { border-color: rgba(164, 220, 146, .88); }
.touch-actions button[data-touch-action="interact"] { border-color: rgba(150, 218, 205, .9); }
.touch-actions button[data-touch-action="burst"] { border-color: rgba(255, 156, 119, .9); }
.touch-actions button[data-touch-action="ultimate"] { border-color: rgba(207, 171, 255, .92); }
.touch-actions button.pressed, .touch-pause.pressed {
  transform: translate(-50%, -50%) scale(calc(var(--touch-button-scale, 1) * .92));
  background-color: rgba(87, 104, 66, .96);
  border-color: #ffe0a1;
  box-shadow: 0 0 18px rgba(255, 204, 115, .6), inset 0 0 12px #fff4;
}
.touch-controls.layout-editing .touch-actions button { pointer-events: auto; }
.touch-controls.layout-editing .touch-actions button[data-touch-action] { touch-action: none; }
.touch-pause { right: auto; bottom: auto; width: 38px; height: 38px; border-radius: 50%; }
.touch-layout-entry {
  position: fixed; left: calc(14px + var(--safe-left)); bottom: calc(142px + var(--safe-bottom));
  min-width: 52px; height: 30px; padding: 0 10px; border-radius: 16px;
  border: 1px solid rgba(214, 232, 189, .68); color: var(--ink);
  background: rgba(12, 27, 18, .8); box-shadow: 0 2px 8px #0008;
  font: 600 11px inherit; pointer-events: auto; touch-action: manipulation;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.touch-layout-entry[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.touch-layout-editing .touch-controls { display: block; }
/* 调整开关（设置 → 启用触屏布局调整）关闭时，所有"调整键"隐藏：
   画面上的编辑入口、设置里的拖动编辑按钮组等。默认在 <html> 上即为 false。 */
[data-touch-adjust-enabled="false"] [data-touch-adjust] { display: none !important; }
/* 有效输入模式为键鼠（强制键鼠或未升级的自动模式）时：隐藏所有触屏布局编辑入口，
   不允许编辑浮动触控控件；触屏层的显示仍由 body.touch-mode/touch-playing 控制。 */
[data-input-effective="keyboard"] [data-touch-adjust],
[data-input-effective="keyboard"] .touch-layout-entry { display: none !important; }
/* 进入调整时游戏自动暂停，但暂停面板会盖住按键导致无法拖动，调整态下隐藏它 */
body.touch-layout-editing #overlay { display: none !important; }
body.touch-layout-editing .touch-controls { z-index: 41; }
.touch-controls.layout-editing .touch-actions button { cursor: grab; outline: 1px dashed rgba(255, 232, 177, .72); outline-offset: 3px; }
.touch-controls.layout-editing .touch-actions button.layout-selected { outline: 2px solid #ffe0a1; outline-offset: 4px; }
.touch-controls.layout-editing .touch-actions button.layout-dragging { cursor: grabbing; filter: brightness(1.25); }
.input-mode-settings { margin: 0 0 14px; padding: 13px; border: 1px solid rgba(214, 232, 189, .24); border-radius: 10px; background: rgba(8, 20, 13, .5); }
.input-mode-settings h4 { margin: 0 0 7px; color: var(--gold); font-size: 14px; }
.input-mode-row { margin-top: 4px; }
.input-mode-status { margin: 8px 0 0; color: var(--soft); font-size: 11.5px; line-height: 1.5; }
.input-mode-status b { color: var(--gold); }
/* 编辑态下摇杆可拖动换位（非编辑态仍是移动输入，不加任何编辑视觉）。 */
.touch-controls.layout-editing .touch-joystick { cursor: grab; outline: 1px dashed rgba(255, 232, 177, .72); outline-offset: 4px; }
.touch-controls.layout-editing .touch-joystick.layout-selected { outline: 2px solid #ffe0a1; }
.touch-controls.layout-editing .touch-joystick.layout-dragging { cursor: grabbing; }
.touch-adjust-settings { margin: 18px 0 0; padding: 13px; border: 1px solid rgba(214, 232, 189, .24); border-radius: 10px; background: rgba(8, 20, 13, .5); }
.touch-adjust-settings h4 { margin: 0 0 7px; color: var(--gold); font-size: 14px; }
.touch-adjust-settings p { margin: 6px 0 0; color: var(--soft); font-size: 11px; line-height: 1.5; }
.touch-adjust-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.touch-adjust-toggle input { accent-color: var(--gold); width: 16px; height: 16px; }
.touch-adjust-settings + .touch-layout-settings { margin-top: 10px; }
.touch-layout-settings { margin: 18px 0 14px; padding: 13px; border: 1px solid rgba(214, 232, 189, .24); border-radius: 10px; background: rgba(8, 20, 13, .5); }
.touch-layout-settings h4 { margin: 0 0 5px; color: var(--gold); font-size: 14px; }
.touch-layout-settings p { margin: 4px 0 10px; color: var(--soft); font-size: 11px; line-height: 1.5; }
.layout-setting-row { display: grid; grid-template-columns: 100px minmax(80px, 1fr) 38px; align-items: center; gap: 8px; margin: 8px 0; font-size: 11px; }
.layout-setting-row input[type="range"] { width: 100%; accent-color: var(--gold); }
.layout-setting-row output { text-align: right; color: var(--gold); font-size: 10px; }
.layout-setting-row select { grid-column: span 2; min-height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; color: var(--ink); background: #16261d; }
.layout-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.layout-actions button { min-height: 34px; padding: 5px 9px; font-size: 10px; }
.layout-save-status { min-height: 16px; margin: 7px 0 0 !important; color: #d9e5c8 !important; }
.touch-layout-settings + .bind-list { margin-top: 14px; }
@media (max-width: 860px) {
  /* 触控实玩时目标卡常驻可见：紧凑落在右上安全区（顶部 HUD 下方），
     避开右下动作轮盘；卡片本身 pointer-events:none，不挡视角拖动。 */
  body.touch-playing .hud-right {
    display: block;
    top: calc(152px + var(--safe-top));
    bottom: auto;
    right: calc(10px + var(--safe-right));
    width: min(150px, 34vw);
  }
  body.touch-playing .objective { min-width: 0; max-width: none; padding: 5px 7px; font-size: 9.5px; }
  body.touch-playing .obj-row { gap: 5px; padding: 1px 0; }
  body.touch-playing .touch-layout-entry { bottom: calc(142px + var(--safe-bottom)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .touch-layout-entry { bottom: calc(122px + var(--safe-bottom)); }
  body.touch-playing .hud-right { top: calc(86px + var(--safe-top)); bottom: auto; width: min(140px, 24vw); }
}
@media (max-width: 340px) {
  .layout-setting-row { grid-template-columns: 86px minmax(60px, 1fr) 34px; gap: 5px; }
  .layout-actions button { flex: 1 1 100%; }
}
/* 站立观察小地图：右上方独立于右下动作盘，带安全区适配。 */
.minimap { position: fixed; top: calc(64px + var(--safe-top, 0px)); right: calc(14px + var(--safe-right, 0px)); width: 174px; z-index: 18; opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.minimap.on { opacity: 1; transform: none; }
.minimap canvas { display: block; width: 174px; height: 174px; border: 1px solid #5e7b63; border-radius: 8px; image-rendering: auto; }
.minimap span { display: block; margin-top: 3px; color: #dcebc9; font-size: 10px; text-align: center; text-shadow: 0 1px 3px #000; }
@media (max-width: 860px) { .minimap { top: calc(96px + var(--safe-top, 0px)); right: calc(9px + var(--safe-right, 0px)); } }
@media (max-width: 420px) { .minimap, .minimap canvas { width: 142px; height: 142px; } }
@media (orientation: landscape) and (max-height: 520px) { .minimap { top: calc(42px + var(--safe-top, 0px)); } .minimap, .minimap canvas { width: 128px; height: 128px; } }
.cooldown-overlay { position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:conic-gradient(rgba(90,100,100,.75) var(--cd-angle,0deg), transparent 0); opacity:0; }
.cooldown-overlay.on { opacity:1; } .cooldown-overlay em { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:11px; font-style:normal; text-shadow:0 1px 3px #000; }
.touch-actions button.no-energy { background:rgba(126,180,215,.65); }
.sandbox-entry { display:block; width:100%; margin:10px 0; padding:10px; border:1px solid #9fbd83; background:rgba(70,105,63,.5); color:#f0f4dc; }
.sandbox-entry span { display:block; font-size:11px; opacity:.8; }
.sandbox-controls { margin-top:12px; padding-top:10px; border-top:1px solid rgba(180,210,160,.25); }
.sandbox-heading { color:#ffcf6b; font-weight:700; } .sandbox-subline,.sandbox-debug { font-size:11px; color:#b7c7ae; margin:5px 0; }
.sandbox-actions { display:flex; flex-wrap:wrap; gap:5px; } .sandbox-actions button { font-size:11px; padding:5px 7px; }
@supports not (background: conic-gradient(red, blue)) {
  .cooldown-overlay { background: rgba(90,100,100,.72); clip-path: circle(50% at 50% 50%); }
}

.attack-charge-hint{position:fixed;left:50%;bottom:calc(22px + var(--safe-bottom,0px));display:none;align-items:center;gap:9px;width:min(320px,68vw);z-index:45;pointer-events:none;transform:translateX(-50%);}
.attack-charge-hint.visible{display:flex;}
.attack-charge-track{height:12px;flex:1;overflow:hidden;border:1px solid rgba(220,235,200,.55);border-radius:999px;background:rgba(12,24,16,.78);box-shadow:0 2px 8px #0009,inset 0 1px 3px #0008;}
.attack-charge-fill{display:block;width:var(--charge-progress,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#dba45e,#ffcf6b 62%,#f38a65);box-shadow:0 0 9px rgba(255,194,105,.6);transition:width .04s linear;}
.attack-charge-label{min-width:58px;color:#fff1cb;font-size:11px;text-align:center;text-shadow:0 1px 3px #000;white-space:nowrap;}
.attack-charge-hint.full .attack-charge-track{border-color:#ffe0a1;box-shadow:0 0 12px rgba(255,190,90,.75),0 2px 8px #0009;}
.attack-charge-hint.full .attack-charge-fill{background:linear-gradient(90deg,#ffce6b,#fff0ad);box-shadow:0 0 14px #ffca5f;}
.attack-charge-hint.full .attack-charge-label{color:#fff1a8;font-weight:800;}

/* 沙盒状态独立于普通关卡目标卡；默认位于小地图下方，布局系统可独立拖动/缩放/调透明度。 */
.sandbox-status {
  position: fixed; top: calc(258px + var(--safe-top, 0px)); right: calc(14px + var(--safe-right, 0px));
  width: min(174px, 30vw); min-width: 168px; padding: 10px 13px;
  color: var(--ink); background-image: linear-gradient(rgba(8, 19, 12, .52), rgba(8, 19, 12, .52)),
    linear-gradient(120deg, rgba(255, 207, 107, .3), rgba(106, 151, 107, .16) 58%, rgba(225, 239, 196, .32));
  border: 1px solid transparent; border-radius: 10px; background-origin: border-box; background-clip: padding-box, border-box;
  backdrop-filter: blur(6px); z-index: 24; pointer-events: none; visibility: hidden; opacity: 0;
  transition: opacity .16s ease, visibility .16s ease;
}
.sandbox-status.on { visibility: visible; opacity: 1; }
body.touch-layout-editing .sandbox-status { pointer-events: auto; touch-action: none; cursor: grab; outline: 1px dashed rgba(255, 232, 177, .72); outline-offset: 3px; }
body.touch-layout-editing .sandbox-status.layout-selected { outline: 2px solid #ffe0a1; outline-offset: 4px; }
body.touch-layout-editing .sandbox-status.layout-dragging { cursor: grabbing; filter: brightness(1.18); }
@media (max-width: 860px) {
  .sandbox-status { top: calc(258px + var(--safe-top)); right: calc(10px + var(--safe-right)); width: min(150px, 34vw); min-width: 0; padding: 5px 7px; font-size: 9.5px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .sandbox-status { top: calc(188px + var(--safe-top)); right: calc(10px + var(--safe-right)); width: min(140px, 24vw); }
}
.local-pack-box { margin: 14px 0 10px; padding: 12px 13px; border: 1px solid #769264; border-radius: 10px; background: #122219aa; }
.local-pack-box p { margin: 7px 0; font-size: 11.5px; line-height: 1.55; }
.local-pack-status { color: #d8edc9; font-size: 12px; line-height: 1.5; margin: 6px 0; }
.local-pack-status small { color: #b8cbb0; word-break: break-word; }
.local-pack-note { color: #a8bc9e !important; }
.resource-loading-settings { margin: 18px 0 14px; padding: 13px; border: 1px solid rgba(214, 232, 189, .24); border-radius: 10px; background: rgba(8, 20, 13, .5); }
.resource-loading-settings h4 { margin: 0 0 8px; color: var(--gold); font-size: 14px; }
.resource-env, .resource-note { color: var(--soft); font-size: 11px; line-height: 1.5; }
.resource-actions, .resource-downloads { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 9px 0; font-size: 11px; }
.resource-downloads a { color: var(--gold); }
.resource-table { display: grid; gap: 5px; max-height: 280px; overflow: auto; }
.resource-row { display: grid; grid-template-columns: minmax(105px, 1.2fr) minmax(110px, 1.2fr) 100px 62px 70px 55px minmax(100px, 1fr) auto; gap: 6px; align-items: center; padding: 6px; border: 1px solid rgba(214, 232, 189, .13); border-radius: 6px; color: var(--ink); font-size: 10px; }
.resource-row code { overflow-wrap: anywhere; }
.resource-row .resource-error { color: #ffb2a6; overflow-wrap: anywhere; }
.resource-row .ghost-btn { min-height: 25px; padding: 3px 6px; font-size: 10px; }
@media (max-width: 700px) { .resource-row { grid-template-columns: 1fr 1fr; } .resource-row .resource-error { grid-column: 1 / -1; } }