/* Character roster. Scoped to the select phase so auth and the live cockpit
   retain their own palettes and layouts. All atmosphere is static. */
.play-view[data-plg='pregame'] .plg-overlay[data-view='select'] {
  --roster-ink: #f4f1e9;
  --roster-muted: #a1acba;
  --roster-line: #2b3441;
  --roster-gold: #ffc875;
  color: var(--roster-ink);
  background: radial-gradient(ellipse at 90% 0, #232131 0, transparent 48%), #0b1019;
}
.plg-overlay[data-view='select']::before { display: none; }
.plg-overlay[data-view='select'] .plg-atmos { opacity: .35; }
.plg-overlay[data-view='select'] .plg-planet,
.plg-overlay[data-view='select'] .plg-orbit,
.plg-overlay[data-view='select'] .plg-nebula { display: none; }
.plg-selstage { padding: 24px clamp(16px, 4vw, 56px) 40px; }
.plg-selstage .plg-stage-in.wide { max-width: 1120px; min-width: 0; }
.plg-roster-brand {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin: 0 0 20px; min-height: 62px;
}
.plg-roster-wordmark { display: flex; align-items: center; gap: 12px; }
.plg-roster-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: #ffc875; color: #994121; font-size: 26px; box-shadow: inset -4px -4px 0 #cc712533; }
.plg-roster-logotype { display: block; font: 400 21px/1.2 'Anton', sans-serif; color: #f4f1e9; letter-spacing: .04em; }
.plg-roster-edition { display: block; margin-top: 5px; font: 9px/1.2 var(--mono); color: var(--roster-gold); letter-spacing: .22em; }
.plg-roster-link { color: var(--roster-muted); font: 11px/1.5 var(--mono); letter-spacing: .12em; text-align: right; }
.plg-roster-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 260px;
  display: flex; align-items: center; padding: 36px 42px;
  border: 1px solid #443b3b; border-radius: 16px;
  background: linear-gradient(110deg, #1c202c 5%, #28232b 55%, #523a31);
  box-shadow: 0 20px 55px #0003;
}
.plg-roster-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(125deg, transparent 0 85px, #ffd18d06 86px 87px);
}
.plg-hero-copy { position: relative; z-index: 2; max-width: 65%; }
.plg-eyebrow { display: block; font: 11px/1.5 var(--mono); letter-spacing: .18em; color: var(--roster-gold); }
.plg-hero-copy h1 {
  font: 400 clamp(36px, 4.5vw, 60px)/1.08 'Anton', sans-serif;
  letter-spacing: .015em; color: var(--roster-ink); margin: 13px 0 16px;
  text-shadow: 0 3px 20px #0b101950;
}
.plg-hero-copy h1 span { display: block; color: var(--roster-gold); }
.plg-hero-copy p { color: #c3c5cc; font: 500 17px/1.5 var(--ui); margin: 0; text-wrap: balance; }
.plg-hero-art { position: absolute; inset: 0 0 0 auto; width: 45%; z-index: 1; pointer-events: none; }
.plg-hero-sun {
  position: absolute; width: 300px; height: 300px; right: 36px; top: 20px;
  display: grid; place-items: center; color: #853b2c; font: 120px/1 sans-serif;
  border-radius: 50%; border: 1px solid #efb77755;
  background: radial-gradient(circle at 40% 35%, #df9e55, #b76537 62%, #72432a);
  box-shadow: 0 0 0 12px #efb77707, 0 0 0 13px #efb7771a, 0 0 70px #efb77715;
}
.plg-roster { margin-top: 32px; }
.plg-selstage .plg-selhead { flex-direction: row; align-items: center; gap: 16px; margin: 0 0 18px; flex-wrap: wrap; }
.plg-roster-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.plg-selstage .plg-sel-t { font: 600 27px/1.2 var(--ui); letter-spacing: 0; margin: 0; color: var(--roster-ink); text-shadow: none; }
.plg-roster-count { font: 12px/1 var(--mono); color: #c0cad6; padding: 6px 9px; border: 1px solid var(--roster-line); border-radius: 5px; }
.plg-selstage .plg-btn {
  border-radius: 7px; min-height: 44px; font-size: 12px; letter-spacing: .055em;
  padding: 11px 17px; box-shadow: none; flex: 0 1 auto;
}
.plg-selstage .plg-btn.primary { background: #ffc875; border-color: #ffc875; color: #241b10; }
.plg-selstage .plg-btn.primary:hover { background: #ffda9d; border-color: #ffda9d; box-shadow: 0 5px 18px #ffc87514; }
.plg-selstage .plg-btn.ghost { color: #bcc6d2; background: #ffffff03; border-color: var(--roster-line); }
.plg-selstage .plg-btn.ghost:hover { color: #fff; background: #ffffff09; border-color: #626e7e; }
.plg-selstage .plg-btn.danger { color: #ff9996; }
.plg-selstage .plg-btn:focus-visible,
.plg-selstage summary:focus-visible { outline: 2px solid var(--roster-gold); outline-offset: 4px; }
.plg-selstage .plg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; perspective: none; }
.plg-selstage .plg-charcard {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 22px; border: 1px solid #323b48; border-radius: 12px;
  background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--char) 9%, transparent), transparent 60%), #141c27;
  box-shadow: 0 8px 22px #0002; transition: transform 160ms, border-color 160ms, box-shadow 160ms;
}
.plg-selstage .plg-charcard::before {
  content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px;
  background: linear-gradient(90deg, var(--char), transparent); opacity: .8;
}
.plg-selstage .plg-charcard:hover,
.plg-selstage .plg-charcard:focus-within {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--char) 65%, #323b48);
  box-shadow: 0 12px 30px #0004;
}
.plg-selstage .plg-card-aura { display: none; }
.plg-fighter-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; margin-bottom: 24px; color: var(--roster-muted); font: 10px/1.4 var(--mono); letter-spacing: .1em; }
.plg-selstage .plg-badge { border-radius: 4px; font-size: 9px; padding: 2px 6px; letter-spacing: .08em; }
.plg-selstage .plg-badge.owner { background: #ffc8751a; border-color: #ffc87555; color: #ffcf88; }
.plg-selstage .plg-chead { gap: 14px; margin-bottom: 25px; align-items: center; }
.plg-selstage .plg-emblem {
  position: relative; width: 60px; height: 60px; border-radius: 16px;
  color: var(--char); font: 400 30px/1 'Anton', sans-serif;
  background: linear-gradient(145deg, color-mix(in srgb, var(--char) 16%, #141c27), #111923);
  border-color: color-mix(in srgb, var(--char) 38%, #273140);
  box-shadow: inset 0 1px #ffffff0d; text-shadow: none;
}
.plg-selstage .plg-cname { color: var(--roster-ink); font: 700 26px/1.1 var(--ui); letter-spacing: .01em; margin: 0; overflow-wrap: anywhere; }
.plg-selstage .plg-cname span { color: inherit !important; }
.plg-fighter-race { margin-top: 5px; font: 500 14px/1.2 var(--ui); }
.plg-fighter-race b { font-weight: 500; }
.plg-power-block { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.plg-selstage .plg-ck { font: 10px/1.5 var(--mono); letter-spacing: .09em; color: var(--roster-muted); }
.plg-selstage .plg-pl { display: flex; align-items: center; gap: 10px; color: var(--roster-ink) !important; font: 600 34px/1.05 var(--ui); letter-spacing: .01em; overflow-wrap: anywhere; }
.plg-power-rule { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: linear-gradient(90deg, var(--char), color-mix(in srgb, var(--char) 10%, #273140)); }
.plg-selstage .plg-crows { gap: 10px; margin-bottom: 22px; }
.plg-selstage .plg-crow { font: 500 14px/1.3 var(--ui); gap: 12px; }
.plg-selstage .plg-crow > :last-child { color: #d7dee7; overflow-wrap: anywhere; min-width: 0; }
.plg-selstage .plg-crow > :first-child { flex: none; }
.plg-selstage .plg-dim { color: var(--roster-muted) !important; }
.plg-selstage .plg-align.a-good { color: #78d6ad !important; }
.plg-selstage .plg-charcard .plg-btn.block {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto;
  background: #ffffff05; border-color: #475363; color: #ecf0f6;
}
.plg-selstage .plg-charcard .plg-btn.block > :last-child { color: var(--char); font-size: 20px; line-height: 1; }
.plg-selstage .plg-charcard:hover .plg-btn.block,
.plg-selstage .plg-charcard:focus-within .plg-btn.block { border-color: var(--roster-gold); background: var(--roster-gold); color: #241b10; }
.plg-selstage .plg-charcard:hover .plg-btn.block > :last-child,
.plg-selstage .plg-charcard:focus-within .plg-btn.block > :last-child { color: inherit; }
.plg-roster-foot { margin-top: 26px; border-top: 1px solid var(--roster-line); padding-top: 20px; }
.plg-account-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.plg-account-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: #c7cfd9; font: 500 15px/1.4 var(--ui); overflow-wrap: anywhere; }
.plg-account-id .plg-eyebrow { color: var(--roster-muted); font-size: 10px; }
.plg-account-line .plg-btn { flex: none; }
.plg-account-settings { margin-top: 10px; }
.plg-account-settings summary { width: fit-content; padding: 10px 0; cursor: pointer; color: #c7cfd9; font: 500 14px/1.5 var(--ui); }
.plg-account-settings .plg-controls { padding: 8px 0; }
.plg-tracking-note { color: #939ead; font: 11px/1.6 var(--mono); margin: 14px 0 0; }
.plg-selstage .plg-empty { grid-column: 1 / -1; padding: 38px 20px; border: 1px dashed #4a4c50; border-radius: 12px; background: #ffc87504; }
.plg-empty-star { color: var(--roster-gold); font-size: 32px; }
.plg-selstage .plg-empty h3 { color: var(--roster-ink); font: 600 28px/1.3 var(--ui); margin: 10px 0; }
.plg-selstage .plg-empty p { color: #bbc4cf; font: 500 17px/1.5 var(--ui); margin: 0 0 22px; }
.plg-selstage .plg-msg.err { margin: 0 0 18px; padding: 12px 16px; color: #ffaaa4; background: #ff777710; border: 1px solid #ff777744; border-radius: 7px; }

@media (min-width: 901px) {
  /* Keep a solo fighter readable instead of stretching it across the roster. */
  .plg-selstage .plg-grid:has(> .plg-charcard:only-child) { grid-template-columns: minmax(0, 360px); }
}
@media (max-width: 900px) {
  .plg-selstage .plg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plg-roster-hero { padding: 30px; }
  .plg-hero-sun { right: -40px; }
}
@media (max-width: 600px) {
  .plg-selstage { padding: 20px 16px 32px; }
  .plg-roster-brand { min-height: 44px; margin-bottom: 14px; gap: 12px; }
  .plg-roster-wordmark { gap: 8px; }
  .plg-roster-mark { width: 30px; height: 30px; font-size: 21px; }
  .plg-roster-logotype { font-size: 17px; }
  .plg-roster-edition { font-size: 7px; }
  .plg-roster-link { max-width: 125px; font-size: 9px; letter-spacing: .05em; }
  .plg-roster-hero { padding: 28px 22px; min-height: 245px; border-radius: 12px; }
  .plg-hero-copy { max-width: 82%; }
  .plg-hero-copy h1 { font-size: clamp(32px, 8.5vw, 46px); }
  .plg-hero-copy p { max-width: 200px; font-size: 15px; }
  .plg-hero-copy .plg-eyebrow { font-size: 9px; letter-spacing: .12em; }
  .plg-hero-art { width: 42%; opacity: .4; mask-image: linear-gradient(90deg, transparent, #000 45%); }
  .plg-hero-sun { width: 220px; height: 220px; right: -140px; }
  .plg-roster { margin-top: 26px; }
  .plg-roster-title { gap: 10px; }
  .plg-selstage .plg-sel-t { font-size: 24px; }
  .plg-selstage .plg-selhead > .plg-btn { font-size: 10px; padding: 10px; }
  .plg-roster-count { font-size: 10px; padding: 5px 7px; }
  .plg-selstage .plg-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .plg-selstage .plg-charcard { padding: 22px; }
  .plg-fighter-meta { margin-bottom: 20px; }
  .plg-selstage .plg-chead { margin-bottom: 20px; }
  .plg-selstage .plg-charcard:hover { transform: none; }
  .plg-tracking-note { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .plg-selstage, .plg-selstage .plg-btn::after { animation: none !important; transition: none !important; }
  .plg-selstage .plg-charcard, .plg-selstage .plg-btn { transition: none !important; transform: none !important; }
}