/* Reference composition: 1871 × 839. Controls remain native HTML, artwork is decorative. */
body.on-home {font-family:Arial,Helvetica,sans-serif;background:#04233e;font-weight:400}
.lobby.home-screen {display:block;width:100%;height:100svh;max-height:none;padding:0;isolation:isolate;container-type:inline-size}
.lobby-bg {position:absolute;inset:0;background:url('homepage-arena.png') center/100% 100% no-repeat;transform:none;filter:none}
.lobby-bg-glow,.lobby-vignette {display:none}
.lobby-header,.lobby-stage,.lobby-hero,.lobby-hero-copy,.lobby-cta,.lobby-widgets {display:contents}
.lobby-brand,.lobby-mascot-wrap,.lobby-title-mark,.lobby-stamp {display:none}
.lobby-user {position:absolute;left:14.5%;top:2%;width:40%;height:11%;box-sizing:border-box;gap:1cqw;padding:.5cqw 1cqw;border:2px solid #087bff;border-right-color:transparent;border-radius:2cqw;background:linear-gradient(110deg,#00204aef,#063b85b8,transparent);box-shadow:0 3px 10px #00234680}
.lobby-avatar {width:3.7cqw;height:3.7cqw;border-color:#4edfff;background:#00354b url('home-logo.png') center/cover;color:transparent}
.lobby-avatar img {background:#00354b}
.lobby-user-name strong {font-size:1.3cqw}
.lobby-user-name strong:after {content:'';display:inline-block;margin-left:.65cqw;width:.55cqw;height:.55cqw;border-radius:50%;background:#14c875}
.lobby-online-dot {display:none}
.lobby-level-row {display:grid;grid-template-columns:14.5cqw auto;gap:.25cqw .8cqw;margin-top:.25cqw}
.lobby-level-row span {grid-column:1/-1;font-size:.95cqw;color:white;font-weight:400}
.lobby-level-row span:before {content:'★ ';color:#ffda2f}
.lobby-level-row small {font-size:.85cqw;color:#fff}
.lobby-xp-track {height:.5cqw;border-color:#81d8ff}
.lobby-xp-track i {background:linear-gradient(#fff240,#ffbd00)}
.lobby-currencies {position:absolute;left:59%;top:3%;width:25.3%;height:8.5%;display:flex;flex-wrap:nowrap;gap:0;border:1px solid #0069b7;border-radius:1.5cqw;transform:skew(-12deg);background:linear-gradient(#043c7de8,#001b3fed);box-shadow:inset 0 1px 3px #52beff77}
.lobby-currency,.lobby-currency.gold,.lobby-currency.gem {flex:1;min-width:0;padding:.4cqw 1cqw;gap:.75cqw;border:0;border-radius:0;box-shadow:none;background:transparent;transform:skew(12deg)}
.lobby-currency b {font-size:1.3cqw;flex:1}
.lobby-currency-ico {width:2.3cqw;height:2.3cqw;flex-shrink:0;border:2px solid #fff07d;box-shadow:0 2px 0 #b67900}
.lobby-currency-ico:not(.gem):after {content:'$';font-size:1.65cqw;color:#fff393;font-weight:900;text-shadow:1px 2px #cf8200}
.lobby-currency-ico.gem {width:1.7cqw;height:1.7cqw;border:2px solid #e0a7ff;box-shadow:inset 4px 4px 0 #efc4ff77}
.lobby-currency-add {width:2.1cqw;height:2.1cqw;font-size:2cqw;color:white;border-radius:.6cqw;border:1px solid #6dffb6}
.lobby-tools {position:absolute;left:85.3%;top:3%;width:13.4%;height:8.5%;gap:0;justify-content:space-evenly;background:linear-gradient(#053d7dea,#001d44f2);border-radius:1.4cqw;border:1px solid #087fcd;transform:skew(-12deg)}
.lobby-icon-btn {width:30%;height:75%;background:none;border:0;border-radius:0;transform:skew(12deg)}
.lobby-icon-btn svg {width:1.9cqw;height:1.9cqw}
.lobby-badge {font-size:.8cqw;min-width:1.3cqw;height:1.3cqw;right:.3cqw;top:0}
.lobby-badge[hidden] {display:none}
.lobby-login-btn {position:fixed;right:0;top:110%;font-size:.7cqw;padding:.3cqw .65cqw;transform:skew(12deg)}
.lobby-rail {position:absolute;left:.6%;top:22%;width:10.9%;height:51%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;display:flex;gap:1.1%;justify-content:space-between}
.lobby-rail-btn {width:100%;height:15.2%;flex-direction:row;padding:0 1.1cqw;gap:1cqw;background:linear-gradient(125deg,#042852f5,#00324dec);border:1.5px solid #39bfff;border-radius:1.1cqw;box-shadow:inset 0 1px 4px #ffffff22,0 3px 10px #00214055;font-size:.95cqw;letter-spacing:0;text-transform:none;white-space:nowrap}
.lobby-rail-btn .rail-ico {font-size:1.55cqw;width:1.7cqw;color:#fff;filter:grayscale(1) brightness(4)}
.lobby-rail-btn.active {background:linear-gradient(140deg,#ffe84d,#ffbf05);color:#002b5f;border-color:#fff381;box-shadow:0 0 16px #ffdf4599}
.lobby-rail-btn.active .rail-ico {filter:none;color:#002b5f}
.lobby-tagline {position:absolute;left:40%;top:44%;width:22%;font-family:'Bebas Neue',Impact,sans-serif;font-size:1.65cqw;font-style:italic;font-weight:900;letter-spacing:.02em;color:#fff;transform:rotate(-3deg);text-shadow:1px 2px 3px #063d7e}
.lobby-play-btn {position:absolute;left:39.8%;top:49.7%;width:21.6%;height:14%;min-height:0;border:3px solid #fff681;border-bottom:5px solid #ff8a00;border-radius:2cqw;background:linear-gradient(170deg,#fff933 10%,#ffe600 45%,#ffc500 46%,#ffbd00);color:#002b61;font-family:Arial,sans-serif;font-size:3.7cqw;letter-spacing:.02em;font-style:italic;font-weight:1000;gap:1.5cqw;transform:skew(-9deg) rotate(-2deg);box-shadow:0 5px 0 #0753bc,0 8px 0 #009fff,0 0 18px #6bdcff99;animation:none}
.lobby-play-ball {width:3.5cqw;height:3.5cqw;background:radial-gradient(circle at 30% 23%,#ffe7a5,#a96a02 35%,#342000 70%);box-shadow:inset -3px -2px 4px #241400;border:1px solid #fff199;transform:rotate(35deg)}
.lobby-play-ball:before {inset:0 40%;border-left:2px dashed #fff2c6;border-right:2px dashed #fff2c6;border-radius:50%}
.lobby-secondary-btn {position:absolute;left:41.8%;top:65.7%;width:16.4%;height:6.6%;min-height:0;border-radius:1.1cqw;background:linear-gradient(#003367,#001e3f);font-size:.92cqw;letter-spacing:0;border:1.5px solid #38bbff;gap:1cqw}
.lobby-secondary-btn:after {content:'›';font-size:2cqw;margin-left:.6cqw}
.lobby-guest-btn,.lobby-auth-hint {display:none}
.lobby .home-load {position:absolute;left:41%;top:60%;width:19%;z-index:5;color:#002751;background:#ffe43c;border-radius:1cqw;padding:.5cqw}
.lobby-widget {position:absolute;box-sizing:border-box;margin:0;background:linear-gradient(120deg,#003151f5,#002a5df5);border:2px solid #00d9ff;box-shadow:0 5px 14px #00224a66;border-radius:1.3cqw;padding:1cqw;backdrop-filter:none}
.lobby-widget.rewards {left:75.1%;top:16%;width:22.8%;height:16.4%;display:flex;gap:1cqw;align-items:flex-start;padding:.7cqw}
.lobby-widget-ico {font-size:3.5cqw;width:3.8cqw;height:auto;background:none;border:0;flex-shrink:0}
.lobby-widget-body {min-width:0}
.lobby-widget h2 {font-family:Arial,sans-serif;font-size:1.15cqw;letter-spacing:0;font-weight:900;text-transform:uppercase;margin:0 0 .45cqw;color:#fff}
.lobby-widget p {font-size:.8cqw;color:white;margin:0 0 .6cqw;line-height:1.4}
.lobby-claim-btn {font-size:.95cqw;font-family:Arial,sans-serif;font-weight:900;letter-spacing:0;text-transform:uppercase;color:#002b5c;padding:.4cqw 1.5cqw;border:2px solid #ffe975;border-radius:.75cqw;background:linear-gradient(#ffe93c,#ffb700);box-shadow:0 2px 1px #dd8800}
.lobby-widget.ranks {left:75.1%;top:34.3%;width:22.8%;height:32.3%;padding:.8cqw .75cqw;display:block}
.lobby-widget-head {position:relative;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:1.2cqw;align-items:center;margin:0 0 .4cqw}
.lobby-widget-head h2 span {display:block;font-size:.95cqw;font-weight:400;color:white;text-transform:none;margin-top:.2cqw}
.lobby-trophy {font-size:2.5cqw}
.lobby-top-ranks {padding:0;margin:0;display:grid;gap:0}
.lobby-top-ranks li {display:grid;grid-template-columns:2.2cqw 2.6cqw 1fr auto;align-items:center;gap:.55cqw;height:3.2cqw;padding:0 .6cqw;border:0;border-top:1px solid #0794d8;border-radius:.8cqw;background:linear-gradient(90deg,#00263e,#002849);cursor:pointer;font-size:.9cqw}
.lobby-top-ranks .r {width:1.9cqw;height:1.9cqw;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#fff474,#ffbd00);color:#003468;font-size:1.2cqw;border:1px solid #fff4b4}
.lobby-top-ranks li:nth-child(2) .r {background:linear-gradient(#fff,#94b2c3)}
.lobby-top-ranks li:nth-child(3) .r {background:linear-gradient(#ffdca0,#e59941)}
.lobby-top-ranks .av {width:2.5cqw;height:2.5cqw;border:1px solid #7ee5ff;border-radius:50%;background:#053f63;display:grid;place-items:center;overflow:hidden}
.lobby-top-ranks .av img {width:100%;height:100%;object-fit:cover}
.lobby-top-ranks .nm {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.87cqw}
.lobby-top-ranks .pts {font-size:1cqw;color:#ffda00;font-weight:900}
.lobby-top-ranks li.empty {display:block;height:auto;padding:1cqw!important;font-size:.9cqw}
.lobby-link-btn {position:absolute;right:.7cqw;top:.8cqw;width:2cqw;height:2.8cqw;font-size:0;border:0;background:none;color:white}
.lobby-link-btn:after {content:'›';font-size:2cqw}
.lobby-modes {position:absolute;left:11.8%;top:76.6%;width:75.3%;height:18.6%;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2cqw;padding:0}
.lobby-mode-card {position:relative;min-height:0;overflow:hidden;display:flex;align-items:flex-end;padding:.9cqw 1.4cqw;border:2px solid #00beff;border-radius:1.4cqw;transform:skew(-5deg);background:#003777;box-shadow:0 4px 0 #003763,0 6px 12px #00172f55;gap:1cqw}
.lobby-mode-card:before {content:'';position:absolute;inset:0;background-image:url('homepage-reference.png');background-size:550% 540%;background-position:14.3% 93.9%;z-index:-1}
.lobby-mode-card.purple {border-color:#af4cff;background:#41118d}
.lobby-mode-card.purple:before {background-position:37.5% 93.9%}
.lobby-mode-card.green {border-color:#00e585;background:#00533a}
.lobby-mode-card.green:before {background-position:60.9% 93.9%}
.lobby-mode-card.red {border-color:#ff4462;background:#930d27}
.lobby-mode-card.red:before {background-position:85.1% 93.9%}
.mode-copy {position:absolute;left:0;right:0;bottom:0;height:47%;box-sizing:border-box;padding:.6cqw 1.4cqw;background:linear-gradient(90deg,#003070,#003872);transform:skew(0deg)}
.purple .mode-copy {background:linear-gradient(90deg,#491494,#371187)}
.green .mode-copy {background:linear-gradient(90deg,#005047,#003e35)}
.red .mode-copy {background:linear-gradient(90deg,#aa1725,#780c1b)}
.mode-copy strong {display:block;font-family:'Bebas Neue',Impact,sans-serif;font-size:1.45cqw;font-weight:900;letter-spacing:.01em;font-style:italic;line-height:1.1;color:white}
.mode-copy small {display:block;font-size:.75cqw;color:white;margin-top:.2cqw}
.mode-ico {display:none}
.mode-arrow {position:absolute;right:1.2cqw;bottom:1.2cqw;font-size:2cqw;color:white;z-index:1}
.lobby button {cursor:pointer;touch-action:manipulation}
#home-screen #start {min-width:0;padding:0;font-size:3.7cqw;border-radius:2cqw;animation:none;letter-spacing:.02em;background:linear-gradient(170deg,#fff933 10%,#ffe600 45%,#ffc500 46%,#ffbd00)!important;color:#002b61!important;border-color:#fff681!important;box-shadow:0 5px 0 #0753bc,0 8px 0 #009fff,0 0 18px #6bdcff99!important;transform:skew(-9deg) rotate(-2deg)}
.lobby button:hover {filter:brightness(1.12)}
.lobby button:focus-visible,.lobby li:focus-visible {outline:3px solid #fff;outline-offset:4px}
.lobby button:disabled {cursor:wait;filter:saturate(.5)}
.lobby-panel {z-index:50;font-size:15px}
.preference-row {display:flex;align-items:center;justify-content:space-between;padding:15px 0;gap:16px}
.preference-row select {padding:9px;border-radius:8px;background:#00365b;color:white}
.preference-row input {width:22px;height:22px;accent-color:#ffc500}
body[data-arena-theme='sunset'] .lobby-bg {filter:sepia(.25) saturate(1.3)}
body[data-arena-theme='night'] .lobby-bg {filter:brightness(.55) saturate(.85)}
@media (max-aspect-ratio: 4/3) {
 body.on-home {overflow:auto;height:auto}
 .lobby.home-screen {height:auto;min-height:100svh;overflow:hidden;padding:16px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}
 .lobby-bg {position:fixed;background-image:linear-gradient(#00336c55,#00265055),url('stadium-clean.png');background-size:auto 100%;background-position:center}
 .lobby-header {display:flex;flex-wrap:wrap;gap:12px;align-items:center}
 .lobby-user {position:relative;inset:auto;width:calc(100% - 124px);height:68px;padding:8px;flex:1;gap:10px;border-radius:15px;background:#002d56ee}
 .lobby-avatar {width:42px;height:42px}
 .lobby-user-name strong {font-size:17px}.lobby-user-name strong:after {width:7px;height:7px;margin-left:8px}
 .lobby-level-row {grid-template-columns:1fr auto;gap:4px}.lobby-level-row span {font-size:12px}.lobby-level-row small {font-size:10px}.lobby-xp-track {height:5px}
 .lobby-tools {position:relative;inset:auto;transform:none;width:110px;height:52px;border-radius:14px}.lobby-icon-btn {transform:none}.lobby-icon-btn svg {width:21px;height:21px}.lobby-login-btn {display:none}
 .lobby-badge {font-size:10px;min-width:15px;height:15px}
 .lobby-currencies {position:relative;inset:auto;width:100%;height:48px;transform:none;border-radius:14px}.lobby-currency {transform:none!important;gap:12px;padding:5px 15px!important}.lobby-currency b {font-size:18px}.lobby-currency-ico {width:26px;height:26px}.lobby-currency-ico:not(.gem):after {font-size:21px}.lobby-currency-ico.gem {width:20px;height:20px}.lobby-currency-add {width:28px;height:28px;font-size:24px;border-radius:7px}
 .lobby-rail {position:relative;inset:auto;width:auto;height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;order:2}.lobby-rail-btn {height:44px;justify-content:center;font-size:12px;border-radius:10px;padding:7px;gap:6px}.lobby-rail-btn .rail-ico {font-size:18px;width:20px}
 .lobby-stage {display:flex;flex-direction:column;gap:16px;overflow:visible;order:3}
 .lobby-hero {display:block;position:relative;min-height:340px;border:0;border-radius:16px;background:url('homepage-arena.png') 26% top/auto 340px no-repeat;box-shadow:none;overflow:visible}
 .lobby-title-mark {display:none}
 .lobby-tagline {left:32%;top:56%;width:66%;font-size:21px}.lobby-play-btn {left:32%;top:66%;width:64%;height:75px;font-size:42px;border-radius:20px;gap:20px}.lobby-play-ball {width:38px;height:38px}
 #home-screen #start {font-size:42px;border-radius:20px}
 .lobby-secondary-btn {left:35%;top:92%;width:58%;height:40px;font-size:12px;border-radius:10px}.lobby-secondary-btn:after {font-size:23px}
 .lobby .home-load {left:35%;top:76%;width:55%;padding:6px}
 .lobby-widgets {display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
 .lobby-widget.rewards,.lobby-widget.ranks {position:relative;inset:auto;width:100%;height:auto;padding:16px;border-radius:18px}.lobby-widget.rewards {gap:16px}.lobby-widget-ico {font-size:44px;width:52px}.lobby-widget h2 {font-size:20px;margin-bottom:7px}.lobby-widget p {font-size:13px;margin-bottom:10px}.lobby-claim-btn {font-size:14px;padding:8px 22px;border-radius:10px}.lobby-widget-head {gap:15px}.lobby-widget-head h2 span {font-size:14px}.lobby-trophy {font-size:36px}
 .lobby-top-ranks li {grid-template-columns:30px 38px 1fr auto;gap:10px;height:53px;padding:0 8px;border-radius:10px}.lobby-top-ranks .r {width:26px;height:26px;font-size:17px}.lobby-top-ranks .av {width:34px;height:34px}.lobby-top-ranks .nm,.lobby-top-ranks .pts,.lobby-top-ranks li.empty {font-size:14px}.lobby-link-btn {right:16px;top:14px;width:25px;height:35px}.lobby-link-btn:after {font-size:30px}
 .lobby-modes {position:relative;inset:auto;width:100%;height:auto;order:4;grid-template-columns:1fr 1fr;gap:12px;padding:0 0 12px}.lobby-mode-card {height:116px;border-radius:14px;padding:12px;transform:none}.mode-copy {height:48%;padding:8px 10px}.mode-copy strong {font-size:19px}.mode-copy small {font-size:10px}.mode-arrow {font-size:25px;right:9px;bottom:12px}
}
@media (prefers-reduced-motion:reduce) { .lobby * {animation:none!important;scroll-behavior:auto!important} }