/* =========================================================
   碎境远征 / RIFTBOUND — 界面样式
   ========================================================= */
:root {
  --bg-0: #060b0c;
  --bg-1: #091113;
  --bg-2: #0d191a;
  --bg-3: #142324;
  --panel: rgba(12, 23, 23, 0.92);
  --panel-soft: rgba(16, 30, 29, 0.72);
  --line: rgba(196, 167, 105, 0.18);
  --line-strong: rgba(216, 184, 116, 0.46);
  --gold: #d8b56a;
  --gold-2: #f4d58a;
  --gold-dim: #8f7544;
  --ink: #e7e0cf;
  --muted: #918d7e;
  --muted-2: #666b62;
  --teal: #5ad3a4;
  --teal-soft: #2d8b70;
  --blue: #78b9e8;
  --violet: #b492e8;
  --red: #df6a5b;
  --red-deep: #7d2e30;
  --orange: #e3a05c;
  --green: #79d68e;
  --font-display: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
  --topbar-h: 64px;
  --cmd-h: 88px;
  --dock-h: 232px;
  --side-w: 308px;
  --shadow-deep: 0 22px 70px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { user-select: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:focus { outline: none; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  border: 1px solid rgba(216, 184, 116, 0.32);
  border-bottom-color: rgba(216, 184, 116, 0.5);
  border-radius: 3px;
  background: rgba(223, 196, 133, 0.07);
  color: #d8c79d;
  font-family: var(--font-mono);
  font-size: 10px; line-height: 1;
}
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }
.dim { color: var(--muted-2); }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
::-webkit-scrollbar-thumb { background: rgba(216, 184, 116, 0.18); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: rgba(216, 184, 116, 0.32); }

/* =========================================================
   主菜单
   ========================================================= */
#menu-bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  background: #070d0e;
}
.menu-screen {
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px 48px 22px;
  background:
    radial-gradient(ellipse at 72% 46%, rgba(41, 82, 67, 0.12), transparent 48%),
    radial-gradient(ellipse at 18% 85%, rgba(129, 86, 42, 0.08), transparent 45%),
    linear-gradient(90deg, rgba(5, 10, 10, 0.76), rgba(5, 10, 10, 0.24) 48%, rgba(5, 10, 10, 0.74));
  overflow: hidden;
}
.menu-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.menu-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1500px; width: 100%; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--gold);
  border: 1px solid rgba(216, 184, 116, 0.42);
  transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(216, 184, 116, 0.18), rgba(216, 184, 116, 0.02));
  box-shadow: 0 0 30px rgba(216, 184, 116, 0.08);
}
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; letter-spacing: 0.2em;
  color: #e5dcc4;
}
.brand small {
  display: block; margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.18em;
  color: var(--gold-dim);
}
.menu-meta { display: flex; align-items: center; gap: 28px; }
.meta-cell { text-align: right; }
.meta-cell span {
  display: block; font-size: 9px; letter-spacing: 0.14em;
  color: var(--muted-2); margin-bottom: 3px;
}
.meta-cell b {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: #d7cbaa;
}
.ghost-btn {
  padding: 8px 13px;
  border: 1px solid rgba(216, 184, 116, 0.24);
  color: #c8bd9f; font-size: 11px; letter-spacing: 0.08em;
  background: rgba(216, 184, 116, 0.035);
  transition: 180ms ease;
}
.ghost-btn:hover { border-color: rgba(216, 184, 116, 0.56); background: rgba(216, 184, 116, 0.09); color: var(--gold-2); }
.ghost-btn.compact { padding: 6px 10px; font-size: 10px; }
.ghost-btn.danger { color: #c8877f; border-color: rgba(206, 105, 95, 0.25); }
.ghost-btn.danger:hover { color: #f0a39a; border-color: rgba(206, 105, 95, 0.52); background: rgba(206, 105, 95, 0.08); }

.menu-layout {
  position: relative; z-index: 2;
  width: 100%; max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(410px, 0.82fr);
  gap: clamp(36px, 5vw, 92px);
  align-items: center;
  padding: 22px 0 12px;
  min-height: 0;
}
.hero-panel { padding-left: clamp(0px, 2vw, 26px); }
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  color: var(--gold-dim);
  font-size: 9px; letter-spacing: 0.22em;
}
.eyebrow-line { display: block; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.hero-title { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.title-en {
  font-family: Georgia, var(--font-display), serif;
  font-size: clamp(14px, 1.4vw, 20px);
  letter-spacing: 0.62em;
  color: rgba(216, 184, 116, 0.62);
  margin-left: 7px; margin-bottom: 2px;
}
.title-cn {
  font-family: var(--font-display);
  font-size: clamp(82px, 9.4vw, 146px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0.1em;
  color: #e8dfc8;
  text-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
.title-cn.accent {
  position: relative;
  margin-left: clamp(40px, 6vw, 94px);
  background: linear-gradient(108deg, #f7e5b1 0%, #d7ab5f 36%, #9c7436 68%, #f3d891 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 12px 40px rgba(190, 140, 59, 0.14));
}
.title-cn.accent::after {
  content: "";
  position: absolute; left: 2px; right: -0.12em; bottom: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 184, 116, 0.44), transparent);
}
.hero-lede {
  max-width: 555px;
  margin: 30px 0 24px;
  color: #a9a495;
  font-size: 13px; line-height: 2.05; letter-spacing: 0.035em;
}
.race-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.race-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  color: var(--race-color, var(--gold));
  background: color-mix(in srgb, currentColor 5%, transparent);
  font-size: 10px; letter-spacing: 0.08em;
}
.race-chip .race-icon {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 33%, transparent);
  background: rgba(0, 0, 0, 0.22);
  font-size: 12px;
}
.race-chip small { color: var(--muted-2); font-size: 8px; letter-spacing: 0.03em; }
.feature-stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 555px;
  border-top: 1px solid rgba(216, 184, 116, 0.15);
  border-bottom: 1px solid rgba(216, 184, 116, 0.08);
}
.feature-stats > div {
  padding: 13px 4px 12px;
  border-right: 1px solid rgba(216, 184, 116, 0.08);
}
.feature-stats > div:last-child { border-right: 0; }
.feature-stats b {
  display: block;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 22px; line-height: 1; color: #d9c8a1;
}
.feature-stats span {
  display: block; margin-top: 5px;
  font-size: 9px; letter-spacing: 0.16em; color: var(--muted-2);
}
.hero-tip {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 22px; max-width: 520px;
  color: #9d927d; font-size: 10px; line-height: 1.7;
}
.tip-mark {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  margin-top: 1px;
  border: 1px solid rgba(216, 184, 116, 0.32);
  color: var(--gold);
  font-family: var(--font-mono); font-size: 10px;
}
.hero-tip p { margin: 0; }

.mode-stack { display: flex; flex-direction: column; gap: 14px; align-self: center; }
.mode-card {
  position: relative;
  padding: 24px 26px 20px;
  border: 1px solid rgba(216, 184, 116, 0.22);
  background:
    linear-gradient(135deg, rgba(25, 42, 38, 0.82), rgba(8, 16, 16, 0.92) 58%),
    radial-gradient(ellipse at 100% 0, rgba(216, 184, 116, 0.07), transparent 55%);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  transition: border-color 240ms ease, transform 240ms ease;
}
.mode-card::before, .mode-card::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
}
.mode-card::before { top: 7px; left: 7px; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.mode-card::after { bottom: 7px; right: 7px; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }
.mode-card:hover { border-color: rgba(216, 184, 116, 0.4); }
.campaign-card { border-color: rgba(216, 184, 116, 0.31); }
.mode-watermark {
  position: absolute; top: -22px; right: 12px;
  font-family: Georgia, var(--font-display), serif;
  font-size: 150px; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(216, 184, 116, 0.07);
  pointer-events: none;
}
.mode-kicker {
  position: relative;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.24em;
  color: var(--gold-dim); text-transform: uppercase;
}
.mode-title-row { position: relative; display: flex; align-items: center; gap: 12px; margin: 7px 0 7px; }
.mode-title-row h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px; font-weight: 500; letter-spacing: 0.09em;
  color: #e9dfc7;
}
.mode-badge {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid rgba(216, 184, 116, 0.26);
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.06em;
  color: #beae88;
  white-space: nowrap;
}
.lock-icon { color: var(--gold-dim); }
.mode-desc {
  position: relative;
  margin: 0 0 17px;
  color: #8f9185; font-size: 11px; line-height: 1.85;
}
.tier-grid {
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  margin: 0 0 16px;
  border-top: 1px solid rgba(216, 184, 116, 0.1);
  border-bottom: 1px solid rgba(216, 184, 116, 0.1);
}
.tier-row {
  display: grid;
  grid-template-columns: 46px 58px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  border-bottom: 1px solid rgba(216, 184, 116, 0.055);
}
.tier-row:last-child { border-bottom: 0; }
.tier-name { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; }
.tier-row.near .tier-name { color: #84b98c; }
.tier-row.mid .tier-name { color: #c8ad70; }
.tier-row.core .tier-name { color: #cc7c70; }
.tier-count { font-size: 9px; color: var(--muted-2); font-family: var(--font-mono); }
.tier-row small { color: var(--muted-2); font-size: 9px; text-align: right; }
.tier-pips { display: flex; gap: 4px; }
.tier-pips i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3d5d4c; box-shadow: 0 0 8px rgba(93, 186, 135, 0.2);
}
.tier-row.mid .tier-pips i { background: #8e7542; box-shadow: 0 0 8px rgba(216, 184, 116, 0.18); }
.tier-row.core .tier-pips i { background: #9a4b47; box-shadow: 0 0 10px rgba(220, 93, 81, 0.22); }
.tier-pips i.elite { outline: 1px solid #d7a66a; outline-offset: 2px; }
.campaign-nest-preview {
  position: relative;
  height: 22px; margin: 0 0 14px;
  display: flex; align-items: center; gap: 5px;
}
.campaign-nest-preview::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: linear-gradient(90deg, rgba(216, 184, 116, 0.22), rgba(216, 184, 116, 0.03));
}
.preview-node {
  position: relative; z-index: 1;
  width: 9px; height: 9px; border-radius: 50%;
  background: #182a24; border: 1px solid #5c7c65;
}
.preview-node.t2 { border-color: #927747; background: #211d12; }
.preview-node.t3 { border-color: #92524b; background: #241313; }
.preview-node.elite { width: 13px; height: 13px; border-color: #d6a866; box-shadow: 0 0 14px rgba(216, 168, 102, 0.3); }
.preview-node span {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-size: 7px; color: var(--muted-2); white-space: nowrap; font-family: var(--font-mono);
}
.primary-btn, .secondary-btn {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  min-height: 43px;
  padding: 0 16px;
  border: 1px solid rgba(216, 184, 116, 0.5);
  background: linear-gradient(100deg, rgba(195, 154, 80, 0.21), rgba(216, 184, 116, 0.06));
  color: #f2e4c4;
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: 0.1em;
  transition: 200ms ease;
  overflow: hidden;
}
.primary-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 245, 210, 0.15) 50%, transparent 74%);
  transform: translateX(-120%);
  transition: transform 550ms ease;
}
.primary-btn:hover { border-color: var(--gold-2); background: linear-gradient(100deg, rgba(216, 184, 116, 0.32), rgba(216, 184, 116, 0.1)); }
.primary-btn:hover::after { transform: translateX(120%); }
.primary-btn em { font-family: var(--font-sans); font-style: normal; font-size: 9px; letter-spacing: 0.05em; color: rgba(231, 218, 186, 0.64); white-space: nowrap; }
.secondary-btn {
  border-color: rgba(107, 200, 164, 0.26);
  background: linear-gradient(100deg, rgba(62, 135, 109, 0.14), rgba(62, 135, 109, 0.02));
  color: #b8d9c8;
}
.secondary-btn:hover:not(:disabled) { border-color: rgba(107, 200, 164, 0.55); background: rgba(62, 135, 109, 0.2); }
.secondary-btn:disabled { cursor: not-allowed; opacity: 0.62; }
.mode-start { min-height: 44px; margin-top: 4px; }
.mode-note {
  margin: 10px 0 0; text-align: center;
  font-size: 8px; letter-spacing: 0.08em; color: var(--muted-2);
}
.endless-card { background: linear-gradient(135deg, rgba(20, 33, 43, 0.82), rgba(7, 14, 17, 0.94) 58%); border-color: rgba(106, 167, 187, 0.18); }
.endless-card .mode-kicker { color: #5a8690; }
.endless-card .mode-title-row h2 { color: #ccdce0; }
.endless-card.locked .mode-watermark { -webkit-text-stroke-color: rgba(133, 169, 177, 0.05); }
.endless-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0 0 14px; border-top: 1px solid rgba(116, 173, 186, 0.11); border-bottom: 1px solid rgba(116, 173, 186, 0.08);
}
.endless-stats div { padding: 9px 8px; border-right: 1px solid rgba(116, 173, 186, 0.07); }
.endless-stats div:last-child { border-right: 0; }
.endless-stats span { display: block; font-size: 8px; color: #64787a; letter-spacing: 0.08em; }
.endless-stats b { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: #9db8ba; }
.menu-footer {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  max-width: 1500px; width: 100%; margin: 0 auto;
  padding-top: 12px;
  border-top: 1px solid rgba(216, 184, 116, 0.08);
}
.controls-line { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.controls-line > span { display: flex; align-items: center; gap: 4px; color: #74766c; font-size: 9px; }
.controls-line kbd { color: #ab9b76; }
.footer-mark { display: flex; gap: 8px; color: #50564f; font-size: 8px; letter-spacing: 0.04em; }

/* =========================================================
   游戏布局
   ========================================================= */
.game-screen {
  display: grid;
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--cmd-h) var(--dock-h);
  background: var(--bg-1);
  z-index: 3;
}
.topbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(390px, 1fr) auto minmax(300px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(203, 169, 101, 0.18);
  background:
    linear-gradient(180deg, rgba(19, 32, 31, 0.97), rgba(8, 16, 17, 0.97)),
    radial-gradient(ellipse at 50% 0, rgba(216, 184, 116, 0.07), transparent 55%);
  z-index: 20;
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 184, 116, 0.36), transparent);
}
.topbar-left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.game-brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.game-brand-mark {
  color: var(--gold); font-size: 20px;
  text-shadow: 0 0 18px rgba(216, 184, 116, 0.24);
}
.game-brand strong { display: block; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.15em; white-space: nowrap; }
.game-brand small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 7px; color: var(--gold-dim); letter-spacing: 0.12em; }
.objective-block { min-width: 0; padding-left: 19px; border-left: 1px solid rgba(216, 184, 116, 0.14); }
.objective-title { font-size: 11px; color: #c9bc9b; letter-spacing: 0.06em; white-space: nowrap; }
.nest-pips { display: flex; align-items: center; gap: 5px; margin: 5px 0 3px; }
.nest-pip {
  position: relative;
  width: 16px; height: 5px;
  border: 1px solid rgba(216, 184, 116, 0.2);
  background: rgba(255, 255, 255, 0.035);
  transition: 300ms ease;
}
.nest-pip.t1 { border-color: rgba(113, 183, 128, 0.34); }
.nest-pip.t2 { border-color: rgba(201, 164, 87, 0.34); }
.nest-pip.t3 { border-color: rgba(206, 100, 88, 0.34); }
.nest-pip.elite { width: 22px; }
.nest-pip.cleared { background: rgba(97, 207, 149, 0.55); border-color: rgba(125, 255, 184, 0.75); box-shadow: 0 0 10px rgba(97, 207, 149, 0.28); }
.nest-pip.current { box-shadow: 0 0 0 1px rgba(240, 210, 145, 0.7), 0 0 12px rgba(240, 210, 145, 0.18); }
.nest-pip.dead { opacity: 0.28; }
.objective-sub { font-size: 9px; color: #68736c; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.wave-block { min-width: 292px; text-align: center; }
.wave-topline { display: flex; align-items: center; justify-content: space-between; font-size: 8px; color: #69766f; letter-spacing: 0.06em; }
.wave-topline em { font-style: normal; color: #7d8f86; }
.wave-main { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 3px 0 4px; }
.wave-main b { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: 0.08em; color: #e5d7b6; }
.wave-main span { font-family: var(--font-mono); font-size: 9px; color: #849186; }
.threat-track { height: 2px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.threat-track i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #b18e4d, #d16654); box-shadow: 0 0 10px rgba(209, 102, 84, 0.4); transition: width 400ms linear; }
.topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
.resource-cell { position: relative; min-width: 64px; text-align: right; padding-right: 14px; border-right: 1px solid rgba(216, 184, 116, 0.12); }
.resource-cell span { display: block; font-size: 8px; color: #65726d; letter-spacing: 0.1em; margin-bottom: 2px; }
.resource-cell b { font-family: var(--font-mono); font-weight: 400; font-size: 16px; color: #d5c39d; }
.level-cell { padding-right: 14px; }
.mini-xp { position: absolute; left: 0; right: 14px; bottom: -3px; height: 1px; background: rgba(255,255,255,0.06); }
.mini-xp i { display: block; height: 100%; width: 0%; background: #78c7a4; }
.icon-group { display: flex; gap: 5px; }
.icon-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid rgba(216, 184, 116, 0.16);
  color: #988f7b;
  font-family: var(--font-mono); font-size: 12px;
  background: rgba(255, 255, 255, 0.015);
  transition: 160ms ease;
}
.icon-btn:hover { color: var(--gold-2); border-color: rgba(216, 184, 116, 0.4); background: rgba(216, 184, 116, 0.07); }
.icon-btn.muted { opacity: 0.4; }

.game-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  min-height: 0;
  position: relative;
}
.battlefield {
  position: relative;
  min-width: 0; min-height: 0;
  overflow: hidden;
  background: #0b1715;
  cursor: crosshair;
}
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.battle-vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 120px 18px rgba(3, 8, 8, 0.78);
  background:
    linear-gradient(90deg, rgba(3, 8, 8, 0.25), transparent 12%, transparent 88%, rgba(3, 8, 8, 0.25)),
    linear-gradient(0deg, rgba(3, 8, 8, 0.24), transparent 18%, transparent 90%);
}
.field-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}
.minimap-wrap {
  position: absolute; left: 16px; bottom: 16px;
  width: 252px;
  padding: 8px 7px 6px;
  border: 1px solid rgba(216, 184, 116, 0.2);
  background: rgba(7, 14, 14, 0.86);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(5px);
  z-index: 5;
}
.minimap-head { display: flex; justify-content: space-between; align-items: center; padding: 0 3px 6px; }
.minimap-head span { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.13em; color: #c0b28e; }
.minimap-head i { font-style: normal; font-family: var(--font-mono); font-size: 7px; color: #5f6b65; }
#minimap { display: block; width: 100%; height: auto; border: 1px solid rgba(216, 184, 116, 0.09); background: #07100f; }
.minimap-legend { display: flex; align-items: center; gap: 8px; padding: 6px 3px 1px; font-size: 7px; color: #6b746d; }
.dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-right: 3px; }
.dot.ally { background: #e7cf92; box-shadow: 0 0 6px rgba(231, 207, 146, 0.5); }
.dot.enemy { background: #ce695b; }
.dot.loot { background: #d3b35e; }
.interact-prompt {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px;
  border: 1px solid rgba(216, 184, 116, 0.45);
  background: rgba(17, 27, 24, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(216, 184, 116, 0.07);
  font-size: 11px; color: #e2d3ad;
  z-index: 8;
  animation: promptIn 180ms ease both;
}
@keyframes promptIn { from { opacity: 0; transform: translate(-50%, 5px); } to { opacity: 1; transform: translate(-50%, 0); } }
.interact-prompt kbd { background: rgba(216, 184, 116, 0.16); border-color: rgba(216, 184, 116, 0.55); color: #f2d891; }
.wave-banner {
  position: absolute; left: 50%; top: 25%; transform: translate(-50%, 0);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 15px 62px 13px;
  background: linear-gradient(90deg, transparent, rgba(9, 18, 17, 0.88) 24%, rgba(9, 18, 17, 0.88) 76%, transparent);
  color: #e6d7b4;
  opacity: 0; pointer-events: none;
  z-index: 7;
}
.wave-banner.show { animation: waveBanner 2.8s ease both; }
@keyframes waveBanner {
  0% { opacity: 0; transform: translate(-50%, 9px); letter-spacing: 0.22em; }
  14% { opacity: 1; transform: translate(-50%, 0); }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}
.wb-kicker { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.34em; color: #a78954; }
.wave-banner strong { font-family: var(--font-display); font-size: 27px; font-weight: 500; letter-spacing: 0.16em; }
.wave-banner small { color: #7b8175; font-size: 9px; letter-spacing: 0.06em; }
.wave-banner.elite { background: linear-gradient(90deg, transparent, rgba(46, 17, 18, 0.9) 24%, rgba(46, 17, 18, 0.9) 76%, transparent); }
.wave-banner.elite strong { color: #f0aa84; }
.wave-banner.elite .wb-kicker { color: #d6785f; }
.toast-stack {
  position: absolute; right: 16px; top: 16px;
  width: 304px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 9;
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(216, 184, 116, 0.2);
  border-left: 2px solid #a78a52;
  background: rgba(10, 20, 19, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
  color: #bbb19b; font-size: 10px; line-height: 1.55;
  animation: toastIn 240ms ease both;
  backdrop-filter: blur(6px);
}
.toast.leaving { animation: toastOut 300ms ease both; }
.toast .toast-icon { color: var(--gold); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; }
.toast.good { border-left-color: #62bc8e; }
.toast.warn { border-left-color: #ca7652; }
.toast.common { border-left-color: #c7c2b2; }
.toast.rare { border-left-color: #69b8ff; }
.toast.epic { border-left-color: #c58bff; }
.toast.legendary { border-left-color: #ffc861; box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 22px rgba(255, 200, 97, 0.09); }
.toast.rare .toast-icon { color: #69b8ff; }
.toast.epic .toast-icon { color: #c58bff; }
.toast.legendary .toast-icon { color: #ffc861; }
@keyframes toastIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(14px); } }
.battle-legend {
  position: absolute; right: 16px; bottom: 17px;
  display: flex; gap: 12px; align-items: center;
  padding: 5px 9px;
  background: rgba(7, 14, 14, 0.62);
  border: 1px solid rgba(216, 184, 116, 0.1);
  color: #6c766e; font-size: 8px;
  z-index: 5;
}
.lg { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; }
.lg.you { background: #f2d994; box-shadow: 0 0 7px rgba(242,217,148,.6); }
.lg.elite { background: #ec9970; box-shadow: 0 0 7px rgba(236,153,112,.5); }
.lg.chest { background: #cbae5c; }
.onboarding-hint {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  max-width: min(660px, calc(100% - 360px));
  padding: 8px 30px 8px 13px;
  border: 1px solid rgba(216, 184, 116, 0.18);
  background: rgba(8, 16, 16, 0.86);
  color: #9e9a89; font-size: 9px; line-height: 1.6;
  z-index: 6;
  transition: opacity 300ms ease, transform 300ms ease;
}
.onboarding-hint b { flex: 0 0 auto; font-family: var(--font-display); font-size: 11px; color: #d7c6a1; letter-spacing: 0.08em; }
.onboarding-hint kbd { margin: 0 2px; }
.onboarding-hint.hide { opacity: 0; transform: translate(-50%, -7px); pointer-events: none; }
.hint-close { position: absolute; right: 7px; top: 5px; color: #62685f; font-size: 13px; line-height: 1; }
.hint-close:hover { color: #d2c4a2; }

/* =========================================================
   统御者指挥栏（底部玩家状态 / 装备）
   ========================================================= */
.commander-dock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 8px 16px;
  border-top: 1px solid rgba(216, 184, 116, 0.22);
  border-bottom: 1px solid rgba(216, 184, 116, 0.12);
  background:
    linear-gradient(180deg, rgba(22, 35, 32, 0.98), rgba(8, 15, 15, 0.99)),
    radial-gradient(ellipse at 16% 0, rgba(216, 184, 116, 0.08), transparent 42%);
  z-index: 16;
}
.commander-dock::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 213, 138, 0.55), transparent);
}
.cd-portrait-block { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; }
.cd-portrait {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(216, 184, 116, 0.48);
  background:
    radial-gradient(circle at 50% 42%, rgba(216, 184, 116, 0.2), rgba(15, 28, 25, 0.94) 66%),
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 45%);
  box-shadow: inset 0 0 26px rgba(216, 184, 116, 0.09), 0 0 22px rgba(216, 184, 116, 0.06);
  color: #ead39f;
  font-family: var(--font-display);
  font-size: 23px;
}
.cd-portrait::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(216, 184, 116, 0.18); }
.cd-portrait > span { position: relative; z-index: 1; }
.cd-level-badge {
  position: absolute; right: -5px; bottom: -5px;
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border: 1px solid rgba(216, 184, 116, 0.55);
  border-radius: 50%;
  background: #0b1413;
  color: #f4d58a;
  font-family: var(--font-mono); font-size: 8px; font-style: normal;
  z-index: 2;
  box-shadow: 0 0 12px rgba(0, 0, 0, .6);
}
.cd-identity { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cd-identity b { font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; color: #eadbbd; white-space: nowrap; }
.cd-identity span { font-size: 8px; color: #78857a; letter-spacing: 0.04em; white-space: nowrap; }
.cd-identity em { font-style: normal; font-family: var(--font-mono); font-size: 6px; color: #59675d; letter-spacing: 0.05em; white-space: nowrap; }
.cd-vitals { display: flex; flex-direction: column; gap: 5px; flex: 0 0 292px; min-width: 0; }
.cd-vital { min-width: 0; }
.cd-vital-top { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
.cd-vital-top span { font-size: 9px; color: #8f8268; letter-spacing: 0.1em; }
.cd-vital-top b { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: #cfc4ab; }
.cd-vital-top em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 6px; color: #5a7769; }
.cd-track { position: relative; height: 7px; background: rgba(0, 0, 0, 0.48); border: 1px solid rgba(255,255,255,0.045); overflow: hidden; }
.cd-track::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 62%); pointer-events: none; }
.cd-track i { display: block; height: 100%; width: 100%; transition: width 140ms linear; }
.cd-vital.hp .cd-track i { background: linear-gradient(90deg, #6e262e, #d45e50); box-shadow: 0 0 12px rgba(212, 94, 80, 0.25); }
.cd-vital.hp .cd-track i.low { background: linear-gradient(90deg, #9a2c2c, #ff8068); }
.cd-vital.energy .cd-track i { background: linear-gradient(90deg, #24616b, #5fd5c2); box-shadow: 0 0 12px rgba(95, 213, 194, 0.22); }
.cd-xp-row { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 6px; color: #6f6a7d; }
.cd-xp { flex: 1; height: 3px; background: rgba(255,255,255,0.05); overflow: hidden; }
.cd-xp i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #6e5b9d, #b7a0e6); transition: width 250ms linear; }
.cd-xp-row b { font-weight: 400; color: #8e86a6; white-space: nowrap; }
.cd-stats { display: grid; grid-template-columns: repeat(4, 1fr); flex: 0 0 178px; border-left: 1px solid rgba(216,184,116,.09); border-right: 1px solid rgba(216,184,116,.09); }
.cd-stats > div { padding: 3px 4px; text-align: center; border-right: 1px solid rgba(216,184,116,.06); }
.cd-stats > div:last-child { border-right: 0; }
.cd-stats span { display: block; font-size: 7px; color: #5e6a62; letter-spacing: 0.06em; }
.cd-stats b { display: block; margin: 3px 0 1px; font-family: var(--font-mono); font-size: 15px; font-weight: 400; color: #d5c6a8; }
.cd-stats i { display: block; font-style: normal; font-size: 6px; color: #4d5a52; }
.cd-equipment { flex: 1; min-width: 0; }
.cd-equipment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.cd-equipment-head > span { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.12em; color: #6e7c72; white-space: nowrap; }
.cd-actions { display: flex; align-items: center; gap: 4px; }
.cd-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid rgba(216,184,116,.22); color: #b6a47d; font-size: 7px; letter-spacing: .06em; transition: 140ms ease; white-space: nowrap; }
.cd-btn:hover { border-color: rgba(216,184,116,.55); color: var(--gold-2); background: rgba(216,184,116,.08); }
.cd-btn b { font-family: var(--font-mono); font-weight: 400; color: #e5c98d; }
.cd-btn kbd { height: 12px; min-width: 12px; padding: 0 3px; font-size: 6px; border-color: rgba(216,184,116,.24); }
.cd-btn.quiet { opacity: .72; }
.commander-dock .slot-dots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; }
.commander-dock .slot-dot { height: 34px; border-color: rgba(216,184,116,.16); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.18)); font-size: 15px; }
.commander-dock .slot-dot:hover { border-color: rgba(216,184,116,.55); background: rgba(216,184,116,.08); }
.commander-dock .slot-dot.filled { border-color: color-mix(in srgb, var(--slot-color, #d8b56a) 48%, transparent); color: var(--slot-color, #d8b56a); }
.commander-dock .slot-dot.treasure.filled { border-color: rgba(196,149,255,.5); color: #d2a8ff; }
.commander-dock .slot-dot.missing { border-color: rgba(203,100,83,.4); color: #b96051; background: rgba(139,42,35,.1); }
.commander-dock .slot-dot .slot-short { font-size: 6px; bottom: 2px; color: #6f7a70; }
.recruit-label { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; padding-right: 10px; border-right: 1px solid rgba(216,184,116,.1); }
.recruit-label span { font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; color: #c2b18d; }
.recruit-label em { font-style: normal; font-family: var(--font-mono); font-size: 6px; letter-spacing: .16em; color: #5d6a60; }

/* =========================================================
   侧栏
   ========================================================= */
.sidebar {
  display: flex; flex-direction: column;
  min-height: 0;
  border-left: 1px solid rgba(216, 184, 116, 0.16);
  background:
    linear-gradient(180deg, rgba(14, 25, 24, 0.98), rgba(7, 14, 15, 0.99)),
    radial-gradient(ellipse at 30% 0, rgba(216, 184, 116, 0.06), transparent 45%);
  z-index: 10;
}
.commander-card { padding: 14px 14px 11px; border-bottom: 1px solid rgba(216, 184, 116, 0.12); background: rgba(255,255,255,0.015); }
.commander-head { display: flex; align-items: center; gap: 10px; }
.commander-portrait {
  position: relative; flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(216, 184, 116, 0.36);
  background: radial-gradient(circle, rgba(216, 184, 116, 0.16), rgba(14, 26, 24, 0.84) 65%);
  color: #e5d0a0;
  font-family: var(--font-display); font-size: 19px;
  box-shadow: inset 0 0 20px rgba(216, 184, 116, 0.06), 0 0 22px rgba(216, 184, 116, 0.05);
}
.commander-portrait::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(216, 184, 116, 0.16); transform: rotate(45deg); }
.commander-portrait > span { position: relative; z-index: 1; }
.portrait-ring { position: absolute; inset: -4px; border: 1px solid rgba(216, 184, 116, 0.08); border-radius: 50%; }
.commander-id { flex: 1; min-width: 0; }
.commander-title { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 16px; letter-spacing: 0.1em; color: #e2d7c0; }
.seven-tag { padding: 2px 4px; border: 1px solid rgba(216, 184, 116, 0.2); font-family: var(--font-mono); font-size: 7px; color: #a08e67; letter-spacing: 0.05em; }
.commander-id p { margin: 4px 0 0; font-size: 9px; color: #6b756e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commander-id p b { color: #b9a77f; font-family: var(--font-mono); font-weight: 400; }
.micro-btn {
  flex: 0 0 auto; padding: 5px 7px;
  border: 1px solid rgba(216, 184, 116, 0.2);
  color: #a69671; font-size: 8px; letter-spacing: 0.1em;
  transition: 160ms ease;
}
.micro-btn:hover { border-color: rgba(216, 184, 116, 0.46); color: var(--gold-2); background: rgba(216, 184, 116, 0.06); }
.commander-hp-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.bar { height: 4px; background: rgba(255,255,255,0.055); overflow: hidden; }
.hp-bar { flex: 1; height: 5px; }
.hp-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #4e9d78, #7fdaae); box-shadow: 0 0 10px rgba(101, 204, 152, 0.24); transition: width 160ms linear; }
.hp-bar i.low { background: linear-gradient(90deg, #8b4037, #d9715f); }
.commander-hp-row span { font-family: var(--font-mono); font-size: 8px; color: #93a294; white-space: nowrap; }
.commander-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 9px; border-top: 1px solid rgba(216,184,116,0.07); border-bottom: 1px solid rgba(216,184,116,0.07); }
.commander-stats > div { padding: 7px 3px 6px; border-right: 1px solid rgba(216,184,116,0.06); text-align: center; }
.commander-stats > div:last-child { border-right: 0; }
.commander-stats span { display: block; font-size: 7px; color: #636f68; letter-spacing: 0.08em; }
.commander-stats b { display: block; margin: 3px 0 1px; font-family: var(--font-mono); font-size: 15px; font-weight: 400; color: #cfc09f; }
.commander-stats i { display: block; font-style: normal; font-size: 6px; color: #4e5b54; }
.slot-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 9px; }
.slot-dot {
  position: relative;
  height: 25px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(216,184,116,0.12);
  background: rgba(255,255,255,0.018);
  font-family: var(--font-display); font-size: 10px;
  color: #b6a985;
  cursor: pointer;
  transition: 150ms ease;
}
.slot-dot .slot-short { position: absolute; bottom: 1px; right: 2px; font-family: var(--font-mono); font-size: 5px; color: #515a52; letter-spacing: 0; }
.slot-dot:hover { border-color: rgba(216,184,116,0.4); background: rgba(216,184,116,0.07); }
.slot-dot.empty { color: #4e5852; border-style: dashed; }
.slot-dot.missing { border-color: rgba(203, 100, 83, 0.45); color: #c47664; background: rgba(150, 55, 43, 0.09); }
.slot-dot.treasure.filled { color: #d2a8ff; border-color: rgba(196, 149, 255, 0.4); }
.weight-formula {
  display: flex; align-items: center; gap: 7px;
  margin-top: 8px;
  color: #5e6a62; font-size: 7px; white-space: nowrap;
}
.weight-formula > span:first-child { color: #77847a; }
.weight-formula b { color: #aeb393; font-weight: 400; }
.weight-formula code { font-family: var(--font-mono); font-size: 7px; color: #4f5e55; overflow: hidden; text-overflow: ellipsis; }
.formula-result { margin-left: auto; color: #718877; }
.formula-result b { color: #a7c4ac; font-family: var(--font-mono); }

.side-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(216, 184, 116, 0.12);
  background: rgba(255,255,255,0.01);
}
.side-tab {
  position: relative;
  padding: 11px 4px 9px;
  color: #6d7870; font-size: 10px; letter-spacing: 0.08em;
  border-right: 1px solid rgba(216,184,116,0.07);
  transition: 160ms ease;
}
.side-tab:last-child { border-right: 0; }
.side-tab b { margin-left: 3px; font-family: var(--font-mono); font-size: 8px; font-weight: 400; color: #8e9c8c; }
.side-tab:hover { color: #b9b29d; background: rgba(216,184,116,0.03); }
.side-tab.active { color: #e0d2b2; }
.side-tab.active::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 1px; background: var(--gold); box-shadow: 0 0 9px rgba(216,184,116,.4); }
.side-content { flex: 1; min-height: 0; position: relative; }
.side-panel {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  display: none;
  padding: 9px 9px 14px;
}
.side-panel.active { display: block; }
.sidebar-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px;
  border-top: 1px solid rgba(216,184,116,0.1);
  background: rgba(0,0,0,0.12);
}
.queue-summary { flex: 1; min-width: 0; }
.queue-summary > span { display: block; font-size: 7px; letter-spacing: 0.1em; color: #5c665e; margin-bottom: 4px; }
.queue-chips { display: flex; gap: 3px; flex-wrap: wrap; min-height: 14px; }
.queue-chips em { font-style: normal; font-size: 8px; color: #4b564e; }
.queue-chip {
  position: relative;
  min-width: 23px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 1px solid rgba(216,184,116,0.16);
  font-size: 7px; color: #9b9279;
  overflow: hidden;
}
.queue-chip i { position: absolute; left: 0; bottom: 0; height: 1px; background: #a58b57; }
.army-empty, .panel-empty {
  padding: 28px 16px;
  color: #59645d; font-size: 10px; line-height: 1.8; text-align: center;
}
.panel-empty b { display: block; margin-bottom: 8px; color: #8d9282; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.06em; }
.army-row {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 7px;
  border: 1px solid transparent;
  border-bottom-color: rgba(216,184,116,0.06);
  text-align: left;
  transition: 140ms ease;
}
.army-row:hover { background: rgba(216,184,116,0.045); border-color: rgba(216,184,116,0.15); }
.army-sigil {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--unit-color, #d8b56a) 40%, transparent);
  background: color-mix(in srgb, var(--unit-color, #d8b56a) 8%, transparent);
  color: var(--unit-color, #d8b56a);
  font-family: var(--font-display); font-size: 13px;
}
.army-main { flex: 1; min-width: 0; }
.army-name-line { display: flex; align-items: center; gap: 5px; }
.army-name-line b { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: #cfc5aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.army-name-line small { font-family: var(--font-mono); font-size: 6px; color: #62716a; white-space: nowrap; }
.army-sub { display: flex; justify-content: space-between; margin: 3px 0 4px; font-size: 8px; color: #67756c; }
.army-sub em { font-style: normal; color: #8b9c8c; }
.army-sub .dual-mark { color: #c7a862; }
.army-hp-track { height: 2px; background: rgba(255,255,255,0.05); }
.army-hp-track i { display: block; height: 100%; background: linear-gradient(90deg, #44866e, #6bc697); transition: width 120ms linear; }
.army-hp-track i.low { background: linear-gradient(90deg, #8b4037, #d9715f); }
.army-treasure { flex: 0 0 auto; width: 20px; text-align: center; font-size: 10px; color: #d7b3ff; text-shadow: 0 0 8px rgba(207, 161, 255, 0.3); }
.army-treasure.none { color: #3d4741; }
.army-hpnum { flex: 0 0 auto; font-family: var(--font-mono); font-size: 8px; color: #7b877d; }

.treasure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.treasure-mini {
  position: relative;
  padding: 8px 7px 7px;
  border: 1px solid rgba(216,184,116,0.11);
  border-top-color: color-mix(in srgb, var(--q-color, #c7c2b2) 58%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--q-color) 7%, transparent), rgba(255,255,255,0.012));
  text-align: left;
  transition: 150ms ease;
}
.treasure-mini:hover { border-color: color-mix(in srgb, var(--q-color) 55%, transparent); background: color-mix(in srgb, var(--q-color) 9%, rgba(0,0,0,0.1)); transform: translateY(-1px); }
.treasure-mini .tm-top { display: flex; justify-content: space-between; align-items: center; }
.treasure-mini .tm-icon { font-family: var(--font-display); font-size: 16px; color: var(--q-color); line-height: 1; }
.treasure-mini .tm-q { font-family: var(--font-mono); font-size: 6px; color: var(--q-color); letter-spacing: 0.06em; }
.treasure-mini b { display: block; margin: 7px 0 3px; font-family: var(--font-display); font-size: 10px; font-weight: 500; color: #d7cdb6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treasure-mini p { margin: 0; font-size: 8px; line-height: 1.5; color: #737a6f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.treasure-mini .tm-count { position: absolute; right: 5px; bottom: 4px; font-family: var(--font-mono); font-size: 7px; color: #93866b; }
.treasure-mini.empty { opacity: .6; }
.panel-hint {
  margin: 8px 2px 0;
  padding: 7px 8px;
  border-left: 1px solid rgba(216,184,116,0.22);
  background: rgba(216,184,116,0.025);
  font-size: 9px; line-height: 1.65; color: #68736a;
}
.tech-list { display: flex; flex-direction: column; gap: 5px; }
.tech-mini {
  display: flex; gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(216,184,116,0.1);
  background: rgba(255,255,255,0.012);
}
.tech-mini .t-icon { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(216,184,116,0.16); color: #c2b38c; font-family: var(--font-display); font-size: 11px; }
.tech-mini .t-main { min-width: 0; }
.tech-mini b { display: block; font-family: var(--font-display); font-size: 10px; font-weight: 500; color: #cdc2a9; }
.tech-mini span { display: block; margin-top: 2px; font-size: 7px; line-height: 1.5; color: #6b756c; }
.tech-mini em { display: block; margin-bottom: 2px; font-style: normal; font-family: var(--font-mono); font-size: 6px; color: #8b7954; }
.tech-mini.spec { border-color: rgba(152, 118, 205, 0.18); }
.tech-mini.spec .t-icon { color: #c2a0ec; border-color: rgba(152, 118, 205, 0.25); }
.side-progress { margin: 8px 2px 0; }
.side-progress .sp-row { display: flex; justify-content: space-between; font-size: 7px; color: #68756d; margin-bottom: 4px; }
.side-progress .sp-bar { height: 2px; background: rgba(255,255,255,0.05); }
.side-progress .sp-bar i { display: block; height: 100%; background: #6abf96; }
.side-progress .sp-bar.xp i { background: #839dcd; }
.side-progress .sp-row + .sp-bar { margin-bottom: 8px; }

/* =========================================================
   生产码头
   ========================================================= */
.production-dock {
  position: relative;
  display: grid;
  grid-template-rows: 37px minmax(0, 1fr);
  gap: 7px;
  padding: 9px 16px 13px;
  border-top: 1px solid rgba(216, 184, 116, 0.2);
  background:
    linear-gradient(180deg, rgba(13, 23, 23, 0.98), rgba(7, 13, 14, 0.99)),
    radial-gradient(ellipse at 30% 0, rgba(216, 184, 116, 0.05), transparent 48%);
  z-index: 15;
}
.production-dock::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 184, 116, 0.36), transparent);
}
.dock-top { display: flex; align-items: center; gap: 18px; min-width: 0; }
.energy-block { flex: 0 0 292px; }
.energy-heading { display: flex; align-items: baseline; gap: 7px; margin-bottom: 5px; }
.energy-heading span { font-size: 10px; color: #c2b28d; letter-spacing: 0.1em; }
.energy-heading b { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: #dccb9e; }
.energy-heading em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 7px; color: #5f7568; }
.energy-bar { position: relative; height: 5px; background: rgba(255,255,255,0.055); overflow: hidden; }
.energy-bar i { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, #3f9175, #7ee1b4); box-shadow: 0 0 12px rgba(102, 223, 174, 0.26); transition: width 100ms linear; }
.energy-gloss { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent 60%); }
.race-tabs { display: flex; align-items: center; gap: 5px; min-width: 0; }
.race-tab {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  height: 29px;
  padding: 0 10px 0 7px;
  border: 1px solid rgba(216, 184, 116, 0.1);
  color: #79827a;
  font-size: 10px; letter-spacing: 0.04em;
  transition: 160ms ease;
  white-space: nowrap;
}
.race-tab .rt-icon { font-family: var(--font-display); font-size: 12px; color: var(--race-color); opacity: .7; }
.race-tab small { font-family: var(--font-mono); font-size: 6px; color: #4e5952; }
.race-tab:hover { border-color: rgba(216, 184, 116, 0.26); color: #c1b69c; background: rgba(216,184,116,0.04); }
.race-tab.active { border-color: color-mix(in srgb, var(--race-color) 46%, transparent); background: color-mix(in srgb, var(--race-color) 8%, transparent); color: #ebe0ca; }
.race-tab.active .rt-icon { opacity: 1; text-shadow: 0 0 12px color-mix(in srgb, var(--race-color) 55%, transparent); }
.race-tab.active small { color: color-mix(in srgb, var(--race-color) 65%, #7e7b6b); }
.dock-meta { display: flex; align-items: center; justify-content: flex-end; gap: 11px; margin-left: auto; font-family: var(--font-mono); font-size: 8px; color: #5b685f; white-space: nowrap; }
.dock-meta #queue-label { color: #8c815f; }
.dual-legend { color: #756b51; }
.unit-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  min-height: 0;
}
.unit-card {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 8px 10px 8px;
  border: 1px solid rgba(216, 184, 116, 0.13);
  background:
    linear-gradient(160deg, rgba(23, 37, 33, 0.62), rgba(8, 15, 15, 0.84) 64%),
    radial-gradient(ellipse at 0 0, var(--race-soft, rgba(216,184,116,0.05)), transparent 52%);
  overflow: hidden;
  transition: 170ms ease;
}
.unit-card::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--race-color, #d8b56a) 54%, transparent);
  opacity: .5;
}
.unit-card::after {
  content: ""; position: absolute; right: -17px; bottom: -22px;
  width: 72px; height: 72px;
  border: 1px solid color-mix(in srgb, var(--race-color) 10%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.unit-card:hover { border-color: rgba(216, 184, 116, 0.26); transform: translateY(-1px); background: linear-gradient(160deg, rgba(28, 44, 38, 0.7), rgba(8, 15, 15, 0.88) 64%); }
.unit-card.unaffordable .rc-btn { opacity: .55; }
.unit-card.full .rc-btn { opacity: .55; }
.uc-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.uc-sigil {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--race-color) 42%, transparent);
  background: color-mix(in srgb, var(--race-color) 9%, transparent);
  color: var(--race-color);
  font-family: var(--font-display); font-size: 15px;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--race-color) 7%, transparent);
}
.uc-title { min-width: 0; flex: 1; }
.uc-title h3 {
  margin: 0;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  letter-spacing: 0.07em; color: #ddd3bb;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uc-title p { margin: 2px 0 0; font-size: 8px; color: #68766d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-tier { flex: 0 0 auto; font-family: var(--font-mono); font-size: 6px; color: #5e6b61; border: 1px solid rgba(216,184,116,0.1); padding: 2px 3px; }
.uc-cost { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; min-width: 32px; }
.uc-cost b { font-family: var(--font-mono); font-size: 15px; font-weight: 400; color: #a9e4c2; line-height: 1; }
.uc-cost span { margin-top: 2px; font-size: 6px; color: #596b5e; letter-spacing: .06em; }
.uc-stats { display: flex; gap: 5px; align-items: center; margin: 6px 0 5px; }
.uc-stats > span {
  flex: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  padding: 3px 2px;
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(216,184,116,0.055);
  font-size: 7px; color: #5d6b62;
  white-space: nowrap;
}
.uc-stats b { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: #aebaa9; }
.uc-stats .dmg-stat { flex: 1.35; color: color-mix(in srgb, var(--race-color) 62%, #6c7566); border-color: color-mix(in srgb, var(--race-color) 16%, transparent); }
.uc-stats .dmg-stat b { color: color-mix(in srgb, var(--race-color) 80%, #e3dfc9); }
.uc-weapons { display: flex; gap: 3px; flex-wrap: wrap; min-height: 21px; }
.weapon-chip {
  flex: 0 1 auto;
  display: flex; align-items: center; gap: 3px;
  min-width: 0;
  padding: 3px 5px;
  border: 1px solid rgba(216,184,116,0.1);
  background: rgba(255,255,255,0.012);
  color: #7f877c; font-size: 8px;
  transition: 130ms ease;
}
.weapon-chip .wc-icon { color: #665f4d; font-family: var(--font-display); font-size: 8px; }
.weapon-chip:hover { border-color: rgba(216,184,116,0.28); color: #bdb39d; }
.weapon-chip.active { border-color: color-mix(in srgb, var(--race-color) 55%, transparent); background: color-mix(in srgb, var(--race-color) 8%, transparent); color: #e3d8c0; }
.weapon-chip.active .wc-icon { color: var(--race-color); }
.weapon-chip .wc-type { font-family: var(--font-mono); font-size: 6px; color: #536157; }
.uc-desc { margin: 4px 0 0; font-size: 8px; line-height: 1.4; color: #5e6b63; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; min-height: 10px; }
.uc-foot { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 5px; }
.dual-toggle {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 5px;
  border: 1px solid rgba(216,184,116,0.1);
  color: #5d685e; font-size: 8px;
  text-align: left; min-width: 0; transition: 140ms ease;
}
.dual-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dual-toggle:hover { border-color: rgba(216,184,116,0.3); color: #b7a886; }
.dual-toggle.on { color: #e6c883; border-color: rgba(216,184,116,0.42); background: rgba(216,184,116,0.08); }
.dual-toggle:disabled { opacity: .35; cursor: not-allowed; }
.rc-btn {
  position: relative;
  flex: 0 0 auto; margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--race-color) 38%, transparent);
  background: color-mix(in srgb, var(--race-color) 8%, transparent);
  color: #e0d1ac; font-size: 9px; letter-spacing: .04em;
  transition: 150ms ease;
}
.rc-btn:hover { border-color: var(--race-color); background: color-mix(in srgb, var(--race-color) 15%, transparent); }
.rc-btn kbd { height: 13px; min-width: 13px; font-size: 7px; border-color: color-mix(in srgb, var(--race-color) 35%, transparent); color: #ae9f7e; }
.rc-cost { color: #89c8a2; font-family: var(--font-mono); font-size: 8px; }
.uc-locked { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6,11,11,.7); color: #76796a; font-size: 9px; z-index: 2; }

/* =========================================================
   弹窗 / 模拟层
   ========================================================= */
.modal-layer {
  position: absolute; inset: 0;
  z-index: 110;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(3, 8, 8, 0.74);
  backdrop-filter: blur(7px);
  overflow-y: auto;
}
.modal-layer > .modal { margin: auto; }
.modal-layer.external { position: fixed; z-index: 500; }
.modal-layer.external .modal { max-height: calc(100vh - 40px); }
.modal {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 23px 25px 22px;
  border: 1px solid rgba(216, 184, 116, 0.28);
  background:
    linear-gradient(145deg, rgba(20, 34, 31, 0.99), rgba(7, 14, 14, 0.99) 67%),
    radial-gradient(ellipse at 50% 0, rgba(216, 184, 116, 0.08), transparent 55%);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255,255,255,0.025);
  animation: modalIn 220ms cubic-bezier(.16,.84,.32,1) both;
}
.modal::before, .modal::after { content: ""; position: absolute; width: 24px; height: 24px; pointer-events: none; }
.modal::before { top: 6px; left: 6px; border-top: 1px solid var(--gold-dim); border-left: 1px solid var(--gold-dim); }
.modal::after { bottom: 6px; right: 6px; border-bottom: 1px solid var(--gold-dim); border-right: 1px solid var(--gold-dim); }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.modal.small { width: min(580px, 100%); }
.modal.medium { width: min(760px, 100%); }
.modal.wide { width: min(1040px, 100%); }
.modal-header { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(216,184,116,0.12); margin-bottom: 16px; }
.modal-kicker { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.23em; color: #8a7750; margin-bottom: 5px; }
.modal-title { margin: 0; font-family: var(--font-display); font-size: 25px; font-weight: 500; letter-spacing: 0.08em; color: #e7dcc3; }
.modal-sub { margin: 5px 0 0; color: #777e72; font-size: 11px; line-height: 1.7; }
.modal-close {
  position: absolute; right: 13px; top: 12px;
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border: 1px solid rgba(216,184,116,0.16);
  color: #878373; font-size: 14px;
  transition: 140ms ease;
}
.modal-close:hover { border-color: rgba(216,184,116,0.45); color: #e6d6b0; }
.modal-heading-icon { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(216,184,116,0.28); background: rgba(216,184,116,0.06); color: var(--gold); font-family: var(--font-display); font-size: 22px; }
.modal-body { min-height: 0; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(216,184,116,0.1); }
.modal-footer .ghost-btn, .modal-footer .secondary-btn, .modal-footer .primary-btn { width: auto; min-height: 34px; padding: 0 15px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice-card {
  position: relative;
  min-height: 190px;
  display: flex; flex-direction: column;
  padding: 15px 14px 13px;
  border: 1px solid rgba(216,184,116,0.17);
  background: linear-gradient(160deg, rgba(31, 47, 39, 0.4), rgba(7, 14, 14, 0.52));
  text-align: left;
  transition: 180ms ease;
}
.choice-card:hover { border-color: rgba(216,184,116,0.5); background: linear-gradient(160deg, rgba(48, 69, 54, 0.56), rgba(9, 17, 16, 0.6)); transform: translateY(-2px); }
.choice-card.selected { border-color: var(--gold); background: rgba(216,184,116,0.08); }
.choice-tag { font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; color: #8b7954; }
.choice-icon { width: 38px; height: 38px; margin: 12px 0 10px; display: grid; place-items: center; border: 1px solid rgba(216,184,116,0.22); color: var(--gold); font-family: var(--font-display); font-size: 19px; background: rgba(216,184,116,0.04); }
.choice-card h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: .06em; color: #e1d5ba; }
.choice-card p { margin: 7px 0 0; font-size: 10px; line-height: 1.75; color: #747d71; flex: 1; }
.choice-pick { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(216,184,116,0.1); padding-top: 9px; font-size: 8px; color: #a79a7b; }
.choice-pick b { font-family: var(--font-mono); font-weight: 400; font-size: 9px; color: #d8bf8d; }
.choice-card[data-quality="common"] { --q-color: #c7c2b2; }
.choice-card[data-quality="rare"] { --q-color: #69b8ff; border-top-color: rgba(105,184,255,.55); }
.choice-card[data-quality="epic"] { --q-color: #c58bff; border-top-color: rgba(197,139,255,.55); }
.choice-card[data-quality="legendary"] { --q-color: #ffc861; border-top-color: rgba(255,200,97,.65); box-shadow: inset 0 0 40px rgba(255,200,97,.035); }
.choice-card[data-quality] .choice-icon { color: var(--q-color); border-color: color-mix(in srgb, var(--q-color) 35%, transparent); }
.choice-card[data-quality] .choice-tag { color: var(--q-color); }
.loot-type { font-family: var(--font-mono); font-size: 7px; color: #69766b; margin-top: 6px; }
.levelup-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 9px 11px; border-left: 2px solid #7bb899; background: rgba(80, 155, 120, 0.055); color: #91a696; font-size: 9px; line-height: 1.6; }
.levelup-banner b { color: #b7d7c1; }
.reward-note { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 9px 11px; border-left: 2px solid #c4975c; background: rgba(196, 151, 92, 0.055); color: #a49780; font-size: 9px; line-height: 1.6; }
.reward-note b { color: #d9bf93; }
.iron-law { color: #c98d7d; }

/* 整备 / 单位档案 */
.loadout-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 18px; }
.gear-slot {
  display: flex; align-items: center; gap: 10px;
  min-height: 58px;
  padding: 8px 9px;
  border: 1px solid rgba(216,184,116,0.12);
  background: rgba(255,255,255,.012);
}
.gear-slot + .gear-slot { margin-top: 5px; }
.gear-slot.missing { border-style: dashed; opacity: .68; }
.gear-slot .gs-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(216,184,116,0.2); color: #cbb987; font-family: var(--font-display); font-size: 16px; flex: 0 0 auto; }
.gear-slot .gs-main { flex: 1; min-width: 0; }
.gear-slot .gs-top { display: flex; align-items: center; gap: 6px; }
.gear-slot .gs-top b { font-family: var(--font-display); font-size: 12px; font-weight: 500; color: #d5c9ae; }
.gear-slot .gs-top small { color: #5e6a60; font-size: 7px; }
.gear-slot .gs-top .gs-stat { margin-left: auto; font-family: var(--font-mono); font-size: 8px; color: #9eac9e; }
.gear-slot p { margin: 4px 0 0; font-size: 8px; line-height: 1.45; color: #6d786f; }
.gear-slot .gs-weight { font-family: var(--font-mono); font-size: 7px; color: #5c685f; white-space: nowrap; }
.gs-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.mini-action { padding: 4px 6px; border: 1px solid rgba(216,184,116,.18); color: #91866d; font-size: 7px; transition: 140ms; }
.mini-action:hover { border-color: rgba(216,184,116,.46); color: var(--gold-2); background: rgba(216,184,116,.06); }
.mini-action:disabled { opacity: .32; cursor: not-allowed; }
.mini-action.danger { border-color: rgba(203,100,83,.22); color: #b4776a; }
.mini-action.danger:hover { color: #eb9d8d; border-color: rgba(203,100,83,.5); }
.slot-penalty { margin: 5px 0 0 44px; font-size: 7px; line-height: 1.5; color: #9b7368; }
.loadout-summary { padding: 15px; border: 1px solid rgba(216,184,116,0.14); background: rgba(216,184,116,0.025); }
.loadout-summary h3 { margin: 0 0 11px; font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: .07em; color: #d6c8ac; }
.ls-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(216,184,116,.07); font-size: 9px; color: #6f7b70; }
.ls-row b { font-family: var(--font-mono); font-weight: 400; color: #c3b38f; }
.ls-formula { margin-top: 11px; padding: 8px; border-left: 1px solid rgba(216,184,116,.24); background: rgba(0,0,0,.15); font-family: var(--font-mono); font-size: 8px; line-height: 1.8; color: #7e8b7d; }
.ls-formula em { font-style: normal; color: #c8b176; }
.ls-warning { margin-top: 11px; font-size: 8px; line-height: 1.6; color: #b58377; }
.unit-detail-head { display: flex; gap: 12px; align-items: center; }
.unit-detail-sigil { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--unit-color) 45%, transparent); background: color-mix(in srgb, var(--unit-color) 8%, transparent); color: var(--unit-color); font-family: var(--font-display); font-size: 25px; }
.unit-detail-name h3 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: .06em; color: #e2d7bf; }
.unit-detail-name p { margin: 3px 0 0; font-size: 8px; color: #717f75; }
.unit-detail-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(270px, .9fr); gap: 16px; margin-top: 15px; }
.detail-section { border: 1px solid rgba(216,184,116,.12); padding: 12px; }
.detail-section h4 { margin: 0 0 9px; font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: #bdb190; }
.detail-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.detail-stat { padding: 7px 6px; background: rgba(255,255,255,.018); border: 1px solid rgba(216,184,116,.06); }
.detail-stat span { display: block; font-size: 7px; color: #5f6d62; }
.detail-stat b { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: #c9b990; }
.detail-attack { margin-top: 9px; padding: 7px 8px; border-left: 1px solid rgba(216,184,116,.26); background: rgba(216,184,116,.03); font-size: 8px; line-height: 1.6; color: #7e897b; }
.detail-attack b { color: #d4bd87; font-weight: 400; }
.detail-slots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 8px 0; }
.detail-slot { height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid rgba(216,184,116,.1); font-size: 7px; color: #7a8678; }
.detail-slot span { font-family: var(--font-mono); font-size: 5px; color: #4f5b53; }
.detail-slot.filled { border-color: color-mix(in srgb, #d8b56a 28%, transparent); color: #bfae87; }
.detail-slot.treasure.filled { border-color: rgba(197,139,255,.32); color: #c9a3f4; }
.detail-inventory { display: flex; flex-direction: column; gap: 4px; max-height: 144px; overflow-y: auto; }
.inv-bind-row { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border: 1px solid rgba(216,184,116,.09); background: rgba(255,255,255,.01); }
.inv-bind-row .ib-icon { color: var(--q-color); font-family: var(--font-display); font-size: 13px; }
.inv-bind-row .ib-name { flex: 1; min-width: 0; }
.inv-bind-row b { display: block; font-family: var(--font-display); font-size: 9px; font-weight: 500; color: #c9c0aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-bind-row span { display: block; margin-top: 1px; font-size: 6px; color: #66736a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-bind-row .mini-action { flex: 0 0 auto; }
.detail-lore { margin: 10px 0 0; font-size: 8px; line-height: 1.85; color: #6d776e; }
.treasure-iron { margin-top: 8px; padding: 7px 8px; border-left: 1px solid rgba(203,100,83,.35); background: rgba(130,45,38,.06); font-size: 8px; line-height: 1.6; color: #ad7e71; }
.detail-warning { margin-top: 10px; }
.danger-btn { padding: 6px 10px; border: 1px solid rgba(203,100,83,.32); color: #c88476; font-size: 8px; background: rgba(140,50,40,.08); }
.danger-btn:hover { border-color: #d58772; color: #f1b1a2; }

/* 帮助 */
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.help-block { padding: 12px 13px; border: 1px solid rgba(216,184,116,.11); background: rgba(255,255,255,.012); }
.help-block h4 { margin: 0 0 8px; font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: .08em; color: #d2c3a4; }
.help-block p, .help-block li { font-size: 10px; line-height: 1.85; color: #747f73; }
.help-block p { margin: 0 0 7px; }
.help-block ul { margin: 0; padding-left: 14px; }
.help-block li + li { margin-top: 3px; }
.help-block b { color: #b5a781; font-weight: 500; }
.help-key { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(216,184,116,.06); font-size: 9px; color: #6f7b70; }
.help-key span:first-child { color: #a09a87; }
.help-law { border-left: 2px solid #a86858; }

/* 结算 */
.end-modal { width: min(680px, 100%); text-align: center; padding: 33px 40px 27px; }
.end-kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .3em; color: #8d7953; }
.end-title { margin: 9px 0 8px; font-family: var(--font-display); font-size: 42px; font-weight: 500; letter-spacing: .16em; color: #e9dcc0; text-shadow: 0 10px 50px rgba(232, 200, 128, .12); }
.end-modal.lost .end-title { color: #d8a099; text-shadow: 0 10px 50px rgba(185, 80, 66, .18); }
.end-sub { margin: 0 auto 20px; max-width: 410px; font-size: 10px; line-height: 1.9; color: #7e8478; }
.end-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(216,184,116,.13); border-bottom: 1px solid rgba(216,184,116,.13); margin: 0 0 17px; }
.end-stat { padding: 12px 7px; border-right: 1px solid rgba(216,184,116,.08); }
.end-stat:last-child { border-right: 0; }
.end-stat span { display: block; font-size: 8px; color: #606d63; letter-spacing: .08em; }
.end-stat b { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 18px; font-weight: 400; color: #d8c8a1; }
.end-unlock { margin: 0 0 15px; padding: 10px; border: 1px solid rgba(95, 193, 149, .25); background: rgba(79, 168, 128, .07); color: #91b8a1; font-size: 9px; line-height: 1.65; }
.end-unlock b { color: #c4e1cd; }
.end-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.end-actions .primary-btn, .end-actions .secondary-btn, .end-actions .ghost-btn { width: auto; min-width: 150px; padding: 0 17px; }
.end-actions .primary-btn { justify-content: center; }
.end-actions .primary-btn em { display: none; }

/* 宝物绑定 / 通用 */
.bind-modal .modal-body { display: flex; flex-direction: column; gap: 13px; }
.bind-item { display: flex; gap: 12px; align-items: center; padding: 13px; border: 1px solid color-mix(in srgb, var(--q-color) 35%, transparent); background: color-mix(in srgb, var(--q-color) 5%, transparent); }
.bind-item .bind-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--q-color) 45%, transparent); color: var(--q-color); font-family: var(--font-display); font-size: 23px; }
.bind-item h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 500; color: #dfd4bd; }
.bind-item p { margin: 5px 0 0; font-size: 9px; color: #838b7d; line-height: 1.6; }
.bind-q { font-family: var(--font-mono); font-size: 8px; color: var(--q-color); letter-spacing: .08em; }
.bind-choices { display: flex; flex-direction: column; gap: 4px; max-height: 270px; overflow-y: auto; }
.bind-unit {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  border: 1px solid rgba(216,184,116,.1);
  background: rgba(255,255,255,.012);
  text-align: left;
  transition: 140ms;
}
.bind-unit:hover { border-color: rgba(216,184,116,.35); background: rgba(216,184,116,.045); }
.bind-unit .bu-sigil { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--unit-color) 34%, transparent); color: var(--unit-color); font-family: var(--font-display); font-size: 12px; }
.bind-unit .bu-main { flex: 1; min-width: 0; }
.bind-unit b { display: block; font-family: var(--font-display); font-size: 10px; font-weight: 500; color: #cec4ad; }
.bind-unit span { display: block; margin-top: 1px; font-size: 7px; color: #657268; }
.bind-unit em { font-style: normal; font-family: var(--font-mono); font-size: 7px; color: #c9a376; }
.bind-warning { padding: 8px 10px; border-left: 2px solid #a75f50; background: rgba(139, 49, 40, .06); color: #a77d72; font-size: 8px; line-height: 1.7; }
.bind-empty { padding: 24px; text-align: center; color: #606b62; font-size: 9px; }

/* 暂停 */
.pause-layer {
  position: absolute; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 6, .82);
  backdrop-filter: blur(8px);
}
.pause-panel { width: min(520px, calc(100% - 32px)); padding: 29px 30px 23px; border: 1px solid rgba(216,184,116,.25); background: linear-gradient(150deg, rgba(20,33,30,.99), rgba(6,12,13,.99)); box-shadow: var(--shadow-deep); text-align: center; }
.pause-panel .kicker { margin: 0 0 7px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .3em; color: #85734e; }
.pause-panel h2 { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: .12em; color: #e5d8bc; }
.pause-copy { margin: 10px auto 17px; max-width: 380px; font-size: 9px; line-height: 1.9; color: #788278; }
.pause-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 18px; border-top: 1px solid rgba(216,184,116,.12); border-bottom: 1px solid rgba(216,184,116,.12); }
.pause-stats div { padding: 9px; border-right: 1px solid rgba(216,184,116,.07); }
.pause-stats div:last-child { border-right: 0; }
.pause-stats span { display: block; font-size: 7px; color: #5f6b62; }
.pause-stats b { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: #c7b58f; }
.pause-actions { display: flex; flex-direction: column; gap: 6px; }
.pause-actions .primary-btn, .pause-actions .secondary-btn { justify-content: center; min-height: 38px; font-size: 12px; }
.pause-actions .primary-btn em, .pause-actions .secondary-btn em { display: none; }
.pause-actions .ghost-btn { padding: 8px; }
.pause-tip { margin: 14px 0 0; font-size: 8px; color: #5b665e; }

/* Tooltip */
.tooltip {
  position: fixed; z-index: 200; pointer-events: none;
  max-width: 260px;
  padding: 7px 9px;
  border: 1px solid rgba(216,184,116,.24);
  background: rgba(6, 12, 12, .96);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  font-size: 9px; line-height: 1.55; color: #b9b09b;
}
.tooltip b { color: #e0d4b9; }
.tooltip .tip-q { color: var(--q-color, #d8b56a); }

/* 自适应 */
@media (max-width: 1360px) {
  :root { --side-w: 286px; --cmd-h: 86px; }
  .menu-screen { padding-left: 34px; padding-right: 34px; }
  .title-cn { font-size: clamp(76px, 9vw, 124px); }
  .unit-card { padding-left: 8px; padding-right: 8px; }
  .uc-title h3 { font-size: 13px; }
  .dock-meta .dual-legend { display: none; }
  .topbar { grid-template-columns: minmax(340px, 1fr) auto minmax(255px, 1fr); gap: 10px; }
  .wave-block { min-width: 260px; }
}
@media (max-width: 1150px) {
  :root { --side-w: 258px; --cmd-h: 82px; --dock-h: 222px; }
  .menu-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr); gap: 30px; }
  .title-cn { font-size: clamp(70px, 9vw, 106px); }
  .hero-lede { font-size: 12px; }
  .menu-meta { gap: 14px; }
  .meta-cell:nth-child(3) { display: none; }
  .topbar-left { gap: 13px; }
  .game-brand { display: none; }
  .objective-block { padding-left: 0; border-left: 0; }
  .topbar { grid-template-columns: minmax(260px, 1fr) auto minmax(210px, 1fr); padding: 0 12px; }
  .wave-block { min-width: 220px; }
  .resource-cell { min-width: 54px; padding-right: 8px; }
  .topbar-right { gap: 8px; }
  .dock-top { gap: 10px; }
  .energy-block { flex-basis: 230px; }
  .race-tab { padding-right: 6px; font-size: 8px; }
  .unit-cards { gap: 6px; }
  .weapon-chip { padding: 2px 4px; font-size: 6px; }
  .uc-stats > span { font-size: 5px; }
  .uc-stats b { font-size: 8px; }
  .uc-desc { display: none; }
  .choice-grid { gap: 7px; }
  .choice-card { min-height: 175px; padding: 12px 11px; }
  .help-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  :root { --side-w: 240px; --cmd-h: 80px; --dock-h: 215px; }
  .menu-screen { padding: 20px 22px 16px; }
  .menu-layout { grid-template-columns: 1fr; gap: 22px; align-content: center; }
  .hero-panel { padding-left: 0; }
  .hero-title { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 2px; }
  .title-en { width: 100%; margin-bottom: 2px; }
  .title-cn { font-size: clamp(62px, 12vw, 88px); }
  .title-cn.accent { margin-left: 12px; }
  .hero-lede { max-width: 680px; margin: 16px 0; }
  .feature-stats { max-width: 680px; }
  .hero-tip { display: none; }
  .mode-stack { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .mode-card { padding: 18px; }
  .mode-title-row h2 { font-size: 23px; }
  .mode-desc { font-size: 10px; }
  .tier-grid { display: none; }
  .campaign-nest-preview { margin-top: 10px; }
  .endless-stats { grid-template-columns: 1fr; margin-top: 10px; }
  .endless-stats div { border-right: 0; border-bottom: 1px solid rgba(116,173,186,.08); padding: 5px 3px; }
  .endless-stats div:last-child { border-bottom: 0; }
  .menu-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .controls-line { gap: 10px; }
  .footer-mark { display: none; }
  .unit-card .uc-desc { display: none; }
  .dock-meta #army-cap { display: none; }
  .energy-block { flex-basis: 190px; }
  .race-tab small { display: none; }
  .race-tab { padding: 0 6px; }
  .race-tab .rt-icon { font-size: 11px; }
  .commander-card { padding: 10px; }
  .commander-stats i { display: none; }
  .weight-formula { display: none; }
  .slot-dots { margin-top: 7px; }
  .slot-dot { height: 20px; }
  .side-tab { padding: 9px 2px 8px; font-size: 9px; }
  .loadout-layout, .unit-detail-grid { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-card { min-height: auto; }
  .choice-icon { margin: 8px 0; width: 32px; height: 32px; }
  .choice-card p { margin-bottom: 5px; }
  .modal { max-height: calc(100vh - 28px); padding: 18px; }
}
@media (max-width: 760px) {
  :root { --topbar-h: 56px; --cmd-h: 76px; --dock-h: 205px; --side-w: 0px; }
  .menu-screen { padding: 15px; overflow-y: auto; }
  .menu-top { align-items: flex-start; }
  .menu-meta .meta-cell { display: none; }
  .mode-stack { grid-template-columns: 1fr; }
  .menu-footer { margin-top: 18px; }
  .controls-line { display: none; }
  .game-screen { grid-template-rows: var(--topbar-h) minmax(0,1fr) var(--cmd-h) var(--dock-h); }
  .sidebar { display: none; }
  .topbar { grid-template-columns: 1fr auto; }
  .wave-block { min-width: 150px; }
  .topbar-left .objective-block { display: none; }
  .game-main { grid-template-columns: 1fr; }
  .minimap-wrap { width: 190px; }
  .minimap-legend { display: none; }
  .battle-legend { display: none; }
  .unit-cards { grid-template-columns: repeat(2, 1fr); }
  .dock-top { flex-wrap: wrap; height: auto; }
  .dual-legend { display: none; }
  .race-tabs { order: 3; width: 100%; }
  .race-tab { flex: 1; justify-content: center; }
  .production-dock { grid-template-rows: auto minmax(0,1fr); overflow-y: auto; }
  .energy-block { flex: 1; }
  .uc-desc, .uc-stats { display: none; }
  .unit-card { padding: 6px; }
  .onboarding-hint { max-width: calc(100% - 190px); }
  .toast-stack { width: 220px; }
  .interact-prompt { bottom: 12px; }
  .end-stats { grid-template-columns: repeat(2, 1fr); }
  .end-stat:nth-child(2) { border-right: 0; }
  .end-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(216,184,116,.08); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   声音设置浮层
   ========================================================= */
.audio-panel {
  position: absolute;
  top: 74px;
  right: calc(var(--side-w) + 14px);
  z-index: 140;
  width: 292px;
  padding: 15px 16px 13px;
  border: 1px solid rgba(216, 184, 116, 0.3);
  background:
    linear-gradient(155deg, rgba(20, 34, 31, 0.99), rgba(6, 13, 14, 0.99) 72%),
    radial-gradient(ellipse at 50% 0, rgba(216, 184, 116, 0.07), transparent 60%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 36px rgba(90, 211, 164, 0.03);
  animation: audioPanelIn 180ms cubic-bezier(.16, .84, .32, 1) both;
}
.audio-panel::before, .audio-panel::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
}
.audio-panel::before { top: 5px; left: 5px; border-top: 1px solid rgba(216, 184, 116, 0.48); border-left: 1px solid rgba(216, 184, 116, 0.48); }
.audio-panel::after { bottom: 5px; right: 5px; border-bottom: 1px solid rgba(216, 184, 116, 0.48); border-right: 1px solid rgba(216, 184, 116, 0.48); }
@keyframes audioPanelIn { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: none; } }
.audio-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid rgba(216,184,116,0.12); }
.audio-head span { display: block; font-family: var(--font-display); font-size: 14px; letter-spacing: .1em; color: #ded2b9; }
.audio-head small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 6px; letter-spacing: .2em; color: #8d7954; }
.audio-close { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(216,184,116,0.16); color: #817e70; font-size: 13px; transition: 140ms; }
.audio-close:hover { color: var(--gold-2); border-color: rgba(216,184,116,0.45); }
.audio-mute-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 8px; }
.audio-mute-row b { display: block; font-size: 10px; font-weight: 500; color: #c3b99f; letter-spacing: .04em; }
.audio-mute-row small { display: block; margin-top: 3px; font-size: 7px; color: #67736a; }
.audio-switch {
  flex: 0 0 auto; min-width: 48px; padding: 4px 8px;
  border: 1px solid rgba(216,184,116,0.32);
  color: #c9b987; font-size: 8px; letter-spacing: .06em;
  background: rgba(216,184,116,0.05);
  transition: 150ms;
}
.audio-switch:hover { border-color: rgba(216,184,116,0.6); color: var(--gold-2); }
.audio-switch.on { color: #a6e3c1; border-color: rgba(99, 198, 151, 0.38); background: rgba(80, 166, 126, 0.08); }
.audio-switch.muted { color: #c98b7f; border-color: rgba(201, 112, 96, 0.34); background: rgba(155, 70, 57, 0.08); }
.audio-slider {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 8px;
  color: #8c978b;
}
.audio-slider b { font-family: var(--font-mono); font-size: 8px; font-weight: 400; color: #c6b184; text-align: right; }
.audio-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  margin: 0;
  cursor: pointer;
  background: linear-gradient(90deg, rgba(94, 183, 145, 0.7), rgba(216, 184, 116, 0.55));
  outline: none;
}
.audio-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px; height: 11px;
  border: 1px solid rgba(240, 213, 151, 0.8);
  border-radius: 50%;
  background: #d8c185;
  box-shadow: 0 0 12px rgba(216, 193, 133, 0.36);
  cursor: grab;
}
.audio-slider input[type="range"]::-moz-range-thumb {
  width: 10px; height: 10px; border: 1px solid rgba(240, 213, 151, 0.8); border-radius: 50%;
  background: #d8c185; cursor: grab;
}
.audio-slider input[type="range"]::-moz-range-track { height: 3px; background: rgba(216,184,116,0.3); }
.audio-panel.muted .audio-slider input[type="range"] { opacity: .38; }
.audio-eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 24px; margin: 5px 0 8px; padding: 0 32px; }
.audio-eq i {
  display: block; width: 3px; height: 6px; border-radius: 2px;
  background: linear-gradient(180deg, #e6c982, #65c39b);
  opacity: .7;
  animation: audioEq 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.15s);
}
.audio-eq i:nth-child(2) { animation-delay: -.35s; }
.audio-eq i:nth-child(3) { animation-delay: -.7s; }
.audio-eq i:nth-child(4) { animation-delay: -.2s; }
.audio-eq i:nth-child(5) { animation-delay: -.55s; }
.audio-eq i:nth-child(6) { animation-delay: -.9s; }
.audio-eq i:nth-child(7) { animation-delay: -.4s; }
.audio-panel.muted .audio-eq i { animation-play-state: paused; opacity: .2; }
@keyframes audioEq { 0%, 100% { transform: scaleY(.55); opacity: .45; } 50% { transform: scaleY(1.9); opacity: .95; } }
.audio-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid rgba(216,184,116,0.08); }
.audio-foot span { font-size: 7px; color: #59665e; text-align: right; }
@media (max-width: 760px) {
  .audio-panel { top: 62px; right: 8px; width: min(280px, calc(100% - 16px)); }
}

/* =========================================================
   统御者指挥栏响应式
   ========================================================= */
@media (max-width: 1150px) {
  .cd-identity { display: none; }
  .cd-vitals { flex-basis: 266px; }
  .cd-stats { flex-basis: 154px; }
  .commander-dock { gap: 12px; }
}
@media (max-width: 980px) {
  .cd-stats { display: none; }
  .cd-vitals { flex: 1 1 260px; }
  .cd-equipment { flex: 1.45 1 380px; }
  .cd-equipment-head > span { display: none; }
}
@media (max-width: 760px) {
  .commander-dock { gap: 7px; padding: 5px 8px; }
  .cd-portrait { width: 42px; height: 42px; font-size: 17px; }
  .cd-level-badge { width: 16px; height: 16px; font-size: 6px; right: -3px; bottom: -3px; }
  .cd-vitals { flex: 1 1 180px; gap: 3px; }
  .cd-vital-top { margin-bottom: 2px; }
  .cd-vital-top em { display: none; }
  .cd-xp-row span { display: none; }
  .cd-equipment { flex: 1.25 1 240px; }
  .cd-btn { padding: 2px 5px; font-size: 6px; }
  .cd-btn kbd { display: none; }
  .commander-dock .slot-dot { height: 28px; font-size: 12px; }
  .recruit-label { display: none; }
}

/* =========================================================
   背包 / 装备
   ========================================================= */
.backpack-layout {
  display: grid;
  grid-template-columns: minmax(280px, .88fr) minmax(0, 1.25fr);
  gap: 14px;
}
.bp-column {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(216, 184, 116, 0.13);
  background: rgba(255, 255, 255, 0.015);
}
.bp-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 0 9px;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: .08em; color: #d9c9aa;
}
.bp-title small { font-family: var(--font-mono); font-size: 7px; font-weight: 400; color: #5f6c62; letter-spacing: .04em; }
.bp-slot-list { display: flex; flex-direction: column; gap: 4px; }
.bp-slot {
  display: flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 5px 7px;
  border: 1px solid rgba(216, 184, 116, 0.1);
  background: rgba(255, 255, 255, 0.012);
}
.bp-slot.missing { border-style: dashed; }
.bp-slot.treasure { border-color: rgba(196, 149, 255, 0.22); }
.bp-slot-icon {
  width: 29px; height: 29px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--q-color, #d8b56a) 42%, transparent);
  color: var(--q-color, #d8b56a);
  font-family: var(--font-display); font-size: 14px;
  background: color-mix(in srgb, var(--q-color, #d8b56a) 7%, transparent);
}
.bp-slot-main { flex: 1; min-width: 0; }
.bp-slot-main b { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 500; color: #d4c7ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-slot-main span { display: block; margin-top: 2px; font-size: 7px; color: #66736a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-slot-main span em { font-style: normal; color: var(--q-color, #7b897d); }
.bp-tabs { display: flex; gap: 4px; margin-bottom: 9px; }
.bp-tab {
  flex: 1; padding: 6px 4px;
  border: 1px solid rgba(216, 184, 116, 0.12);
  color: #7f877b; font-size: 8px; letter-spacing: .08em;
  transition: 140ms ease;
}
.bp-tab:hover { border-color: rgba(216, 184, 116, 0.32); color: #c8baa0; }
.bp-tab.active { border-color: rgba(216, 184, 116, 0.46); color: #ebd7b0; background: rgba(216, 184, 116, 0.07); }
.bp-tab b { margin-left: 4px; font-family: var(--font-mono); font-weight: 400; color: #d8b56a; }
.bp-grid { display: flex; flex-direction: column; gap: 5px; max-height: 392px; overflow-y: auto; padding-right: 2px; }
.bp-card {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  border: 1px solid rgba(216, 184, 116, 0.1);
  border-left: 2px solid color-mix(in srgb, var(--q-color, #d8b56a) 65%, transparent);
  background: linear-gradient(90deg, rgba(255,255,255,.02), transparent 60%);
}
.bp-card:hover { background: rgba(255, 255, 255, 0.035); }
.bp-card-icon {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--q-color, #d8b56a) 38%, transparent);
  color: var(--q-color, #d8b56a);
  font-family: var(--font-display); font-size: 16px;
  background: color-mix(in srgb, var(--q-color, #d8b56a) 6%, transparent);
}
.bp-card-main { flex: 1; min-width: 0; }
.bp-card-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.bp-card-top b { font-family: var(--font-display); font-size: 12px; font-weight: 500; color: #ded0b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-card-top em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 6px; color: #69756b; white-space: nowrap; }
.bp-card-main p { margin: 3px 0 0; font-size: 8px; line-height: 1.45; color: #707d72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-card-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-family: var(--font-mono); font-size: 6px; color: #647267; }
.bp-card-meta .bp-q { color: var(--q-color, #858d80); }
.bp-action {
  flex: 0 0 auto; padding: 4px 7px;
  border: 1px solid rgba(216, 184, 116, 0.2);
  color: #a99b7e; font-size: 7px; white-space: nowrap;
  transition: 140ms ease;
}
.bp-action:hover { border-color: rgba(216, 184, 116, 0.52); color: var(--gold-2); background: rgba(216, 184, 116, 0.07); }
.bp-action.primary { border-color: rgba(105, 184, 255, 0.3); color: #9ac9ee; }
.bp-action.primary:hover { border-color: rgba(105, 184, 255, 0.65); color: #c9e7ff; background: rgba(105, 184, 255, 0.08); }
.bp-empty {
  padding: 25px 10px; text-align: center;
  border: 1px dashed rgba(216, 184, 116, 0.12);
  color: #5d6a61; font-size: 8px; line-height: 1.7;
}
.bp-empty b { display: block; margin-bottom: 3px; font-family: var(--font-display); font-size: 12px; font-weight: 500; color: #948b76; }
.bp-note { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(216,184,116,.08); color: #58665c; font-size: 7px; line-height: 1.6; }
.bp-note b { color: #a99772; font-weight: 400; }
.bp-footer-hint { margin-right: auto; color: #5e6a60; font-size: 8px; }

@media (max-width: 980px) {
  .backpack-layout { grid-template-columns: 1fr; }
  .bp-grid { max-height: 260px; }
}

@media (max-width: 760px) {
  :root { --dock-h: 248px; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0 8px; }
  .topbar-left { display: none; }
  .wave-block { min-width: 0; text-align: left; }
  .wave-main { justify-content: flex-start; gap: 6px; }
  .wave-main b { font-size: 17px; }
  .topbar-right { gap: 6px; }
  .resource-cell { min-width: 40px; padding-right: 6px; }
  .resource-cell span { font-size: 6px; }
  .resource-cell b { font-size: 13px; }
  .icon-btn { width: 25px; height: 25px; font-size: 10px; }
}