*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;color:#fff;background:radial-gradient(#1b4d3e,#0b1a2e);min-height:100vh;overflow:hidden}
#snow{position:fixed;inset:0;pointer-events:none}#app{position:relative;z-index:1;height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:#0008}
.logo{font-weight:900;font-size:24px;color:#e63946}.logo span{color:#ffd166}.season{color:#a8dadc}.season small{opacity:.7;margin-left:6px}
.sbucks{background:#ffd16622;border:2px solid #ffd166;padding:6px 14px;border-radius:20px}
.screen{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}.screen.active{display:flex}
.title{font-size:96px;margin:0;font-weight:900;letter-spacing:4px;color:#fff;text-shadow:0 0 12px #e63946,4px 4px 0 #2a9d8f}.sub{margin:0;color:#ffd166;font-size:20px}
input{font-size:18px;padding:8px 12px;border-radius:8px;border:2px solid #fff4;margin-left:8px}
button{font:inherit;font-weight:700;cursor:pointer;border:3px solid transparent;border-radius:12px;padding:12px 24px;background:#ffffff22;color:#fff}
.mode small{display:block;font-weight:400;opacity:.8;font-size:12px}.modes,.row{display:flex;gap:12px}
.mode.selected{background:#2a9d8f}.play{font-size:32px;padding:16px 72px;background:#e63946}
.focus,button:hover{border-color:#ffd166;transform:scale(1.06);box-shadow:0 0 16px #ffd166}input.focus{border-color:#ffd166}
.card{background:#0006;padding:20px;border-radius:16px;width:280px}.exclusive{border:3px solid #ffd166}.icon{font-size:64px}.price{color:#ffd166;font-weight:700}.note{opacity:.7;font-size:13px}
.bar{width:400px;height:20px;background:#0006;border-radius:10px;overflow:hidden}#queueFill{height:100%;width:0;background:linear-gradient(90deg,#e63946,#ffd166);transition:width .2s}
.spinner{width:48px;height:48px;border:6px solid #fff3;border-top-color:#ffd166;border-radius:50%;animation:s 1s linear infinite}@keyframes s{to{transform:rotate(360deg)}}
#prompts{padding:10px;text-align:center;background:#0008;font-size:14px}.btn{display:inline-block;min-width:24px;padding:2px 6px;border-radius:12px;margin:0 4px 0 14px;font-weight:700;background:#333}
.shopgrid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:1100px}.shopgrid .card{position:relative;width:220px}
.badge{background:#e63946;font-size:11px;font-weight:800;padding:3px 8px;border-radius:8px;display:inline-block;margin:2px}.badge.ex{background:#ffd166;color:#000}.badge.ret{background:#2a9d8f}
.icon img{width:96px;height:96px;object-fit:contain}.meta{text-transform:capitalize;opacity:.8;margin:4px}.cd{color:#a8dadc;font-size:13px;min-height:16px}
.r-uncommon{border:3px solid #4caf50}.r-rare{border:3px solid #2196f3}.r-epic{border:3px solid #9c27b0}.r-legendary{border:3px solid #ff9800}.r-icon{border:3px solid #00e5ff}
/* Sprites */
.avatar{position:relative;width:110px;height:170px;margin:0 auto}.avatar .body{position:absolute;left:30px;top:40px;width:50px;height:90px;background:#2a9d8f;border-radius:20px 20px 8px 8px}
.avatar .head{position:absolute;left:35px;top:0;width:40px;height:40px;background:#f1c27d;border-radius:50%}.avatar .legs{position:absolute;left:35px;top:125px;width:40px;height:45px;background:linear-gradient(90deg,#264653 45%,transparent 45% 55%,#264653 55%)}
.avatar .sprite{position:absolute;right:-18px;top:30px;animation:float 2.4s ease-in-out infinite}@keyframes float{50%{transform:translateY(-10px)}}
.sprite{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8,var(--c) 60%);box-shadow:0 0 14px var(--c);display:flex;align-items:center;justify-content:center;font-size:22px;position:relative}
.sprite .eye{display:none}.sprite.sway .eye{display:block;position:absolute;top:16px;width:6px;height:8px;background:#012;border-radius:50%}.sway .eye.l{left:13px}.sway .eye.r{right:13px}
.sway-default{background:radial-gradient(circle at 35% 30%,#fff,#7cf9ff 40%,#1a2a6c);box-shadow:0 0 20px #7cf9ff}
.sway-cube{border-radius:4px;transform:rotate(45deg) skew(8deg,8deg);background:linear-gradient(135deg,#7cf9ff,#3a7bd5 50%,#1a2a6c 51%)}
.sway-gold{background:linear-gradient(135deg,#fff3b0,#d4a017 35%,#8a6d0b 55%,#ffe066 75%,#b8860b);box-shadow:0 0 18px #ffd700}
.sway-quack{background:radial-gradient(circle at 35% 30%,#fff9c4,#ffd600 60%);box-shadow:0 0 14px #ffd600}.sway-quack .bill{position:absolute;bottom:8px;left:12px;width:22px;height:10px;background:#ff8f00;border-radius:50% 50% 60% 60%}
.sway-gummy{background:radial-gradient(circle at 35% 30%,#fff9,#ff4fa3aa 55%,#c2185b88);border-radius:45% 45% 40% 40%;box-shadow:inset 0 -6px 12px #fff5,0 0 10px #ff4fa3;backdrop-filter:blur(2px)}
.sway-galaxy{background:radial-gradient(1px 1px at 10px 12px,#fff,transparent),radial-gradient(1px 1px at 30px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 22px 8px,#fff,transparent),radial-gradient(1px 1px at 36px 18px,#fff,transparent),radial-gradient(circle at 40% 40%,#8e2de2,#4a00e0 50%,#0b0033);box-shadow:0 0 18px #8e2de2}
.sway-gem{border-radius:0;clip-path:polygon(50% 0,90% 30%,75% 100%,25% 100%,10% 30%);background:linear-gradient(120deg,#b2fefa 0 25%,#0ed2f7 25% 50%,#5ee7df 50% 70%,#0aa 70%)}
.sway-holofoil{background:linear-gradient(120deg,#ff0080,#ff8c00,#40e0d0,#7b68ee,#ff0080);background-size:300% 300%;animation:holo 2s linear infinite,float 2.4s ease-in-out infinite}@keyframes holo{to{background-position:300% 0}}
.locker{display:flex;gap:30px;align-items:flex-start}.slots{display:flex;flex-wrap:wrap;gap:8px;max-width:760px;justify-content:center}.slots button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px}
.slots button.eq{background:#2a9d8f}.slots .sprite{width:36px;height:36px;font-size:18px}.rar{font-size:11px;opacity:.85}.passive{background:#0006;padding:10px;border-radius:10px;max-width:300px}
.r-Rare{color:#64b5f6}.r-Epic{color:#ce93d8}.r-Legendary{color:#ffb74d}.r-Mythic{color:#7cf9ff;text-shadow:0 0 8px #7cf9ff}
.lobbyAvatar{position:absolute;right:8%;top:30%}
.r-Variant,.r-variant{background:linear-gradient(90deg,#ff7eb3,#7afcff,#feff9c,#b388ff);-webkit-background-clip:text;color:transparent;font-weight:800}
.card.r-variant{border:3px solid;border-image:linear-gradient(90deg,#ff7eb3,#7afcff,#feff9c,#b388ff) 1}.card.r-mythic{border:3px solid #7cf9ff;box-shadow:0 0 18px #7cf9ff}
.sprite.locked{background:#333;box-shadow:none;color:#888}
.ogbanner{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:50;background:linear-gradient(90deg,#ff7eb3,#7afcff,#feff9c,#b388ff);color:#000;font-weight:900;font-size:34px;padding:18px 34px;border-radius:18px;box-shadow:0 0 40px #7cf9ff;animation:pop .4s}
@keyframes pop{from{transform:translateX(-50%) scale(.3)}}
#matchLayer{display:none;position:fixed;inset:0;z-index:5}#game{display:block;width:100vw;height:100vh;cursor:crosshair}
#hud{position:fixed;inset:0;pointer-events:none;color:#111;font-weight:700;font-size:14px}.hud-tl{position:absolute;left:12px;top:10px;background:#fffc;padding:6px 10px;border-radius:8px}
.hud-feed{position:absolute;right:12px;top:10px;text-align:right}.hud-feed div{background:#000a;color:#fff;padding:3px 8px;margin:2px;border-radius:6px}.hud-feed .og{background:linear-gradient(90deg,#ff7eb3,#7afcff,#b388ff);color:#000}
.hud-bl{position:absolute;left:12px;bottom:46px;background:#fffc;padding:6px 10px;border-radius:8px}.hud-inv{position:absolute;left:50%;bottom:46px;transform:translateX(-50%)}
.slot{background:#000a;color:#fff;padding:6px 10px;margin:2px;border-radius:6px;display:inline-block}.slot.on{background:#ffd166;color:#000}
.hud-br{position:absolute;left:0;right:0;bottom:6px;text-align:center;color:#fff;background:#0008;padding:4px;font-weight:400}.hud-br .btn{background:#333;color:#fff;margin-left:8px}
.overlay{display:none;position:fixed;inset:0;background:#000b;color:#fff;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:20}
.sharecard{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;background:#0008}.sc-in{background:linear-gradient(135deg,#1a2a6c,#b21f1f55,#0b1a2e);border:4px solid #7cf9ff;border-radius:20px;padding:24px 40px;text-align:center;color:#fff;box-shadow:0 0 40px #7cf9ff}
.sc-big .sprite{width:96px;height:96px;margin:0 auto}
.settings{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:8px 24px;max-width:900px;max-height:60vh;overflow:auto;text-align:left;background:#0006;padding:14px;border-radius:12px}
.settings label{display:flex;justify-content:space-between;align-items:center;gap:8px}.padtest span{display:inline-block;min-width:30px;padding:3px;margin:2px;border-radius:5px;background:#333;text-align:center;font-size:12px}.padtest span.on{background:#ffd166;color:#000}
.outfit-svg{width:100%;height:100%}.outfit-wrap{position:absolute;inset:0}.outfit-mini{width:60px;height:85px}.outfit-pair{display:flex;gap:4px;justify-content:center}.outfit-pair svg{width:80px;height:113px}
.outfit-six{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.outfit-six figure{margin:0}.outfit-six svg{width:60px;height:85px}.outfit-six figcaption{font-size:9px}
.shopgrid .card.exclusive{width:300px}
.ogtag{display:inline-block;background:#ffd166;color:#000;font-size:9px;padding:1px 5px;border-radius:5px;margin-left:3px}.buy{margin-top:6px;padding:6px 14px;font-size:14px}
/* Icon Series */
.r-icon{box-shadow:0 0 14px #00e5ff88}.badge.icon{background:linear-gradient(90deg,#00e5ff,#7b2ff7);color:#fff}.badge.iog{background:#000;color:#ffd166;border:1px solid #ffd166}
.icon-art{width:100%;max-height:150px}.bundle-row{display:flex;gap:4px;justify-content:center;align-items:center}.bundle-row>*{width:70px;height:90px;display:flex;align-items:center;justify-content:center;font-size:34px}
.price s{opacity:.6;margin-right:6px}
/* 'Sway Swagger' (original): S-shaped body sway + hood pull + chain swing */
.rig{position:relative;width:100%;height:100%}.rig-body{position:absolute;inset:0;transform-origin:50% 100%}
.swagger .rig-body{animation:sway-s 1.25s ease-in-out infinite}
.swagger .rig-chain{position:absolute;left:44%;top:52%;width:12%;height:14%;border:3px dotted #c9ced6;border-top:none;border-radius:0 0 50% 50%;transform-origin:50% 0;animation:chain-swing .625s ease-in-out infinite alternate}
.swagger .rig-hand{position:absolute;left:62%;top:60%;width:11%;height:8%;border-radius:40%;background:#141414;border:2px solid #333;animation:hood-pull 2.5s ease-in-out infinite}
@keyframes sway-s{0%{transform:translateX(0) skewX(0) rotate(0)}25%{transform:translateX(-6%) skewX(8deg) rotate(-4deg)}50%{transform:translateX(0) skewX(0) rotate(0) translateY(2%)}75%{transform:translateX(6%) skewX(-8deg) rotate(4deg)}100%{transform:translateX(0)}}
@keyframes chain-swing{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}
@keyframes hood-pull{0%,40%{transform:translate(0,0)}55%,75%{transform:translate(-40%,-330%) rotate(-20deg)}90%,100%{transform:translate(0,0)}}
#emoteStage{position:fixed;left:50%;top:50%;width:120px;height:170px;transform:translate(-50%,-85%);pointer-events:none;z-index:5;display:none}
#emoteWheel{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:6;pointer-events:none}
#emoteWheel .wheel{position:relative;width:320px;height:320px;border-radius:50%;background:#0009;border:3px solid #fff4}
#emoteWheel .seg{position:absolute;width:86px;height:64px;margin:-32px -43px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font:700 11px system-ui;border-radius:12px;background:#fff1}
#emoteWheel .seg.on{background:#00e5ff66;outline:2px solid #00e5ff}#emoteWheel .seg span{font-size:26px}
/* ===== Lobby v2 (layout inspired by a battle-royale lobby; all art original) ===== */
#scene{position:fixed;inset:0;z-index:0;background:url(../img/lobby-scene.svg) center/cover no-repeat,#9fd3f0}
.topbar.v2{position:relative;z-index:3;background:linear-gradient(#0009,#0000);justify-content:flex-start;gap:10px;padding:10px 18px}
.ticon{background:none;border:0;color:#fff;font-size:18px;cursor:pointer;padding:6px}.tabs{display:flex;gap:4px;margin-left:6px}
.tab{position:relative;background:none;border:0;color:#fff;font:800 15px system-ui;letter-spacing:.5px;padding:7px 12px;border-radius:8px;cursor:pointer;text-shadow:0 1px 3px #000}
.tab.active{background:#fff;color:#111;text-shadow:none}.tab:hover,.tab.focus{outline:2px solid #fff8}.tab .dot{position:absolute;right:3px;top:4px;width:8px;height:8px;border-radius:50%;background:#ffd400}
.topbar.v2 .sbucks{margin-left:8px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000}.profile{margin-left:auto;width:40px;height:40px;border-radius:50%;border:2px solid #fff;background:#1d3557;font-size:22px;cursor:pointer}
.hide{display:none}
#screen-lobby.v2{display:none;position:relative}#screen-lobby.v2.active{display:block}
.promo{position:absolute;left:28px;top:8px;width:220px;height:118px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#c1121f,#7a0c16);box-shadow:0 6px 18px #0006;border:2px solid #fff6}
.promo .slide{position:absolute;inset:0;padding:14px;display:none;flex-direction:column;justify-content:flex-end;color:#fff;text-align:left;background:radial-gradient(circle at 80% 20%,#ffffff33,transparent 50%)}
.promo .slide.on{display:flex}.promo .slide b{font-size:12px;opacity:.85}.promo .slide span{font:900 20px Impact,system-ui;font-style:italic;text-transform:uppercase}
.promo .dots{position:absolute;left:14px;bottom:6px;display:flex;gap:4px}.promo .dots i{width:14px;height:4px;border-radius:2px;background:#fff6}.promo .dots i.on{background:#fff}
.modecard{position:absolute;left:28px;bottom:40px;width:230px;padding:14px;border-radius:14px;background:#3b3416ee;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 24px #0007}
.modecard .title{font:900 44px/0.95 Impact,'Arial Black',system-ui;color:#fff;margin:4px 0 6px;letter-spacing:1px;text-align:center}
.chip{background:#fff3c4;color:#222;border:0;border-radius:10px;padding:11px 12px;font:800 15px system-ui;text-align:left;cursor:pointer}
.chip.sprite-chip{background:linear-gradient(90deg,#fff 0,#e9d6ff 60%,#c8f7ff)}
.modecard .play{background:#ffe600;color:#111;border:0;border-radius:10px;padding:16px;font:900 26px system-ui;cursor:pointer;box-shadow:0 4px 0 #b8a400;margin:0}
.modecard .nav.focus,.chip.focus{outline:3px solid #fff;outline-offset:2px}
.pedestals{position:absolute;left:0;right:0;bottom:6%;height:72%;pointer-events:none}
.ped{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
.ped .disc{width:170px;height:34px;border-radius:50%;background:radial-gradient(#e8fbff,#9fe7ff 60%,#5cc8f0);box-shadow:0 0 24px #9fe7ffaa;opacity:.85}
.ped .disc.glow{width:210px;height:42px;background:radial-gradient(#fff,#7ff3ff 55%,#19c3f0);box-shadow:0 0 40px #5ff4ff,0 0 90px #5ff4ff88;opacity:1}
.p-me{left:50%;transform:translateX(-50%);bottom:0}.p-l1{left:31%;bottom:12%}.p-l2{left:18%;bottom:20%;transform:scale(.85)}.p-r1{left:66%;bottom:16%;transform:scale(.9)}
.ped.hidden{display:none}
.invite{width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:#0007;color:#fff;font:900 28px/1 system-ui;margin-bottom:60px;cursor:pointer}
.avatar.big{width:180px;height:280px;margin-bottom:-14px}.avatar.big .outfit-wrap{inset:0}
.nametag{display:flex;align-items:center;gap:6px;color:#fff;font:800 15px system-ui;text-shadow:0 1px 3px #000;margin-bottom:6px}
.nametag .lvl{background:#e0218a;border-radius:50% 50% 50% 0;padding:3px 7px;font-size:12px}
.p-me .passive{position:absolute;bottom:-26px;white-space:nowrap;font-size:11px;color:#fff;text-shadow:0 1px 2px #000}
.br{position:absolute;right:26px;bottom:52px;display:flex;gap:12px;align-items:center}
.lvlring{width:62px;height:62px;border-radius:50%;background:radial-gradient(#1d3557 58%,transparent 60%),conic-gradient(#ffd400 var(--p,30%),#fff4 0);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:900;box-shadow:inset 0 0 0 6px #234}
.lvlring b{font-size:20px;line-height:1}.lvlring small{font-size:10px}
.music{width:58px;height:58px;border-radius:14px;border:0;background:#fff;color:#111;font-size:28px;cursor:pointer}.music.on{background:#ffe600}
.modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#0008;z-index:4}.modal.open{display:flex}
.mbox{background:#14213d;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;align-items:center;color:#fff}
#prompts.v2{position:fixed;right:24px;bottom:12px;z-index:3;background:none;font:800 13px system-ui;color:#fff;text-shadow:0 1px 3px #000;display:flex;gap:18px}