/* v235: HUD 方案A（顶栏化）+ 大厅方案A（角色舞台·调整版）。
   This file is the last stylesheet in index.html, so it is the final cascade
   layer. Rules use deep `#lobby`/`#hud` selectors plus !important where the
   historical bundles (styles.css, styles-v98/v166/v193) pin layout with
   !important themselves. Nothing here changes game rules: the run still has a
   single signature skill with three charges. */

/* ==========================================================================
   1. 局内 HUD · 方案A 顶栏化
   ========================================================================== */

#hud > .hud-top-band {
  position: absolute;
  z-index: 6;
  inset: 0 0 auto 0;
  height: calc(242px + env(safe-area-inset-top));
  pointer-events: none;
}

/* 1.1 贴边经验条：7px 高，升级进度永远在余光里 */
#hud .xp-track,
#hud .xp-track > #xp-fill {
  pointer-events: none;
}

#hud > .hud-top-band > .xp-track {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: block !important;
  width: auto !important;
  height: calc(7px + env(safe-area-inset-top)) !important;
  min-height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(6, 12, 9, .9) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5) !important;
  overflow: hidden !important;
}

#hud > .hud-top-band > .xp-track > #xp-fill {
  display: block !important;
  height: calc(100% - env(safe-area-inset-top)) !important;
  min-height: 5px !important;
  margin-top: env(safe-area-inset-top) !important;
  width: 0;
  border-radius: 0 !important;
  background: linear-gradient(90deg, #8fe08a 0%, #5fbf67 60%, #3f9f57 100%) !important;
  box-shadow: 0 0 12px rgba(122, 226, 138, .55) !important;
  transition: width .18s ease;
}

#hud > .hud-top-band > .xp-heading {
  position: absolute !important;
  top: calc(env(safe-area-inset-top) + 12px) !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: auto !important;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 6px 0 0 !important;
  width: auto !important;
  color: #f3f7e6 !important;
  background: none !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

/* 1.2 头像 + 血条合并在左上（不再沉底），状态效果紧跟其下 */
#hud > .hud-top-band > .health-panel {
  position: absolute !important;
  z-index: 3;
  top: calc(env(safe-area-inset-top) + 28px) !important;
  bottom: auto !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: auto !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 7px !important;
  row-gap: 2px !important;
  width: min(190px, 52vw) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px 9px 6px 5px !important;
  border: 1px solid rgba(12, 24, 17, .6) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(16, 28, 21, .84), rgba(9, 18, 13, .72)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .34) !important;
  transform: none !important;
  backdrop-filter: blur(3px);
}

#hud > .hud-top-band .health-panel > #life-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(233, 208, 128, .8);
  border-radius: 50%;
  background-color: rgba(6, 12, 9, .9);
  background-image: var(--run-avatar-image, none);
  background-position: center 22%;
  background-size: 132%;
  background-repeat: no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .12);
}

#hud > .hud-top-band .health-panel > #life-value {
  grid-column: 2;
  grid-row: 2;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #ffe9a8 !important;
  font: 800 10px/1 ui-monospace, monospace !important;
  letter-spacing: .04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

#hud > .hud-top-band .health-panel > .health-heading {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f6f3e2 !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#hud > .hud-top-band .health-panel > .health-heading strong {
  overflow: hidden !important;
  max-width: 74px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

#hud > .hud-top-band .health-panel > .health-heading span {
  flex: none !important;
  color: rgba(255, 244, 219, .82) !important;
  font: 700 10px/1 ui-monospace, monospace !important;
  white-space: nowrap !important;
}

#hud > .hud-top-band .health-panel > .health-track {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: rgba(4, 9, 6, .78) !important;
  overflow: hidden;
}

#hud > .hud-top-band .health-panel > .health-track > #health-fill {
  display: block !important;
  height: 100% !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, #ff7a68, #e2503f) !important;
  transition: width .16s ease;
}

/* 局内不再使用旧血条面板里的等级/经验/技能名文本（已在顶栏与下方胶囊中） */
#hud > .hud-top-band .health-panel > .xp-heading,
#hud > .hud-top-band .health-panel > .rhythm {
  display: none !important;
}

/* 状态效果：紧贴头像血条下方，单行胶囊 */
#hud > .hud-top-band .health-panel > #status-row {
  grid-column: 1 / -1;
  grid-row: 3;
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  width: auto !important;
  margin: 1px 0 0 !important;
  padding: 0 0 0 2px !important;
  background: none !important;
}

#hud > .hud-top-band .health-panel > #status-row > span {
  padding: 2px 5px !important;
  border: 1px solid rgba(255, 220, 150, .3) !important;
  border-radius: 8px !important;
  background: rgba(8, 16, 11, .7) !important;
  color: #ffe7b4 !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
}

/* 1.3 计时器 / 金币 / 命数 = 右侧「印章」 */
#hud > .hud-top-band > #timer {
  position: absolute !important;
  z-index: 3;
  top: calc(env(safe-area-inset-top) + 12px) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  width: auto !important;
  min-width: 76px !important;
  margin: 0 !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(240, 226, 178, .34) !important;
  border-radius: 6px !important;
  background: rgba(9, 16, 12, .74) !important;
  color: #fbf3d8 !important;
  font: 900 20px/1.05 ui-monospace, monospace !important;
  letter-spacing: .05em !important;
  text-align: center !important;
  transform: none !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}

#hud > .hud-top-band > #run-economy {
  position: absolute !important;
  z-index: 3;
  top: calc(env(safe-area-inset-top) + 48px) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  left: auto !important;
  display: grid !important;
  grid-auto-flow: column !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  transform: none !important;
}

#hud > .hud-top-band > #run-economy > .run-currency {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  min-height: 19px !important;
  padding: 2px 7px 2px 5px !important;
  border: 1px solid rgba(240, 226, 178, .26) !important;
  border-radius: 10px !important;
  background: rgba(9, 16, 12, .7) !important;
  color: #fdf4d7 !important;
  font: 800 11px/1 ui-monospace, monospace !important;
}

#hud > .hud-top-band > #run-economy > .run-currency > small {
  color: rgba(250, 242, 214, .62) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
}

#hud #run-revives,
#hud #run-coins {
  color: inherit !important;
  font: inherit !important;
}

/* 1.4 小地图收进右上角内凹（单屏竞技不再需要大地图） */
#hud > .hud-top-band #mini-map.mini-map {
  position: absolute !important;
  z-index: 3 !important;
  top: calc(env(safe-area-inset-top) + 80px) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 96px !important;
  height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(12, 24, 17, .55) !important;
  border-radius: 9px !important;
  background: rgba(9, 18, 13, .42) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .26) !important;
  opacity: .82;
  transform: none !important;
}

/* 1.5 Boss 血条：从信息带下方滑入，满宽带阶段点，结束自动收起 */
#hud > .hud-top-band > #boss-panel {
  position: absolute !important;
  z-index: 4 !important;
  top: calc(env(safe-area-inset-top) + 156px) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(430px, calc(100vw - 24px)) !important;
  margin: 0 !important;
  padding: 6px 11px 7px !important;
  border: 1px solid rgba(226, 124, 108, .38) !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(38, 15, 14, .9), rgba(20, 9, 9, .82)) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4) !important;
  transform: translate(-50%, -18px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .28s cubic-bezier(.2, .8, .25, 1), opacity .24s ease !important;
}

#hud > .hud-top-band > #boss-panel:not(.hidden) {
  transform: translate(-50%, 0) !important;
  opacity: 1 !important;
}

#hud > .hud-top-band > #boss-panel > .boss-heading {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 0 4px !important;
}

#hud > .hud-top-band > #boss-panel > .boss-heading strong {
  color: #ffd9c9 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

#hud > .hud-top-band > #boss-panel > .boss-heading > span {
  color: rgba(255, 226, 210, .78) !important;
  font: 700 10px/1 ui-monospace, monospace !important;
}

/* 血量读数在名称右侧，阶段状态贴右端 */
#hud > .hud-top-band > #boss-panel > .boss-heading > #boss-health-value {
  margin-left: 0 !important;
  font-weight: 800 !important;
  color: rgba(255, 233, 220, .92) !important;
}

#hud > .hud-top-band > #boss-panel > .boss-heading > #boss-state {
  margin-left: auto !important;
  padding: 1px 7px !important;
  border: 1px solid rgba(255, 196, 170, .34) !important;
  border-radius: 9px !important;
  color: #ffd9b0 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#hud > .hud-top-band > #boss-panel > .boss-track {
  position: relative !important;
  display: block !important;
  height: 11px !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 196, 170, .28) !important;
  border-radius: 6px !important;
  background: rgba(10, 4, 4, .86) !important;
  overflow: hidden !important;
}

#hud > .hud-top-band > #boss-panel > .boss-track::before,
#hud > .hud-top-band > #boss-panel > .boss-track::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: rgba(255, 239, 224, .55) !important;
  z-index: 2 !important;
}

#hud > .hud-top-band > #boss-panel > .boss-track::before { left: 33.4% !important; }
#hud > .hud-top-band > #boss-panel > .boss-track::after { left: 66.7% !important; }

#hud > .hud-top-band > #boss-panel > .boss-track > #boss-fill {
  display: block !important;
  height: 100% !important;
  border-radius: 5px !important;
  background: linear-gradient(90deg, #ff8a5c, #e0402f) !important;
  box-shadow: inset 0 0 8px rgba(255, 214, 170, .35) !important;
  transition: width .2s ease;
}

#hud > .hud-top-band > #boss-panel > .boss-appetite {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 5px 0 0 !important;
  color: rgba(255, 222, 202, .7) !important;
  font-size: 9px !important;
}

#hud > .hud-top-band > #boss-panel > .boss-appetite > div {
  flex: 1 1 auto !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, .14) !important;
  overflow: hidden !important;
}

#hud > .hud-top-band > #boss-panel > .boss-appetite > b {
  color: #ffd9b0 !important;
  font-size: 9px !important;
}
/* 1.6 右下角技能坞：主技能大、无副技能（角色只有一个技能） */
#hud #signature-controls,
#signature-controls {
  z-index: 20 !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  grid-template-columns: 86px !important;
  gap: 5px !important;
}

#signature-controls #signature-skill.signature-skill {
  width: 86px !important;
  height: 86px !important;
  border-radius: 46% !important;
  border-width: 3px !important;
  background: radial-gradient(circle at 50% 34%, rgba(28, 52, 46, .96), rgba(8, 16, 13, .94)) !important;
  box-shadow: 0 0 0 4px rgba(8, 12, 9, .5), 0 8px 20px rgba(0, 0, 0, .45) !important;
}

#signature-controls #signature-skill.signature-skill > span:first-child {
  font-size: 30px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}

#signature-controls #signature-skill.signature-skill > strong {
  margin-top: 1px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #f0fbf7 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

#signature-controls #signature-skill.signature-skill > #signature-recharge {
  margin-top: 3px !important;
  color: rgba(214, 238, 232, .78) !important;
  font-size: 9px !important;
}

#signature-controls .signature-charge-track {
  display: flex !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 4px 0 0 !important;
}

#signature-controls .signature-charge-track > i {
  width: 14px !important;
  height: 5px !important;
  border-radius: 3px !important;
  background: rgba(255, 255, 255, .18) !important;
}

#signature-controls .signature-charge-track > i.ready {
  background: #ffd977 !important;
  box-shadow: 0 0 8px rgba(255, 217, 119, .8) !important;
}

#signature-controls #signature-mode.signature-mode {
  min-width: 62px !important;
  min-height: 24px !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
}

/* 1.7 局内左上已经是头像血条：浮动齿轮与暂停菜单入口重复，直接隐藏，避免压住头像。 */
body:has(#hud:not(.hidden)) #audio-settings-button:not(.hidden) {
  display: none !important;
}

/* 取消释放区避开右上角印章、小地图和 Boss 血条 */
.skill-cancel-zone {
  top: calc(env(safe-area-inset-top) + 214px) !important;
  right: max(20px, env(safe-area-inset-right)) !important;
}

/* 手机竖屏微调 */
@media (max-width: 600px) {
  #hud > .hud-top-band {
    height: calc(240px + env(safe-area-inset-top));
  }

  #hud > .hud-top-band > .health-panel {
    top: calc(env(safe-area-inset-top) + 26px) !important;
    width: min(186px, 52vw) !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  #hud > .hud-top-band .health-panel > #life-avatar {
    width: 38px;
    height: 38px;
  }

  #hud > .hud-top-band > #timer {
    font-size: 18px !important;
    padding: 3px 8px !important;
  }

  #hud > .hud-top-band #mini-map.mini-map {
    width: 100px !important;
    height: 72px !important;
  }
}

@media (max-width: 400px) {
  /* 窄机不再整块隐藏小地图，只把它压成一条贴边缩略条，避免出现空窗。 */
  #hud > .hud-top-band #mini-map.mini-map {
    width: 84px !important;
    height: 58px !important;
    right: max(6px, env(safe-area-inset-right)) !important;
  }

  #hud > .hud-top-band > #timer {
    right: max(8px, env(safe-area-inset-right)) !important;
  }
}

/* 平板/桌面：同一条顶栏语言，宽度收敛 */
@media (min-width: 761px) {
  #hud > .hud-top-band > .health-panel {
    width: min(240px, 30vw) !important;
  }

  #hud > .hud-top-band > #boss-panel {
    top: calc(env(safe-area-inset-top) + 92px) !important;
  }
}

/* ==========================================================================
   2. 大厅 · 方案A 角色舞台（调整版）
   历史样式层 (styles-v193-ui.css 等) 用
   `#lobby:not(.boss-material-selection) > #lobby-character-view > #character-list...`
   这类 !important 选择器钉死了旧构图。这里的每个选择器都刻意叠加 ID/class 权重
   (#lobby #lobby-character-view #character-list.solo-character-picker...)，
   保证在同为 !important 时本方仍然胜出。
   ========================================================================== */

#lobby {
  --lobby-ink: #f4ecd8;
  --lobby-ink-dim: rgba(232, 232, 214, .68);
  --lobby-gold: #f2c85c;
  --lobby-line: rgba(206, 230, 205, .22);
  --lobby-panel: linear-gradient(180deg, rgba(24, 46, 34, .86), rgba(14, 32, 24, .78));
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  gap: 6px !important;
  background: radial-gradient(120% 90% at 50% 0%, #1d3b2a 0%, #0e1f17 62%, #08140f 100%) !important;
}

/* 2.1 顶部信息带：头像 + 昵称同行，钱包 ✦/♥ 筹码式
   设计稿里信息带与标签行都是「浮在场景上」的一行，没有面板底。 */
#lobby > .lobby-header {
  display: none !important;
}

#lobby > .lobby-top-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  row-gap: 4px;
  width: min(1320px, 100%);
  min-height: 46px;
  margin-inline: auto;
  padding: 5px 8px;
  box-sizing: border-box;
  /* 设计稿：头像/昵称/金币/命数/设置都在同一条半透明黑框里 */
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(10, 14, 12, .42);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26);
  backdrop-filter: blur(5px);
}

#lobby > .lobby-top-band > .lobby-band-back { grid-column: 1; grid-row: 1 / span 2; }

#lobby > .lobby-top-band > .lobby-identity {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

#lobby > .lobby-top-band .lobby-identity-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border: 2px solid rgba(242, 200, 92, .72);
  border-radius: 50%;
  background: rgba(8, 16, 12, .9);
  color: #f6e7b6;
  font: 900 13px/1 serif;
}

#lobby > .lobby-top-band .lobby-identity-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#lobby > .lobby-top-band .lobby-identity-copy {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

#lobby > .lobby-top-band .lobby-identity-copy > strong {
  overflow: hidden;
  color: var(--lobby-ink);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lobby > .lobby-top-band .lobby-identity-copy > small {
  overflow: hidden;
  color: var(--lobby-ink-dim);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lobby > .lobby-top-band > .lobby-chips {
  grid-column: 2 / span 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
}

#lobby > .lobby-top-band .lobby-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* 历史样式层给旧钱包子项写过固定宽度/高度，这里按内容宽度收敛。 */
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 22px !important;
  max-height: none !important;
  flex: 0 0 auto;
  padding: 0 8px 0 6px;
  border: 1px solid rgba(240, 226, 178, .26);
  border-radius: 11px;
  background: rgba(9, 18, 13, .66);
  color: #fdf4d7;
  font: 800 12px/1 ui-monospace, monospace;
  white-space: nowrap;
}

#lobby > .lobby-top-band .lobby-chip > i {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-style: normal;
  font-size: 9px;
  line-height: 1;
}

#lobby > .lobby-top-band .lobby-chip-coins > i {
  color: #5b3c0d;
  background: linear-gradient(180deg, #ffe9a3, #e9b93f);
}

#lobby > .lobby-top-band .lobby-chip-lives > i {
  color: #fff1f1;
  background: linear-gradient(180deg, #ff8d80, #d9453c);
}

#lobby > .lobby-top-band .lobby-chip > button {
  width: 16px;
  height: 16px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(240, 226, 178, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: inherit;
  font: 900 10px/1 system-ui, sans-serif;
}

#lobby > .lobby-top-band .lobby-chip.lobby-chip-diamonds { display: none !important; }

#lobby > .lobby-top-band > .lobby-band-actions {
  grid-column: 4;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

#lobby > .lobby-top-band .lobby-band-button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(240, 226, 178, .24);
  border-radius: 8px;
  background: rgba(9, 18, 13, .6);
  color: #f0ead2;
  font: 900 13px/1 system-ui, sans-serif;
}

#lobby > .lobby-top-band .lobby-band-button:hover { background: rgba(242, 200, 92, .18); }

/* 2.2 顶部标签行：设计稿里是场景上的一行纯文字，没有面板底/描边。 */
#lobby > .lobby-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 4px !important;
  width: min(1320px, 100%) !important;
  min-height: 40px !important;
  height: auto !important;
  margin-inline: auto !important;
  padding: 3px 4px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 12px !important;
  /* 设计稿：标签行是场景上的一条半透明黑框 */
  background: rgba(10, 14, 12, .42) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26) !important;
  backdrop-filter: blur(5px);
  overflow: visible !important;
}

/* 大厅/好友栏从标签行移除（设计：没有大厅和好友），但保留节点本身：
   social-client.js 直接绑定它们，并由顶栏的社区按钮代理点击。 */
#lobby > .lobby-tabs > .community-tab {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

#lobby > .lobby-tabs > button {
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: none !important;
  color: #fff7e2 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .72);
}

#lobby > .lobby-tabs > button.active {
  background: linear-gradient(180deg, rgba(255, 214, 122, .95), rgba(232, 167, 44, .95)) !important;
  color: #4a2b06 !important;
  text-shadow: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
}

#lobby > .lobby-tabs > button::after { display: none !important; }

/* 2.3 角色舞台主体 */
#lobby > #lobby-character-view,
#lobby > #lobby-character-view.lobby-character-view {
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  width: min(1320px, 100%) !important;
  /* 舞台高度用视口比例，避免矮屏笔记本上卡条被裁掉。 */
  min-height: clamp(300px, 46vh, 900px) !important;
  height: auto !important;
  flex: 1 1 auto !important;
  margin-inline: auto !important;
  padding: 6px !important;
  border: 1px solid var(--lobby-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(13, 30, 22, .82), rgba(8, 20, 15, .88)) !important;
  box-shadow: 0 10px 24px rgba(2, 12, 8, .28) !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* 旧的地图纵列与角色简介栏退役 */
#lobby > #lobby-character-view > #lobby-map-select { display: none !important; }
#lobby > #lobby-character-view > .character-summary { display: none !important; }

/* 2.3.1 悬浮在舞台左上角的地图分段控件 */
#lobby #lobby-character-view > #character-list.solo-character-picker.character-roster .solo-character-stage > .lobby-map-segmented {
  position: absolute;
  z-index: 9;
  top: 10px;
  left: 10px;
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(240, 226, 178, .28);
  border-radius: 12px;
  background: rgba(8, 16, 12, .72);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .32);
  backdrop-filter: blur(3px);
}

#lobby #lobby-character-view > #character-list.solo-character-picker.character-roster .lobby-map-segmented > [data-map-id] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: rgba(236, 236, 216, .74);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

#lobby .lobby-map-segmented > [data-map-id] > .map-region-icon,
#lobby .lobby-map-segmented > [data-map-id] > .map-region-copy > small { display: none !important; }

#lobby .lobby-map-segmented > [data-map-id] > .map-region-copy > strong { font-size: 11px; }

#lobby .lobby-map-segmented > [data-map-id].active {
  background: linear-gradient(180deg, rgba(255, 186, 92, .9), rgba(214, 120, 34, .9));
  color: #431f06;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

#lobby .lobby-map-segmented > [data-map-id="lava"]:not(.active) {
  background: linear-gradient(180deg, rgba(120, 39, 22, .72), rgba(74, 22, 14, .72));
  color: #ffd3b0;
}

#lobby .lobby-map-segmented > [data-map-id].locked { opacity: .82; }

#lobby .lobby-map-segmented > [data-map-id] > .map-region-new {
  position: static;
  margin-left: 3px;
  padding: 0 4px;
  border-radius: 5px;
  background: #e2483a;
  color: #fff3ee;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
}

/* 2.3.2 「? 指南」快捷入口（舞台卡片内右上角） */
#lobby > #lobby-character-view > #character-list.solo-character-picker.character-roster .solo-character-stage > #lobby-guide-entry.lobby-guide-entry {
  position: absolute !important;
  z-index: 9 !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 28px !important;
  max-height: none !important;
  padding: 0 11px 0 7px !important;
  border: 1px solid rgba(154, 226, 200, .42) !important;
  border-radius: 14px !important;
  background: rgba(8, 22, 17, .76) !important;
  color: #ddf6ea !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

#lobby #lobby-guide-entry > .lobby-guide-entry-icon {
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(154, 226, 200, .22) !important;
  color: #eafff6 !important;
  font-size: 11px !important;
}

#lobby #lobby-guide-entry > b { display: none !important; }

/* 2.3.3 角色舞台外壳：占满角色视图，舞台卡片铺满外壳 */
#lobby #lobby-character-view > #character-list.solo-character-picker,
#lobby #lobby-character-view > #character-list.solo-character-picker.character-roster,
#lobby > #lobby-character-view > #character-list.solo-character-picker.character-roster {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  grid-row: auto !important;
  grid-column: auto !important;
  grid-template-rows: none !important;
  grid-template-columns: none !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  overflow: visible !important;
  touch-action: pan-y;
  z-index: 4;
}

/* 2.3.4 角色舞台：立绘踩在实景舞台上，带脚下阴影 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage,
#lobby #lobby-character-view > #character-list.solo-character-picker.character-roster > .solo-character-stage {
  position: absolute !important;
  inset: 6px !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(240, 226, 178, .26) !important;
  border-radius: 12px !important;
  background-color: #16301f !important;
  background-image:
    linear-gradient(180deg, rgba(5, 14, 9, .05) 0%, rgba(5, 14, 9, 0) 40%, rgba(4, 12, 8, .34) 100%),
    var(--lobby-stage-image, url("assets/ui/courtyard-menu-bg-v55.webp")) !important;
  background-position: center, center 62% !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 -54px 46px -34px rgba(3, 10, 6, .6), 0 10px 24px rgba(2, 12, 8, .28) !important;
  isolation: isolate;
}

/* 脚下阴影（舞台地面光环）；攻击命中时随立绘一起反馈 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage::after,
#lobby #lobby-character-view > #character-list.solo-character-picker.character-roster > .solo-character-stage::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  bottom: 24% !important;
  width: min(42%, 230px) !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, rgba(3, 10, 6, .58) 0%, rgba(3, 10, 6, .26) 52%, rgba(3, 10, 6, 0) 78%) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker.is-character-attacking .solo-character-stage::after {
  animation: v235-stage-shadow 480ms cubic-bezier(.2, .75, .25, 1) both !important;
}

@keyframes v235-stage-shadow {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  45% { transform: translateX(-50%) scale(1.16); opacity: .78; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* 立绘：踩在舞台上，站在名牌上方 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-character-stage-portrait {
  position: absolute !important;
  z-index: 3 !important;
  inset: auto auto 20% 50% !important;
  width: min(62%, 420px) !important;
  height: min(74%, 500px) !important;
  max-width: 420px !important;
  max-height: 500px !important;
  min-height: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .38)) !important;
  transform: translateX(calc(-50% + var(--stage-motion-x, 0px))) scale(var(--stage-motion-scale, 1)) !important;
  transform-origin: center bottom !important;
  pointer-events: none !important;
  transition: transform .22s ease;
}

/* 实景预览画布（沿用局内 drawEffects 管线）铺在立绘之上 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-character-stage-preview {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
}

/* 左上角锁定提示（存在时） */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-character-stage-copy {
  display: none !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-character-stage-copy > * { display: none !important; }

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-character-stage-copy > .solo-character-stage-lock {
  display: inline-block !important;
  margin: 0 !important;
  padding: 3px 9px !important;
  border: 1px solid rgba(255, 214, 158, .46) !important;
  border-radius: 11px !important;
  background: rgba(8, 16, 12, .74) !important;
  color: #ffdda6 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

/* 2.3.5 底部名牌 + 精通星级 + ［技能介绍］胶囊
   说明：胶囊按钮必须落在卡条「上边缘之上」，否则卡条的定位盒会拦截点击。
   这里把名牌组固定在卡条上方（bottom: 108px），卡条高度 70px + 64px 底距，
   上边缘 = 134px，胶囊底边 108px + 约 38px 高度 = 146px，因此保证高于卡条。 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-stage-plate {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: var(--lobby-plate-bottom, 126px);
  display: grid;
  justify-items: center;
  gap: 5px;
  width: min(96%, 520px);
  transform: translateX(-50%);
  pointer-events: none;
}

#lobby .solo-stage-nameplate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 14px;
  border: 1px solid rgba(240, 226, 178, .3);
  border-radius: 15px;
  background: rgba(7, 15, 11, .74);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .34);
  backdrop-filter: blur(3px);
}

#lobby .solo-stage-nameplate > strong {
  color: #fff6dd;
  font: 900 17px/1.1 Georgia, "Times New Roman", serif;
  letter-spacing: .02em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

#lobby .solo-stage-mastery {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--lobby-ink-dim);
  font-size: 10px;
  font-weight: 800;
}

#lobby .solo-stage-mastery > b {
  color: #f2c85c;
  font-size: 11px;
  letter-spacing: .08em;
}

#lobby .solo-stage-skill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  padding: 4px 8px 4px 6px;
  border: 1px solid rgba(154, 226, 200, .4);
  border-radius: 17px;
  background: rgba(8, 22, 17, .78);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .32);
  pointer-events: auto;
}

#lobby .solo-stage-skill-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--character-color, #e7ca74);
  color: #10231a;
  font: 900 13px/1 serif;
}

#lobby .solo-stage-skill-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

#lobby .solo-stage-skill-copy > small {
  color: rgba(214, 240, 232, .66);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
}

#lobby .solo-stage-skill-copy > strong {
  overflow: hidden;
  color: #f2fff9;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lobby .solo-stage-skill-charges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
}

#lobby .solo-stage-skill-charges > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ce8b6;
  box-shadow: 0 0 6px rgba(124, 232, 182, .7);
}

#lobby #lobby-skill-info-toggle.solo-stage-skill-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-width: 0;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(255, 233, 178, .42);
  border-radius: 12px;
  background: rgba(242, 200, 92, .16);
  color: #ffe9b0;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

/* 2.4 底部胶囊卡条：一屏 6 张缩略卡，锁定灰化 + 🔒，选中金框 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster {
  position: absolute !important;
  z-index: 8 !important;
  left: 6px !important;
  right: 6px !important;
  bottom: var(--lobby-roster-bottom, 64px) !important;
  top: auto !important;
  display: flex !important;
  width: auto !important;
  min-height: var(--lobby-roster-height, 64px) !important;
  height: var(--lobby-roster-height, 64px) !important;
  margin: 0 !important;
  padding: var(--lobby-roster-pad-y, 5px) 6px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  grid-row: auto !important;
  grid-column: auto !important;
  border: 0 !important;
  border-radius: 12px !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none;
  /* 上沿透明，让名牌胶囊与卡条自然过渡（也避免深色块压住立绘脚部）。 */
  background: linear-gradient(180deg, rgba(5, 13, 9, 0) 0%, rgba(4, 11, 8, .42) 40%, rgba(4, 11, 8, .6) 100%) !important;
  pointer-events: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster::-webkit-scrollbar { display: none; }

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option {
  position: relative !important;
  /* --lobby-card-w 由 game.js 按卡条实际宽度算出「正好 6 张」的像素宽度；
     border-box + 百分比 flex-basis 在 Chromium 里会因为 border 宽度产生循环而溢出。 */
  flex: 0 0 var(--lobby-card-w, 52px) !important;
  width: var(--lobby-card-w, 52px) !important;
  min-width: 0 !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: none !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  border: 2px solid rgba(233, 236, 214, .22) !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, rgba(30, 52, 40, .9), rgba(12, 26, 19, .92)) !important;
  box-shadow: 0 3px 0 rgba(4, 10, 7, .6) !important;
  scroll-snap-align: center !important;
  overflow: hidden !important;
  opacity: .92;
  transition: transform .16s ease, border-color .16s ease, opacity .16s ease;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option > .character-portrait {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: none !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option > .character-portrait > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 18% !important;
  transform: scale(1.02);
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option > .character-card-label {
  display: block !important;
  padding: 2px 3px 3px !important;
  background: rgba(4, 11, 8, .78) !important;
  color: rgba(240, 238, 218, .9) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option.active {
  border-color: #f6d264 !important;
  box-shadow: 0 0 0 2px rgba(246, 210, 100, .34), 0 4px 0 rgba(120, 82, 16, .7) !important;
  opacity: 1;
  transform: translateY(-3px);
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option.active > .character-card-label {
  background: linear-gradient(180deg, #ffdf8a, #e8b23f) !important;
  color: #472a05 !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option.locked {
  filter: grayscale(.92) brightness(.72);
  opacity: .82;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option.locked > .character-card-label {
  color: #ffd9a0 !important;
}

/* 卡条左右平滑滑动：保留箭头与拖拽手感 */
#lobby .solo-rail-nav {
  position: absolute;
  z-index: 9;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(240, 226, 178, .3);
  border-radius: 50%;
  background: rgba(6, 14, 10, .8);
  color: #ffeec0;
  font: 900 15px/1 system-ui, sans-serif;
  transform: translateY(-50%);
}

#lobby .solo-rail-nav-previous { left: -4px; }
#lobby .solo-rail-nav-next { right: -4px; }

/* 2.5 双 CTA 操作区（贴在大厅面板底部） */
/* 隐藏态必须永远压过布局规则（历史 CSS 里 .hidden 只有 display:none）。 */
#lobby #lobby-character-view > .lobby-footer > button.hidden { display: none !important; }

#lobby #lobby-character-view > .lobby-footer {
  position: absolute !important;
  z-index: 10 !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  top: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-row: auto !important;
  grid-column: auto !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

#lobby #lobby-character-view > .lobby-footer > button {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  min-width: 0 !important;
  min-height: 52px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  border-radius: 12px !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: rgba(64, 38, 13, .9) !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 0 rgba(38, 22, 8, .66) !important;
  overflow: hidden !important;
}

#lobby #lobby-character-view > .lobby-footer > button > span {
  font-size: 14px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#lobby #lobby-character-view > .lobby-footer > button > small {
  display: block !important;
  max-width: 100% !important;
  color: rgba(74, 44, 12, .78) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#lobby #lobby-character-view > .lobby-footer > #toy-coin-reward {
  order: 1 !important;
  flex: 0 1 auto !important;
  background: linear-gradient(180deg, #8fdc8a 0%, #58b661 100%) !important;
  color: #103d1c !important;
}

#lobby #lobby-character-view > .lobby-footer > #taptap-coin-ad {
  order: 1 !important;
  flex: 0 1 auto !important;
  background: linear-gradient(180deg, #8fdc8a 0%, #58b661 100%) !important;
  color: #103d1c !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-multiplayer {
  order: 1 !important;
  flex: 0 1 auto !important;
  min-width: 84px !important;
  border-color: rgba(24, 60, 34, .9) !important;
  background: linear-gradient(180deg, #7fc47c 0%, #4c9a56 100%) !important;
  color: #0e3417 !important;
  box-shadow: 0 3px 0 rgba(19, 52, 28, .7) !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-start {
  order: 3 !important;
  flex: 1 1 auto !important;
  flex-direction: row !important;
  min-width: 130px !important;
  padding: 4px 14px !important;
  border-color: rgba(84, 46, 10, .9) !important;
  background: linear-gradient(180deg, #ffc85c 0%, #f0891f 100%) !important;
  color: #4d2707 !important;
  font-size: 18px !important;
  letter-spacing: .04em !important;
  box-shadow: 0 4px 0 rgba(84, 44, 8, .72) !important;
}

/* 无尽模式入口（v251）：宽度固定，不跟「开始游戏」抢空间。
   实测 flex 分摊会因为按钮内容高度不同而乱掉：toy 包下曾出现无尽 218px / 开始 145px。 */
#lobby #lobby-character-view > .lobby-footer > #lobby-endless {
  order: 2 !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  padding: 4px 6px !important;
  border-color: rgba(58, 34, 78, .9) !important;
  background: linear-gradient(180deg, #b98ce0 0%, #7a4fb0 100%) !important;
  color: #1d1030 !important;
  box-shadow: 0 3px 0 rgba(46, 24, 68, .7) !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-endless > span {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-endless > small {
  font-size: 9px !important;
  opacity: .82 !important;
  line-height: 1.15 !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-start::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 9px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #5c2c05;
}

/* 2.6 技能介绍弹层 */
#lobby-skill-info.screen-overlay {
  display: grid;
  place-items: center;
  padding: 20px 14px;
  background: rgba(4, 9, 7, .72);
}

#lobby-skill-info > .lobby-skill-info-panel {
  display: grid;
  gap: 10px;
  width: min(430px, 100%);
  padding: 16px 16px 14px;
  border: 1px solid rgba(240, 226, 178, .3);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 40, 29, .97), rgba(10, 24, 17, .97));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}

#lobby-skill-info .lobby-skill-info-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

#lobby-skill-info .lobby-skill-info-heading > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--character-color, #e7ca74);
  color: #10231a;
  font: 900 18px/1 serif;
}

#lobby-skill-info .lobby-skill-info-heading > div { display: grid; gap: 2px; min-width: 0; }
#lobby-skill-info .lobby-skill-info-heading > div > p {
  margin: 0;
  color: var(--lobby-ink-dim, rgba(232, 232, 214, .68));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
#lobby-skill-info .lobby-skill-info-heading > div > h2 {
  margin: 0;
  color: #fff6dd;
  font: 900 19px/1.15 Georgia, "Times New Roman", serif;
}
#lobby-skill-info .lobby-skill-info-heading > button {
  margin-left: auto;
  width: 30px;
  height: 30px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(240, 226, 178, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #f2ead2;
  font-size: 17px;
  line-height: 1;
}

#lobby-skill-info .lobby-skill-info-effect {
  margin: 0;
  color: rgba(240, 244, 226, .9);
  font-size: 13px;
  line-height: 1.55;
}

#lobby-skill-info .lobby-skill-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#lobby-skill-info .lobby-skill-info-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid rgba(154, 226, 200, .34);
  border-radius: 11px;
  background: rgba(8, 22, 17, .7);
  color: #dff6ec;
  font-size: 10px;
  font-weight: 800;
}

#lobby-skill-info .lobby-skill-info-meta > span > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ce8b6;
  box-shadow: 0 0 6px rgba(124, 232, 182, .7);
}

#lobby-skill-info .lobby-skill-info-close {
  min-height: 40px;
  border: 2px solid rgba(64, 38, 13, .9);
  border-radius: 11px;
  background: linear-gradient(180deg, #ffc85c 0%, #f0891f 100%);
  color: #4d2707;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(84, 44, 8, .7);
}

/* 2.7 窄屏收敛与全局冲突避让 */
/* 大厅的顶栏已经有齿轮入口：把浮动齿轮移到左下，避免压住左上头像血条/舞台。 */
body:has(#lobby:not(.hidden)) #audio-settings-button:not(.hidden) {
  top: auto !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  bottom: max(74px, calc(env(safe-area-inset-bottom) + 74px)) !important;
  z-index: 74 !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 18px !important;
  opacity: .82;
}

@media (max-width: 760px) {
  #lobby > .lobby-top-band {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 5px;
    padding: 4px 6px;
  }

  #lobby > .lobby-top-band .lobby-identity-copy > strong { font-size: 12px; }
  #lobby > .lobby-top-band .lobby-chip { min-height: 21px; padding: 0 7px 0 5px; font-size: 11px; }

  #lobby > #lobby-character-view { min-height: clamp(260px, 36vh, 620px) !important; }

  #lobby {
    --lobby-roster-height: 58px;
    --lobby-roster-bottom: 64px;
    --lobby-plate-bottom: 126px;
    --lobby-roster-pad-y: 4px;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster {
    padding: 5px !important;
    gap: 6px !important;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option {
    height: 58px !important;
    min-height: 58px !important;
  }

  #lobby #lobby-character-view > .lobby-footer > button { min-height: 48px !important; }
  #lobby #lobby-character-view > .lobby-footer > button > span { font-size: 13px !important; }
  #lobby #lobby-character-view > .lobby-footer > #lobby-start { font-size: 16px !important; min-width: 118px !important; }
}

@media (max-width: 420px) {
  #lobby > .lobby-top-band .lobby-chip > button { display: none !important; }

/* 历史样式在钱包数字前画了一个金币圆点；设计稿的图标已经由 .lobby-chip > i 承担。 */
#lobby > .lobby-top-band .lobby-chip > strong::before,
#lobby > .lobby-top-band .lobby-chip > strong::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

  #lobby #lobby-character-view > .lobby-footer > #toy-coin-reward > small { display: none !important; }

  #lobby .solo-stage-nameplate > strong { font-size: 15px; }
}

/* 横屏 / 桌面：舞台更宽，名牌与技能胶囊并排一行，避免在宽舞台上显得稀疏 */
@media (min-width: 880px) {
  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-stage-plate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(92%, 720px);
  }
}

/* 横屏 / 桌面：舞台更宽，卡条仍一屏 6 张 */
@media (min-width: 761px) {
  #lobby {
    /* 卡条高度 = 卡片高度 + 上下内边距；舞台高度按视口比例收缩，矮屏也不裁切。 */
    --lobby-roster-height: 74px;
    --lobby-roster-bottom: 72px;
    --lobby-plate-bottom: 156px;
    --lobby-roster-pad-y: 6px;
  }

  #lobby > #lobby-character-view { min-height: clamp(320px, 52vh, 900px) !important; }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option {
    height: 62px !important;
    min-height: 62px !important;
  }

  #lobby #lobby-character-view > .lobby-footer { max-width: clamp(560px, 62vw, 980px); margin-inline: auto !important; }
}

/* v235 收尾：Toy 外壳把旧 `.lobby-wallet` 钉成 80px/50px 两列网格 + 38px 行高，
   会把筹码式钱包压成竖排。这里用更高权重把它还原成同一行的胶囊。 */
body.toy-ranked-only #lobby:not(.boss-material-selection) > .lobby-top-band > .lobby-wallet,
body.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header > .lobby-wallet {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  gap: 5px !important;
  transform: none !important;
}

body.toy-ranked-only #lobby:not(.boss-material-selection) > .lobby-top-band > .lobby-wallet > .lobby-chip {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 22px !important;
}

/* v235 收尾：Toy 排行榜外壳里的「互动领命数」文案。
   历史样式层（styles-v193-ui.css / styles-v129.css）用
   `body.toy-ranked-only ... .lobby-footer #toy-coin-reward:not(.hidden) small`
   级别的选择器 + !important 指定了多行大字号，把两行文案挤出 76px 的胶囊高度。
   这里用同等（或更高）权重把字号/行高收敛到单行可显示。 */
body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer[data-toy-reward-visible="true"] > #toy-coin-reward:not(.hidden) > span,
body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer #toy-coin-reward:not(.hidden) span,
body.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer[data-toy-reward-visible="true"] > #toy-coin-reward:not(.hidden) span,
body.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer #toy-coin-reward:not(.hidden) span {
  font-size: 13px !important;
  line-height: 16px !important;
}

body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer[data-toy-reward-visible="true"] > #toy-coin-reward:not(.hidden) > small,
body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer #toy-coin-reward:not(.hidden) small,
body.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer[data-toy-reward-visible="true"] > #toy-coin-reward:not(.hidden) small,
body.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer #toy-coin-reward:not(.hidden) small {
  font-size: 8px !important;
  line-height: 11px !important;
}

body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer[data-toy-reward-visible="true"] > #toy-coin-reward:not(.hidden)::before {
  content: none !important;
  display: none !important;
}

body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer[data-toy-reward-visible="true"] > #lobby-start {
  flex: 1 1 auto !important;
}
body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer[data-toy-reward-visible="true"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-items: stretch !important;
  min-height: 0 !important;
  gap: 7px !important;
}

body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer[data-toy-reward-visible="true"] > #toy-coin-reward:not(.hidden),
body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer[data-toy-reward-visible="true"] > #lobby-start {
  min-height: 52px !important;
  height: auto !important;
  border-radius: 12px !important;
}

body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer[data-toy-reward-visible="true"] > #toy-coin-reward:not(.hidden) {
  flex: 0 1 auto !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer[data-toy-reward-visible="true"] > #toy-coin-reward:not(.hidden)::before {
  content: none !important;
  display: none !important;
}

body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer[data-toy-reward-visible="true"] > #lobby-start {
  flex: 1 1 auto !important;
}

/* 章节内容页（天赋/精通/挑战/排行榜）继续占满剩余高度 */
#lobby.lobby-non-character-tab > #meta-shop {
  width: min(1320px, 100%) !important;
  margin-inline: auto !important;
}

/* ==========================================================================
   3. 大厅排版对齐设计稿「角色舞台」
   设计稿布局（竖屏）：
     顶部信息带（头像+昵称 ／ ✦金币 ♥命数 ／ ⚙）
     标签行（角色・天赋・精通・挑战）
     ┌ 左列：地图分段控件（庭院/熔岩NEW）＋「? 指南」
     └ 中部：角色立绘踩在实景舞台上（占满整块）
     立绘上方浮层：右端「排行榜」＋「新手教程」
     立绘下方浮层：名牌（角色名 + 精通★★★）／专属技能・技能名●●●3充能
     一屏 6 张角色卡（圆角小图 + 名字）
     双 CTA：互动领命数（草绿）＋ ▶开始游戏（金橙）
   历史样式层仍有大量 !important，所以这里统一用最高权重的选择器。
   ========================================================================== */

/* 3.0 非角色页签：整块角色舞台必须真正隐藏（否则挑战/天赋/精通页会叠在大厅画面上） */
#lobby > #lobby-character-view.hidden,
#lobby > #lobby-character-view[aria-hidden="true"],
#lobby.lobby-non-character-tab > #lobby-character-view,
#lobby.leaderboards-open > #lobby-character-view {
  display: none !important;
}

#lobby > #meta-shop:not(.hidden) {
  display: grid !important;
}

/* 3.1 舞台内的左列控件：地图分段 + 指南 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side {
  position: absolute;
  z-index: 9;
  top: 10px;
  left: 10px;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 6px;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > .lobby-map-segmented,
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented {
  position: static;
  display: inline-grid;
  grid-auto-flow: row;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(240, 226, 178, .28);
  border-radius: 12px;
  background: rgba(8, 16, 12, .72);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .32);
  backdrop-filter: blur(3px);
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 27px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: rgba(238, 240, 222, .82) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

/* 历史样式给地图卡画了图标/圆点/边框（.map-region-card::before 等），这里全部清掉 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id]::before,
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id]::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id] .map-region-icon,
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id] .map-region-copy > small {
  display: none !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id] .map-region-copy > strong {
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id].active {
  background: linear-gradient(180deg, #ffd574, #e8a72c) !important;
  color: #4a2b06 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id].active .map-region-copy > strong {
  color: #4a2b06 !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id="lava"]:not(.active) {
  background: linear-gradient(180deg, rgba(150, 52, 30, .82), rgba(88, 26, 16, .82)) !important;
  color: #ffd0ac !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id].locked {
  filter: grayscale(.35) brightness(.9);
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id] > .map-region-new {
  position: static !important;
  margin-left: 3px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: #e2483a !important;
  color: #fff3ee !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .04em;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-guide-entry.lobby-guide-entry {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 28px !important;
  max-height: none !important;
  padding: 0 10px 0 6px !important;
  border: 1px solid rgba(200, 232, 220, .38) !important;
  border-radius: 14px !important;
  background: rgba(8, 20, 16, .74) !important;
  color: #e8f7ef !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

/* 3.2 舞台右上：排行榜 */
#lobby #lobby-character-view > .lobby-rail-head {
  position: absolute;
  z-index: 9;
  top: 72px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#lobby #lobby-character-view > .lobby-rail-head > .header-leaderboard-button,
#lobby.leaderboards-open > #lobby-character-view > .lobby-rail-head > .header-leaderboard-button,
body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-rail-head > .header-leaderboard-button {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(242, 200, 92, .5) !important;
  border-radius: 14px !important;
  background: rgba(8, 16, 12, .74) !important;
  color: #ffeec0 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .04em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

#lobby #lobby-character-view > .lobby-rail-head > .header-leaderboard-button::before {
  content: "🏆";
  font-size: 11px;
  line-height: 1;
}

#lobby #lobby-character-view > .lobby-rail-head > .header-leaderboard-button.active {
  border-color: #ffd977 !important;
  box-shadow: 0 0 0 2px rgba(242, 200, 92, .22);
}

/* 3.3 立绘：放大到设计稿比例，脚踩舞台地面（名牌浮在脚前） */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-character-stage-portrait {
  inset: auto auto 30% 50% !important;
  width: min(78%, 500px) !important;
  height: min(80%, 520px) !important;
  max-width: 540px !important;
  max-height: 560px !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage::after {
  bottom: 34% !important;
  width: min(46%, 260px) !important;
}

/* 3.4 名牌 / 专属技能：设计稿是「名字 精通★★★」+「专属技能·技能名 ●●● 3 充能」 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-stage-plate {
  display: grid !important;
  justify-items: center !important;
  gap: 4px !important;
  bottom: var(--lobby-plate-bottom, 126px) !important;
}

#lobby .solo-stage-nameplate {
  gap: 9px !important;
  padding: 3px 14px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: rgba(6, 14, 10, .62) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(2px);
}

#lobby .solo-stage-nameplate > strong {
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

#lobby .solo-stage-mastery {
  font-size: 10px !important;
  color: rgba(240, 238, 218, .74) !important;
}

#lobby .solo-stage-mastery > b {
  color: #f2c85c !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

#lobby .solo-stage-skill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 3px 7px 3px 11px !important;
  border: 1px solid rgba(154, 226, 200, .34) !important;
  border-radius: 15px !important;
  background: rgba(6, 16, 12, .66) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(2px);
}

#lobby .solo-stage-skill > small {
  color: rgba(216, 240, 232, .72) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

#lobby .solo-stage-skill > strong {
  color: #f2fff9 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#lobby .solo-stage-skill-charges { gap: 3px !important; }

#lobby .solo-stage-skill-charges > i {
  width: 6px !important;
  height: 6px !important;
  background: #8ef0c2 !important;
  box-shadow: 0 0 6px rgba(142, 240, 194, .8) !important;
}

#lobby .solo-stage-skill-charge-label {
  color: rgba(226, 246, 238, .82) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* 3.5 角色卡：圆角小图 + 名字，锁定灰化 + 🔒，选中金框 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option {
  border-radius: 12px !important;
  border-width: 2px !important;
  border-color: rgba(232, 240, 220, .42) !important;
  background: linear-gradient(180deg, rgba(58, 78, 62, .92), rgba(30, 48, 38, .94)) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4) !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option.active {
  border-color: #ffd977 !important;
  box-shadow: 0 0 0 2px rgba(255, 217, 119, .38), 0 4px 10px rgba(0, 0, 0, .46) !important;
  transform: translateY(-4px) !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option > .character-card-label {
  padding: 3px 4px 4px !important;
  background: rgba(6, 14, 10, .74) !important;
  color: #f4f2e2 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option.active > .character-card-label {
  background: rgba(6, 14, 10, .88) !important;
  color: #ffe9a8 !important;
}

/* 3.6 双 CTA 与设计稿一致：绿色互动按钮 + 更宽的金橙开始游戏 */
#lobby #lobby-character-view > .lobby-footer > #lobby-start {
  flex: 1.6 1 auto !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-start > span { font-size: 17px !important; }

/* 3.7 平板 / 桌面：舞台更宽，立绘与浮层留出更大边距 */
@media (min-width: 761px) {
  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side {
    top: 14px;
    left: 14px;
  }

  #lobby #lobby-character-view > .lobby-rail-head { top: 84px; right: 14px; }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-character-stage-portrait {
    inset: auto auto 30% 50% !important;
    width: min(56%, 560px) !important;
    height: min(64%, 620px) !important;
    max-width: 560px !important;
    max-height: 620px !important;
  }

  #lobby .solo-stage-nameplate > strong { font-size: 18px !important; }
  #lobby .solo-stage-skill > strong { font-size: 13px !important; }
}

/* 横屏矮屏：立绘不要顶到顶部边距 */
@media (min-width: 761px) and (max-height: 720px) {
  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-character-stage-portrait {
    inset: auto auto 30% 50% !important;
    height: min(84%, 520px) !important;
  }
}

/* ==========================================================================
   4. 大厅顶部结构（对齐设计稿图一）
     · 顶栏：头像+昵称 / 资源状态栏（金币·红心·齿轮）/ 指南
     · 标签行：顶部居中的胶囊按钮组，半透明深灰磨砂玻璃底
     · 排行榜：画面左侧中间偏上悬浮的圆角矩形
   ========================================================================== */

/* 4.1 顶栏：三段式（左＝返回+身份，中＝资源，右＝指南） */
#lobby > .lobby-top-band {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  column-gap: 7px !important;
  row-gap: 0 !important;
  padding: 6px 8px !important;
  border-radius: 14px !important;
}

#lobby > .lobby-top-band > .lobby-band-back {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#lobby > .lobby-top-band > .lobby-identity {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#lobby > .lobby-top-band > .lobby-wallet {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  min-width: 0 !important;
}

#lobby > .lobby-top-band > .lobby-band-actions {
  grid-column: 5 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}

/* 资源状态栏：金币 / 红心 / 齿轮 横排，胶囊+磨砂玻璃 */
#lobby > .lobby-top-band .lobby-chip {
  /* 历史样式层把钱包子项钉成固定宽度，会把金币数字挤到图标下面。 */
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 8px 0 6px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 13px !important;
  background: rgba(12, 16, 14, .58) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(6px);
  font-size: 13px !important;
}

#lobby > .lobby-top-band .lobby-chip > i {
  width: 16px !important;
  height: 16px !important;
  font-size: 10px !important;
}

#lobby > .lobby-top-band .lobby-chip > strong {
  margin-left: 2px !important;
  color: #fdf4d7 !important;
  font: 800 13px/1 ui-monospace, monospace !important;
  white-space: nowrap !important;
}

#lobby > .lobby-top-band .lobby-chip-coins > i {
  color: #5b3c0d !important;
  background: linear-gradient(180deg, #ffe9a3, #e9b93f) !important;
}

#lobby > .lobby-top-band .lobby-chip-lives > i {
  color: #fff2f2 !important;
  background: linear-gradient(180deg, #ff8d80, #d9453c) !important;
}

#lobby > .lobby-top-band .lobby-chip > button { display: none !important; }

/* 历史样式在钱包数字前画了一个金币圆点；设计稿的图标已经由 .lobby-chip > i 承担。 */
#lobby > .lobby-top-band .lobby-chip > strong::before,
#lobby > .lobby-top-band .lobby-chip > strong::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#lobby > .lobby-top-band .lobby-band-button {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 50% !important;
  background: rgba(12, 16, 14, .58) !important;
  color: #f0ead2 !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(6px);
}

/* 4.1b 子页面（天赋/精通/挑战/排行榜）面板右上角的返回 × 。
   位置钉在 #meta-shop（浅色面板）自己的右上角，不跟顶栏的设置齿轮挤在一起。
   历史样式层多次把按钮顶成常驻/改尺寸，所以显示、尺寸、定位都显式钉一遍。 */
#lobby.lobby-non-character-tab > #meta-shop {
  position: relative !important;
}

#lobby.lobby-non-character-tab > #meta-shop > #lobby-tab-close.lobby-panel-close {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, rgba(41, 74, 62, .92), rgba(18, 42, 34, .95)) !important;
  color: #f6f1dc !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(2, 12, 8, .28) !important;
  cursor: pointer !important;
}

#lobby.lobby-non-character-tab > #meta-shop > #lobby-tab-close.lobby-panel-close:hover {
  background: linear-gradient(180deg, rgba(58, 100, 84, .95), rgba(28, 58, 47, .96)) !important;
}

#lobby.lobby-non-character-tab > #meta-shop > #lobby-tab-close.lobby-panel-close:active {
  transform: scale(.94);
}

#lobby.lobby-non-character-tab > #meta-shop > #lobby-tab-close.lobby-panel-close.hidden {
  display: none !important;
}

/* 给 × 让出一条顶部安全带，避免它压到「可用金币」首行内容。
   用 #shop-content（3 个 id）压过 v193 里 leaderboards-open 的 padding 规则。 */
#lobby.lobby-non-character-tab > #meta-shop > #shop-content {
  padding-top: 42px !important;
}

/* 4.2 指南：顶栏右侧的小方块（? 在上面，文字在下面） */
#lobby > .lobby-top-band > #lobby-guide-entry.lobby-guide-entry {
  grid-column: 4 !important;
  grid-row: 1 !important;
  align-self: center !important;
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  gap: 1px !important;
  width: 44px !important;
  min-width: 0 !important;
  min-height: 42px !important;
  max-height: none !important;
  padding: 3px 2px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 11px !important;
  background: rgba(12, 16, 14, .58) !important;
  color: #eef6ee !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(6px);
}

#lobby > .lobby-top-band > #lobby-guide-entry > .lobby-guide-entry-icon {
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

/* 指南按钮只保留 (?) 图标，文字交给 title/aria-label（设计稿就是一个小方块图标）。 */
#lobby > .lobby-top-band > #lobby-guide-entry > span,
#lobby > .lobby-top-band > #lobby-guide-entry > span > strong { display: none !important; }
#lobby > .lobby-top-band > #lobby-guide-entry > b { display: none !important; }

/* 4.3 标签行：顶部居中的胶囊按钮组，半透明深灰磨砂玻璃 */
#lobby > .lobby-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 999px !important;
  background: rgba(12, 16, 14, .5) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .26) !important;
  backdrop-filter: blur(8px) saturate(1.1);
}

#lobby > .lobby-tabs > button {
  flex: 0 0 auto !important;
  min-width: 76px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: none !important;
  color: rgba(255, 247, 226, .82) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

#lobby > .lobby-tabs > button.active {
  background: linear-gradient(180deg, #ffd67a, #e8a72c) !important;
  color: #4a2b06 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
}

/* 4.4 排行榜：画面左侧中间偏上的悬浮圆角矩形（奖杯图标） */
#lobby > #lobby-character-view > .lobby-rail-head {
  top: 38% !important;
  right: auto !important;
  left: 10px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

#lobby > #lobby-character-view > .lobby-rail-head > .header-leaderboard-button,
#lobby.leaderboards-open > #lobby-character-view > .lobby-rail-head > .header-leaderboard-button,
body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-rail-head > .header-leaderboard-button {
  flex-direction: column !important;
  gap: 2px !important;
  min-height: 52px !important;
  min-width: 58px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 12px !important;
  background: rgba(12, 16, 14, .58) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 4px 12px rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(6px);
  font-size: 10px !important;
  line-height: 1.1 !important;
}

#lobby > #lobby-character-view > .lobby-rail-head > .header-leaderboard-button::before {
  content: "🏆";
  font-size: 18px;
  line-height: 1;
}

/* 4.5 平板 / 桌面：同一套结构，尺寸放大 */
@media (min-width: 761px) {
  #lobby > .lobby-top-band {
    max-width: 1080px;
    padding: 8px 12px !important;
  }

  #lobby > .lobby-top-band .lobby-identity-avatar { width: 38px; height: 38px; font-size: 15px; }
  #lobby > .lobby-top-band .lobby-identity-copy > strong { font-size: 16px; }
  #lobby > .lobby-top-band .lobby-identity-copy > small { font-size: 11px; }
  #lobby > .lobby-top-band .lobby-chip { min-height: 28px !important; font-size: 15px !important; }
  #lobby > .lobby-top-band .lobby-chip > i { width: 18px !important; height: 18px !important; font-size: 11px !important; }
  #lobby > .lobby-top-band .lobby-band-button { width: 32px !important; height: 32px !important; font-size: 16px !important; }
  #lobby > .lobby-top-band > #lobby-guide-entry.lobby-guide-entry { width: 52px !important; min-height: 48px !important; }
  #lobby > .lobby-top-band > #lobby-guide-entry > .lobby-guide-entry-icon { width: 22px !important; height: 22px !important; }

  #lobby > .lobby-tabs { padding: 5px !important; }
  #lobby > .lobby-tabs > button {
    min-width: 108px !important;
    min-height: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  #lobby > #lobby-character-view > .lobby-rail-head { top: 30% !important; left: 14px !important; }
  #lobby > #lobby-character-view > .lobby-rail-head > .header-leaderboard-button {
    min-width: 74px !important;
    min-height: 62px !important;
    font-size: 12px !important;
  }
  #lobby > #lobby-character-view > .lobby-rail-head > .header-leaderboard-button::before { font-size: 22px; }
}

/* 矮横屏（笔记本 900px 高）时排行榜不要贴到卡条 */
@media (min-width: 761px) and (max-height: 720px) {
  #lobby > #lobby-character-view > .lobby-rail-head { top: 26% !important; }
}

@media (max-width: 420px) {
  #lobby > .lobby-tabs > button {
    min-width: 0 !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   5. 大厅定稿（按用户标注）
     · 庭院实景铺满整个大厅画面（不再局限在舞台卡片里）
     · 舞台左列自上而下：地图分段 → 排行榜 → ? 指南
     · 左上角仍是头像 + 昵称；右上角仍是金币 / 命数 / 齿轮
   ========================================================================== */

/* 5.1 场景铺满：整块大厅背景用实景图，舞台卡片本身透明 */
/* 注意：#lobby 是 .screen-overlay（position: fixed），这里千万不要改 position，
   否则整块大厅会掉到视口外面（踩过一次）。深色渐变直接铺在背景图上即可。 */
#lobby {
  background-image:
    linear-gradient(180deg, rgba(4, 12, 8, .26) 0%, rgba(4, 12, 8, 0) 24%, rgba(4, 12, 8, 0) 62%, rgba(3, 10, 6, .3) 100%),
    var(--lobby-stage-image, url("assets/ui/courtyard-menu-bg-v55.webp")) !important;
  background-position: center, center 58% !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat !important;
  background-color: #0b1a12 !important;
}

/* 舞台卡片：透明，只保留内描边，让背后的实景透出来 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage,
#lobby #lobby-character-view > #character-list.solo-character-picker.character-roster > .solo-character-stage {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker {
  background: none !important;
}

#lobby > #lobby-character-view.lobby-character-view,
#lobby > #lobby-character-view {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 5.2 舞台左列：地图分段 → 排行榜 → 指南（自上而下，同一列） */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side {
  position: absolute;
  z-index: 9;
  top: 10px;
  left: 10px;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 7px;
}

/* 排行榜：圆角矩形，奖杯图标在上、文字在下 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-leaderboards.header-leaderboard-button,
#lobby.leaderboards-open #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-leaderboards.header-leaderboard-button,
body.toy-ranked-only #lobby:not(.boss-material-selection) #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-leaderboards.header-leaderboard-button {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  gap: 1px !important;
  width: 60px !important;
  min-width: 0 !important;
  min-height: 52px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 5px 6px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 12px !important;
  background: rgba(12, 16, 14, .58) !important;
  color: #f4f1e4 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 4px 12px rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(6px);
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-leaderboards.header-leaderboard-button::before {
  content: "🏆";
  font-size: 18px;
  line-height: 1;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-leaderboards.header-leaderboard-button.active {
  border-color: #ffd977 !important;
  box-shadow: 0 0 0 2px rgba(242, 200, 92, .24) !important;
}

/* 指南：小方块（? 在上、文字在下），和排行榜同一列 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-guide-entry.lobby-guide-entry {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  gap: 1px !important;
  width: 60px !important;
  min-width: 0 !important;
  min-height: 52px !important;
  max-height: none !important;
  padding: 3px 2px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 12px !important;
  background: rgba(12, 16, 14, .58) !important;
  color: #eef6ee !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 4px 12px rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(6px);
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-guide-entry > .lobby-guide-entry-icon {
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-guide-entry > span { display: grid !important; }
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-guide-entry > span > strong { font-size: 9px !important; font-weight: 800 !important; }
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-guide-entry > b { display: none !important; }

/* 地图分段控件窄一点，和排行榜/指南对齐成一条左列 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented {
  width: 60px;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id] {
  min-height: 24px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id] .map-region-copy > strong {
  font-size: 10px !important;
}

/* 5.3 卡条：滚轮 / 拖拽都能横向滑动（桌面端也能滑到后面的角色） */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster {
  cursor: grab;
  touch-action: pan-x;
  scroll-behavior: smooth;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* 5.4 平板 / 桌面：左列与浮层整体放大一档 */
@media (min-width: 761px) {
  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side {
    top: 16px;
    left: 16px;
    gap: 10px;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented,
  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-leaderboards.header-leaderboard-button,
  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-guide-entry.lobby-guide-entry {
    width: 76px !important;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-leaderboards.header-leaderboard-button,
  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-guide-entry.lobby-guide-entry {
    min-height: 64px !important;
    font-size: 12px !important;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-leaderboards.header-leaderboard-button::before {
    font-size: 24px;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id] {
    min-height: 28px !important;
    font-size: 11px !important;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented > [data-map-id] .map-region-copy > strong {
    font-size: 11px !important;
  }
}
/* ==========================================================================
   6. 大厅按钮风格统一（只作用于大厅；局内 HUD 与弹窗保持原样）
     · 次要按钮：半透明磨砂玻璃 + 细边 + 柔和投影 + 按下位移
     · 主行动按钮：金橙渐变（开始游戏 / 技能介绍）
     · 选中态：金色描边 + 玻璃底（不用大块金色填充）
   ========================================================================== */

/* 6.1 先撤掉上一版误伤局内的全局按钮规则 */
:root {
  --lobby-btn-radius: 10px;
  --lobby-btn-radius-lg: 12px;
  --lobby-btn-radius-pill: 999px;
  --lobby-btn-bg: rgba(12, 16, 14, .58);
  --lobby-btn-bg-hover: rgba(26, 34, 28, .72);
  --lobby-btn-bg-gold: rgba(255, 201, 84, .3);
  --lobby-btn-border: 1px solid rgba(255, 255, 255, .14);
  --lobby-btn-border-gold: 1px solid rgba(255, 214, 122, .62);
  --lobby-btn-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 3px 10px rgba(0, 0, 0, .28);
  --lobby-btn-shadow-press: inset 0 2px 6px rgba(0, 0, 0, .35);
  --lobby-btn-blur: blur(8px) saturate(1.1);
  --lobby-btn-ink: #f4f1e4;
  --lobby-btn-ink-gold: #ffeec0;
  --lobby-btn-transition: transform .12s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

/* 6.2 大厅里所有按钮的公共底座 */
#lobby button {
  border-radius: var(--lobby-btn-radius);
  border: var(--lobby-btn-border);
  background: var(--lobby-btn-bg);
  color: var(--lobby-btn-ink);
  box-shadow: var(--lobby-btn-shadow);
  backdrop-filter: var(--lobby-btn-blur);
  transition: var(--lobby-btn-transition);
  -webkit-tap-highlight-color: transparent;
}

#lobby button:hover { background: var(--lobby-btn-bg-hover); border-color: rgba(255, 255, 255, .24); }
#lobby button:active { transform: translateY(1px); box-shadow: var(--lobby-btn-shadow-press); }
#lobby button:focus-visible { outline: 2px solid rgba(255, 214, 122, .8); outline-offset: 2px; }

/* 6.3 顶栏：返回 / 详情 / 设置 / 金币 +号 = 圆形玻璃小按钮 */
#lobby .lobby-band-button,
#lobby .lobby-chip > button {
  border-radius: var(--lobby-btn-radius-pill) !important;
  background: var(--lobby-btn-bg) !important;
  border: var(--lobby-btn-border) !important;
  color: var(--lobby-btn-ink) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
}

/* 资源胶囊（金币 / 命数） */
#lobby .lobby-chip {
  border-radius: var(--lobby-btn-radius-pill) !important;
  border: var(--lobby-btn-border) !important;
  background: var(--lobby-btn-bg) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
  backdrop-filter: var(--lobby-btn-blur);
}

/* 6.4 标签页：胶囊，选中＝金色描边玻璃（不用大块金填充） */
#lobby > .lobby-tabs > button {
  border-radius: var(--lobby-btn-radius-pill) !important;
  border: 0 !important;
  background: none !important;
  color: rgba(255, 247, 226, .82) !important;
  box-shadow: none !important;
}

#lobby > .lobby-tabs > button:hover {
  background: rgba(255, 255, 255, .08) !important;
}

#lobby > .lobby-tabs > button.active {
  border: var(--lobby-btn-border-gold) !important;
  background: rgba(255, 214, 122, .16) !important;
  color: var(--lobby-btn-ink-gold) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 2px 8px rgba(0, 0, 0, .28) !important;
  text-shadow: none !important;
}

/* 6.5 舞台左列：地图分段 / 排行榜 / 指南 = 同一套玻璃方块 */
#lobby .lobby-map-segmented {
  border-radius: var(--lobby-btn-radius-lg) !important;
  border: var(--lobby-btn-border) !important;
  background: var(--lobby-btn-bg) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
  backdrop-filter: var(--lobby-btn-blur);
}

#lobby .lobby-map-segmented > [data-map-id] {
  border-radius: var(--lobby-btn-radius) !important;
  border: 0 !important;
  background: none !important;
  color: rgba(238, 240, 222, .8) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#lobby .lobby-map-segmented > [data-map-id]:hover {
  background: rgba(255, 255, 255, .08) !important;
}

#lobby .lobby-map-segmented > [data-map-id].active {
  border: var(--lobby-btn-border-gold) !important;
  background: rgba(255, 214, 122, .18) !important;
  color: var(--lobby-btn-ink-gold) !important;
}

#lobby .lobby-map-segmented > [data-map-id].active .map-region-copy > strong {
  color: var(--lobby-btn-ink-gold) !important;
}

#lobby #lobby-leaderboards.header-leaderboard-button,
#lobby #lobby-guide-entry.lobby-guide-entry {
  border-radius: var(--lobby-btn-radius-lg) !important;
  border: var(--lobby-btn-border) !important;
  background: var(--lobby-btn-bg) !important;
  color: var(--lobby-btn-ink) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
  backdrop-filter: var(--lobby-btn-blur);
}

#lobby #lobby-leaderboards.header-leaderboard-button:hover,
#lobby #lobby-guide-entry.lobby-guide-entry:hover {
  background: var(--lobby-btn-bg-hover) !important;
  border-color: rgba(255, 255, 255, .26) !important;
}

#lobby #lobby-leaderboards.header-leaderboard-button.active {
  border: var(--lobby-btn-border-gold) !important;
  color: var(--lobby-btn-ink-gold) !important;
}

/* 6.6 立绘下方的技能介绍胶囊 */
#lobby #lobby-skill-info-toggle.solo-stage-skill-info {
  border-radius: var(--lobby-btn-radius-pill) !important;
  border: var(--lobby-btn-border-gold) !important;
  background: rgba(255, 214, 122, .16) !important;
  color: var(--lobby-btn-ink-gold) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
  backdrop-filter: var(--lobby-btn-blur);
}

#lobby #lobby-skill-info-toggle.solo-stage-skill-info:hover {
  background: rgba(255, 214, 122, .26) !important;
}

/* 6.7 角色卡：玻璃圆角块，选中＝金色描边；锁定卡保持灰化 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option {
  border-radius: var(--lobby-btn-radius-lg) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  /* 卡面用浅一档的玻璃，保证角色小图看得清；名字条压深，保持和其余按钮同一质感。 */
  background: linear-gradient(180deg, rgba(52, 70, 58, .74), rgba(20, 32, 24, .86)) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
  backdrop-filter: blur(4px);
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option:hover {
  border-color: rgba(255, 255, 255, .3) !important;
  background: rgba(22, 30, 24, .72) !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option.active {
  border: var(--lobby-btn-border-gold) !important;
  background: rgba(30, 34, 26, .78) !important;
  box-shadow: 0 0 0 2px rgba(255, 214, 122, .22), var(--lobby-btn-shadow) !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option > .character-card-label {
  background: rgba(6, 12, 9, .72) !important;
  color: #f2f0e0 !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option.active > .character-card-label {
  background: rgba(255, 214, 122, .9) !important;
  color: #46290a !important;
}

/* 卡条左右箭头 */
#lobby .solo-rail-nav {
  border-radius: var(--lobby-btn-radius-pill) !important;
  border: var(--lobby-btn-border) !important;
  background: var(--lobby-btn-bg) !important;
  color: var(--lobby-btn-ink-gold) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
  backdrop-filter: var(--lobby-btn-blur);
}

/* 6.8 底部双 CTA：金色主行动 + 绿色互动，都保持同一圆角/投影语言 */
#lobby #lobby-character-view > .lobby-footer > button {
  border-radius: var(--lobby-btn-radius-lg) !important;
  box-shadow: 0 4px 0 rgba(38, 22, 8, .5), 0 6px 16px rgba(0, 0, 0, .28) !important;
  transition: var(--lobby-btn-transition);
}

#lobby #lobby-character-view > .lobby-footer > button:active {
  transform: translateY(2px);
  box-shadow: var(--lobby-btn-shadow-press) !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-start {
  border: var(--lobby-btn-border-gold) !important;
  background: linear-gradient(180deg, #ffd67a, #e8a72c) !important;
  color: #43290a !important;
}

#lobby #lobby-character-view > .lobby-footer > #toy-coin-reward,
#lobby #lobby-character-view > .lobby-footer > #taptap-coin-ad,
#lobby #lobby-character-view > .lobby-footer > #lobby-multiplayer {
  border: 1px solid rgba(20, 60, 32, .8) !important;
}

/* 6.9 技能介绍弹层 */
#lobby-skill-info .lobby-skill-info-heading > button,
#lobby-skill-info .lobby-skill-info-close {
  border-radius: var(--lobby-btn-radius-lg) !important;
  border: var(--lobby-btn-border) !important;
  background: var(--lobby-btn-bg) !important;
  color: var(--lobby-btn-ink) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
}

#lobby-skill-info .lobby-skill-info-close {
  border: var(--lobby-btn-border-gold) !important;
  background: linear-gradient(180deg, #ffd67a, #e8a72c) !important;
  color: #43290a !important;
}

/* 6.10 指南弹层里的卡片按钮 */
#lobby-guide-content button.lobby-guide-card {
  border-radius: var(--lobby-btn-radius-lg) !important;
  border: var(--lobby-btn-border) !important;
  background: rgba(12, 18, 15, .62) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
}

/* ==========================================================================
   7. 局内贴边经验条：蓝色
   ========================================================================== */
#hud > .hud-top-band > .xp-track > #xp-fill {
  background: linear-gradient(90deg, #7fd4ff 0%, #3f9ae8 55%, #2668c8 100%) !important;
  box-shadow: 0 0 12px rgba(90, 176, 255, .6) !important;
}

#hud > .hud-top-band > .xp-track {
  background: rgba(6, 12, 20, .9) !important;
}

#hud > .hud-top-band > .xp-heading {
  color: #e8f4ff !important;
}

/* ==========================================================================
   8. 大厅收尾（按用户标注）
     · 实景保持原色（不再叠任何绿色/深色滤镜），并铺满整个画面
     · 去掉舞台卡片的外框与内阴影（图二圈的方框）
     · 排行榜移到标签行下方、画面左上角；控件铺开到整屏宽度
   ========================================================================== */

/* 8.1 背景：原色实景，只保留极轻的上下压暗以便读数 */
#lobby {
  background-image: var(--lobby-stage-image, url("assets/ui/courtyard-menu-bg-v55.webp")) !important;
  background-position: center 58% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: #17503f !important;
}

/* 8.2 去掉舞台卡片与角色视图的一切边框/底色/内阴影 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage,
#lobby #lobby-character-view > #character-list.solo-character-picker.character-roster > .solo-character-stage {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#lobby > #lobby-character-view.lobby-character-view,
#lobby > #lobby-character-view {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker {
  border: 0 !important;
  box-shadow: none !important;
}

/* 8.3 控件铺开到整屏：顶栏/标签行与画面同宽 */
#lobby > .lobby-top-band,
#lobby > .lobby-tabs {
  width: 100% !important;
  max-width: none !important;
}

#lobby > .lobby-tabs {
  justify-content: space-between !important;
  gap: 2px !important;
}

#lobby > .lobby-tabs > button {
  flex: 1 1 0 !important;
  text-align: center !important;
}

/* 8.4 舞台左列：地图分段 → 排行榜 → 指南（紧贴左侧内容带） */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side {
  top: 10px;
  left: 10px;
  gap: 7px;
}

/* 8.5 底部区：卡条与 CTA 铺开到画面宽度 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster {
  left: 0 !important;
  right: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(5, 13, 9, 0) 0%, rgba(4, 11, 8, .5) 38%, rgba(4, 11, 8, .66) 100%) !important;
}

#lobby #lobby-character-view > .lobby-footer {
  left: 0 !important;
  right: 0 !important;
  max-width: none !important;
  gap: 8px !important;
}

#lobby #lobby-character-view > .lobby-footer > button {
  flex: 1 1 0 !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-start {
  flex: 1.6 1 0 !important;
}

/* 8.6 平板 / 桌面：内容带留边，但控件仍占满可用宽度 */
@media (min-width: 761px) {
  #lobby > .lobby-top-band { padding: 8px 14px !important; }
  #lobby > .lobby-tabs { padding: 5px 8px !important; }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side {
    top: 16px;
    left: 16px;
    gap: 10px;
  }

  #lobby #lobby-character-view > .lobby-footer {
    left: 16px !important;
    right: 16px !important;
    bottom: 12px !important;
  }
}

/* ==========================================================================
   9. 大厅收尾（按用户最新标注）
     · 实景保持原色（背景图不再叠任何滤镜），并铺满整个画面
     · 去掉舞台卡片/角色视图的外框、内阴影
     · 排行榜移到标签行正下方（画面左上偏中）
     · 控件铺开到整屏宽度
     · 角色卡条横滑更顺滑
   ========================================================================== */

/* 9.1 背景：只用原图，不叠任何颜色滤镜。
   注意 styles-v38.css 给 #lobby 写过 ackground-blend-mode: soft-light，
   会把实景和底色混成深绿，这里必须显式复位。 */
#lobby {
  background-image: var(--lobby-stage-image, url("assets/ui/courtyard-menu-bg-v55.webp")) !important;
  background-position: center 58% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: #14453a !important;
  background-blend-mode: normal !important;
}

/* 9.2 去掉方框：舞台卡片与角色视图都不再有边框/内阴影/圆角 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage,
#lobby #lobby-character-view > #character-list.solo-character-picker.character-roster > .solo-character-stage,
#lobby > #lobby-character-view.lobby-character-view,
#lobby > #lobby-character-view,
#lobby #lobby-character-view > #character-list.solo-character-picker {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* 9.3 排行榜：标签行正下方、画面左上（在舞台之上，不随舞台左列排） */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > #lobby-leaderboards.solo-stage-leaderboard,
#lobby.leaderboards-open #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > #lobby-leaderboards.solo-stage-leaderboard,
body.toy-ranked-only #lobby:not(.boss-material-selection) #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > #lobby-leaderboards.solo-stage-leaderboard {
  position: absolute !important;
  z-index: 10 !important;
  inset: auto !important;
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 32px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: var(--lobby-btn-radius-pill) !important;
  border: var(--lobby-btn-border) !important;
  background: var(--lobby-btn-bg) !important;
  color: var(--lobby-btn-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  box-shadow: var(--lobby-btn-shadow) !important;
  backdrop-filter: var(--lobby-btn-blur);
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > #lobby-leaderboards.solo-stage-leaderboard::before {
  content: "🏆";
  font-size: 14px;
  line-height: 1;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > #lobby-leaderboards.solo-stage-leaderboard.active {
  border: var(--lobby-btn-border-gold) !important;
  color: var(--lobby-btn-ink-gold) !important;
}

/* 9.4 指南留在舞台左列（与地图分段同一列） */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side {
  top: 10px;
  left: 10px;
  gap: 7px;
}

/* 9.5 控件铺开到整屏 */
#lobby > .lobby-top-band,
#lobby > .lobby-tabs {
  width: 100% !important;
  max-width: none !important;
}

#lobby > .lobby-tabs {
  justify-content: space-between !important;
  gap: 2px !important;
}

#lobby > .lobby-tabs > button {
  flex: 1 1 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster {
  left: 0 !important;
  right: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(5, 13, 9, 0) 0%, rgba(4, 11, 8, .5) 38%, rgba(4, 11, 8, .66) 100%) !important;
}

#lobby #lobby-character-view > .lobby-footer {
  left: 0 !important;
  right: 0 !important;
  max-width: none !important;
  gap: 8px !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-multiplayer,
#lobby #lobby-character-view > .lobby-footer > #toy-coin-reward,
#lobby #lobby-character-view > .lobby-footer > #taptap-coin-ad {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}
#lobby #lobby-character-view > .lobby-footer > #lobby-start {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}
#lobby #lobby-character-view > .lobby-footer > button > span {
  white-space: nowrap !important;
  overflow: visible !important;
}
/* 底部 ICP 备案号：进入游戏后（以及大厅里）不再显示，只在主菜单等首页保留。 */
#icp-record,
#icp-record-menu {
  z-index: 12;
}
body.game-started #icp-record,
body.game-started #icp-record-menu,
body:has(#hud:not(.hidden)) #icp-record,
body:has(#hud:not(.hidden)) #icp-record-menu,
body:has(#lobby:not(.hidden)) #icp-record,
body:has(#lobby:not(.hidden)) #icp-record-menu {
  display: none !important;
}

/* 9.6 卡条横滑手感：去掉平滑滚动（会拖慢拖拽跟随）、打开合成层 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster {
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain !important;
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster.is-dragging {
  scroll-snap-type: none !important;
}

/* 9.7 平板 / 桌面 */
@media (min-width: 761px) {
  #lobby > .lobby-top-band { padding: 8px 14px !important; }
  #lobby > .lobby-tabs { padding: 5px 8px !important; }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side {
    top: 16px;
    left: 16px;
    gap: 10px;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > #lobby-leaderboards.solo-stage-leaderboard {
    top: 14px !important;
    min-height: 36px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > #lobby-leaderboards.solo-stage-leaderboard::before {
    font-size: 16px;
  }

  #lobby #lobby-character-view > .lobby-footer {
    left: 16px !important;
    right: 16px !important;
    bottom: 12px !important;
  }
}

/* ==========================================================================
   10. 大厅微调（按最新标注）
     · 地图分段 + 指南贴左侧显示
   ========================================================================== */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side {
  left: 2px !important;
  top: 4px !important;
  gap: 5px !important;
}

/* 地图分段更窄一点，避免压到立绘 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side .lobby-map-segmented {
  width: 58px !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .lobby-stage-side > #lobby-guide-entry.lobby-guide-entry {
  width: 58px !important;
  min-height: 50px !important;
}

/* 11. 卡条横滑：Pointer Events 全权接管（touch-action: none 防止浏览器抢手势），
   拖拽期间关掉滚动吸附与一切过渡，保证 1:1 跟手。 */
/* scroll-snap 必须用 !important 关掉：styles-v193-ui.css / styles-v60.css 里有一条
   更具体的 scroll-snap-type: x proximity !important，会把手势位置吸附回去，
   表现就是「滑一下只走一点点」。 */
#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster {
  --rail-drag-x: 0px;
  transform: none;
  overflow-anchor: none;
  touch-action: none;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: auto;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster > .character-option {
  scroll-snap-align: none !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

#lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-roster.is-dragging > .character-option {
  transition: none !important;
}

/* ==========================================================================
   12. 页脚备案信息：公安备案（图标在前、编号在后）+ ICP 备案
   ========================================================================== */

#site-records {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 12px;
  max-width: min(92vw, 520px);
  pointer-events: auto;
}

#site-records > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 249, 233, .82);
  font: 12px/1.3 system-ui, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  white-space: nowrap;
}

#site-records > a:hover,
#site-records > a:focus-visible {
  color: #fff9e9;
  text-decoration: underline;
}

/* 公安备案图标：编号左侧，尺寸与文字行高对齐 */
#site-records > #police-record > img {
  display: block;
  width: 16px;
  height: 18px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* 旧的独立 #icp-record 定位规则让位给 #site-records 容器（菜单页副本 -menu 同样复位） */
#icp-record,
#icp-record-menu {
  position: static;
  right: auto;
  bottom: auto;
  text-shadow: inherit;
}

/* 进入游戏后（以及大厅内）不显示备案信息，只在主菜单等首页保留 */
#site-records { z-index: 12; }
body.game-started #site-records,
body:has(#hud:not(.hidden)) #site-records,
body:has(#lobby:not(.hidden)) #site-records {
  display: none !important;
}

@media (max-width: 420px) {
  #site-records {
    max-width: 96vw;
    gap: 3px 8px;
  }

  #site-records > a { font-size: 10px; }
  #site-records > #police-record > img { width: 14px; height: 16px; }
}

/* ==========================================================================
   13. 舞台与实景对齐（手机上的「两层」接缝）+ 移动端排版收口
   ========================================================================== */

/* 13.1 图层接缝：舞台卡片自己有 6px inset（旧样式），于是角色画布比整屏实景窄
   12px，左右各留一条缝，看起来就像「技能被切成两个图层」。这里把舞台拉满，
   和 #lobby 的整屏实景完全对齐。 */
#lobby #lobby-character-view > #character-list.solo-character-picker > .solo-character-stage,
#lobby #lobby-character-view > #character-list.solo-character-picker.character-roster > .solo-character-stage {
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  width: auto !important;
  border-radius: 0 !important;
}

#lobby #lobby-character-view > #character-list.solo-character-picker,
#lobby > #lobby-character-view.lobby-character-view {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 13.2 手机上角色太大：给画布一个安全高度，保证名牌 + 专属技能胶囊始终在屏内 */
@media (max-width: 760px) {
  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-character-stage-preview {
    max-height: calc(100% - 150px) !important;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-stage-plate {
    bottom: 158px !important;
  }

  #lobby #lobby-character-view > #character-list.solo-character-picker .solo-character-stage > .solo-stage-plate .solo-stage-skill {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
}

/* 13.3 平板/桌面：舞台左右只留内容边距，其余交给整屏实景 */
@media (min-width: 761px) {
  #lobby #lobby-character-view > #character-list.solo-character-picker > .solo-character-stage {
    inset: 0 !important;
  }
}

/* ==========================================================================
   14. 排行榜页按钮的反馈（选中态 / 按下 / 悬停）
   第 6 节的 `#lobby button { background: ... }` 是 ID 权重，把历史层里的
   `.leaderboard-modes button.active`（class 权重）压掉了 —— 结果「单人/多人排行」
   和「总榜/月榜/周榜/日榜」点了之后没有任何视觉变化，玩家以为按钮坏了。
   这里用同权重（#lobby + 两个 class）补回选中态，并统一成大厅的金色强调。
   ========================================================================== */
#lobby .leaderboard-modes > button,
#lobby .leaderboard-map-modes > button,
#lobby .leaderboard-period-modes > button,
#lobby .leaderboard-source-modes > button,
#lobby .leaderboard-refresh {
  border-radius: var(--lobby-btn-radius-pill) !important;
  border: var(--lobby-btn-border) !important;
  background: var(--lobby-btn-bg) !important;
  color: var(--lobby-btn-ink) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
  transition: var(--lobby-btn-transition) !important;
}

/* 地图切换（庭院 / 熔岩）挪到标题行右侧：「B站排行榜」标题下面只剩
   「单人/多人」与「总/月/周/日」两排，少一排、层级更清楚。
   注意 toy 包不会打 .leaderboard-shell-toy（那是给服务器包模仿 toy 版式用的），
   所以这里用 body.toy-ranked-only 定位。 */
#lobby .leaderboard-heading-side {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

#lobby .leaderboard-shell > .leaderboard-heading .leaderboard-map-modes {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 3px !important;
  width: auto !important;
  border-radius: 999px !important;
  background: rgba(6, 44, 40, .3) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22) !important;
}

#lobby .leaderboard-shell > .leaderboard-heading .leaderboard-map-modes > button {
  min-width: 46px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, .78) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

#lobby .leaderboard-shell > .leaderboard-heading .leaderboard-map-modes > button.active {
  background: #f2e3bd !important;
  color: #5c4a1c !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important;
  text-shadow: none !important;
}

#lobby .leaderboard-modes > button:hover,
#lobby .leaderboard-map-modes > button:hover,
#lobby .leaderboard-period-modes > button:hover,
#lobby .leaderboard-source-modes > button:hover,
#lobby .leaderboard-refresh:hover {
  background: var(--lobby-btn-bg-hover) !important;
  border-color: rgba(255, 255, 255, .26) !important;
}

#lobby .leaderboard-modes > button:active,
#lobby .leaderboard-map-modes > button:active,
#lobby .leaderboard-period-modes > button:active,
#lobby .leaderboard-source-modes > button:active,
#lobby .leaderboard-refresh:active {
  transform: translateY(1px) !important;
  box-shadow: var(--lobby-btn-shadow-press) !important;
}

#lobby .leaderboard-modes > button.active,
#lobby .leaderboard-map-modes > button.active,
#lobby .leaderboard-period-modes > button.active,
#lobby .leaderboard-source-modes > button.active {
  border: 1px solid rgba(150, 104, 12, .85) !important;
  background: rgba(255, 201, 84, .34) !important;
  color: #6a4708 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
  box-shadow: var(--lobby-btn-shadow), 0 0 0 1px rgba(255, 214, 122, .25) inset !important;
  font-weight: 900 !important;
}

/* 卡片里的「打开榜单」类按钮与卡片本体 */
#lobby .leaderboard-card > button {
  border-radius: var(--lobby-btn-radius) !important;
  border: var(--lobby-btn-border) !important;
  background: var(--lobby-btn-bg) !important;
  color: var(--lobby-btn-ink) !important;
  box-shadow: var(--lobby-btn-shadow) !important;
}

#lobby .leaderboard-card > button:active {
  transform: translateY(1px) !important;
  box-shadow: var(--lobby-btn-shadow-press) !important;
}

/* ==========================================================================
   14.1 v241:「游戏服务器」排行榜对齐 B站 toy 版式
   v98 里那一整套 toy 排行榜版式全部挂在 `.toy-ranked-only` 下，服务器包不带这个
   类，所以「游戏服务器」榜一直是两列紧凑小卡 + 980px 窄壳。这里把等效声明复制一份，
   只认 game.js 在非 toy 包打上的 `.leaderboard-shell-toy` 标记类；toy 包不打这个类，
   完全不受影响（零回归）。按钮配色不用复制 —— 第 14 节已经对两个包统一了。
   ========================================================================== */
#lobby .leaderboard-shell.leaderboard-shell-toy {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  align-content: start !important;
  overflow-y: auto !important;
  padding-inline: 0 !important;
}

#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-heading,
#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-period-modes,
#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-source-modes,
#lobby .leaderboard-shell.leaderboard-shell-toy > .toy-leaderboard-note,
#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-grid {
  width: min(560px, calc(100% - 28px)) !important;
  max-width: 560px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-heading {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  align-items: center !important;
}

#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-heading > div {
  grid-column: 2 !important;
  text-align: center !important;
}

#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-heading > .leaderboard-refresh {
  grid-column: 3 !important;
}

/* 刷新按钮：toy 是浅底方角小钮（v166 的 `.toy-ranked-only #lobby .leaderboard-refresh`），
   不复制的话服务器包会落回第 14 节的深色胶囊圆钮。 */
#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-heading > .leaderboard-refresh {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid #7a9f96 !important;
  border-radius: 5px !important;
  color: #315752 !important;
  background: #edf7f3 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-heading > .leaderboard-refresh:hover:not(:disabled) {
  border-color: #4e8276 !important;
  color: #173f39 !important;
  background: #d9eee7 !important;
}

/* 周期行：toy 是 4 等分网格（宽度随上面那条 560 的组一起走，所以不在这里写 width）。 */
#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-period-modes {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 12px auto 8px !important;
  padding: 0 !important;
}

#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-period-modes > button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#lobby .leaderboard-shell.leaderboard-shell-toy > .toy-leaderboard-note {
  margin: 0 !important;
  padding: 0 16px 10px !important;
  color: #53716b !important;
  font-size: 12px !important;
  text-align: center !important;
}

#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: center !important;
  justify-items: stretch !important;
  align-content: start !important;
  gap: 12px !important;
  margin: 0 auto !important;
  padding: 4px 0 18px !important;
}

#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-grid > .leaderboard-card {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-grid > .leaderboard-card > ol {
  min-height: 138px;
}

@media (max-width: 760px) {
  #lobby .leaderboard-shell.leaderboard-shell-toy > .leaderboard-card > ol { min-height: 0; }
}
/* ==========================================================================
   15. 主菜单备案信息：一上一下两行，居中放在菜单底部
   · 原来主菜单里有两份：面板底部的 .site-record（居中）＋右下角浮动的
     #site-records（图标在前）→ 视觉上重复，用户要求合并成"一上一下、居中"。
   · 现在：主菜单用 .site-record（两行居中，公安备案在上、ICP 在下），
     右下角浮动的 #site-records 在菜单页隐藏，只在真正的"首屏外"页面保留。
   ========================================================================== */

#intro:not(.hidden) .site-record {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 10px auto 0 !important;
  text-align: center !important;
}

#intro:not(.hidden) .site-record > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: rgba(58, 46, 24, .82) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

#intro:not(.hidden) .site-record > a:hover,
#intro:not(.hidden) .site-record > a:focus-visible {
  color: #2f2412 !important;
  text-decoration: underline !important;
}

#intro:not(.hidden) .site-record > #police-record-menu > img {
  display: block !important;
  width: 14px !important;
  height: 16px !important;
  object-fit: contain !important;
}

/* 菜单页不要右下角那份浮动备案（避免重复），其它页面仍然显示 */
body:has(#intro:not(.hidden)) #site-records {
  display: none !important;
}

@media (max-width: 420px) {
  #intro:not(.hidden) .site-record > a { font-size: 10px !important; }
  #intro:not(.hidden) .site-record > #police-record-menu > img { width: 12px !important; height: 14px !important; }
}

/* TapTap 服务面板（添加到桌面 / 云存档 / 账号）。入口按钮默认 hidden，
   只有 TapTap 包（body.taptap-build）会显示，所以这段样式对其它包无副作用。 */
#taptap-services .taptap-services-panel { width: min(460px, calc(100vw - 32px)); }
#taptap-services .taptap-service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(229, 197, 91, .18);
}
#taptap-services .taptap-service-copy { display: grid; gap: 3px; min-width: 0; }
#taptap-services .taptap-service-copy strong { font-weight: 500; }
#taptap-services .taptap-service-copy small { color: #a9b6a7; font-size: 12px; line-height: 1.4; }
#taptap-services .taptap-service-actions { display: flex; gap: 6px; flex: 0 0 auto; }
#taptap-services .taptap-services-message { min-height: 18px; margin: 10px 0 0; color: #f0d977; font-size: 12px; line-height: 1.5; }
#taptap-offline-notice {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 9999;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 8px 14px;
  border: 1px solid rgba(229, 197, 91, .45);
  border-radius: 6px;
  color: #fff3d0;
  background: rgba(28, 36, 30, .94);
  font: 12px/1.5 system-ui, sans-serif;
  text-align: center;
}

/* ==========================================================================
   14.2 v246：TapTap 官方排行榜 ——「该周期还没建榜」的占位卡
   官方一个榜单只能有一种周期，所以总榜/月榜/周榜/日榜各是一个独立榜单。
   后台只建了其中几个时，缺的那张卡给一条明确的开启指引，而不是拿官方错误码吓人。
   ========================================================================== */
#lobby .leaderboard-card.leaderboard-card-locked { opacity: .8; }
#lobby .leaderboard-card.leaderboard-card-locked h3 > span { background: #cdd8d2; color: #4a5c53; }
#lobby .leaderboard-card li.leaderboard-empty-row {
  justify-content: center;
  color: #7f8f86;
  font-size: 12px;
}
#lobby .leaderboard-card li.leaderboard-error-row { color: #b0522d; }
#lobby .leaderboard-card li.leaderboard-error-row span { min-width: 0; white-space: normal; text-align: left; }

/* ==========================================================================
   10. 联机房间选人舞台：与大厅共用同一张庭院实景（v55）
   房间舞台原本只有一层深绿底，角色站上去没有地面参照，换人时下半身像悬着。
   换成与大厅同一张图后，脚下的石板地一致 —— 脚线（信息条顶边）也正好落在
   图片 81% 高度的石板区（推导见 .workbuddy/memory/2026-09-16.md）。
   本文件是最后加载的样式表，但注意 styles-v193-ui.css 末尾的
   "v222-stage-visual-authoritative" 用
   `#multiplayer-lobby.room-active .room-character-select .room-character-stage`
   把底色钉成 #10251f 且带 !important（权重 1,3,0）。想盖掉它必须**多用一层 id**
   （这里用 #room-character-select，权重 2,2,0，id 数更多，不靠文件顺序）。
   ========================================================================== */
#multiplayer-lobby.room-active #room-character-select .room-character-stage {
  background-color: #16301f !important;
  background-image: var(--lobby-stage-image, url("assets/ui/courtyard-menu-bg-v55.webp")) !important;
  background-size: cover !important;
  background-position: center 62% !important;
  background-repeat: no-repeat !important;
}

/* ==========================================================================
   16. 无尽模式轮间面板（v251）
   ========================================================================== */
#endless-panel {
  display: grid !important;
  place-items: center !important;
  background: rgba(6, 14, 10, .62) !important;
}

#endless-panel.hidden { display: none !important; }

#endless-panel .endless-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(92vw, 460px) !important;
  padding: 22px 20px 18px !important;
  border-radius: 18px !important;
  border: 2px solid rgba(122, 79, 26, .85) !important;
  background: linear-gradient(180deg, #fdf4dd 0%, #f3e6c6 100%) !important;
  box-shadow: 0 18px 40px rgba(4, 10, 6, .5) !important;
  text-align: center !important;
}

#endless-panel .endless-kicker {
  margin: 0 !important;
  color: #8a6a34 !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
}

#endless-panel .endless-title {
  margin: 0 !important;
  color: #4a3208 !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
}

#endless-panel .endless-title strong {
  color: #c67512 !important;
  font-size: 38px !important;
}

/* 轮次规则：标题与说明各占一行，避免叠字 */
#endless-panel .endless-rule {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px dashed rgba(140, 96, 30, .55) !important;
  background: rgba(255, 248, 226, .9) !important;
}

#endless-panel .endless-rule b {
  color: #a4580c !important;
  font-size: 20px !important;
  letter-spacing: .08em !important;
}

#endless-panel .endless-rule span {
  color: #6a5330 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#endless-panel .endless-stats {
  display: flex !important;
  justify-content: center !important;
  gap: 26px !important;
  width: 100% !important;
}

#endless-panel .endless-stats div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
}

#endless-panel .endless-stats strong {
  color: #4a3208 !important;
  font-size: 22px !important;
}

#endless-panel .endless-stats span {
  color: #8a6a34 !important;
  font-size: 11px !important;
}

#endless-panel .endless-hint {
  margin: 0 !important;
  color: #8a6a34 !important;
  font-size: 11px !important;
}

#endless-panel .endless-actions {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
}

#endless-panel .endless-actions > button {
  flex: 1 1 0 !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(84, 46, 10, .9) !important;
  background: linear-gradient(180deg, #ffc85c 0%, #f0891f 100%) !important;
  color: #4d2707 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 0 rgba(84, 44, 8, .7) !important;
}

#endless-panel .endless-actions > #endless-quit {
  background: linear-gradient(180deg, #efe1bd 0%, #cdb98c 100%) !important;
  color: #5a4520 !important;
  border-color: rgba(120, 94, 44, .8) !important;
  box-shadow: 0 4px 0 rgba(96, 74, 34, .5) !important;
}

/* 无尽模式入口所在的一行必须走 flex：toy 包下 footer 会被历史样式改成 grid，
   于是「开始游戏」被挤到 145px（实测）。这里用同等特异性把布局钉回 flex。 */
body #lobby #lobby-character-view > .lobby-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

body #lobby #lobby-character-view > .lobby-footer > #lobby-start {
  flex: 1 1 auto !important;
  min-width: 150px !important;
}

/* toy 包下 styles-v193-ui.css 用 [data-toy-reward-visible] 的 grid 规则压过了上面两条
   （同为 !important 时按特异性取胜），于是 footer 变成两列 grid、「开始游戏」被挤到 145px。
   这里用同等特异性的 flex 规则钉回来。 */
body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer > #lobby-start {
  flex: 1 1 auto !important;
  min-width: 150px !important;
}

/* 无尽模式开关（v251）：做成「开始游戏」按钮里的一个圆角开关。
   为什么不单独一个按钮：toy 包的 footer 是两列 grid，加第三个按钮会把主按钮挤到 145px。 */
#lobby #lobby-character-view > .lobby-footer > #lobby-start > #lobby-endless-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 30px !important;
  margin-right: 6px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(70, 40, 10, .75) !important;
  background: rgba(64, 38, 12, .38) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .32) !important;
  font-style: normal !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-start > #lobby-endless-toggle > b {
  color: rgba(255, 240, 205, .72) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-start > #lobby-endless-toggle.on {
  border-color: rgba(30, 92, 54, .9) !important;
  background: linear-gradient(180deg, #7fe08d 0%, #35a75c 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px rgba(120, 240, 160, .28) !important;
}

#lobby #lobby-character-view > .lobby-footer > #lobby-start > #lobby-endless-toggle.on > b {
  color: #0b3a1c !important;
}

body.toy-ranked-only #lobby:not(.boss-material-selection) > #lobby-character-view > .lobby-footer > #lobby-start > #lobby-endless-toggle {
  width: 50px !important;
  height: 28px !important;
  margin-right: 4px !important;
}

/* 无尽开关挪到舞台地图栏右侧（v251 二次调整）：
   地图（庭院 / 熔岩）与无尽开关同一行，放在角色立绘左上角。 */
#lobby #lobby-character-view .lobby-stage-side .lobby-map-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#lobby #lobby-character-view .lobby-stage-side .lobby-map-row > .lobby-map-segmented {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

#lobby .lobby-endless-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

/* 开关本体：竖排「无尽 / 模式」，跟地图按钮同高 */
#lobby .lobby-endless-slot > #lobby-endless-toggle {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 3px 4px !important;
  border-radius: 14px !important;
  border: 2px solid rgba(70, 40, 10, .72) !important;
  background: linear-gradient(180deg, rgba(70, 46, 18, .58) 0%, rgba(46, 28, 8, .68) 100%) !important;
  box-shadow: 0 3px 0 rgba(28, 16, 4, .55), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  font-style: normal !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .1s ease !important;
}

#lobby .lobby-endless-slot > #lobby-endless-toggle > b {
  color: rgba(255, 238, 200, .78) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .02em !important;
}

#lobby .lobby-endless-slot > #lobby-endless-toggle > b + b,
#lobby .lobby-endless-slot > #lobby-endless-toggle > small {
  color: rgba(255, 232, 190, .6) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

#lobby .lobby-endless-slot > #lobby-endless-toggle:active {
  transform: translateY(1px) !important;
}

#lobby .lobby-endless-slot > #lobby-endless-toggle.on {
  border-color: rgba(28, 96, 52, .92) !important;
  background: linear-gradient(180deg, #8ce89b 0%, #2fa457 100%) !important;
  box-shadow: 0 3px 0 rgba(16, 60, 30, .6), 0 0 0 2px rgba(126, 240, 164, .3) !important;
}

#lobby .lobby-endless-slot > #lobby-endless-toggle.on > b,
#lobby .lobby-endless-slot > #lobby-endless-toggle.on > small {
  color: #0a3618 !important;
}

/* 开关已经不在「开始游戏」里了，把之前那条按钮内的样式让位（保留 start-label 布局） */
#lobby #lobby-character-view > .lobby-footer > #lobby-start > #lobby-start-label {
  flex: 1 1 auto !important;
  text-align: center !important;
}

/* ==========================================================================
   17. QQ 群面板：复制群号 / 保存二维码（v251）
   ========================================================================== */
#qq-group-overlay .qq-group-actions {
  display: flex !important;
  gap: 10px !important;
  width: min(100%, 320px) !important;
  margin: 14px auto 0 !important;
}

#qq-group-overlay .qq-group-actions > button {
  flex: 1 1 0 !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(120, 86, 26, .85) !important;
  background: linear-gradient(180deg, #ffe6a6 0%, #f0be5c 100%) !important;
  color: #4a3208 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 0 rgba(96, 66, 16, .55) !important;
  cursor: pointer !important;
}

#qq-group-overlay .qq-group-actions > button:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 rgba(96, 66, 16, .55) !important;
}

#qq-group-overlay .qq-group-actions > #qq-group-save {
  background: linear-gradient(180deg, #a8e6c0 0%, #4fb47c 100%) !important;
  border-color: rgba(24, 92, 54, .85) !important;
  color: #07351c !important;
  box-shadow: 0 3px 0 rgba(16, 68, 38, .55) !important;
}

#qq-group-overlay #qq-group-number {
  cursor: pointer !important;
  text-decoration: underline dotted rgba(255, 214, 130, .5) !important;
  text-underline-offset: 4px !important;
}

#qq-group-overlay .qq-group-tip {
  min-height: 18px !important;
  margin: 8px 0 0 !important;
  color: #ffe6a6 !important;
  font-size: 12px !important;
  opacity: 0 !important;
  transition: opacity .18s ease !important;
}

#qq-group-overlay .qq-group-tip.show {
  opacity: 1 !important;
}

/* styles.css 的 `.qq-group-panel button` 把所有按钮都绝对定位到右上角（那是给关闭键用的），
   会把「复制群号 / 保存二维码」压成两个 34px 圆形叠在关闭键位置。这里按 ID 特异性覆盖回来。 */
#qq-group-overlay .qq-group-panel .qq-group-actions > button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font: 800 15px/1.1 system-ui, "Microsoft YaHei", sans-serif !important;
}

#qq-group-overlay .qq-group-panel > #qq-group-close {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font: 400 24px/1 system-ui, sans-serif !important;
}

/* 联机面板诊断条（v251）：一行小字显示服务器地址 / 连接状态 / 延迟 / 最后一条错误 */
#multiplayer-lobby #multiplayer-diagnostics {
  margin: 2px 0 8px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  background: rgba(8, 18, 14, .5) !important;
  color: rgba(214, 236, 220, .78) !important;
  font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace !important;
  word-break: break-all !important;
  text-align: center !important;
}

/* ==========================================================================
   18. 升级卡图标（v251）
   cardIconMarkup() 一直在算 background-position，但历史样式只给了尺寸和边框，
   没有给 background-image / background-size —— 所以卡片左侧一直是个空色块。
   图集：assets/ui/upgrade-icons/upgrade-icons-v59-768.webp（768x640 = 6 列 x 5 行，每格 128px）
   ========================================================================== */
#level-up .upgrade-option .card-icon,
#level-up .upgrade-option .card-icon > *,
.upgrade-option .card-icon {
  background-image: url("assets/ui/upgrade-icons/upgrade-icons-v59-768.webp?v=20260917-v251-endless-and-mp-fixes") !important;
  background-size: 600% 500% !important;
  background-repeat: no-repeat !important;
  background-color: rgba(7, 12, 9, .56) !important;
}

/* 图标本体不显示任何文字（历史上这里是 emoji/汉字兜底） */
.upgrade-option .card-icon { color: transparent !important; font-size: 0 !important; }

/* 移动端：卡片更窄，图标缩一点，仍然贴在左侧 */
@media (max-width: 560px) {
  .upgrade-option .card-icon { width: 40px !important; height: 40px !important; }
}

/* 图标尺寸兜底：历史上只有部分样式表给了 .upgrade-option .card-icon 宽高，
   这里按真实卡片（#level-up 内）钉死尺寸，保证任何情况下都显示为方形图标。 */
#level-up .upgrade-option .card-icon,
#level-up .upgrade-option > .card-icon {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 9px !important;
}

@media (max-width: 560px) {
  #level-up .upgrade-option .card-icon,
  #level-up .upgrade-option > .card-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}

/* 图标定位钉死（v251）：历史样式里 .card-icon 被设成 absolute，但卡片本身没设 position，
   导致图标跑到祖先元素（面板）的角上 —— 实测出现"图标飘到卡片右上角 + 图集显示成缝"。
   这里把卡片设为 relative、图标固定在左侧，并给卡片留出左侧内边距。 */
#level-up .upgrade-option {
  position: relative !important;
  padding-left: 92px !important;
}

#level-up .upgrade-option > .card-icon,
#level-up .upgrade-option .card-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  z-index: 2 !important;
  border-radius: 9px !important;
}

@media (max-width: 560px) {
  #level-up .upgrade-option { padding-left: 82px !important; }
  #level-up .upgrade-option > .card-icon,
  #level-up .upgrade-option .card-icon {
    left: 8px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}

/* ★ 真正的原因（v251）：styles-v59.css 第 124 行有
     #level-up .upgrade-option .card-icon { display: none !important; ... }
   —— 卡牌图标从一开始就被整条隐藏了，所以卡片左侧一直是空的（背景图也是 none）。
   这条规则在 v235 之后加载、又带 !important，所以必须用同等特异性 + 后加载来覆盖。
   同时把 v59 留下的双图层尺寸（100% 100%, 600% 500%）与圆形裁切改回单图层方形。 */
#level-up .upgrade-option .card-icon {
  display: block !important;
  position: absolute !important;
  inset: auto !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  overflow: hidden !important;
  border: 1px solid rgba(243, 225, 158, .42) !important;
  border-radius: 9px !important;
  background-color: rgba(7, 12, 9, .56) !important;
  background-image: url("assets/ui/upgrade-icons/upgrade-icons-v59-768.webp?v=20260917-v251-endless-and-mp-fixes") !important;
  background-repeat: no-repeat !important;
  background-size: 600% 500% !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
  color: transparent !important;
  font-size: 0 !important;
  z-index: 2 !important;
}

@media (max-width: 560px) {
  #level-up .upgrade-option .card-icon {
    left: 12px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }
}

/* ★ 定位错位的原因（v251）：
   1) game.js 生成的是 <span class="card-icon">，而 styles-v59.css 的每一格规则写的是
      `.card-icon-<id>` —— 类名对不上，所以 30 条预置 background-position 全都没生效；
   2) v59 还给 .card-icon 加了 `background-position: center, 0 0 !important`，
      压过了 JS 写在行内的 background-position，于是图集永远显示在正中间（≈只有两格）。
   这里做三件事：把外层恢复成「裁剪窗口」，内层负责整张图集，并从第 1 格平移（跳过 98px 占位）。 */
#level-up .upgrade-option .card-icon {
  --card-icon-cell: 0;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  background-image: none !important;
  background-color: rgba(7, 12, 9, .56) !important;
  border: 1px solid rgba(243, 225, 158, .42) !important;
}

#level-up .upgrade-option .card-icon::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 600% !important;
  height: 500% !important;
  margin-left: calc(-100% * var(--card-icon-cell)) !important;
  background-image: url("assets/ui/upgrade-icons/upgrade-icons-v59-768.webp?v=20260917-v251-endless-and-mp-fixes") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  pointer-events: none !important;
}

/* 图集格号直接由 JS 写在图标元素上（data-icon-cell），这里只做映射 */
#level-up .upgrade-option .card-icon[data-icon-cell="0"] { --card-icon-cell: 0; }
#level-up .upgrade-option .card-icon[data-icon-cell="1"] { --card-icon-cell: 1; }
#level-up .upgrade-option .card-icon[data-icon-cell="2"] { --card-icon-cell: 2; }
#level-up .upgrade-option .card-icon[data-icon-cell="3"] { --card-icon-cell: 3; }
#level-up .upgrade-option .card-icon[data-icon-cell="4"] { --card-icon-cell: 4; }
#level-up .upgrade-option .card-icon[data-icon-cell="5"] { --card-icon-cell: 5; }
#level-up .upgrade-option .card-icon[data-icon-cell="6"] { --card-icon-cell: 6; }
#level-up .upgrade-option .card-icon[data-icon-cell="7"] { --card-icon-cell: 7; }
#level-up .upgrade-option .card-icon[data-icon-cell="8"] { --card-icon-cell: 8; }
#level-up .upgrade-option .card-icon[data-icon-cell="9"] { --card-icon-cell: 9; }
#level-up .upgrade-option .card-icon[data-icon-cell="10"] { --card-icon-cell: 10; }
#level-up .upgrade-option .card-icon[data-icon-cell="11"] { --card-icon-cell: 11; }
#level-up .upgrade-option .card-icon[data-icon-cell="12"] { --card-icon-cell: 12; }
#level-up .upgrade-option .card-icon[data-icon-cell="13"] { --card-icon-cell: 13; }
#level-up .upgrade-option .card-icon[data-icon-cell="14"] { --card-icon-cell: 14; }
#level-up .upgrade-option .card-icon[data-icon-cell="15"] { --card-icon-cell: 15; }
#level-up .upgrade-option .card-icon[data-icon-cell="16"] { --card-icon-cell: 16; }
#level-up .upgrade-option .card-icon[data-icon-cell="17"] { --card-icon-cell: 17; }
#level-up .upgrade-option .card-icon[data-icon-cell="18"] { --card-icon-cell: 18; }
#level-up .upgrade-option .card-icon[data-icon-cell="19"] { --card-icon-cell: 19; }
#level-up .upgrade-option .card-icon[data-icon-cell="20"] { --card-icon-cell: 20; }
#level-up .upgrade-option .card-icon[data-icon-cell="21"] { --card-icon-cell: 21; }
#level-up .upgrade-option .card-icon[data-icon-cell="22"] { --card-icon-cell: 22; }
#level-up .upgrade-option .card-icon[data-icon-cell="23"] { --card-icon-cell: 23; }
#level-up .upgrade-option .card-icon[data-icon-cell="24"] { --card-icon-cell: 24; }
#level-up .upgrade-option .card-icon[data-icon-cell="25"] { --card-icon-cell: 25; }
#level-up .upgrade-option .card-icon[data-icon-cell="26"] { --card-icon-cell: 26; }
#level-up .upgrade-option .card-icon[data-icon-cell="27"] { --card-icon-cell: 27; }
#level-up .upgrade-option .card-icon[data-icon-cell="28"] { --card-icon-cell: 28; }
#level-up .upgrade-option .card-icon[data-icon-cell="29"] { --card-icon-cell: 29; }

/* ★ 跃变（进化）卡专属图标（v251）：图集 4 列 × 9 行 = 36 格，每格 128px。
   与卡牌图标同一套 ::after 裁剪窗口，只是换一张图、换一套格位。 */

/* ★ 专属图标：relic（4 列 × 4 行）—— card-icons-relics-512x512.webp */

/* ★ 专属图标：base（4 列 × 2 行）—— card-icons-base-512x512.webp */
/* ★ 专属图标：task（4 列 × 3 行）—— 任务专精卡 8 张 + 刀气/哈气/尾气 3 张技能卡 */
/* ★ 卡牌图标最终实现（v251）——上面几条是排查过程中留下的覆盖，这里统一收口：
   为什么不能用背景百分比：styles-v59.css 给 .card-icon 加了
   它压过 JS 写在行内的 background-position，所以图集永远显示在正中间（≈只有两格）。
   自定义属性不受该简写影响，因此格号走 --card-icon-cell，由 ::after 用**像素值**定位图集。
   尺寸在样式表里是固定的 40/44px，所以像素偏移是确定的（每格 = 尺寸的 100%，即 6 格宽、5 格高）。 */
#level-up .upgrade-option .card-icon {
  background-image: none !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

#level-up .upgrade-option .card-icon::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  background-image: url("assets/ui/upgrade-icons/upgrade-icons-v59-768.webp?v=20260917-v251-endless-and-mp-fixes") !important;
  background-repeat: no-repeat !important;
  background-size: 600% 500% !important;
  background-position: 0% 0% !important;
}

/* 每格一条显式规则（不用 var/calc：实测 var() + CSS mod()/floor() 在本机 Edge 未被解析成数值，
   会导致 30 格全部落到第 0 格）。格号由 cardIconMarkup 写在 data-icon-cell 上。 */
#level-up .upgrade-option .card-icon[data-icon-cell="0"]::after { background-position: 0% 0% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="1"]::after { background-position: 20% 0% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="2"]::after { background-position: 40% 0% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="3"]::after { background-position: 60% 0% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="4"]::after { background-position: 80% 0% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="5"]::after { background-position: 100% 0% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="6"]::after { background-position: 0% 25% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="7"]::after { background-position: 20% 25% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="8"]::after { background-position: 40% 25% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="9"]::after { background-position: 60% 25% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="10"]::after { background-position: 80% 25% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="11"]::after { background-position: 100% 25% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="12"]::after { background-position: 0% 50% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="13"]::after { background-position: 20% 50% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="14"]::after { background-position: 40% 50% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="15"]::after { background-position: 60% 50% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="16"]::after { background-position: 80% 50% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="17"]::after { background-position: 100% 50% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="18"]::after { background-position: 0% 75% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="19"]::after { background-position: 20% 75% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="20"]::after { background-position: 40% 75% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="21"]::after { background-position: 60% 75% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="22"]::after { background-position: 80% 75% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="23"]::after { background-position: 100% 75% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="24"]::after { background-position: 0% 100% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="25"]::after { background-position: 20% 100% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="26"]::after { background-position: 40% 100% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="27"]::after { background-position: 60% 100% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="28"]::after { background-position: 80% 100% !important; }
#level-up .upgrade-option .card-icon[data-icon-cell="29"]::after { background-position: 100% 100% !important; }

/* 联机密码内嵌面板（v251）：取代 window.prompt。
   B站 App / Toy 的 WebView 会拦截 prompt，密码房点加入后毫无反馈。 */
#multiplayer-lobby .room-directory-list li.room-password-open {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(9, 20, 15, .72) !important;
}

#multiplayer-lobby .room-inline-password {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 8px !important;
}

#multiplayer-lobby .room-inline-password > small {
  grid-column: 1 / -1 !important;
  color: #ffe6a8 !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
}

#multiplayer-lobby .room-inline-password input {
  width: 100% !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(243, 225, 158, .45) !important;
  border-radius: 8px !important;
  background: rgba(4, 10, 7, .82) !important;
  color: #f2f7ef !important;
  font-size: 14px !important;
}

#multiplayer-lobby .room-inline-password button {
  position: static !important;
  width: auto !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

#multiplayer-lobby .room-inline-password button.ghost {
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(233, 243, 231, .8) !important;
}

#multiplayer-lobby .room-inline-password .room-password-tip {
  grid-column: 1 / -1 !important;
  color: #ff9a8a !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

#multiplayer-lobby .room-inline-password .room-password-tip[hidden] {
  display: none !important;
}

/* ==========================================================================
   19. 局内商店（v251）
   对照《杀戮尖塔》的商贩：每 3 波固定出现，用本局金币买卡 / 强化 / 遗物 / 删卡 / 补给。
   ========================================================================== */
#shop.screen-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
}

#shop .shop-panel {
  width: min(760px, 96vw) !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
}

#shop #shop-kicker {
  color: #ffd873 !important;
  letter-spacing: .16em !important;
}

.shop-wallet {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 6px 0 12px !important;
  font-size: 13px !important;
  color: rgba(232, 240, 228, .78) !important;
}

.shop-wallet strong {
  color: #ffd873 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

#shop-options.shop-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

#shop .shop-item {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 76px !important;
  padding: 10px 70px 10px 78px !important;
  text-align: left !important;
  border: 2px solid rgba(243, 225, 158, .38) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(26, 42, 32, .96), rgba(14, 24, 18, .96)) !important;
  color: #eef6ea !important;
  cursor: pointer !important;
}

#shop .shop-item:disabled {
  opacity: .45 !important;
  cursor: default !important;
}

#shop .shop-item-poor:not(:disabled) {
  border-color: rgba(255, 140, 120, .5) !important;
}

#shop .shop-item .card-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  overflow: hidden !important;
  border: 1px solid rgba(243, 225, 158, .42) !important;
  border-radius: 10px !important;
  background-color: rgba(7, 12, 9, .6) !important;
  background-image: none !important;
}

#shop .shop-item .card-icon::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  background-image: url("assets/ui/upgrade-icons/upgrade-icons-v59-768.webp?v=20260917-v251-endless-and-mp-fixes") !important;
  background-repeat: no-repeat !important;
  background-size: 600% 500% !important;
  background-position: 0% 0% !important;
  pointer-events: none !important;
}

/* 商店里的图标沿用卡牌图集 / 专属图集 */
#shop .shop-item .card-icon[data-icon-cell="0"]::after { background-position: 0% 0% !important; }
#shop .shop-item .card-icon[data-icon-cell="1"]::after { background-position: 20% 0% !important; }
#shop .shop-item .card-icon[data-icon-cell="2"]::after { background-position: 40% 0% !important; }
#shop .shop-item .card-icon[data-icon-cell="3"]::after { background-position: 60% 0% !important; }
#shop .shop-item .card-icon[data-icon-cell="4"]::after { background-position: 80% 0% !important; }
#shop .shop-item .card-icon[data-icon-cell="5"]::after { background-position: 100% 0% !important; }
#shop .shop-item .card-icon[data-icon-cell="6"]::after { background-position: 0% 25% !important; }
#shop .shop-item .card-icon[data-icon-cell="7"]::after { background-position: 20% 25% !important; }
#shop .shop-item .card-icon[data-icon-cell="8"]::after { background-position: 40% 25% !important; }
#shop .shop-item .card-icon[data-icon-cell="9"]::after { background-position: 60% 25% !important; }
#shop .shop-item .card-icon[data-icon-cell="10"]::after { background-position: 80% 25% !important; }
#shop .shop-item .card-icon[data-icon-cell="11"]::after { background-position: 100% 25% !important; }
#shop .shop-item .card-icon[data-icon-cell="12"]::after { background-position: 0% 50% !important; }
#shop .shop-item .card-icon[data-icon-cell="13"]::after { background-position: 20% 50% !important; }
#shop .shop-item .card-icon[data-icon-cell="14"]::after { background-position: 40% 50% !important; }
#shop .shop-item .card-icon[data-icon-cell="15"]::after { background-position: 60% 50% !important; }
#shop .shop-item .card-icon[data-icon-cell="16"]::after { background-position: 80% 50% !important; }
#shop .shop-item .card-icon[data-icon-cell="17"]::after { background-position: 100% 50% !important; }
#shop .shop-item .card-icon[data-icon-cell="18"]::after { background-position: 0% 75% !important; }
#shop .shop-item .card-icon[data-icon-cell="19"]::after { background-position: 20% 75% !important; }
#shop .shop-item .card-icon[data-icon-cell="20"]::after { background-position: 40% 75% !important; }
#shop .shop-item .card-icon[data-icon-cell="21"]::after { background-position: 60% 75% !important; }
#shop .shop-item .card-icon[data-icon-cell="22"]::after { background-position: 80% 75% !important; }
#shop .shop-item .card-icon[data-icon-cell="23"]::after { background-position: 100% 75% !important; }
#shop .shop-item .card-icon[data-icon-cell="24"]::after { background-position: 0% 100% !important; }
#shop .shop-item .card-icon[data-icon-cell="25"]::after { background-position: 20% 100% !important; }
#shop .shop-item .card-icon[data-icon-cell="26"]::after { background-position: 40% 100% !important; }
#shop .shop-item .card-icon[data-icon-cell="27"]::after { background-position: 60% 100% !important; }
#shop .shop-item .card-icon[data-icon-cell="28"]::after { background-position: 80% 100% !important; }
#shop .shop-item .card-icon[data-icon-cell="29"]::after { background-position: 100% 100% !important; }

/* 遗物 / 属性卡的专属图集（4 列） */

/* 通用图标（删卡 / 补给） */
#shop .shop-icon-generic {
  display: grid !important;
  place-items: center !important;
  color: #ffd873 !important;
  font: 900 24px/1 system-ui, sans-serif !important;
}

.shop-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.shop-copy strong {
  color: #fff3c8 !important;
  font-size: 15px !important;
}

#shop .shop-copy .card-detail {
  color: rgba(226, 238, 224, .76) !important;
  font-size: 12px !important;
}

.shop-badge {
  color: #9fd9a6 !important;
  font-size: 10.5px !important;
  letter-spacing: .06em !important;
}

.shop-price {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 54px !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 216, 115, .16) !important;
  color: #ffd873 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.shop-price::after {
  content: "\91d1\5e01" !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  opacity: .8 !important;
}

.shop-price-poor {
  background: rgba(255, 120, 100, .18) !important;
  color: #ff9a8a !important;
}

.shop-tip {
  min-height: 18px !important;
  margin: 8px 0 4px !important;
  color: #9fd9a6 !important;
  font-size: 12.5px !important;
  text-align: center !important;
}

.shop-tip[data-tone="error"] {
  color: #ff9a8a !important;
}

.shop-picker-heading {
  margin: 2px 0 6px !important;
  color: #ffe6a8 !important;
  font-size: 13px !important;
  text-align: center !important;
}

#shop .shop-item-back {
  min-height: 44px !important;
  padding: 10px !important;
  text-align: center !important;
  border-style: dashed !important;
  color: rgba(233, 243, 231, .8) !important;
}

@media (max-width: 560px) {
  #shop .shop-item {
    min-height: 68px !important;
    padding: 8px 62px 8px 66px !important;
  }
  #shop .shop-item .card-icon {
    left: 10px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }
  .shop-copy strong { font-size: 14px !important; }
  #shop .shop-copy .card-detail { font-size: 11px !important; }
  .shop-price { min-width: 46px !important; font-size: 13px !important; padding: 5px 8px !important; }
}

/* 通用图标（删卡 / 补给）：不要走卡牌图集，直接显示符号。
   之前沿用 .card-icon 的 ::after 图层，结果这两行显示成图集第 0 格（一把剑），看起来像"图标错了"。 */
#shop .shop-item .card-icon.shop-icon-generic::after {
  content: none !important;
  background-image: none !important;
}

#shop .shop-item .card-icon.shop-icon-generic {
  display: grid !important;
  place-items: center !important;
  background-image: none !important;
  color: #ffd873 !important;
  font: 900 26px/1 system-ui, "Microsoft YaHei", sans-serif !important;
}

#shop .shop-item[data-kind="remove"] .card-icon.shop-icon-generic {
  color: #ff9a8a !important;
  border-color: rgba(255, 140, 120, .5) !important;
}

/* 流派徽章（v251）：把当前元素搭配显示在 HUD 上，让玩家看见"我这局的流派"。 */
#build-badge {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: -30px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 216, 115, .5) !important;
  background: rgba(10, 22, 16, .82) !important;
  color: #ffe6a8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

#build-badge[data-element="ember"] { border-color: rgba(255, 140, 90, .6) !important; color: #ffc39a !important; }
#build-badge[data-element="spark"] { border-color: rgba(255, 226, 120, .6) !important; color: #ffe89a !important; }
#build-badge[data-element="tide"] { border-color: rgba(130, 200, 255, .6) !important; color: #b9e2ff !important; }
#build-badge[data-element="acid"] { border-color: rgba(150, 230, 120, .6) !important; color: #c8f2a8 !important; }
#build-badge[data-element="dark"] { border-color: rgba(190, 140, 255, .6) !important; color: #dcc0ff !important; }
#build-badge[data-element="shadow"] { border-color: rgba(160, 170, 200, .6) !important; color: #d5dcef !important; }

/* 流派徽章定位修正：原来挂在 .hud-top-band 的 bottom:-30px 上，实测被顶出屏幕/被面板盖住。
   改成固定在手机版安全区内、右下技能键上方的位置。 */
#hud #build-badge {
  position: fixed !important;
  left: auto !important;
  right: 14px !important;
  bottom: 96px !important;
  top: auto !important;
  transform: none !important;
  max-width: 46vw !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  z-index: 40 !important;
}

@media (min-width: 720px) {
  #hud #build-badge {
    right: 20px !important;
    bottom: 108px !important;
    max-width: 320px !important;
  }
}

/* 徽章被右下技能键盖住了（技能键的层叠上下文更高），把徽章抬到最上层。 */
#hud #build-badge {
  z-index: 999 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45) !important;
  background: rgba(8, 18, 13, .94) !important;
}

/* 徽章落到右下技能键下面了（elementFromPoint 实测被挡）。改放屏幕底部正中，
   在手机版技能键上方、且不压到摇杆区域。 */
#hud #build-badge {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 16px !important;
  max-width: 60vw !important;
}

@media (min-width: 720px) {
  #hud #build-badge { bottom: 20px !important; left: 50% !important; right: auto !important; }
}

/* ★ 专属图标（遗物 / 属性卡 / 任务卡 / 跃变）改用独立小图。
   以前用图集切格 + 百分比背景定位，在"生成图 1024x1024 但只用部分行"的情况下
   连续算错两次（护甲串位、图标被裁一半），独立文件没有这个问题。 */
#level-up .upgrade-option .card-icon[data-icon-file]::after,
#shop .shop-item .card-icon[data-icon-file]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  background-image: var(--card-icon-file) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  pointer-events: none !important;
}

/* ==========================================================================
   20. 局内属性面板 + 设置按钮（v251）
   ========================================================================== */
#hud #run-stats-button,
#hud #run-settings-button {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  margin-left: 6px !important;
  padding: 0 !important;
  border: 1px solid rgba(243, 225, 158, .45) !important;
  border-radius: 8px !important;
  background: rgba(10, 22, 16, .78) !important;
  color: #ffe6a8 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

#run-stats-panel .run-stats-panel {
  width: min(520px, 94vw) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
}

#run-stats-panel .run-stats-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  margin: 10px 0 14px !important;
}

#run-stats-panel .run-stat-row {
  display: grid !important;
  grid-template-columns: 96px 1fr !important;
  gap: 10px !important;
  align-items: baseline !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  background: rgba(9, 20, 15, .5) !important;
}

#run-stats-panel .run-stat-row span {
  color: rgba(226, 238, 224, .7) !important;
  font-size: 12px !important;
}

#run-stats-panel .run-stat-row b {
  color: #fff3c8 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#run-stats-panel .run-stat-row i {
  display: block !important;
  color: rgba(190, 214, 196, .62) !important;
  font-size: 10.5px !important;
  font-style: normal !important;
}

/* ==========================================================================
   21. 大厅角色属性弹层（v251）
   ========================================================================== */
#lobby .solo-stage-character-stats {
  margin-left: 6px !important;
}

#lobby-character-stats .lobby-character-stats-panel {
  width: min(460px, 92vw) !important;
  max-height: 86vh !important;
  overflow-y: auto !important;
}

#lobby-character-stats .lobby-character-stats-list {
  display: grid !important;
  gap: 4px !important;
  margin: 10px 0 14px !important;
}

#lobby-character-stats .lobby-character-stat-row {
  display: grid !important;
  grid-template-columns: 76px 92px 1fr !important;
  align-items: baseline !important;
  gap: 8px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  background: rgba(9, 20, 15, .5) !important;
}

#lobby-character-stats .lobby-character-stat-row span {
  color: rgba(226, 238, 224, .7) !important;
  font-size: 12px !important;
}

#lobby-character-stats .lobby-character-stat-row b {
  color: #fff3c8 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#lobby-character-stats .lobby-character-stat-row small {
  color: rgba(190, 214, 196, .62) !important;
  font-size: 10.5px !important;
}

/* 商店品质徽章（v251）：买卡的数值由品质决定，价格也由品质决定，所以必须写在卡面上。 */
#shop .shop-quality {
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  border: 1px solid currentColor !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  vertical-align: middle !important;
}

#shop .shop-quality[data-quality="standard"] { color: #b7e278 !important; }
#shop .shop-quality[data-quality="strong"] { color: #72c8ff !important; }
#shop .shop-quality[data-quality="premium"] { color: #df9cff !important; }
#shop .shop-quality[data-quality="mythic"] { color: #ffd873 !important; }

/* 本局词缀徽章（v251）：开局公布的一条全局规则，HUD 常驻显示。 */
#hud #run-modifier-badge {
  position: fixed !important;
  left: 14px !important;
  bottom: 96px !important;
  z-index: 999 !important;
  display: inline-flex !important;
  align-items: center !important;
  max-width: 46vw !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 176, 74, .6) !important;
  background: rgba(24, 12, 6, .92) !important;
  color: #ffd9a8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45) !important;
  pointer-events: none !important;
}

@media (min-width: 720px) {
  #hud #run-modifier-badge { left: 20px !important; bottom: 108px !important; }
}

/* 飞升开关（v251）：与无尽开关同一个槽位，样式保持一致。 */
#lobby #lobby-ascension-toggle {
  min-width: 58px !important;
  height: 58px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(255, 176, 74, .6) !important;
  background: rgba(24, 12, 6, .88) !important;
  color: #ffd9a8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

#lobby #lobby-ascension-toggle.on {
  background: linear-gradient(180deg, #ff9a3c, #e0651a) !important;
  color: #2a1503 !important;
  box-shadow: 0 0 14px rgba(255, 154, 60, .55) !important;
}

/* v251：小地图不要包边（玩家反馈外框碍眼） */
#hud #mini-map,
#hud .mini-map {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 10px !important;
}

/* v251：属性面板挪到人物下方（左下），不再挤在左上角；并补一个 × 关闭键。 */
#run-stats-panel {
  align-items: flex-end !important;
  justify-content: flex-start !important;
}

#run-stats-panel .run-stats-card {
  margin: 0 0 92px 14px !important;
  max-height: 72vh !important;
}

@media (min-width: 720px) {
  #run-stats-panel .run-stats-card { margin: 0 0 112px 22px !important; }
}

#run-stats-panel .run-stats-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 216, 150, .5) !important;
  background: rgba(30, 16, 8, .92) !important;
  color: #ffd9a8 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

/* ==========================================================================
   v251 修复：手机大厅「飞升」按钮挤到排行榜上面
   无尽槽位原来是横向 flex（无尽 58 + 飞升 60 = 118 宽），
   而排行榜按钮固定在 x≈152 —— 飞升右边缘 196 直接盖住排行榜。
   现在槽位改竖向：无尽 58×58，飞升 58×26 挂在它下面，整列只占 x78~136。
   ========================================================================== */
#lobby .lobby-endless-slot {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  width: auto !important;
}

#lobby #lobby-ascension-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border-radius: 9px !important;
  border: 2px solid rgba(70, 40, 10, .72) !important;
  background: linear-gradient(180deg, rgba(70, 46, 18, .58) 0%, rgba(46, 28, 8, .68) 100%) !important;
  box-shadow: 0 2px 0 rgba(28, 16, 4, .5) !important;
  color: rgba(255, 234, 196, .82) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

#lobby #lobby-ascension-toggle.on {
  border-color: rgba(120, 52, 8, .95) !important;
  background: linear-gradient(180deg, #ffbe5c 0%, #e07a18 100%) !important;
  box-shadow: 0 2px 0 rgba(96, 44, 6, .6), 0 0 0 2px rgba(255, 190, 92, .28) !important;
  color: #3a1a02 !important;
}

/* 指南按钮往下让一格，别和竖排后的槽位贴住 */
@media (max-width: 720px) {
  #lobby .lobby-stage-side > #lobby-guide-entry { margin-top: 6px !important; }
}


#hud #run-settings-button {
  top: 186px !important;
}

@media (min-width: 720px) {
}

/* ==========================================================================
   v251（按玩家要求）：设置与属性按钮**并排一行**，放在左上角角色血条下面
   ========================================================================== */
#hud #run-stats-button,
#hud #run-settings-button {
  position: fixed !important;
  top: 128px !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
  /* v255 修复：998 会压过所有浮层（升级三选一 #level-up=70、各面板 55~160），
     弹窗打开时这两个按钮仍浮在最上面。游戏画布 z-index ≤3、最低的浮层从 30 起，
     取 12 = 盖住画布、低于一切浮层。 */
  z-index: 12 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
}

/* 属性在左、设置在右，两个贴在一起成一条 */
#hud #run-stats-button { left: 14px !important; }
#hud #run-settings-button { left: 60px !important; }

@media (min-width: 720px) {
  #hud #run-stats-button,
  #hud #run-settings-button { top: 146px !important; width: 44px !important; min-width: 44px !important; height: 44px !important; }
  #hud #run-stats-button { left: 20px !important; }
  #hud #run-settings-button { left: 70px !important; }
}
#update-notice.screen-overlay {
  z-index: 160;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  background: rgba(7, 12, 9, .82);
  backdrop-filter: blur(8px);
}

.update-notice-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(250px, .95fr);
  width: min(760px, 100%);
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(222, 208, 155, .38);
  border-radius: 12px;
  background: #18231b;
  color: #f4f0df;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .56);
}

.update-notice-image-wrap { min-height: 320px; background: #19271d; }
.update-notice-image-wrap img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.update-notice-copy { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 36px 34px 26px; }
.update-notice-kicker { margin: 0; color: #d8bd70; font-size: 12px; font-weight: 800; }
.update-notice-copy h2 { margin: 0; color: #fff8e6; font-size: 25px; line-height: 1.25; }
.update-notice-copy > p:not(.update-notice-kicker) { margin: 0; color: rgba(239, 242, 225, .86); font-size: 15px; line-height: 1.7; }
.update-notice-close { position: absolute; z-index: 1; top: 12px; right: 12px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 50%; background: rgba(11, 17, 12, .76); color: white; font-size: 25px; line-height: 1; cursor: pointer; }
.update-notice-pagination { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.update-notice-pagination button { width: 44px; height: 44px; border: 1px solid rgba(221, 204, 144, .5); border-radius: 50%; background: rgba(221, 204, 144, .1); color: #fff4ce; font-size: 25px; cursor: pointer; }
.update-notice-pagination button:disabled { opacity: .38; cursor: default; }
.update-notice-pagination span { min-width: 42px; color: rgba(239, 242, 225, .76); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .update-notice-panel { grid-template-columns: minmax(0, 1fr); width: min(440px, 100%); min-height: 0; }
  .update-notice-image-wrap, .update-notice-image-wrap img { height: clamp(150px, 28vh, 220px); min-height: 0; }
  .update-notice-copy { gap: 9px; padding: 21px 22px max(18px, env(safe-area-inset-bottom)); }
  .update-notice-copy h2 { padding-right: 40px; font-size: 21px; }
  .update-notice-copy > p:not(.update-notice-kicker) { font-size: 14px; }
  .update-notice-pagination { margin-top: 3px; }
}

/* ===== v256：主菜单「更新内容」面板（样式参考 Toy 更新公告：黑底 + 黄色竖条分节） ===== */
#changelog-panel, #compendium-panel { z-index: 96; }
.changelog-panel, .compendium-panel {
  position: relative;
  width: min(660px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  background: #1d1f24;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  color: #eef1f5;
  overflow: hidden;
}
.changelog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 右侧留出关闭按钮的空位，避免「复制」被 × 遮住 */
  padding: 18px 56px 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.changelog-header h2 { margin: 0; font-size: 22px; letter-spacing: .5px; }
.changelog-header button {
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #2a2d33;
  color: #eef1f5;
  font-size: 13px;
  cursor: pointer;
}
.changelog-header button:hover { background: #34383f; }
.changelog-body { overflow-y: auto; padding: 14px 22px 22px; }
.changelog-intro { margin: 6px 0 14px; font-size: 14.5px; font-weight: 600; color: #f4f6f9; }
.changelog-section {
  margin: 16px 0 10px;
  padding: 8px 14px;
  border-left: 6px solid #e8ff47;
  border-radius: 8px;
  background: #26282e;
  font-size: 16px;
}
.changelog-body ul { margin: 0 0 6px; padding-left: 4px; list-style: none; display: grid; gap: 8px; }
.changelog-body ul li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.65;
  color: #cfd4db;
}
.changelog-body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e8ff47;
}
.changelog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #2a2d33;
  color: #eef1f5;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.changelog-close:hover { background: #3a3e45; }
/* ===== v256：主菜单「图鉴」面板 ===== */
.compendium-grid {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  padding: 14px 22px 22px;
}
.compendium-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #26282e;
  border: 1px solid rgba(255, 255, 255, .07);
  border-top: 3px solid var(--card-accent, #f2c542);
  border-radius: 14px;
  overflow: hidden;
}
.compendium-portrait {
  display: block;
  height: 118px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .09), transparent 72%), #1a1c20;
}
.compendium-portrait img { width: 100%; height: 100%; object-fit: contain; }
.compendium-card figcaption { display: grid; gap: 3px; padding: 10px 12px 12px; }
.compendium-card figcaption strong { font-size: 15px; color: #f4f6f9; }
.compendium-card figcaption small { font-size: 12px; color: #9aa1ab; }
.compendium-card figcaption p { margin: 2px 0 0; font-size: 12px; line-height: 1.55; color: #cfd4db; }
.compendium-card figcaption p b { color: #e8ff47; margin-right: 4px; }
.compendium-card.is-locked .compendium-portrait img { filter: grayscale(1) brightness(.55); }
.compendium-card.is-locked figcaption strong::after {
  content: "未解锁";
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #33363d;
  color: #aab0ba;
  font-size: 10.5px;
  vertical-align: 1px;
}

/* ===== v257：图鉴扩展（角色/敌人标签 + 敌人详情面板） ===== */
.compendium-panel { width: min(920px, calc(100vw - 32px)); }
.compendium-tabs { display: flex; gap: 8px; }
.compendium-tab {
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #2a2d33;
  color: #cfd4db;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.compendium-tab.is-active {
  background: linear-gradient(180deg, #f4cf57, #e0a82c);
  color: #3a2a08;
  border-color: rgba(139, 96, 18, .28);
  font-weight: 700;
}
.compendium-body { display: flex; gap: 0; min-height: 0; flex: 1; overflow: hidden; }
.compendium-grid { flex: 1 1 auto; min-height: 0; }
/* v260：角色详情打开时（has-detail）与敌人详情（is-enemy）共用同一套左右分栏布局。
   v261：卡牌图鉴（is-cards）同样共用。 */
.compendium-body.is-enemy .compendium-grid,
.compendium-body.has-detail .compendium-grid,
.compendium-body.is-cards .compendium-grid { flex: 1 1 56%; max-width: 56%; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.compendium-detail {
  display: none;
  flex: 1 1 44%;
  border-left: 1px solid rgba(255, 255, 255, .08);
  padding: 16px 18px 20px;
  overflow-y: auto;
}
.compendium-body.is-enemy .compendium-detail.is-open,
.compendium-body.has-detail .compendium-detail.is-open,
.compendium-body.is-cards .compendium-detail.is-open { display: block; }
/* v260：角色卡可点击打开详情 —— 与敌人卡一致的指针/悬停反馈。 */
.compendium-character-card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.compendium-character-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
  border-color: rgba(255, 255, 255, .18);
}
/* v261：锁定的角色卡 —— 头像置灰（复用敌人卡结构后的补充规则）。 */
.compendium-enemy-card.is-locked .compendium-portrait img { filter: grayscale(1) brightness(.55); }
/* v261：卡牌图鉴 —— 无立绘的元素卡用主题色符号块代替头像。 */
.compendium-card-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent, #8fd0ff) 32%, #1a1c20), #1a1c20 78%);
  border: 1px solid color-mix(in srgb, var(--card-accent, #8fd0ff) 45%, transparent);
  color: var(--card-accent, #8fd0ff);
  font-size: 30px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.compendium-detail-portrait .compendium-card-glyph { width: 120px; height: 120px; border-radius: 14px; font-size: 52px; }
/* v260：角色卡上的介绍文字（meta.js 每个角色新增 intro）。 */
.compendium-card figcaption p.compendium-intro { color: #aeb6c2; margin-top: 1px; }
.compendium-detail.is-open .compendium-detail-desc b { font-weight: 700; }
.compendium-enemy-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px;
  text-align: left;
  background: #26282e;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  cursor: pointer;
  color: inherit;
  transition: border-color .15s, background .15s, transform .12s;
}
.compendium-enemy-card:hover { border-color: rgba(232, 255, 71, .5); background: #2c2f36; transform: translateY(-1px); }
.compendium-enemy-card .compendium-portrait { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 10px; }
.compendium-enemy-meta { display: grid; gap: 3px; align-content: center; }
.compendium-enemy-meta strong { font-size: 15px; color: #f4f6f9; }
.compendium-enemy-meta small { font-size: 12px; color: #9aa1ab; }
.compendium-enemy-meta em { font-style: normal; font-size: 12px; line-height: 1.5; color: #cfd4db; }
.compendium-tag-row { display: flex; flex-wrap: wrap; gap: 5px; }
.compendium-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #33363d; color: #aab0ba; font-size: 11px; }
.compendium-tag--cat { background: rgba(232, 255, 71, .16); color: #e8ff47; border: 1px solid rgba(232, 255, 71, .4); }
.compendium-detail-portrait { display: flex; justify-content: center; margin-bottom: 12px; }
.compendium-detail-portrait img { max-width: 180px; max-height: 180px; object-fit: contain; background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .09), transparent 72%), #1a1c20; border-radius: 14px; padding: 8px; }
.compendium-detail-name { text-align: center; font-size: 24px; font-weight: 800; color: #f4f6f9; margin-bottom: 8px; }
.compendium-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.compendium-detail-desc { font-size: 13.5px; line-height: 1.7; color: #cfd4db; margin: 0 0 14px; }
.compendium-detail-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.compendium-stat { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #26282e; border-radius: 10px; }
.compendium-stat span { font-size: 13px; color: #9aa1ab; }
.compendium-stat b { font-size: 16px; color: #f4f6f9; }
.compendium-detail-unlock { text-align: center; font-size: 13px; color: #9aa1ab; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); }

/* ===== v257：主菜单按钮改圆角 + 与开局按钮背景统一（同家族金色） ===== */
.main-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0 !important;
}
.main-menu-actions button,
#multiplayer-game,
#menu-settings,
#exit-game,
#menu-sponsor,
#menu-boss-material {
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(139, 96, 18, .28) !important;
  border-bottom: 1px solid rgba(139, 96, 18, .28) !important;
  border-radius: 14px;
  background: linear-gradient(180deg, #f4cf57, #e0a82c) !important;
  color: #3a2a08 !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(169, 119, 30, .45);
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.main-menu-actions button:hover,
#multiplayer-game:hover,
#menu-settings:hover,
#exit-game:hover,
#menu-sponsor:hover,
#menu-boss-material:hover {
  padding-left: 18px !important;
  border-left-color: rgba(139, 96, 18, .28) !important;
  background: linear-gradient(180deg, #ffd968, #eab73a) !important;
  transform: translateY(-2px);
  box-shadow: 0 7px 0 rgba(169, 119, 30, .45);
}
.main-menu-actions button small { color: rgba(58, 42, 8, .7); font-size: 11px; font-weight: 600; letter-spacing: 0; white-space: normal; }

/* ===== v257：更新内容面板缩小（原来 660px / 78vh 太大） ===== */
.changelog-panel {
  width: min(460px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
}
.changelog-header { padding: 16px 50px 12px 20px; }
.changelog-header h2 { font-size: 20px; }
.changelog-body { padding: 12px 20px 20px; }

/* ===== v257：新敌人全屏公告（10s） ===== */
.unlock-announce {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: flex-start;
  justify-content: center;
  /* v259：去掉全屏深色遮罩 —— 公告只是顶部一条小提示，不再挡住战场。 */
  background: none;
  pointer-events: none;
}
.unlock-announce.show { display: flex; }
.unlock-announce-card {
  margin-top: max(64px, calc(env(safe-area-inset-top) + 56px));
  text-align: center;
  padding: 12px 30px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(33, 36, 43, .88), rgba(20, 22, 27, .88));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(16px) scale(.96);
}
.unlock-announce.show .unlock-announce-card { animation: unlock-announce-pop .28s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes unlock-announce-pop { to { transform: translateY(0) scale(1); opacity: 1; } }
.unlock-announce-tag {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(232, 255, 71, .16);
  border: 1px solid rgba(232, 255, 71, .5);
  color: #e8ff47;
  font-size: 12px;
  letter-spacing: 1px;
  vertical-align: middle;
}
.unlock-announce-name {
  display: inline-block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .6);
  vertical-align: middle;
}
.unlock-announce-sub {
  display: none;
}

/* ==========================================================================
   v260：主菜单底部圆形图标按钮（图鉴 / 更新内容）。
   用户反馈：不要黑色背景，和上面的金色主按钮统一 —— 同款金黄渐变、
   棕色描边、下坠阴影，图标与文字改深棕色。
   ========================================================================== */
.main-menu-round {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 14px;
}
.main-menu-round .round-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(139, 96, 18, .28);
  background: linear-gradient(180deg, #f4cf57, #e0a82c);
  box-shadow: 0 5px 0 rgba(169, 119, 30, .45);
  color: #3a2a08;
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.main-menu-round .round-entry:hover {
  background: linear-gradient(180deg, #ffd968, #eab73a);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 rgba(169, 119, 30, .45);
}
.main-menu-round .round-entry:active { transform: translateY(1px); box-shadow: 0 3px 0 rgba(169, 119, 30, .45); }
.main-menu-round .round-entry svg { width: 30px; height: 30px; }
.main-menu-round .round-entry small { font: 700 11px/1 "Microsoft YaHei", system-ui, sans-serif; letter-spacing: 1px; color: #3a2a08; }
@media (max-width: 560px) {
  .main-menu-round { gap: 18px; margin-top: 10px; }
  .main-menu-round .round-entry { width: 70px; height: 70px; }
  .main-menu-round .round-entry svg { width: 25px; height: 25px; }
  .main-menu-round .round-entry small { font-size: 10px; }
}
/* ==========================================================================
   v263：① 移动端开局即显示摇杆（默认停在左下角，按下后仍瞬移到指尖位置）；
        ② 图鉴手机竖屏适配 —— 两列卡片、文字缩号并防溢出、详情改为下方抽屉。
   ========================================================================== */
body.control-mobile.game-started #touch-stick,
body.control-mobile.game-started #touch-stick:not(.active) {
  display: block !important;
}
/* 空闲态（未按下）摇杆半透明，按下后恢复原样式 */
body.control-mobile.game-started #touch-stick:not(.active) { opacity: .55; }

@media (max-width: 720px) {
  .compendium-panel { width: calc(100vw - 12px); max-height: 86vh; border-radius: 14px; }
  .compendium-panel .changelog-header { padding: 12px 48px 10px 14px; }
  .compendium-panel .changelog-header h2 { font-size: 18px; }
  .compendium-tabs { gap: 6px; flex-wrap: wrap; }
  .compendium-tab { padding: 6px 12px; font-size: 12px; }
  .compendium-body { display: block; overflow-y: auto; }
  .compendium-grid {
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    overflow: visible;
  }
  .compendium-card { min-width: 0; }
  .compendium-card figcaption { padding: 8px 9px 10px; gap: 2px; min-width: 0; }
  .compendium-card figcaption strong { font-size: 13px; overflow-wrap: anywhere; }
  .compendium-card figcaption small { font-size: 11px; }
  .compendium-card figcaption p {
    font-size: 11px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .compendium-enemy-card { padding: 8px; gap: 8px; min-width: 0; }
  .compendium-enemy-card .compendium-portrait { width: 52px; height: 52px; flex: 0 0 52px; }
  .compendium-enemy-meta { min-width: 0; }
  .compendium-enemy-meta strong { font-size: 13px; overflow-wrap: anywhere; }
  .compendium-enemy-meta small, .compendium-enemy-meta em { font-size: 11px; line-height: 1.45; }
  .compendium-detail {
    max-width: 100%;
    flex: none;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 12px 12px 16px;
    overflow-y: visible;
  }
  .compendium-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .compendium-detail-stats .compendium-stat { font-size: 11px; overflow-wrap: anywhere; }
  .compendium-detail-name { font-size: 18px; }
  .compendium-detail-desc { font-size: 12.5px; }
}