/* Lobby presentation; the existing arena art and animations are preserved. */
body:has(#game[hidden]){min-height:100dvh}body:has(#game[hidden]) main{max-width:none;padding:0}body:has(#game[hidden]) .game-header{height:88px;max-width:none}.game-header .avatar-picker{position:absolute;right:152px;top:20px;z-index:5;display:flex;gap:16px;padding:0;border:0;background:none;width:260px}.game-header .avatar-picker>.avatar-control{flex-basis:48px;width:48px;height:48px}.game-header .avatar-control #avatarPreview{width:48px;height:48px;font-size:31px}.game-header .avatar-control .avatar-reroll{width:25px;height:25px;font-size:21px;right:-5px;bottom:-5px}.game-header .avatar-picker label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.game-header .avatar-picker #userName{width:100%;height:40px;border-color:#d5e6ff;background:#041126e8;border-radius:7px;font-size:14px}.game-header nav{top:24px}.game-header nav .quiet{font-size:13px;border-color:#d5e6ff;padding:9px 13px}.game-header:has(.top-score:not([hidden])) .avatar-picker{display:flex}body:has(#game:not([hidden])) .game-header .avatar-picker{display:none}
body:has(#game[hidden]) .hero-copy{height:110px;padding:18px 220px 0;text-align:center}body:has(#game[hidden]) .hero-copy h1{transform:none;font-size:clamp(26px,3.7vw,62px);font-weight:900;letter-spacing:1px;line-height:1.3;margin:5px 0;color:#fff9ee;text-shadow:0 4px 0 #07142d,0 5px 18px #00102f}body:has(#game[hidden]) .mini-label,body:has(#game[hidden]) .cheer{display:none}
#lobby{border:0;border-radius:0;box-shadow:none;background:none;max-width:none;overflow:visible;margin:clamp(70px,11vh,150px) 0 0}.lobby-title{display:none}.lobby-grid{display:flex;justify-content:space-between;gap:15%;align-items:stretch}.lobbycard{position:relative;isolation:isolate;flex:0 0 42.5%;border:0!important;padding:62px 7% 26px 3%;background:#ff476d;clip-path:polygon(0 0,83% 13%,100% 100%,0 100%)}.lobbycard:before{content:"";position:absolute;inset:5px 5px 0 0;clip-path:polygon(0 0,83% 13%,100% 100%,0 100%);background:linear-gradient(135deg,#08182efc,#031025fa);z-index:-1}.lobbycard+.lobbycard{padding:62px 3% 26px 7%;background:#39d8f4;clip-path:polygon(17% 13%,100% 0,100% 100%,0 100%)}.lobbycard+.lobbycard:before{inset:5px 0 0 5px;clip-path:polygon(17% 13%,100% 0,100% 100%,0 100%)}.lobbycard .card-number{display:none}.lobbycard .card-heading{justify-content:center;text-align:center;margin:0 0 15px}.lobbycard .card-heading h2{font-size:clamp(24px,2.65vw,45px);letter-spacing:0;white-space:nowrap;margin:0 0 2px}.match-label{display:block;color:#ff476d;font:900 clamp(12px,1.5vw,23px) 'Space Grotesk',sans-serif;letter-spacing:3px}.lobbycard+.lobbycard .match-label{color:#39d8f4}.lobbycard .card-heading p{font-size:clamp(12px,1.45vw,21px);font-weight:700;margin:3px 0}.lobbycard .form-row{display:block}.lobbycard .form-row label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.lobbycard select,.lobbycard input{height:48px;border:1px solid #d0dcf0;border-radius:6px;background:#061226;margin:0 0 12px;font-size:20px;text-align:center}.lobbycard #hp{color:#ff4771;letter-spacing:5px}.lobbycard #code{font:800 26px 'Space Grotesk',sans-serif;letter-spacing:clamp(9px,1.8vw,28px);padding-left:25px;text-align:center}.lobbycard #code::placeholder{color:#a5b5d0;opacity:.8}.lobbycard .primary{height:60px;border:0;border-radius:8px;background:#ff4268;box-shadow:none;color:#041229;font-size:clamp(20px,2.3vw,36px);padding:8px 20px}.lobbycard+.lobbycard .primary{background:#fff9e9;color:#041229}.lobbycard .primary span{font-size:30px}.cpu-card{display:flex;align-items:center;gap:28px;padding:18px 110px 18px 32px;border-top:1px solid #b4c5de;background:#031127f5;margin:0;min-height:88px}.cpu-card .card-heading{margin:0;gap:12px;flex-shrink:0}.cpu-card .card-number{font-size:34px;border:0;background:none;padding:0;box-shadow:none;color:#fff}.cpu-card h2{font-size:23px;white-space:nowrap;margin:0}.cpu-card p{display:none}.cpu-options{flex:1;grid-template-columns:1fr 1fr 1fr;gap:28px}.cpu-options>div{display:flex;align-items:center;gap:16px;border-left:1px solid #7185a2;padding-left:28px}.cpu-options label{font-size:14px;white-space:nowrap;margin:0;color:#fff9ee}.cpu-options select{min-width:0;background:#061329;color:#fff9ee;border:1px solid #b6c8e4;border-radius:5px;padding:9px 12px;font-size:16px}.cpu-options .primary{height:46px;background:#33d4f4;box-shadow:none;border:0;border-radius:5px;font-size:20px;display:flex;justify-content:space-between;align-items:center;padding:7px 20px}body:has(#game[hidden]) footer{display:none}body:has(#game[hidden]) .audio-panel{bottom:22px;right:22px}body:has(#game[hidden]) .audio-panel summary{font-size:0;border:0;background:none;box-shadow:none;padding:4px}body:has(#game[hidden]) .audio-panel summary:after{content:'♫';font-size:28px;color:#fff9ee}body:has(#game[hidden]) #error{position:relative;margin:0 25px;z-index:6}
@media(min-width:1500px){#lobby{margin-top:18vh}.lobbycard{padding-top:80px}.lobbycard .primary{height:72px}.lobbycard select,.lobbycard input{height:58px}}
@media(max-width:1000px){body:has(#game[hidden]) .hero-copy{padding:35px 20px 0;height:125px}.game-header .avatar-picker{width:225px;right:130px}.cpu-card{gap:18px;padding-left:20px;padding-right:80px}.cpu-card h2{font-size:18px}.cpu-options{gap:12px}.cpu-options>div{gap:8px;padding-left:12px}.cpu-options label{font-size:12px}.cpu-options .primary{font-size:16px;padding:7px 10px}.lobbycard{padding-left:3%;padding-right:6%;}.lobbycard+.lobbycard{padding-left:6%;padding-right:3%}}
@media(max-width:650px){body:has(#game[hidden]) .game-header{height:110px}.game-header .avatar-picker{right:85px;top:18px;width:195px;gap:12px}.game-header .avatar-picker>.avatar-control{flex-basis:38px;height:38px;width:38px}.game-header .avatar-control #avatarPreview{width:38px;height:38px;font-size:25px}.game-header .avatar-picker #userName{height:36px;font-size:12px}.game-header nav{right:10px;top:20px}.game-header nav .quiet{font-size:10px;padding:8px}.game-header .brand{top:75px;left:16px;width:95px}body:has(#game[hidden]) .hero-copy{padding:20px 12px 0 90px;height:115px}body:has(#game[hidden]) .hero-copy h1{font-size:24px;white-space:normal}#lobby{margin-top:150px}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 10px}.lobbycard,.lobbycard+.lobbycard{clip-path:none;border-radius:12px;padding:24px 12px 15px;background:linear-gradient(155deg,#13233df5,#041127fa);border:2px solid #ff476d!important}.lobbycard+.lobbycard{border-color:#39d8f4!important}.lobbycard:before{display:none}.lobbycard .card-heading h2{font-size:19px}.lobbycard .card-heading p{font-size:10px}.match-label{font-size:10px;letter-spacing:1px}.lobbycard .primary{height:46px;font-size:18px;padding:7px 10px}.lobbycard .primary span{font-size:20px}.lobbycard select,.lobbycard input{height:42px;font-size:14px}.lobbycard #code{font-size:18px;letter-spacing:3px;padding:8px}.cpu-card{margin-top:18px;display:block;padding:16px 60px 18px 16px}.cpu-card .card-heading{margin:0 0 12px}.cpu-card .card-number{font-size:23px}.cpu-options{grid-template-columns:1fr 1fr;gap:12px}.cpu-options>div{display:block;border:0;padding:0}.cpu-options label{display:block;margin-bottom:5px}.cpu-options button{grid-column:1/-1}.cpu-options select{width:100%;font-size:14px}body:has(#game[hidden]) .audio-panel{bottom:20px;right:16px}}

.game-avatar{display:block;flex-shrink:0;width:100%;height:100%;border-radius:50%;background-image:url('assets/player-avatars.png');background-size:400% 400%;background-position:var(--ax,0%) var(--ay,0%);background-repeat:no-repeat}.portrait,.chat-avatar,#avatarPreview{overflow:hidden}.game-header .avatar-control #avatarPreview{padding:0;background:#09182e}.cpu-card .card-number{width:42px;height:42px}.cpu-card .card-number .game-avatar{width:42px;height:42px}body:has(#game[hidden]) .hero-copy{visibility:hidden}body:has(#game[hidden]){min-height:100dvh}body:has(#game[hidden]) main{min-height:calc(100dvh - 89px);display:flex;flex-direction:column}body:has(#game[hidden]) #lobby{flex:1;display:flex;flex-direction:column;margin-top:clamp(70px,11vh,150px)}body:has(#game[hidden]) .lobby-grid{flex:1}body:has(#game[hidden]) .cpu-card{flex-shrink:0}body:has(#game[hidden]) footer{display:none}body:has(#game[hidden]) main>.hero-copy{flex-shrink:0}body:has(#game[hidden]) .arena-backdrop{position:fixed}body:has(#game[hidden]) #lobby:after{display:none}@media(max-width:650px){body:has(#game[hidden]) main{min-height:calc(100dvh - 110px)}body:has(#game[hidden]) #lobby{margin-top:150px;flex:initial}body:has(#game[hidden]) .lobby-grid{flex:initial}}