#hero-selection.lantern-roster {
  --ink: #101718; --line: #364542; --text: #f5ecdc; --muted: #b6bfba;
  --chosen-color: #e7ac7c;
  position: fixed; z-index: 11; inset: 0; display: grid;
  width: auto; max-height: none; padding: 0; transform: none; overflow: hidden;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--text); font: 14px/1.45 system-ui, sans-serif;
}
#hero-selection.lantern-roster *, #hero-selection.lantern-roster *::before, #hero-selection.lantern-roster *::after { box-sizing: border-box; }
.vbx-roster-top, .vbx-roster-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 3vw, 44px); background: #101718;
}
.vbx-roster-top { border-bottom: 1px solid var(--line); }
.vbx-roster-brand { font: bold 18px Georgia, serif; letter-spacing: .23em; }
.vbx-roster-brand span { color: #f4b874; margin-right: 7px; }
.vbx-roster-grid { display: grid; grid-template-columns: minmax(250px, 28%) minmax(0, 1fr) minmax(252px, 27%); min-height: 0; }
.vbx-roster-list, .vbx-roster-detail {
  padding: clamp(16px, 2.6vw, 36px); overflow: auto;
  background: radial-gradient(ellipse at 0 0, #20302e, #131c1d 58%);
  scrollbar-color: #697771 #172021;
}
.vbx-roster-list { border-right: 1px solid var(--line); }
.vbx-roster-detail { border-left: 1px solid var(--line); }
.vbx-roster-kicker { font-weight: 750; font-size: 10px; letter-spacing: .19em; color: #eab985; }
#vbx-roster-role { color: var(--chosen-color); text-transform: uppercase; }
#hero-selection.lantern-roster h1, #hero-selection.lantern-roster h2 { font: 400 clamp(29px, 3.25vw, 48px)/.99 Georgia, serif; margin: 8px 0 10px; letter-spacing: -.035em; }
#hero-selection.lantern-roster p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.vbx-roster-classes { display: grid; gap: 4px; }
#hero-selection.lantern-roster button {
  padding: 8px 12px; min-height: 38px; font: 650 12px/1.2 system-ui,sans-serif;
  color: var(--text); background: #202b2b; border: 1px solid var(--line); border-radius: 5px; box-shadow: none;
}
#hero-selection.lantern-roster .vbx-roster-classes button {
  display: grid; grid-template-columns: 31px 1fr auto; align-items: center; text-align: left;
  gap: 8px; padding: 4px 8px;
}
#hero-selection.lantern-roster .vbx-roster-classes button[aria-pressed="true"] {
  border-color: var(--class-color); background: #2d3633; box-shadow: inset 3px 0 var(--class-color);
}
.vbx-roster-classes i { display: grid; place-items: center; width: 30px; height: 28px; background: #121c1d; border-radius: 3px; font: normal 19px Georgia, serif; color: var(--class-color); }
.vbx-roster-classes b, .vbx-roster-classes small { display: block; }
.vbx-roster-classes small { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }
.vbx-roster-classes em { font: 650 10px system-ui,sans-serif; color: var(--muted); }
.vbx-roster-classes [aria-pressed="true"] em { color: var(--class-color); }
.vbx-roster-preview {
  position: relative; display: flex; justify-content: center; align-items: flex-start;
  background: linear-gradient(180deg,#101718 0%,transparent 20%,transparent 65%,#101718 94%);
}
.vbx-roster-preview span { margin: 16px 5px; padding: 5px 9px; color: #f3dbc0; border: 1px solid #75614e; border-radius: 4px; background: #101718e8; font-size: 9px; letter-spacing: .14em; text-align: center; }
.vbx-roster-trait { border-top: 1px solid var(--line); padding: 11px 0; }
.vbx-roster-trait small { display: block; font-size: 9px; letter-spacing: .15em; color: var(--muted); margin-bottom: 4px; }
.vbx-roster-trait strong { font-size: 13px; }
#hero-selection.lantern-roster progress { display: block; width: 100%; height: 7px; margin-top: 8px; accent-color: var(--chosen-color); }
#hero-selection.lantern-roster fieldset { border: 0; border-top: 1px solid var(--line); margin: 9px 0 12px; padding: 9px 0 0; min-width: 0; }
#hero-selection.lantern-roster legend { color: var(--chosen-color); padding: 0 8px 0 0; font: 18px Georgia,serif; }
.vbx-roster-look { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#hero-selection.lantern-roster label { display: block; color: var(--muted); font-size: 11px; min-width: 0; }
#hero-selection.lantern-roster select, #hero-selection.lantern-roster input { display: block; width: 100%; padding: 8px; min-height: 38px; margin: 4px 0 0; border: 1px solid #55645e; border-radius: 4px; color: var(--text); background: #141e1f; font: 13px system-ui,sans-serif; color-scheme: dark; }
#hero-selection.lantern-roster details { margin-top: 12px; color: var(--muted); font-size: 12px; }
#hero-selection.lantern-roster summary { cursor: pointer; padding: 7px 0; }
#hero-selection.lantern-roster :focus-visible { outline: 2px solid #ffcc8d; outline-offset: 2px; }
.vbx-roster-bottom { border-top: 1px solid var(--line); }
.vbx-roster-bottom strong { display: block; font: 19px Georgia,serif; }
.vbx-roster-bottom > div > span { color: var(--muted); font-size: 11px; }
.vbx-roster-launch { display: flex; gap: 12px; align-items: center; }
#hero-selection.lantern-roster #enter-world { background: #f3bc80; border-color: #ffcf98; color: #19120c; padding: 10px 18px; font-size: 14px; min-width: 142px; }
#enter-world span { padding-left: 5px; }


@media (min-width: 821px) and (max-height: 810px) {
  .vbx-roster-list,.vbx-roster-detail { padding-block: 14px; }
  #hero-selection.lantern-roster h1, #hero-selection.lantern-roster h2 { font-size: clamp(27px,3.2vw,41px); }
  #hero-selection.lantern-roster .vbx-roster-classes button { min-height: 37px; }
}
@media (max-width: 820px) {
  .vbx-roster-grid { grid-template-columns: 1fr 1fr; overflow: auto; background: var(--ink); }
  .vbx-roster-preview { display: none; }
  .vbx-roster-list,.vbx-roster-detail { overflow: visible; border: 0; }
}
@media (max-width: 520px) {
  .vbx-roster-grid { grid-template-columns: 1fr; }
  #hero-selection.lantern-roster h1 br { display: none; }
  .vbx-roster-classes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vbx-roster-bottom { padding: 8px 12px; }
  .vbx-roster-bottom > div:first-child > span { display: none; }
  .vbx-roster-launch { align-items: flex-end; flex-direction: column-reverse; gap: 2px; }
  #hero-selection.lantern-roster input,#hero-selection.lantern-roster select { font-size: 16px; }
}

#hero-selection.lantern-roster [hidden], #hero-selection.lantern-roster[hidden] { display: none; }
#hero-selection.lantern-roster #class-choices { grid-template-columns: 1fr; margin: 0; }
#hero-selection.lantern-roster #vbx-menu-profile { display: grid; margin: 0 0 12px; }
#hero-selection.lantern-roster #enter-world { width: auto; }
#hero-selection.lantern-roster .appearance-options { margin: 0; }
#hero-selection.lantern-roster #vbx-roster-saved-name { margin: 4px 0 0; }
.roster-gamepad { color: #b6bfba; font-size: 11px; }
.vbx-roster-top a { color: #eab985; }
body:has(#hero-selection.lantern-roster:not([hidden])) #vbx-open { display: none; }
@media (max-width: 520px) {
  #hero-selection.lantern-roster #class-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vbx-roster-brand { font-size: 15px; letter-spacing: .14em; }
}