.lobby-shell { position:fixed; z-index:10; inset:0; overflow:auto; padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); color:#f9f7ff; background:radial-gradient(circle at 17% 12%,rgba(148,63,196,.3),transparent 34%),radial-gradient(circle at 84% 80%,rgba(35,211,235,.14),transparent 31%),linear-gradient(145deg,#120719,#21102d 48%,#100817); isolation:isolate; }
.lobby-shell::before { content:""; position:fixed; inset:0; z-index:-1; opacity:.22; pointer-events:none; background-image:radial-gradient(circle,rgba(173,238,255,.6) 0 1px,transparent 1.5px),repeating-linear-gradient(0deg,transparent 0 5px,rgba(138,234,255,.025) 6px); background-size:42px 42px,100% 6px; animation:dust-drift 18s linear infinite; }
.lobby-shell::after { content:""; position:fixed; width:70vmax; height:70vmax; left:-43vmax; top:12vh; z-index:-1; border:1px solid rgba(90,237,255,.13); border-radius:50%; box-shadow:0 0 90px rgba(57,220,255,.05),inset 0 0 70px rgba(109,44,150,.12); }
.lobby-top,.lobby-grid { width:min(1180px,100%); margin-inline:auto; }
.lobby-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; }
.lobby-brand { display:flex; align-items:center; gap:14px; }
.lobby-back { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(132,239,255,.38); border-radius:12px; color:#fff; background:rgba(255,255,255,.05); text-decoration:none; font-size:21px; }
.lobby-brand h1 { margin:0; font-size:clamp(23px,4vw,38px); letter-spacing:-.045em; line-height:.9; }
.lobby-brand p,.lobby-profile p { margin:7px 0 0; color:#78ecff; font:900 9px ui-monospace,monospace; letter-spacing:.16em; }
.lobby-profile { text-align:right; }
.lobby-profile strong { font-size:14px; }
.lobby-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr); gap:12px; align-items:start; }
.lobby-panel { position:relative; overflow:hidden; border:1px solid rgba(125,232,255,.22); border-radius:22px; background:linear-gradient(145deg,rgba(46,20,61,.92),rgba(16,8,26,.94)); box-shadow:0 25px 65px rgba(5,0,13,.42),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(14px); }
.map-panel { grid-column:1; grid-row:1; min-height:178px; padding:17px; }
.map-panel-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.map-panel h2 { margin:5px 0 0; font-size:clamp(18px,2.2vw,24px); letter-spacing:-.035em; }
.map-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:10px; }
.map-card { position:relative; min-height:96px; overflow:hidden; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:13px; color:#fff; text-align:left; background:#13091e center/cover no-repeat; cursor:pointer; isolation:isolate; }
.map-card::before { position:absolute; inset:0; z-index:-1; content:""; background:linear-gradient(90deg,rgba(12,5,18,.96),rgba(12,5,18,.68) 62%,rgba(12,5,18,.2)); }
.map-card-copy { display:grid; min-height:96px; align-content:end; padding:11px; }
.map-card strong,.map-card small,.map-card span { display:block; }
.map-card strong { font-size:15px; letter-spacing:.035em; }
.map-card small { overflow:hidden; margin-top:3px; color:#cfc5d7; font-size:8px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.map-card span { margin-top:5px; color:#8cefff; font:900 8px ui-monospace,monospace; letter-spacing:.1em; }
.map-card.selected { border-color:#c8ff71; box-shadow:0 0 0 1px rgba(200,255,113,.3),0 0 28px rgba(200,255,113,.13); }
.map-card:disabled { cursor:not-allowed; filter:saturate(.5); }
.map-card.full span { color:#ff997d; }
.quick-join-button { min-height:40px; padding:0 15px; border:1px solid rgba(200,255,113,.45); border-radius:11px; color:#d9ff9b; background:rgba(200,255,113,.08); font:900 9px ui-monospace,monospace; letter-spacing:.1em; cursor:pointer; }
.quick-join-button:disabled { opacity:.5; cursor:not-allowed; }
.selector-panel { grid-column:1; grid-row:2; display:grid; grid-template-columns:190px minmax(0,1fr); grid-template-rows:auto 1fr; gap:8px 12px; min-height:0; padding:15px; }
.eyebrow { color:#ffb963; font:900 9px ui-monospace,monospace; letter-spacing:.2em; }
.selector-panel h2,.roster-heading h2 { margin:5px 0 0; font-size:clamp(20px,2.6vw,28px); letter-spacing:-.04em; }
.selector-panel>div:first-child { grid-column:1/-1; display:flex; align-items:baseline; gap:14px; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.08); }
.selector-panel>div:first-child h2 { margin:0; white-space:nowrap; }
.character-stage { position:relative; display:grid; grid-row:2; align-content:center; justify-items:center; min-height:150px; }
.character-stage::before { content:""; position:absolute; width:150px; aspect-ratio:1; border:1px solid rgba(90,238,255,.16); border-radius:50%; background:conic-gradient(from 45deg,transparent,rgba(93,234,255,.14),transparent 34%); animation:radar 9s linear infinite; }
.character-glow { position:absolute; width:120px; height:45px; bottom:23%; border-radius:50%; background:rgba(64,227,255,.18); filter:blur(20px); animation:glow 3s ease-in-out infinite; }
.character-stage img { position:relative; width:130px; max-height:130px; object-fit:contain; filter:drop-shadow(0 18px 20px rgba(4,0,13,.55)) drop-shadow(0 0 18px rgba(75,229,255,.26)); animation:hover-blob 3.2s ease-in-out infinite; }
.preview-copy { position:relative; text-align:center; }
.preview-copy h3 { margin:0; font-size:16px; letter-spacing:.06em; }
.preview-copy p { margin:4px 0 0; color:#cfc3da; font-size:9px; line-height:1.3; }
.skin-rail { grid-column:2; grid-row:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:center; gap:8px; overflow:visible; padding:0; }
.skin-card { position:relative; min-width:0; display:grid; place-items:center; min-height:100px; padding:8px; border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#fff; background:radial-gradient(circle at 50% 44%,rgba(96,223,255,.08),transparent 55%),rgba(255,255,255,.045); cursor:pointer; }
.skin-card img { width:68px; height:68px; object-fit:contain; transform:scale(var(--card-scale,1)); transition:transform .16s ease,filter .16s ease; }
.skin-card strong,.skin-card small { display:block; }
.skin-card strong,.skin-card small { display:none; }
.skin-card:hover img,.skin-card:focus-visible img { filter:drop-shadow(0 0 10px rgba(103,235,255,.4)); transform:scale(calc(var(--card-scale,1) * 1.07)); }
.skin-card.selected::after { position:absolute; right:7px; top:7px; display:grid; width:18px; height:18px; place-items:center; content:"✓"; border-radius:50%; color:#16091e; background:#67ebff; font:950 10px ui-monospace,monospace; box-shadow:0 0 12px rgba(103,235,255,.42); }
.skin-card.selected { border-color:#67ebff; background:linear-gradient(135deg,rgba(83,231,255,.15),rgba(190,73,239,.12)); box-shadow:0 0 20px rgba(74,226,255,.12),inset 0 0 0 1px rgba(104,234,255,.18); }
.roster-panel { grid-column:2; grid-row:1/3; display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:100%; height:min(620px,calc(100vh - 90px)); min-height:520px; padding:20px; }
.roster-heading { display:flex; justify-content:space-between; align-items:end; gap:15px; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.09); }
.player-count { text-align:right; }
.player-count span { display:block; color:#8aefff; font:900 9px ui-monospace,monospace; letter-spacing:.15em; }
.player-count strong { display:block; margin-top:4px; font-size:25px; }
.lobby-counts { display:flex; align-items:flex-end; gap:14px; }
.lobby-counts .player-count + .player-count { padding-left:14px; border-left:1px solid rgba(255,255,255,.1); }
.roster-groups { min-height:0; overflow-y:auto; padding:4px 2px 10px; scrollbar-color:#754d89 transparent; }
.roster-group { padding:12px 0 4px; }
.roster-group + .roster-group { margin-top:7px; border-top:1px solid rgba(255,255,255,.1); }
.roster-group-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:0 7px 7px; }
.roster-group-heading h3 { margin:3px 0 0; font-size:15px; letter-spacing:.04em; }
.roster-group-heading>strong { color:#8aefff; font:950 18px ui-monospace,monospace; }
.roster-kicker { color:#b798c6; font:900 7px ui-monospace,monospace; letter-spacing:.14em; }
.waiting-group .roster-group-heading>strong { color:#c8ff71; }
.live-roster { min-height:0; padding:0 2px; }
.waiting-player { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 8px; border-bottom:1px solid rgba(255,255,255,.065); }
.waiting-player::before { width:8px; height:8px; content:""; border-radius:50%; background:#c8ff71; box-shadow:0 0 11px rgba(200,255,113,.7); }
.waiting-player strong { overflow:hidden; text-overflow:ellipsis; font-size:12px; white-space:nowrap; }
.waiting-player span { color:#9defff; font:900 8px ui-monospace,monospace; letter-spacing:.08em; }
.roster-player { display:grid; grid-template-columns:42px minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:9px 7px; border-bottom:1px solid rgba(255,255,255,.065); }
.roster-player>img { width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 7px rgba(105,234,255,.25)); }
.roster-player strong,.roster-player small,.roster-stat span { display:block; }
.roster-player>div:nth-child(2)>strong { overflow:hidden; text-overflow:ellipsis; font-size:12px; white-space:nowrap; }
.roster-player small { margin-top:3px; color:#bb8ed1; font:800 8px ui-monospace,monospace; letter-spacing:.1em; }
.roster-stat { min-width:56px; text-align:right; }
.roster-stat span { color:#7eeeff; font:900 7px ui-monospace,monospace; letter-spacing:.11em; }
.roster-stat strong { margin-top:3px; font:900 12px ui-monospace,monospace; }
.roster-empty { margin:18px auto; color:#aa9bb5; text-align:center; font-size:11px; }
.join-zone { padding-top:16px; border-top:1px solid rgba(255,255,255,.09); }
.recruit-button { width:100%; min-height:39px; margin-bottom:12px; border:1px solid rgba(200,255,113,.4); border-radius:11px; color:#c8ff71; background:rgba(200,255,113,.065); font:900 9px ui-monospace,monospace; letter-spacing:.1em; cursor:pointer; }
.recruit-button:hover:not(:disabled) { border-color:#c8ff71; background:rgba(200,255,113,.12); }
.recruit-button:disabled { opacity:.55; cursor:not-allowed; }
.arena-status { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; }
.arena-status strong { color:#a9ff79; font:900 10px ui-monospace,monospace; letter-spacing:.12em; }
.arena-status small { color:#a899b4; text-align:right; font-size:10px; }
.lobby-shell[data-state="FULL"] .arena-status strong,.lobby-shell[data-state="DISCONNECTED"] .arena-status strong { color:#ff9a76; }
.join-button { width:100%; min-height:58px; border:1px solid #72edff; border-radius:15px; color:#16091e; background:linear-gradient(110deg,#65efff,#cf70ff 70%,#ffad5e); box-shadow:0 9px 30px rgba(84,226,255,.17); font:950 13px ui-monospace,monospace; letter-spacing:.12em; cursor:pointer; }
.join-button:disabled { border-color:rgba(255,255,255,.15); color:#8b7d94; background:rgba(255,255,255,.06); box-shadow:none; cursor:not-allowed; }
.lobby-visible canvas,.lobby-visible body>.panel,.lobby-visible .mobile-controls { visibility:hidden; }
@keyframes hover-blob { 0%,100%{transform:translateY(3px) rotate(-1deg) scale(var(--preview-scale,1))} 50%{transform:translateY(-9px) rotate(1.2deg) scale(var(--preview-scale,1))} }
@keyframes glow { 0%,100%{opacity:.55;transform:scale(.92)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes radar { to{transform:rotate(360deg)} }
@keyframes dust-drift { to{background-position:42px 84px,0 0} }
@media(max-width:820px){ .lobby-grid{grid-template-columns:1fr;min-height:0}.map-panel{grid-column:auto;grid-row:auto;order:1}.selector-panel{grid-column:auto;grid-row:auto;order:2}.roster-panel{grid-column:auto;grid-row:auto;height:auto;min-height:420px;max-height:70vh;order:3}.lobby-top{align-items:flex-start}.lobby-profile{max-width:44vw}.character-stage{min-height:150px}.skin-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;scroll-snap-type:none}.skin-card{min-width:0;grid-template-columns:1fr}.skin-card img{width:68px;height:68px} }
@media(max-width:520px){
  .lobby-shell{padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .lobby-top{gap:8px;margin-bottom:10px}.lobby-brand{gap:7px;min-width:0}.lobby-back{flex:0 0 auto;width:34px;height:34px;border-radius:10px}.lobby-brand h1{font-size:clamp(18px,5.5vw,23px);white-space:nowrap}.lobby-brand p{margin-top:4px;font-size:7px;letter-spacing:.07em}.lobby-profile{max-width:34vw}.lobby-profile strong{display:block;overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.lobby-profile p{margin-top:4px;font-size:6px;letter-spacing:.08em}
  .lobby-grid{gap:8px}.lobby-panel{border-radius:14px;box-shadow:0 12px 32px rgba(5,0,13,.32),inset 0 1px rgba(255,255,255,.06)}
  .map-panel{min-height:0;padding:11px;order:1}.map-panel-heading{align-items:center}.map-panel h2{margin-top:4px;font-size:17px}.quick-join-button{min-height:33px;padding:0 9px;font-size:7px}.map-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}.map-card{min-height:78px;border-radius:11px}.map-card-copy{min-height:78px;padding:9px}.map-card strong{font-size:12px}.map-card small{display:none}.map-card span{margin-top:5px;font-size:7px}
  .selector-panel{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:11px;order:2}.selector-panel>div:first-child{gap:10px;padding-bottom:7px}.selector-panel h2{margin:0;font-size:clamp(16px,4.6vw,18px)}.character-stage{grid-column:auto;grid-row:auto;grid-template-columns:74px minmax(0,1fr);align-items:center;justify-items:start;min-height:74px;margin:2px 0}.character-stage::before{left:3px;width:68px}.character-glow{left:5px;bottom:14px;width:65px;height:28px;filter:blur(12px)}.character-stage img{width:68px;max-height:68px}.preview-copy{text-align:left}.preview-copy h3{font-size:15px;letter-spacing:.055em}.preview-copy p{margin-top:4px;font-size:9px;line-height:1.25}
  .skin-rail{grid-column:auto;grid-row:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:3px 0 0}.skin-card{display:grid;grid-template-columns:1fr;justify-items:center;min-height:76px;padding:5px 3px;border-radius:10px;text-align:center}.skin-card img{width:58px;height:58px}.skin-card strong,.skin-card small{display:none}
  .roster-panel{height:auto;min-height:360px;padding:11px;max-height:none;order:3}.roster-heading{align-items:center;gap:8px;padding-bottom:9px}.roster-heading h2{margin-top:4px;font-size:18px}.lobby-counts{display:flex;gap:8px}.lobby-counts .player-count + .player-count{padding:0 0 0 8px;border-top:0;border-left:1px solid rgba(255,255,255,.1)}.player-count span{font-size:6px}.player-count strong{font-size:15px}.roster-groups{display:grid;grid-template-columns:1fr 1fr;gap:7px;overflow:visible;padding-bottom:7px}.roster-group{min-width:0;padding:8px 0 0}.roster-group + .roster-group{margin:0;border-top:0;border-left:1px solid rgba(255,255,255,.1);padding-left:7px}.roster-group-heading{padding:0 3px 4px}.roster-group-heading h3{font-size:10px}.roster-kicker{display:none}.roster-group-heading>strong{font-size:14px}.roster-empty{margin:10px 2px;font-size:8px;line-height:1.3}.waiting-player{grid-template-columns:7px minmax(0,1fr);gap:5px;padding:7px 3px}.waiting-player::before{width:6px;height:6px}.waiting-player strong{font-size:9px}.waiting-player span{display:none}.roster-player{grid-template-columns:28px minmax(0,1fr) auto;gap:5px;padding:6px 3px}.roster-player>img{width:28px;height:28px}.roster-player>div:nth-child(2)>strong{font-size:9px}.roster-player small{font-size:6px}.roster-stat{min-width:0}.roster-stat span{font-size:5px}.roster-stat strong{font-size:9px}.roster-stat:last-child{display:none}.join-zone{padding-top:9px}.recruit-button{min-height:32px;margin-bottom:8px;font-size:7px}.arena-status{margin-bottom:8px}.arena-status strong{font-size:8px}.arena-status small{font-size:8px}.join-button{min-height:48px;border-radius:12px;font-size:10px;position:sticky;bottom:0}
}
@media(prefers-reduced-motion:reduce){ .lobby-shell::before,.character-stage::before,.character-stage img,.character-glow{animation:none!important} }