body.lobby-active{padding:0;margin:0;overflow:hidden;background:#091327;color:#eef7ff;height:100dvh}body.lobby-active>.topbar{display:none}body.lobby-active main{margin:0;padding:0;max-width:none}#home>.mobile-lobby{box-sizing:border-box;position:fixed;inset:0;overflow:hidden;display:grid;grid-template-rows:62px minmax(0,1fr) 128px 66px;gap:12px;padding:max(12px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 35%,#265675 0,#122b47 37%,#0a1529 75%)}.lobby-heading{display:flex;align-items:center;justify-content:space-between;padding-right:62px}.lobby-heading small{display:block;font-size:10px;font-weight:900;letter-spacing:3px;color:#72cde6}.lobby-heading strong{display:block;font-size:20px;margin-top:4px}.mobile-lobby button:not(.menu-picture),.lobby-dock button{border:1px solid #83bfd95e;border-radius:18px;background:#18354e;color:#e6faff;box-shadow:0 4px 0 #030e1b80}.mobile-lobby img,#lobby-heroes img{width:32px;height:32px;object-fit:contain}.mobile-lobby .arcade-action:before,#lobby-heroes .arcade-action:before{display:none!important}.lobby-heading button{width:48px;height:48px;padding:10px}.lobby-stage{position:relative;min-height:0;display:flex;justify-content:center;align-items:center}.lobby-orbit{position:absolute;bottom:13%;width:min(68vw,400px);height:16%;border:2px solid #65d6ed77;border-radius:50%;background:#5abce61a;box-shadow:0 0 60px #28a8de33,inset 0 0 35px #61c3ef33;transform:perspective(500px) rotateX(25deg)}#lobby-portrait{position:absolute;inset:-4% 15% 10%;display:flex;justify-content:center}#lobby-portrait svg{width:100%;height:100%;max-width:430px;filter:drop-shadow(0 8px 16px #0008)}.lobby-identity{position:absolute;bottom:0;text-align:center;z-index:2}.lobby-identity strong{font-size:clamp(14px,3vw,23px);text-shadow:0 2px 4px #081322}#lobby-level{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:7px;font-size:11px;color:#b8d9eb}#lobby-level i{width:90px;height:6px;border-radius:8px;background:#ffffff1c;overflow:hidden}#lobby-level b{display:block;height:100%;background:#8eaeff}#lobby-choose,#lobby-card-slot{position:absolute;top:37%;z-index:3}#lobby-choose{left:0;width:78px;height:88px;padding:12px;display:grid;place-items:center}#lobby-choose span{font-size:10px}#lobby-card-slot{right:0}#lobby-cards{width:78px;height:88px;min-width:0;display:flex;flex-direction:column;padding:10px!important}#lobby-cards svg{width:52px;height:48px}#lobby-cards .cards-picture-count{font-size:10px;color:#c0dce8}.lobby-play{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;width:min(100%,700px);justify-self:center}.lobby-play>div,.lobby-play #first-start-slot{min-width:0;height:100%}.lobby-play .menu-picture,.lobby-play #continue{width:100%!important;height:100%;min-height:0!important;display:flex!important;flex-direction:column;padding:8px!important;margin:0!important;border-radius:24px;box-shadow:0 5px 0 #061121, inset 0 1px 0 #ffffff50}.lobby-play .menu-picture[hidden]{display:none!important}.lobby-play .menu-picture svg{display:block!important;width:86px;height:76px}.lobby-play .menu-picture span{font-size:12px;color:#f1fcff}.lobby-play .menu-continue,.lobby-play .menu-new{background:linear-gradient(145deg,#24b696,#126e7d);border:2px solid #82f8d777}.lobby-play .menu-duel{background:linear-gradient(145deg,#8a58a8,#443d80);border:2px solid #d4acff66}.lobby-dock{display:flex;justify-content:center;align-items:center;gap:16px}.lobby-dock button,.lobby-dock #start{width:54px!important;height:50px;min-height:0!important;padding:9px!important;margin:0!important;border-radius:15px}.lobby-dock #new-adventure{margin:0;padding:0;border:0;background:none;display:block}.lobby-dock #new-adventure[hidden]{display:none}.lobby-dock #start svg{display:block!important;width:34px;height:30px}.lobby-dock #start span{display:none}.lobby-dock #start{background:#23334a!important;border:1px solid #91adbf55}.lobby-dock:empty{display:none}
#lobby-heroes{width:min(94vw,850px);max-width:850px;height:min(88dvh,720px);max-height:88dvh;margin:auto;padding:16px;overflow:hidden;background:#10243a;color:#e8f8ff;border:1px solid #6894b0;box-sizing:border-box;border-radius:24px}#lobby-heroes[open]{display:grid;grid-template-rows:45px minmax(0,1fr) 50px;gap:10px}#lobby-heroes header{display:flex;align-items:center;justify-content:space-between}#lobby-heroes h2{font-size:18px;margin:0}#lobby-heroes button:not(.hero-card){width:44px;height:44px;background:#26475f;border:1px solid #7cabc2;border-radius:12px;padding:9px;color:white}#lobby-hero-grid{min-height:0}#lobby-heroes #heroes{height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}#lobby-heroes .hero-card{height:100%;min-height:0;overflow:hidden;border-radius:14px;background:#213952;border:2px solid #ffffff22;color:white;padding:0;display:flex;flex-direction:column}#lobby-heroes .hero-card.selected{border-color:#66f5d4;box-shadow:0 0 12px #68ecd33f}#lobby-heroes .hero-art{height:auto;flex:1;min-height:0;background:radial-gradient(#50749166,#192d4666)}#lobby-heroes .hero-art svg{height:100%;width:100%;max-width:none}#lobby-heroes .hero-num,#lobby-heroes .alias,#lobby-heroes .trait,#lobby-heroes .hero-info p,#lobby-heroes .hero-level{display:none}#lobby-heroes .hero-info{padding:5px 2px;flex:none}#lobby-heroes .hero-info h3{font-size:10px;line-height:1.3;margin:0;color:white}#lobby-heroes .lobby-page-hidden{display:none!important}#lobby-heroes footer{display:flex;align-items:center;justify-content:center;gap:24px}#lobby-prev img{transform:rotate(180deg)}#lobby-page-dots{display:flex;gap:8px}#lobby-page-dots i{width:10px;height:10px;border-radius:50%;background:#688196}#lobby-page-dots i.active{background:#8ef4dc}#lobby-heroes .locked:after{content:'';position:absolute;inset:auto 8px 29px auto;width:20px;height:20px;background:#d4e3ed;mask:url('ui/kenney/icon_lock.png') center/contain no-repeat}
@media(min-width:900px) and (min-height:600px){#home>.mobile-lobby{padding-left:max(30px,calc((100vw - 1050px)/2));padding-right:max(30px,calc((100vw - 1050px)/2));grid-template-rows:66px minmax(0,1fr) 140px 64px}#lobby-choose{left:15%}#lobby-card-slot{right:15%}}
@media(max-height:600px) and (orientation:landscape){#home>.mobile-lobby{grid-template-columns:1.2fr 1fr;grid-template-rows:46px minmax(0,1fr) 54px;gap:8px 18px;padding:8px 20px 24px}.lobby-heading{grid-column:1/-1}.lobby-stage{grid-column:1;grid-row:2/4}.lobby-play{grid-column:2;grid-row:2;align-self:center;height:min(36vh,145px)}.lobby-dock{grid-column:2;grid-row:3}.lobby-play .menu-picture svg{height:60px}.lobby-play .menu-picture span{font-size:11px}#lobby-choose,#lobby-card-slot{top:38%}#lobby-choose,#lobby-cards{width:56px;height:65px}#lobby-cards svg{width:36px;height:33px}.lobby-identity strong{font-size:13px}#lobby-heroes{height:94dvh;max-height:94dvh;padding:10px;grid-template-rows:35px minmax(0,1fr) 40px}#lobby-heroes header button,#lobby-heroes footer button{width:36px;height:36px;padding:6px}}
@media(max-height:690px) and (orientation:portrait){#home>.mobile-lobby{grid-template-rows:48px minmax(0,1fr) 104px 52px;gap:8px;padding:10px 14px 24px}.lobby-play .menu-picture svg{height:62px}.lobby-heading strong{font-size:17px}.lobby-heading{padding-right:57px}}
.lobby-play{grid-template-rows:minmax(0,1fr);min-height:0}.lobby-play>div{min-height:0}.lobby-play #continue[hidden]{display:none!important}.lobby-play #first-start-slot:empty{display:none!important}

/* Lobby owns its icons: legacy arcade pseudo-elements must not add a second picture. */
#home .mobile-lobby .arcade-action::before,#lobby-heroes .arcade-action::before{content:none!important;display:none!important;width:0!important;height:0!important;margin:0!important}
.mobile-lobby .lobby-symbol,#lobby-heroes .lobby-symbol{display:block!important;width:30px!important;height:30px!important;max-width:100%;max-height:100%;flex:none;margin:0 auto}
#lobby-profile,#lobby-help,#lobby-install,#lobby-heroes button:not(.hero-card){display:grid;place-items:center;padding:0!important;box-sizing:border-box}
#lobby-heroes header button .lobby-symbol,#lobby-heroes footer button .lobby-symbol{width:26px!important;height:26px!important}
#lobby-prev .lobby-symbol{transform:rotate(180deg)}
#lobby-choose .lobby-symbol{width:34px!important;height:34px!important}
#lobby-heroes .selected-check{right:7px;top:7px;width:22px;height:22px;line-height:20px;font-size:13px}

/* Align profile and settings on the same safe-area toolbar. */
body.lobby-active #lobby-profile{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(68px,calc(env(safe-area-inset-right) + 68px));width:48px;height:48px;border-radius:14px;z-index:61}
.lobby-heading{padding-right:112px}

/* Licensed game pictograms, independent of platform emoji fonts. */
.lobby-play .menu-picture{position:relative;overflow:hidden;border-width:3px!important;isolation:isolate}
.lobby-play .menu-picture:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(115deg,#ffffff12 0 22%,transparent 22% 73%,#ffffff08 73%),linear-gradient(180deg,#ffffff20,transparent 45%,#0003)}
.lobby-play .arcade-menu-art{display:grid;place-items:center;flex:none;width:94px;height:82px;border-radius:24px;background:linear-gradient(145deg,#153944,#0b252f);border:2px solid #91f8dd;box-shadow:0 4px 0 #08252c,inset 0 1px 0 #fff6;transform:rotate(-5deg);margin:0 0 3px}
.lobby-play .arcade-menu-art img{width:66px!important;height:66px!important;object-fit:contain;transform:rotate(5deg)}
.lobby-play .arcade-menu-duel{background:linear-gradient(125deg,#a22b44 0 49%,#234d98 51%);border-color:#f6d985;transform:rotate(5deg)}
.lobby-play .arcade-menu-duel img{transform:rotate(-5deg);filter:drop-shadow(0 3px 0 #23173f)}
.lobby-play .menu-picture>span:last-child{font-size:14px;font-weight:900;letter-spacing:.3px;text-shadow:0 2px 0 #0004}
@media(max-height:690px) and (orientation:portrait),(max-height:600px) and (orientation:landscape){.lobby-play .arcade-menu-art{width:76px;height:60px;border-radius:17px}.lobby-play .arcade-menu-art img{width:48px!important;height:48px!important}.lobby-play .menu-picture>span:last-child{font-size:12px}}

#lobby-choose,#lobby-cards{border:2px solid #9ed7f0!important;box-shadow:0 4px 0 #071321,inset 0 2px 0 #ffffff33!important;background:linear-gradient(145deg,#295b80,#172b48)!important;padding:8px!important;gap:2px}
#lobby-cards{border-color:#edcc81!important;background:linear-gradient(145deg,#795632,#372c42)!important}
#lobby-choose .hero-switch-art,#lobby-cards .collection-button-art{width:48px!important;height:48px!important;object-fit:contain;filter:drop-shadow(0 2px 0 #071321)}
@media(max-height:600px) and (orientation:landscape){#lobby-choose .hero-switch-art,#lobby-cards .collection-button-art{width:32px!important;height:32px!important}}