/* 英雄榜：左侧五榜、中间前十、右侧自己的头像与真实成绩。 */
#modal-root .modal-mask:has(.lb-dialog) {
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(2, 7, 14, .12), rgba(2, 7, 14, .22)), url('/games/gandengyan/assets/battle-bg.webp') center / cover no-repeat !important;
}
#modal-root .sci-frame.lb-dialog {
  --home-rail-height: calc(100vw * 190 / 1736);
  width: 100vw !important;
  height: 100svh !important;
  max-width: none;
  max-height: none;
  container-type: inline-size;
  isolation: isolate;
}
#modal-root .lb-dialog > .sd-deco { display: none !important; }
#modal-root .lb-dialog .sci-dialog {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  max-height: none;
  padding: 0 !important;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
}
#modal-root .lb-dialog .sd-body { position: absolute; inset: 0; }
#modal-root .lb-dialog > .lb-header {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
}
#modal-root .lb-dialog .lb-body {
  position: absolute;
  inset: calc(var(--home-rail-height) + 12px) 1.2% 3%;
  display: grid;
  grid-template-columns: 22% minmax(0, 1fr) 24%;
  column-gap: 4%;
}
#modal-root .lb-dialog .lb-tabs {
  position: static;
  width: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2cqw;
  margin: 0;
  padding: 0;
  min-height: 0;
}
#modal-root .lb-dialog .lb-tab {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: 6cqw;
  max-height: 78px;
  padding: 0 10px;
  border: 1px solid #64748e;
  border-radius: 1.5cqw;
  background: linear-gradient(180deg, #e0e6f0 0%, #b1bad0 30%, #939cbd 70%, #7a84a5 100%);
  box-shadow: inset 0 2px 2px #f1f5f8, inset 0 -2px 2px #53607b, 0 4px 5px #040811;
  color: #27334c;
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: clamp(17px, 2.4cqw, 31px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
  cursor: pointer;
  transition: filter .14s, transform .12s;
}
#modal-root .lb-dialog .lb-tab.on {
  border-color: #41578f;
  background: linear-gradient(180deg, #8496e1 0%, #596cb1 36%, #323f7c 74%, #202750 100%);
  box-shadow: inset 0 2px 2px #9eafe8, inset 0 -2px 2px #111935, 0 4px 5px #040811;
  color: #ffdf25;
  font-weight: 700;
  text-shadow: 0 1px 2px #4b4b20;
}
.lb-tab:hover { filter: brightness(1.1); }
.lb-tab:active { transform: translateY(1px); }
.lb-dialog button:focus-visible { outline: 2px solid #66e8ec; outline-offset: 4px; }
#modal-root .lb-dialog .lb-list {
  position: static;
  width: auto;
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: #558492 transparent;
}
.lb-dialog .lb-list::-webkit-scrollbar { width: 4px; }
.lb-dialog .lb-list::-webkit-scrollbar-thumb { background: #558492; }
#modal-root .lb-dialog .lb-row {
  flex: 0 0 10%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  padding: 0 1.7cqw 0 1cqw;
  border-radius: 0;
  border-bottom: 1px solid rgba(128, 191, 213, .35);
  background: rgba(9, 13, 20, .75);
  color: #f7f9fb;
  font-size: clamp(13px, 1.7cqw, 23px);
}
#modal-root .lb-dialog .lb-row:nth-child(even) { background: rgba(8, 28, 57, .72); }
#modal-root .lb-dialog .lb-row:last-child { border-bottom: 0; }
#modal-root .lb-dialog .lb-rank {
  flex: 0 0 3.4cqw;
  height: 3.4cqw;
  max-height: 44px;
  max-width: 44px;
  border-radius: 50%;
  color: white;
  font: 700 clamp(13px, 1.6cqw, 21px)/1 Consolas, monospace;
  background: radial-gradient(circle at 36% 23%, #aad7a0, #4e994d 45%, #195f22 77%, #093910 100%);
  box-shadow: 0 3px 4px #020809;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
#modal-root .lb-dialog .lb-rank.r1 { background: radial-gradient(circle at 36% 23%, #f897ff, #d632e5 45%, #9006a8 80%, #520661); }
#modal-root .lb-dialog .lb-rank.r2 { background: radial-gradient(circle at 36% 23%, #ffc493, #f47f36 45%, #b54206 80%, #712707); }
#modal-root .lb-dialog .lb-rank.r3 { background: radial-gradient(circle at 36% 23%, #a5aaff, #6478f2 45%, #2834a4 80%, #141c68); }
#modal-root .lb-dialog .lb-name { min-width: 0; font-weight: 600; }
#modal-root .lb-dialog .lb-val { flex: 0 0 auto; font-size: inherit; color: #f6f7fa; white-space: nowrap; }
#modal-root .lb-dialog .lb-val b { font-family: Consolas, monospace; font-weight: 700; color: inherit; }
#modal-root .lb-dialog .lb-val small { font-size: .9em; }
#modal-root .lb-dialog .lb-empty { width: 100%; padding: 30px 8px; color: #dae8f0; font-size: 15px; }
#modal-root .lb-dialog .lb-me {
  position: static;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4cqw;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.lb-portrait { position: relative; width: 66%; aspect-ratio: 1115 / 1130; overflow: hidden; }
.lb-pedestal { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.lb-avatar { position: absolute; left: 18%; top: 1%; width: 64%; height: 60%; display: flex; align-items: center; justify-content: center; }
#modal-root .lb-dialog .lb-avatar .avatar {
  width: 90%;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}
#modal-root .lb-dialog .lb-me-name {
  position: absolute;
  top: 79%;
  left: 9%;
  width: 82%;
  height: 14%;
  color: #263c4c;
  font-size: 1.6cqw;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px #d9e8ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-me-panel {
  position: relative;
  width: 94%;
  height: 44%;
  min-height: 165px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  padding: 2cqw 1cqw;
  border: 1px solid rgba(146, 169, 182, .65);
  background: rgba(28, 36, 50, .76);
  box-shadow: 0 3px 4px rgba(3, 8, 16, .5);
}
.lb-panel-tl, .lb-panel-br { position: absolute; height: auto; pointer-events: none; }
.lb-panel-tl { top: -7%; left: -5%; width: 43%; }
.lb-panel-br { bottom: -4%; right: -4%; width: 30%; }
#modal-root .lb-dialog .lb-me-stat span { color: #f6f8fa; font-size: clamp(17px, 1.9cqw, 25px); font-weight: 600; }
#modal-root .lb-dialog .lb-me-stat b { display: block; color: #1ee4e1; font: 500 clamp(22px, 2.8cqw, 37px)/1.2 Consolas, monospace; }
.lb-me-stat b small { margin-left: .1em; font: 500 .55em/1 'Microsoft YaHei', sans-serif; }
@media (max-width: 600px) and (orientation: portrait) {
  #modal-root .lb-dialog .lb-body { inset: calc(var(--home-rail-height) + 16px) 10px 14px; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 146px; column-gap: 12px; row-gap: 16px; }
  #modal-root .lb-dialog .lb-tabs { grid-column: 1; grid-row: 1 / 3; gap: 16px; }
  #modal-root .lb-dialog .lb-tab { height: 58px; border-radius: 10px; padding: 0 4px; font-size: 17px; letter-spacing: 0; }
  #modal-root .lb-dialog .lb-list { grid-column: 2; grid-row: 1; }
  #modal-root .lb-dialog .lb-row { padding-left: 6px; padding-right: 5px; gap: 7px; font-size: 12px; }
  #modal-root .lb-dialog .lb-rank { flex-basis: 25px; width: 25px; height: 25px; font-size: 13px; }
  #modal-root .lb-dialog .lb-me { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; }
  .lb-portrait { width: 100%; }
  #modal-root .lb-dialog .lb-me-name { font-size: 10px; }
  .lb-me-panel { width: 100%; height: 132px; min-height: 0; padding: 8px 3px; }
  #modal-root .lb-dialog .lb-me-stat span { font-size: 16px; }
  #modal-root .lb-dialog .lb-me-stat b { font-size: 23px; }
}
@media (max-height: 460px) and (orientation: landscape) {
  #modal-root .lb-dialog .lb-body { bottom: 10px; }
  #modal-root .lb-dialog .lb-tabs { gap: 9px; }
  #modal-root .lb-dialog .lb-tab { height: min(5cqw, 46px); font-size: 18px; }
  #modal-root .lb-dialog .lb-me { gap: 12px; }
  .lb-portrait { width: 52%; }
  .lb-me-panel { min-height: 0; height: 46%; padding: 8px 3px; }
  #modal-root .lb-dialog .lb-me-stat span { font-size: 16px; }
  #modal-root .lb-dialog .lb-me-stat b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #modal-root .lb-dialog .lb-tab { transition: none; }
}