:root {
  --cyan: #3ad7ff;
  --orange: #ff9a3c;
  --purple: #a05cff;
  --green: #4be08a;
  --red: #ff4d5e;
  --bg: #04060f;
  --panel: rgba(9, 14, 30, 0.86);
  --panel-line: rgba(90, 190, 255, 0.28);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: #dff1ff;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: crosshair;
}

html.is-touch,
html.is-touch body {
  touch-action: none;
  overscroll-behavior: none;
}

#gl {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------- 特效层 */

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 42%, rgba(2, 4, 12, 0.72) 100%);
  z-index: 5;
}

#lowhp {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 0, 30, 0) 52%, rgba(255, 20, 40, 0.3) 100%);
  z-index: 6;
  transition: opacity 0.35s ease;
}

#lowhp.on {
  opacity: 1;
  animation: lowpulse 1.15s ease-in-out infinite;
}

@keyframes lowpulse {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.55;
  }
}

#hurt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 30, 60, 0) 35%, rgba(255, 25, 55, 0.55) 100%);
  z-index: 7;
}

#hurt.flash {
  animation: hurtflash 0.42s ease-out;
}

@keyframes hurtflash {
  0% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- HUD */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
  padding: calc(12px + var(--sat)) calc(18px + var(--sar)) 12px calc(18px + var(--sal));
}

.pcard {
  min-width: 230px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  padding: 10px 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 18px rgba(0, 100, 180, 0.18);
}

.pcard.p0 {
  border-color: rgba(58, 215, 255, 0.5);
}

.pcard.p1 {
  border-color: rgba(255, 154, 60, 0.5);
}

.pcard.down {
  filter: grayscale(0.7) brightness(0.75);
  border-color: rgba(255, 77, 94, 0.7);
}

.pcard.me {
  box-shadow: 0 0 22px rgba(58, 215, 255, 0.35);
}

.pcard.p1.me {
  box-shadow: 0 0 22px rgba(255, 154, 60, 0.35);
}

.prow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.prow.small {
  font-size: 11px;
  opacity: 0.72;
  margin-top: 5px;
}

.pname {
  font-weight: 700;
}

.pcard.p0 .pname {
  color: var(--cyan);
}

.pcard.p1 .pname {
  color: var(--orange);
}

.ptag {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}

.bar {
  position: relative;
  height: 16px;
  margin-top: 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.bar > i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  transition: width 0.12s linear;
}

.bar > span {
  position: absolute;
  inset: 0;
  font-size: 10.5px;
  line-height: 16px;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

.bar.hp > i {
  background: linear-gradient(90deg, #2fe08a, #7dffc0);
}

.pcard.p1 .bar.hp > i {
  background: linear-gradient(90deg, #ff8a2b, #ffd08a);
}

.bar.hp.low > i {
  background: linear-gradient(90deg, #ff3b52, #ff8f8f);
}

.corebox {
  min-width: 330px;
  text-align: center;
  background: var(--panel);
  border: 1px solid rgba(120, 240, 255, 0.4);
  border-radius: 12px;
  padding: 9px 16px 11px;
  box-shadow: 0 0 26px rgba(0, 190, 255, 0.22);
}

.corelabel {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #b6f2ff;
  text-shadow: 0 0 12px rgba(90, 220, 255, 0.75);
}

.bar.core {
  height: 20px;
  margin-top: 6px;
}

.bar.core > i {
  background: linear-gradient(90deg, #14d6ff, #8affe6);
  box-shadow: 0 0 16px rgba(60, 230, 255, 0.7);
}

.bar.core.mid > i {
  background: linear-gradient(90deg, #ffc93c, #ffe9a8);
}

.bar.core.low > i {
  background: linear-gradient(90deg, #ff3b52, #ff9a9a);
}

.bar.core > span {
  line-height: 20px;
  font-size: 11px;
}

.corerow {
  margin-top: 5px;
  font-size: 11.5px;
  opacity: 0.78;
  display: flex;
  gap: 7px;
  justify-content: center;
}

.corebox.urgent {
  animation: urgent 0.8s ease-in-out infinite;
}

@keyframes urgent {
  0%,
  100% {
    box-shadow: 0 0 22px rgba(255, 40, 60, 0.35);
    border-color: rgba(255, 80, 100, 0.6);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 40, 60, 0.95);
    border-color: rgba(255, 140, 150, 0.95);
  }
}

#coreWarn {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #ff8391;
  letter-spacing: 2px;
  opacity: 0;
  height: 0;
}

.corebox.urgent #coreWarn {
  opacity: 1;
  height: auto;
}

.bottombar {
  position: absolute;
  left: calc(18px + var(--sal));
  right: calc(18px + var(--sar));
  bottom: calc(14px + var(--sab));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.upglist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 62%;
}

.chip {
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(12, 26, 48, 0.86);
  border: 1px solid rgba(90, 200, 255, 0.35);
  color: #cdefff;
}

.chip b {
  color: #fff;
}

.chip.mine {
  border-color: rgba(58, 215, 255, 0.8);
  box-shadow: 0 0 12px rgba(58, 215, 255, 0.3);
}

.hintbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  opacity: 0.7;
  text-align: right;
}

.pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(20, 40, 70, 0.9);
  border: 1px solid rgba(120, 220, 255, 0.4);
  font-size: 11px;
  white-space: nowrap;
}

.pill.cd {
  border-color: rgba(255, 190, 90, 0.6);
  color: #ffd79a;
}

/* 掉落道具的临时增益 */
.pill.buff {
  border-color: rgba(255, 140, 90, 0.7);
  color: #ffc48f;
  background: rgba(60, 24, 16, 0.88);
  animation: buffpulse 0.9s ease-in-out infinite;
}

@keyframes buffpulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 140, 90, 0);
  }
  50% {
    box-shadow: 0 0 14px rgba(255, 140, 90, 0.55);
  }
}

#banner {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 58px;
  font-weight: 800;
  letter-spacing: 10px;
  color: #ffffff;
  text-shadow: 0 0 28px rgba(120, 220, 255, 0.95), 0 0 60px rgba(60, 150, 255, 0.65);
  opacity: 0;
}

#banner.show {
  animation: bannerin 2.6s ease-out forwards;
}

/* 战间契约 */
.ctrow {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ctcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 150px;
  max-width: 210px;
  flex: 1 1 0;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  border: 1px solid rgba(255, 150, 90, 0.45);
  background: linear-gradient(180deg, rgba(46, 22, 14, 0.85), rgba(20, 10, 6, 0.85));
  transition: border-color 0.12s ease, box-shadow 0.15s ease;
}

.ctcard .cticon {
  font-size: 18px;
  color: #ffc48f;
}

.ctcard b {
  font-size: 12.5px;
  letter-spacing: 1px;
}

.ctcard small {
  font-size: 10px;
  opacity: 0.7;
  line-height: 1.35;
  text-align: center;
}

.ctcard.sel {
  border-color: rgba(255, 220, 140, 0.95);
  box-shadow: 0 0 18px rgba(255, 170, 60, 0.4);
  background: linear-gradient(180deg, rgba(78, 40, 18, 0.95), rgba(36, 18, 8, 0.95));
}

html.is-touch .ctcard {
  min-width: 0;
  flex: 1 1 30%;
  padding: 6px 6px;
}

html.is-touch .ctcard small {
  display: none;
}

/* 当前武器高亮 (HUD 武器条) */
.prow .wpn .wicon {
  opacity: 0.4;
  margin: 0 1px;
}

.prow .wpn .wicon.on {
  opacity: 1;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(140, 230, 255, 0.95);
}

/* 换武器键 (触屏) */
.tswap {
  position: fixed;
  left: calc(50% + 78px);
  bottom: calc(10px + var(--sab));
  transform: translateX(-50%);
  pointer-events: auto;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #cdefff;
  background: rgba(8, 16, 32, 0.82);
  border: 1px solid rgba(120, 220, 255, 0.4);
  backdrop-filter: blur(8px);
}

#touchui:not(.show) .tswap {
  pointer-events: none;
}

/* 难度 / 波次词缀 */
.mutrow {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.mutchip {
  font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20, 40, 70, 0.85);
  border: 1px solid rgba(120, 220, 255, 0.35);
  color: #bfe6ff;
  white-space: nowrap;
}

.mutchip.diff {
  border-color: rgba(160, 255, 200, 0.45);
  color: #b6ffd0;
}

.mutchip.dis {
  border-color: rgba(255, 90, 90, 0.7);
  color: #ff9a9a;
  background: rgba(52, 12, 12, 0.88);
}

.mutchip.mod {
  border-color: rgba(180, 160, 255, 0.7);
  color: #d6c8ff;
  background: rgba(28, 20, 52, 0.88);
}

.mutchip.mut {
  border-color: rgba(255, 150, 90, 0.55);
  color: #ffc48f;
  background: rgba(48, 22, 12, 0.85);
}

/* ---------------------------------------------------------------- 装备 / 物品栏 */

.loTop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}

.loSide {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.loslot {
  width: 168px;
  min-height: 88px;
  padding: 6px;
  border-radius: 12px;
  border: 1px dashed rgba(120, 200, 255, 0.35);
  background: rgba(10, 22, 40, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, box-shadow 0.15s ease;
}

.loslot:not(.empty) {
  border-style: solid;
  border-color: rgba(120, 220, 255, 0.5);
}

.loslot.empty {
  opacity: 0.65;
}

.loHero {
  width: 176px;
  text-align: center;
}

.loMech {
  position: relative;
  width: 104px;
  height: 120px;
  margin: 0 auto 8px;
  border-radius: 26px 26px 16px 16px;
  background: linear-gradient(180deg, rgba(58, 215, 255, 0.35), rgba(12, 30, 54, 0.9));
  border: 2px solid rgba(140, 230, 255, 0.55);
  box-shadow: 0 0 26px rgba(58, 215, 255, 0.25) inset, 0 0 22px rgba(58, 215, 255, 0.2);
}

.loMech i {
  position: absolute;
  left: 50%;
  top: 26px;
  width: 44px;
  height: 18px;
  margin-left: -22px;
  border-radius: 999px;
  background: rgba(220, 250, 255, 0.9);
  box-shadow: 0 0 18px rgba(160, 240, 255, 0.9);
}

.loMech b {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 245, 255, 0.95), rgba(40, 150, 200, 0.4));
  box-shadow: 0 0 22px rgba(120, 230, 255, 0.8);
}

.loName {
  font-size: 13px;
  letter-spacing: 2px;
  color: #cfe9ff;
}

.loStats {
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.75;
}

.loCombo {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 8px;
}

.combochip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20, 40, 70, 0.85);
  border: 1px solid rgba(120, 220, 255, 0.3);
  color: #bfe6ff;
}

.combochip.on {
  border-color: rgba(255, 200, 90, 0.75);
  color: #ffd79a;
  background: rgba(52, 34, 10, 0.85);
}

.loBottom {
  margin-top: 14px;
}

.loBagHead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.85;
  margin-bottom: 6px;
}

.loBagHead small {
  font-size: 10px;
  opacity: 0.6;
  letter-spacing: 0;
}

.loBag {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 96px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(8, 18, 34, 0.65);
  border: 1px solid rgba(90, 170, 220, 0.25);
}

.loitem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 132px;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: grab;
  border: 1px solid rgba(120, 200, 255, 0.4);
  background: linear-gradient(180deg, rgba(18, 34, 66, 0.9), rgba(8, 16, 34, 0.9));
  touch-action: none;
}

.loitem .loicon {
  font-size: 18px;
  color: #8fe4ff;
}

.loitem b {
  font-size: 12px;
  letter-spacing: 1px;
}

.loitem small {
  font-size: 9.5px;
  opacity: 0.62;
  text-align: center;
  line-height: 1.3;
}

.loitem .locount {
  position: absolute;
  right: 6px;
  top: 4px;
  font-size: 10px;
  color: #ffd79a;
}

.loempty {
  font-size: 11px;
  opacity: 0.5;
}

.loSell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 170, 90, 0.6);
  background: rgba(46, 24, 10, 0.55);
  font-size: 12px;
  color: #ffc48f;
  letter-spacing: 1px;
}

.loSell .loSellIcon {
  font-size: 16px;
}

.loSell b {
  opacity: 0.75;
}

.dragghost {
  position: fixed;
  z-index: 90;
  transform: translate(-50%, -50%);
  pointer-events: none;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  color: #e8fbff;
  background: rgba(16, 40, 70, 0.95);
  border: 1px solid rgba(140, 230, 255, 0.8);
  box-shadow: 0 0 18px rgba(58, 215, 255, 0.5);
}

html.is-touch .loslot {
  width: 118px;
  min-height: 70px;
}

/* 触屏: 装备界面压缩到一屏内 */
html.is-touch #loadoutScreen .panel {
  max-height: calc(100% - 14px);
  padding: 10px 14px 12px;
  overflow: auto;
}

html.is-touch #loadoutScreen .title {
  font-size: 16px;
  letter-spacing: 3px;
  margin-bottom: 4px;
}

html.is-touch #loadoutScreen .loslot {
  width: 102px;
  min-height: 56px;
  padding: 4px;
}

html.is-touch #loadoutScreen .loitem {
  width: 88px;
  padding: 5px 4px;
}

html.is-touch #loadoutScreen .loitem b {
  font-size: 11px;
}

html.is-touch #loadoutScreen .loitem .loicon {
  font-size: 15px;
}

html.is-touch #loadoutScreen .loBag {
  min-height: 46px;
  padding: 5px;
  gap: 6px;
}

html.is-touch #loadoutScreen .loSell {
  margin-top: 6px;
  padding: 6px;
  font-size: 11px;
}

html.is-touch #loadoutScreen .btnrow {
  margin-top: 8px;
}

html.is-touch #loadoutScreen .btn {
  padding: 7px 16px;
  font-size: 13px;
}

html.is-touch #loadoutScreen .loMech {
  width: 62px;
  height: 72px;
  margin-bottom: 4px;
}

html.is-touch #loadoutScreen .loHero {
  width: 104px;
}

html.is-touch #loadoutScreen .loStats {
  display: none;
}

html.is-touch #loadoutScreen .loCombo {
  margin-top: 4px;
  gap: 4px;
}

html.is-touch #loadoutScreen .combochip {
  font-size: 9px;
  padding: 1px 6px;
}

html.is-touch #loadoutScreen .loBagHead small {
  display: none;
}

html.is-touch .loitem {
  width: 104px;
}

html.is-touch .loitem small {
  display: none;
}

html.is-touch .loMech {
  width: 76px;
  height: 88px;
}

html.is-touch .loHero {
  width: 120px;
}

/* 设置面板 */
.setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(16, 30, 52, 0.72);
  border: 1px solid rgba(90, 170, 220, 0.28);
}

.setrow .setlabel {
  font-size: 14px;
  letter-spacing: 2px;
  color: #cfe9ff;
  white-space: nowrap;
}

.setrow .setbtns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.setrow .setbtns .btn {
  padding: 6px 14px;
  font-size: 13px;
  margin: 0;
}

#setScreen .footnote {
  margin-top: 14px;
}

/* BOSS 血条 */
.bossbar {
  position: absolute;
  top: calc(112px + var(--sat));
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 62vw);
  padding: 8px 14px 10px;
  border-radius: 12px;
  background: rgba(24, 8, 20, 0.72);
  border: 1px solid rgba(255, 90, 90, 0.5);
  box-shadow: 0 0 26px rgba(255, 60, 60, 0.25);
  pointer-events: none;
}

/* 触屏: 顶部 HUD 更矮, 血条跟着上移收窄 */
html.is-touch .bossbar {
  top: calc(84px + var(--sat));
  width: min(320px, 46vw);
  padding: 5px 10px 7px;
}

html.is-touch .bossbar .bossname {
  font-size: 12px;
  letter-spacing: 2px;
}

html.is-touch .bossbar .bosssub {
  font-size: 9.5px;
}

.bossbar .bosstop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.bossbar .bossname {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #ffb3a8;
  text-shadow: 0 0 14px rgba(255, 90, 60, 0.85);
}

.bossbar .bosssub {
  font-size: 11px;
  opacity: 0.75;
}

.bossbar .bosshp {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.bossbar .bosshp > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #ff4d3d, #ff9a3c);
  transition: width 0.12s linear;
}

.bossbar .bosshp > i.shield {
  background: linear-gradient(90deg, #4fd8ff, #a58cff);
  opacity: 0.9;
  top: 0;
  bottom: 0;
}

/* 连杀飘字 */
#combo {  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #ffd76a;
  text-shadow: 0 0 20px rgba(255, 170, 60, 0.9), 0 0 44px rgba(255, 110, 40, 0.55);
  opacity: 0;
  pointer-events: none;
}

#combo.big {
  font-size: 42px;
  color: #ff9a5c;
}

#combo.pop {
  animation: combopop 0.75s ease-out forwards;
}

@keyframes combopop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.6);
  }
  22% {
    opacity: 1;
    transform: translateX(-50%) scale(1.18);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.02) translateY(-14px);
  }
}

#banner small {
  display: block;
  font-size: 16px;
  letter-spacing: 5px;
  font-weight: 400;
  margin-top: 6px;
  opacity: 0.85;
}

@keyframes bannerin {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  12% {
    opacity: 1;
    transform: scale(1.03);
  }
  22% {
    transform: scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

#downed {
  position: absolute;
  top: 46%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #ff8493;
  text-shadow: 0 0 24px rgba(255, 40, 70, 0.8);
  letter-spacing: 3px;
  pointer-events: none;
}

#respawnHint {
  position: absolute;
  top: 54%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
  letter-spacing: 2px;
}

#toasts {
  position: absolute;
  right: calc(18px + var(--sar));
  top: calc(110px + var(--sat));
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.toast {
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(8, 16, 32, 0.9);
  border-left: 3px solid var(--cyan);
  animation: toastin 0.25s ease-out;
  max-width: 320px;
}

.toast.bad {
  border-left-color: var(--red);
}

.toast.ok {
  border-left-color: var(--green);
}

.toast.fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

@keyframes toastin {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- 全屏面板 */

.screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(22px + var(--sat)) calc(22px + var(--sar)) calc(22px + var(--sab)) calc(22px + var(--sal));
  background: radial-gradient(ellipse at center, rgba(6, 12, 28, 0.72) 0%, rgba(2, 4, 10, 0.93) 100%);
  overflow: auto;
}

.screen > .panel {
  margin: auto;
}

/* 战间准备/基地商店: 不挡视野, 不挡操作 (面板本身可点) */
.screen.pass {
  pointer-events: none;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(2, 4, 10, 0.72) 0%, rgba(2, 4, 10, 0.35) 42%, rgba(2, 4, 10, 0) 68%);
}

.screen.pass > .panel {
  pointer-events: auto;
  margin-top: calc(6px + var(--sat));
  max-height: calc(100% - 190px);
  overflow: hidden;
  touch-action: pan-y;
}

/* 触屏: 面板要盖住摇杆上方的按钮层, 但别压到摇杆 */
html.is-touch .screen.pass > .panel {
  max-height: calc(100% - 172px);
}

.basehint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(64px + var(--sab));
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(8, 20, 36, 0.88);
  border: 1px solid rgba(120, 220, 255, 0.45);
  color: #cdefff;
  z-index: 8;
}

.panel {
  width: min(620px, 100%);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  padding: 26px 30px 24px;
  box-shadow: 0 0 60px rgba(0, 120, 220, 0.25), inset 0 0 60px rgba(20, 80, 160, 0.08);
  text-align: center;
  backdrop-filter: blur(7px);
}

.panel.wide {
  width: min(980px, 100%);
}

.panel.small {
  width: min(420px, 100%);
}

.title {
  font-size: 40px;
  letter-spacing: 12px;
  font-weight: 800;
  background: linear-gradient(90deg, #6fe6ff, #b98cff 55%, #ffb35c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(90, 200, 255, 0.25);
}

.title.smalltitle {
  font-size: 30px;
}

.title.warn {
  background: linear-gradient(90deg, #ffb3b3, #ff5d72);
  -webkit-background-clip: text;
  background-clip: text;
}

.subtitle {
  margin-top: 8px;
  font-size: 13.5px;
  opacity: 0.82;
  line-height: 1.7;
}

.statusrow {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 14px;
}

.pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffb648;
  box-shadow: 0 0 10px currentColor;
  animation: blink 1s infinite;
}

.pip.ok {
  background: var(--green);
  animation: none;
}

.pip.bad {
  background: var(--red);
  animation: none;
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

.slots {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.slot {
  flex: 1;
  border: 1px solid rgba(120, 200, 255, 0.3);
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  background: rgba(10, 20, 40, 0.6);
}

.slot.filled {
  border-color: rgba(80, 230, 160, 0.65);
  box-shadow: 0 0 18px rgba(60, 220, 150, 0.22);
}

.slot.mine {
  background: rgba(20, 60, 90, 0.65);
}

.slot span {
  opacity: 0.85;
}

.lanbox {
  margin-top: 18px;
  background: rgba(6, 14, 30, 0.75);
  border: 1px dashed rgba(110, 200, 255, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
}

.lantitle {
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.65;
  margin-bottom: 7px;
}

.lanurls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lanurls code {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(30, 70, 120, 0.55);
  border: 1px solid rgba(90, 200, 255, 0.35);
  color: #b8ecff;
}

.lanhint {
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.6;
  line-height: 1.6;
}

.ctrlgrid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-size: 12.5px;
}

.ctrlgrid > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
}

.ctrlgrid b {
  color: #9fe4ff;
  font-weight: 600;
}

.footnote {
  margin-top: 16px;
  font-size: 11.5px;
  opacity: 0.6;
  line-height: 1.7;
}

/* ---------------------------------------------------------------- 强化卡 */

.cardtitle {
  font-size: 22px;
  letter-spacing: 5px;
  color: #cdeeff;
}

.cardtimer {
  position: relative;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  margin: 14px auto 6px;
  width: 76%;
  overflow: hidden;
}

.cardtimer > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #47d7ff, #a58cff);
}

.cardtimer > span {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 11px;
  opacity: 0.7;
}

.cardwrap {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  width: 240px;
  min-height: 186px;
  border-radius: 14px;
  border: 1px solid rgba(120, 200, 255, 0.35);
  background: linear-gradient(180deg, rgba(18, 34, 66, 0.95), rgba(8, 16, 34, 0.95));
  padding: 16px 14px 14px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  color: inherit;
  font-family: inherit;
}

.card:hover {
  transform: translateY(-5px);
  border-color: rgba(150, 230, 255, 0.9);
  box-shadow: 0 12px 34px rgba(0, 140, 255, 0.35);
}

.card:disabled {
  opacity: 0.42;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.card .icon {
  font-size: 34px;
  line-height: 1;
  color: #8fe4ff;
  text-shadow: 0 0 18px rgba(90, 210, 255, 0.8);
}

.card .cname {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2px;
}

.card .cdesc {
  font-size: 12.5px;
  opacity: 0.78;
  line-height: 1.6;
}

.card .cstack {
  font-size: 11px;
  opacity: 0.6;
  margin-top: auto;
}

.cardsWaiting {
  margin-top: 16px;
  font-size: 13px;
  color: var(--green);
  letter-spacing: 2px;
}

.cardrow {
  margin-top: 14px;
}

.cardowner {
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.7;
}

.cardrow .cardowner {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--orange);
  opacity: 0.85;
}

.cardrow .cardwrap {
  margin-top: 0;
}

.card.sel {
  border-color: rgba(180, 240, 255, 0.95);
  transform: translateY(-5px);
  box-shadow: 0 12px 34px rgba(0, 170, 255, 0.45);
}

.cardrow .card.sel {
  border-color: rgba(255, 200, 140, 0.95);
  box-shadow: 0 12px 34px rgba(255, 150, 60, 0.4);
}

.gamepadhint {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  opacity: 0.6;
}

.pcard.local2 {
  border-color: rgba(255, 154, 60, 0.75);
}

/* ---------------------------------------------------------------- 初始武器选择 */

.picker {
  margin-top: 14px;
}

.picktitle {
  font-size: 12px;
  opacity: 0.72;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.pickrow {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.wbtn {
  flex: 1 1 0;
  min-width: 112px;
  max-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px 9px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(120, 200, 255, 0.32);
  background: linear-gradient(180deg, rgba(18, 34, 66, 0.85), rgba(8, 16, 34, 0.85));
  color: inherit;
  font-family: inherit;
  text-align: center;
  transition: border-color 0.12s ease, box-shadow 0.15s ease;
}

.wbtn .wicon {
  font-size: 20px;
  color: #8fe4ff;
}

.wbtn b {
  font-size: 12.5px;
  letter-spacing: 1px;
}

.wbtn small {
  font-size: 10px;
  opacity: 0.65;
  line-height: 1.35;
}

.wbtn.sel {
  border-color: rgba(150, 230, 255, 0.95);
  box-shadow: 0 0 16px rgba(58, 215, 255, 0.35);
  background: rgba(24, 60, 96, 0.9);
}

#weaponRow2 .wbtn.sel {
  border-color: rgba(255, 200, 140, 0.95);
  box-shadow: 0 0 16px rgba(255, 154, 60, 0.35);
}

/* ---------------------------------------------------------------- 护盾 / 金币 / 武器 */

.bar.shield {
  height: 14px;
  margin-top: 4px;
}

.bar.shield > i {
  background: linear-gradient(90deg, #4fb6ff, #b8ecff);
  box-shadow: 0 0 10px rgba(90, 200, 255, 0.6);
}

.bar.shield > span {
  line-height: 14px;
  font-size: 9.5px;
}

.bar.shield.off > i {
  background: linear-gradient(90deg, #43535f, #6b7f8f);
  box-shadow: none;
}

.prow .coin {
  color: #ffd257;
}

.prow .wpn {
  color: #9fe4ff;
  letter-spacing: 2px;
}

/* ---------------------------------------------------------------- 主动技能条 */

.skillrow {
  display: flex;
  gap: 6px;
  pointer-events: auto;
}

.skillbtn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(120, 220, 255, 0.45);
  background: rgba(10, 22, 42, 0.9);
  color: #cdeeff;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.skillbtn.cd {
  border-color: rgba(255, 190, 90, 0.5);
  color: #ffd79a;
}

.skillbtn.off {
  opacity: 0.35;
  cursor: default;
}

.skillbtn .cdmask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(4, 10, 22, 0.66);
  border-radius: 10px;
}

html.is-touch .skillbtn {
  width: 46px;
  height: 46px;
  font-size: 20px;
}

/* ---------------------------------------------------------------- 下一波情报 */

.nextwave {
  margin-top: 12px;
}

.nwtypes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}

.nwtype {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(12, 26, 48, 0.86);
  border: 1px solid rgba(90, 200, 255, 0.3);
  color: #cdefff;
}

.nwtype.boss {
  border-color: rgba(255, 120, 90, 0.8);
  color: #ffb0a0;
}

.nwmut {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.mutcard {
  min-width: 180px;
  text-align: left;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(120, 200, 255, 0.3);
  background: rgba(10, 22, 42, 0.9);
  color: #cdeeff;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mutcard b {
  font-size: 12.5px;
}

.mutcard small {
  font-size: 11.5px;
  opacity: 0.75;
}

.mutcard.sel {
  border-color: rgba(58, 215, 255, 0.9);
  box-shadow: 0 0 14px rgba(58, 215, 255, 0.35);
}

/* 给队友 */
.loGive {
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(140, 255, 200, 0.5);
  background: rgba(10, 34, 24, 0.5);
  color: #b8ffe0;
  text-align: center;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.loGive.hidden {
  display: none;
}

/* ---------------------------------------------------------------- 战间条 (倒计时 + 开始下一波) */

#interBar {
  position: fixed;
  left: 50%;
  bottom: calc(58px + var(--sab));
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(8, 18, 34, 0.93);
  border: 1px solid rgba(90, 200, 255, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#interBar.hidden {
  display: none;
}

#interBar .interTimer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* 进度条本体: 固定长度, 填充宽度由内联 style.width 控制 (会随时间缩短) */
#interBar .cardtimer {
  position: relative;
  width: 128px;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

#interBar .cardtimer > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #47d7ff, #a58cff);
  transition: width 0.25s linear;
}

#interBar #cardsTimerTxt {
  font-size: 12.5px;
  font-weight: 700;
  color: #cdeeff;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}

#interBar .btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 13.5px;
}

/* 手机上收紧战间条: 一行放下倒计时 + 全部按钮, 不遮住摇杆 */
html.is-touch #interBar {
  bottom: calc(50px + var(--sab));
  gap: 6px;
  padding: 6px 10px;
  max-width: calc(100vw - 14px);
}

html.is-touch #interBar .cardtimer {
  width: 96px;
}

html.is-touch #interBar .btn {
  padding: 7px 11px;
  font-size: 12.5px;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------- 战间商店 */

.shopwrap {
  margin-top: 14px;
  text-align: left;
}

.shophead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 8px;
}

.shophead b {
  color: #ffd257;
  font-size: 14px;
}

.shopwind {
  font-size: 10.5px;
  opacity: 0.6;
}

.shoprow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

@media (min-width: 900px) {
  .shoprow {
    grid-template-columns: 1fr 1fr;
  }
}

/* 双人同行强化卡: 压缩卡片高度, 给商店留出空间 */
#cardsScreen .panel.two .card {
  min-height: 104px;
  padding: 9px 9px 8px;
}

#cardsScreen .panel.two .card .cname {
  font-size: 14px;
}

#cardsScreen .panel.two .card .icon {
  font-size: 22px;
}

#cardsScreen .panel.two .cardwrap {
  margin-top: 0;
  gap: 10px;
}

#cardsScreen .panel.two .cardowner {
  margin-top: 10px;
  font-size: 11px;
}

#cardsScreen .panel.two .card .cstack {
  display: none;
}

/* 强化卡面板: 内容滚动, 按钮固定在面板底部 (不遮挡内容) */
#cardsScreen .panel {
  display: flex;
  flex-direction: column;
}

#cardsScreen .prepScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  touch-action: pan-y;
}

#cardsScreen .panel #prepButtons {
  flex: 0 0 auto;
  margin-top: 10px;
}

/* 开局倒计时 (选初始武器): 内容比战间准备少, 收紧尺寸让武器行完整可见 */
#pickScreen .panel #pickTitle {
  margin: 0 0 6px;
}

#pickScreen .cardowner {
  margin-top: 6px;
}

#pickScreen #loadoutHint {
  margin-top: 8px;
}

html.is-touch #pickScreen .panel,
html.is-touch #cardsScreen .panel {
  max-height: calc(100% - 150px);
}

html.is-touch #loadoutSection .wbtn {
  min-width: 0;
  max-width: none;
  flex: 1 1 22%;
  padding: 6px 4px 7px;
}

html.is-touch #loadoutSection .wbtn small {
  display: none;
}

.sitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(120, 200, 255, 0.22);
  background: rgba(10, 20, 40, 0.6);
}

.sitem.sel {
  border-color: rgba(150, 230, 255, 0.9);
  box-shadow: 0 0 14px rgba(58, 215, 255, 0.28);
}

.sicon {
  font-size: 20px;
  color: #8fe4ff;
  width: 26px;
  text-align: center;
}

.smain {
  flex: 1;
}

.sname {
  font-size: 13px;
  font-weight: 700;
}

.sdesc {
  font-size: 10.5px;
  opacity: 0.65;
}

.sbtns {
  display: flex;
  gap: 6px;
}

.sbtn {
  pointer-events: auto;
  font-family: inherit;
  font-size: 11.5px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120, 210, 255, 0.5);
  background: rgba(20, 50, 90, 0.85);
  color: #e6f7ff;
  cursor: pointer;
  white-space: nowrap;
}

.sbtn:disabled {
  opacity: 0.4;
  cursor: default;
}

#repairBtn.down {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------- 结算 */

.statwrap {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px 12px;
  font-size: 14px;
}

.statwrap .sh {
  font-size: 12px;
  opacity: 0.6;
  letter-spacing: 2px;
}

.statwrap .s0 {
  text-align: right;
  color: var(--cyan);
}

.statwrap .s1 {
  text-align: left;
  color: var(--orange);
}

.statwrap .sr {
  opacity: 0.55;
  font-size: 12px;
}

.statwrap.solo .s0 {
  color: #9fe4ff;
}

.pcard.empty {
  opacity: 0.5;
}

.btnrow {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  pointer-events: auto;
  font-family: inherit;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid rgba(120, 210, 255, 0.6);
  background: linear-gradient(180deg, rgba(30, 70, 120, 0.95), rgba(14, 34, 64, 0.95));
  color: #e6f7ff;
  cursor: pointer;
  letter-spacing: 2px;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 150, 255, 0.4);
}

.btn.primary {
  border-color: rgba(120, 255, 220, 0.7);
  background: linear-gradient(180deg, rgba(24, 120, 110, 0.95), rgba(10, 50, 60, 0.95));
}

.btn.ghost {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

.btn.big {
  font-size: 17px;
  padding: 14px 40px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.readyrow {
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.75;
}

/* ---------------------------------------------------------------- 触屏适配 */

.touch-only {
  display: none !important;
}

html.is-touch .touch-only {
  display: block !important;
}

html.is-touch .kb-only {
  display: none !important;
}

html.is-touch .ctrlgrid.touch-only {
  display: grid !important;
}

html.is-touch .hintbox .touch-only {
  display: inline-block !important;
}

html.is-touch .screen {
  touch-action: pan-y;
}

.modebtn {
  margin-top: 14px;
  font-size: 12.5px;
  padding: 8px 18px;
}

/* ---------------------------------------------------------------- 虚拟双摇杆 */

#touchui {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

#touchui.show {
  opacity: 1;
}

#touchui:not(.show) .tdash,
#touchui:not(.show) .tfs {
  pointer-events: none;
}

.tstick {
  position: fixed;
  left: 0;
  top: 0;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  pointer-events: none;
  will-change: transform;
}

.tstick .tbase {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(90, 200, 255, 0.32);
  background: radial-gradient(circle at 50% 45%, rgba(12, 26, 48, 0.52), rgba(4, 8, 18, 0.34));
  backdrop-filter: blur(3px);
  box-shadow: inset 0 0 22px rgba(58, 215, 255, 0.12);
}

.tstick .tknob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(140, 232, 255, 0.9), rgba(20, 116, 144, 0.75));
  border: 1.5px solid rgba(165, 243, 252, 0.75);
  box-shadow: 0 0 16px rgba(58, 215, 255, 0.45);
  will-change: transform;
}

#tStickAim .tknob {
  background: radial-gradient(circle at 40% 35%, rgba(255, 201, 140, 0.92), rgba(194, 96, 31, 0.75));
  border-color: rgba(255, 216, 170, 0.8);
  box-shadow: 0 0 16px rgba(255, 154, 60, 0.45);
}

.tstick.active .tbase {
  border-color: rgba(58, 215, 255, 0.75);
  background: radial-gradient(circle at 50% 45%, rgba(12, 26, 48, 0.62), rgba(4, 8, 18, 0.45));
}

#tStickAim.active .tbase {
  border-color: rgba(255, 154, 60, 0.75);
}

.tstick .tlabel {
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  font-size: 10.5px;
  letter-spacing: 2px;
  color: rgba(139, 176, 200, 0.8);
  white-space: nowrap;
}

#tStickAim .tlabel {
  color: rgba(255, 176, 110, 0.8);
}

.tdash {
  position: fixed;
  right: calc(26px + var(--sar));
  bottom: calc(178px + var(--sab));
  width: 74px;
  height: 74px;
  border-radius: 50%;
  pointer-events: auto;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #04180c;
  background: radial-gradient(circle at 42% 34%, #d8ffe9, #4be08a 62%, #1c8a55);
  border: 2px solid rgba(220, 255, 236, 0.85);
  box-shadow: 0 8px 22px rgba(75, 224, 138, 0.38), inset 0 0 18px rgba(255, 255, 255, 0.25);
  touch-action: none;
  transition: transform 0.08s ease, filter 0.08s ease;
}

.tdash.down {
  transform: scale(0.92);
  filter: brightness(1.15);
}

.tshop {
  position: fixed;
  right: calc(112px + var(--sar));
  bottom: calc(178px + var(--sab));
  width: 84px;
  height: 62px;
  border-radius: 16px;
  pointer-events: auto;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #241503;
  background: radial-gradient(circle at 42% 34%, #ffe9b8, #ffc24a 62%, #c98a1f);
  border: 2px solid rgba(255, 248, 220, 0.9);
  box-shadow: 0 8px 22px rgba(255, 190, 60, 0.4), inset 0 0 18px rgba(255, 255, 255, 0.3);
  touch-action: none;
}

.tshop.open {
  filter: brightness(0.9) saturate(0.8);
}

#touchui:not(.show) .tshop {
  pointer-events: none;
}

.tfs {
  position: fixed;
  left: 50%;
  bottom: calc(10px + var(--sab));
  transform: translateX(-50%);
  pointer-events: auto;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 7px 14px;
  border-radius: 999px;
  color: #cdefff;
  background: rgba(8, 16, 32, 0.82);
  border: 1px solid rgba(120, 220, 255, 0.4);
  backdrop-filter: blur(8px);
}

/* 设置键 (触屏: 没有 ESC) */
.tset {
  position: fixed;
  left: calc(50% - 78px);
  bottom: calc(10px + var(--sab));
  transform: translateX(-50%);
  pointer-events: auto;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #cdefff;
  background: rgba(8, 16, 32, 0.82);
  border: 1px solid rgba(120, 220, 255, 0.4);
  backdrop-filter: blur(8px);
}

#touchui:not(.show) .tset {
  pointer-events: none;
}

/* ---------------------------------------------------------------- 竖屏提示 */

#tRotate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: radial-gradient(900px 600px at 50% 40%, rgba(9, 16, 34, 0.92), rgba(2, 4, 10, 0.96));
  backdrop-filter: blur(4px);
  text-align: center;
  padding: 24px;
}

#tRotate.show {
  display: flex;
}

#tRotate .ricon {
  width: 86px;
  height: 86px;
  border-radius: 20px;
  border: 2px solid rgba(58, 215, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rot 2.2s ease-in-out infinite;
}

#tRotate .ricon i {
  display: block;
  width: 40px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(92deg, var(--cyan), var(--orange));
  box-shadow: 0 0 18px rgba(58, 215, 255, 0.5);
}

@keyframes rot {
  0%,
  45% {
    transform: rotate(0deg);
  }
  60%,
  100% {
    transform: rotate(90deg);
  }
}

#tRotate .rtitle {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
}

#tRotate .rsub {
  font-size: 12px;
  opacity: 0.65;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------- 小屏 / 手机横屏 */

@media (max-width: 980px) {
  .topbar {
    gap: 8px;
    padding: calc(8px + var(--sat)) calc(10px + var(--sar)) 8px calc(10px + var(--sal));
  }

  .pcard {
    min-width: 0;
    padding: 7px 9px;
    border-radius: 10px;
  }

  .prow {
    font-size: 12px;
  }

  .prow.small {
    font-size: 10px;
    margin-top: 3px;
  }

  .bar {
    height: 13px;
    margin-top: 5px;
  }

  .bar > span {
    font-size: 9px;
    line-height: 13px;
  }

  .corebox {
    min-width: 0;
    padding: 7px 10px 8px;
  }

  .corelabel {
    font-size: 12.5px;
    letter-spacing: 2px;
  }

  .bar.core {
    height: 16px;
  }

  .bar.core > span {
    font-size: 10px;
    line-height: 16px;
  }

  .corerow {
    font-size: 10px;
    gap: 5px;
  }

  .upglist {
    max-width: 46%;
  }

  .chip {
    font-size: 10px;
    padding: 3px 7px;
  }

  .hintbox {
    font-size: 10px;
    gap: 6px;
  }

  .pill {
    font-size: 10px;
    padding: 3px 8px;
  }

  #banner {
    font-size: 38px;
    letter-spacing: 6px;
  }

  #banner small {
    font-size: 13px;
    letter-spacing: 3px;
  }

  #downed {
    font-size: 22px;
  }

  #respawnHint {
    font-size: 11px;
  }

  #toasts {
    top: calc(96px + var(--sat));
    right: calc(10px + var(--sar));
  }

  .toast {
    font-size: 11.5px;
    padding: 5px 9px;
    max-width: 60vw;
  }

  .panel {
    padding: 18px 18px 16px;
    border-radius: 14px;
  }

  .panel.small {
    width: min(360px, 100%);
  }

  .title {
    font-size: 30px;
    letter-spacing: 8px;
  }

  .title.smalltitle {
    font-size: 24px;
  }

  .subtitle {
    font-size: 12px;
    line-height: 1.55;
  }

  .statusrow {
    margin-top: 10px;
    font-size: 12.5px;
  }

  .slots {
    gap: 8px;
    margin-top: 10px;
  }

  .slot {
    padding: 8px 10px;
    font-size: 11.5px;
  }

  .lanbox {
    margin-top: 12px;
    padding: 9px 10px;
  }

  .lanurls code {
    font-size: 11px;
    padding: 3px 7px;
  }

  .lantitle {
    font-size: 11px;
    margin-bottom: 5px;
  }

  .lanhint {
    font-size: 10px;
  }

  .ctrlgrid {
    margin-top: 10px;
    gap: 6px;
    font-size: 11px;
  }

  .ctrlgrid > div {
    padding: 6px 9px;
  }

  .footnote {
    margin-top: 10px;
    font-size: 10.5px;
    line-height: 1.5;
  }

  .cardtitle {
    font-size: 17px;
    letter-spacing: 3px;
  }

  .cardwrap {
    gap: 10px;
    margin-top: 22px;
  }

  .card {
    width: 190px;
    min-height: 148px;
    padding: 12px 10px 10px;
    gap: 6px;
  }

  .card .icon {
    font-size: 26px;
  }

  .card .cname {
    font-size: 15px;
    letter-spacing: 1px;
  }

  .card .cdesc {
    font-size: 11px;
    line-height: 1.45;
  }

  .card .cstack {
    font-size: 10px;
  }

  .statwrap {
    margin-top: 12px;
    font-size: 12px;
  }

  .btnrow {
    margin-top: 16px;
    gap: 9px;
  }

  .btn {
    font-size: 13px;
    padding: 10px 18px;
  }

  .btn.big {
    font-size: 15px;
    padding: 12px 30px;
  }
}

@media (orientation: portrait) {
  .topbar {
    flex-wrap: wrap;
  }

  .corebox {
    order: -1;
    flex: 1 1 100%;
  }

  .pcard {
    flex: 1 1 0;
  }

  .bottombar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .upglist {
    max-width: 100%;
  }

  .hintbox {
    justify-content: flex-end;
  }
}

/* 竖屏触控: 隐藏底部提示条, 避免与摇杆标签打架 */
@media (orientation: portrait) {
  html.is-touch .hintbox {
    display: none;
  }
}

/* 手机横屏: 进一步压缩 HUD, 给摇杆留空间 */
@media (max-height: 460px) {
  #banner {
    font-size: 30px;
  }

  .upglist {
    max-width: 40%;
  }

  .upglist .chip {
    font-size: 9.5px;
  }

  .hintbox .touch-only {
    display: none !important;
  }

  /* 手机横屏: 选初始武器的面板再省一点高度 */
  #loadoutHint {
    display: none;
  }

  html.is-touch #loadoutSection .wbtn .wicon {
    display: none;
  }
}