:root {
  color-scheme: dark;
  --ink: #eef4f5;
  --muted: #9caeb5;
  --line: rgba(220, 239, 242, .28);
  --gold: #ebd17b;
  --deep: #07111b;
}

* { box-sizing: border-box; }
html { height: 100%; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { height: 100%; font-family: "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; color: var(--ink); background: #07121c; }
button { color: inherit; font: inherit; cursor: pointer; }

.app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 54% 105%, rgba(132, 188, 211, .68), transparent 39%),
    linear-gradient(180deg, #151b21 0%, #14222d 46%, #6d8d9d 100%);
}
.app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background:
    repeating-radial-gradient(ellipse at 50% 106%, transparent 0 20px, rgba(220, 246, 250, .075) 21px 22px),
    linear-gradient(108deg, transparent 42%, rgba(220, 249, 255, .12) 51%, transparent 59%);
}

.topbar { position: relative; z-index: 20; display: flex; align-items: flex-end; justify-content: space-between; height: clamp(76px, 9vh, 100px); padding: 0 clamp(18px, 3vw, 62px) 18px; }
.page-title, .top-mode { display: flex; align-items: center; gap: 14px; font-size: clamp(19px, 1.3vw, 26px); font-weight: 750; }
.people-mark { position: relative; width: 40px; height: 34px; flex: 0 0 40px; }
.people-mark::before { content: ""; position: absolute; left: 3px; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: #eef4f5; box-shadow: 20px 3px 0 #eef4f5; }
.people-mark::after { content: ""; position: absolute; left: 0; top: 14px; width: 17px; height: 19px; border-radius: 8px 8px 2px 2px; background: #eef4f5; box-shadow: 20px 3px 0 #eef4f5; }
.top-mode { gap: 18px; color: #d7e0e1; }
.team-mode-pill { display: flex; align-items: center; gap: 22px; padding: 9px 22px 9px 28px; border: 1px solid rgba(158, 177, 181, .28); border-radius: 34px; background: rgba(5, 13, 18, .66); }
.team-mode-pill i { width: 1px; height: 35px; background: rgba(196, 210, 212, .35); }
.team-mode-pill b { width: 34px; color: #b9c6c9; font-size: 27px; text-align: center; }
.select-mode { display: none; align-items: center; gap: 18px; }
.is-select .team-mode-pill { display: none; }
.is-select .select-mode { display: flex; }
.close-mark { position: relative; width: 48px; height: 48px; margin-left: 18px; padding: 0; border: 0; color: inherit; background: transparent; }
.close-mark::before,
.dialog-close::before {
  content: "";
  position: absolute;
  inset: 2%;
  background: currentColor;
  clip-path: polygon(50% 0, 59% 40%, 100% 50%, 59% 60%, 50% 100%, 41% 60%, 0 50%, 41% 40%);
}
.close-mark::after,
.dialog-close::after {
  content: "";
  position: absolute;
  left: 46.5%;
  top: 46.5%;
  width: 7%;
  height: 7%;
  background: #14212a;
  transform: rotate(45deg);
}
.toggle { width: 112px; height: 39px; padding: 4px; border: 2px solid #77848a; border-radius: 30px; background: #070a0d; }
.toggle i { display: block; width: 47px; height: 27px; border-radius: 25px; background: #d8e1e2; transition: transform .25s ease; }
.is-select .toggle i { transform: translateX(51px); }

.team-view { position: relative; z-index: 2; display: flex; height: calc(100vh - clamp(76px, 9vh, 100px)); height: calc(100dvh - clamp(76px, 9vh, 100px)); min-height: 0; padding: clamp(14px, 2.2vh, 30px) clamp(18px, 5vw, 96px) clamp(18px, 2.2vh, 30px) clamp(12px, 1.4vw, 28px); }
.team-rail { width: clamp(68px, 5.5vw, 112px); padding-top: 25px; display: flex; flex-direction: column; align-items: center; gap: clamp(37px, 5.3vh, 61px); font: clamp(38px, 2.7vw, 54px)/1 Georgia, serif; color: rgba(226, 236, 237, .68); }
.team-rail b { color: #f4e6aa; text-shadow: 0 0 15px rgba(250, 221, 110, .8); }
.team-stage { flex: 1; max-width: 1710px; margin: 0 auto; display: flex; flex-direction: column; min-height: 0; }
.team-slots { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: clamp(14px, 1.7vw, 34px); flex: 1 1 auto; min-height: 0; }
.team-card {
  position: relative;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(8, 25, 37, .25) 10% 93%, transparent 93%),
    radial-gradient(ellipse at 55% 42%, rgba(11, 31, 43, .45), transparent 69%);
  isolation: isolate;
}
.team-card::before { content: attr(data-number); position: absolute; left: 1%; top: 13%; z-index: -1; font: 430px/.78 Georgia, serif; color: rgba(219, 235, 237, .16); }
.team-card::after { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 68%, rgba(111, 145, 158, .2) 77%, rgba(98, 132, 146, .96) 94%); }
.team-card.selected {
  background:
    linear-gradient(90deg, rgba(255, 236, 155, .9) 0 3px, transparent 3px),
    radial-gradient(ellipse at 50% 48%, rgba(246, 220, 113, .2), transparent 64%);
}
.team-card.selected::before { color: #fff0a3; text-shadow: 0 0 22px rgba(246, 215, 95, .45); }
.frame-lines { position: absolute; z-index: 6; inset: 5% 6% 10%; border-left: 1px solid rgba(225, 238, 240, .5); border-right: 1px solid rgba(225, 238, 240, .5); pointer-events: none; }
.frame-lines::before { content: "✦ · · ·"; position: absolute; top: 5%; left: -19px; color: #dce7e8; font-size: 30px; letter-spacing: 7px; }
.frame-lines::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: 8%; height: 1px; background: rgba(224, 238, 240, .45); }
.spine-canvas { position: absolute; z-index: 2; inset: 0 -8% 0; width: 116%; height: 100%; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .32)); }
.team-art { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 20%; transform: scale(1.42); transform-origin: 50% 28%; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .32)); }
.spine-status { position: absolute; z-index: 3; inset: 45% 0 auto; text-align: center; color: rgba(228, 240, 242, .7); font-size: 14px; }
.team-card.ready .spine-status { display: none; }
.level { position: absolute; z-index: 9; right: 8%; bottom: 68px; font-size: 23px; }
.level b { margin-left: 7px; font: 68px/1 Georgia, serif; }
.role-name { position: absolute; z-index: 9; right: 7%; bottom: 22px; min-width: 90px; padding: 5px 18px; border-radius: 25px; background: #071019; font-size: 22px; font-weight: 750; text-align: center; }
.element { position: absolute; z-index: 9; left: 7%; bottom: 29px; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid #e4f6f8; border-radius: 50%; background: #096494; box-shadow: 0 0 16px #52c8f2; }
.team-card:hover { transform: translateY(-5px); filter: brightness(1.08); }
.team-actions { display: flex; justify-content: flex-end; gap: 26px; margin-top: 20px; }
.light-button { min-width: 260px; padding: 12px 28px; border: 2px solid rgba(247, 251, 251, .75); border-radius: 32px; color: #111b20; background: linear-gradient(#fff, #dbe5e6); box-shadow: 0 4px 0 rgba(0, 0, 0, .2); font-size: 24px; font-weight: 800; }

.select-view { position: relative; z-index: 3; display: none; grid-template-columns: clamp(580px, 38vw, 790px) minmax(0, 1fr); height: calc(100vh - clamp(76px, 9vh, 100px)); height: calc(100dvh - clamp(76px, 9vh, 100px)); min-height: 0; padding: 8px clamp(18px, 2.7vw, 54px) clamp(18px, 4vh, 58px); gap: clamp(18px, 1.4vw, 28px); }
.is-select .team-view { display: none; }
.is-select .select-view { display: grid; }
.roster-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.roster-grid { height: auto; min-height: 0; flex: 1 1 auto; margin-left: clamp(0px, 4.5vw, 92px); overflow-y: auto; padding: 14px 12px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(138px, 10vw, 205px); align-content: start; gap: 9px; scrollbar-color: #d3e6e8 rgba(0,0,0,.22); }
.role-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 2px solid rgba(210, 226, 229, .18); border-radius: 7px; background: #26323a; }
.role-tile img { width: 100%; height: calc(100% - 36px); display: block; object-fit: cover; object-position: center center; background: #26323a; }
.role-tile .tile-level { position: absolute; inset: auto 0 0; height: 36px; padding: 5px 8px; background: #202b31; font-size: clamp(14px, 1.2vw, 21px); font-weight: 700; text-align: right; }
.role-tile .quality { position: absolute; left: 0; right: 0; bottom: 34px; height: 4px; background: #b095d2; }
.role-tile[data-quality="5"] .quality { background: #e9d778; }
.role-tile .orb { position: absolute; top: 6px; left: 6px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #075b87; border: 1px solid #c7eff6; font-size: 15px; }
.element-1 { color: #dbf6ff; background: #075b87 !important; }
.element-2 { color: #ffb07d; background: #843315 !important; }
.element-3 { color: #d9adff; background: #542070 !important; }
.element-4 { color: #8df0c1; background: #0c624b !important; }
.element-5 { color: #fff19a; background: #806817 !important; }
.element-6 { color: #ff9ccc; background: #792550 !important; }
.role-tile .order { position: absolute; z-index: 3; top: -2px; right: -2px; min-width: 36px; padding: 2px 6px; color: #fff3aa; background: #1c2227; border: 2px solid #e0c34d; border-radius: 4px; font-size: 22px; font-weight: 800; }
.role-tile.active { border-color: #ffe275; box-shadow: 0 0 0 2px rgba(255, 226, 117, .3), inset 0 0 20px rgba(255, 229, 128, .16); }
.roster-footer { height: 58px; margin: 10px 11px 0 clamp(11px, 4.5vw, 103px); display: flex; align-items: center; gap: 18px; color: #d7e1e2; }
.roster-footer button { width: 48px; height: 48px; border: 2px solid #aabbbf; border-radius: 50%; background: #1a282f; }
.roster-footer span { flex: 1; padding: 10px 28px; border-radius: 28px; background: rgba(17, 29, 36, .72); text-align: center; font-size: 20px; }
.roster-footer b { color: #c1d0d3; }

.detail-panel { position: relative; min-width: 0; padding: 35px 34px 100px; overflow: hidden; background: linear-gradient(100deg, rgba(16, 31, 42, .82), rgba(22, 39, 51, .28)); }
.detail-panel::before { content: ""; position: absolute; inset: 0; opacity: .13; background: repeating-linear-gradient(165deg, transparent 0 70px, rgba(218, 241, 245, .25) 71px 72px); }
.detail-head, .skill-list, .skill-copy, .detail-actions { position: relative; z-index: 2; }
.detail-head h1 { margin: 0 0 12px; font-size: 35px; }
.role-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.role-tags span { padding: 5px 11px; font-size: 18px; font-weight: 750; }
.role-tags .tag-orange { color: #ff984e; background: rgba(175, 80, 22, .32); }
.role-tags .tag-gold { color: #f8df79; background: rgba(162, 139, 40, .3); }
.role-tags .tag-purple { color: #e895ef; background: rgba(132, 47, 154, .33); }
.role-tags .tag-green { color: #72e3a8; background: rgba(35, 133, 88, .34); }
.role-tags .tag-blue { color: #8ebdff; background: rgba(45, 89, 151, .35); }
.role-tags .tag-red { color: #ff7d79; background: rgba(159, 52, 55, .34); }
.skill-list { display: flex; flex-wrap: nowrap; gap: 11px; margin: 28px 0 30px; }
.skill-button { flex: 0 1 92px; min-width: 70px; height: clamp(76px, 5vw, 92px); padding: 7px; border: 2px solid rgba(192, 207, 211, .45); border-radius: 6px; background: rgba(17, 29, 37, .82); }
.skill-button img { width: 100%; height: 100%; object-fit: contain; }
.skill-button.active, .skill-button:hover { border-color: #ead27b; background: #f5f2e7; box-shadow: 0 0 12px rgba(255, 220, 115, .35); }
.skill-button.active img, .skill-button:hover img { filter: sepia(.2) saturate(.7) brightness(.72); }
.skill-copy { border-top: 1px solid rgba(216, 231, 234, .28); }
.skill-copy header { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; background: rgba(10, 20, 28, .38); }
.skill-copy h2 { margin: 0; font-size: 25px; }
.skill-copy header span { font-size: 21px; font-weight: 700; }
.skill-copy p { max-height: 43vh; overflow-y: auto; margin: 8px 0 0; padding-right: 16px; color: #d5dfe1; white-space: pre-line; font-size: 19px; font-weight: 600; line-height: 1.7; }
.skill-copy small { display: block; margin-top: 18px; color: #879aa1; }
.detail-actions { position: absolute; right: 34px; bottom: 24px; display: flex; gap: 20px; }
.detail-actions .light-button { min-width: 190px; font-size: 20px; }

.exit-dialog {
  --popup-offset-x: clamp(-24px, -1.3vw, -10px);
  --popup-offset-y: clamp(-46px, -4.6vh, -18px);
  width: min(92vw, calc(90vh * 2.4), 1440px);
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  color: #182126;
  background: transparent;
  overflow: visible;
  transform: translate(var(--popup-offset-x), var(--popup-offset-y));
}
.exit-dialog::backdrop {
  background: rgba(4, 8, 12, .46);
  backdrop-filter: blur(7px) brightness(.74) saturate(.78);
}
.exit-dialog[open] { animation: popup-fade-in .18s ease-out both; }
.exit-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 2.4 / 1;
  overflow: hidden;
  background: url("assets/ui/dialog/T_CommonPopupBg.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .5));
}
.exit-panel h2 {
  position: absolute;
  top: 2.5%;
  left: 3%;
  margin: 0;
  font-size: clamp(21px, 2.45vw, 44px);
  font-weight: 800;
  letter-spacing: .03em;
}
.exit-panel p {
  position: absolute;
  top: 35.5%;
  left: 10%;
  right: 10%;
  margin: 0;
  font-size: clamp(20px, 2.35vw, 42px);
  font-weight: 700;
  text-align: center;
}
.dialog-close {
  position: absolute;
  z-index: 2;
  top: 1.8%;
  right: 1.7%;
  width: clamp(42px, 5vw, 68px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  color: #111a1f;
  background: transparent;
  transition: transform .16s ease, filter .16s ease;
}
.dialog-close::after { background: #f5f6f3; }
.dialog-close:hover { transform: rotate(45deg) scale(1.08); filter: drop-shadow(0 0 5px rgba(14, 26, 31, .35)); }
.dialog-close:focus-visible { outline: 2px solid rgba(17, 26, 31, .45); outline-offset: -6px; border-radius: 5px; }
.exit-actions {
  position: absolute;
  left: 4%;
  right: 5.2%;
  bottom: 12.5%;
  display: flex;
  justify-content: space-between;
  gap: clamp(80px, 18vw, 340px);
}
.popup-action {
  --popup-button-left: url("assets/ui/dialog/SP_ConfirmAPopupNor-left.png");
  --popup-button-mid: url("assets/ui/dialog/SP_ConfirmAPopupNor-mid.png");
  --popup-button-right: url("assets/ui/dialog/SP_ConfirmAPopupNor-right.png");
  --popup-button-cap: clamp(56.25px, 9.5625vh, 92.25px);
  position: relative;
  isolation: isolate;
  flex: 0 1 37%;
  height: clamp(50px, 8.5vh, 82px);
  min-width: 0;
  padding: 0 4%;
  border: 0;
  appearance: none;
  color: #f3f6f5;
  background-color: transparent;
  background-image: var(--popup-button-left), var(--popup-button-right);
  background-position: left center, right center;
  background-size: calc(var(--popup-button-cap) + 1px) 100%, calc(var(--popup-button-cap) + 1px) 100%;
  background-repeat: no-repeat;
  font-size: clamp(20px, 2.25vw, 40px);
  font-weight: 750;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.popup-action::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--popup-button-cap);
  right: var(--popup-button-cap);
  z-index: -1;
  pointer-events: none;
  background: var(--popup-button-mid) center / 1px 100% repeat-x;
}
.popup-action:hover,
.popup-action:focus-visible {
  --popup-button-left: url("assets/ui/dialog/SP_ConfirmAPopupHold-left.png");
  --popup-button-mid: url("assets/ui/dialog/SP_ConfirmAPopupHold-mid.png");
  --popup-button-right: url("assets/ui/dialog/SP_ConfirmAPopupHold-right.png");
  outline: none;
}
.popup-action:active {
  --popup-button-left: url("assets/ui/dialog/SP_ConfirmAPopupPress-left.png");
  --popup-button-mid: url("assets/ui/dialog/SP_ConfirmAPopupPress-mid.png");
  --popup-button-right: url("assets/ui/dialog/SP_ConfirmAPopupPress-right.png");
  transform: translateY(1px);
}

.exit-remember {
  position: absolute;
  top: 58%;
  left: 4%;
  right: 5.2%;
  height: 9%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 22px);
  color: #625f5b;
  background: rgba(202, 202, 202, .65);
  font-size: clamp(16px, 1.8vw, 31px);
  font-weight: 650;
  cursor: pointer;
}
.exit-remember input { position: absolute; opacity: 0; pointer-events: none; }
.exit-remember span {
  position: relative;
  width: clamp(26px, 3vw, 42px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px rgba(255, 255, 255, .7);
}
.exit-remember input:checked + span::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: #212a2e;
}
.exit-remember input:focus-visible + span { outline: 3px solid #927d3f; outline-offset: 3px; }
.exit-remember b { font-weight: 650; }

@keyframes popup-fade-in {
  from { opacity: 0; transform: translate(var(--popup-offset-x), var(--popup-offset-y)) scale(.97); }
  to { opacity: 1; transform: translate(var(--popup-offset-x), var(--popup-offset-y)) scale(1); }
}

@media (max-height: 800px) {
  .topbar { height: 82px; }
  .team-view, .select-view { height: calc(100vh - 82px); height: calc(100dvh - 82px); min-height: 0; }
  .team-card { min-height: 0; max-height: none; }
  .team-rail { gap: 44px; font-size: 45px; }
}

@media (max-width: 1200px) {
  .select-view { grid-template-columns: minmax(430px, 48vw) minmax(0, 1fr); padding-inline: 18px; gap: 16px; }
  .roster-grid { margin-left: 0; grid-auto-rows: clamp(132px, 15vw, 176px); }
  .roster-footer { margin-left: 11px; }
  .detail-panel { padding-inline: 22px; }
  .skill-button { min-width: 58px; }
  .team-card { max-height: none; }
  .level b { font-size: 52px; }
  .role-name { min-width: 72px; padding-inline: 12px; font-size: 18px; }
}

@media (max-width: 800px) {
  .topbar { align-items: center; padding-bottom: 10px; }
  .team-mode-pill { padding: 7px 12px; gap: 10px; }
  .team-mode-pill b, .team-mode-pill i { display: none; }
  .close-mark { margin-left: 4px; }
  .team-view { padding-inline: 6px 12px; }
  .team-rail { width: 50px; }
  .team-slots { grid-template-columns: repeat(3, minmax(230px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .team-card { scroll-snap-align: center; }
  .select-view { grid-template-columns: minmax(0, 1fr); padding: 0 12px 40px; }
  .roster-grid { height: 55vh; min-height: 360px; grid-auto-rows: clamp(132px, 30vw, 180px); }
  .detail-panel { min-height: 470px; }
  .exit-dialog { width: min(96vw, calc(92vh * 2.05)); }
  .exit-panel { aspect-ratio: 2.05 / 1; }
  .exit-actions { left: 5%; right: 5%; bottom: 10%; gap: 30px; }
  .exit-remember { left: 5%; right: 5%; }
}