/* The four portraits reuse the images already prepared by the title screen. */
.cabinet[data-screen="select"] {background:#080e23}
.cabinet .select-screen {gap:14px;padding:22px 20px 16px;min-height:calc(100svh - var(--header-h) - env(safe-area-inset-top));background:radial-gradient(ellipse at 50% 40%,#24316770,transparent 70%)}
.select-screen .page-heading {gap:5px}
.select-screen .page-heading .eyebrow {color:#82ddff}
.character-roster {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1;min-height:300px;max-height:480px}
.roster-card {position:relative;isolation:isolate;overflow:hidden;min-height:145px;padding:0;text-align:left;border:2px solid #35425f;border-radius:3px;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--card-color) 20%,#14253b),#080c1b 85%);transition:border-color .12s,box-shadow .12s}
.roster-card:after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#060e2020 4px 5px)}
.roster-card[aria-pressed="true"] {border-color:var(--card-color);box-shadow:0 0 16px color-mix(in srgb,var(--card-color) 30%,transparent),inset 0 0 0 2px #061024}
.roster-art {position:absolute;inset:0;z-index:-2;background-repeat:no-repeat;background-size:auto 133%;background-position:50% 12%;image-rendering:pixelated;filter:drop-shadow(0 5px 0 #03081999);transition:transform .16s}
.roster-card[aria-pressed="true"] .roster-art {transform:scale(1.035)}
.roster-number {position:absolute;left:10px;top:8px;font-size:11px;font-weight:900;letter-spacing:1px;color:var(--card-color);text-shadow:0 2px #050917}
.roster-check {position:absolute;right:7px;top:6px;display:none;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--card-color);color:#081122;font-size:16px;font-weight:900}
.roster-card[aria-pressed="true"] .roster-check {display:flex}
.roster-name {position:absolute;left:0;right:0;bottom:0;padding:23px 11px 10px;background:linear-gradient(transparent,#050917e8 45%,#050917);text-shadow:0 2px #020817}
.roster-name small {display:block;font-size:8px;letter-spacing:1.9px;color:var(--card-color);margin-bottom:3px}
.roster-name strong {font-size:20px;line-height:1.3;letter-spacing:.1px}
.selection-copy {border-left:3px solid var(--character-color,#8adaff);padding:2px 0 2px 12px;min-height:43px}
.selection-copy strong {font-size:14px;color:var(--character-color,#8adaff)}
.selection-copy p {font-size:11px;line-height:1.5;color:#bdcce0;margin-top:4px}
.select-screen .select-description {font-size:10px;line-height:1.5}
.select-screen #selectBtn {background:linear-gradient(#ffc477,#ffab54);min-height:55px}
.select-screen>.text-button {margin-top:-9px}
.chosen-player {display:flex;align-items:center;gap:9px;min-height:40px;margin-top:-9px;border-bottom:1px solid #30404d;padding-bottom:7px}
.chosen-player img {object-fit:cover;object-position:50% 17%;border:1px solid var(--character-color);border-radius:50%;background:#1d2b40}
.chosen-player>span {font-size:12px;font-weight:800;color:var(--character-color)}
.chosen-player .text-button {margin-left:auto;font-size:10px;padding:4px;min-height:32px}
.setup-screen .coach-note {margin:0;padding-left:10px;border-left:2px solid var(--character-color);min-height:28px}
.setup-screen {gap:18px}
.setup-screen .history-slot strong {font-size:clamp(11px,3.4vw,15px);white-space:nowrap}
.result-screen #resultPlayer {letter-spacing:1.5px;line-height:1.6;color:var(--character-color)}
.submit-summary {font-size:18px;line-height:1.65}
@media(max-height:740px) {
  .cabinet .select-screen {gap:11px;padding-top:15px;padding-bottom:10px}
  .character-roster {min-height:280px;gap:8px}
  .roster-card {min-height:136px}
  .select-screen .page-heading h1 {font-size:24px}
  .setup-screen {gap:15px}
}
@media(max-height:610px) {
  .cabinet .select-screen {gap:9px;padding:12px 14px 8px}
  .character-roster {min-height:236px}
  .roster-card {min-height:114px}
  .roster-name {padding:18px 9px 7px}
  .roster-name strong {font-size:17px}
  .roster-name small {font-size:7px;margin-bottom:1px}
  .selection-copy {min-height:37px}
  .selection-copy strong {font-size:12px}
  .selection-copy p {font-size:10px;margin-top:2px}
  .select-screen .select-description {font-size:9px}
  .select-screen #selectBtn {min-height:49px;padding:11px}
  .select-screen>.text-button {min-height:30px;padding:5px}
  .setup-screen {gap:9px;padding-top:12px;padding-bottom:10px}
  .setup-screen .page-heading {gap:5px}
  .setup-screen .weight-console {padding-top:10px;padding-bottom:10px}
  .setup-screen .weight-display {margin:8px 0}
  .setup-screen .weight-display input {font-size:44px;line-height:1.2}
  .setup-screen .weight-steps button {min-height:36px}
  .setup-screen .weight-range {margin-top:9px}
  .setup-screen .difficulty-row {margin-top:12px;padding-top:10px}
  .setup-screen .history-slot {padding-top:9px;padding-bottom:9px;gap:5px}
  .setup-screen .history-slot strong {line-height:1.4}
  .setup-screen .chosen-player {min-height:36px;height:40px;padding-bottom:5px}
  .setup-screen .chosen-player img {width:32px;height:32px}
  .setup-screen .coach-note {font-size:10px;min-height:23px}
  .setup-screen #attemptBtn {min-height:51px;padding:11px}
}
@media(prefers-reduced-motion:reduce) {
  .roster-card,.roster-art {transition:none}
}