/* Shared device classification for lobby and waiting rooms. */
html.mobile-layout.has-mobile-room-active:not(body) { width:100%; height:100%; overflow:hidden; }html.mobile-layout body.mobile-room-active:not(.game-active) {
    position:fixed;
    inset:0;
    width:100%;
    height:var(--game-viewport-height,100dvh);
    min-height:0;
    overflow:hidden;
    overscroll-behavior:none;
  }html.mobile-layout body.mobile-room-active:not(.game-active) .shell {
    display:flex;
    width:100%;
    height:100%;
    min-height:0;
    padding:calc(4px + env(safe-area-inset-top)) 5px calc(4px + env(safe-area-inset-bottom));
    flex-direction:column;
    overflow:hidden;
  }html.mobile-layout body.mobile-room-active:not(.game-active) .shell>header { display:none; }html.mobile-layout body.mobile-room-active:not(.game-active) #app,
html.mobile-layout body.mobile-room-active:not(.game-active) #room { width:100%; height:100%; min-height:0; overflow:hidden; }html.mobile-layout body.mobile-room-active:not(.game-active) #room { display:flex!important; flex-direction:column; }html.mobile-layout body.mobile-room-active:not(.game-active) #room>.room-spectator-panel { flex:0 0 34px; margin:0 0 4px; }html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow {
    display:flex;
    width:100%;
    min-height:0;
    margin:0;
    padding:5px;
    flex:1;
    flex-direction:column;
    overflow:hidden;
    border-radius:15px;
  }html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title {
    flex:0 0 40px;
    min-height:40px;
    margin:0;
    padding:3px 216px 3px 6px;
  }html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title h2 {
    overflow:hidden;
    font-size:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .eyebrow { font-size:7px; }html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>button { display:none; }html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#open-room-settings,
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#leave {
    position:fixed;
    z-index:125;
    top:calc(9px + env(safe-area-inset-top));
    display:block;
    min-height:34px;
    padding:5px 9px;
    border-radius:999px;
    font-size:9px;
  }html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#open-room-settings { right:147px; min-width:76px; }html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#open-room-settings[hidden] { display:none!important; }html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#leave { right:82px; min-width:58px; }html.mobile-layout body.mobile-room-active:not(.game-active) #waiting {
    display:flex;
    min-height:0;
    flex:1;
    flex-direction:column;
    overflow:hidden;
  }html.mobile-layout body.mobile-room-active:not(.game-active) #waiting[hidden] { display:none!important; }html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants {
    display:flex;
    min-height:0;
    margin:0 0 5px;
    padding:5px 7px;
    flex:1;
    flex-direction:column;
    overflow:hidden;
  }html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants h3 { flex:0 0 25px; margin:0 0 3px; font-size:12px; }html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players {
    display:block;
    min-height:0;
    flex:1;
    overflow:auto;
    overscroll-behavior:contain;
  }html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants .player {
    min-height:44px;
    padding:5px 7px;
    gap:7px;
  }html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants .player-label { font-size:10px; }html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-room-actions {
    display:grid;
    min-height:46px;
    flex:0 0 46px;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    gap:5px;
  }html.mobile-layout body.mobile-room-active:not(.game-active) .room-slot-button,
html.mobile-layout body.mobile-room-active:not(.game-active) #ready-start { min-height:46px; height:46px; padding:5px 8px; font-size:10px; }html.mobile-layout body.mobile-room-active:not(.game-active) .room-slot-button>span:first-child { font-size:18px; }html.mobile-layout body.mobile-room-active:not(.game-active) .room-slot-button b { font-size:9px; }html.mobile-layout body.mobile-room-active:not(.game-active) .room-slot-button small { display:none; }html.mobile-layout body.mobile-room-active #room-avatar-stage,
html.mobile-layout body.mobile-room-active .room-chat-panel .room-friend-button { display:none!important; }html.mobile-layout body.mobile-room-active #room>.room-sidebar {
    position:fixed;
    z-index:122;
    right:6px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    left:6px;
    display:block;
    width:auto;
    height:min(68vh,520px);
    min-height:260px;
    padding:0;
    visibility:hidden;
    border:1px solid #4a617c;
    border-radius:18px;
    background:#101115;
    box-shadow:0 22px 70px #000e,0 0 0 1px #ffffff0a inset;
    opacity:0;
    transform:translateY(calc(100% + 24px));
    transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .18s,visibility .18s;
  }html.mobile-layout body.mobile-room-active.mobile-game-chat-open #room>.room-sidebar { visibility:visible; opacity:1; transform:none; }html.mobile-layout body.mobile-room-active #room>.room-sidebar .room-chat-panel {
    display:flex;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:13px;
    flex-direction:column;
    border:0;
    border-radius:inherit;
  }html.mobile-layout body.mobile-room-active #room>.room-sidebar .room-chat-panel h3 { flex:0 0 auto; margin:0 0 8px; padding-right:66px; }html.mobile-layout body.mobile-room-active #room-chat { min-height:0; height:auto; max-height:none; flex:1; }html.mobile-layout body.mobile-room-active #room>.room-sidebar .send { flex:0 0 auto; }html.mobile-layout body.mobile-room-active .mobile-game-chat-toggle {
    position:fixed;
    z-index:125;
    top:calc(9px + env(safe-area-inset-top));
    right:9px;
    display:flex;
    min-width:66px;
    min-height:34px;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:5px 9px;
    border:1px solid #49d6df80;
    border-radius:999px;
    color:#e9feff;
    background:#1d1f26ed;
    box-shadow:0 8px 24px #0009,0 0 18px #3bd5df2c;
    backdrop-filter:blur(8px);
    font-size:13px;
  }html.mobile-layout body.mobile-room-active .mobile-game-chat-toggle b { font-size:10px; }html.mobile-layout body.mobile-room-active .mobile-game-chat-toggle.has-unread { border-color:#ff6478; color:#fff; background:#461923f2; box-shadow:0 8px 24px #0009,0 0 0 2px #ff52682d,0 0 22px #ff405d70; animation:mobile-chat-alert 1.35s ease-in-out infinite; }html.mobile-layout body.mobile-room-active .mobile-game-chat-toggle em { position:absolute; top:-5px; right:-3px; display:grid; min-width:19px; height:19px; place-items:center; padding:0 5px; border:2px solid #101115; border-radius:999px; color:#fff; background:#ff5268; font-size:8px; font-style:normal; font-weight:900; }html.mobile-layout body.mobile-room-active .mobile-game-chat-backdrop { position:fixed; z-index:120; inset:0; display:block; width:100%; height:100%; padding:0; border:0; border-radius:0; background:#08090ba8; backdrop-filter:blur(3px); }html.mobile-layout body.mobile-room-active .mobile-game-chat-backdrop[hidden] { display:none!important; }

html.mobile-layout.has-lobby:not(#_) { width:100%; height:100%; overflow:hidden; }html.mobile-layout body.has-lobby:not(#_) { position:fixed; inset:0; width:100%; height:var(--game-viewport-height,100dvh); min-height:0; overflow:hidden; overscroll-behavior:none; }html.mobile-layout body.has-lobby:not(#_) .shell { display:flex; width:100%; height:100%; min-height:0; padding:calc(6px + env(safe-area-inset-top)) 7px calc(6px + env(safe-area-inset-bottom)); flex-direction:column; overflow:hidden; }html.mobile-layout body.has-lobby:not(#_) .shell>header { display:flex; min-height:46px; margin:0 0 6px; flex:0 0 46px; align-items:center; gap:6px; }html.mobile-layout body.has-lobby:not(#_) .shell>header>div:first-child { display:grid; gap:0; }html.mobile-layout body.has-lobby:not(#_) .shell>header>div:first-child b { font-size:17px; line-height:1; }html.mobile-layout body.has-lobby:not(#_) .shell>header>div:first-child span { margin:3px 0 0; font-size:8px; }html.mobile-layout body.has-lobby:not(#_) #user-bar { min-width:0; margin-left:auto; flex-wrap:nowrap; justify-content:flex-end; gap:4px; }html.mobile-layout body.has-lobby:not(#_) #welcome { max-width:66px; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }html.mobile-layout body.has-lobby:not(#_) #wallet-button { min-height:31px; padding:4px 7px; font-size:9px; }html.mobile-layout body.has-lobby:not(#_) #open-settings,
html.mobile-layout body.has-lobby:not(#_) #open-admin { width:32px; min-width:32px; min-height:31px; padding:0; overflow:hidden; font-size:0; }html.mobile-layout body.has-lobby:not(#_) #open-settings::before { content:"⚙"; font-size:15px; }html.mobile-layout body.has-lobby:not(#_) #open-admin::before { content:"🛡"; font-size:14px; }html.mobile-layout body.has-lobby:not(#_) #app { min-height:0; flex:1; overflow:hidden; }html.mobile-layout body.has-lobby:not(#_) #lobby { display:grid; width:100%; height:100%; min-height:0; grid-template-rows:minmax(220px,.9fr) minmax(255px,1.1fr); gap:6px; overflow:hidden; }html.mobile-layout body.has-lobby:not(#_) #lobby>.panel.grow { display:flex; min-height:0; margin:0; padding:7px; flex-direction:column; overflow:hidden; border-radius:14px; }html.mobile-layout body.has-lobby:not(#_) #lobby>.panel.grow>.section-title { display:grid; min-height:82px; margin:0 0 5px; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:34px 42px; gap:5px 8px; }html.mobile-layout body.has-lobby:not(#_) #lobby>.panel.grow>.section-title>div:first-child { display:flex; min-width:0; align-items:center; gap:6px; }html.mobile-layout body.has-lobby:not(#_) #lobby>.panel.grow>.section-title .eyebrow { font-size:8px; }html.mobile-layout body.has-lobby:not(#_) #lobby>.panel.grow>.section-title h2 { margin:0; font-size:15px; }html.mobile-layout body.has-lobby:not(#_) .lobby-title-actions { display:contents; }html.mobile-layout body.has-lobby:not(#_) .lobby-room-actions { display:grid; width:100%; grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }html.mobile-layout body.has-lobby:not(#_) .lobby-room-actions button { min-width:0; min-height:42px; padding:6px 7px; overflow:hidden; font-size:10px; line-height:1; text-overflow:clip; white-space:nowrap; }html.mobile-layout body.has-lobby:not(#_) #open-create { min-width:112px; min-height:34px; grid-column:2; grid-row:1; justify-self:end; padding:5px 10px; border-color:#9185ff; background:linear-gradient(135deg,#6f5cf0,#4b3bc1); box-shadow:0 5px 15px #4f3ed74a; font-size:10px; font-weight:900; white-space:nowrap; }html.mobile-layout body.has-lobby:not(#_) #rooms { min-height:0; margin:0; padding-right:1px; flex:1; align-content:start; gap:5px; overflow-y:auto; overscroll-behavior:contain; }html.mobile-layout body.has-lobby:not(#_) .room-card { min-height:56px; padding:7px 8px; align-items:center; gap:6px; border-radius:11px; }html.mobile-layout body.has-lobby:not(#_) .room-card>div:first-child { min-width:0; overflow:hidden; }html.mobile-layout body.has-lobby:not(#_) .room-card .badge { font-size:8px; }html.mobile-layout body.has-lobby:not(#_) .room-card b { font-size:11px; }html.mobile-layout body.has-lobby:not(#_) .room-card br { display:none; }html.mobile-layout body.has-lobby:not(#_) .room-card small { display:block; overflow:hidden; font-size:8px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }html.mobile-layout body.has-lobby:not(#_) .room-card-actions { flex-direction:row; gap:4px; }html.mobile-layout body.has-lobby:not(#_) .room-card-actions button,
html.mobile-layout body.has-lobby:not(#_) .room-card>button { min-width:54px; min-height:34px; padding:4px 7px; font-size:9px; }html.mobile-layout body.has-lobby:not(#_) #lobby>aside { display:grid; width:100%; min-height:0; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 45px; grid-template-areas:"chat" "dock"; gap:5px; overflow:hidden; }html.mobile-layout body.has-lobby:not(#_) #lobby-avatar-card { display:none; }html.mobile-layout body.has-lobby:not(#_) .lobby-avatar-preview { width:30px; height:34px; min-height:0; overflow:hidden; }html.mobile-layout body.has-lobby:not(#_) .lobby-avatar-preview .pg-avatar { width:30px!important; height:38px!important; }html.mobile-layout body.has-lobby:not(#_) .lobby-avatar-info { min-width:0; gap:1px; }html.mobile-layout body.has-lobby:not(#_) .lobby-avatar-info b { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }html.mobile-layout body.has-lobby:not(#_) .lobby-avatar-info span { font-size:7px; }html.mobile-layout body.has-lobby:not(#_) .avatar-xp-track { height:3px; }html.mobile-layout body.has-lobby:not(#_) #lobby>aside>.panel:not(.lobby-avatar-card) { grid-area:chat; display:flex; min-height:0; margin:0; padding:7px; flex-direction:column; border-radius:12px; }html.mobile-layout body.has-lobby:not(#_) #lobby>aside>.panel:not(.lobby-avatar-card)>h3 { min-height:24px; margin:0 0 4px; font-size:12px; }html.mobile-layout body.has-lobby:not(#_) #online { min-height:24px; padding:3px 7px; font-size:8px; }html.mobile-layout body.has-lobby:not(#_) #lobby-chat { min-height:0; height:auto; max-height:none; flex:1; padding:7px; overflow-y:auto; }html.mobile-layout body.has-lobby:not(#_) #lobby-chat>div { font-size:9px; line-height:1.35; }html.mobile-layout body.has-lobby:not(#_) #lobby>aside .send { flex:0 0 auto; gap:4px; margin-top:4px; }html.mobile-layout body.has-lobby:not(#_) #lobby>aside .send input { min-height:34px; padding:6px 8px; font-size:11px; }html.mobile-layout body.has-lobby:not(#_) #lobby>aside .send button { min-width:52px; min-height:34px; padding:5px 7px; font-size:9px; }html.mobile-layout body.has-lobby:not(#_) .lobby-service-dock { grid-area:dock; display:grid; min-height:0; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }html.mobile-layout body.has-lobby:not(#_) .lobby-marketplace-button { display:flex; min-width:0; min-height:45px; height:45px; margin:0; padding:4px 7px; align-items:center; justify-content:center; gap:5px; border-radius:11px; }html.mobile-layout body.has-lobby:not(#_) .lobby-marketplace-button>span:first-child { width:auto; height:auto; border:0; background:transparent; font-size:16px; }html.mobile-layout body.has-lobby:not(#_) .lobby-marketplace-button>span:nth-child(2) { display:block; }html.mobile-layout body.has-lobby:not(#_) .lobby-marketplace-button b { font-size:10px; }html.mobile-layout body.has-lobby:not(#_) .lobby-marketplace-button small,
html.mobile-layout body.has-lobby:not(#_) .lobby-marketplace-button em { display:none; }html.mobile-layout body.has-lobby:not(#_) .lobby-shortcuts { display:contents; margin:0; }html.mobile-layout body.has-lobby:not(#_) .lobby-shortcuts button { display:flex; min-height:43px; padding:4px 7px; align-items:center; justify-content:center; gap:5px; border-radius:11px; }html.mobile-layout body.has-lobby:not(#_) .lobby-shortcuts span { font-size:16px; }html.mobile-layout body.has-lobby:not(#_) .lobby-shortcuts b { font-size:9px; }html.mobile-layout body.has-lobby:not(#_) .lobby-shortcuts small { display:none; }

@media(orientation:landscape){html.mobile-layout body.has-lobby:not(#_) .shell>header { min-height:39px; flex-basis:39px; }html.mobile-layout body.has-lobby:not(#_) #lobby { grid-template-columns:minmax(0,1.12fr) minmax(290px,.88fr); grid-template-rows:minmax(0,1fr); }html.mobile-layout body.has-lobby:not(#_) #lobby>.panel.grow>.section-title { min-height:75px; grid-template-rows:30px 39px; }html.mobile-layout body.has-lobby:not(#_) #lobby>aside { height:100%; }
}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants .player{flex-direction:row;justify-content:flex-start;text-align:left}
html.mobile-layout body.mobile-room-active:not(.game-active) .player-avatar-slot{display:none!important}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants .player.room-host-player{padding-left:65px}
html.mobile-layout body.mobile-room-active:not(.game-active) .player-host-badge{top:50%;transform:translateY(-50%)}
html.mobile-layout body.mobile-room-active:not(.game-active) #players.sky-team-players{display:flex}
html.mobile-layout body.has-lobby:not(#_) #lobby-chat{min-height:0;max-height:none}
html.mobile-layout body.has-lobby:not(#_) .lobby-shortcuts button{min-height:43px}
@media(max-width:370px){html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title{padding-right:148px}}