/* 城市精灵GO · 网页模拟版 —— 仿原版深蓝科幻配色 */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #050a18;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

body {
  font: 14px/1.5 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #dff1ff;
  user-select: none;
}

img {
  -webkit-user-drag: none;
}

/* ---------------- 滚动条美化 ---------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: #2f6ea8 rgba(4, 16, 34, .6);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(4, 16, 34, .6);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid transparent;
  background: linear-gradient(180deg, #7cd4ff, #1d5a95) padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #b6ecff, #2a86cf) padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #7cd4ff, #3f8fd0) padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

#boot {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7fd4ff;
  font-size: 18px;
  letter-spacing: 2px;
}

#boot[hidden] {
  display: none;
}

#boot.err {
  color: #ff8a8a;
  white-space: pre-line;
  text-align: center;
  padding: 40px;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ---------------- 顶栏 ---------------- */
#topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 58px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(9, 26, 58, .96), rgba(9, 26, 58, .55) 70%, transparent);
}

.tb-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #46b6ff;
  background: #0b2246;
  overflow: hidden;
  cursor: pointer;
}

.avatar canvas {
  width: 100%;
  height: 100%;
}

.avatar .lv {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  background: #123;
  border: 1px solid #46b6ff;
  border-radius: 8px;
  font-size: 10px;
  padding: 0 4px;
  color: #9fe0ff;
}

.tb-info {
  min-width: 180px;
}

.tb-name {
  font-size: 13px;
  color: #bfe6ff;
  display: flex;
  gap: 8px;
  align-items: center;
}

.tb-name .vip {
  color: #ffd469;
  font-size: 11px;
}

.expbar {
  height: 7px;
  width: 180px;
  background: #0a1c38;
  border: 1px solid #24507f;
  border-radius: 4px;
  overflow: hidden;
}

.expbar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2aa7ff, #7ce7ff);
}

.exp-txt {
  font-size: 10px;
  color: #6fa8cf;
}

.tb-right {
  display: flex;
  gap: 14px;
  align-items: center;
  cursor: pointer;
}

.res {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #e8f6ff;
  background: rgba(6, 22, 48, .7);
  border: 1px solid #1d4574;
  border-radius: 12px;
  padding: 2px 10px;
}

.res img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.res.gold b {
  color: #ffd469;
}

.res.dia b {
  color: #7ce7ff;
}

.res.eng b {
  color: #8dffb0;
}

/* ---------------- 屏幕基础 ---------------- */
.screen {
  position: absolute;
  inset: 58px 0 56px 0;
  overflow: hidden;
}

.screen[hidden] {
  display: none;
}

/* ---------------- 主城 ---------------- */
.home-bg {
  position: absolute;
  inset: 0;
  background: url("assets/bg/home_day.png") center/cover no-repeat;
}

.home-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(0, 0, 0, 0) 30%, rgba(2, 8, 22, .55) 100%);
}

.home-side {
  position: absolute;
  right: calc(12px + env(safe-area-inset-right));
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}

.sidebtn {
  width: 84px;
  padding: 7px 0;
  border-radius: 16px;
  cursor: pointer;
  border: 1px solid #3f8fd0;
  background: linear-gradient(180deg, #17538f, #0c2b53);
  color: #cdeaff;
  font-size: 13px;
}

.sidebtn:hover {
  filter: brightness(1.2);
}

.sidebtn.red {
  border-color: #ff9a6a;
  background: linear-gradient(180deg, #d1582c, #8a2f16);
  color: #ffe7d6;
}

/* ---------------- 主城舞台等比自适应（完全解除 Canvas 尺寸死锁） ---------------- */
.party {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(64px, 11vh);
  width: min(94vw, 1100px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(4px, 1.5vw, 20px);
  z-index: 4;
}
.pet-slot {
  flex: 0 1 140px;
  max-width: 140px;
  min-width: 65px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: visible;
}
.pet-slot .ring {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 128px;
  height: 32px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(180,240,255,.5), rgba(90,190,255,.15) 58%, rgba(0,0,0,0) 76%);
}
.pet-slot canvas {
  display: block;
  margin: 0 auto;
  position: relative;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.55));
  transition: transform .15s ease;
}
.pet-slot:hover canvas {
  transform: translateY(-6px) scale(1.06);
}
.pet-slot .nm {
  font-size: 12px;
  color: #eafaff;
  text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pet-slot .lvtag {
  font-size: 11px;
  color: #ffd469;
  text-shadow: 0 1px 3px #000;
}
.pet-slot .stars {
  font-size: 10px;
  color: #ffcf3f;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px #000;
}
/* ---------------- 精灵头顶动态对话气泡 ---------------- */
.bubble {
  position: absolute;
  background: rgba(255, 255, 255, 0.96);
  color: #0d2847;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  z-index: 25;
  pointer-events: none;
  max-width: 230px;
  line-height: 1.5;
  text-align: center;
  transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
  opacity: 0;
  transform: translate(-50%, 6px) scale(0.92);
}
.bubble.show {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}
/* 气泡底部指向说话精灵头顶的小指针 */
.bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(255, 255, 255, 0.96);
}

.home-hint {
  position: absolute;
  left: calc(12px + env(safe-area-inset-left));
  top: 8px;
  font-size: 11px;
  color: #d6ecff;
  z-index: 6;
  background: rgba(4, 16, 34, .6);
  border: 1px solid #1d4574;
  border-radius: 10px;
  padding: 3px 10px;
}

/* ---------------- 子页头与导航返回 ---------------- */
.sub-head {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
  background: linear-gradient(90deg, #0d3564, #0a2547);
  border-bottom: 1px solid #2b6ba8;
}

.sub-head>span:first-child {
  font-size: 15px;
  color: #9fe0ff;
  letter-spacing: 1px;
}

.nav-head-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.nav-back-btn {
  padding: 3px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  border: 1px solid #3f8fd0;
  background: linear-gradient(180deg, #17538f, #0c2b53);
  color: #cdeaff;
}

.nav-home-btn {
  width: 26px;
  height: 24px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  border: 1px solid #2b6ba8;
  background: #07203d;
  color: #9fe0ff;
}

.homebtn {
  padding: 3px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  flex: none;
  border: 1px solid #3f8fd0;
  background: linear-gradient(180deg, #17538f, #0c2b53);
  color: #cdeaff;
}

.homebtn:hover,
.nav-back-btn:hover,
.nav-home-btn:hover {
  filter: brightness(1.25);
}

.sub-head .chk {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #9dc8e6;
}

.sub-head input,
.sub-head select {
  background: #061a34;
  border: 1px solid #2b6ba8;
  color: #cfeaff;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 12px;
  outline: none;
}

.sub-head .count {
  margin-left: auto;
  color: #6fa8cf;
  font-size: 12px;
}

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

.tabs button {
  background: #07203d;
  border: 1px solid #2b6ba8;
  color: #9dc8e6;
  border-radius: 10px;
  padding: 3px 14px;
  cursor: pointer;
}

.tabs button.on {
  background: linear-gradient(180deg, #1d6bb0, #0e3560);
  color: #eaf7ff;
  border-color: #6ec4ff;
}

/* ---------------- 网格 ---------------- */
.grid {
  position: absolute;
  inset: 40px 0 0 0;
  overflow-y: auto;
  padding: 10px 12px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  align-content: start;
}

.grid.items {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.card {
  background: linear-gradient(180deg, rgba(16, 48, 90, .85), rgba(8, 26, 50, .9));
  border: 1px solid #24557f;
  border-radius: 10px;
  padding: 6px;
  text-align: center;
  cursor: pointer;
  transition: .12s;
}

.card:hover {
  border-color: #6ec4ff;
  transform: translateY(-2px);
}

.card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.card .cn {
  font-size: 11px;
  color: #dcefff;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card .id {
  font-size: 10px;
  color: #6795b8;
}

.q1 {
  border-color: #8a9aa8 !important;
}

.q2 {
  border-color: #6fd06f !important;
}

.q3 {
  border-color: #5cb3ff !important;
}

.q4 {
  border-color: #c07dff !important;
}

.q5 {
  border-color: #ffb347 !important;
}

.q6 {
  border-color: #ff6a6a !important;
}

/* ---------------- 队伍 / 对战 / 装备 ---------------- */
.screen#screen-team,
.screen#screen-versus {
  background: linear-gradient(180deg, #071a33, #04101f);
}

.team-wrap {
  position: absolute;
  inset: 40px 0 0 0;
  display: flex;
}

.team-side {
  flex: 0 0 330px;
  border-right: 1px solid #24557f;
  padding: 10px 12px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(10, 34, 64, .85), rgba(6, 18, 36, .95));
}

.team-side h4 {
  margin: 6px 0 8px;
  color: #9fe0ff;
  font-size: 13px;
  font-weight: 400;
}

.team-side h4 small {
  color: #6fa8cf;
  font-size: 11px;
}

.team-side>select,
.team-side input[type=text],
.team-side input:not([type]) {
  width: 100%;
  background: #061a34;
  border: 1px solid #2b6ba8;
  color: #cfeaff;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  margin-bottom: 8px;
}

.team-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tcard {
  width: 94px;
  padding: 4px 4px 5px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #24557f;
  background: rgba(6, 24, 48, .75);
  position: relative;
  transition: .15s;
}

.tcard:hover {
  border-color: #6ec4ff;
}

.tcard.on {
  box-shadow: 0 0 0 2px #ffd469;
}

.tcard.lead {
  border-color: #4d9fe0;
}

.tcard.foe {
  border-color: #a05a4a;
}

.tcard.mini {
  width: 58px;
}

.tcard.mini .tlv {
  font-size: 9px;
}

.tcard .ord {
  font-size: 9px;
  color: #9fe0ff;
}

.tcard.lead .ord {
  color: #ffd469;
}

.tcard.foe .ord {
  color: #ff9a8a;
}

.tcard img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.tcard .ph {
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border-radius: 8px;
  background: #12283f;
  color: #46708f;
  font-size: 22px;
  line-height: 46px;
}

.tcard .tn {
  font-size: 11px;
  color: #dcefff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcard .tlv {
  font-size: 10px;
  color: #ffd469;
}

.tcard .tpow {
  font-size: 9px;
  color: #7fa8c6;
}

.tcard .tbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  margin-top: 3px;
}

.tcard .tbtns button {
  padding: 1px 5px;
  font-size: 10px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #2b6ba8;
  background: #07203d;
  color: #9dc8e6;
}

.tcard .tbtns button:hover {
  background: #17538f;
  color: #eaf7ff;
}

.tcard .tbtns button.danger {
  border-color: #a05a4a;
  color: #ff9a8a;
}

.team-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 260px;
  overflow-y: auto;
}

.pcard {
  width: 56px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  padding: 3px 1px;
  border: 1px solid transparent;
}

.pcard:hover {
  background: rgba(60, 140, 220, .18);
}

.pcard.on {
  border-color: #ffd469;
  background: rgba(255, 212, 105, .1);
}

.pcard img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.pcard span {
  display: block;
  font-size: 9px;
  color: #cfe8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 58vh;
  overflow-y: auto;
}

.team-main {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px;
}

.tm-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.tm-head img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid #24557f;
  background: rgba(6, 24, 48, .7);
}

.tm-name {
  font-size: 19px;
  color: #bfe9ff;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tm-name .stars {
  color: #ffcf3f;
  font-size: 12px;
}

.tm-sub {
  font-size: 12px;
  color: #9dc8e6;
  margin-top: 2px;
}

.tm-sub b {
  color: #ffd469;
}

.bigbtn.mini {
  width: auto;
  padding: 7px 16px;
  font-size: 13px;
  margin: 0;
}

.empty-tip {
  color: #6fa8cf;
  font-size: 12px;
  padding: 10px 4px;
}

.slotrow {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.minislot {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 11px;
  cursor: pointer;
  border: 2px solid #3f8fd0;
  background: linear-gradient(180deg, rgba(20, 58, 102, .9), rgba(6, 22, 44, .95));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6fa8cf;
  font-size: 10px;
  text-align: center;
}

.minislot:hover {
  border-color: #7ce7ff;
}

.minislot img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.minislot i {
  position: absolute;
  right: -4px;
  bottom: -6px;
  font-size: 9px;
  font-style: normal;
  color: #06121f;
  background: #ffd469;
  border-radius: 7px;
  padding: 0 4px;
}

.minislot.locked {
  border-color: #2b4a63;
  filter: grayscale(.6) brightness(.75);
}

.minislot.empty {
  border-style: dashed;
  border-color: #46708f;
  font-size: 22px;
}

.minislot.q1 {
  border-color: #8a9aa8;
}

.minislot.q2 {
  border-color: #6fd06f;
}

.minislot.q3 {
  border-color: #5cb3ff;
}

.minislot.q4 {
  border-color: #c07dff;
}

.minislot.q5 {
  border-color: #ffb347;
}

.minislot.q6 {
  border-color: #ff6a6a;
}

.eqslot.mini {
  width: 66px;
  height: 74px;
}

.eqslot.mini img {
  width: 40px;
  height: 40px;
}

/* ---------------- 装备 / 喂养 / 主角 ---------------- */
.screen#screen-equip,
.screen#screen-feed,
.screen#screen-hero {
  background: linear-gradient(180deg, #071a33, #04101f);
}

.eq-wrap {
  position: absolute;
  inset: 40px 0 0 0;
  display: flex;
}

.eq-pets {
  flex: 0 0 240px;
  border-right: 1px solid #24557f;
  padding: 10px 12px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(10, 34, 64, .85), rgba(6, 18, 36, .95));
}

.eq-pets h4 {
  margin: 8px 0 6px;
  color: #9fe0ff;
  font-size: 13px;
  font-weight: 400;
}

.eq-pets h4 small {
  color: #6fa8cf;
  font-size: 11px;
}

/* ---------------- 装备界面舞台与槽位居中排布 ---------------- */
.eq-stage {
  flex: 0 0 380px;
  padding: 12px 14px;
  overflow-y: auto;
  border-right: 1px solid #24557f;
  display: flex;
  flex-direction: column;
}
.eq-stage .pd-stage {
  margin-top: 6px;
  height: 290px;
  position: relative;
}
.eq-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}
.eq-head img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #24557f;
  background: rgba(6,24,48,.7);
}
.eq-head img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #24557f;
}

.eq-panel {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 12px 16px;
}

.feed-main {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px;
}

.feed-main.wide {
  position: absolute;
  inset: 40px 0 0 0;
}

.eslot {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid #3f8fd0;
  background: linear-gradient(180deg, rgba(20,58,102,.9), rgba(6,22,44,.95));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: .15s ease;
}
.eslot:hover {
  border-color: #7ce7ff;
  transform: translateY(-2px);
}
.eslot.on {
  box-shadow: 0 0 0 2px #ffd469, 0 0 16px rgba(255,212,105,.6);
}
.eslot img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.eslot i {
  font-style: normal;
  font-size: 9px;
  color: #9dc8e6;
  margin-top: 2px;
}
.eslot .enh {
  position: absolute;
  left: -4px;
  top: -6px;
  font-size: 10px;
  color: #06121f;
  background: #7ce7ff;
  border-radius: 8px;
  padding: 0 5px;
  font-weight: bold;
}
.eslot .starnum {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: #ffcf3f;
  white-space: nowrap;
}
.eslot.empty {
  border-style: dashed;
  border-color: #46708f;
}
.eslot .plus {
  font-size: 24px;
  color: #46708f;
}
.eslot.q1 { border-color: #8a9aa8; }
.eslot.q2 { border-color: #6fd06f; }
.eslot.q3 { border-color: #5cb3ff; }
.eslot.q4 { border-color: #c07dff; }
.eslot.q5 { border-color: #ffb347; }
.eslot.q6 { border-color: #ff6a6a; }

.eqstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 14px;
  margin-top: 8px;
}

.eqstat {
  font-size: 12px;
  color: #bcd9ee;
}

.eqstat b {
  float: right;
  color: #8dffb0;
}

.rbtag {
  display: block;
  font-size: 11px;
  color: #cfe8ff;
  padding: 4px 8px;
  margin: 4px 0;
  border-radius: 7px;
  border: 1px solid #2b6ba8;
  background: rgba(10, 40, 72, .55);
}

.rbtag.def {
  border-color: #4d9fe0;
}

.rbtag.sp {
  border-color: #c07dff;
}

.rbtag em {
  font-style: normal;
  color: #ffd469;
  margin-right: 6px;
  font-weight: 700;
}

.rbrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #cfe8ff;
  margin: 3px 0;
}

.rbrow button {
  margin-left: auto;
  padding: 1px 8px;
  font-size: 10px;
  cursor: pointer;
  border: 1px solid #a05a4a;
  background: #2a1420;
  color: #ff9a8a;
  border-radius: 6px;
}

.rbopt {
  cursor: pointer;
}

.rbopt:hover {
  background: rgba(60, 140, 220, .25);
}

.bar.big {
  height: 10px;
  background: #0a1c38;
  border: 1px solid #24507f;
  border-radius: 6px;
  overflow: hidden;
  margin: 6px 0;
}

.bar.big i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2aa7ff, #7ce7ff);
}

.trainlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.traincard {
  border: 1px solid #24557f;
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(6, 24, 48, .7);
}

.traincard .tt {
  font-size: 14px;
  color: #bfe9ff;
}

.traincard .ta {
  font-size: 11px;
  color: #9dc8e6;
}

.traincard .te {
  font-size: 10px;
  color: #7fa8c6;
}

.traincard .tbtns {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.traincard .tbtns button {
  padding: 3px 9px;
  font-size: 11px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid #2b6ba8;
  background: #07203d;
  color: #cfe8ff;
}

.traincard .tbtns button:hover {
  background: #17538f;
}

.mslist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.mscard {
  display: flex;
  gap: 10px;
  border: 1px solid #24557f;
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(6, 24, 48, .7);
}

.mscard>img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
  background: #071c36;
}

.mscard .mn {
  font-size: 14px;
  color: #bfe9ff;
}

.mscard .md {
  font-size: 11px;
  color: #cfe8ff;
  line-height: 1.6;
}

.mscard .mx {
  font-size: 10px;
  color: #7fa8c6;
}

.mscard .tbtns {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}

.mscard .tbtns button {
  padding: 2px 9px;
  font-size: 11px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid #2b6ba8;
  background: #07203d;
  color: #cfe8ff;
}

.mscard.done {
  border-color: #6fd06f;
  background: rgba(30, 80, 40, .35);
}

.chipcard {
  width: 92px;
  text-align: center;
  border: 1px solid #24557f;
  border-radius: 10px;
  padding: 5px 4px;
  background: rgba(6, 24, 48, .7);
}

.chipcard img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.chipcard span {
  display: block;
  font-size: 10px;
  color: #cfe8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chipcard i {
  display: block;
  font-size: 9px;
  font-style: normal;
  color: #7fa8c6;
}

.chipcard button {
  margin-top: 3px;
  padding: 1px 8px;
  font-size: 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #2b6ba8;
  background: #07203d;
  color: #9dc8e6;
}

.chipcard.q1 {
  border-color: #8a9aa8;
}

.chipcard.q2 {
  border-color: #6fd06f;
}

.chipcard.q3 {
  border-color: #5cb3ff;
}

.chipcard.q4 {
  border-color: #c07dff;
}

.chipcard.q5 {
  border-color: #ffb347;
}

.chipcard.q6 {
  border-color: #ff6a6a;
}

/* ---------------- 剧情播放器 ---------------- */
.screen#screen-story,
.screen#screen-achieve {
  background: linear-gradient(180deg, #071a33, #04101f);
}

.tcard.mini.wide {
  width: 100%;
  text-align: left;
  padding: 5px 8px;
}

.tcard.mini.wide .tn {
  font-size: 12px;
  color: #cfe8ff;
}

.tcard.mini.wide .tlv {
  font-size: 9px;
}

.tcard.mini.wide .tpv {
  font-size: 9px;
  color: #7fa8c6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-stage {
  position: relative;
  height: 46vh;
  min-height: 260px;
}

.story-side {
  position: absolute;
  bottom: 0;
  width: 40%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: brightness(.45) saturate(.5);
  transition: .2s;
}

.story-side.p1 {
  left: 2%;
}

.story-side.p2 {
  right: 2%;
}

.story-side.on {
  filter: none;
}

.story-side .body {
  max-height: 44vh;
  max-width: 100%;
  object-fit: contain;
}

.story-side .face {
  position: absolute;
  right: 6%;
  top: 4%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #6ec4ff;
  background: rgba(4, 16, 34, .7);
  object-fit: contain;
}

.story-box {
  position: relative;
  margin-top: 10px;
  min-height: 96px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #3f8fd0;
  background: linear-gradient(180deg, rgba(12, 40, 76, .95), rgba(6, 20, 40, .98));
}

.story-box .nm {
  font-size: 15px;
  color: #ffd469;
  margin-bottom: 6px;
}

.story-box .nm .pdcnt {
  float: right;
  font-size: 11px;
  color: #7fa8c6;
}

.story-box .tx {
  font-size: 14px;
  color: #eaf7ff;
  line-height: 1.85;
}

.story-ctl {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.story-ctl button {
  padding: 6px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 13px;
  border: 1px solid #2b6ba8;
  background: #07203d;
  color: #cfe8ff;
}

.story-ctl button:hover {
  background: #17538f;
}

.story-ctl button.on {
  background: linear-gradient(180deg, #d1582c, #8a2f16);
  border-color: #ff9a6a;
}

/* ---------------- 成就 ---------------- */
.achgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.achcard {
  display: flex;
  gap: 10px;
  border: 1px solid #24557f;
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(6, 24, 48, .7);
}

.achcard.got {
  border-color: #ffd469;
  background: rgba(255, 212, 105, .08);
}

.achcard>img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 8px;
  background: #071c36;
  flex: none;
}

.achcard .ai {
  flex: 1;
  min-width: 0;
}

.achcard .an {
  font-size: 13px;
  color: #bfe9ff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.achcard .an .mid {
  font-size: 10px;
  color: #06121f;
  background: #ffd469;
  border-radius: 7px;
  padding: 0 5px;
}

.achcard .ad {
  font-size: 11px;
  color: #cfe8ff;
  line-height: 1.6;
}

.achcard .ap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #9dc8e6;
}

.achcard .ap button {
  margin-left: auto;
  padding: 2px 12px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid #2b6ba8;
  background: #07203d;
  color: #cfe8ff;
  font-size: 11px;
}

.achcard .ap button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---------------- 抽卡 ---------------- */
.screen#screen-draw {
  background: radial-gradient(ellipse at 50% 0%, #123a6b, #04101f 70%);
}

.draw-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.draw-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 150px;
  padding: 10px;
  border: 1px dashed #2b6ba8;
  border-radius: 12px;
  background: rgba(4, 16, 34, .5);
}

.drawcard {
  width: 92px;
  border-radius: 12px;
  padding: 6px 4px;
  text-align: center;
  border: 2px solid #3f8fd0;
  background: linear-gradient(180deg, rgba(20, 58, 102, .95), rgba(6, 22, 44, .98));
  animation: cardIn .45s cubic-bezier(.2, .9, .3, 1.3) both;
}

@keyframes cardIn {
  from {
    transform: translateY(18px) rotateY(90deg) scale(.7);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.drawcard img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.drawcard span {
  display: block;
  font-size: 11px;
  color: #eaf7ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawcard i {
  font-style: normal;
  font-size: 10px;
  color: #ffd469;
}

.drawcard.q1 {
  border-color: #8a9aa8;
  box-shadow: 0 0 10px rgba(138, 154, 168, .4);
}

.drawcard.q2 {
  border-color: #6fd06f;
  box-shadow: 0 0 10px rgba(111, 208, 111, .4);
}

.drawcard.q3 {
  border-color: #5cb3ff;
  box-shadow: 0 0 12px rgba(92, 179, 255, .5);
}

.drawcard.q4 {
  border-color: #c07dff;
  box-shadow: 0 0 14px rgba(192, 125, 255, .6);
}

.drawcard.q5 {
  border-color: #ffb347;
  box-shadow: 0 0 16px rgba(255, 179, 71, .7);
}

.drawcard.q6 {
  border-color: #ff6a6a;
  box-shadow: 0 0 20px rgba(255, 106, 106, .8);
}

/* ---------------- 城市图鉴 ---------------- */
.citygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.citycard {
  border: 1px solid #24557f;
  border-radius: 10px;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
  background: rgba(6, 24, 48, .7);
  transition: .15s;
}

.citycard:hover {
  border-color: #6ec4ff;
  transform: translateY(-2px);
}

.citycard.done {
  border-color: #6fd06f;
  background: rgba(30, 80, 40, .3);
}

.citycard img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.citycard .cn {
  font-size: 12px;
  color: #dcefff;
}

.citycard .cd {
  font-size: 9px;
  color: #7fa8c6;
}

.routeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.routeline i {
  color: #46708f;
  font-style: normal;
}

.rnode {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #2b6ba8;
  background: rgba(6, 24, 48, .7);
  color: #cfe8ff;
}

.rnode:hover {
  border-color: #7ce7ff;
}

.rnode.done {
  border-color: #6fd06f;
  color: #8dffb0;
}

/* ---------------- 难度曲线 ---------------- */
.curvebox {
  margin: 10px 0;
}

.curvebox .cl {
  font-size: 12px;
  color: #9dc8e6;
  margin-bottom: 4px;
}

.curve {
  width: 100%;
  height: 90px;
  background: rgba(4, 16, 34, .6);
  border: 1px solid #1d4574;
  border-radius: 8px;
}

.curve polyline {
  fill: none;
  stroke: #7ce7ff;
  stroke-width: 1.2;
}

.curve line.me {
  stroke: #ffd469;
  stroke-width: .8;
  stroke-dasharray: 3 2;
}

.curve circle.pt {
  fill: #ff6a6a;
  stroke: #fff;
  stroke-width: .5;
}

.npctable {
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
  font-size: 11px;
}

.npchead,
.npcrow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 2px 6px;
}

.npchead {
  color: #7ce7ff;
  border-bottom: 1px solid #24557f;
  position: sticky;
  top: 0;
  background: #0a2547;
}

.npcrow {
  color: #bcd9ee;
}

.npcrow.me {
  background: rgba(255, 212, 105, .15);
  color: #ffd469;
}

.nodegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.node {
  position: relative;
  border: 1px solid #24557f;
  border-radius: 9px;
  padding: 5px 4px;
  cursor: pointer;
  text-align: center;
  background: rgba(6, 24, 48, .7);
}

.node:hover {
  border-color: #6ec4ff;
}

.node.on {
  border-color: #ffd469;
  background: rgba(255, 212, 105, .12);
}

.node .nn {
  display: block;
  font-size: 11px;
  color: #cfe8ff;
}

.node .nc {
  display: block;
  font-size: 9px;
  color: #7fa8c6;
}

.node .ms {
  position: absolute;
  right: 3px;
  top: 3px;
  font-style: normal;
  font-size: 9px;
  background: #c07dff;
  color: #06121f;
  border-radius: 6px;
  padding: 0 3px;
}

/* ---------------- 技能页 ---------------- */
.skillwrap {
  position: absolute;
  inset: 40px 0 0 0;
  display: flex;
}

.grid.skills {
  position: static;
  flex: 1 1 44%;
  overflow-y: auto;
}

.skill-detail {
  flex: 1 1 56%;
  overflow-y: auto;
  padding: 14px 16px;
  border-left: 1px solid #24557f;
  background: linear-gradient(180deg, rgba(10, 34, 64, .9), rgba(6, 18, 36, .95));
}

.sd-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sd-top img {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  border: 2px solid #4d9fe0;
  background: #071c36;
}

.sd-name {
  font-size: 20px;
  color: #bfe9ff;
}

.sd-tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 9px;
  margin-right: 6px;
  border: 1px solid #4d9fe0;
  color: #9fe0ff;
}

.sd-tag.active {
  border-color: #ff9a6a;
  color: #ffc9a8;
}

.sd-des {
  margin: 12px 0;
  color: #cfe8ff;
  font-size: 13px;
  line-height: 1.7;
}

.sd-eff {
  color: #ffd469;
  font-size: 13px;
}

.sd-row {
  display: flex;
  gap: 18px;
  color: #9dc8e6;
  font-size: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sd-sec {
  margin-top: 16px;
  border-top: 1px dashed #24557f;
  padding-top: 10px;
  color: #8fbcda;
  font-size: 12px;
}

/* ---------------- 出战准备 ---------------- */
.screen#screen-prep {
  background: linear-gradient(180deg, #071a33, #04101f);
}

.prep-wrap {
  position: absolute;
  inset: 40px 0 0 0;
  display: flex;
}

.grid.pets {
  position: static;
  flex: 1 1 auto;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}

.card.sel {
  outline: 2px solid #7ce7ff;
  box-shadow: 0 0 12px rgba(124, 231, 255, .6);
}

.card .fp {
  font-size: 10px;
  color: #ffd469;
}

.prep-side {
  flex: 0 0 320px;
  border-left: 1px solid #24557f;
  padding: 12px 14px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(10, 34, 64, .92), rgba(6, 18, 36, .96));
}

.prep-side h4 {
  margin: 4px 0 8px;
  color: #9fe0ff;
  font-size: 13px;
  font-weight: 400;
}

.prep-side h4 small {
  color: #6fa8cf;
  font-size: 11px;
}

.prep-team {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 96px;
  padding: 6px;
  margin-bottom: 12px;
  border: 1px dashed #2b6ba8;
  border-radius: 10px;
  background: rgba(4, 16, 34, .6);
}

.prep-team .t {
  width: 62px;
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 8px;
  padding: 2px 0 0;
  border: 1px solid transparent;
}

.prep-team .t.lead {
  border-color: #ffd469;
  background: rgba(255, 212, 105, .08);
}

.prep-team .t .ord {
  font-size: 9px;
  color: #9fe0ff;
  line-height: 12px;
}

.prep-team .t.lead .ord {
  color: #ffd469;
}

.prep-team .t img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.prep-team .t .tn {
  font-size: 10px;
  color: #cfe8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prep-team .t .tctl {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 1px;
}

.prep-team .t .tctl button {
  width: 17px;
  height: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  font-size: 10px;
  background: #07203d;
  border: 1px solid #2b6ba8;
  color: #9dc8e6;
  border-radius: 4px;
}

.prep-team .t .tctl button:hover {
  background: #17538f;
  color: #eaf7ff;
}

.prep-side label.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #bcd9ee;
  margin: 8px 0;
}

.prep-side select,
.prep-side input[type=range] {
  flex: 1;
  background: #061a34;
  border: 1px solid #2b6ba8;
  color: #cfeaff;
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 12px;
}

.prep-info {
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(4, 16, 34, .65);
  border: 1px solid #1d4574;
  font-size: 11px;
  color: #9dc8e6;
  line-height: 1.7;
}

.prep-info b {
  color: #ffd469;
}

.prep-info .foelist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}

.prep-info .foelist .foe {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid #7a4a4a;
  background: rgba(120, 40, 40, .25);
  color: #ffc9b8;
}

.bigbtn {
  width: 100%;
  padding: 11px 0;
  margin-top: 6px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  border: 1px solid #ff9a6a;
  background: linear-gradient(180deg, #d1582c, #8a2f16);
  color: #ffe7d6;
}

/* ---------------- 战斗全屏与沉浸模式 ---------------- */
.screen#screen-battle {
  background: #04101f;
}

body.in-battle #topbar,
body.in-battle #botnav {
  display: none !important;
}

body.in-battle #screen-battle {
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}

body.in-battle .bt-arena {
  top: 48px;
  bottom: 96px;
}

.battle-bg {
  position: absolute;
  inset: 0;
  background: #0a1c38 center/cover no-repeat;
  filter: brightness(1.22) saturate(1.08);
}

.battle-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 8, 22, .34) 0%, rgba(2, 8, 22, 0) 16%, rgba(2, 8, 22, 0) 70%, rgba(2, 8, 22, .34) 100%),
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 58%, rgba(2, 8, 22, .26) 100%);
}

.bt-top {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 战斗左上角撤退按钮 */
.bt-exit-btn {
  position: absolute;
  left: calc(12px + env(safe-area-inset-left));
  top: 6px;
  padding: 5px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 12px;
  border: 1px solid rgba(255, 120, 100, 0.6);
  background: rgba(40, 14, 18, 0.78);
  color: #ffc2b8;
  backdrop-filter: blur(4px);
  transition: .15s;
}

.bt-exit-btn:hover {
  background: rgba(90, 24, 30, 0.9);
  border-color: #ff7a6a;
}

.turn {
  background: rgba(6, 22, 48, .82);
  border: 1px solid #3f8fd0;
  border-radius: 16px;
  padding: 3px 20px;
  color: #bfe9ff;
  font-size: 13px;
  letter-spacing: 1px;
}

.turn b {
  color: #ffd469;
  font-size: 15px;
}

.xbtn {
  padding: 5px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid #3f8fd0;
  background: rgba(10, 36, 68, .86);
  color: #cdeaff;
}

.xbtn:hover {
  filter: brightness(1.25);
}

#btAuto.on {
  background: linear-gradient(180deg, #d1582c, #8a2f16);
  border-color: #ff9a6a;
  color: #ffe7d6;
}

.bt-arena {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 122px;
  overflow: hidden;
  z-index: 4;
}

.bt-arena.quake {
  animation: quake .32s;
}

@keyframes quake {

  0%,
  100% {
    transform: none;
  }

  20% {
    transform: translate(-5px, 3px);
  }

  45% {
    transform: translate(6px, -4px);
  }

  70% {
    transform: translate(-4px, 2px);
  }
}

.fxlayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

canvas.fx {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.bt-side {
  position: absolute;
  inset: 0;
}

.unit {
  position: absolute;
  width: 150px;
  margin-left: -75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  transition: left .38s ease, bottom .38s ease, opacity .3s;
}

.unit.off {
  opacity: 0;
  pointer-events: none;
}

.unit .ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150px;
  height: 50px;
  margin-left: -75px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(110, 215, 255, .60), rgba(40, 140, 220, .22) 56%, rgba(0, 0, 0, 0) 74%);
  border: 1px solid rgba(150, 228, 255, .5);
  box-shadow: 0 0 24px rgba(90, 190, 255, .6) inset, 0 0 20px rgba(70, 160, 255, .4);
  animation: ringPulse 2.6s ease-in-out infinite;
}

.unit.foe .ring {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 150, 120, .55), rgba(200, 80, 60, .2) 56%, rgba(0, 0, 0, 0) 74%);
  border-color: rgba(255, 180, 150, .5);
  box-shadow: 0 0 24px rgba(255, 130, 100, .5) inset, 0 0 20px rgba(255, 110, 80, .34);
}

@keyframes ringPulse {
  50% {
    opacity: .62;
    transform: scale(1.06);
  }
}

.unit canvas {
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .6));
  max-width: none;
}

.unit.foe canvas {
  transform: scaleX(-1);
}

.unit .plate {
  position: relative;
  z-index: 3;
  width: 148px;
  margin-bottom: 3px;
  background: rgba(4, 14, 30, .55);
  border-radius: 9px;
  padding: 2px 4px 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.unit .plate .fac {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  box-shadow: 0 0 6px currentColor;
}

.unit .plate .nm {
  font-size: 11px;
  color: #f6fcff;
  text-shadow: 0 1px 3px #000;
}

.unit .plate .hp {
  height: 9px;
  margin-top: 2px;
  background: #0f1c28;
  border: 1px solid #5b87a8;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.unit .plate .hp i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffe9a8, #ffcf3f 45%, #e8a512);
  transition: width .28s;
}

.unit.foe .plate .hp i {
  background: linear-gradient(180deg, #ffc0a8, #ff7b5f 45%, #d8482a);
}
/* ==================== 阵亡精灵彻底隐形（0 残影、0 虚影） ==================== */
.unit.dead {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.unit.dead canvas,
.unit.dead .ring,
.unit.dead .plate,
.unit.dead .buffs {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}

.unit.acting {
  animation: lunge .42s ease-out;
}

.unit.active .ring {
  animation: ringPulse 1.1s ease-in-out infinite;
  box-shadow: 0 0 26px rgba(255, 220, 120, .85) inset, 0 0 20px rgba(255, 200, 80, .7);
}

.unit.active .plate {
  box-shadow: 0 0 0 1px rgba(255, 212, 105, .8), 0 2px 8px rgba(0, 0, 0, .5);
}

@keyframes lunge {
  38% {
    transform: translateY(-16px) scale(1.03);
  }

  100% {
    transform: none;
  }
}

.unit.hurt {
  animation: shake .34s;
}

@keyframes shake {
  20% {
    transform: translateX(-9px);
  }

  50% {
    transform: translateX(8px);
  }

  80% {
    transform: translateX(-4px);
  }
}

.unit.entering {
  animation: dropIn .58s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes dropIn {
  from {
    transform: translateY(-48px) scale(.86);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

/* 阵亡受创下沉并平滑完全淡出至 0% */
.unit.fainting {
  animation: faint .42s ease-out forwards;
}


@keyframes faint {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(18px) scale(.88);
    opacity: 0;
  }
}

.dmg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 23px;
  color: #ffe07a;
  text-shadow: 0 2px 6px #000, 0 0 12px #ff8a00;
  pointer-events: none;
  animation: floatUp 1s ease-out forwards;
  z-index: 60;
}

.dmg.crit {
  color: #ff8a6a;
  font-size: 28px;
  text-shadow: 0 2px 7px #000, 0 0 16px #ff3d00;
}

.dmg small {
  font-size: 11px;
  color: #fff;
}

.dmg.k-heal {
  color: #8dffb0;
  text-shadow: 0 2px 6px #000, 0 0 12px #1f9d4a;
}

.dmg.k-dot {
  color: #c07dff;
}

.dmg.k-buff {
  color: #7ce7ff;
  font-size: 15px;
  text-shadow: 0 2px 6px #000, 0 0 12px #2a9fd8;
}

.unit .buffs {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -4px);
  display: flex;
  gap: 3px;
  z-index: 12;
  pointer-events: none;
}

.unit .buffs .bi {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #6ec4ff;
  background: rgba(4, 16, 34, .85);
}

.unit .buffs .bi.bad {
  border-color: #ff8a6a;
  box-shadow: 0 0 8px rgba(255, 110, 80, .7);
}

.unit .buffs .bi img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.unit .buffs .bi i {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 9px;
  font-style: normal;
  background: rgba(4, 16, 34, .9);
  color: #ffd469;
  padding: 0 2px;
  line-height: 11px;
}

@keyframes floatUp {
  from {
    transform: translate(-50%, 6px);
    opacity: 1;
  }

  to {
    transform: translate(-50%, -56px);
    opacity: 0;
  }
}

.shout {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 70;
  padding: 3px 18px;
  border-radius: 14px;
  font-size: 14px;
  color: #fff6dd;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 150, 60, 0), rgba(206, 104, 26, .94), rgba(255, 150, 60, 0));
  text-shadow: 0 1px 4px #000, 0 0 10px rgba(255, 140, 40, .8);
  animation: shoutUp .9s ease-out forwards;
}

@keyframes shoutUp {
  from {
    opacity: 0;
    transform: translate(-50%, 12px) scale(.9);
  }

  25% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -20px) scale(1);
  }
}

/* ==================== 战斗底部控制区（靠右排布，中间留空） ==================== */
.bt-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 94px;
  z-index: 24;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 4px calc(14px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(3, 12, 26, 0) 0%, rgba(3, 12, 26, .82) 36%, rgba(3, 12, 26, .96) 100%);
}

.bt-roster {
  display: flex;
  gap: 5px;
  flex: none;
}

.rs {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #3f8fd0;
  background: rgba(6, 22, 48, .85);
  transition: .2s;
}

.rs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rs .rhp {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 4px;
  border-radius: 2px;
  background: #0a1c38;
  overflow: hidden;
}

.rs .rhp i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2fd06a, #8dffb0);
  transition: width .3s;
}

.rs .tag {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-size: 8px;
  text-align: center;
  line-height: 11px;
  color: #9fe0ff;
  background: rgba(4, 16, 34, .72);
}

.rs.onfield {
  border-color: #ffd469;
  box-shadow: 0 0 12px rgba(255, 212, 105, .65);
}

.rs.onfield .tag {
  color: #ffd469;
}

.rs.dead {
  filter: grayscale(1) brightness(.5);
  opacity: .55;
}

/* 战况日志折叠按钮（靠右推挤） */
.bt-log-toggle {
  margin-left: auto;
  margin-right: 12px;
  align-self: center;
  padding: 6px 14px;
  border-radius: 14px;
  font-size: 11px;
  color: #9fe0ff;
  background: rgba(6, 22, 48, 0.82);
  border: 1px solid #2b6ba8;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: .15s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.bt-log-toggle:hover,
.bt-log-toggle.active {
  background: linear-gradient(180deg, #17538f, #0c2b53);
  border-color: #6ec4ff;
  color: #fff;
  box-shadow: 0 0 10px rgba(110, 196, 255, 0.5);
}

/* 战况详细浮动弹窗（支持拖拽 + 空间充裕） */
.bt-detail {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  width: min(680px, 94vw);
  max-height: 420px;
  z-index: 100;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.9);
  border: 1px solid #3f8fd0;
  background: rgba(6, 18, 38, 0.96);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.bt-detail[hidden] {
  display: none;
}

.bt-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9fe0ff;
  border-bottom: 1px solid #24557f;
  padding: 8px 12px;
  flex: none;
  cursor: move;
  user-select: none;
  touch-action: none;
  background: linear-gradient(90deg, rgba(16, 52, 94, 0.6), rgba(8, 26, 50, 0.6));
  border-radius: 11px 11px 0 0;
}

.bt-detail-head span {
  font-weight: bold;
}

.bt-detail-head button {
  padding: 2px 10px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid #2b6ba8;
  background: #07203d;
  color: #9dc8e6;
  cursor: pointer;
}

.bt-detail-head button:hover {
  background: #17538f;
  color: #fff;
}

.bt-detail-close {
  margin-left: 6px;
  background: none !important;
  border: none !important;
  font-size: 16px;
  color: #ff9a8a !important;
  cursor: pointer;
}

/* 解除 40px 窄小截断，提供饱满的对战信息栏 */
.bt-info {
  flex: none;
  max-height: 120px;
  overflow-y: auto;
  font-size: 11px;
  color: #cde6fa;
  line-height: 1.7;
  margin: 6px 10px;
  padding: 6px 10px;
  background: rgba(3, 12, 26, 0.7);
  border: 1px solid rgba(43, 107, 168, 0.4);
  border-radius: 6px;
  user-select: text;
}

.bt-info div {
  margin-bottom: 3px;
}

.bt-info b {
  color: #ffd469;
}

.bt-info .side {
  color: #7ce7ff;
  font-weight: bold;
}

.bt-log {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 11px;
  color: #cfe8ff;
  line-height: 1.6;
  padding: 4px 12px 10px;
  user-select: text;
  cursor: text;
}

.bt-log div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 靠右操作按钮群 */
.bt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  z-index: 25;
}

.bt-actions .aux {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bt-actions .aux .xbtn {
  padding: 2px 9px;
  font-size: 10px;
  border-radius: 10px;
}

.bt-skills {
  display: flex;
  gap: 8px;
}

.normbtn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  color: #eaf7ff;
  border: 2px solid #8fd0ff;
  background: radial-gradient(circle at 50% 32%, #2a7ec4, #0a2340);
  box-shadow: 0 0 16px rgba(80, 180, 255, .45);
}

.normbtn:hover {
  filter: brightness(1.2);
}

.normbtn:disabled {
  filter: grayscale(.85) brightness(.6);
  cursor: not-allowed;
  box-shadow: none;
}

.normbtn.ready {
  animation: normPulse 1.6s ease-in-out infinite;
}

@keyframes normPulse {
  50% {
    box-shadow: 0 0 24px rgba(130, 215, 255, .85);
  }
}

.skbtn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #4d9fe0;
  cursor: pointer;
  background: radial-gradient(circle at 50% 32%, #1b5f9e, #07203d);
  color: #dff1ff;
  font-size: 11px;
  position: relative;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 0 14px rgba(70, 160, 255, .35);
}

.skbtn img {
  position: absolute;
  left: 12%;
  top: 7%;
  width: 76%;
  height: 58%;
  object-fit: contain;
}

.skbtn .lb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  font-size: 9px;
  color: #dff1ff;
  text-shadow: 0 1px 3px #000;
}

.skbtn .cost {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  font-size: 9px;
  color: #ffd469;
}

.skbtn:disabled {
  filter: grayscale(.85) brightness(.6);
  cursor: not-allowed;
  box-shadow: none;
}

/* 手动目标高亮 */
.unit.targetable {
  cursor: crosshair;
}

.unit.targetable .ring {
  animation: ringPulse .9s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(255, 90, 90, .9) inset, 0 0 26px rgba(255, 70, 50, .85);
}

.unit.targetable .plate {
  box-shadow: 0 0 0 2px #ff6a5a, 0 2px 10px rgba(0, 0, 0, .6);
}

.unit.targetable::after {
  content: "⌖";
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  color: #ff8a6a;
  font-size: 18px;
  text-shadow: 0 0 8px #000;
  pointer-events: none;
}

.await-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #ffd469;
  background: rgba(60, 20, 10, .8);
  border: 1px solid #ff9a6a;
  border-radius: 14px;
  padding: 6px 12px;
}

.skbtn .scope {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 9px;
  color: #8dffb0;
  text-shadow: 0 1px 2px #000;
}

.bt-result {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  background: radial-gradient(ellipse at 50% 50%, rgba(2, 8, 20, .80), rgba(2, 8, 20, .94));
  color: #ffd469;
}

.bt-result[hidden] {
  display: none;
}

.bt-result .rcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 54px;
  border-radius: 18px;
  border: 1px solid #3f8fd0;
  background: linear-gradient(180deg, rgba(13, 44, 85, .97), rgba(6, 22, 44, .99));
  box-shadow: 0 14px 50px rgba(0, 0, 0, .7);
}

.bt-result .rbig {
  font-size: 34px;
  letter-spacing: 6px;
  text-shadow: 0 0 20px rgba(255, 180, 60, .75);
}

.bt-result .rsub {
  font-size: 13px;
  color: #9dc8e6;
  letter-spacing: 1px;
}

.bt-result .rbtns {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.bt-result button {
  padding: 9px 28px;
  border-radius: 18px;
  border: 1px solid #6ec4ff;
  cursor: pointer;
  background: linear-gradient(180deg, #17538f, #0c2b53);
  color: #cdeaff;
  font-size: 14px;
}

.bt-result button:hover {
  filter: brightness(1.2);
}

/* ---------------- 底部导航 ---------------- */
#botnav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  z-index: 40;
  display: flex;
  background: linear-gradient(180deg, rgba(8, 28, 58, .9), rgba(5, 18, 38, .98));
  border-top: 1px solid #2b6ba8;
}

#botnav button {
  flex: 1;
  border: none;
  background: none;
  color: #9dc8e6;
  font-size: 12px;
  cursor: pointer;
  position: relative;
}

#botnav button:hover {
  color: #eaf7ff;
  background: rgba(60, 140, 220, .18);
}

#botnav button.on {
  color: #7ce7ff;
}

#botnav button.on::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 4px;
  height: 2px;
  background: #7ce7ff;
  border-radius: 2px;
}

/* ---------------- 弹窗外壳与尺寸绝对锁定（无论选不选技能书，尺寸完全一致） ---------------- */
#modal {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(2, 8, 20, 0.76);
  display: flex;
  align-items: center;
  justify-content: center;
}
#modal[hidden] {
  display: none;
}

/* 外层无裁切独立容器 */
.modal-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 弹窗实体：默认支持平滑纵向滚动，高度稳定，底部按钮绝不被切 */
.modal-box {
  width: min(880px, 92vw);
  max-height: min(580px, 88vh);
  border-radius: 14px;
  padding: 16px 20px;
  background: linear-gradient(180deg, #0d2c55, #071a33);
  border: 1px solid #3f8fd0;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 当展示双栏精灵详情时，由右侧面板内部接管滚动，外层保持固定不产生双滚动条 */
.modal-box:has(.pd-wrap) {
  height: min(560px, 86vh);
  overflow-y: hidden;
}

.mb-close {
  position: absolute;
  top: 14px;
  right: 18px;
  cursor: pointer;
  color: #8fbcda;
  font-size: 20px;
  line-height: 1;
  z-index: 20;
}
.mb-close:hover {
  color: #fff;
}


/* ---------------- 精灵详情（中间立绘支持自由翼展） ---------------- */
/* 详情两栏布局：强制 100% 满高撑满 */
.pd-wrap {
  display: flex;
  gap: 16px;
  height: 100%;
  align-items: stretch;
}
.pd-left {
  flex: 0 0 46%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
}
.pd-right {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border-left: 1px solid #24557f;
  padding-left: 16px;
  padding-right: 4px;
  overflow-y: auto;
}


.pd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 8px;
}

.pd-head .stars {
  color: #ffcf3f;
  font-size: 12px;
  letter-spacing: 1px;
}

.pd-head .pdnm {
  font-size: 20px;
  color: #cdeeff;
}

.pd-head .pdlv {
  font-size: 13px;
  color: #ffd469;
}

.pd-head .facdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: auto;
}

.pd-head .fname {
  font-size: 12px;
  color: #9dc8e6;
}

/* ---------------- 详情页立绘舞台（原点锚定渲染：精灵自由缩放，绝不推挤周围元素） ---------------- */
.pd-stage {
  position: relative;
  border-radius: 14px;
  padding: 8px 10px;
  height: 290px;
  background: radial-gradient(ellipse at 50% 82%, rgba(50, 140, 220, 0.32), rgba(4, 16, 34, 0.2) 72%);
  border: 1px solid #1d4574;
  overflow: visible;
}

/* 四角技能槽位固定网格 */
.pd-grid {
  display: grid;
  grid-template-columns: 84px 1fr 84px;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "s0 art s2" "s1 art s3";
  gap: 6px;
  height: 100%;
  position: relative;
}

.pslot-host { display: flex; align-items: center; justify-content: center; }
.pslot-host.s0 { grid-area: s0; }
.pslot-host.s1 { grid-area: s1; }
.pslot-host.s2 { grid-area: s2; }
.pslot-host.s3 { grid-area: s3; }


.pslot {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid #3f8fd0;
  background: linear-gradient(180deg, rgba(20, 58, 102, .9), rgba(6, 22, 44, .95));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}

.pslot:hover {
  transform: translateY(-2px);
  border-color: #7ce7ff;
}

.pslot.on {
  box-shadow: 0 0 0 2px #ffd469, 0 0 16px rgba(255, 212, 105, .6);
}

.pslot img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.pslot .lvtag {
  position: absolute;
  right: -4px;
  bottom: -6px;
  font-size: 10px;
  color: #06121f;
  background: #ffd469;
  border-radius: 8px;
  padding: 0 5px;
}

.pslot.locked {
  border-color: #2b4a63;
  filter: grayscale(.6) brightness(.75);
}

.pslot.locked .lktxt {
  font-size: 11px;
  color: #8fb4cc;
  text-align: center;
  line-height: 1.3;
}

.pslot.empty {
  border-style: dashed;
  border-color: #46708f;
}

.pslot .plus {
  font-size: 26px;
  color: #46708f;
}

.pslot.q1 {
  border-color: #8a9aa8;
}

.pslot.q2 {
  border-color: #6fd06f;
}

.pslot.q3 {
  border-color: #5cb3ff;
}

.pslot.q4 {
  border-color: #c07dff;
}

.pslot.q5 {
  border-color: #ffb347;
}

.pslot.q6 {
  border-color: #ff6a6a;
}

/* 详情页中间立绘：彻底解除尺寸限制，大小完全交由 petsizes.js 自由掌控 */
.pd-art {
  grid-area: art;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}
/* 立绘 Canvas：以脚底原点为锚点绝对定位，大小变化纯粹向四周放射延伸，100% 不影响父级或周围槽位 */
.pd-art canvas {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  max-width: none;
  max-height: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.65));
}
/* 战斗力标签：绝对锁定在底盘正下方，绝不受立绘大小推挤 */
.pd-art .pw {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  font-size: 13px;
  color: #9dc8e6;
  background: rgba(4, 16, 34, 0.88);
  border: 1px solid #1d4574;
  border-radius: 12px;
  padding: 2px 14px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.pd-art .pw b {
  color: #ffd469;
  font-size: 15px;
}
.pd-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.pd-tabs button {
  padding: 5px 22px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 13px;
  border: 1px solid #2b6ba8;
  background: #07203d;
  color: #9dc8e6;
}

.pd-tabs button.on {
  background: linear-gradient(180deg, #1d6bb0, #0e3560);
  color: #eaf7ff;
  border-color: #6ec4ff;
}

.pdp-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pdp-icon {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  border: 2px solid #4d9fe0;
  background: #071c36;
  object-fit: contain;
}

.pdp-name {
  font-size: 19px;
  color: #bfe9ff;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pdp-lv {
  font-size: 12px;
  color: #06121f;
  background: #7ce7ff;
  border-radius: 8px;
  padding: 0 7px;
}

.pdp-rows {
  display: flex;
  gap: 20px;
  margin: 10px 0 4px;
  flex-wrap: wrap;
}

.pdp-rows>div {
  font-size: 12px;
  color: #9dc8e6;
}

.pdp-rows b {
  color: #ffd469;
  margin-left: 6px;
}

.pdp-des {
  margin: 10px 0;
  color: #cfe8ff;
  font-size: 13px;
  line-height: 1.75;
}

.pdp-eff {
  color: #ffd469;
  font-size: 13px;
  margin-bottom: 8px;
}

.pdp-eff .up {
  color: #7fd08a;
  font-size: 12px;
}

.pdp-exp {
  margin: 8px 0 12px;
  font-size: 12px;
  color: #9dc8e6;
}

.pdp-exp .bar {
  height: 8px;
  background: #0a1c38;
  border: 1px solid #24507f;
  border-radius: 5px;
  overflow: hidden;
  margin: 5px 0 3px;
}

.pdp-exp .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff6ec4, #ffd469);
}

.pdp-exp .exptxt {
  color: #ffd469;
}

.pdp-sec {
  margin-top: 12px;
  border-top: 1px dashed #24557f;
  padding-top: 9px;
  color: #9dc8e6;
  font-size: 12px;
}

.pdp-tip {
  margin-top: 10px;
  color: #6fa8cf;
  font-size: 11px;
  line-height: 1.6;
}

.pdp-empty {
  color: #9dc8e6;
  font-size: 14px;
  padding: 20px 4px;
}

.pdp-empty .hint {
  color: #6fa8cf;
  font-size: 11px;
  margin-top: 6px;
}

.bookrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  /* max-height: 168px; */
  overflow-y: auto;
}

.book {
  width: 60px;
  padding: 3px 0 4px;
  border-radius: 9px;
  cursor: pointer;
  background: rgba(6, 24, 48, .8);
  border: 1px solid #24557f;
  color: #cfe8ff;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.book:hover {
  border-color: #7ce7ff;
}

.book.on {
  box-shadow: 0 0 0 2px #ffd469;
}

.book img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.book span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
}

.book.none {
  width: 48px;
  height: 44px;
  justify-content: center;
  color: #ff9a8a;
}

.book.q1 {
  border-color: #8a9aa8;
}

.book.q2 {
  border-color: #6fd06f;
}

.book.q3 {
  border-color: #5cb3ff;
}

.book.q4 {
  border-color: #c07dff;
}

.book.q5 {
  border-color: #ffb347;
}

.book.q6 {
  border-color: #ff6a6a;
}

.eqslots {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.eqslot {
  width: 78px;
  height: 84px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px dashed #46708f;
  background: rgba(6, 24, 48, .7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6fa8cf;
  font-size: 10px;
}

.eqslot.on {
  border-style: solid;
  border-color: #ffd469;
  box-shadow: 0 0 12px rgba(255, 212, 105, .5);
}

.eqslot img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.eqslot .plus {
  font-size: 24px;
}

.lvrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.lvrow input[type=range] {
  flex: 1;
  min-width: 120px;
}

.lvrow>b {
  color: #ffd469;
  min-width: 56px;
}

.lvrow button {
  padding: 4px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  border: 1px solid #2b6ba8;
  background: #07203d;
  color: #cfe8ff;
}

.lvrow button:hover {
  background: #17538f;
}

.lvrow label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #bcd9ee;
}

.pdp-sec textarea,
/* 存档文本框紧凑美化 */
#svText {
  width: 100%;
  height: 85px;
  margin-top: 4px;
  resize: vertical;
  background: #04101f;
  border: 1px solid #2b6ba8;
  border-radius: 8px;
  color: #9dc8e6;
  font: 11px/1.4 Consolas, monospace;
  padding: 6px 8px;
}

.bigbtn.danger {
  border-color: #ff7a6a;
  background: linear-gradient(180deg, #c0392b, #7a1f16);
  color: #ffe1da;
}

.pd-title {
  font-size: 20px;
  color: #cdeeff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 14px;
  margin: 10px 0;
}

.stat {
  font-size: 12px;
  color: #bcd9ee;
}

.stat b {
  float: right;
  color: #eaf7ff;
}

.stat .bar {
  height: 5px;
  background: #0a1c38;
  border-radius: 3px;
  margin-top: 3px;
  overflow: hidden;
}

.stat .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2aa7ff, #7ce7ff);
}

.pd-skills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.pd-skill {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 220px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #24557f;
  background: rgba(6, 24, 48, .7);
  cursor: pointer;
}

.pd-skill:hover {
  border-color: #6ec4ff;
}

.pd-skill img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.pd-skill .n {
  font-size: 12px;
  color: #dcefff;
}

.pd-skill .d {
  font-size: 10px;
  color: #7fa8c6;
}

/* ---------------- 回合出手顺序条 ---------------- */
.bt-order {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #9dc8e6;
  white-space: nowrap;
}

.bt-order span {
  padding: 1px 8px;
  border-radius: 9px;
  border: 1px solid #2b6ba8;
  background: rgba(4, 16, 34, .72);
}

.bt-order span.mine {
  border-color: #4d9fe0;
  color: #bfe9ff;
}

.bt-order span.foe {
  border-color: #a05a4a;
  color: #ffc0a8;
}

.bt-order span.now {
  background: #ffd469;
  color: #06121f;
  border-color: #ffd469;
  font-weight: 700;
}

.bt-order span.done {
  opacity: .38;
}

.bt-order i {
  color: #46708f;
  font-style: normal;
}

#btSound.off {
  color: #8a9aa8;
  border-color: #2b4a63;
}

.unit .plate .ulv {
  font-size: 9px;
  color: #9dc8e6;
  margin-left: 4px;
}

.unit .plate .hpnum {
  font-size: 9px;
  color: #bcd9ee;
  text-align: center;
  margin-top: 1px;
  text-shadow: 0 1px 2px #000;
}

.prep-team .t .tlv {
  font-size: 9px;
  color: #ffd469;
}

.tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

#toast {
  position: absolute;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 80;
  background: rgba(6, 22, 48, .94);
  border: 1px solid #3f8fd0;
  color: #cfeaff;
  padding: 8px 18px;
  border-radius: 18px;
  font-size: 13px;
}

#toast[hidden] {
  display: none;
}
/* ==================== 移动端横版优化与安全区 ==================== */
@media (max-height: 520px) {
  #topbar {
    height: 42px;
    padding: 0 calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));
  }
  .avatar { width: 34px; height: 34px; }
  .tb-name { font-size: 11px; }
  .expbar { width: 120px; height: 5px; }
  .res { font-size: 11px; padding: 1px 8px; }
  .screen { top: 42px; bottom: 44px; }
  #botnav {
    height: 44px;
    padding: 0 calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
  }
  #botnav button { font-size: 11px; }
  .home-side {
    top: 8px;
    right: calc(10px + env(safe-area-inset-right));
    gap: 5px;
  }
  .sidebtn { width: 72px; padding: 4px 0; font-size: 11px; }
  .party { bottom: 46px; }
  .pet-slot { width: 120px; }
  .pet-slot canvas { max-width: none; max-height: none; }
  .modal-box { max-height: 94vh; padding: 10px 14px; }
}

/* 竖屏提醒遮罩 */
.portrait-tip {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 20, 0.94);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #7ce7ff;
}

.pt-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pt-icon {
  font-size: 42px;
  animation: rotatePhone 2.2s infinite ease-in-out;
}

.pt-text {
  font-size: 16px;
  letter-spacing: 2px;
}

@keyframes rotatePhone {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@media (orientation: portrait) and (max-width: 768px) {
  .portrait-tip {
    display: flex;
  }
}

/* 详情弹窗左右切换按钮 */
.modal-box {
  position: relative;
}
/* 方案 A：通透微光大箭头，居于【屏幕边缘与弹窗外壁】两侧空白空间的正中 */
.pd-nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: none;
  background: transparent;
  color: rgba(124, 215, 255, 0.45);
  cursor: pointer;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: none;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
  filter: drop-shadow(0 0 8px rgba(90, 190, 255, 0.35));
}

/* 精准居中于左侧空白区域 */
.pd-nav-btn.prev {
  left: max(16px, calc((100vw - min(880px, 92vw)) / 4));
}

/* 精准居中于右侧空白区域 */
.pd-nav-btn.next {
  right: max(16px, calc((100vw - min(880px, 92vw)) / 4));
}

/* 悬停微光呼吸与轻柔位移，极具二次元科幻高级感 */
.pd-nav-btn:hover {
  color: #a8eeff;
  filter: drop-shadow(0 0 16px rgba(124, 231, 255, 0.95)) drop-shadow(0 0 28px rgba(70, 160, 255, 0.6));
}
.pd-nav-btn.prev:hover {
  transform: translateY(-50%) translateX(-4px) scale(1.12);
}
.pd-nav-btn.next:hover {
  transform: translateY(-50%) translateX(4px) scale(1.12);
}

.pd-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
  color: #fff;
}

/* 屏幕空间极端狭窄时的自适应退让 */
@media (max-width: 960px) {
  .pd-nav-btn.prev {
    left: 8px;
  }
  .pd-nav-btn.next {
    right: 8px;
  }
}


/* ==================== 精灵头顶 MP 怒气条样式 ==================== */
.unit .plate .mp {
  position: relative;
  height: 5px;
  margin-top: 3px;
  background: #081424;
  border: 1px solid #1c3e66;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .8) inset;
}

.unit .plate .mp i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff8800, #ffcc00);
  transition: width .2s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* 怒气满 100 触发黄金呼吸流光脉冲 */
.unit .plate .mp.full {
  border-color: #ffd469;
  box-shadow: 0 0 6px rgba(255, 212, 105, 0.85);
}

.unit .plate .mp.full i {
  background: linear-gradient(90deg, #ff7700, #fff3a8, #ffaa00);
  background-size: 200% 100%;
  animation: mpPulseFlow 1.1s linear infinite;
}

@keyframes mpPulseFlow {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* 精灵底盘满怒聚气光环 */
.unit.mp-full .ring {
  box-shadow: 0 0 32px rgba(255, 215, 80, 0.9) inset, 0 0 24px rgba(255, 180, 40, 0.85) !important;
  animation: ringPulse 0.9s ease-in-out infinite !important;
}

/* ==================== 大招视听演出：暗屏与横幅 ==================== */
/* 全屏聚光暗屏遮罩 */
.bt-dim-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(2, 6, 16, 0.45) 20%, rgba(2, 6, 16, 0.78) 90%);
  z-index: 35;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease-out;
}

.bt-dim-mask.active {
  opacity: 0.5;
}

/* 大招宣名专属切入横幅 */
.bt-cutin-banner {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 32px 8px 14px;
  border-radius: 36px;
  background: linear-gradient(90deg, rgba(8, 28, 58, 0.96), rgba(22, 60, 108, 0.98), rgba(8, 28, 58, 0.96));
  border: 2px solid #ffd469;
  box-shadow: 0 0 26px rgba(255, 212, 105, 0.8), 0 10px 32px rgba(0, 0, 0, 0.85);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: all 0.24s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.bt-cutin-banner.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.bt-cutin-banner img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ffd469;
  background: #04101f;
  object-fit: contain;
  box-shadow: 0 0 12px rgba(255, 212, 105, 0.85);
}

.bt-cutin-banner .c-text {
  display: flex;
  flex-direction: column;
}

.bt-cutin-banner .c-caster {
  font-size: 11px;
  color: #9fe0ff;
  letter-spacing: 1px;
}

.bt-cutin-banner .c-skill {
  font-size: 20px;
  font-weight: 800;
  color: #fff4d1;
  text-shadow: 0 0 12px #ff9900, 0 2px 5px #000;
  letter-spacing: 2px;
}

/* 怒气与减怒飘字颜色 */
.dmg.k-anger {
  color: #ffcc00;
  font-size: 18px;
  text-shadow: 0 2px 5px #000, 0 0 10px #ff6600;
}

.dmg.k-drain {
  color: #c07dff;
  font-size: 18px;
  text-shadow: 0 2px 5px #000, 0 0 10px #7020df;
}


/* ==================== 大招全屏无死角遮罩与施法者破暗特写 ==================== */
/* 全屏聚光暗屏遮罩（覆盖整个战斗视口 100% 宽高，彻底消除顶部与底部漏光断层） */
.bt-dim-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 50%, rgba(2, 6, 16, 0.48) 25%, rgba(2, 6, 16, 0.76) 100%);
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease-out;
}

.bt-dim-mask.active {
  opacity: 0.5;
}

/* 施法者破暗聚光高亮特写（放大 1.08 倍，赋予黄金主角光环，绝不受黑屏干扰） */
.unit.casting-focus {
  z-index: 50 !important;
  filter: brightness(1.22) drop-shadow(0 0 22px rgba(255, 212, 105, 0.95)) !important;
  transform: scale(1.08);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.22s ease-out;
}

.unit.casting-focus .plate {
  box-shadow: 0 0 0 2px #ffd469, 0 0 16px rgba(255, 212, 105, 0.85) !important;
}

/* 其余非施法精灵与血条平滑压暗，自然融入暗部环境 */
.unit.dimmed {
  opacity: 0.42 !important;
  filter: brightness(0.55) saturate(0.65) !important;
  transition: opacity 0.22s ease-out, filter 0.22s ease-out;
}