/* ============================================================
 * 星球防线 · 局外功能页框架（船长 / 炮塔 / 商城 / 星球）
 * 设计语言沿用主工程：深空蓝底 + 霓虹青/橙/金描边 + 圆角胶囊
 * 单位全部走 --u（1u = 舞台宽 / 720），与主工程一致，便于后续并入 index.html
 * ============================================================ */

/* ---------- 预览外壳（仅预览页使用，集成进 index.html 后可删） ---------- */
.preview-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 12px;
  background: #03040a;
}
.preview-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.preview-bar button {
  font: 700 14px/1 "PingFang SC","Microsoft YaHei",sans-serif;
  color: #cfe6ff; background: rgba(20,32,66,.9);
  border: 1px solid rgba(90,160,255,.3); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; transition: .15s;
}
.preview-bar button.on { color: #06121f; background: var(--cyan); border-color: var(--cyan); }
.preview-stage {
  position: relative;
  width: min(calc(100vw - 24px), calc((100vh - 110px) * 9 / 16));
  height: min(calc(100vh - 110px), calc((100vw - 24px) * 16 / 9));
  overflow: hidden; border-radius: 14px;
  background: #05060f;
  box-shadow: 0 0 80px rgba(40,110,255,.18), 0 0 0 1px rgba(90,160,255,.12);
  user-select: none;
}

/* ---------- 通用屏容器（替代主工程的 .screen，结构一致） ---------- */
.meta-screen {
  position: absolute; inset: 0; z-index: 25;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
  color: var(--ink);
  background: radial-gradient(1200px 820px at 50% -12%, #12274f 0%, #070c1e 58%, #05060f 100%);
}
.meta-screen.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .28s ease; }
.meta-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--u) * 96) calc(var(--u) * 18) calc(var(--u) * 168);
}
/* 船长页内容较高，单独加大底部留白以避开导航按钮 */
#scrCaptain .meta-scroll { padding-bottom: calc(var(--u) * 210); }

/* ---------- 顶部货币条（三胶囊，与主工程 home-top 同源） ---------- */
.meta-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6;
  display: flex; align-items: center; gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 8);
}
.meta-top .cur {
  display: flex; align-items: center; gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 6) calc(var(--u) * 11);
  background: rgba(8,14,32,.82); border: 1px solid rgba(90,160,255,.22);
  border-radius: 999px; font-size: calc(var(--u) * 16); font-weight: 700;
  box-shadow: inset 0 0 calc(var(--u) * 10) rgba(80,190,255,.06);
}
.meta-top .cur svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); flex: none; }
.meta-top .cur b { font-variant-numeric: tabular-nums; color: #fff; }
.meta-top .cur.sta em { font-style: normal; color: var(--orange); font-weight: 600; margin-right: 2px; }
.meta-top .cur.sta span { color: var(--ink-dim); font-weight: 600; }

/* ---------- 底部导航：5 张按钮图（船长/军团/炮塔/商城/星球） ---------- */
.meta-nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: space-around;
  padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 8);
  background: linear-gradient(180deg, rgba(5,8,18,0) 0%, rgba(4,7,16,.88) 55%, rgba(3,5,12,.98) 100%);
  pointer-events: auto;
}
.meta-nav .nb {
  position: relative;
  flex: 1; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 calc(var(--u) * 3); cursor: pointer;
  transition: transform .15s ease;
}
.meta-nav .nb img {
  display: block; width: 100%; max-width: calc(var(--u) * 116); height: auto;
  filter: brightness(.74) saturate(.88);
  transition: filter .15s ease, transform .15s ease;
  pointer-events: none;
}
.meta-nav .nb.on img {
  filter: none;
  transform: translateY(calc(var(--u) * -6));
}
.meta-nav .nb.on::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * 1);
  transform: translateX(-50%);
  width: calc(var(--u) * 42); height: calc(var(--u) * 5); border-radius: 999px;
  background: var(--cyan); box-shadow: 0 0 calc(var(--u) * 10) var(--cyan);
}
/* 当前打开的页面：其导航钮显示为「返回」图（X返回），点它回首页；不再显示原页图标，也不画选中下划线 */
.meta-nav .nb .bk { display: none; width: 100%; max-width: calc(var(--u) * 116); height: auto; pointer-events: none; }
.meta-nav .nb.on img:not(.bk) { display: none; }
.meta-nav .nb.on .bk { display: block; filter: none; transform: none; }
.meta-nav .nb.on::after { display: none; }

/* 局外页返回主页按钮（每页 .meta-top 内的左箭头） */
.meta-back {
  flex: none;
  width: calc(var(--u) * 38); height: calc(var(--u) * 38); padding: 0;
  border-radius: 50%; border: 1px solid rgba(90,160,255,.45);
  background: rgba(8,14,32,.82); color: #cfe6ff;
  font-size: calc(var(--u) * 22); font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.meta-back:active { transform: scale(.92); filter: brightness(1.2); }

/* 主页(#homeNav) 与 局外页(#metaNav) 共用底部按钮导航：靠 #stage.meta-open 切换显隐 */
#metaNav { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
#stage.meta-open #metaNav { opacity: 1; pointer-events: auto; }
#stage.meta-open #homeNav { opacity: 0; pointer-events: none; transition: opacity .2s ease; }

/* ============================================================
 * 1) 船长（英雄）页
 * ============================================================ */
.cap-main {
  display: grid;
  grid-template-columns: calc(var(--u) * 92) 1fr calc(var(--u) * 196);
  gap: calc(var(--u) * 10);
  align-items: start;
}
/* 左侧竖排装备槽 */
.cap-slots { display: flex; flex-direction: column; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 6); }
.cap-slot {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3);
  font-size: calc(var(--u) * 12); color: var(--ink-dim);
}
.cap-slot i {
  width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: calc(var(--u) * 14);
  background: linear-gradient(160deg, rgba(30,52,98,.9), rgba(12,22,46,.9));
  border: 1px solid rgba(90,160,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u) * 26); font-style: normal;
}
.cap-slot.on i { border-color: rgba(89,217,255,.6); box-shadow: 0 0 calc(var(--u) * 14) rgba(80,190,255,.25); }

/* 中央立绘 + 战力 + 方案 */
.cap-center { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 10); }
.cap-portrait {
  position: relative;
  width: calc(var(--u) * 210); height: calc(var(--u) * 250);
  border-radius: calc(var(--u) * 18);
  background:
    radial-gradient(120px 90px at 50% 26%, rgba(120,190,255,.35), transparent 70%),
    linear-gradient(180deg, #1b3a72 0%, #0e1f44 100%);
  border: 1px solid rgba(90,160,255,.3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 calc(var(--u) * 30) rgba(80,190,255,.12);
}
.cap-portrait .ph { font-size: calc(var(--u) * 96); filter: drop-shadow(0 calc(var(--u)*4) calc(var(--u)*8) rgba(0,0,0,.4)); }
.cap-power {
  display: flex; align-items: center; gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 6) calc(var(--u) * 14);
  background: linear-gradient(180deg, rgba(58,40,10,.92), rgba(40,26,6,.92));
  border: 1px solid rgba(255,209,102,.4); border-radius: 999px;
  font-size: calc(var(--u) * 15); color: var(--gold); font-weight: 800;
}
.cap-power b { font-size: calc(var(--u) * 20); color: #fff; }
.cap-power em { font-style: normal; color: var(--red); }
.cap-plan { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.cap-plan .pg {
  min-width: calc(var(--u) * 38); height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 10); border: 1px solid rgba(90,160,255,.25);
  background: rgba(12,22,46,.85); color: var(--ink); font-size: calc(var(--u) * 12); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cap-plan .pg.on { background: var(--cyan); color: #06121f; border-color: var(--cyan); }
.cap-plan .pg.lock { color: var(--ink-dim); }
.cap-plan .pg.lock::after { content: "🔒"; font-size: calc(var(--u) * 13); margin-left: 2px; }
.cap-ricons { display: flex; gap: calc(var(--u) * 10); }
.cap-ricons .ri {
  position: relative; width: calc(var(--u) * 42); height: calc(var(--u) * 42);
  border-radius: 50%; border: 1px solid rgba(90,160,255,.3);
  background: rgba(12,22,46,.85); display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u) * 20);
}
.cap-ricons .ri .dot { top: calc(var(--u) * -2); right: calc(var(--u) * -2); }

/* 右侧装备卡面板 */
.cap-panel { display: flex; flex-direction: column; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 6); }
.cap-cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); }
.cap-card {
  position: relative; aspect-ratio: 1 / 1.18; border-radius: calc(var(--u) * 12);
  background: linear-gradient(160deg, rgba(120,40,52,.92), rgba(60,18,28,.92));
  border: 1px solid rgba(255,120,140,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 4);
  box-shadow: inset 0 0 calc(var(--u) * 16) rgba(255,90,120,.12);
}
.cap-card .lv {
  position: absolute; top: calc(var(--u) * 5); left: calc(var(--u) * 5);
  font-size: calc(var(--u) * 11); font-weight: 800; color: #fff;
  background: rgba(0,0,0,.32); padding: 1px calc(var(--u) * 6); border-radius: 999px;
}
.cap-card .ico { font-size: calc(var(--u) * 38); }
.cap-card .plus { font-size: calc(var(--u) * 15); font-weight: 800; color: var(--gold); }
.cap-card .stars { font-size: calc(var(--u) * 11); color: var(--gold); letter-spacing: 1px; }
.btn-reinforce {
  width: 100%; padding: calc(var(--u) * 14); border: none; border-radius: calc(var(--u) * 12);
  background: linear-gradient(180deg, #ffb15a, #ff8a3c); color: #5a2a06; font-weight: 800;
  font-size: calc(var(--u) * 16); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(255,140,60,.35);
}

/* 底部：图腾 / 装备 / 材料 面板 */
.cap-bottom {
  margin-top: calc(var(--u) * 14);
  background: linear-gradient(180deg, rgba(54,46,28,.9), rgba(40,34,20,.92));
  border: 1px solid rgba(255,209,102,.22); border-radius: calc(var(--u) * 16);
  padding: calc(var(--u) * 12);
}
.cap-tabs { display: flex; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 10); }
.cap-tabs .ct {
  flex: 1; text-align: center; padding: calc(var(--u) * 8) 0; border-radius: calc(var(--u) * 9);
  font-size: calc(var(--u) * 14); font-weight: 700; color: var(--ink-dim);
  background: rgba(0,0,0,.18); border: 1px solid transparent;
}
.cap-tabs .ct.on { color: #2a1e06; background: var(--gold); }
.cap-totem { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 8); }
.cap-totem .tt {
  position: relative; aspect-ratio: 1; border-radius: calc(var(--u) * 12);
  display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 22);
  border: 1px solid rgba(255,255,255,.12);
}
.cap-totem .tt.r { background: linear-gradient(160deg,#ff7da0,#c23a5e); }
.cap-totem .tt.g { background: linear-gradient(160deg,#ffd06a,#d98b1f); }
.cap-totem .tt.p { background: linear-gradient(160deg,#c79bff,#7a3fd0); }
.cap-totem .tt.b { background: linear-gradient(160deg,#7fd6ff,#2f7fcf); }
.cap-totem .tt.rare::after {
  content: "稀"; position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2);
  font-size: calc(var(--u) * 9); font-weight: 800; color: #fff;
  background: var(--red); padding: 0 calc(var(--u) * 4); border-radius: 999px;
}
.cap-totem .tt.lock { background: rgba(8,14,30,.7); color: var(--ink-dim); border-style: dashed; }
.cap-foot { display: flex; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 12); }
.cap-foot .btn-filter {
  flex: none; width: calc(var(--u) * 56); border-radius: calc(var(--u) * 11);
  border: 1px solid rgba(90,160,255,.3); background: rgba(12,22,46,.85); color: var(--ink);
  font-size: calc(var(--u) * 15); display: flex; align-items: center; justify-content: center;
}
.cap-foot .btn-compose {
  flex: 1; padding: calc(var(--u) * 13); border: none; border-radius: calc(var(--u) * 11);
  background: linear-gradient(180deg,#5fb6ff,#2f7fcf); color: #04111f; font-weight: 800; font-size: calc(var(--u) * 16);
}

/* ============================================================
 * 2) 炮塔页
 * ============================================================ */
.tur-scene {
  position: relative; margin: calc(var(--u) * -96) calc(var(--u) * -18) calc(var(--u) * 6);
  padding: calc(var(--u) * 110) calc(var(--u) * 18) calc(var(--u) * 22);
  background: linear-gradient(180deg, #2a4f86 0%, #1a335f 38%, #0e1f44 100%);
  text-align: center;
}
.tur-heroes { display: flex; justify-content: center; gap: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 8); }
.tur-heroes .th { width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%; background: rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size: calc(var(--u) * 22); }
.tur-pager { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 8); }
.tur-pager .pg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; background: rgba(0,0,0,.3); color: var(--ink-dim); font-weight: 800; font-size: calc(var(--u) * 14); display:flex; align-items:center; justify-content:center; }
.tur-pager .pg.on { background: var(--gold); color: #5a2a06; }
.tur-pager .pg.lock { color: var(--ink-dim); font-size: calc(var(--u) * 12); }
.tur-power-banner {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 8) calc(var(--u) * 20);
  background: linear-gradient(180deg, rgba(58,40,10,.92), rgba(40,26,6,.92));
  border: 1px solid rgba(255,209,102,.45); border-radius: 999px;
  font-size: calc(var(--u) * 16); color: var(--gold); font-weight: 800;
}
.tur-power-banner b { font-size: calc(var(--u) * 22); color: #fff; }
.tur-attr {
  display: flex; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10);
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  background: rgba(8,14,32,.86); border: 1px solid rgba(90,160,255,.22); border-radius: calc(var(--u) * 12);
}
.tur-attr .plan-btn {
  flex: none; display: flex; align-items: center; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 7) calc(var(--u) * 11); border-radius: calc(var(--u) * 9);
  background: rgba(12,22,46,.9); border: 1px solid rgba(90,160,255,.25); color: var(--ink); font-size: calc(var(--u) * 13); font-weight: 700;
}
.tur-attr .lab { font-size: calc(var(--u) * 14); color: var(--ink-dim); }
.tur-attr .val { font-size: calc(var(--u) * 19); font-weight: 800; color: var(--orange); }
.tur-attr .val em { color: #fff; font-style: normal; font-size: calc(var(--u) * 16); }

.tur-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 12); }
.tur-card {
  position: relative; border-radius: calc(var(--u) * 12); aspect-ratio: 3 / 4;
  background: linear-gradient(170deg, rgba(24,40,76,.95), rgba(10,18,38,.96));
  border: 2px solid var(--cyan); padding: calc(var(--u) * 8);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tur-card.q-y { border-color: var(--gold); }
.tur-card.q-r { border-color: var(--red); }
.tur-card.q-p { border-color: var(--purple); }
.tur-card .t-ico { width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%; background: rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; font-size: calc(var(--u) * 24); margin-top: calc(var(--u) * 4); }
.tur-card .t-name { font-size: calc(var(--u) * 13); font-weight: 700; margin-top: calc(var(--u) * 5); }
.tur-card .t-lv { font-size: calc(var(--u) * 11); color: var(--gold); font-weight: 800; }
.tur-card .t-prog { width: 100%; margin-top: calc(var(--u) * 4); height: calc(var(--u) * 7); background: rgba(0,0,0,.35); border-radius: 999px; overflow: hidden; }
.tur-card .t-prog i { display: block; height: 100%; background: linear-gradient(90deg,var(--green),#37c98a); }
.tur-card .t-prog.full i { background: linear-gradient(90deg,#ff7a3c,var(--red)); }
.tur-card .t-fight { position: absolute; top: calc(var(--u) * 5); left: calc(var(--u) * 5); font-size: calc(var(--u) * 9); font-weight: 800; color:#fff; background: var(--red); padding: 1px calc(var(--u) * 5); border-radius: 999px; }
.tur-card .t-up { position: absolute; top: calc(var(--u) * 6); right: calc(var(--u) * 6); font-size: calc(var(--u) * 16); color: var(--green); }
.tur-pet {
  position: absolute; right: calc(var(--u) * 18); bottom: calc(var(--u) * 158); z-index: 8;
  width: calc(var(--u) * 66); height: calc(var(--u) * 66); border-radius: 50%;
  background: linear-gradient(180deg,#ffb15a,#ff8a3c); color:#fff; font-size: calc(var(--u) * 30);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(255,140,60,.4); border: 2px solid rgba(255,220,180,.6);
}

/* ============================================================
 * 3) 商城页（英雄招募 + 图腾寻宝 活动框架）
 * ============================================================ */
.shop-valance {
  height: calc(var(--u) * 26); margin: 0 calc(var(--u) * -18) calc(var(--u) * 10);
  background: repeating-linear-gradient(90deg, #6a2bb0 0 28px, #7d36c4 28px 56px);
  border-bottom: 2px solid rgba(255,255,255,.15);
  clip-path: polygon(0 0,100% 0,100% 60%,96% 100%,92% 60%,88% 100%,84% 60%,80% 100%,76% 60%,72% 100%,68% 60%,64% 100%,60% 60%,56% 100%,52% 60%,48% 100%,44% 60%,40% 100%,36% 60%,32% 100%,28% 60%,24% 100%,20% 60%,16% 100%,12% 60%,8% 100%,4% 60%,0 100%);
}
.shop-king { position: absolute; right: calc(var(--u) * 16); top: calc(var(--u) * 102); z-index: 7; font-size: calc(var(--u) * 64); filter: drop-shadow(0 calc(var(--u)*4) calc(var(--u)*8) rgba(0,0,0,.4)); }
.shop-mod { margin-top: calc(var(--u) * 12); }
.shop-ribbon {
  display: inline-block; padding: calc(var(--u) * 6) calc(var(--u) * 18);
  font-size: calc(var(--u) * 16); font-weight: 800; color: #fff; border-radius: calc(var(--u) * 8);
  background: linear-gradient(180deg,#5fd089,#2f9c5e);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0,0,0,.3);
}
.shop-ribbon.p { background: linear-gradient(180deg,#a76bff,#6a2bb0); }
.shop-card {
  margin-top: calc(var(--u) * 8); border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 12);
  background: rgba(10,18,40,.9); border: 2px solid var(--gold);
}
.shop-card.blue { border-color: #5fb6ff; }
.shop-card.red { border-color: var(--red); }
.shop-hero-scene {
  position: relative; height: calc(var(--u) * 150); border-radius: calc(var(--u) * 12);
  background: linear-gradient(180deg,#33558c,#16294d); display:flex; align-items:center; justify-content:center;
  font-size: calc(var(--u) * 70);
}
.shop-hero-scene .ex { position:absolute; top: calc(var(--u)*8); left: calc(var(--u)*8); display:flex; align-items:center; gap:4px; font-size: calc(var(--u)*12); font-weight:800; color:#fff; background: rgba(0,0,0,.35); padding: 3px calc(var(--u)*8); border-radius:999px; }
.shop-hero-scene .ex b { color: var(--gold); }
.shop-hero-lv { position:absolute; top: calc(var(--u)*8); right: calc(var(--u)*8); display:flex; flex-direction:column; align-items:flex-end; gap: calc(var(--u)*4); }
.shop-hero-lv .lv { font-size: calc(var(--u)*12); font-weight:800; color:#fff; background: rgba(0,0,0,.35); padding: 2px calc(var(--u)*8); border-radius:999px; }
.shop-hero-lv .bar { width: calc(var(--u)*120); height: calc(var(--u)*8); background: rgba(0,0,0,.35); border-radius:999px; overflow:hidden; }
.shop-hero-lv .bar i { display:block; height:100%; background: var(--green); }
.shop-hero-lv .q { width: calc(var(--u)*22); height: calc(var(--u)*22); border-radius:50%; background: rgba(255,255,255,.2); border:none; color:#fff; font-size: calc(var(--u)*12); }
.shop-recruit { display: flex; gap: calc(var(--u)*10); margin-top: calc(var(--u)*10); }
.shop-recruit .rb {
  flex: 1; position: relative; padding: calc(var(--u)*12); border:none; border-radius: calc(var(--u)*12);
  font-weight: 800; font-size: calc(var(--u)*15); color:#5a2a06;
  background: linear-gradient(180deg,#ffd56a,#ff9a3c);
}
.shop-recruit .rb.pink { background: linear-gradient(180deg,#ff9ec4,#ff5d9a); color:#5a0a2e; }
.shop-recruit .rb .sub { display:block; margin-top: calc(var(--u)*4); font-size: calc(var(--u)*11); font-weight:700; opacity:.85; }
.shop-recruit .rb .dot { top: calc(var(--u)*4); right: calc(var(--u)*6); }
.shop-treasure {
  position: relative; height: calc(var(--u)*140); border-radius: calc(var(--u)*12);
  background: linear-gradient(180deg,#1c3a6c,#0e1f44); display:flex; align-items:center; justify-content:center; gap: calc(var(--u)*8);
  margin-top: calc(var(--u)*10);
}
.shop-treasure .chest { font-size: calc(var(--u)*70); filter: drop-shadow(0 calc(var(--u)*4) calc(var(--u)*8) rgba(0,0,0,.4)); }
.shop-treasure .totem { font-size: calc(var(--u)*34); }
.shop-treasure .prob { position:absolute; top: calc(var(--u)*8); right: calc(var(--u)*8); width: calc(var(--u)*24); height: calc(var(--u)*24); border-radius:50%; background: rgba(0,0,0,.35); border:none; color:#fff; font-size: calc(var(--u)*13); }
.shop-treasure .note { position:absolute; left: calc(var(--u)*10); bottom: calc(var(--u)*8); font-size: calc(var(--u)*12); color:#cfe6ff; }
.shop-treasure .note b { color: var(--gold); }
.shop-treasure-btns { display:flex; gap: calc(var(--u)*8); margin-top: calc(var(--u)*10); }
.shop-treasure-btns .tb {
  flex:1; padding: calc(var(--u)*11); border:none; border-radius: calc(var(--u)*11); font-weight:800; font-size: calc(var(--u)*13);
  background: linear-gradient(180deg,#5fb6ff,#2f7fcf); color:#04111f; position:relative;
}
.shop-treasure-btns .tb.free { background: linear-gradient(180deg,#5fd089,#2f9c5e); }
.shop-treasure-btns .tb .sub { display:block; margin-top:2px; font-size: calc(var(--u)*10); font-weight:700; opacity:.9; }
.shop-treasure-btns .tb .dot { top: calc(var(--u)*3); right: calc(var(--u)*4); }

/* ============================================================
 * 4) 星球页（主城 / 功能大厅地图框架）
 * ============================================================ */
.planet-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.planet-scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 240px at 30% 22%, rgba(180,225,255,.5), transparent 70%),
    radial-gradient(360px 220px at 78% 30%, rgba(150,200,255,.4), transparent 70%),
    linear-gradient(180deg, #cfe6ff 0%, #a9cdf0 45%, #7fb0e0 100%);
}
.planet-ent {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4);
  cursor: pointer;
}
.planet-ent .bld {
  width: calc(var(--u) * 86); height: calc(var(--u) * 86); border-radius: calc(var(--u) * 18);
  background: linear-gradient(160deg, rgba(30,60,110,.92), rgba(16,34,66,.95));
  border: 1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center;
  font-size: calc(var(--u) * 38); box-shadow: 0 calc(var(--u)*6) calc(var(--u)*14) rgba(20,40,80,.3);
}
.planet-ent .lab {
  font-size: calc(var(--u) * 12); font-weight: 700; color: #0a1e3c;
  background: rgba(255,255,255,.82); padding: 2px calc(var(--u)*8); border-radius: 999px;
  white-space: nowrap;
}
.planet-ent .dot { position:absolute; top: calc(var(--u)*-3); right: calc(var(--u)*2); }
.planet-ent .cta {
  margin-top: calc(var(--u)*2); padding: calc(var(--u)*5) calc(var(--u)*12); border:none; border-radius:999px;
  background: linear-gradient(180deg,#ffd56a,#ff9a3c); color:#5a2a06; font-weight:800; font-size: calc(var(--u)*11);
}
.planet-ent .count { font-size: calc(var(--u)*11); color:#0a1e3c; font-weight:700; }
.planet-ent .count b { color:#b8650a; }
.planet-ent .cd {
  margin-top: 2px; font-size: calc(var(--u)*10); font-weight:800; color:#fff;
  background: var(--red); padding: 2px calc(var(--u)*7); border-radius:999px;
}
.planet-ent .bubble {
  position:absolute; bottom: calc(var(--u)*100%); left: 50%; transform: translateX(-50%);
  white-space:nowrap; font-size: calc(var(--u)*11); color:#0a1e3c; background:#fff;
  padding: calc(var(--u)*4) calc(var(--u)*8); border-radius: calc(var(--u)*10);
}

/* ============================================================
 * 5) 军团（公会）页
 * ============================================================ */
.leg-head {
  display: flex; align-items: center; gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 16);
  background: linear-gradient(135deg, rgba(40,60,120,.92), rgba(18,30,64,.92));
  border: 1px solid rgba(120,180,255,.35);
  box-shadow: inset 0 0 calc(var(--u) * 22) rgba(80,170,255,.14);
}
.leg-emblem {
  width: calc(var(--u) * 78); height: calc(var(--u) * 78); border-radius: calc(var(--u) * 18);
  background: radial-gradient(120px 120px at 50% 30%, rgba(150,210,255,.4), transparent 70%), #0e1f44;
  border: 1px solid rgba(120,180,255,.5);
  display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 38);
}
.leg-info { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.leg-name { font-size: calc(var(--u) * 19); font-weight: 800; color: #fff; display: flex; align-items: center; gap: calc(var(--u) * 8); }
.leg-lv {
  font-size: calc(var(--u) * 12); font-weight: 800; color: #5a2a06;
  background: var(--gold); padding: 1px calc(var(--u) * 8); border-radius: 999px;
}
.leg-id { font-size: calc(var(--u) * 13); color: var(--ink-dim); }
.leg-id b { color: var(--cyan); }
.leg-manage {
  flex: none; padding: calc(var(--u) * 8) calc(var(--u) * 14); border: 1px solid rgba(120,180,255,.4);
  background: rgba(12,22,46,.85); color: var(--ink); border-radius: calc(var(--u) * 10);
  font-size: calc(var(--u) * 13); font-weight: 700;
}
.leg-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 12);
}
.leg-stats .ls {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 12) 0; border-radius: calc(var(--u) * 12);
  background: rgba(10,18,40,.85); border: 1px solid rgba(90,160,255,.2);
}
.leg-stats .k { font-size: calc(var(--u) * 12); color: var(--ink-dim); }
.leg-stats .ls b { font-size: calc(var(--u) * 18); font-weight: 800; color: #fff; }
.leg-sec {
  margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 15); font-weight: 800; color: #cfe6ff;
  padding-left: calc(var(--u) * 4);
}
.leg-members { display: flex; flex-direction: column; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 10); }
.leg-members .lm {
  display: flex; align-items: center; gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 12);
  background: rgba(10,18,40,.8); border: 1px solid rgba(90,160,255,.18);
}
.leg-members .av {
  width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%;
  background: rgba(12,22,46,.9); border: 1px solid rgba(120,180,255,.3);
  display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 22);
}
.leg-members .nm { flex: 1; font-size: calc(var(--u) * 14); font-weight: 700; color: #fff; }
.leg-members .ctb { font-size: calc(var(--u) * 12); color: var(--gold); font-weight: 700; }
.leg-actions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 16); margin-bottom: calc(var(--u) * 8);
}
.leg-actions .la {
  padding: calc(var(--u) * 13) 0; border: none; border-radius: calc(var(--u) * 12);
  background: linear-gradient(180deg,#5fb6ff,#2f7fcf); color: #04111f; font-weight: 800; font-size: calc(var(--u) * 14);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(47,127,207,.3);
}