/* Role selection: a readable roster and a dedicated character dossier. */
.role-select.overlay {
  --role-surface: #071a32;
  --role-surface-raised: #102947;
  --role-line: #416b98;
  --role-copy: #eff7ff;
  --role-muted: #bfd2e8;
  --role-gold: #ffd172;
  background: #06142b url('assets/x-survivors-title-world-v1.png') center/cover no-repeat;
  backdrop-filter: none;
  color-scheme: dark;
}

.role-select .role-panel {
  display: grid;
  grid-template-columns: minmax(330px, .86fr) minmax(0, 1.24fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  column-gap: 20px;
  width: min(1210px, calc(100vw - 42px));
  height: min(824px, calc(100dvh - 42px));
  max-height: none;
  min-height: 0;
  overflow: hidden;
  padding: 19px 22px 17px;
  border: 3px solid #69a9df;
  background: #081b34;
  color: var(--role-copy);
  box-shadow: inset 0 0 0 4px #102e51, 0 0 0 3px #041126, 10px 12px 0 #031023bb !important;
}

.role-select .role-panel::before { display: none; }

.role-select .role-panel > h2 {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 1px 0 0;
  color: #fff9ec;
  font-size: clamp(25px, 3.1vw, 39px);
  line-height: 1.22;
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 3px 3px 0 #255784;
}

.role-select .role-panel > p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 4px 0 17px;
  color: #9fc5e8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-align: center;
  text-shadow: none;
}

.role-select .role-grid {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 8px 4px 2px;
  overscroll-behavior: contain;
  scrollbar-color: #5588b8 #07182e;
  scrollbar-width: thin;
}

.role-select .role-card {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 117px;
  padding: 7px 10px 7px 8px;
  overflow: hidden;
  border: 2px solid #406b9b;
  background: #102744;
  color: var(--role-copy);
  text-align: left;
  box-shadow: none !important;
  transition: border-color .15s steps(2, end), background .15s steps(2, end), transform .15s steps(2, end);
}

.role-select .role-card::after {
  content: '›';
  position: absolute;
  top: 8px;
  right: 10px;
  color: #8dbbe4;
  font: 900 27px/1 monospace;
}

.role-select .role-card:hover,
.role-select .role-card:focus-visible {
  transform: translateX(2px);
  border-color: #a6d7ff;
  background: #173755;
  outline: none;
}

.role-select .role-card[aria-selected='true'] {
  border-color: var(--role-accent);
  background: #153655;
  box-shadow: inset 4px 0 0 var(--role-accent), inset 0 0 0 1px #b8e4ff !important;
}

.role-select .role-card[aria-selected='true']::after { color: var(--role-accent); }

.role-select .role-lock-state { display: inline-block; margin-left: 7px; color: #ffd172; font-size: 10px; font-weight: 700; white-space: nowrap; }
.role-select .role-card[data-unlocked='true'] .role-lock-state { color: #8de4c8; }

.role-select .role-art-wrap {
  width: 82px;
  height: 98px;
  border: 0;
  border-bottom: 3px solid var(--role-accent);
  background: #0a1c34;
}

.role-select .role-card .role-art {
  display: block;
  width: 78px;
  height: 94px;
  margin: 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.role-select .role-copy { gap: 4px; padding-right: 15px; }
.role-select .role-copy .role-index {
  width: 100%;
  color: #9dc4e5;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.25;
}
.role-select .role-copy b {
  color: #fff9ec;
  font-size: 17px;
  line-height: 1.15;
}
.role-select .role-copy .role-trait {
  display: -webkit-box;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #d3e5f5;
  font-size: 13px !important;
  line-height: 1.35;
}
.role-select .role-copy em {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--role-accent);
  font-size: 12px !important;
  font-style: normal;
  line-height: 1.25;
}
.role-select .role-ui-icon {
  display: inline-block;
  flex: none;
  width: 25px;
  height: 25px;
  vertical-align: middle;
}
.role-select .role-ui-icon .weapon-pixel-art,
.role-select .role-ui-icon .passive-pixel-art {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.role-select .role-copy em .role-ui-icon { width: 23px; height: 23px; }
.role-select .role-mastery-badge { display: none; }

.role-select .role-scroll-hint {
  grid-column: 1;
  grid-row: 4;
  display: block;
  margin: 7px 0 0;
  color: #a5c3df;
  font-size: 11px;
  text-align: left;
}

.role-select .role-detail {
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 16px 17px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 2px solid #426e9d;
  background: #0b2440;
  color: var(--role-copy);
  overscroll-behavior: contain;
  scrollbar-color: #5588b8 #0b2440;
  scrollbar-width: thin;
}

.role-select .role-detail-head {
  display: grid;
  grid-template-columns: 166px minmax(0, 1fr) 50px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  min-height: 198px;
  margin: 0 -16px 17px;
  padding: 9px 16px;
  border-bottom: 2px solid #3d6895;
  background: #103257;
}

.role-select .role-detail-head::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / 3;
  width: 158px;
  height: 178px;
  border-bottom: 3px solid var(--role-accent);
  background: #091e3a var(--selected-role-art, url('assets/x-survivors-role-bawan-v5.png')) center/contain no-repeat;
  image-rendering: pixelated;
}

.role-select .role-detail-head strong {
  grid-column: 2;
  align-self: end;
  color: #fff9ed;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.2;
  text-shadow: 2px 2px 0 #295f8d;
}
.role-select .role-detail-head span {
  grid-column: 2;
  align-self: start;
  color: #b8d6ec;
  font-size: 14px;
  line-height: 1.45;
}
.role-select .role-detail-head .weapon-pixel-art {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  width: 49px;
  height: 49px;
  margin: 0;
}

.role-select:has(.role-card[data-role='bawan'][aria-selected='true']) { --selected-role-art: url('assets/x-survivors-role-bawan-v5.png'); }
.role-select:has(.role-card[data-role='red'][aria-selected='true']) { --selected-role-art: url('assets/x-survivors-role-red-v1.png'); }
.role-select:has(.role-card[data-role='bruce'][aria-selected='true']) { --selected-role-art: url('assets/x-survivors-role-bruce-v1.png'); }
.role-select:has(.role-card[data-role='youzi'][aria-selected='true']) { --selected-role-art: url('assets/x-survivors-role-youzi-v1.png'); }
.role-select:has(.role-card[data-role='liyu'][aria-selected='true']) { --selected-role-art: url('assets/x-survivors-role-liyu-v1.png'); }
.role-select:has(.role-card[data-role='katherine'][aria-selected='true']) { --selected-role-art: url('assets/x-survivors-role-katherine-v1.png'); }
.role-select:has(.role-card[data-role='gt'][aria-selected='true']) { --selected-role-art: url('assets/x-survivors-gt-v3.png'); }
.role-select:has(.role-card[data-role='niule'][aria-selected='true']) { --selected-role-art: url('assets/x-survivors-role-niule-v1.png'); }
.role-select:has(.role-card[data-role='wangguan'][aria-selected='true']) { --selected-role-art: url('assets/x-survivors-wangguan-v2.png'); }

.role-select .role-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.role-select .role-detail-grid > div {
  min-width: 0;
  min-height: 104px;
  padding: 10px 11px;
  border: 1px solid #3d6897;
  border-left: 3px solid var(--role-accent);
  background: #0d2a4a;
}
.role-select .role-detail-grid small {
  display: block;
  color: #ffd58b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.role-select .role-detail-grid p {
  margin: 7px 0 0;
  color: #e5f2fc;
  font-size: 14px;
  line-height: 1.48;
}

.role-select .evolution-recipe {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid #f6bf56;
  background: #372d21;
  color: #fff1cc;
  font-size: 13px;
  line-height: 1.45;
}
.role-select .evolution-recipe b { color: #ffe19a; font-size: 13px; }
.role-select .evolution-recipe span { color: #f3e0bd; }

.role-select .arsenal-catalog {
  margin: 0 0 13px;
  padding: 9px 12px;
  border: 1px solid #426e9d;
  background: #0c2b4a;
  color: #d7ecff;
}
.role-select .arsenal-catalog summary { color: #d6edff; font-size: 13px; line-height: 1.45; }
.role-select .arsenal-catalog > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.role-select .arsenal-catalog > div > span { border-color: #426a95; background: #123454; }
.role-select .arsenal-catalog b { color: #f5faff; font-size: 11px; }
.role-select .arsenal-catalog small { color: #c6dcee; font-size: 10px; }

.role-select .contract-title,
.role-select .meta-heading,
.role-select .platform-heading {
  margin: 14px 0 8px;
  color: #fff4d9;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}
.role-select .contract-grid { gap: 9px; }
.role-select .contract-card,
.role-select .meta-branch,
.role-select .meta-remix {
  min-width: 0;
  border: 1px solid #416b96;
  background: #102e4f;
  color: #edf7ff;
  box-shadow: none;
}
.role-select .contract-card { min-height: 91px; padding: 10px; }
.role-select .contract-card b { display: flex; align-items: center; gap: 7px; color: #fff6dd; font-size: 14px; line-height: 1.25; }
.role-select .contract-card small { margin-top: 5px; color: #d3e5f4; font-size: 13px; line-height: 1.42; }
.role-select .contract-card:hover,
.role-select .meta-branch:hover,
.role-select .meta-remix:hover { border-color: #a2d4ff; background: #194061; }
.role-select .contract-card[aria-selected='true'] {
  border-color: #ffd172;
  background: #403220;
  box-shadow: inset 0 0 0 2px #ab7a34;
}

.role-select .economy-guide {
  margin: 12px 0;
  padding: 11px 12px;
  border-left: 3px solid #5bd2e2;
  background: #0e304d;
  color: #d6e8f5;
  font-size: 13px;
  line-height: 1.55;
}
.role-select .economy-guide b { color: #ffe39b; }
.role-select .economy-guide .role-ui-icon { width: 20px; height: 20px; margin-right: 3px; vertical-align: -5px; }
.role-select .meta-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.role-select .meta-heading span { border-color: #bd9952; background: #332c1d; color: #ffe19a; font-size: 12px; white-space: nowrap; }
.role-select .meta-progress { height: 10px; border-color: #527aa4; background: #07192e; }
.role-select .meta-progress i { background: #ffd172; }
.role-select .meta-branches,
.role-select .platform-branches { gap: 9px; }
.role-select .meta-branch { min-height: 91px; padding: 10px 11px; }
.role-select .meta-branch > span { color: #fff4d7; font-size: 12px; line-height: 1.35; }
.role-select .meta-branch > span b { min-width: 0; }
.role-select .platform-branch > span b { display: inline-flex; align-items: center; gap: 6px; }
.role-select .meta-branch em { color: #ffd172; }
.role-select .meta-branch small { color: #c8ddec; font-size: 12px; line-height: 1.38; }
.role-select .meta-branch strong { color: #80d6ff; font-size: 11px; }
.role-select .meta-branch[aria-disabled='true'] { border-color: #365272; background: #0d243d; }
.role-select .meta-remix { margin-top: 10px; padding: 10px 12px; }
.role-select .meta-remix b { color: #ffe29f; font-size: 12px; }
.role-select .meta-remix span { color: #d2e2ef; font-size: 11px; }
.role-select .meta-remix[aria-pressed='true'] { border-color: #ffd172; background: #3b2d1c; }
.role-select .meta-status { margin-top: 10px; color: #b7cde2; font-size: 11px; line-height: 1.45; }
.role-select .platform-heading span { color: #b7d1e4; font-size: 11px; }
.role-select .platform-group {
  margin: 8px 0;
  border: 1px solid #416b96;
  background: #0a2541;
}
.role-select .platform-group > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #f8e9c4;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.role-select .platform-group > summary span { color: #b8d0e2; font-size: 11px; font-weight: 600; }
.role-select .platform-group[open] > summary { border-bottom: 1px solid #416b96; }
.role-select .platform-group .platform-branches { padding: 9px; }
.role-select .platform-branch .platform-next {
  display: block;
  margin-top: 5px;
  padding-left: 7px;
  border-left: 2px solid #79c7e6;
  color: #c8eafa;
}

.role-select .role-actions {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 9px 2px 0;
  background: #081b34;
}
.role-select .role-unlock-status { flex: 0 0 100%; margin: 0; color: #c4d9ed; font-size: 11px; line-height: 1.4; }
.role-select .role-actions .role-x-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; margin-right: auto; padding: 11px 10px; color: #a4dcff; font-size: 12px; text-decoration: none; }
.role-select .role-actions .primary:disabled { border-color: #526a81; background: #243a50; color: #9db2c7; box-shadow: none !important; cursor: not-allowed; }
.role-select .role-actions .primary:disabled:hover { background: #243a50; }
.role-select .role-actions a:focus-visible { outline: 2px solid #fff1c4; outline-offset: 3px; }
.role-select .role-actions .primary,
.role-select .role-actions .secondary {
  min-width: 154px;
  margin: 0;
  padding: 11px 18px;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.2;
}
.role-select .role-actions .primary { border-color: #fff0bf; background: #f4be54; color: #221a0b; box-shadow: 4px 4px 0 #94601d !important; }
.role-select .role-actions .primary:hover { background: #ffd57b; }
.role-select .role-actions .secondary { border-color: #70a7d5; background: #183e67; color: #f0f8ff; box-shadow: 4px 4px 0 #061427 !important; }
.role-select .role-actions .secondary:hover { background: #225483; }

@media (max-width: 900px) {
  .role-select .role-panel { grid-template-columns: minmax(270px, .9fr) minmax(0, 1.1fr); column-gap: 12px; width: calc(100vw - 20px); padding: 14px; }
  .role-select .role-detail-head { grid-template-columns: 102px minmax(0, 1fr) 42px; min-height: 128px; }
  .role-select .role-detail-head::before { width: 97px; height: 115px; }
  .role-select .role-card { grid-template-columns: 68px minmax(0, 1fr); min-height: 102px; gap: 8px; }
  .role-select .role-art-wrap { width: 68px; height: 83px; }
  .role-select .role-card .role-art { width: 65px; height: 80px; }
  .role-select .role-copy b { font-size: 15px; }
  .role-select .role-copy .role-trait { font-size: 11px !important; }
  .role-select .role-detail-grid { grid-template-columns: 1fr; gap: 7px; }
  .role-select .role-detail-grid > div { min-height: 0; }
  .role-select .contract-grid { grid-template-columns: 1fr; }
  .role-select .contract-card { min-height: 0; }
}

@media (max-width: 680px) {
  .role-select.overlay { padding: 0; }
  .role-select .role-panel {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: 13px 12px max(10px, env(safe-area-inset-bottom));
    border-width: 2px;
  }
  .role-select .role-panel > h2 { flex: none; margin: 2px 0 0; font-size: 23px; }
  .role-select .role-panel > p { flex: none; margin: 3px 0 10px; font-size: 11px; }
  .role-select .role-grid { flex: 0 0 auto; display: flex; gap: 7px; max-height: 27dvh; overflow-x: auto; overflow-y: hidden; padding: 1px 2px 7px; scroll-snap-type: x proximity; }
  .role-select .role-card { flex: 0 0 min(245px, 66vw); min-width: 0; min-height: 100px; scroll-snap-align: start; }
  .role-select .role-scroll-hint { flex: none; margin: 1px 0 7px; font-size: 10px; }
  .role-select .role-detail { flex: 1 1 0; min-height: 0; margin: 0; padding: 0 11px 13px; }
  .role-select .role-detail-head { grid-template-columns: 70px minmax(0, 1fr) 40px; min-height: 92px; margin: 0 -11px 11px; padding: 7px 10px; gap: 7px; }
  .role-select .role-detail-head::before { width: 67px; height: 77px; }
  .role-select .role-detail-head strong { font-size: 19px; }
  .role-select .role-detail-head span { font-size: 11px; }
  .role-select .role-detail-head .weapon-pixel-art { width: 40px; height: 40px; }
  .role-select .role-detail-grid { grid-template-columns: 1fr; }
  .role-select .role-detail-grid small { font-size: 11px; }
  .role-select .role-detail-grid p { font-size: 12px; }
  .role-select .contract-grid { grid-template-columns: 1fr; }
  .role-select .meta-branches,
  .role-select .platform-branches { grid-template-columns: 1fr; }
  .role-select .role-actions { flex: none; justify-content: stretch; gap: 8px; padding: 10px 1px 2px; }
  .role-select .role-actions .primary,
  .role-select .role-actions .secondary { flex: 1; min-width: 0; padding: 11px 8px; font-size: 12px; }
  .role-select .role-actions .role-x-link { flex: 0 0 100%; padding: 8px; }
}

@media (max-height: 690px) and (min-width: 681px) {
  .role-select .role-panel { height: calc(100dvh - 18px); }
  .role-select .role-panel > p { margin-bottom: 9px; }
  .role-select .role-card { min-height: 102px; }
}

@media (prefers-reduced-motion: reduce) {
  .role-select .role-card { transition: none; }
}