/* Character-first lobby. All styles are scoped away from match HUD/results. */
#startScreen{inset:0;width:100%;height:100dvh;max-height:none;transform:none;padding:0;overflow:auto;border:0;border-radius:0;background:transparent;display:grid;grid-template-rows:100px 1fr 112px;grid-template-columns:1fr 1fr;pointer-events:none}
#startScreen>*{pointer-events:auto}
body:has(#startScreen:not([hidden])) .vignette{background:linear-gradient(90deg,#0b1427fa 0%,#101b30ec 32%,#1220397a 56%,#10182728 80%),linear-gradient(0deg,#091120ed,transparent 45%)}
.lobby-header{grid-column:1/-1;display:flex;align-items:center;gap:46px;padding:16px 48px;border-bottom:1px solid #ffffff16;background:#0a122b80}
#startScreen #gameTitle{margin:0;line-height:0}#startScreen #gameTitle img{width:200px;max-width:200px;height:66px;object-fit:contain}
.lobby-tab{height:100%;display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.09em;font-weight:800;border-bottom:2px solid #ff763d;color:#f5f3ef;padding:0 4px}.lobby-tab b{font-size:11px;padding:4px 6px;background:#ffffff16;border-radius:4px}.lobby-mode{margin-left:auto;margin-right:150px;color:#aeb9ce;font-size:11px;letter-spacing:.09em}
body:has(#startScreen:not([hidden])) .settings-button{top:32px;right:48px;z-index:21}body:has(#startScreen:not([hidden])) .settings-panel{top:100px;z-index:22}
.roster-panel{grid-column:1;grid-row:2;align-self:center;width:min(510px,100%);padding:26px 0 24px 48px}
#startScreen .court-badge{font-size:11px;border:0;background:none;padding:0;margin:0 0 12px;letter-spacing:.17em;color:#ffad80}
#startScreen .lobby-title{font-size:clamp(36px,4vw,58px);line-height:.97;letter-spacing:-.05em;font-style:normal;font-weight:900;color:#f5f3ef;text-shadow:none;margin:0}#startScreen .lobby-title em{font-style:normal;color:#ff9869}
#startScreen .roster-intro{font-size:14px;line-height:1.5;color:#b7c4d7;margin:14px 0 22px;max-width:none}
#startScreen .character-select{margin:0;padding:0}#startScreen .character-select legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#startScreen .character-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
#startScreen .character-options input{inset:0;width:100%;height:100%;margin:0;z-index:3;opacity:0;cursor:pointer}
#startScreen .character-options .character-card{position:relative;height:172px;min-height:0;display:block;padding:0;overflow:hidden;border:1px solid #ffffff24;border-radius:10px;background:radial-gradient(ellipse at 65% 38%,color-mix(in srgb,var(--character-color) 30%,#1b2840),#142035 85%);transition:transform .2s,border-color .2s,box-shadow .2s}
#startScreen .character-card img{display:block;position:absolute;height:176px;width:176px;object-fit:contain;right:-8px;bottom:0;filter:drop-shadow(0 6px 8px #0005);transition:transform .2s}
#startScreen .character-options .character-caption{display:flex;position:absolute;left:0;bottom:0;width:100%;min-height:0;align-items:flex-start;flex-direction:column;justify-content:flex-end;gap:3px;padding:26px 14px 12px;border:0;border-radius:0;background:linear-gradient(transparent,#0b1425f0);color:#fff;z-index:1;font-size:16px}
#startScreen .character-caption b{font-weight:750;letter-spacing:-.02em}#startScreen .character-caption small{font-size:11px;margin:0;color:#b8c8de;line-height:1.3}
.character-number{position:absolute;left:14px;top:12px;font-style:normal;font-size:11px;letter-spacing:.12em;color:#b4c4d5;z-index:2}.selected-check{display:none;position:absolute;right:10px;top:10px;border-radius:50%;width:22px;height:22px;background:#ff763d;color:#111a28;place-items:center;font-size:14px;font-style:normal;font-weight:900;z-index:2}
#startScreen .character-options input:checked+.character-card{border:2px solid #ff9463;box-shadow:0 0 0 3px #ff763d12;background:radial-gradient(ellipse at 60% 40%,#714735,#172137 85%)}#startScreen .character-options input:checked+.character-card .selected-check{display:grid}#startScreen .character-options input:checked+.character-card .character-caption b{color:#ffb089}
#startScreen .character-options label:hover .character-card{transform:translateY(-3px);border-color:#ffb591}#startScreen .character-options label:hover img{transform:scale(1.05)}#startScreen .character-options input:focus-visible+.character-card{outline:3px solid white;outline-offset:3px}
#startScreen .character-options .character-option--samurai{--character-color:#cf293b}
#startScreen #characterHint{font-size:12px;line-height:1.5;margin:14px 0 0;color:#9aacc4;max-width:none}
.character-showcase{grid-column:2;grid-row:2;align-self:end;justify-self:center;text-align:center;margin:0 0 25px;padding:18px 24px;pointer-events:none!important;max-width:440px}
.showcase-label{font-size:10px;letter-spacing:.18em;color:#d5ddea}.showcase-label b{color:#ffb28a}.character-showcase #showcaseName{font-size:clamp(36px,4vw,56px);font-style:normal;letter-spacing:-.05em;text-shadow:0 3px 15px #0006;line-height:1.1;margin:7px 0;color:#fff}#startScreen #showcaseDescription{font-size:13px;color:#d4dfed;margin:8px 0 14px;line-height:1.5;max-width:none}.showcase-attributes{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.showcase-attributes span{font-size:10px;letter-spacing:.08em;padding:6px 9px;border:1px solid #ffffff30;border-radius:4px;background:#101827a0;color:#d5dfeb}
.lobby-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 48px;border-top:1px solid #ffffff22;background:#0c1527eb}.lobby-match{display:grid;gap:5px}.lobby-match>span{font-size:10px;letter-spacing:.12em;color:#aeb9ce}.lobby-match strong{font-size:18px;letter-spacing:-.02em}#startScreen .lobby-match small{font-size:12px;margin:0;color:#879bb7}.lobby-launch{width:310px}#startScreen #startButton{font-size:14px;padding:17px 22px;border-radius:5px;box-shadow:0 5px 25px #ff763d20}#startScreen #loadingStatus{text-align:right;font-size:11px;margin-top:8px;color:#9babc3}
@media(max-height:850px) and (min-width:761px){#startScreen{grid-template-rows:80px 1fr 104px}.roster-panel{padding-top:16px;padding-bottom:16px}#startScreen .lobby-title{font-size:40px}#startScreen .roster-intro{margin:10px 0 14px}#startScreen .character-options .character-card{height:144px}#startScreen .character-card img{width:154px;height:154px}#startScreen #characterHint{margin-top:10px}.lobby-header{padding-top:8px;padding-bottom:8px}body:has(#startScreen:not([hidden])) .settings-button{top:23px}.character-showcase{margin-bottom:8px}}
@media(min-width:1500px){.roster-panel{width:570px;padding-left:70px}#startScreen .character-options .character-card{height:194px}#startScreen .character-card img{width:205px;height:205px}}
@media(max-height:780px) and (min-width:761px){#startScreen{grid-template-rows:80px 1fr 96px}.lobby-header{padding:8px 36px}#startScreen #gameTitle img{width:175px;height:58px}body:has(#startScreen:not([hidden])) .settings-button{top:22px;right:36px}.roster-panel{padding:18px 0 16px 36px;width:470px}#startScreen .lobby-title{font-size:38px}#startScreen .roster-intro{margin:10px 0 14px;font-size:13px}#startScreen .character-options .character-card{height:140px}#startScreen .character-card img{height:150px;width:150px}#startScreen #characterHint{margin-top:10px;font-size:11px}.lobby-footer{padding:12px 36px}.character-showcase{margin-bottom:12px}}
@media(max-width:1000px) and (min-width:761px){.roster-panel{width:410px;padding-left:28px}.lobby-header{gap:24px;padding-left:28px}.lobby-mode{display:none}.character-showcase{padding:12px;max-width:310px}#startScreen .character-card img{right:-20px}#startScreen .character-caption small{font-size:10px}}
@media(max-width:760px){#startScreen{display:flex;flex-direction:column;overflow:auto;background:linear-gradient(90deg,#0d172bea,#0e1932b8);height:100dvh;padding:0}.lobby-header{padding:12px 20px;gap:20px;min-height:86px;flex-shrink:0}#startScreen #gameTitle img{width:145px;height:55px}.lobby-tab{display:none}.lobby-mode{display:none}body:has(#startScreen:not([hidden])) .settings-button{top:24px;right:20px}.roster-panel{width:100%;padding:26px 20px 20px;align-self:auto}#startScreen .lobby-title{font-size:40px}#startScreen .lobby-title br{display:none}#startScreen .roster-intro{font-size:13px;margin:12px 0 20px}.character-showcase{display:none}#startScreen .character-options{grid-template-columns:repeat(2,1fr);gap:10px}#startScreen .character-options .character-card{height:180px}#startScreen .character-card img{width:185px;height:185px;right:-12px}#startScreen #characterHint{font-size:11px}.lobby-footer{margin-top:auto;flex-direction:column;align-items:stretch;padding:18px 20px;gap:18px}.lobby-match{grid-template-columns:1fr auto}.lobby-match>span{grid-column:1/-1}.lobby-match strong{font-size:16px}.lobby-launch{width:100%}#startScreen #loadingStatus{text-align:center}.settings-panel{top:86px!important;right:16px!important;max-height:calc(100dvh - 105px)}}
@media(max-height:660px) and (min-width:761px){#startScreen{grid-template-rows:68px 1fr 88px}.roster-panel{padding-top:10px;padding-bottom:10px}#startScreen .court-badge{display:none}#startScreen .lobby-title{font-size:30px}#startScreen .lobby-title br{display:none}#startScreen .character-options .character-card{height:120px}#startScreen .character-card img{width:132px;height:132px}.character-showcase #showcaseName{font-size:34px}}