* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --ui: 1; --ux-top: 0px; --ux-bottom: 0px; --vh: 100vh; --vw: 100vw;
  --st: calc(max(8px, env(safe-area-inset-top)) + var(--ux-top));
  --sb: calc(max(8px, env(safe-area-inset-bottom)) + var(--ux-bottom));
  --sl: max(10px, env(safe-area-inset-left));
  --sr: max(10px, env(safe-area-inset-right));
  --gold: #c9a24a; --gold2: #e2bd5e;
}
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0d0c; color: #e6e2d6;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
body { position: fixed; inset: 0; height: var(--vh); }
canvas#game { position: fixed; left: 0; top: 0; display: block; filter: saturate(0.9) contrast(1.06); cursor: crosshair; }
body.touch canvas#game { cursor: default; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.ic { width: 1.05em; height: 1.05em; vertical-align: -0.17em; flex: 0 0 auto; }
kbd { font: inherit; font-size: 10px; background: rgba(255,255,255,0.12); border-radius: 3px; padding: 0 4px; color: #ddd; }
#safeprobe { position: fixed; left: 0; top: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; padding: var(--st) var(--sr) var(--sb) var(--sl); }

#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); }
#hurt { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(150,0,0,0.75) 100%); }

.back { display: none; position: fixed; left: var(--sl); top: var(--st); z-index: 40;
  align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; text-decoration: none;
  background: rgba(20,24,36,.9); border: 1px solid #2a3244; color: #c8d0e4; font-size: 13px; }
.back:hover { border-color: #3d4a63; color: #fff; }
html[data-web] .back { display: inline-flex; }

/* ---------- HUD ---------- */
#hud { position: fixed; left: 0; top: 0; width: var(--vw); height: var(--vh); pointer-events: none; }
#hud button { pointer-events: auto; }
.bar { position: relative; height: 14px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width .12s; }
.bar span { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 600; text-shadow: 0 1px 2px #000; letter-spacing: .5px; }
#hud-tl { position: absolute; left: var(--sl); top: var(--st); width: min(270px, 36vw); display: flex; flex-direction: column; gap: 5px; }
.who { display: flex; gap: 7px; align-items: stretch; }
#hud-face { width: 46px; height: 46px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); background: #111; flex: 0 0 auto; }
.bars { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nm { display: flex; justify-content: space-between; font-size: 11px; color: #d8d0b8; text-shadow: 0 1px 2px #000; line-height: 1.1; gap: 6px; white-space: nowrap; overflow: hidden; }
.nm #hud-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.nm #lv-text { color: #9fc3e8; }
.bar.hp { height: 16px; } .bar.hp .fill { background: linear-gradient(#c23b2c, #7e1d14); }
.bar.st { height: 4px; } .bar.st .fill { background: #d8c46a; }
.bar.xp { height: 4px; } .bar.xp .fill { background: linear-gradient(#5a87b8, #2e4f73); }
#hud-status { display: flex; gap: 4px; flex-wrap: wrap; font-size: 11px; }
#hud-status span { background: rgba(0,0,0,0.5); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.08); display: inline-flex; gap: 3px; align-items: center; }
#hud-status .red { color: #ff6a5a; }
#missions { display: flex; flex-direction: column; gap: 3px; pointer-events: auto; cursor: pointer; }
#missions div { font-size: 11px; background: linear-gradient(90deg, rgba(40,30,60,0.75), rgba(40,30,60,0)); border-left: 2px solid #c9a8ff; padding: 2px 8px; color: #e4d8ff; display: flex; gap: 5px; align-items: center; max-width: 100%; }
#missions div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#missions div.g { border-left-color: #6f6; color: #cfffcf; background: linear-gradient(90deg, rgba(20,50,20,0.75), rgba(20,50,20,0)); }
#hud-tc { position: absolute; left: 50%; top: var(--st); transform: translateX(-50%); text-align: center; width: min(320px, 34vw); }
#phase-label { font-size: 17px; font-weight: 700; letter-spacing: 2px; text-shadow: 0 2px 6px #000; white-space: nowrap; }
#phase-sub { font-size: 12px; color: #c9c2ae; text-shadow: 0 1px 3px #000; margin: 1px 0 4px; }
#phase-sub.warn { color: #ff9a6a; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .55; } }
.bar.bunker { height: 9px; } .bar.bunker .fill { background: linear-gradient(#6aa1c9, #355a78); } .bar.bunker span { font-size: 8px; }
#btn-night { margin-top: 6px; padding: 4px 12px; font-size: 12px; background: rgba(40,20,20,0.75); border: 1px solid rgba(255,120,90,0.4); border-radius: 3px; color: #f0c0a8; }
#bossbar { margin-top: 6px; } #bossbar span { font-size: 12px; color: #f66; font-weight: 700; letter-spacing: 3px; } #bossbar .bar { height: 10px; } #bossbar .fill { background: linear-gradient(#b0201a, #5a0c08); }
#hud-tr { position: absolute; right: var(--sr); top: var(--st); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.trrow { display: flex; gap: 6px; align-items: flex-start; }
#res { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; max-width: 40vw; }
#res span { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 3px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; gap: 3px; align-items: center; }
#res span .ic { color: var(--c); }
.ibtn { width: calc(34px * var(--ui)); height: calc(30px * var(--ui)); background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; font-size: calc(15px * var(--ui)); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
#minimap { width: 150px; height: 150px; border: 1px solid rgba(255,255,255,0.15); border-radius: 3px; opacity: .92; pointer-events: auto; cursor: pointer; }
#toasts { position: absolute; left: 50%; top: calc(var(--st) + 96px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(560px, 90vw); }
.toast { background: rgba(10,12,10,0.86); border-left: 3px solid #d9a441; padding: 6px 14px; font-size: 13px; border-radius: 2px; transition: opacity .4s, transform .4s; animation: tin .25s; max-width: 100%; line-height: 1.45; }
.toast.tip { border-left-color: #6fb8ff; background: rgba(12,22,34,0.92); }
.toast.ach { border-left-color: #ffd25a; background: rgba(40,32,8,0.92); color: #ffe9a8; }
.toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }
#banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; opacity: 0; pointer-events: none; }
#banner.show { animation: banner 3.6s ease forwards; }
#banner h1 { font-size: clamp(30px, 7vw, 70px); letter-spacing: 12px; color: #d33a2a; text-shadow: 0 0 30px rgba(200,0,0,0.6), 0 4px 10px #000; font-weight: 900; }
#banner.good h1 { color: #8fe0a0; text-shadow: 0 0 30px rgba(60,200,120,0.5), 0 4px 10px #000; font-size: clamp(26px, 5vw, 52px); }
#banner.red h1 { color: #ff2a2a; }
#banner p { font-size: 15px; color: #e8cfc0; letter-spacing: 2px; text-shadow: 0 2px 6px #000; padding: 0 20px; }
@keyframes banner { 0% { opacity: 0; transform: scale(1.15); } 12% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
#prompt { position: absolute; left: 50%; bottom: calc(var(--sb) + 18%); transform: translateX(-50%); background: rgba(0,0,0,0.72); padding: 7px 16px; border-radius: 3px; font-size: 14px; border: 1px solid rgba(255,210,90,0.35); white-space: nowrap; }
#prompt .key { display: inline-block; background: #e6d38f; color: #111; font-weight: 800; padding: 0 6px; border-radius: 2px; margin-right: 8px; }
#hud-weapon { position: absolute; right: var(--sr); bottom: var(--sb); text-align: right; pointer-events: auto; cursor: pointer;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.6) 30%); padding: 8px 12px 8px 40px; border-right: 3px solid var(--gold); }
#w-name { font-size: 13px; color: #cfc6ad; letter-spacing: 1px; }
#w-ammo b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
#w-ammo b.low { color: #f0b040; } #w-ammo b.empty { color: #e24a3a; }
#w-ammo span { font-size: 15px; color: #aaa38f; margin-left: 4px; font-variant-numeric: tabular-nums; }
#w-state { font-size: 11px; color: #e8c86a; min-height: 14px; }
#hud-weapon .items { font-size: 12px; color: #c9c2ae; display: flex; gap: 10px; justify-content: flex-end; }
#hud-weapon .items span { display: inline-flex; gap: 3px; align-items: center; }
#keyhint { position: absolute; left: var(--sl); bottom: var(--sb); font-size: 11px; color: rgba(230,226,214,0.7); text-shadow: 0 1px 2px #000; }
#keyhint b { color: #ffe08a; }
#savefx { position: absolute; right: var(--sr); bottom: calc(var(--sb) + 100px); font-size: 11px; color: #9fd47a; opacity: 0; }
#savefx.show { animation: savefx 2s; }
@keyframes savefx { 10%, 70% { opacity: 1; } }
body.touch #keyhint, body.touch #hud-weapon, body.touch #prompt { display: none !important; }

/* ---------- 教程 ---------- */
#tut { position: absolute; left: 50%; top: calc(var(--st) + 92px); transform: translateX(-50%); width: min(460px, 92vw); background: rgba(10,22,16,0.92); border: 1px solid rgba(120,255,160,0.45); border-radius: 6px; padding: 8px 12px; pointer-events: auto; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.tut-h { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #bfffd0; }
.tut-n { background: #3a8a5a; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 8px; }
.tut-skip { margin-left: auto; font-size: 11px; color: #9ab; padding: 2px 8px; border: 1px solid rgba(255,255,255,0.2); border-radius: 3px; }
.tut-b { font-size: 13px; line-height: 1.6; margin-top: 4px; color: #e8f5ea; }
.tut-b b { color: #ffe08a; }
.tut-f { text-align: right; margin-top: 6px; }
.tut-f button { padding: 6px 16px; border-radius: 3px; }
.tut-hl { animation: tuthl 1s infinite; box-shadow: 0 0 0 3px rgba(120,255,160,0.9), 0 0 24px rgba(120,255,160,0.8) !important; }
@keyframes tuthl { 50% { box-shadow: 0 0 0 6px rgba(120,255,160,0.4), 0 0 30px rgba(120,255,160,0.5); } }

/* ---------- 触屏按钮 ---------- */
#touch { display: none; position: fixed; left: 0; top: 0; width: var(--vw); height: var(--vh); pointer-events: none; }
body.touch.playing #touch { display: block; }
#tcluster { position: absolute; right: var(--sr); bottom: var(--sb); width: calc(260px * var(--ui)); height: calc(225px * var(--ui)); pointer-events: none; }
body.lefty #tcluster { right: auto; left: var(--sl); }
.tbtn { pointer-events: auto; position: absolute; width: calc(54px * var(--ui)); height: calc(54px * var(--ui)); border-radius: 50%; background: rgba(20,22,18,0.55); border: 1.5px solid rgba(255,255,255,0.24);
  display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); color: #f2ecd8; }
.tbtn .ico { font-size: calc(19px * var(--ui)); line-height: 1; display: flex; }
.tbtn em { font-style: normal; font-size: calc(10px * var(--ui)); color: #d8d2c0; margin-top: 2px; white-space: nowrap; }
.tbtn i { position: absolute; right: -2px; top: -2px; background: var(--gold); color: #111; font-style: normal; font-size: 10px; font-weight: 800; border-radius: 8px; min-width: 16px; padding: 0 4px; text-align: center; }
.tbtn.on { background: rgba(201,162,74,0.55); }
.tbtn.fire { right: 0; bottom: 0; width: calc(88px * var(--ui)); height: calc(88px * var(--ui)); background: radial-gradient(circle, rgba(170,50,30,0.55), rgba(90,20,10,0.55)); border: 2px solid rgba(255,140,100,0.65); }
.tbtn.fire .knob { width: calc(44px * var(--ui)); height: calc(44px * var(--ui)); border-radius: 50%; background: rgba(255,200,170,0.25); display: flex; align-items: center; justify-content: center; font-size: calc(24px * var(--ui)); transition: transform .05s; }
.tbtn.fire em { font-weight: 700; color: #ffd8c8; }
.tbtn.fire.on { background: radial-gradient(circle, rgba(230,80,40,0.75), rgba(140,30,15,0.7)); }
.tbtn.mini { width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); }
.tbtn.mini .ico { font-size: calc(15px * var(--ui)); }
#tb-reload { right: calc(115px * var(--ui)); bottom: calc(17px * var(--ui)); }
#tb-melee { right: calc(92px * var(--ui)); bottom: calc(80px * var(--ui)); }
#tb-dodge { right: calc(34px * var(--ui)); bottom: calc(112px * var(--ui)); }
#tb-throw { right: calc(173px * var(--ui)); bottom: calc(74px * var(--ui)); }
#tb-tcycle { right: calc(160px * var(--ui)); bottom: calc(132px * var(--ui)); }
#tb-med { right: calc(119px * var(--ui)); bottom: calc(146px * var(--ui)); }
#tb-switch { right: calc(176px * var(--ui)); bottom: calc(12px * var(--ui)); }
.tbtn.pill { width: calc(74px * var(--ui)); height: calc(42px * var(--ui)); border-radius: 21px; flex-direction: row; gap: 4px; }
.tbtn.pill em { margin: 0; font-size: calc(11px * var(--ui)); color: #f2e6c0; font-weight: 600; }
#tb-brake { right: 0; bottom: 0; width: calc(88px * var(--ui)); height: calc(88px * var(--ui)); display: none; background: rgba(60,60,70,0.6); }
body.lefty .tbtn.fire, body.lefty #tb-brake { right: auto; left: 0; }
body.lefty #tb-reload { right: auto; left: calc(115px * var(--ui)); } body.lefty #tb-melee { right: auto; left: calc(92px * var(--ui)); }
body.lefty #tb-dodge { right: auto; left: calc(34px * var(--ui)); } body.lefty #tb-throw { right: auto; left: calc(173px * var(--ui)); }
body.lefty #tb-tcycle { right: auto; left: calc(160px * var(--ui)); } body.lefty #tb-med { right: auto; left: calc(119px * var(--ui)); }
body.lefty #tb-switch { right: auto; left: calc(176px * var(--ui)); }
body.building #tcluster .tbtn { opacity: .25; pointer-events: none; }
body.building #tb-build { background: var(--gold); color: #111; }
body.driving #tcluster .tbtn { display: none; }
body.driving #tb-brake { display: flex; }
.tbtn.use { position: absolute; left: 50%; bottom: calc(var(--sb) + 14px); transform: translateX(-50%); width: auto; min-width: calc(130px * var(--ui)); max-width: 46vw; height: calc(50px * var(--ui)); border-radius: 26px; flex-direction: row; gap: 8px; padding: 0 18px; background: rgba(60,50,20,0.78); border-color: rgba(255,210,90,0.7); }
.tbtn.use em { font-size: calc(13px * var(--ui)); color: #ffe6a0; margin: 0; overflow: hidden; text-overflow: ellipsis; }
.tbtn.use.on { transform: translateX(-50%) scale(0.95); }
body.touch #hud-tl { width: min(230px, 34vw); }
body.touch #toasts { top: calc(var(--st) + 84px); }

/* ---------- 建造栏 ---------- */
#buildbar { position: fixed; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(5,6,5,0.93) 18%); padding: 18px max(10px, var(--sr)) var(--sb) max(10px, var(--sl)); z-index: 5; }
body.touch #buildbar { left: 38%; }
body.touch.lefty #buildbar { left: 0; right: 38%; }
.btools { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; align-items: center; }
.btools button, .bcats button { padding: 5px 10px; font-size: 12px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 3px; display: inline-flex; gap: 4px; align-items: center; }
.btools button.sel, .bcats button.sel { background: var(--gold); color: #111; font-weight: 700; }
.btools button.danger { margin-left: auto; border-color: rgba(255,100,80,0.5); color: #f6b0a0; }
.bpw { font-size: 12px; display: inline-flex; gap: 2px; align-items: center; margin-left: 4px; }
.bcats { display: flex; gap: 4px; margin-bottom: 5px; overflow-x: auto; touch-action: pan-x; }
.bdesc { font-size: 12px; color: #cfc8b4; margin-bottom: 6px; } .bdesc .hint { color: #8d887a; margin-left: 10px; } .bdesc .lack { color: #e0604c; }
.bitems { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; touch-action: pan-x; }
.bitem { flex: 0 0 auto; min-width: 86px; padding: 6px 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 3px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.bitem b { font-size: 13px; white-space: nowrap; } .bitem span { font-size: 11px; color: #c9bf9f; white-space: nowrap; }
.bitem.sel { border-color: var(--gold2); background: rgba(201,162,74,0.25); }
.bitem.poor span { color: #d46a5a; } .bitem.lockd { opacity: .5; }

/* ---------- 面板 ---------- */
#panel { position: fixed; left: 0; top: 0; width: var(--vw); height: var(--vh); background: rgba(4,5,4,0.72); display: flex; align-items: center; justify-content: center; padding: var(--st) var(--sr) var(--sb) var(--sl); z-index: 20; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.pin { width: min(580px, 96vw); max-height: 100%; overflow-y: auto; background: linear-gradient(#1b1e1a, #131512); border: 1px solid rgba(255,255,255,0.12); border-top: 3px solid var(--gold);
  border-radius: 4px; padding: 14px 16px 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); touch-action: pan-y; -webkit-overflow-scrolling: touch; user-select: none; overscroll-behavior: contain; }
#panel.wide .pin { width: min(900px, 97vw); }
#panel.small .pin { width: min(460px, 94vw); }
.ph { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 10px; }
.ph h2 { font-size: 20px; letter-spacing: 1px; display: flex; gap: 6px; align-items: center; } .ph h2 .ic { color: var(--gold2); } .ph .sub { font-size: 12px; color: #9f9884; margin-top: 2px; }
.x { width: 36px; height: 36px; font-size: 16px; background: rgba(255,255,255,0.06); border-radius: 3px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.pin h3 { font-size: 15px; margin: 10px 0 6px; color: #e2cf96; display: flex; gap: 6px; align-items: center; } .pin h4 { font-size: 13px; margin: 12px 0 5px; color: #c9b77f; letter-spacing: 1px; }
.pin p { font-size: 13px; line-height: 1.6; margin: 6px 0; }
.warn { color: #ffb07a; }
.dim { color: #948e7c; font-size: 12px; } .center { text-align: center; } .hl { color: #ffd25a; }
.resbar { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #b7b09a; padding: 6px 8px; background: rgba(0,0,0,0.3); border-radius: 3px; margin-bottom: 8px; }
.resbar span { display: inline-flex; align-items: center; gap: 3px; } .resbar .ic { color: var(--c); }
.resbar b { color: #f2ead2; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 10px; overflow-x: auto; touch-action: pan-x; }
.tabs button { padding: 8px 13px; font-size: 14px; color: #aaa38d; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.sel { color: #f2e2b0; border-bottom-color: var(--gold); }
.badge { font-style: normal; background: #d33a2a; color: #fff; font-size: 10px; border-radius: 8px; padding: 0 5px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; flex-wrap: wrap; touch-action: pan-x; }
.chip { padding: 6px 12px; font-size: 13px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.chip.sel { background: var(--gold); color: #111; font-weight: 700; } .chip.locked { color: #7d7868; }
.list { display: flex; flex-direction: column; gap: 6px; }
.list.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); padding: 8px 10px; border-radius: 3px; }
.item.col { flex-direction: column; align-items: stretch; }
.item.eq { border-color: rgba(201,162,74,0.55); background: rgba(201,162,74,0.08); }
.item.lockd { opacity: .6; }
.item b { font-size: 14px; }
.btns { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.btns.wrap { flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; }
.cost { font-size: 12px; color: #d9cfae; white-space: nowrap; display: inline-flex; gap: 6px; flex-wrap: wrap; } .cost span { display: inline-flex; gap: 2px; align-items: center; } .cost .lack { color: #e0604c; }
.list button, .row button, .item button, .buy button, .row2 button { padding: 7px 14px; background: #3a3f33; border: 1px solid rgba(255,255,255,0.15); border-radius: 3px; font-size: 13px; white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; justify-content: center; }
.list button:disabled, .item button:disabled, .buy button:disabled, .row button:disabled { opacity: .38; cursor: default; }
button.primary { background: #9c7a2c !important; border-color: var(--gold2) !important; color: #fff; font-weight: 700; }
button.danger { background: #5a2019 !important; border-color: #c4523e !important; }
button.ghost { background: rgba(255,255,255,0.05) !important; }
button.big { padding: 11px 20px !important; font-size: 15px !important; }
button.sm { padding: 3px 8px !important; font-size: 11px !important; }
button.sel { border-color: var(--gold2) !important; color: #ffe6a0; }
.list > button.big { width: 100%; }
.row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tag { font-style: normal; font-size: 10px; background: var(--gold); color: #111; padding: 0 5px; border-radius: 2px; }
.pips { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 4px; }
.pips i { width: 10px; height: 6px; background: rgba(255,255,255,0.12); display: inline-block; }
.pips i.on { background: #d9b44a; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 8px 0; }
.st { display: grid; grid-template-columns: 34px 1fr 74px; align-items: center; gap: 6px; font-size: 12px; }
.st span { color: #aaa38d; } .st em { font-style: normal; text-align: right; color: #e8e0c6; font-variant-numeric: tabular-nums; }
.sb { height: 6px; background: rgba(255,255,255,0.08); border-radius: 1px; overflow: hidden; } .sb i { display: block; height: 100%; background: linear-gradient(90deg, #8c7130, var(--gold2)); }
.sb.big { height: 8px; margin-top: 4px; width: 260px; max-width: 60vw; } .sb.big i { background: linear-gradient(90deg, #355a78, #6aa1c9); }
.wtitle { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .wtitle h3 { margin: 4px 0; font-size: 17px; }
.buy { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.stock { font-size: 12px; color: #b7b09a; margin-bottom: 8px; line-height: 1.6; } .stock b { color: #f2ead2; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.grid3 div { background: rgba(0,0,0,0.3); padding: 8px; border-radius: 3px; text-align: center; } .grid3 span { display: block; font-size: 11px; color: #948e7c; } .grid3 b { font-size: 17px; }
.roles { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 4px; }
.roles button { padding: 5px 10px !important; font-size: 12px; background: rgba(255,255,255,0.05) !important; display: inline-flex; flex-direction: column; line-height: 1.2; border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; }
.roles button small { font-size: 10px; color: #9a9483; }
.roles button.sel { background: var(--gold) !important; color: #111; font-weight: 700; } .roles button.sel small { color: #3a2c08; }
.report { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 8px 0; } .report li { font-size: 13.5px; line-height: 1.5; padding: 5px 10px; background: rgba(255,255,255,0.04); border-left: 2px solid var(--gold); }
.tips { padding-left: 18px; } .tips li { font-size: 13px; line-height: 1.7; color: #c9c2ae; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.keys { width: 100%; border-collapse: collapse; font-size: 13px; } .keys td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.06); } .keys td:first-child { color: #e2cf96; white-space: nowrap; }
.bestiary { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .bestiary div { font-size: 12px; display: flex; flex-direction: column; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.settings label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.settings h4 { margin-top: 10px; }
.settings .rv { display: flex; align-items: center; gap: 8px; width: 60%; } .settings .rv input { flex: 1; } .settings .rv em { font-style: normal; font-size: 12px; min-width: 42px; text-align: right; color: #d8cfb0; }
.settings input[type=range] { accent-color: var(--gold); touch-action: pan-x; }
.settings select { background: #2b2e27; color: #eee; border: 1px solid #555; padding: 4px 8px; border-radius: 3px; font: inherit; }
.settings .chk { justify-content: flex-start; flex-wrap: wrap; } .settings input[type=checkbox], .chk input { width: 20px; height: 20px; accent-color: var(--gold); }
.over { text-align: center; } .over h1 { color: #d33a2a; font-size: 34px; letter-spacing: 6px; margin: 6px 0; }
input[type=text], input:not([type]), textarea { background: #23261f; color: #eee; border: 1px solid #555; border-radius: 3px; padding: 7px 10px; font: inherit; font-size: 14px; width: 100%; user-select: text; -webkit-user-select: text; touch-action: auto; }
textarea { margin-top: 8px; font-size: 12px; resize: vertical; }
input[type=file] { font-size: 12px; color: #ccc; }

/* 存档槽 */
.slot .sinfo { display: flex; gap: 10px; align-items: center; min-width: 0; }
.sface { width: 54px; height: 54px; border-radius: 4px; background: #111; border: 1px solid rgba(255,255,255,0.12); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #555; }
.achs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ach { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 3px; opacity: .55; }
.ach .ic { font-size: 20px; color: #777; } .ach.got { opacity: 1; border-color: rgba(255,210,90,0.4); } .ach.got .ic { color: #ffd25a; }
/* 角色创建 */
.cc { display: grid; grid-template-columns: 170px 1fr; gap: 14px; }
.ccprev { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ccprev canvas { border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: #111; }
#cc-face { width: 160px; height: 160px; } #cc-top { width: 160px; height: 120px; }
.ccopts { display: flex; flex-direction: column; gap: 3px; }
.lbl { font-size: 12px; color: #c9b77f; margin-top: 4px; }
.sw { display: flex; gap: 6px; flex-wrap: wrap; }
.sw button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); }
.sw button.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }
.ccopts .chips { margin-bottom: 0; padding-bottom: 2px; }
.ccopts .chip { padding: 4px 10px; font-size: 12px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 6px; }
/* 研究 */
.rcur { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: rgba(120,90,200,0.12); border: 1px solid rgba(200,170,255,0.25); border-radius: 3px; margin-bottom: 8px; font-size: 13px; }
.rcur .sb.big i { background: linear-gradient(90deg, #6a4ab8, #c9a8ff); }
.rcur.idle { display: block; color: #cfc4e8; line-height: 1.6; }
.rwrap { display: grid; grid-template-columns: 1fr 260px; gap: 10px; }
.rtree { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rcol h4 { margin: 0 0 5px; text-align: center; }
.rnode { display: flex; gap: 4px; align-items: center; width: calc(100% - 4px); text-align: left; font-size: 12px; padding: 5px 6px; margin-bottom: 4px; border-radius: 3px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); line-height: 1.25; }
.rnode span { overflow: hidden; text-overflow: ellipsis; }
.rnode.done { background: rgba(90,160,90,0.18); border-color: rgba(140,220,140,0.35); color: #bfe8bf; }
.rnode.avail { border-color: rgba(201,168,255,0.55); color: #e8dcff; }
.rnode.cur { background: rgba(130,90,220,0.3); border-color: #c9a8ff; animation: blink 1.4s infinite; }
.rnode.locked { opacity: .45; }
.rnode.sel { box-shadow: 0 0 0 2px var(--gold2); }
.rdet { background: rgba(0,0,0,0.3); border-radius: 3px; padding: 10px; font-size: 13px; line-height: 1.6; align-self: start; position: sticky; top: 0; }
.rdet .ok { color: #9fd47a; } .rdet .lack { color: #e0604c; }
.rfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rfoot button { padding: 7px 14px; border-radius: 3px; }
/* 幸存者 */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pcard { display: flex; gap: 8px; padding: 8px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; cursor: pointer; }
.pcard:hover { border-color: rgba(201,162,74,0.5); }
.pface { width: 64px; height: 64px; border-radius: 4px; flex: 0 0 auto; background: #111; }
.pinfo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; min-width: 0; }
.mini { display: flex; gap: 10px; font-size: 12px; } .mini span { display: inline-flex; gap: 3px; align-items: center; }
.traits { display: flex; gap: 4px; flex-wrap: wrap; }
.trait { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 8px; background: rgba(255,255,255,0.1); color: #ddd; }
.trait.g { background: rgba(90,170,90,0.25); color: #c4f0b0; } .trait.b { background: rgba(200,80,60,0.25); color: #ffc0b0; }
.rels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rel { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--c); color: #ddd; } .rel b { color: var(--c); font-weight: 600; }
.person { display: grid; grid-template-columns: 160px 1fr; gap: 12px; }
.person .pl { display: flex; flex-direction: column; gap: 6px; align-items: center; }
#pp-face { width: 150px; height: 150px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); }
.person .pr { display: flex; flex-direction: column; gap: 6px; }
.speech { background: rgba(240,235,220,0.08); border-left: 3px solid #e8dcb8; padding: 8px 12px; font-size: 14px; line-height: 1.6; color: #f2ead2; font-style: italic; }
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 2px 10px; font-size: 12px; color: #c9c2ae; }
.story { font-style: italic; }
.kills { display: flex; flex-wrap: wrap; gap: 6px; } .kills span { font-size: 12px; background: rgba(255,255,255,0.05); padding: 3px 8px; border-radius: 3px; }
/* 地图 */
#panel.map .pin { width: min(760px, 96vw); }
.mapwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#bigmap { width: min(680px, 88vw, calc(var(--vh) - 150px)); height: auto; aspect-ratio: 1; border-radius: 4px; border: 1px solid rgba(255,255,255,0.15); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #c9c2ae; justify-content: center; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }

/* ---------- 标题 ---------- */
#title { position: fixed; left: 0; top: 0; width: var(--vw); height: var(--vh); z-index: 10; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tbg { position: absolute; inset: -20px; background:
  radial-gradient(ellipse at 50% 120%, rgba(160,40,20,0.35), transparent 60%),
  radial-gradient(ellipse at 50% 40%, rgba(30,36,28,0.6), #070806 75%),
  repeating-linear-gradient(115deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 5px); animation: tbg 12s ease-in-out infinite alternate; }
@keyframes tbg { to { transform: scale(1.06) translateY(-10px); } }
.tcontent { position: relative; text-align: center; padding: 16px; max-width: 92vw; max-height: 100%; overflow-y: auto; }
.logo .ey { font-size: 11px; letter-spacing: 6px; color: #a79e86; }
.logo h1 { font-size: clamp(38px, 9vw, 88px); font-weight: 900; letter-spacing: 10px; color: #e9e2cc; text-shadow: 0 0 40px rgba(180,40,20,0.45), 0 6px 0 #2a0e08, 0 10px 30px #000; margin: 6px 0; }
.logo .en { font-size: 14px; letter-spacing: 14px; color: #e0604a; font-weight: 700; }
.tagline { margin: 16px 0 18px; color: #c2bba4; font-size: 14px; letter-spacing: 2px; }
#title-btns { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#title-btns button { min-width: 240px; padding: 11px 22px; font-size: 16px; letter-spacing: 2px; background: rgba(30,32,26,0.85); border: 1px solid rgba(226,189,94,0.5); border-radius: 3px; color: #f1e6c4; display: inline-flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
#title-btns button small { width: 100%; font-size: 11px; letter-spacing: 1px; color: #e8d8a8; opacity: .85; }
#title-btns button.big { background: linear-gradient(#7c5d18, #55400f); border-color: var(--gold); font-weight: 700; }
#title-btns button.ghost { background: rgba(30,32,26,0.7) !important; font-weight: 400; }
#title-btns .trow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#title-btns .trow button { min-width: 0; font-size: 14px; padding: 9px 16px; }
.best { font-size: 12px; color: #c9b77f; margin-top: 4px; }
#loading { margin-top: 14px; font-size: 13px; color: #b6ae95; }
.foot { margin-top: 20px; font-size: 11px; color: #9c937c; }

/* ---------- 响应式 ---------- */
@media (max-height: 520px) {
  #minimap { width: 100px; height: 100px; }
  #hud-tl { width: min(220px, 32vw); }
  #hud-face { width: 38px; height: 38px; }
  #phase-label { font-size: 14px; } #phase-sub { font-size: 11px; margin-bottom: 2px; }
  #toasts { top: calc(var(--st) + 70px) !important; } .toast { font-size: 12px; padding: 4px 10px; }
  #tut { top: calc(var(--st) + 66px); padding: 6px 10px; } .tut-b { font-size: 12px; line-height: 1.5; }
  #res span { font-size: 11px; padding: 1px 4px; }
  #banner { top: 24%; }
  #buildbar { padding-top: 12px; } .btools button, .bcats button { padding: 4px 8px; font-size: 11px; } .bdesc { font-size: 11px; margin-bottom: 4px; }
  .bitem { min-width: 74px; padding: 4px 7px; } .bitem b { font-size: 12px; } .bitem span { font-size: 10px; }
  .logo h1 { font-size: 40px; } .tagline { margin: 6px 0 10px; } .foot { margin-top: 8px; }
  #title-btns button { padding: 8px 18px; }
  .pin { padding: 10px 12px; } .item { padding: 6px 8px; }
  #missions div { font-size: 10px; }
}
body.short { --ui: 0.86; }
/* 窄屏/触屏：资源栏挪到左上角的血条下方，避免和中间的昼夜信息重叠 */
body.touch:not(.portrait) #res, body.short:not(.portrait) #res { position: fixed; top: calc(var(--st) + 52px); left: var(--sl); width: min(250px, 36vw); max-width: none; justify-content: flex-start; }
body.touch:not(.portrait) #hud-status, body.short:not(.portrait) #hud-status { margin-top: 48px; }
@media (max-width: 1180px) {
  body:not(.portrait) #res { position: fixed; top: calc(var(--st) + 52px); left: var(--sl); width: min(270px, 36vw); max-width: none; justify-content: flex-start; }
  body:not(.portrait) #hud-status { margin-top: 48px; }
}
body.portrait #hud-tc { top: calc(var(--st) + 96px); width: 50vw; }
body.portrait #res { position: fixed; top: calc(var(--st) + 54px); left: var(--sl); right: var(--sr); max-width: none; justify-content: center; }
body.portrait #minimap { margin-top: 50px; }
body.portrait .tbtn.use { left: var(--sl); transform: none; bottom: calc(var(--sb) + 236px * var(--ui)); max-width: 60vw; }
body.portrait .tbtn.use.on { transform: scale(0.95); }
body.portrait #hud-tl { width: 44vw; }
body.portrait #minimap { width: 90px; height: 90px; }
body.portrait #toasts { top: calc(var(--st) + 250px) !important; }
body.portrait #tut { top: calc(var(--st) + 160px); }
body.portrait #missions { display: none; }
@media (max-width: 700px) {
  .cols2, .bestiary, .achs, .people, .list.grid2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .cc, .person { grid-template-columns: 1fr; }
  .ccprev { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .rwrap { grid-template-columns: 1fr; }
  .rtree { grid-template-columns: repeat(3, 1fr); }
  .rdet { position: static; }
}
@media (max-width: 480px) { .rtree { grid-template-columns: repeat(2, 1fr); } .grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-height: 520px) {
  .cc { grid-template-columns: 122px 1fr; gap: 10px; }
  #cc-face { width: 112px; height: 112px; } #cc-top { width: 112px; height: 84px; }
  .lbl { margin-top: 1px; } .sw button { width: 24px; height: 24px; }
  .person { grid-template-columns: 120px 1fr; } #pp-face { width: 110px; height: 110px; }
  .ph h2 { font-size: 17px; } .x { width: 32px; height: 32px; }
}