:root{--accent:#ff2e4d;--accent-2:#ff5a72;--accent-press:#dd1e3b;--ink:#0c121c;--ink-2:#5a6474;--ink-3:#8b95a4;--card:#fff;--panel:#f2f5f9;--panel-2:#e7ecf3;--line:#0c121c1a;--line-2:#0c121c0d;--red:#e5313b;--blue:#2f6bff;--ok:#22b24a;--warn:#e0a419;--bad:#e0392b;--r:0;--r-sm:0;--shadow:0 20px 55px #060a1461;--shadow-sm:0 6px 18px #060a142e;--font:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}#game{width:100vw;height:100vh;display:block}button{font-family:var(--font)}.menu{z-index:20;font-family:var(--font);background:radial-gradient(130% 90% at 50% -15%,#ff2e4d29,#0000 55%),linear-gradient(#080c148c 0%,#05080fd1 100%);flex-direction:column;justify-content:center;align-items:center;gap:26px;display:flex;position:fixed;inset:0}.menu.hidden{display:none}.menu:after{content:"";pointer-events:none;height:4px;position:fixed;top:0;left:0;right:0}.menu-logo{font:500 clamp(17px, 2.2vw, 22px) / 1 var(--font);letter-spacing:-.5px;color:#fff;opacity:.92;z-index:21;pointer-events:none;position:fixed;bottom:20px;right:26px}.menu-screen{flex-direction:column;align-items:center;gap:22px;width:min(92vw,720px);display:none}.menu-screen.show{animation:.22s scrIn;display:flex}@keyframes scrIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.scr-title{color:#fff;font:800 clamp(22px, 3vw, 32px) / 1 var(--font);letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 4px 20px #00000080}.back{color:#fff;border-radius:var(--r-sm);font:700 13px var(--font);letter-spacing:.5px;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff38;align-self:flex-start;padding:9px 18px;transition:background .14s,transform 80ms}.back:hover{background:#fff3}.back:active{transform:translateY(1px)}.menu-cards{grid-template-columns:repeat(3,min(29vw,232px));gap:20px;display:grid}.card{aspect-ratio:1;border-radius:var(--r);color:var(--accent);font:800 clamp(20px, 2.6vw, 30px) / 1 var(--font);letter-spacing:.5px;text-transform:uppercase;text-align:left;cursor:pointer;box-shadow:var(--shadow);background:#fff;border:none;justify-content:flex-start;align-items:flex-end;padding:26px;transition:transform .14s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.card:before{content:"";background:var(--accent);transform-origin:0;width:100%;height:6px;transition:transform .22s;position:absolute;top:0;left:0;transform:scaleX(0)}.card:after{content:"";opacity:.85;background-color:#b5b5b5;width:42%;height:42%;transition:opacity .2s,transform .2s;position:absolute;top:22px;right:22px;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.card:hover{transform:translateY(-6px);box-shadow:0 28px 64px #060a1480}.card:hover:before{transform:scaleX(1)}.card:hover:after{opacity:1;transform:scale(1.05)}.card:active{transform:translateY(-2px)}#cardRooms:after{-webkit-mask-image:url(/assets/textures/internet.svg);mask-image:url(/assets/textures/internet.svg)}#cardCustom:after{-webkit-mask-image:url(/assets/textures/shirt.svg);mask-image:url(/assets/textures/shirt.svg)}#cardSettings:after{-webkit-mask-image:url(/assets/textures/settings.svg);mask-image:url(/assets/textures/settings.svg)}.lobby{background:var(--card);border-radius:var(--r);width:min(90vw,640px);box-shadow:var(--shadow);flex-direction:column;padding:22px;display:flex}.lobby-view{flex-direction:column;gap:16px;display:flex}.lobby-view.hidden{display:none}.lobby-head{align-items:center;gap:10px;display:flex}.lobby-title{color:var(--ink);font:800 24px var(--font);letter-spacing:.5px;text-transform:uppercase;margin-right:auto}.lobby-btn{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);font:700 13px var(--font);letter-spacing:.4px;cursor:pointer;padding:11px 18px;transition:background .14s,transform 80ms,border-color .14s}.lobby-btn:hover{background:var(--panel-2)}.lobby-btn:active{transform:translateY(1px)}.lobby-btn.primary{background:var(--accent);color:#fff;border-color:#0000}.lobby-btn.primary:hover{background:var(--accent-press)}#btnRefresh{align-items:center;gap:7px;display:inline-flex}#btnRefresh:before{content:"";background-color:var(--accent);width:14px;height:14px;-webkit-mask:url(/assets/textures/reload.svg) 50%/contain no-repeat;mask:url(/assets/textures/reload.svg) 50%/contain no-repeat}.lobby-table{background:var(--panel);border-radius:var(--r-sm);overflow:hidden}.lobby-row{color:var(--ink);font:600 15px var(--font);border-bottom:1px solid var(--line-2);cursor:pointer;grid-template-columns:34px 1fr 92px 92px;align-items:center;padding:12px 14px;transition:background .12s;display:grid}.lobby-row:last-child{border-bottom:none}.lobby-row:not(.lobby-th):hover{background:#ff2e4d14}.lobby-th{background:var(--panel-2);color:var(--ink-2);font:800 11px var(--font);letter-spacing:1px;text-transform:uppercase;cursor:default}.lobby-th:hover{background:var(--panel-2)}.lobby-rows{max-height:46vh;overflow-y:auto}.lobby-row.full{opacity:.42;cursor:not-allowed}.lobby-row.full:hover{background:0 0}.c-name{text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.c-players,.c-ping{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}.c-ping{justify-content:flex-end;align-items:center;gap:6px;display:flex}.pingdot{background:var(--ink-3);width:8px;height:8px;display:inline-block}.pingdot.good{background:var(--ok)}.pingdot.mid{background:var(--warn)}.pingdot.bad{background:var(--bad)}.lobby-empty{text-align:center;color:var(--ink-3);font:500 14px var(--font);padding:28px}.lobby-note{color:var(--ink-2);font:13px var(--font);min-height:18px}.lf{color:var(--ink-2);font:800 11px var(--font);letter-spacing:.6px;text-transform:uppercase;flex-direction:column;gap:6px;display:flex}.lf input,.lf select{border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink);font:500 15px var(--font);text-transform:none;background:#fff;outline:none;padding:12px 14px;transition:border-color .14s,box-shadow .14s}.lf input:focus,.lf select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #ff2e4d24}.lf-actions{justify-content:flex-end;gap:10px;margin-top:4px;display:flex}.host-info{color:var(--ink);font:600 16px var(--font)}.host-info b{color:var(--accent);font-weight:800}.menu-play{font:800 22px var(--font);letter-spacing:1.5px;border-radius:var(--r-sm);background:var(--accent);color:#fff;cursor:pointer;border:none;padding:15px 56px;transition:transform 80ms,box-shadow .16s,background .14s;box-shadow:0 10px 26px #ff2e4d6b}.menu-play:hover{background:var(--accent-press);transform:translateY(-2px);box-shadow:0 14px 34px #ff2e4d8c}.menu-play:active{transform:translateY(0)}.menu-play.alt{box-shadow:none;background:#ffffff24;padding:12px 40px;font-size:18px}.menu-play.alt:hover{box-shadow:none;background:#ffffff42}.menu-sub{color:#ffffffd9;font:14px var(--font)}.menu-buttons{flex-direction:column;align-items:center;gap:14px;display:flex}.menu-join{align-items:center;gap:8px;display:flex}.menu-join input{border-radius:var(--r-sm);font:16px var(--font);border:none;outline:none;width:200px;padding:12px 16px}.customize{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);flex-direction:column;gap:4px;padding:20px 24px;display:flex}.cz-rows{flex-direction:column;gap:12px;display:flex}.cz-row{align-items:center;gap:10px;display:flex}.cz-label{width:70px;color:var(--ink);font:800 12px var(--font);letter-spacing:.6px;text-transform:uppercase}.cz-sw{border:2px solid var(--line);cursor:pointer;border-radius:0;width:30px;height:30px;padding:0;transition:transform 90ms,box-shadow .12s,border-color .12s}.cz-sw:hover{transform:scale(1.14)}.cz-sw.on{border-color:var(--accent);box-shadow:0 0 0 3px #ff2e4d40}.settings{background:var(--card);width:min(92vw,560px);box-shadow:var(--shadow);flex-direction:column;gap:16px;max-height:68vh;padding:22px 24px;display:flex;overflow-y:auto}.set-sec{flex-direction:column;gap:4px;display:flex}.set-h{color:var(--accent);font:800 12px var(--font);letter-spacing:1px;text-transform:uppercase;border-bottom:2px solid var(--line);margin-bottom:4px;padding-bottom:6px}.set-row{align-items:center;gap:14px;padding:6px 0;display:flex}.set-name{color:var(--ink);font:600 14px var(--font);flex:1}.set-key{background:var(--panel);border:1px solid var(--line);min-width:96px;color:var(--ink);font:800 13px var(--font);letter-spacing:.5px;text-align:center;cursor:pointer;padding:8px 12px;transition:background .12s,color .12s}.set-key:hover{background:var(--panel-2)}.set-key.listening{background:var(--accent);color:#fff;border-color:#0000}.set-fixed{color:var(--ink-3);font:500 12px var(--font);padding-top:6px}.set-val{text-align:right;min-width:46px;color:var(--ink-2);font:700 13px var(--font);font-variant-numeric:tabular-nums}.set-actions{justify-content:flex-end;margin-top:4px;display:flex}.settings input[type=range]{accent-color:var(--accent);cursor:pointer;flex:2;height:4px}.set-toggle{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;width:46px;height:26px;padding:0;transition:background .15s;position:relative}.set-toggle span{background:#fff;width:20px;height:20px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0000004d}.set-toggle.on{background:var(--accent)}.set-toggle.on span{transform:translate(20px)}.pick-info{color:#fff;font:700 15px var(--font);letter-spacing:.5px;text-shadow:0 2px 10px #0009}.pos-arena{justify-content:center;gap:60px;display:flex}.pos-team{aspect-ratio:3/4;width:min(44vw,430px);box-shadow:var(--shadow);background-color:#1fa659;border:2px solid #ffffff80;position:relative;overflow:hidden}.pos-team.red{border-top:5px solid var(--red)}.pos-team.blue{border-top:5px solid var(--blue)}.pt-circle{aspect-ratio:2;pointer-events:none;border:2px solid #ffffffd9;border-top:none;border-radius:0 0 999px 999px;width:40%;position:absolute;top:0;left:50%;transform:translate(-50%)}.pt-box{pointer-events:none;border:2px solid #ffffffd9;border-bottom:none;width:62%;height:20%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.pt-goal{pointer-events:none;border:2px solid #fffffff2;border-bottom:none;width:26%;height:6px;position:absolute;bottom:-1px;left:50%;transform:translate(-50%)}.pos-slot{color:#fff;min-width:38px;font:800 11px var(--font);letter-spacing:.5px;text-align:center;cursor:pointer;border:2px solid #ffffffd9;border-radius:0;padding:6px 5px;transition:filter .1s,transform 60ms;position:absolute;transform:translate(-50%,-50%)}.pos-slot.red{background:var(--red)}.pos-slot.blue{background:var(--blue)}.pos-slot:hover{filter:brightness(1.2);transform:translate(-50%,-50%)scale(1.08)}.pos-slot:active{transform:translate(-50%,-50%)scale(.94)}.pos-slot.on{border-color:#fff;box-shadow:0 0 0 3px #ffffffd9,0 3px 10px #0006}.pos-slot.taken{opacity:.55;cursor:not-allowed;filter:none;box-shadow:none;background:#3f434b;border-color:#fff3}.scoreboard{border:1px solid #ffffff1a;border-top:3px solid var(--accent);color:#fff;z-index:11;pointer-events:none;background:#0b0f17e6;align-items:stretch;display:flex;position:fixed;top:30px;left:30px;overflow:hidden}.scoreboard .sc-clock{letter-spacing:1px;color:#fff;background:#0000008c;align-items:center;padding:8px 12px;font:800 14px ui-monospace,SFMono-Regular,monospace;display:flex}.scoreboard .sc-chip{color:#fff;letter-spacing:1px;font:800 13px var(--font);justify-content:center;align-items:center;padding:8px 12px;display:flex}.scoreboard .sc-chip.red{background:var(--red)}.scoreboard .sc-chip.blue{background:var(--blue)}.scoreboard .sc-score{font:800 17px var(--font);letter-spacing:2px;font-variant-numeric:tabular-nums;background:#ffffff0f;justify-content:center;align-items:center;padding:8px 14px;display:flex}.goal-flash{font:900 clamp(56px, 12vw, 140px) var(--font);color:#fff;letter-spacing:3px;text-transform:uppercase;opacity:0;pointer-events:none;z-index:15;transition:opacity .15s,transform .28s cubic-bezier(.2,1.4,.4,1);position:fixed;top:36%;left:50%;transform:translate(-50%,-50%)scale(.6)}.goal-flash.red{color:var(--red)}.goal-flash.blue{color:var(--blue)}.goal-flash.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.ping-hud{z-index:12;color:#cfe0f5;font:700 13px var(--font);background:#0b0f17b3;border:1px solid #ffffff14;border-radius:0;padding:6px 12px;display:none;position:fixed;top:55px;right:14px}.ping-hud.show{display:block}.ping-hud.good{color:#8ff0a8}.ping-hud.mid{color:#ffe08a}.ping-hud.bad{color:#ff9a8a}.room-hud{color:#fff;font:700 14px var(--font);letter-spacing:.5px;z-index:12;-webkit-user-select:all;user-select:all;background:#0b0f17b3;border:1px solid #ffffff14;border-radius:0;padding:8px 14px;display:none;position:fixed;top:14px;right:14px}.room-hud.show{display:block}.room-code{color:#fff;text-align:center;font:15px var(--font);letter-spacing:2px}.room-code b{letter-spacing:3px;color:var(--accent-2);-webkit-user-select:all;user-select:all;margin-top:8px;font-size:32px;display:inline-block}.notice{border:1px solid #ffffff24;border-left:4px solid var(--accent);color:#fff;font:800 19px var(--font);letter-spacing:1px;text-align:center;z-index:16;background:#0b0f17e6;border-radius:10px;padding:14px 28px;display:none;position:fixed;top:22%;left:50%;transform:translate(-50%)}.notice.show{display:block}.hint{color:#fff;font:13px var(--font);pointer-events:none;z-index:10;background:#0b0f1799;border-radius:0;padding:8px 16px;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.power{opacity:0;pointer-events:none;z-index:10;background:#0b0f1780;border:1px solid #ffffff1a;border-radius:0;width:360px;height:14px;transition:opacity 80ms;position:fixed;bottom:50px;left:50%;overflow:hidden;transform:translate(-50%)}.power.show{opacity:1}.power-fill{background:linear-gradient(90deg,#7cff6b,#ffd24a,#ff5a3c);width:0%;height:100%}.power.lofted .power-fill{background:linear-gradient(90deg,#6bd0ff,#4aa3ff,#2f6bff)}.stamina{z-index:10;pointer-events:none;background:#0b0f1780;width:360px;height:7px;position:fixed;bottom:24px;left:50%;overflow:hidden;transform:translate(-50%)}.stamina-fill{background:linear-gradient(90deg,#e0b400,#ffe14d);width:100%;height:100%;transition:background .25s}.stamina-fill.low{background:linear-gradient(90deg,#ff9a3c,#ff5a3c)}@media (width<=560px){.menu-cards{grid-template-columns:1fr 1fr}.pos-arena{gap:22px}.lobby{padding:16px}.menu-play{padding:14px 40px;font-size:19px}}