/* Private lobby (desktop first; touch rooms at the end).
   The lobby is one fixed surface laid out as a column:
     header (title + Leave lobby) / error / invite row / main area / status / action bar
   The main area is a three-column grid (players | your fighter | island + rules).
   It takes the space that is left and each column scrolls inside itself, so the
   action bar always sits under the content and never covers it. On short or
   narrow windows the whole lobby scrolls instead. Nothing is absolutely
   positioned inside the room. */
.private-lobby{--pl-ink:#fff8de;--pl-muted:#c9e5f4;--pl-panel:#0b2438d9;--pl-panel-line:#b1e1f23d;--pl-card:#163d58;--pl-card-line:#4f7790;--pl-yellow:#ffe44b;--pl-gap:clamp(10px,1.4vw,24px);--pl-pad-x:clamp(16px,2.6vw,44px);--pl-pad-y:clamp(12px,2.4vh,36px);
 position:fixed;inset:0;z-index:35;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:clamp(8px,1.5vh,18px);padding:var(--pl-pad-y) max(var(--pl-pad-x),calc((100vw - 1800px)/2));background:#0c243a;color:var(--pl-ink);font-family:SkybreakBody,sans-serif;isolation:isolate;box-sizing:border-box}
.private-lobby::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 42%,#1b4c70 0,transparent 67%);pointer-events:none}
.private-lobby *,.private-lobby *::before,.private-lobby *::after{box-sizing:border-box}
.private-lobby [hidden]{display:none!important}.private-lobby button{min-height:48px}.private-lobby button:disabled{cursor:default}.private-lobby button:focus-visible,.private-lobby input:focus-visible{outline:3px solid var(--pl-yellow);outline-offset:4px}
.private-lobby .primary{background-color:var(--pl-yellow);color:#102a42;font:1.45rem/1.1 SkybreakDisplay,sans-serif}.private-lobby .primary:hover{background-color:#fff084}
.private-lobby button{text-align:center}

/* Header */
.pl-header{display:flex;justify-content:space-between;gap:24px;align-items:center;flex:none;min-width:0}
.pl-header h1{font:clamp(1.9rem,min(3.4vw,6.2vh),3.6rem)/1.32 SkybreakDisplay,sans-serif;letter-spacing:-.01em;margin:0;text-transform:uppercase;min-width:0;overflow-wrap:anywhere}
.pl-header .pl-leave{background-color:#22465e;flex:none}
.pl-status{flex:none;min-height:1.4em;text-align:center;color:var(--pl-muted);font-size:.875rem;line-height:1.4;margin:0}
.private-lobby[data-state=lobby] .pl-status:empty,.private-lobby[data-state=loading] .pl-status:empty{display:none}
.pl-error{flex:none;padding:12px 18px;background:#613e23;color:#fff2db;line-height:1.4;max-width:72ch;margin:0 auto;border-radius:8px}

/* Name form */
.pl-identity{width:min(540px,100%);margin:auto;padding:clamp(20px,4vw,48px) 0}.pl-identity label{display:block;font:2.25rem/1.1 SkybreakDisplay,sans-serif}.pl-identity input{margin-top:18px;width:100%;background:#102f48;border:2px solid #8db4c8;color:var(--pl-ink);padding:18px;font:1.3rem SkybreakBody,sans-serif;border-radius:4px}.pl-identity p{color:var(--pl-muted);line-height:1.6;margin:16px 0 28px}.pl-identity-actions{display:grid;gap:12px}

/* The room's parts are direct rows of the lobby column. */
.pl-room{display:contents}

/* Invite row: link + Copy + player count */
.pl-invite{flex:none;display:flex;align-items:center;gap:12px;min-width:0}
.pl-invite-field{display:flex;align-items:center;gap:12px;flex:0 1 720px;min-width:0}
.pl-invite-label{flex:none;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pl-muted);white-space:nowrap}
.pl-invite input{flex:1;min-width:0;width:100%;font:1rem SkybreakBody,sans-serif;color:var(--pl-ink);background:#0a2033;border:1px solid #6791aa;padding:12px 14px;border-radius:6px;text-overflow:ellipsis}
.pl-invite button{flex:none}
.pl-count{flex:none;margin-left:auto;white-space:nowrap;color:var(--pl-muted);font-weight:700;font-variant-numeric:tabular-nums}

/* Main area */
.pl-stage{flex:1 1 0;min-height:300px;display:grid;grid-template-columns:minmax(250px,1fr) minmax(250px,1.05fr) minmax(300px,1fr);gap:var(--pl-gap);width:100%;max-width:1760px;margin:0 auto}
.pl-stage>*{min-width:0;min-height:0}
.pl-panel,.pl-center,.pl-map-choices,.pl-rules{background:var(--pl-panel);border:1px solid var(--pl-panel-line);border-radius:14px}
.pl-panel-title,.pl-map-choices h3,.pl-rules h3{font:700 14px/1.3 system-ui,sans-serif;color:#ecf8ff;text-transform:uppercase;letter-spacing:.08em;margin:0}

/* Players column: every member plus open spots, scrolling inside the panel. */
.pl-roster{display:flex;flex-direction:column;gap:10px;padding:14px}
.pl-players{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:2px 4px 2px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));grid-auto-rows:max-content;align-content:start;gap:8px}
.pl-player{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:2px;min-height:64px;padding:6px 10px 6px 6px;background:var(--pl-card);border:1px solid var(--pl-card-line);border-radius:10px}
.pl-player[data-self=true]{border-color:var(--pl-yellow);box-shadow:inset 0 0 0 1px var(--pl-yellow)}
.pl-player img{grid-column:1;grid-row:1/3;width:52px;height:52px;object-fit:contain;object-position:center bottom;align-self:center}
.pl-player:has(img[hidden]){grid-template-columns:0 minmax(0,1fr) auto;column-gap:0}
.pl-player:has(img[hidden]) strong,.pl-player:has(img[hidden]) .pl-player-fighter{padding-left:6px}
.pl-player strong{grid-column:2/4;grid-row:1;align-self:end;font-size:1rem;line-height:1.2;overflow-wrap:anywhere;min-width:0}
.pl-player-fighter{grid-column:2;grid-row:2;align-self:start;font-size:.8rem;line-height:1.25;color:var(--pl-muted);overflow-wrap:anywhere;min-width:0}
.pl-player[data-host=true] .pl-player-fighter::after{content:" · Host";color:#ffec9a}
.pl-player-state{grid-column:3;grid-row:2;align-self:center;padding:3px 9px;border-radius:999px;background:#0b2233;color:#d4e7f1;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pl-player[data-ready=true] .pl-player-state{background:#8ef0a0;color:#0b2233}
.pl-player[data-connected=false] .pl-player-state{background:#5a4417;color:#ffe1a0}
.pl-player[data-connected=false] img{opacity:.5}
.pl-slot{display:flex;align-items:center;justify-content:center;min-height:64px;border:1px dashed #6f96ad80;border-radius:10px;color:#9fbfd0;font-size:.85rem;letter-spacing:.04em}

/* Your fighter column: portrait fills the space left above the name and button. */
.pl-center{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;background:radial-gradient(ellipse 70% 38% at 50% 78%,#2d6a8f80,transparent 70%),var(--pl-panel)}
.pl-center-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,16px);padding:clamp(12px,2vh,24px) 16px}
.pl-fighter-stage{position:relative;flex:1 1 0;width:100%;min-height:96px;max-height:640px}
.pl-own-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 18px #05162399)}
.pl-fighter-stage:has(img[hidden])::after{content:"?";position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(160px,70%);aspect-ratio:1;max-height:100%;display:grid;place-items:center;border:2px dashed #8db4c880;border-radius:50%;color:#8db4c8;font:clamp(2.5rem,6vh,4rem)/1 SkybreakDisplay,sans-serif}
.pl-own-name{flex:none;font:clamp(1.6rem,min(2.5vw,4.4vh),3rem)/1.25 SkybreakDisplay,sans-serif;margin:0;text-align:center;overflow-wrap:anywhere;text-shadow:0 3px 7px #071b2b;max-width:100%}
.pl-center-content button{flex:none;min-width:min(220px,100%)}

/* Island + rules column */
.pl-side{display:flex;flex-direction:column;gap:var(--pl-gap);overflow-y:auto;overscroll-behavior:contain;container:pl-side/inline-size}
.pl-map-choices{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"title title" "map options" "hint hint";gap:10px 14px;padding:14px}
.pl-map-choices h3{grid-area:title}
.pl-map{grid-area:map;display:block;width:clamp(84px,min(12vw,18vh),220px);aspect-ratio:1;height:auto;object-fit:contain;border-radius:12px;background:#0a2033;border:1px solid #79afc866}
.pl-map-options{grid-area:options;display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
.pl-map-choice{width:100%;min-height:48px;padding:9px 12px;font-size:15px;line-height:1.15;border:1px solid rgba(162,203,223,.5);border-radius:8px;background:#173d55;color:#fff;white-space:normal}
.pl-map-choice[aria-pressed=true]{border-color:#fff064;box-shadow:inset 0 0 0 1px #fff064;color:#fff68e;background:#254839}
.pl-map-choice:disabled{opacity:.7}.pl-map-choice[aria-pressed=true]:disabled{opacity:1}
.pl-map-hint{grid-area:hint;margin:0;font:13px/1.45 system-ui,sans-serif;color:#b9d4e0}

/* Match rules: lobby-wide switches (any member), locked once the match starts. */
.pl-rules{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.pl-rules h3,.pl-rules-hint{grid-column:1/-1;margin:0}
.pl-rule{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;width:100%;min-height:48px;padding:9px 12px;font-size:15px;line-height:1.15;border:1px solid rgba(162,203,223,.5);border-radius:8px;background:#173d55;color:#fff;white-space:normal;text-align:left}
.pl-rule-state{flex:none;padding:3px 8px;border-radius:999px;background:#0b2233;color:#b9d4e0;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.pl-rule[aria-checked=true]{border-color:#8ef0a0;box-shadow:inset 0 0 0 1px #8ef0a0;background:#1f4a3a}
.pl-rule[aria-checked=true] .pl-rule-state{background:#8ef0a0;color:#0b2233}
.pl-rule:disabled{opacity:.72}.pl-rule[aria-checked=true]:disabled{opacity:1}
.pl-rules-hint{font:13px/1.45 system-ui,sans-serif;color:#b9d4e0}

/* Narrow side column: keep each switch label on one line. */
@container pl-side (max-width:360px){.pl-rules{gap:8px}.pl-rule{padding:9px 8px;gap:6px;white-space:nowrap}.pl-rule-state{padding:2px 6px;font-size:11px}}
/* Short windows (up to 760 px tall): tighter island and rules panels so the
   side column fits without scrolling down to 640 px. */
@media (max-height:760px){
 .pl-stage{grid-template-columns:minmax(240px,1fr) minmax(230px,.95fr) minmax(310px,1.1fr)}
 .pl-map-choices,.pl-rules{padding:10px 12px;gap:8px 12px}
 .pl-map{width:clamp(72px,12vh,120px)}
 .pl-map-options{gap:6px}
 .private-lobby .pl-map-choice,.private-lobby .pl-rule{min-height:42px;padding-block:6px}
 .pl-map-hint,.pl-rules-hint{font-size:12px;line-height:1.4}
 .pl-panel-title,.pl-map-choices h3,.pl-rules h3{font-size:13px}
 .pl-roster{padding:10px 12px}
}
/* A column that scrolls fades at the edge that has more content, so a cut
   line reads as "more below", never as clipped text. */
@property --pl-fade-top{syntax:"<length>";inherits:false;initial-value:0px}
@property --pl-fade-bottom{syntax:"<length>";inherits:false;initial-value:0px}
@supports (animation-timeline:scroll()){
 .pl-players,.pl-side,.pl-center{mask-image:linear-gradient(to bottom,transparent 0,#000 var(--pl-fade-top),#000 calc(100% - var(--pl-fade-bottom)),transparent 100%);animation:pl-scroll-fade linear both;animation-timeline:scroll(self)}
 @keyframes pl-scroll-fade{0%{--pl-fade-top:0px;--pl-fade-bottom:36px}8%{--pl-fade-top:24px}92%{--pl-fade-bottom:36px}100%{--pl-fade-top:24px;--pl-fade-bottom:0px}}
}
/* Visible, quiet scrollbars on the columns that scroll on short windows. */
.pl-players,.pl-side,.pl-center,.private-lobby{scrollbar-width:thin;scrollbar-color:#6f96ad #0b243800}
/* Large displays: bigger type and cards so the room reads from a distance. */
@media (min-width:1800px) and (min-height:1000px){
 .pl-player{grid-template-columns:64px minmax(0,1fr) auto;min-height:78px}.pl-player img{width:64px;height:64px}.pl-slot{min-height:78px;font-size:.95rem}
 .pl-player strong{font-size:1.15rem}.pl-player-fighter{font-size:.92rem}.pl-player-state{font-size:.8rem}
 .pl-panel-title,.pl-map-choices h3,.pl-rules h3{font-size:16px}
 .pl-map-choice,.pl-rule{font-size:17px;min-height:54px}.pl-rule-state{font-size:13px}.pl-map-hint,.pl-rules-hint{font-size:15px}
 .pl-invite input{font-size:1.1rem;padding:14px 16px}.pl-invite-label{font-size:.9rem}.pl-count{font-size:1.1rem}
 .pl-start-reason{font-size:1rem}.pl-status{font-size:1rem}
}
/* Action bar: last row of the lobby, below the main area, never over it. */
.pl-actions{order:1;flex:none;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px;background:var(--pl-panel);border:1px solid var(--pl-panel-line);border-radius:14px}
.pl-start-reason{flex:1 1 auto;min-width:0;margin:0;color:var(--pl-muted);font-size:.9rem;line-height:1.4}
.pl-start-actions{display:contents}
.pl-actions button{flex:none;min-width:150px}
.pl-actions .pl-fullscreen{order:1}
.pl-actions>button{order:2}
.pl-actions .primary{order:3;min-width:190px}

/* Loading: shown in the fighter column while everyone's assets load. */
.pl-loading{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px}
.pl-loading h2{font:clamp(1.8rem,min(2.6vw,4.4vh),2.8rem)/1.25 SkybreakDisplay,sans-serif;margin:0 0 10px}
.pl-loading p{color:#d7eaf3;line-height:1.5;margin:0;max-width:40ch}
.pl-loading progress{width:min(360px,90%);accent-color:var(--pl-yellow);height:12px;margin:16px 0 0}
/* The existing approved film supplies loading motion. Reuse that owner rather
   than creating another decoder or starting a second audio track. */
.private-lobby[data-state=loading]{background:#0c243a35}
.private-lobby[data-state=loading]::before{background:linear-gradient(180deg,#092238bd,transparent 45%,#092238ed)}

/* The lobby fighter picker is a full-screen surface, like the solo picker
   screen: the room (title, invite, players, ready/start) is not painted under
   it. Lobby context and messages move into the picker's own command bar. */
.pl-picker{position:absolute;inset:0;z-index:2;background:#0c243a;padding:14px;display:grid;grid-template-rows:48px minmax(0,1fr);grid-template-columns:auto 1fr;gap:12px}
.pl-picker>button{grid-column:1}
.pl-picker-status{grid-column:2;margin:auto 12px;color:#ffec9a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-picker-host{grid-column:1/-1;min-height:0;height:100%;overflow:auto;align-self:stretch}
.pl-picker-host::part(picker){height:100%}
.pl-picker-context{grid-column:3;margin:0 6px 0 0;color:var(--pl-muted);font-size:.875rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.private-lobby[data-picker=open]{overflow:hidden}
.private-lobby[data-picker=open]>:not(.pl-picker):not(.pl-toast){display:none!important}
.private-lobby[data-picker=open]>.pl-picker{position:fixed;inset:0;z-index:7;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}

/* In the match */
.private-lobby[data-state=playing],.private-lobby[data-state=spectating]{background:none;pointer-events:none;padding:0}
.private-lobby[data-state=playing]::before,.private-lobby[data-state=spectating]::before{display:none}
.private-lobby[data-state=playing] .pl-error,.private-lobby[data-state=spectating] .pl-error{pointer-events:auto}
.pl-spectator{position:absolute;bottom:28px;left:50%;translate:-50% 0;background:#0b263de8;max-width:540px;width:calc(100% - 40px);padding:20px 24px;pointer-events:auto;text-align:center}
.pl-spectator h2{font:2rem SkybreakDisplay,sans-serif;margin:0 0 8px}
.pl-spectator p{font-size:.9rem;line-height:1.4;color:#d5e9f3;margin:0 0 15px}
.pl-spectator button{min-width:180px}

/* Short windows: the whole lobby scrolls (columns stop scrolling on their own). */
@media (max-height:600px){
 .pl-stage{flex:none;min-height:0}
 .pl-roster,.pl-center,.pl-side{overflow:visible}
 .pl-players{overflow:visible}
 .pl-fighter-stage{flex:none;height:180px}
}
/* Narrow windows: fighter + island side by side, players below; whole lobby scrolls. */
@media (max-width:980px){
 .pl-stage{flex:none;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"fighter side" "players players"}
 .pl-roster{grid-area:players;overflow:visible}.pl-center{grid-area:fighter;overflow:visible}.pl-side{grid-area:side;overflow:visible}
 .pl-players{overflow:visible}
 .pl-fighter-stage{flex:none;height:clamp(150px,30vh,260px)}
}
@media (max-width:700px){
 .pl-header{gap:12px}.pl-header button{padding:12px}
 .pl-invite{flex-wrap:wrap}.pl-invite-field{flex:1 1 100%;flex-wrap:wrap;gap:6px}.pl-invite-label{flex:1 1 100%}
 .pl-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"fighter" "side" "players"}
 .pl-actions{flex-wrap:wrap;padding:10px}.pl-start-reason{flex:1 1 100%}.pl-actions button{flex:1 1 0;min-width:0}
 .pl-map-choices{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "map" "options" "hint"}.pl-map{justify-self:center}
 .pl-picker{padding:8px;gap:8px}
 .private-lobby[data-picker=open]>.pl-picker{grid-template-rows:auto auto minmax(0,1fr)}
 .pl-picker-status{grid-column:1/-1;grid-row:2;white-space:normal;font-size:.8rem;margin:0}
 .pl-picker-context{grid-column:2/-1;grid-row:1;justify-self:end;font-size:.75rem}
 .pl-identity label{font-size:2rem}
}
@media(prefers-reduced-motion:no-preference){.pl-player{animation:pl-arrive .28s cubic-bezier(.16,1,.3,1)}@keyframes pl-arrive{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}

#host-private-lobby{margin-top:12px;background-color:#184968;color:#fff8de;min-width:260px}
.pl-entry-status{max-width:42ch;line-height:1.5;color:#d2e8f3}

/* Installed touch rooms (/mobile): everything fits one screen; the three
   columns stay side by side (landscape) and each scrolls on its own. */
html[data-device-mode=touch] .private-lobby{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden;gap:6px}
html[data-device-mode=touch] .pl-header{gap:12px;min-height:44px}
html[data-device-mode=touch] .pl-header h1{font:28px/1.1 var(--font-display);letter-spacing:.01em}
html[data-device-mode=touch] .private-lobby button{min-height:44px;padding:7px 12px;font:800 17px/1.1 var(--font-ui)}
html[data-device-mode=touch] .private-lobby .primary{font:20px/1.1 var(--font-display)}
html[data-device-mode=touch] .pl-invite{gap:8px}
html[data-device-mode=touch] .pl-invite-field{flex:1;gap:6px}
html[data-device-mode=touch] .pl-invite-label{font-size:10px}
html[data-device-mode=touch] .pl-invite input{padding:7px 9px;font-size:12px;min-height:30px}
html[data-device-mode=touch] .pl-count{font-size:11px}
html[data-device-mode=touch] .pl-stage{flex:1 1 0;min-height:0;grid-template-columns:minmax(120px,1fr) minmax(170px,1.1fr) minmax(170px,1.1fr);grid-template-areas:none;gap:8px}
html[data-device-mode=touch] .pl-roster,html[data-device-mode=touch] .pl-center,html[data-device-mode=touch] .pl-side{grid-area:auto;overflow:auto;border-radius:6px}
html[data-device-mode=touch] .pl-roster{padding:6px;gap:6px}
html[data-device-mode=touch] .pl-players{overflow:auto;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(48px,auto);gap:4px}
html[data-device-mode=touch] .pl-player{grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto auto;min-height:48px;padding:4px;column-gap:6px;border-radius:5px}
html[data-device-mode=touch] .pl-player:has(img[hidden]){grid-template-columns:0 minmax(0,1fr)}
html[data-device-mode=touch] .pl-player img{width:36px;height:40px;grid-row:1/4}
html[data-device-mode=touch] .pl-player strong{font-size:12px;grid-column:2}
html[data-device-mode=touch] .pl-player-fighter{font-size:10px}
html[data-device-mode=touch] .pl-player-state{grid-column:2;grid-row:3;justify-self:start;font-size:9px;padding:1px 6px}
html[data-device-mode=touch] .pl-slot{min-height:48px;font-size:11px}
html[data-device-mode=touch] .pl-center-content{padding:6px;gap:6px}
html[data-device-mode=touch] .pl-fighter-stage{min-height:60px}
html[data-device-mode=touch] .pl-own-name{font:22px/1.1 var(--font-display)}
html[data-device-mode=touch] .pl-center-content button{min-width:0}
html[data-device-mode=touch] .pl-side{gap:6px}
html[data-device-mode=touch] .pl-map-choices,html[data-device-mode=touch] .pl-rules{padding:6px;gap:4px 8px;border-radius:6px}
html[data-device-mode=touch] .pl-map-choices h3,html[data-device-mode=touch] .pl-rules h3{font:800 12px/1.1 var(--font-ui);letter-spacing:.04em}
html[data-device-mode=touch] .pl-map{width:64px}
html[data-device-mode=touch] .pl-map-choice,html[data-device-mode=touch] .pl-rule{font-size:14px;padding:4px 8px;min-height:44px}
html[data-device-mode=touch] .pl-map-hint,html[data-device-mode=touch] .pl-rules-hint{font-size:10px;line-height:1.25}
html[data-device-mode=touch] .pl-actions{padding:4px 6px;gap:8px;border-radius:6px;flex-wrap:nowrap}
html[data-device-mode=touch] .pl-start-reason{font-size:11px;line-height:1.2;flex:1 1 auto}
html[data-device-mode=touch] .pl-actions button{flex:none;min-width:100px;width:auto}
html[data-device-mode=touch] .pl-status{font-size:10px;line-height:1.2;min-height:1.2em}
html[data-device-mode=touch] .pl-loading{padding:8px}
html[data-device-mode=touch] .pl-loading h2{font:24px/1.1 var(--font-display);margin:3px}
html[data-device-mode=touch] .pl-loading p{font-size:12px;margin:4px}
html[data-device-mode=touch] .pl-loading progress{margin:4px;height:8px}
html[data-device-mode=touch] .pl-identity{padding:8px 0;overflow:auto;min-height:0}
html[data-device-mode=touch] .pl-identity label{font:26px/1.1 var(--font-display)}
html[data-device-mode=touch] .pl-identity input{padding:10px;margin-top:8px;font-size:16px}
html[data-device-mode=touch] .pl-identity p{font-size:12px;line-height:1.3;margin:8px 0}
@media(max-height:500px){
 html[data-device-mode=touch] .pl-fighter-stage{display:none}
 html[data-device-mode=touch] .pl-map-hint{display:none}
 html[data-device-mode=touch] .pl-header h1{font-size:24px}
}
@media(max-height:340px){
 html[data-device-mode=touch] .pl-status{display:none}
 html[data-device-mode=touch] .pl-invite-label{display:none}
}
html[data-device-mode=touch] .private-lobby[data-state=reload],html[data-device-mode=touch] .private-lobby:has(.pl-capacity-feedback:not([hidden])){overflow:auto}

.mobile-invite-dialog{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 24px);box-sizing:border-box;overflow:auto;border:1px solid #75a8c9;border-radius:7px;padding:18px;background:#10324d;color:#fff8de;box-shadow:0 12px 40px #04142699}
.mobile-invite-dialog::backdrop{background:#051625bd}
.mobile-invite-dialog h2{font:28px/1.1 var(--font-display);margin:0 0 12px;text-transform:uppercase}
.mobile-invite-dialog label{display:grid;gap:6px;font:800 17px/1.2 var(--font-ui)}
.mobile-invite-dialog input{width:100%;min-width:0;padding:10px;box-sizing:border-box;border:1px solid #9dc9e4;border-radius:3px;background:#09233d;color:#fff;font:16px/1.2 var(--font-reading)}
.mobile-invite-dialog p{font-size:12px;margin:8px 0}
.mobile-invite-dialog form>div{display:flex;gap:10px;margin-top:14px}
.mobile-invite-dialog button{flex:1;min-height:44px;font:800 18px/1.1 var(--font-ui);padding:8px}
.mobile-invite-dialog .primary{background:var(--royale-yellow);color:#112e49;font:20px/1.1 var(--font-display)}
html[data-device-mode=touch] #menu.ssr-interim .entry-gate:has(#join-private-lobby) #enter{grid-column:auto}
html[data-device-mode=touch] #join-private-lobby{background:#184968;color:#fff8de}