/* ============================================================
 * 星球防线 · UI 样式（竖版 9:16 舞台，1u = 舞台宽/720）
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --cyan: #59d9ff;
  --cyan-dim: rgba(89, 217, 255, .35);
  --orange: #ff9a4d;
  --gold: #ffd166;
  --green: #5ef3b0;
  --red: #ff5d7a;
  --purple: #b06bff;
  --ink: #e8f4ff;
  --ink-dim: #93a9c9;
  --panel: rgba(10, 17, 38, .88);
  --line: rgba(90, 160, 255, .22);
  --u: 1px;
  /* 移动端安全区：iPhone 的刘海与底部横条。不做的话城墙、黑洞、
     以及底部操作栏在真机上会被系统 UI 盖住 —— 桌面上永远看不出来。 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #03040a;
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

#app {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  background:
    radial-gradient(1200px 800px at 50% 0%, #0a1230 0%, #03040a 70%);
}

#stage canvas {
  /* 拖拽合成需要吃掉浏览器的滚动/缩放手势 */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}

#stage {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  /* 有 dvh + 安全区时用这一组：舞台整体收缩进安全区，画面略小但不会被遮挡 */
  width: min(calc(100vw - var(--safe-l) - var(--safe-r)),
             calc((100dvh - var(--safe-t) - var(--safe-b)) * 9 / 16));
  height: min(calc(100dvh - var(--safe-t) - var(--safe-b)),
              calc((100vw - var(--safe-l) - var(--safe-r)) * 16 / 9));
  overflow: hidden;
  background: #05060f;
  box-shadow: 0 0 80px rgba(40, 110, 255, .18), 0 0 0 1px rgba(90, 160, 255, .12);
  user-select: none;
}

#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------- HUD ---------------- */
.hud {
  position: absolute; left: 0; top: 0; right: 0;
  padding: calc(var(--u) * 18) calc(var(--u) * 22) 0;
  pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.hud.show { opacity: 1; }
.hud-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); }

.wave-chip {
  display: flex; align-items: baseline; gap: calc(var(--u) * 6);
  flex: none;
  padding: calc(var(--u) * 7) calc(var(--u) * 16);
  background: linear-gradient(180deg, rgba(16, 30, 62, .92), rgba(9, 16, 36, .92));
  border: 1px solid rgba(89, 217, 255, .28);
  border-radius: calc(var(--u) * 100);
  box-shadow: 0 0 calc(var(--u) * 18) rgba(0, 140, 255, .18), inset 0 0 calc(var(--u) * 14) rgba(80, 190, 255, .08);
  font-size: calc(var(--u) * 19);
}
.wave-chip i { font-style: normal; font-size: calc(var(--u) * 13); letter-spacing: calc(var(--u) * 1.6); color: var(--cyan); opacity: .82; }
.wave-chip b { font-size: calc(var(--u) * 25); font-weight: 800; letter-spacing: calc(var(--u) * 1); color: #fff; }
.wave-chip span { font-size: calc(var(--u) * 14); color: var(--ink-dim); }
.wave-chip em {
  font-style: normal; font-size: calc(var(--u) * 11); font-weight: 800; letter-spacing: 1px;
  color: #fff; background: linear-gradient(135deg, #ff5d7a, #ff9a4d);
  padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: calc(var(--u) * 20);
  margin-left: calc(var(--u) * 6); animation: pulse 1.2s infinite;
}

/* flex:none 是关键：否则预告条会把右侧按钮挤出舞台外（375 宽下尤其明显） */
.hud-actions { display: flex; gap: calc(var(--u) * 10); pointer-events: auto; flex: none; }
.icon-btn {
  width: calc(var(--u) * 46); height: calc(var(--u) * 46);
  flex: none;
  border-radius: 50%; border: 1px solid rgba(120, 180, 255, .26);
  background: rgba(12, 22, 46, .82); color: var(--ink);
  font-size: calc(var(--u) * 15); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .18s;
}
.icon-btn:active { transform: scale(.92); background: rgba(30, 60, 120, .9); }
.icon-btn.off { opacity: .38; }

/* 倍速按钮：非 1 倍时高亮，让玩家随时知道自己开了加速 */
.icon-btn.speed {
  font-size: calc(var(--u) * 14); font-weight: 800; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.icon-btn.speed.on {
  border-color: rgba(255, 209, 102, .75);
  color: var(--gold);
  background: rgba(58, 40, 10, .9);
  box-shadow: 0 0 calc(var(--u) * 14) rgba(255, 190, 60, .30);
}

/* ---------------- 下一波预告 ---------------- */
.wave-next {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  margin: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 12);
  background: linear-gradient(180deg, rgba(14, 26, 52, .92), rgba(8, 15, 34, .94));
  border: 1px solid rgba(120, 220, 255, .20);
  pointer-events: auto;
  cursor: pointer;
  outline: none;
  transition: border-color .18s, background .18s;
}
.wave-next:focus-visible,
.wave-next.open {
  border-color: rgba(120, 220, 255, .55);
  background: linear-gradient(180deg, rgba(18, 36, 70, .96), rgba(10, 20, 44, .97));
}
/* 即将开波：整条转金，提示「马上要来了」 */
.wave-next.imminent { border-color: rgba(255, 180, 80, .55); }
.wave-next.imminent .wn-eta { color: #ff9a4d; }
/* BOSS 波预告 */
.wave-next.boss {
  border-color: rgba(255, 93, 122, .55);
  background: linear-gradient(180deg, rgba(58, 14, 30, .94), rgba(24, 8, 20, .95));
}
.wave-next.boss .wn-row i,
.wave-next.boss .wn-num { color: var(--red); }

.wn-row {
  display: flex; align-items: center; gap: calc(var(--u) * 6);
  font-size: calc(var(--u) * 15); line-height: 1.1;
}
.wn-row i {
  font-style: normal; font-size: calc(var(--u) * 10.5);
  letter-spacing: calc(var(--u) * 1.2); color: var(--cyan); opacity: .82; flex: none;
}
.wn-row b { font-size: calc(var(--u) * 17); font-weight: 800; color: #fff; flex: none; }
.wn-brief {
  flex: 1; min-width: 0;
  font-size: calc(var(--u) * 12.5); color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wn-eta {
  font-style: normal; flex: none;
  font-size: calc(var(--u) * 12); font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.wn-caret {
  flex: none; display: block; width: 0; height: 0;
  border-left: calc(var(--u) * 4) solid transparent;
  border-right: calc(var(--u) * 4) solid transparent;
  border-top: calc(var(--u) * 5) solid rgba(147, 169, 201, .75);
  transition: transform .18s;
}
.wave-next.open .wn-caret { transform: rotate(180deg); }

/* 展开敌情详情时，把下方 HUD 淡化 —— 让它读起来像浮层，而不是把血条硬切掉一截 */
.hud:has(.wave-next.open) .hud-bars,
.hud:has(.wave-next.open) .hud-stats {
  opacity: .14;
  transition: opacity .18s;
}

/* 展开的敌情详情 */
.wn-detail {
  display: none;
  position: absolute;
  left: calc(var(--u) * -8); right: calc(var(--u) * -8);
  top: calc(100% + var(--u) * 8);
  z-index: 30;
  padding: calc(var(--u) * 11) calc(var(--u) * 13) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 12);
  background: rgba(6, 12, 28, .975);
  border: 1px solid rgba(120, 220, 255, .32);
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(0, 0, 0, .62);
}
.wave-next.open .wn-detail { display: block; }

/* 只有真正支持悬停的设备才吃 hover —— 否则触屏点一下会永久粘住，面板一直挡着血条 */
@media (hover: hover) and (pointer: fine) {
  .wave-next:hover {
    border-color: rgba(120, 220, 255, .55);
    background: linear-gradient(180deg, rgba(18, 36, 70, .96), rgba(10, 20, 44, .97));
  }
  .wave-next:hover .wn-caret { transform: rotate(180deg); }
  .wave-next:hover .wn-detail { display: block; }
  .hud:has(.wave-next:hover) .hud-bars,
  .hud:has(.wave-next:hover) .hud-stats {
    opacity: .14;
    transition: opacity .18s;
  }
}

.wn-d-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: calc(var(--u) * 11.5); color: var(--ink-dim);
  margin-bottom: calc(var(--u) * 7);
}
.wn-d-head b { color: var(--cyan); font-size: calc(var(--u) * 12); }
.wn-d-row {
  display: flex; align-items: center; gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 5) 0;
  border-top: 1px solid rgba(90, 160, 255, .10);
}
.wn-dot {
  width: calc(var(--u) * 9); height: calc(var(--u) * 9);
  border-radius: 50%; flex: none;
  box-shadow: 0 0 calc(var(--u) * 8) currentColor;
}
.wn-d-name { font-size: calc(var(--u) * 13.5); font-weight: 700; color: var(--ink); flex: none; }
.wn-d-note {
  flex: 1; min-width: 0; text-align: right;
  font-size: calc(var(--u) * 11.5); color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wn-d-count {
  font-size: calc(var(--u) * 13); font-weight: 800; color: var(--gold);
  flex: none; font-variant-numeric: tabular-nums;
}
.wn-d-mod {
  margin-top: calc(var(--u) * 9);
  padding: calc(var(--u) * 8) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 8);
  background: rgba(255, 120, 60, .10);
  border: 1px solid rgba(255, 120, 60, .30);
  font-size: calc(var(--u) * 12); line-height: 1.45; color: #ffd0a8;
}
.wn-d-mod b { color: #ff9a4d; }
.wn-d-none {
  margin-top: calc(var(--u) * 8);
  font-size: calc(var(--u) * 11.5); color: rgba(147, 169, 201, .62);
}
.wn-d-hint {
  margin-top: calc(var(--u) * 8);
  font-size: calc(var(--u) * 11); color: rgba(147, 169, 201, .55);
  text-align: center;
}

/* ---------------- 窄屏紧凑化（375 / 390 这类手机宽度） ---------------- */
@media (max-width: 430px) {
  .wave-chip { padding: calc(var(--u) * 6) calc(var(--u) * 11); gap: calc(var(--u) * 4); }
  .wave-chip i { font-size: calc(var(--u) * 11); letter-spacing: calc(var(--u) * .8); }
  .wave-chip b { font-size: calc(var(--u) * 21); }
  .wave-chip span { display: none; }
  .wave-chip em { padding: calc(var(--u) * 2) calc(var(--u) * 6); }

  .wave-next { padding: calc(var(--u) * 5) calc(var(--u) * 9); }
  .wn-row { gap: calc(var(--u) * 4); }
  .wn-row i { font-size: calc(var(--u) * 9.5); letter-spacing: calc(var(--u) * .6); }
  .wn-row b { font-size: calc(var(--u) * 15); }
  .wn-brief { font-size: calc(var(--u) * 11.5); }
  .wn-eta { font-size: calc(var(--u) * 11); }

  .hud-actions { gap: calc(var(--u) * 7); }
  .icon-btn { width: calc(var(--u) * 42); height: calc(var(--u) * 42); }
  .icon-btn.speed { font-size: calc(var(--u) * 13); }
}

/* ---------------- 炮塔情报（点选城墙上的火箭才展开） ----------------
 * 刻意做成「流式展开」而不是浮层：展开时把城墙耐久条与金币行一起往下推，
 * 而不是盖住它们 —— 顶部的信息全是实时战斗读数，盖掉任何一条都会让人误判。
 * 收起态用 max-height + padding 同时过渡，否则 padding 会留一条空缝。 */
.turret-info {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 calc(var(--u) * 12);
  margin-top: 0;
  border-radius: calc(var(--u) * 12);
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(14, 28, 56, .94), rgba(8, 15, 34, .96));
  transform: translateY(calc(var(--u) * -8));
  transition: max-height .22s ease, opacity .18s, transform .22s ease,
              padding .22s ease, margin-top .22s ease, border-color .22s;
  pointer-events: none;
}
.turret-info.show {
  max-height: calc(var(--u) * 88);
  opacity: 1;
  padding: calc(var(--u) * 7) calc(var(--u) * 12) calc(var(--u) * 8);
  margin-top: calc(var(--u) * 10);
  transform: none;
  border-color: var(--vline, rgba(120, 220, 255, .34));
  background: linear-gradient(180deg, var(--vbg, rgba(18, 36, 72, .96)), rgba(8, 15, 34, .97));
}

.ti-head { display: flex; align-items: center; gap: calc(var(--u) * 7); }
.ti-dot {
  flex: none; width: calc(var(--u) * 10); height: calc(var(--u) * 10);
  border-radius: 50%; background: var(--vcolor, #59d9ff);
  box-shadow: 0 0 calc(var(--u) * 10) var(--vcolor, #59d9ff);
}
.ti-name {
  flex: none; font-size: calc(var(--u) * 14.5); font-weight: 800;
  letter-spacing: calc(var(--u) * .5); color: #fff;
}
.ti-lv {
  flex: none; font-size: calc(var(--u) * 12.5); font-weight: 700;
  color: var(--vcolor, #59d9ff); font-variant-numeric: tabular-nums;
}
/* 等级用菱形点阵：比数字更容易一眼看出还差几级满 */
.ti-pips { display: flex; align-items: center; gap: calc(var(--u) * 4); flex: none; }
.ti-pips i {
  display: block; width: calc(var(--u) * 7); height: calc(var(--u) * 7);
  transform: rotate(45deg);
  background: rgba(120, 160, 210, .18);
  border: 1px solid rgba(120, 170, 230, .35);
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.ti-pips i.on {
  background: var(--vcolor, #59d9ff);
  border-color: var(--vcolor, #59d9ff);
  box-shadow: 0 0 calc(var(--u) * 7) var(--vcolor, #59d9ff);
}
/* 标签区吃掉剩余宽度并裁切：词条多了也不能把回收价挤出去 */
.ti-tags {
  flex: 1 1 0%; min-width: 0;
  display: flex; align-items: center; gap: calc(var(--u) * 5);
  overflow: hidden;
}
/* 颜色由 JS 按弹种 / 词条写入内联样式（内联优先级高于这里的兜底） */
.ti-tag {
  flex: none;
  padding: calc(var(--u) * 2) calc(var(--u) * 7);
  border-radius: calc(var(--u) * 20);
  font-size: calc(var(--u) * 11); line-height: 1.35;
  white-space: nowrap;
  color: #9fd8ff;
  background: rgba(89, 217, 255, .13);
  border: 1px solid rgba(89, 217, 255, .38);
}
.ti-stats { display: flex; gap: calc(var(--u) * 7); margin-top: calc(var(--u) * 6); }
.ti-stat {
  flex: 1 1 0%; min-width: 0;
  display: flex; align-items: baseline; justify-content: center; gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 4) 0;
  border-radius: calc(var(--u) * 7);
  background: rgba(90, 160, 255, .07);
  border: 1px solid rgba(90, 160, 255, .12);
}
.ti-stat i { font-style: normal; font-size: calc(var(--u) * 11); color: var(--ink-dim); flex: none; }
.ti-stat b {
  font-size: calc(var(--u) * 15); font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 射程跟选中时画在地上的射程圈呼应，给它一点颜色 */
.ti-stat-range b { color: var(--vcolor, #59d9ff); }

.hud-bars { margin-top: calc(var(--u) * 12); }
.core-bar {
  position: relative; height: calc(var(--u) * 26);
  background: rgba(6, 11, 26, .82);
  border: 1px solid rgba(255, 110, 140, .26);
  border-radius: calc(var(--u) * 8);
  overflow: hidden;
  box-shadow: inset 0 0 calc(var(--u) * 14) rgba(255, 60, 100, .12);
}
.core-fill {
  position: absolute; inset: calc(var(--u) * 3);
  width: calc(100% - var(--u) * 6);
  border-radius: calc(var(--u) * 6);
  background: linear-gradient(90deg, #ff4d6d, #ff8a4c 55%, #ffd166);
  box-shadow: 0 0 calc(var(--u) * 14) rgba(255, 90, 120, .55);
  transform-origin: left center;
  transition: width .25s ease, background .3s;
}
.core-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u) * 12.5); letter-spacing: calc(var(--u) * .6);
  color: #fff; text-shadow: 0 1px calc(var(--u) * 3) rgba(0, 0, 0, .8); font-weight: 600;
}

.hud-stats { display: flex; align-items: center; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 10); }
.stat {
  display: flex; align-items: center; gap: calc(var(--u) * 6);
  font-size: calc(var(--u) * 17); font-weight: 700;
  padding: calc(var(--u) * 4) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 20);
  background: rgba(8, 15, 34, .72);
  border: 1px solid rgba(90, 160, 255, .16);
}
.stat i { font-style: normal; font-size: calc(var(--u) * 13); opacity: .85; }
.stat.gold { color: var(--gold); }
.stat.gold i { color: var(--gold); }
.stat.lv { color: var(--cyan); flex: 1; }
.stat.kill { color: #ff9fb4; }
.xp {
  flex: 1; height: calc(var(--u) * 5); min-width: calc(var(--u) * 40);
  background: rgba(255, 255, 255, .12); border-radius: 99px; overflow: hidden;
}
.xp span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #2fd0ff, #5ef3b0); border-radius: 99px; transition: width .2s; }

/* ---------------- 波次横幅 ---------------- */
.wave-banner {
  position: absolute; left: 50%; top: calc(var(--u) * 250);
  transform: translate(-50%, -50%) scale(.9);
  display: flex; align-items: center; gap: calc(var(--u) * 12);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.wave-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wb-text {
  font-size: calc(var(--u) * 26); font-weight: 800; letter-spacing: calc(var(--u) * 3);
  color: #fff; text-shadow: 0 0 calc(var(--u) * 18) rgba(89, 217, 255, .9), 0 0 calc(var(--u) * 40) rgba(255, 120, 60, .5);
  white-space: nowrap;
}
.wb-line { width: calc(var(--u) * 46); height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); }
.wb-line:last-child { background: linear-gradient(90deg, var(--cyan), transparent); }

/* ---------------- 底部操作栏 ---------------- */
/*
 * 底部操作栏：左右两颗按钮（召唤 / 购买技能）夹着正中的指挥官（小浣熊）。
 * 浣熊画在游戏画布上、居中于两键之间，所以 dock 背景必须「两侧不透明、正中透明」——
 * 两侧托住按钮文字，正中放掉让画布上的浣熊透出来，否则会被这层渐变盖住。
 * 纵向仍从透明过渡到近不透明，让底栏和上方的战场自然衔接。
 */
.dock {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * 28);
  background:
    linear-gradient(180deg, rgba(3, 6, 16, 0) 0%, rgba(3, 6, 16, .90) 66%, rgba(3, 6, 16, .98) 100%),
    linear-gradient(90deg,
      rgba(3, 6, 16, .96) 0%, rgba(3, 6, 16, .96) 26%,
      rgba(3, 6, 16, 0) 45%, rgba(3, 6, 16, 0) 55%,
      rgba(3, 6, 16, .96) 74%, rgba(3, 6, 16, .96) 100%);
  opacity: 0; transform: translateY(calc(var(--u) * 20));
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.dock.show { opacity: 1; transform: none; pointer-events: auto; }

/*
 * 左右两颗按钮，中间空出来给星球与浣熊站 —— 按钮不能盖住主角。
 * v2.10.0：两颗按钮都往里缩（中间留白 186u → 268u），主角两侧的呼吸区才够。
 * 两侧都是 flex:1，所以无论中间留多宽，两颗按钮永远等宽、并且关于主角对称。
 */
.dock-row { display: flex; gap: calc(var(--u) * 10); align-items: stretch; }
.dock-mid {
  flex: none; width: calc(var(--u) * 268);
  /* 透明占位，只负责把两侧按钮推开 */
}

.dock-btn {
  flex: 1 1 0%; min-width: 0;
  display: flex; align-items: center; gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 10) calc(var(--u) * 11);
  border-radius: calc(var(--u) * 16);
  border: 1px solid rgba(89, 217, 255, .42);
  background: linear-gradient(180deg, rgba(24, 62, 108, .95), rgba(12, 30, 62, .95));
  color: #fff; cursor: pointer; text-align: left;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 18) rgba(0, 120, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: .16s;
  pointer-events: auto;
}
.dock-btn:active { transform: translateY(calc(var(--u) * 2)); filter: brightness(1.15); }
.dock-btn.disabled { opacity: .5; }
.dock-btn.active { border-color: var(--gold); box-shadow: 0 0 calc(var(--u) * 22) rgba(255, 209, 102, .5); }

.db-ico { flex: none; font-size: calc(var(--u) * 21); line-height: 1; color: var(--cyan); }
.db-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.db-body b { font-size: calc(var(--u) * 15.5); font-weight: 700; line-height: 1.15; white-space: nowrap; }
.db-body em {
  font-style: normal; font-size: calc(var(--u) * 10.5); color: var(--ink-dim);
  margin-top: calc(var(--u) * 2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-cost {
  margin-left: auto; flex: none;
  font-size: calc(var(--u) * 16); font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.db-cost::before { content: '◈'; font-size: calc(var(--u) * 12); margin-right: calc(var(--u) * 1); }

/* 右：技能商店。暖色系和左边的冷色召唤键区分开，避免两个都像「建造」 */
.dock-btn.shop {
  border-color: rgba(255, 180, 84, .48);
  background: linear-gradient(180deg, rgba(84, 52, 16, .95), rgba(38, 24, 10, .95));
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 18) rgba(255, 140, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.dock-btn.shop .db-ico { color: var(--orange); }
.dock-btn.shop .db-body em { color: rgba(255, 200, 160, .68); }
/* 剩余上架数量 / 有可买时高亮，让「该去花钱了」这件事在余光里也能看见 */
.db-num {
  flex: none; margin-left: auto;
  min-width: calc(var(--u) * 30); height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 3);
  border-radius: calc(var(--u) * 30);
  display: grid; place-items: center;
  font-size: calc(var(--u) * 14); font-weight: 800;
  color: #3a1c00;
  background: linear-gradient(180deg, #ffd166, #ff9a4d);
  transition: box-shadow .2s, transform .2s;
}
.dock-btn.shop.has-item .db-num {
  box-shadow: 0 0 calc(var(--u) * 16) rgba(255, 180, 60, .65);
  animation: pulse 1.8s infinite;
}

.dock-tip {
  margin-top: calc(var(--u) * 8); text-align: center;
  font-size: calc(var(--u) * 11); color: rgba(147, 169, 201, .8); letter-spacing: calc(var(--u) * .3);
}

/* ---------------- 屏幕 / 遮罩 ---------------- */
.screen {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  /* visibility 兜底：渐隐结束后彻底隐藏，避免半透明残影压在战斗画面上 */
  visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.screen.active {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .28s ease, visibility 0s linear 0s;
}
.screen.overlay { background: rgba(3, 6, 16, .78); backdrop-filter: blur(6px); }

.btn-row { display: flex; gap: calc(var(--u) * 12); }
.btn-row > * { flex: 1; }

.btn-primary {
  width: 100%;
  padding: calc(var(--u) * 17);
  border-radius: calc(var(--u) * 16);
  border: none; cursor: pointer;
  font-size: calc(var(--u) * 19); font-weight: 800; letter-spacing: calc(var(--u) * 4);
  color: #04202e;
  background: linear-gradient(135deg, #7ef0ff, #43b6ff 45%, #2f7bff);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 26) rgba(50, 160, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: .16s;
}
.btn-primary:active { transform: translateY(calc(var(--u) * 2)); filter: brightness(1.08); }
.btn-primary.small { font-size: calc(var(--u) * 15); letter-spacing: calc(var(--u) * 1.5); padding: calc(var(--u) * 13); }
.btn-primary b { font-weight: 800; opacity: .9; }

.btn-ghost {
  padding: calc(var(--u) * 13);
  border-radius: calc(var(--u) * 14);
  border: 1px solid rgba(120, 180, 255, .26);
  background: rgba(12, 22, 46, .8);
  color: var(--ink); font-size: calc(var(--u) * 14); font-weight: 600;
  letter-spacing: calc(var(--u) * 1); cursor: pointer; transition: .16s;
}
.btn-ghost:active { transform: translateY(calc(var(--u) * 2)); background: rgba(28, 50, 96, .85); }
.btn-ghost.small { flex: none; padding: calc(var(--u) * 11) calc(var(--u) * 16); font-size: calc(var(--u) * 12.5); display: flex; align-items: center; gap: calc(var(--u) * 5); }
.btn-ghost.danger { color: #ff97ab; border-color: rgba(255, 90, 120, .35); }
.btn-ghost:disabled { opacity: .4; }


/* ---------------- 强化面板 ---------------- */
.up-panel {
  width: calc(100% - var(--u) * 52);
  max-height: calc(100% - var(--u) * 80);
  display: flex; flex-direction: column; gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 24) calc(var(--u) * 22) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 24);
  background: linear-gradient(160deg, rgba(16, 28, 58, .97), rgba(7, 12, 28, .98));
  border: 1px solid rgba(89, 217, 255, .22);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: popIn .3s ease;
}
.up-kicker { font-size: calc(var(--u) * 10.5); letter-spacing: calc(var(--u) * 3); color: var(--cyan); opacity: .8; }
.up-head h2 { margin: calc(var(--u) * 4) 0 calc(var(--u) * 4); font-size: calc(var(--u) * 26); letter-spacing: calc(var(--u) * 2); }
.up-head p { margin: 0; font-size: calc(var(--u) * 11.5); color: var(--ink-dim); }

.cards { display: flex; flex-direction: column; gap: calc(var(--u) * 10); overflow-y: auto; }
.card {
  --rc: #7f9bc4;             /* 普通：灰蓝，和稀有 / 史诗拉开层次 */
  display: flex; gap: calc(var(--u) * 14); align-items: center;
  padding: calc(var(--u) * 14) calc(var(--u) * 15);
  border-radius: calc(var(--u) * 16);
  background: linear-gradient(120deg, rgba(22, 36, 70, .95), rgba(12, 20, 42, .95));
  border: 1px solid rgba(90, 160, 255, .2);
  cursor: pointer; transition: .16s; position: relative; overflow: hidden;
}
.card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 3);
  background: var(--rc, var(--cyan));
}
.card:active { transform: scale(.985); filter: brightness(1.12); }
.card .c-ico {
  width: calc(var(--u) * 46); height: calc(var(--u) * 46); flex: none;
  border-radius: calc(var(--u) * 12);
  display: grid; place-items: center;
  font-size: calc(var(--u) * 21);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--rc, var(--cyan));
  color: var(--rc, var(--cyan));
  box-shadow: 0 0 calc(var(--u) * 14) var(--rc, var(--cyan));
}
.card .c-ico svg { width: 62%; height: 62%; display: block; }
.card .c-body { flex: 1; min-width: 0; }
.card .c-name { font-size: calc(var(--u) * 16); font-weight: 700; display: flex; align-items: center; gap: calc(var(--u) * 8); }
/* 稀有度标签跟随品级色：普通/稀有/史诗一眼可分，不用读字 */
.card .c-rar {
  font-size: calc(var(--u) * 9); letter-spacing: calc(var(--u) * 1);
  padding: calc(var(--u) * 1) calc(var(--u) * 6); border-radius: 99px;
  border: 1px solid var(--rc, var(--cyan));
  color: var(--rc, var(--cyan));
  opacity: .9;
}
.card .c-desc { font-size: calc(var(--u) * 11.5); color: var(--ink-dim); margin-top: calc(var(--u) * 4); line-height: 1.5; }
.card.rare { --rc: #59d9ff; }
.card.epic { --rc: #ffb454; background: linear-gradient(120deg, rgba(52, 34, 14, .95), rgba(20, 14, 30, .95)); }

/* ---------------- 技能商店（卡片 + 价格） ---------------- */
.cards.shop .card { padding: calc(var(--u) * 12) calc(var(--u) * 13); }
/* 已购次数 / 上限：让「这卡还能买几次」一眼可见，不用玩家自己数 */
.card .c-own {
  font-size: calc(var(--u) * 10); font-weight: 700;
  color: rgba(178, 200, 230, .92);
  letter-spacing: calc(var(--u) * .3);
  white-space: nowrap;
}
.card .c-price {
  flex: none; margin-left: auto;
  display: flex; align-items: center;
  font-size: calc(var(--u) * 16); font-weight: 800;
  color: var(--gold); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card .c-price::before { content: '◈'; font-size: calc(var(--u) * 12); opacity: .8; margin-right: calc(var(--u) * 2); }
/* 买不起：整张压暗并断开点击，避免「点了没反应」 */
.card.cant { opacity: .6; cursor: not-allowed; }
.card.cant .c-price { color: #ff6b81; }
.card.cant:active { transform: none; filter: none; }

.shop-empty {
  padding: calc(var(--u) * 30) calc(var(--u) * 16);
  text-align: center;
  font-size: calc(var(--u) * 12); line-height: 1.8;
  color: rgba(147, 169, 201, .7);
  border-radius: calc(var(--u) * 14);
  border: 1px dashed rgba(120, 170, 230, .25);
}
.card.common { --rc: #7ea6d8; }

.up-foot { display: flex; gap: calc(var(--u) * 10); align-items: center; justify-content: space-between; }

/* ---------------- 通用弹窗 ---------------- */
.modal {
  width: calc(100% - var(--u) * 60);
  max-height: calc(100% - var(--u) * 120);
  padding: calc(var(--u) * 26) calc(var(--u) * 22) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 24);
  background: linear-gradient(160deg, rgba(16, 28, 58, .98), rgba(7, 12, 28, .99));
  border: 1px solid rgba(89, 217, 255, .2);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06);
  display: flex; flex-direction: column; gap: calc(var(--u) * 12);
  animation: popIn .28s ease;
  overflow-y: auto;
}
.modal.wide { width: calc(100% - var(--u) * 40); overflow: hidden; }
.modal h2 { margin: 0; font-size: calc(var(--u) * 24); letter-spacing: calc(var(--u) * 2); text-align: center; }
.modal .muted { margin: 0; text-align: center; font-size: calc(var(--u) * 11.5); color: var(--ink-dim); }

.res-kicker { text-align: center; font-size: calc(var(--u) * 10.5); letter-spacing: calc(var(--u) * 4); color: var(--red); }
.res-kicker.win { color: var(--green); }
.res-score {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 16);
  background: radial-gradient(circle at 50% 0%, rgba(89, 217, 255, .16), rgba(8, 14, 30, .6));
  border: 1px solid rgba(89, 217, 255, .2);
}
.res-score span { font-size: calc(var(--u) * 10); letter-spacing: calc(var(--u) * 3); color: var(--ink-dim); }
.res-score b { font-size: calc(var(--u) * 44); color: #fff; letter-spacing: calc(var(--u) * 2); text-shadow: 0 0 calc(var(--u) * 20) rgba(89, 217, 255, .6); }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); }
.res-grid > div {
  display: flex; flex-direction: column; gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 12);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(120, 170, 255, .12);
}
.res-grid i { font-style: normal; font-size: calc(var(--u) * 10.5); color: var(--ink-dim); }
.res-grid b { font-size: calc(var(--u) * 18); }
.res-submit { text-align: center; font-size: calc(var(--u) * 11); color: var(--ink-dim); min-height: calc(var(--u) * 16); }
.res-submit.ok { color: var(--green); }
.res-submit.fail { color: #ffb454; }
/* 局外收益：一局打完给主页加了什么，就在结算页说清楚，否则玩家不会感觉到养成 */
.res-reward {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 9) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 12);
  background: linear-gradient(90deg, rgba(40, 90, 170, .18), rgba(40, 90, 170, .06));
  border: 1px solid rgba(90, 160, 255, .2);
}
.res-reward:empty { display: none; }
.res-reward i { font-style: normal; font-size: calc(var(--u) * 10.5); color: var(--ink-dim); }
.res-reward b { font-size: calc(var(--u) * 13.5); color: #7ef0ff; font-variant-numeric: tabular-nums; }
.res-reward b:nth-of-type(2) { color: var(--gold); }
.res-reward em {
  font-style: normal; font-size: calc(var(--u) * 11); font-weight: 800;
  color: #40260a; padding: calc(var(--u) * 1) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 20);
  background: linear-gradient(180deg, #ffe9a8, #f0a51f);
}
.res-reward.up { border-color: rgba(255, 209, 102, .45); box-shadow: 0 0 calc(var(--u) * 18) rgba(255, 200, 90, .18); }

.modal-stats { display: flex; justify-content: space-around; padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 12); background: rgba(255, 255, 255, .04); }
.modal-stats > div { text-align: center; }
.modal-stats i { display: block; font-style: normal; font-size: calc(var(--u) * 10); color: var(--ink-dim); }
.modal-stats b { font-size: calc(var(--u) * 17); }

/* ---------------- 排行榜 ---------------- */
.board { display: flex; flex-direction: column; gap: calc(var(--u) * 6); overflow-y: auto; max-height: calc(var(--u) * 520); }
.board-row {
  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(255, 255, 255, .035);
  border: 1px solid rgba(120, 170, 255, .09);
  font-size: calc(var(--u) * 13);
}
.board-row.me { background: rgba(89, 217, 255, .12); border-color: rgba(89, 217, 255, .45); }
.board-row .rk { width: calc(var(--u) * 26); text-align: center; font-weight: 800; color: var(--ink-dim); }
.board-row.top1 .rk { color: #ffd166; }
.board-row.top2 .rk { color: #d7e6ff; }
.board-row.top3 .rk { color: #ffab76; }
.board-row .bd-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .bd-wave { font-size: calc(var(--u) * 10.5); color: var(--ink-dim); }
.board-row .bd-score { font-weight: 800; color: var(--cyan); }
.board-empty { text-align: center; padding: calc(var(--u) * 30); color: var(--ink-dim); font-size: calc(var(--u) * 12); }
.board-global { text-align: center; font-size: calc(var(--u) * 10.5); color: var(--ink-dim); }

/* ---------------- 图鉴 ---------------- */
.codex { display: flex; flex-direction: column; gap: calc(var(--u) * 10); overflow-y: auto; flex: 1; min-height: 0; max-height: calc(var(--u) * 780); padding-right: calc(var(--u) * 2); padding-bottom: calc(var(--u) * 10); }
.codex-sec { padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 14); background: rgba(255, 255, 255, .035); border: 1px solid rgba(120, 170, 255, .1); }
.codex-sec h3 { margin: 0 0 calc(var(--u) * 8); font-size: calc(var(--u) * 14); letter-spacing: calc(var(--u) * 1); color: var(--cyan); }
.codex-row { display: flex; gap: calc(var(--u) * 10); padding: calc(var(--u) * 6) 0; border-top: 1px dashed rgba(120, 170, 255, .12); font-size: calc(var(--u) * 11.5); }
.codex-row:first-of-type { border-top: none; }
.codex-row .cr-lv { flex: none; width: calc(var(--u) * 44); color: var(--gold); font-weight: 700; }
.codex-row .cr-name { flex: none; width: calc(var(--u) * 92); font-weight: 600; }
.codex-row .cr-desc { flex: 1; color: var(--ink-dim); line-height: 1.5; }
.locked { opacity: .5; }

/* ---------------- Toast ---------------- */
.toast-wrap {
  position: absolute; left: 50%; top: calc(var(--u) * 300);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8);
  /* 必须高于 .screen（20）：主页点页签、体力不足都是靠 toast 反馈的，
     压在弹层下面等于没提示 */
  z-index: 45; pointer-events: none; width: 90%;
}
.toast {
  padding: calc(var(--u) * 8) calc(var(--u) * 18);
  border-radius: 99px;
  font-size: calc(var(--u) * 13); font-weight: 600; letter-spacing: calc(var(--u) * .6);
  background: rgba(8, 15, 34, .92);
  border: 1px solid rgba(89, 217, 255, .35);
  color: #dff3ff;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 20) rgba(0, 0, 0, .6);
  animation: toastIn .28s ease, toastOut .3s ease 1.5s forwards;
  white-space: nowrap;
}
.toast.gold { border-color: rgba(255, 209, 102, .55); color: #ffe6a8; }
.toast.danger { border-color: rgba(255, 93, 122, .55); color: #ffc0cb; }
.toast.warn { border-color: rgba(255, 180, 84, .5); color: #ffd9a8; }

.hide { display: none !important; }

@keyframes popIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }

/* 横屏提示 */
#rotate {
  position: fixed; inset: 0; z-index: 99; display: none;
  background: #04060f; color: #cfe3ff;
  align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  font-size: 15px; letter-spacing: 1px; text-align: center; padding: 24px;
}
#rotate b { font-size: 22px; letter-spacing: 3px; }
@media (orientation: landscape) and (max-height: 520px) {
  #rotate { display: flex; }
}

/* 桌面端轻微放大细节 */
@media (min-width: 900px) {
  #stage { border-radius: 18px; }
}

/* ---------------- 战绩长图预览层 ---------------- */
/* 独立在舞台之外：舞台是 9:16 且 overflow:hidden，塞进去会被裁掉 */
.shot-layer {
  position: fixed; inset: 0; z-index: 60;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(2, 4, 12, .95);
  backdrop-filter: blur(8px);
  padding: calc(14px + var(--safe-t)) 18px calc(14px + var(--safe-b));
}
.shot-layer.show { display: flex; }

.shot-wrap {
  display: flex; flex-direction: column;
  gap: 10px;
  width: 100%; max-width: 560px;
  height: 100%;              /* 给 flex:1 一个确定高度，图才能按高度适配 */
  max-height: 100%;
}
.shot-scroll {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
/* 整图适配而不是撑满：9:16 的卡片在小屏上应当一眼看全，
   让人滚动着看自己的战绩卡是件很别扭的事 */
.shot-scroll img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: 14px;
  /* 阴影挂在图上而不是容器上：图片按比例缩放后容器会多出一圈空边 */
  box-shadow: 0 18px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(90, 160, 255, .18);
}
.shot-tip {
  margin: 0; text-align: center;
  font-size: 12.5px; letter-spacing: .5px;
  color: rgba(147, 169, 201, .78);
}
#shotSave {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 16px;
}

/* 结算页的战绩卡入口：三个并排按钮里它最容易被忽略，给一点金色区分 */
#btnShot {
  border-color: rgba(255, 209, 102, .42);
  color: #ffd166;
}

/* ============================================================
 * 首页 v3：玩家信息条 + 指挥官立绘 + 底部五页签
 * ------------------------------------------------------------
 * 参考图结构：顶部一条「头像 / 昵称+经验 / 三种货币」，底部五个页签，
 * 中间是立绘与「开始挑战」。所有尺寸都按 --u 走，保证 720 设计宽度下
 * 在任意手机宽度等比缩放。
 * ============================================================ */
#scrHome { background: #05060f; }

/* ---- 背景：星空 + 火星地平线 ---- */
.home-sky { position: absolute; inset: 0; overflow: hidden; }
.sky-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 72% 12%, rgba(180,220,255,.8), transparent),
    radial-gradient(1.6px 1.6px at 46% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 88% 42%, rgba(200,230,255,.7), transparent),
    radial-gradient(1.4px 1.4px at 32% 52%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 62% 64%, rgba(190,220,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 8% 44%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 78% 74%, rgba(255,255,255,.45), transparent);
  opacity: .85;
}
.sky-glow {
  position: absolute; left: 50%; top: calc(var(--u) * -180);
  width: 150%; height: calc(var(--u) * 900);
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 60% 50% at 50% 32%, rgba(60, 110, 220, .32), transparent 68%),
    radial-gradient(ellipse 40% 40% at 78% 12%, rgba(150, 70, 200, .22), transparent 70%);
  pointer-events: none;
}
/* 火星：只露顶部一段弧，压住底部导航 */
.sky-planet {
  position: absolute; left: 50%; top: calc(var(--u) * 1000);
  width: calc(var(--u) * 1280); height: calc(var(--u) * 1280);
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 2%, #ffc79a 0%, #f4843c 16%, #d15d22 34%, #8d3312 62%, #3d1109 88%);
  box-shadow:
    inset 0 calc(var(--u) * 6) calc(var(--u) * 30) rgba(255, 205, 160, .55),
    0 calc(var(--u) * -10) calc(var(--u) * 90) rgba(255, 120, 50, .35);
  opacity: .92;
}
.sky-haze {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,6,15,.55) 0%, rgba(5,6,15,0) 24%),
    linear-gradient(0deg, rgba(4,7,16,.85) 0%, rgba(4,7,16,.15) 26%, transparent 42%);
  pointer-events: none;
}

/* ---- 顶部玩家条 ---- */
.home-top {
  position: absolute; left: 0; top: 0; width: 100%; z-index: 3;
  display: flex; align-items: center; gap: calc(var(--u) * 13);
  padding: calc(var(--u) * 26) calc(var(--u) * 18) calc(var(--u) * 26);
  background: linear-gradient(180deg,
    rgba(6, 12, 28, .96) 0%, rgba(6, 12, 28, .84) 62%, rgba(6, 12, 28, 0) 100%);
}
.pl-av {
  position: relative; flex: none;
  width: calc(var(--u) * 88); height: calc(var(--u) * 88);
  padding: 0; border: none; cursor: pointer; background: none;
  border-radius: calc(var(--u) * 22);
}
.pl-av canvas {
  display: block; width: 100%; height: 100%;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 30%, #3f74ad, #16294a 72%);
  /* 厚金边 + 外细暗线 + 内细亮线，模拟参考图的金框质感 */
  box-shadow:
    0 0 0 calc(var(--u) * 1.5) #1b120a,
    0 0 0 calc(var(--u) * 3.5) #f3c25a,
    0 0 0 calc(var(--u) * 5) #b9791f,
    0 0 0 calc(var(--u) * 6.5) #fff2c4,
    0 calc(var(--u) * 5) calc(var(--u) * 16) rgba(0, 0, 0, .55);
}
.pl-av:active canvas { filter: brightness(1.12); }
/* 等级角标：深棕圆形徽章 + 金边，骑在头像左下角压在金框上（参考图风格） */
.pl-lv {
  position: absolute; left: calc(var(--u) * -6); bottom: calc(var(--u) * -6);
  min-width: calc(var(--u) * 32); height: calc(var(--u) * 32);
  display: flex; align-items: center; justify-content: center;
  padding: 0 calc(var(--u) * 4);
  border-radius: 50%;
  font-style: normal; font-weight: 800; color: #fff;
  font-size: calc(var(--u) * 15); line-height: 1;
  font-variant-numeric: tabular-nums;
  background: radial-gradient(circle at 38% 30%, #7a532e, #3c2512 78%);
  border: calc(var(--u) * 2) solid #f4d79a;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, .55),
              inset 0 1px 2px rgba(255, 255, 255, .28);
  z-index: 3;
}
.pl-net {
  position: absolute; right: calc(var(--u) * -3); top: calc(var(--u) * -3);
  width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: 50%;
  background: #6c88ad; border: calc(var(--u) * 2.5) solid #0a1224;
  box-sizing: content-box; z-index: 3;
}
.pl-net.online { background: #5ef3b0; box-shadow: 0 0 calc(var(--u) * 9) #5ef3b0; }
.pl-net.offline { background: #ffb454; }

.pl-meta { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.pl-name {
  /* 更活泼的圆体中文栈，比默认黑体更休闲、不正式 */
  font-family: 'YouYuan', 'Yuanti SC', 'Hiragino Sans GB', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: calc(var(--u) * 26); font-weight: 700; letter-spacing: 1px; color: #fff;
  line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* 柔和暖色描边 + 淡金辉光，去掉原先生硬的青色硬描边 */
  text-shadow:
    0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(0, 0, 0, .85),
    0 0 calc(var(--u) * 7) rgba(255, 196, 92, .30);
}
.pl-exp {
  position: relative; height: calc(var(--u) * 20);
  /* 经验条长度限制在约 8 个汉字宽（名字字号 26u × 8 ≈ 208u） */
  max-width: calc(var(--u) * 205);
  border-radius: 999px;
  background: rgba(8, 13, 26, .72);
  border: 1px solid rgba(120, 170, 240, .22);
  box-shadow: inset 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(0, 0, 0, .6),
              0 1px 0 rgba(255, 255, 255, .04);
  overflow: visible;
}
/* 左端 XP 星标，叠在经验条外侧（参考图左端小图标） */
.pl-exp::before {
  content: "\2605";
  position: absolute; left: calc(var(--u) * -7); top: 50%; transform: translateY(-50%);
  width: calc(var(--u) * 28); height: calc(var(--u) * 28);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: calc(var(--u) * 15); color: #3a2512;
  background: radial-gradient(circle at 38% 30%, #ffe9a8, #f0a51f 70%, #c8851a);
  border: calc(var(--u) * 2) solid rgba(8, 13, 26, .92);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, .5);
  z-index: 2;
}
.pl-exp-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f7bff, #59d9ff 62%, #7ef0ff);
  box-shadow: 0 0 calc(var(--u) * 10) rgba(89, 217, 255, .7);
  transition: width .35s cubic-bezier(.3, .9, .4, 1);
}
.pl-exp span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u) * 10.5); font-weight: 700; letter-spacing: .3px;
  color: rgba(255, 255, 255, .95); font-variant-numeric: tabular-nums;
  text-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .85);
}

/* ---- 三种货币 ---- */
.pl-cur { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 7); }
.cur {
  position: relative;
  display: flex; align-items: center; gap: calc(var(--u) * 5);
  height: calc(var(--u) * 35); padding: 0 calc(var(--u) * 11) 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 18);
  background: linear-gradient(180deg, rgba(22, 38, 68, .94), rgba(9, 16, 34, .94));
  border: 1px solid rgba(120, 170, 240, .24);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.cur svg { width: calc(var(--u) * 23); height: calc(var(--u) * 23); flex: none; }
.cur b {
  font-size: calc(var(--u) * 18); font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: .3px; line-height: 1;
}
.cur span { font-size: calc(var(--u) * 13); color: rgba(190, 215, 250, .55); line-height: 1; }
/* 体力：倒计时挂在胶囊上方，和参考图一致 */
.cur.sta em {
  position: absolute; left: 50%; top: calc(var(--u) * -19);
  transform: translateX(-50%);
  font-style: normal; font-size: calc(var(--u) * 13); font-weight: 700;
  color: rgba(255, 206, 150, .9); letter-spacing: .5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* ---- 标题 ---- */
.home-logo {
  position: absolute; left: 0; top: calc(var(--u) * 138); width: 100%;
  text-align: center; z-index: 2; pointer-events: none;
}
.home-logo b {
  display: block;
  font-size: calc(var(--u) * 52); font-weight: 900; letter-spacing: calc(var(--u) * 9);
  background: linear-gradient(180deg, #fff 10%, #b7ecff 44%, #4aa8ff 70%, #a86bff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 calc(var(--u) * 24) rgba(70, 150, 255, .55));
  line-height: 1.15;
}
.home-logo span {
  display: block; margin-top: calc(var(--u) * 7);
  font-size: calc(var(--u) * 11); letter-spacing: calc(var(--u) * 3.4);
  color: rgba(150, 200, 255, .62);
}

/* ---- 指挥官立绘 ---- */
.home-hero {
  position: absolute; left: 50%; bottom: calc(var(--u) * 250);
  width: calc(var(--u) * 430); height: calc(var(--u) * 430);
  transform: translateX(-50%); z-index: 2; pointer-events: none;
}
.home-hero canvas { display: block; width: 100%; height: 100%; }
.home-hero-shadow {
  position: absolute; left: 50%; bottom: calc(var(--u) * 278);
  width: calc(var(--u) * 300); height: calc(var(--u) * 54);
  transform: translateX(-50%); z-index: 1; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 180, 120, .45), rgba(255, 120, 50, 0) 70%);
  filter: blur(calc(var(--u) * 5));
}

/* ---- 右侧竖排小按钮 ---- */
.home-side {
  position: absolute; right: calc(var(--u) * 14); top: calc(var(--u) * 318); z-index: 4;
  display: flex; flex-direction: column; gap: calc(var(--u) * 10);
}
.side-btn {
  width: calc(var(--u) * 64); padding: calc(var(--u) * 9) 0 calc(var(--u) * 7);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 15);
  border: 1px solid rgba(120, 170, 240, .26);
  background: linear-gradient(180deg, rgba(20, 36, 64, .92), rgba(9, 16, 32, .92));
  color: #cfe6ff; cursor: pointer;
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(0, 0, 0, .4);
  transition: .15s;
}
.side-btn:active { transform: translateY(calc(var(--u) * 2)); filter: brightness(1.15); }
.side-btn .sb-ico svg { display: block; width: calc(var(--u) * 27); height: calc(var(--u) * 27); }
.side-btn em {
  font-style: normal; font-size: calc(var(--u) * 10.5);
  color: rgba(190, 215, 245, .78); letter-spacing: .3px;
}

/* ---- 开始挑战（金色主按钮） ---- */
.btn-challenge {
  position: absolute; left: 50%; bottom: calc(var(--u) * 188);
  transform: translateX(-50%);
  width: calc(var(--u) * 440); height: calc(var(--u) * 108);
  padding: 0; border: none; cursor: pointer; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 22);
  color: #5a2a06;
  background: linear-gradient(180deg, #ffeaa9 0%, #ffd25f 24%, #f2a01f 62%, #d1790f 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 3) #8a4a10,
    0 0 0 calc(var(--u) * 5.5) rgba(255, 220, 150, .55),
    0 calc(var(--u) * 10) calc(var(--u) * 28) rgba(255, 150, 40, .45),
    inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .72),
    inset 0 calc(var(--u) * -5) 0 rgba(140, 66, 0, .3);
  transition: transform .14s, filter .14s;
}
.btn-challenge:active { transform: translateX(-50%) translateY(calc(var(--u) * 3)); filter: brightness(1.06); }
.btn-challenge b {
  font-size: calc(var(--u) * 36); font-weight: 900; letter-spacing: calc(var(--u) * 5);
  line-height: 1.05; text-shadow: 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, .55);
}
.btn-challenge .cc-cost {
  display: flex; align-items: center; gap: calc(var(--u) * 5);
  font-size: calc(var(--u) * 17); font-weight: 800; color: #6b3208;
}
.btn-challenge .cc-cost svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.btn-challenge .cc-cost i { font-style: normal; font-variant-numeric: tabular-nums; }
/* 斜向高光扫过，让金色按钮不死板 */
.btn-challenge::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .55) 46%, transparent 60%);
  transform: translateX(-120%);
  animation: ccSweep 3.6s ease-in-out infinite;
}
@keyframes ccSweep {
  0%, 62% { transform: translateX(-120%); }
  86%, 100% { transform: translateX(120%); }
}
.btn-challenge.out {
  filter: grayscale(.55) brightness(.82);
  animation: ccShake .3s;
}
@keyframes ccShake {
  0%, 100% { transform: translateX(-50%) translateX(0); }
  25% { transform: translateX(-50%) translateX(calc(var(--u) * -7)); }
  75% { transform: translateX(-50%) translateX(calc(var(--u) * 7)); }
}

/* ---- 底部五页签 ---- */
.home-nav {
  position: absolute; left: 0; bottom: 0; width: 100%; z-index: 5;
  height: calc(var(--u) * 152);
  padding: 0 calc(var(--u) * 8) 0;
  display: flex; align-items: flex-end;
  background: linear-gradient(180deg,
    rgba(10, 18, 36, 0) 0%, rgba(10, 18, 36, .9) 22%, #070d1b 100%);
  border-top: 1px solid rgba(90, 150, 230, .16);
}
.nav-it {
  position: relative; flex: 1 1 0%; min-width: 0;
  height: calc(var(--u) * 106); padding: 0 0 calc(var(--u) * 16);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: calc(var(--u) * 5);
  border: none; background: none; cursor: pointer;
  color: #7d92b4;
  transition: color .16s;
}
.nav-it .ni-ico svg { display: block; width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.nav-it em {
  font-style: normal; font-size: calc(var(--u) * 15); font-weight: 600;
  letter-spacing: .5px; white-space: nowrap;
}
.nav-it:active { filter: brightness(1.3); }
.nav-it.active { color: #eaf6ff; }
/* 中间那一格放大上浮：它是当前所在页（船长），也是视觉重心 */
.nav-it.main {
  flex: 1.15 1 0%;
  height: calc(var(--u) * 138);
  padding-bottom: calc(var(--u) * 12);
  transform: translateY(calc(var(--u) * -10));
  color: #ffd166;
}
.nav-it.main .ni-ico svg { width: calc(var(--u) * 62); height: calc(var(--u) * 62); }
.nav-it.main em { font-size: calc(var(--u) * 17); font-weight: 700; }
.nav-it.main .ni-ico {
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 14) rgba(255, 200, 90, .45));
}
/* 锁：小锁画在两枚图标的右上角，表示该页还没做 */
.nav-it .ni-lock {
  position: absolute; right: calc(50% - var(--u) * 25); top: calc(var(--u) * 4);
  width: calc(var(--u) * 21); height: calc(var(--u) * 21);
  border-radius: 50%;
  background: rgba(8, 14, 28, .92);
  border: 1px solid rgba(120, 160, 220, .4);
}
.nav-it .ni-lock::before {
  content: ''; position: absolute; left: 50%; top: 48%;
  width: calc(var(--u) * 8); height: calc(var(--u) * 7);
  transform: translate(-50%, -50%);
  border-radius: calc(var(--u) * 1.5);
  background: #9fb4d4;
}
.nav-it .ni-lock::after {
  content: ''; position: absolute; left: 50%; top: 16%;
  width: calc(var(--u) * 7); height: calc(var(--u) * 6);
  transform: translateX(-50%);
  border: calc(var(--u) * 1.8) solid #9fb4d4;
  border-bottom: none;
  border-radius: calc(var(--u) * 3) calc(var(--u) * 3) 0 0;
}

/* ---- 最高纪录小条：填住标题与立绘之间那段空场 ---- */
.home-record {
  position: absolute; left: 50%; top: calc(var(--u) * 330);
  transform: translateX(-50%); z-index: 2; pointer-events: none;
  display: flex; align-items: center; gap: calc(var(--u) * 9);
  padding: calc(var(--u) * 7) calc(var(--u) * 17);
  border-radius: calc(var(--u) * 30);
  background: linear-gradient(180deg, rgba(22, 38, 68, .82), rgba(9, 16, 34, .82));
  border: 1px solid rgba(255, 209, 102, .3);
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 14) rgba(0, 0, 0, .45);
  white-space: nowrap;
}
.home-record i { font-style: normal; font-size: calc(var(--u) * 12); color: rgba(160, 190, 225, .8); letter-spacing: .5px; }
.home-record b {
  font-size: calc(var(--u) * 17); font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums; letter-spacing: .5px;
  text-shadow: 0 0 calc(var(--u) * 12) rgba(255, 200, 90, .5);
}

/* ---- 新手提示：两行，只讲「进门就得会」的三件事 ---- */
.home-tips {
  position: absolute; left: 50%; top: calc(var(--u) * 400);
  transform: translateX(-50%); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 7);
  width: calc(var(--u) * 470); text-align: center;
}
.home-tips span {
  position: relative;
  font-size: calc(var(--u) * 12.5); line-height: 1.5;
  color: rgba(178, 205, 240, .62);
  letter-spacing: .4px;
}
.home-tips span::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: calc(var(--u) * 5); height: calc(var(--u) * 5);
  margin-right: calc(var(--u) * 7);
  border-radius: 50%; background: rgba(89, 217, 255, .55);
}