/* RoyalRaket social lobby — existing DOM/controllers, reference-led composition. */
body:has(#startScreen:not([hidden])) .vignette{background:linear-gradient(0deg,#00294699,transparent 45%),linear-gradient(90deg,#007cb122,transparent 72%)}
#startScreen{grid-template-columns:minmax(0,64%) minmax(0,36%);grid-template-rows:94px minmax(0,1fr) 142px;gap:0;background:transparent;overflow:hidden}
#startScreen .lobby-header{padding:12px 3vw;gap:24px;border:0;background:transparent}
#startScreen #gameTitle img{width:210px;max-width:210px;height:68px}
.reference-nav{display:flex;gap:3px;align-items:center;background:#007ac599;padding:4px;border:1px solid #69d6ff88;border-radius:25px}
.reference-nav button{border:0;border-radius:20px;padding:12px 19px;color:white;background:transparent;font:800 15px 'Segoe UI',sans-serif;cursor:pointer}
.reference-nav button:first-child{background:white;color:#0787e8;box-shadow:0 4px 0 #ffb529}.reference-nav button:hover{background:#ffffff33}.reference-nav button:first-child:hover{background:#e7faff}
#startScreen .lobby-mode{display:none}
#startScreen .account-panel{grid-area:1/1/2/3;justify-self:end;margin-right:164px;align-self:center;padding:8px 12px;border:1px solid #73d6ff88;border-radius:22px;background:#004678c9;gap:9px;max-width:430px;box-shadow:inset 0 1px #ffffff44}
#startScreen .account-panel #accountName{color:#fff;font-weight:800;max-width:100px}
#startScreen .account-panel button{border-radius:10px;border:1px solid #a3e4ff;padding:8px 11px;height:36px;color:white;background:#007cbb}
#startScreen .account-panel #openRegister{background:linear-gradient(#ffc446,#ff8012);color:white;border:2px solid #fff5b6;box-shadow:0 2px 8px #ffc13388;font-weight:800}
#startScreen .account-panel #accountNotice{top:calc(100% + 4px);max-width:300px;color:#e2f8ff;text-shadow:0 1px 3px #003858}
body:has(#startScreen:not([hidden])) .settings-button{right:3vw;top:29px;width:112px;height:37px;border-radius:16px;background:#004876df;border:1px solid #5dc9ff;color:white}
#startScreen .roster-panel{grid-area:2/1/3/2;width:100%;max-width:none;align-self:center;padding:4px 2vw 6px 3vw!important}
#startScreen .court-badge{display:none}
#startScreen .lobby-title{font:900 clamp(38px,4.1vw,76px)/.96 'Arial Rounded MT Bold','Segoe UI',sans-serif;color:#fff;letter-spacing:-.045em;text-shadow:0 3px 0 #075db0,0 5px 8px #00386790;transform:rotate(-2deg);transform-origin:left center}
#startScreen .lobby-title em{display:block;color:#ffdf24;font-size:1.36em;text-shadow:0 3px 0 #ed8616,0 6px 0 #0864b1}
#startScreen .roster-intro{margin:14px 0 24px;color:white;font-size:clamp(13px,1.4vw,22px);font-weight:750;text-shadow:0 2px 4px #004876;line-height:1.2}
#startScreen .character-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#startScreen .character-options label:nth-child(1){--character-color:#ffad08!important;--card-bottom:#bb360a}
#startScreen .character-options label:nth-child(2){--character-color:#00bdff!important;--card-bottom:#0067d9}
#startScreen .character-options label:nth-child(3){--character-color:#62f86c!important;--card-bottom:#00864e}
#startScreen .character-options label:nth-child(4){--character-color:#c56dff!important;--card-bottom:#5924c4}
#startScreen .character-options .character-card{height:clamp(148px,30vh,310px);border-radius:20px;border:2px solid color-mix(in srgb,var(--character-color) 70%,white);background:linear-gradient(145deg,var(--character-color),var(--card-bottom));box-shadow:inset 0 2px 10px #ffffff66,0 5px 10px #003c6990}
#startScreen .character-options input:checked+.character-card{border:3px solid #fffbe3;background:linear-gradient(145deg,var(--character-color),var(--card-bottom));box-shadow:0 0 0 3px #ffcb26,0 0 22px #ffb80be0,inset 0 1px 12px #fff7;transform:translateY(-5px)}
#startScreen .character-card img{width:115%;height:94%;max-width:none;right:-7%;bottom:12%;object-fit:contain;filter:drop-shadow(0 6px 5px #00334d55)}
#startScreen .character-options .character-caption{min-height:28%;padding:22px 8px 14px;background:linear-gradient(transparent,var(--card-bottom));align-items:center;text-align:center;font-size:clamp(15px,1.5vw,24px);text-shadow:0 2px 2px #00334d}
#startScreen .character-caption small{color:#fff;font-size:clamp(10px,.85vw,14px)}
#startScreen .character-number{left:10px;top:10px;border-radius:18px;background:#00538855;color:white;padding:4px 9px;font:bold clamp(12px,1.2vw,19px) 'Segoe UI',sans-serif}
#startScreen .selected-check{background:#fff;color:#ab6400;width:29px;height:29px;top:8px;right:8px}
#startScreen #characterHint{display:inline-block;margin:15px 0 0;padding:7px 17px;color:#fff;background:linear-gradient(90deg,#004c75e8,#00619855);border:1px solid #7ee8ff99;border-radius:20px;font-size:12px}
#startScreen .character-showcase{grid-area:2/2/3/3;align-self:end;justify-self:center;width:92%;padding:14px;margin-bottom:28px;text-align:left;background:linear-gradient(90deg,#00587aaa,transparent);border-radius:14px}
#startScreen .showcase-label{display:inline-block;border-radius:16px;padding:5px 12px;background:#ffda16;color:#00335d;font-size:12px;font-weight:900}
#startScreen #showcaseName{font-size:clamp(28px,3vw,49px);font-weight:900;text-shadow:0 3px 2px #003c67;margin:4px 0}
#startScreen #showcaseDescription{font-size:clamp(12px,1.3vw,21px);color:white;margin:5px 0 12px}
#startScreen .showcase-attributes{justify-content:flex-start;flex-wrap:wrap}
#startScreen .showcase-attributes span{background:#003f67d9;border:1px solid #63c9f2;border-radius:16px;padding:10px;color:white;font-size:11px;font-weight:800}
#startScreen .lobby-footer{grid-area:3/1/4/3;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-self:center;margin:0 2.5vw;padding:14px;border-radius:25px;border:2px solid #47d3ff;background:linear-gradient(135deg,#004476ec,#002e56de);box-shadow:inset 0 1px 12px #22c9ff44,0 7px 20px #002b4e80}
#startScreen .lobby-match{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:center}
#startScreen #changeMapButton{padding:12px;border:1px solid #38c2ff;border-radius:16px;background:#0068a066;color:#fff;min-height:68px}
#startScreen #changeMapButton strong{font-size:clamp(15px,1.6vw,25px)}#startScreen #changeMapButton small{font-size:10px;color:#c0e6ff}#startScreen #changeMapButton em{color:#ffdf28;font-size:12px;font-weight:900}
#startScreen #guestNameField{display:grid;gap:5px;color:#e0f3ff;font-weight:700;font-size:11px}
#startScreen #guestNickname{height:37px;border:1px solid #7ecded;background:#08679788;border-radius:12px;color:white;padding:8px;font-size:14px}
#startScreen .mode-actions{gap:16px}
#startScreen .mode-actions button,#startScreen #startButton{height:76px;min-height:0;border-radius:18px;font-size:clamp(14px,1.6vw,25px);font-weight:900;text-shadow:none;box-shadow:inset 0 2px 8px #ffffff99,0 3px 9px #002b58;border:2px solid #8aebff;transition:filter .15s,transform .15s}
#startScreen #onlineButton{color:#163048;background:linear-gradient(#ffe345,#ff9e19);border-color:#fff49c}
#startScreen #startButton{color:white;background:linear-gradient(#05c8ff,#0872fa)}
#startScreen .mode-actions button:hover{filter:brightness(1.12);transform:translateY(-2px)}#startScreen .mode-actions button:active{transform:translateY(1px)}
#startScreen .mode-actions small{font-size:11px;font-weight:600}#startScreen #loadingStatus{margin-top:4px;font-size:10px;color:#d0edff}
#eventFeed>.event:not(:last-child){display:none}
@media(max-width:1150px){#startScreen{grid-template-rows:80px minmax(0,1fr) 128px}#startScreen #gameTitle img{width:150px;height:52px}.reference-nav button{font-size:12px;padding:10px}.reference-nav{gap:0}#startScreen .lobby-header{gap:10px}#startScreen .account-panel{margin-right:140px;padding:6px;font-size:11px;gap:5px}#startScreen .account-panel button{font-size:11px;padding:6px}body:has(#startScreen:not([hidden])) .settings-button{top:23px;width:100px}#startScreen .character-options{gap:9px}#startScreen .roster-intro{margin-bottom:16px}}
@media(max-height:700px) and (min-width:761px){#startScreen{grid-template-rows:68px minmax(0,1fr) 112px}#startScreen .lobby-title{font-size:32px}#startScreen .roster-intro{margin:8px 0 12px;font-size:13px}#startScreen .character-options .character-card{height:clamp(112px,28vh,190px)}#startScreen #characterHint{margin-top:8px;padding:4px 12px}#startScreen .lobby-footer{padding:8px}#startScreen .mode-actions button,#startScreen #startButton{height:64px}#startScreen .character-showcase{margin-bottom:12px}#startScreen #showcaseName{font-size:30px}#startScreen .lobby-title em{display:inline}body:has(#startScreen:not([hidden])) .settings-button{top:17px}}
@media(max-width:760px){#startScreen{grid-template-columns:1fr;grid-template-rows:58px 42px minmax(0,1fr) 176px}#startScreen .lobby-header{grid-area:1/1/2/2;padding:4px 12px}#startScreen #gameTitle img{width:138px;height:48px}.reference-nav{display:none}#startScreen .account-panel{grid-area:2/1/3/2;justify-self:stretch;justify-content:flex-end;margin:0 12px;padding:3px 8px;border-radius:13px;max-width:none}#startScreen .account-panel #accountName{margin-right:auto}#startScreen .account-panel #accountNotice{display:none}body:has(#startScreen:not([hidden])) .settings-button{top:12px;right:12px;width:100px}#startScreen .roster-panel{grid-area:3/1/4/2;padding:6px 14px!important}#startScreen .lobby-title{font-size:27px;transform:none}#startScreen .lobby-title em{display:inline;font-size:1.1em}#startScreen .roster-intro{font-size:11px;margin:6px 0 9px}#startScreen .character-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#startScreen .character-options .character-card{height:clamp(64px,calc((100dvh - 390px)/2),158px);border-radius:13px}#startScreen .character-card img{height:125%;width:65%;right:-4%;bottom:0}#startScreen .character-options .character-caption{align-items:flex-start;text-align:left;padding:24px 7px 7px;font-size:14px;background:linear-gradient(90deg,var(--card-bottom),transparent)}#startScreen .character-caption small{font-size:9px}#startScreen .character-number{font-size:10px;padding:2px 6px;left:6px;top:5px}#startScreen .selected-check{width:20px;height:20px;font-size:12px;top:5px;right:5px}#startScreen #characterHint{font-size:10px;margin:7px 0 0;padding:3px 8px}#startScreen .character-showcase{display:none}#startScreen .lobby-footer{grid-area:4/1/5/2;grid-template-columns:1fr;padding:9px;margin:0 10px;gap:8px;border-radius:18px}#startScreen .lobby-match{grid-template-columns:1.1fr 1fr;gap:8px}#startScreen #changeMapButton{min-height:48px;padding:7px}#startScreen #changeMapButton em{font-size:9px}#startScreen #changeMapButton small{font-size:9px}#startScreen #guestNickname{height:31px}#startScreen .mode-actions{gap:8px}#startScreen .mode-actions button,#startScreen #startButton{height:55px;font-size:13px;padding:5px}#startScreen .mode-actions small{font-size:9px}#startScreen #loadingStatus{font-size:9px}}
@media(prefers-reduced-motion:reduce){#startScreen *{transition:none!important}}