.roster-avatar,.mini-avatar{flex:none;overflow:hidden}.roster-avatar img,.mini-avatar img{object-fit:cover;object-position:center 18%;width:100%;height:100%;display:block}.sheet-avatar{background-position:10% 3%;background-repeat:no-repeat;background-size:600% 400%;width:100%;height:100%;display:block}.character-picker{background:#142638;border:1px solid #ffffff20;border-radius:12px;grid-area:2/1/3/3;min-width:0;margin-top:14px;padding:12px}.character-picker-heading{color:#e5f5f7;font:700 10px var(--mono);letter-spacing:.08em;justify-content:space-between;gap:10px;margin-bottom:10px;display:flex}.character-picker-heading small{color:#91a5b2;letter-spacing:0;font-size:9px;font-weight:400}.character-options{scrollbar-width:thin;scroll-snap-type:x proximity;gap:7px;padding-bottom:4px;display:flex;overflow-x:auto}.character-option{color:#dcecf0;cursor:pointer;scroll-snap-align:start;background:#20354a;border:1px solid #ffffff25;border-radius:10px;flex-direction:column;flex:0 0 68px;align-items:center;gap:5px;padding:6px 4px;display:flex}.character-option.selected{border-color:var(--mint);background:#214c52;box-shadow:inset 0 0 0 2px #5ce1bd35}.character-option-avatar{border-radius:9px;flex:none;place-items:center;width:52px;height:52px;font-size:28px;display:grid;overflow:hidden}.character-option-avatar img{object-fit:cover;object-position:center 18%;width:100%;height:100%}.character-option strong{font-size:9px;line-height:1.1}@media (max-width:760px){.character-picker{grid-area:auto;margin-top:0;padding:9px}.character-picker-heading{font-size:9px}.character-picker-heading small{font-size:8px}.character-option{flex-basis:60px}.character-option-avatar{width:46px;height:46px}}.character-option small{color:#8fe9d0;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:9px;line-height:1.15;display:block;overflow:hidden}.skill-explainer{color:#b8cad5;margin:8px 0 0;font-size:10px;line-height:1.35}.skill-explainer strong{color:#8fe9d0}.skill-explainer span{color:#8197a7;margin-left:6px}.skill-chip{white-space:nowrap;align-items:center;gap:5px;font-weight:700;display:inline-flex}.action-controls .skill-control{overflow-wrap:anywhere;background:#693a7ce8;border-color:#dc9ff0;padding:3px;line-height:1.05;box-shadow:0 0 15px #b666dc55}.action-controls .skill-control:disabled{box-shadow:none;background:#2b2940bc;border-color:#746b87}:root{color:#eef7fa;font-synthesis:none;text-rendering:optimizelegibility;font-optical-sizing:auto;--mint:#5ce1bd;--mint-dark:#2ccda6;--ink:#101b2a;--panel:#182638;--soft:#9aabba;--line:#304054;--blue:#4d9eff;--red:#ff5c70;--gold:#ffbd59;--sans:"DM Sans",system-ui,sans-serif;--mono:"DM Mono",monospace;--display:"Space Grotesk","DM Sans",sans-serif;background:#101b2a;font-family:DM Sans,system-ui,sans-serif;font-weight:400}*{box-sizing:border-box}html,body,#root{overscroll-behavior:none;width:100%;min-width:320px;height:100%;min-height:100%;margin:0}body{background:#101b2a}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.app-shell{isolation:isolate;min-height:100dvh;padding:0 max(24px,env(safe-area-inset-left));background:radial-gradient(at 48% 27%,#1e3546 0,#142536 34%,#101b2a 76%);position:relative;overflow:hidden}.home-shell{max-width:1440px;padding-bottom:max(24px,env(safe-area-inset-bottom));flex-direction:column;margin:0 auto;display:flex}.ambient{z-index:-1;filter:blur(1px);pointer-events:none;border-radius:50%;position:absolute}.ambient-one{background:radial-gradient(circle,#1ca88722,#0000 70%);width:620px;height:620px;top:30px;left:24%}.ambient-two{background:radial-gradient(circle,#4d9eff12,#0000 70%);width:500px;height:500px;top:360px;right:-100px}.home-topbar,.game-topbar{border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;height:82px;display:flex}.brand{color:#f3fbfd;font-family:var(--display);letter-spacing:-1px;align-items:center;gap:10px;font-size:22px;font-weight:700;text-decoration:none;display:inline-flex}.brand>span:last-child>span{color:var(--mint)}.brand-ball{background:var(--mint);color:#15302f;border-radius:12px;place-items:center;width:34px;height:34px;font-size:19px;font-weight:900;line-height:1;display:grid;box-shadow:0 4px 20px #5ce1bd35}.brand-small{font-size:19px}.brand-small .brand-ball{border-radius:10px;width:30px;height:30px}.online-badge,.room-pill,.connection-pill{color:#afc2cf;font:500 10px var(--mono);letter-spacing:.06em;background:#ffffff08;border:1px solid #ffffff19;border-radius:99px;align-items:center;gap:9px;padding:8px 13px;display:inline-flex}.live-dot,.pulse-dot{background:#5ce1bd;border-radius:50%;width:7px;height:7px;animation:2s infinite live-pulse;box-shadow:0 0 0 4px #5ce1bd19}@keyframes live-pulse{50%{box-shadow:0 0 0 7px #5ce1bd0a}}.help-button,.mobile-help{color:#c9d8df;background:0 0;border:1px solid #ffffff20;border-radius:99px;padding:9px 14px;font-size:12px}.help-button{align-items:center;gap:8px;display:flex}.help-button:first-letter{color:var(--mint)}.hero{grid-template-columns:1.08fr .92fr;align-items:center;gap:30px;width:100%;max-width:1040px;min-height:360px;margin:0 auto;padding:40px 0 24px;display:grid}.hero-copy{z-index:2;padding-left:22px;position:relative}.hero-kicker,.eyebrow{color:var(--mint);font:500 10px var(--mono);letter-spacing:.12em;align-items:center;gap:8px;display:flex}.hero-kicker span{font-size:16px}.hero h1{font:700 clamp(42px,6vw,70px)/.98 var(--display);letter-spacing:-4.5px;color:#f4fbfc;margin:18px 0}.hero h1 em{color:var(--mint);font-style:normal}.hero-copy>p{color:#a6b7c5;margin:18px 0 22px;font-size:15px}.feature-pills{flex-wrap:wrap;gap:8px;display:flex}.feature-pills span{color:#c1d0d8;background:#ffffff07;border:1px solid #ffffff19;border-radius:99px;padding:8px 11px;font-size:10px}.hero-scene{isolation:isolate;height:300px;position:relative}.stadium-glow{z-index:-2;background:radial-gradient(#246f5a5c,#0000 68%);position:absolute;inset:15% 3% 9%}.hero-scene:before{content:"";background:linear-gradient(90deg,#0000,#89d0aa7a,#0000);height:2px;position:absolute;bottom:48px;left:3%;right:3%}.hero-shadow{filter:blur(14px);z-index:-1;background:#06110f8a;border-radius:50%;height:30px;position:absolute;bottom:38px;left:15%;right:11%}.hero-player{filter:drop-shadow(0 13px 12px #06111355);width:112px;height:191px;animation:2.2s ease-in-out infinite bob;position:absolute;bottom:55px}.hero-player-blue{left:22%;transform:rotate(-6deg)}.hero-player-red{animation-delay:.45s;right:18%;transform:rotate(7deg)}@keyframes bob{50%{translate:0 -6px}}.hero-head{z-index:2;border:4px solid #f6fbf7;border-radius:47% 50% 49% 48%;place-items:center;width:111px;height:111px;font-size:60px;display:grid;position:absolute;top:0;left:50%;translate:-50%;box-shadow:inset -10px -12px #18233312,0 5px 18px #09121e4a}.head-one{background:#ffcf62;rotate:-5deg}.head-two{background:#d38bee;rotate:4deg}.hero-body{width:75px;height:78px;font:700 14px var(--display);color:#fff;border:3px solid #f6fbf7;border-radius:24px 24px 14px 14px;place-items:center;display:grid;position:absolute;top:99px;left:50%;translate:-50%}.body-blue{background:linear-gradient(140deg,#67b7ff,#387bd8)}.body-red{background:linear-gradient(140deg,#ff8492,#e94764)}.hero-leg{background:#20334a;border-radius:10px;width:22px;height:51px;position:absolute;top:162px}.leg-a{left:34px;rotate:5deg}.leg-b{right:31px;rotate:-4deg}.hero-ball{z-index:3;filter:drop-shadow(0 7px 5px #09121e77);font-size:47px;animation:2.4s ease-in-out infinite ball-float;position:absolute;top:40px;left:47%}@keyframes ball-float{50%{transform:translate(18px,-13px)rotate(26deg)}}.hero-spark{color:var(--gold);font-size:24px;animation:2.4s ease-in-out infinite sparkle;position:absolute}.spark-one{font-size:27px;top:37px;right:26%}.spark-two{color:#7dc9ff;animation-delay:.4s;bottom:89px;left:8%}.spark-three{color:#df8df5;animation-delay:.9s;top:114px;right:8%}@keyframes sparkle{50%{opacity:.5;transform:scale(.5)rotate(40deg)}}.play-card{z-index:1;background:linear-gradient(145deg,#1d2d40ed,#172638f2);border:1px solid #ffffff1b;border-radius:20px;width:min(100%,432px);margin:2px auto 0;padding:25px 27px 20px;position:relative;box-shadow:0 22px 70px #050c1585,inset 0 1px #ffffff09}.play-card-top{justify-content:space-between;align-items:center;margin:0 0 20px;display:flex}.play-card-top>div{align-items:center;gap:10px;display:flex}.step-number{color:var(--mint);width:28px;height:28px;font:500 10px var(--mono);background:#5ce1bd18;border-radius:8px;place-items:center;display:grid}.play-card-top label{font:600 10px var(--mono);color:#dce7ec;letter-spacing:.07em}.play-card-top small{color:#8094a5;font-size:10px}.input-label{color:#b9c8d0;margin-bottom:8px;font-size:11px;display:block}.name-input-wrap,.code-input-wrap{background:#111e2c;border:1px solid #ffffff20;border-radius:10px;align-items:center;height:49px;padding:0 12px;transition:border-color .18s;display:flex}.name-input-wrap:focus-within,.code-input-wrap:focus-within{border-color:#5ce1bd8a}.input-emoji{margin-right:10px;font-size:17px}.name-input-wrap input,.code-input-wrap input{color:#f4fbfc;background:0 0;border:0;outline:0;flex:1;min-width:0;font-size:13px}.name-input-wrap input::placeholder,.code-input-wrap input::placeholder{color:#617487}.char-count{font:10px var(--mono);color:#71879a}.primary-button{background:var(--mint);color:#10302e;letter-spacing:.04em;border:0;border-radius:10px;font-weight:900;transition:transform .16s,filter .16s,box-shadow .16s;box-shadow:0 5px 20px #5ce1bd20}.primary-button:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 8px 24px #5ce1bd30}.create-button{justify-content:space-between;align-items:center;width:100%;height:49px;margin-top:13px;padding:0 15px;font-size:11px;display:flex}.button-arrow{font-size:20px;line-height:1}.or-divider{color:#738899;font:9px var(--mono);letter-spacing:.07em;align-items:center;gap:10px;margin:19px 0;display:flex}.or-divider span{background:#ffffff18;flex:1;height:1px}.join-row{gap:9px;display:flex}.code-input-wrap{flex:1}.code-input-wrap>span{color:#6e8698;margin:0 10px 2px 1px;font-size:20px}.code-input-wrap input{text-transform:uppercase;letter-spacing:.18em;font:500 12px var(--mono)}.join-button{letter-spacing:.04em;background:#ffffff0b;border:1px solid #ffffff23;border-radius:10px;height:49px;padding:0 17px;font-size:10px;font-weight:800;transition:all .16s}.join-button span{color:var(--mint);margin-left:10px;font-size:16px}.join-button:hover{background:#5ce1bd0d;border-color:#5ce1bd70}.privacy-note{color:#8fa1af;justify-content:center;align-items:center;gap:7px;margin:15px 0 0;font-size:10px;display:flex}.privacy-note span{font-size:11px}.home-error{color:#ffb1b9;background:#ff5c7014;border:1px solid #ff6d7a59;border-radius:9px;margin-top:12px;padding:10px 32px 10px 12px;font-size:11px;position:relative}.home-error button{color:inherit;background:0 0;border:0;font-size:18px;position:absolute;top:5px;right:8px}.home-bottom{justify-content:space-between;align-items:center;width:min(100%,1040px);margin:auto auto 0;padding:20px 16px 2px;display:flex}.mode-chips{gap:8px;display:flex}.mode-chips span{font:10px var(--mono);color:#9aabba;background:#ffffff08;border:1px solid #ffffff15;border-radius:99px;padding:8px 12px}.mode-chips .chaos-chip{color:#ffd188;background:#ffbd5910;border-color:#ffbd593d}.credits{color:#8193a3;font-size:11px}.credits span{color:#ff7185}.home-footer,.site-footer{text-align:center;color:#63788b;padding:20px 0 0;font-size:10px}.home-footer span,.site-footer span{color:#5ce1bd;padding:0 6px}.mobile-help{display:none}.toast{z-index:20;top:max(16px,env(safe-area-inset-top));color:#d9fff5;background:#132e35f2;border:1px solid #5ce1bd50;border-radius:10px;padding:10px 16px;font-size:12px;animation:.2s ease-out toast-in;position:fixed;left:50%;translate:-50%;box-shadow:0 10px 30px #050b14aa}@keyframes toast-in{0%{opacity:0;translate:-50% -8px}to{opacity:1;translate:-50%}}.error-toast{color:#ffd5d9;background:#361c2af5;border-color:#ff5c7060;align-items:center;gap:14px;display:flex}.error-toast button{color:inherit;background:0 0;border:0;font-size:20px}.game-shell{min-height:100dvh;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));background:radial-gradient(#1c3340 0,#132434 50%,#101b2a 100%);flex-direction:column;display:flex}.game-topbar{flex:none;height:60px}.room-pill{color:#91a9b7;padding:7px 12px}.room-pill strong{font:500 12px var(--mono);color:#f5fbfb;letter-spacing:.16em}.top-actions{align-items:center;gap:11px;display:flex}.connection-pill{padding:7px 10px;font-size:9px}.connection-pill.reconnecting{color:#ffcf7a;border-color:#ffcf7a4a}.icon-button{background:#ffffff08;border:1px solid #ffffff19;border-radius:9px;width:35px;height:33px;font-size:14px}.text-button,.subtle-button{color:#9eb0bc;background:0 0;border:0;padding:9px 11px;font-size:11px}.text-button:hover,.subtle-button:hover{color:#fff}.site-footer{padding-bottom:max(12px,env(safe-area-inset-bottom));flex:none}.lobby-layout{flex-direction:column;flex:1;justify-content:center;width:min(100%,1010px);margin:auto;padding:20px 0 12px;display:flex}.lobby-heading{justify-content:space-between;align-items:center;margin-bottom:17px;display:flex}.eyebrow{margin:0 0 7px;font-size:9px}.lobby-heading h1{font:700 30px var(--display);letter-spacing:-1px;margin:0}.subheading{color:#91a5b4;margin:4px 0 0;font-size:12px}.share-code{background:#5ce1bd0c;border:1px solid #5ce1bd4b;border-radius:12px;flex-direction:column;align-items:center;gap:2px;min-width:120px;padding:9px 15px;display:flex}.share-code span,.share-code small{color:#92a9b6;font:9px var(--mono);letter-spacing:.06em}.share-code strong{color:var(--mint);font:700 20px var(--mono);letter-spacing:.14em}.share-code small{color:#89d9c5;font-size:8px}.lobby-main{grid-template-columns:minmax(0,1fr) 220px;gap:0 15px;display:grid}.teams-grid{grid-column:1/2;grid-template-columns:1fr 42px 1fr;align-items:stretch;gap:12px;display:grid;position:relative}.team-panel{background:linear-gradient(145deg,#1b2c3f,#172638);border:1px solid #ffffff19;border-radius:15px;min-width:0;overflow:hidden}.team-panel-head{border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;height:43px;padding:0 14px;display:flex}.team-name{font:700 10px var(--mono);letter-spacing:.08em;align-items:center;gap:9px;display:flex}.team-count{font:600 12px var(--mono);color:#d6e4e9}.team-count i{color:#738a9a;font-size:10px;font-style:normal}.team-dot{background:var(--blue);border-radius:50%;width:8px;height:8px;display:inline-block;box-shadow:0 0 10px #4d9eff66}.red-score .team-dot,.red-panel .team-dot{background:var(--red);box-shadow:0 0 10px #ff5c7066}.roster{min-height:108px;padding:5px 8px}.empty-slot{color:#71899a;place-items:center;min-height:96px;font-size:10px;display:grid}.player-row{border-radius:9px;align-items:center;gap:9px;min-height:51px;padding:6px 8px;display:flex;position:relative}.player-row.is-me{background:#ffffff08}.roster-avatar{border:1px solid #ffffff35;border-radius:11px;flex:none;place-items:center;width:35px;height:35px;font-size:20px;display:grid}.player-info{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.player-info strong{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:5px;font-size:11px;display:flex;overflow:hidden}.player-info>span{color:#8298a8;white-space:nowrap;text-overflow:ellipsis;font-size:9px;overflow:hidden}.you-tag,.owner-tag{font:500 7px var(--mono);color:#162e2c;background:#5ce1bd;border-radius:4px;padding:3px 4px}.owner-tag{color:#44300e;background:#ffbd59}.player-row select{color:#cddbe2;background:#122031;border:1px solid #ffffff18;border-radius:6px;width:88px;height:27px;padding:0 4px;font-size:9px}.ready-label{font:500 7px var(--mono);color:#738697;white-space:nowrap}.ready-label.ready{color:var(--mint)}.team-switch{color:#9cafbb;font:500 8px var(--mono);letter-spacing:.05em;background:#ffffff06;border:1px solid #ffffff15;border-radius:7px;margin:0 10px 10px;padding:7px}.team-switch:hover:not(:disabled){color:#fff;border-color:#ffffff3a}.versus{color:#8397a6;font:700 12px var(--display);place-items:center;font-style:italic;display:grid}.lobby-bottom{flex-direction:column;grid-area:1/2/2/3;justify-content:flex-end;gap:11px;padding:6px 0;display:flex}.my-ready{flex-direction:column;gap:7px;display:flex}.ready-status{color:#9dafbd;align-items:center;gap:7px;font-size:10px;display:flex}.ready-dot{background:#718295;border-radius:50%;width:8px;height:8px}.ready-dot.is-ready{background:var(--mint);box-shadow:0 0 9px #5ce1bd88}.ready-button,.start-button{height:42px;font-size:9px}.ready-button.is-ready{color:#a8ffe7;background:#244c48;box-shadow:inset 0 0 0 1px #5ce1bd5a}.start-button{justify-content:center;align-items:center;gap:12px;display:flex}.start-button span{font-size:18px}.waiting-owner{color:#8fa2b1;border:1px solid #ffffff16;border-radius:9px;justify-content:center;align-items:center;gap:8px;height:42px;font-size:9px;display:flex}.waiting-owner .pulse-dot{width:6px;height:6px}.config-panel{background:#172638;border:1px solid #ffffff15;border-radius:12px;grid-column:1/3;margin-top:14px}.config-panel summary{cursor:pointer;align-items:center;gap:11px;height:39px;padding:0 13px;list-style:none;display:flex}.config-panel summary::-webkit-details-marker{display:none}.config-panel summary>span:first-child{font:600 9px var(--mono);letter-spacing:.06em;color:#d4e1e6}.config-panel summary small{color:#788e9c;font-size:9px}.settings-chevron{color:#86a0ae;margin-left:auto;font-size:17px}.config-panel[open] .settings-chevron{transform:rotate(180deg)}.config-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:0 12px 9px;display:grid}.config-grid label{color:#91a3af;flex-direction:column;gap:5px;font-size:9px;display:flex}.config-grid select{color:#dce8ec;background:#101d2b;border:1px solid #ffffff19;border-radius:6px;min-width:0;height:31px;padding:0 8px;font-size:10px}.toggle-row{color:#91a3af;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;gap:6px;min-width:0;padding:0 1px;font-size:9px;display:flex}.toggle-row i{background:#344457;border-radius:99px;flex:none;width:30px;height:17px;transition:all .2s;position:relative}.toggle-row i b{background:#b8c4cc;border-radius:50%;width:11px;height:11px;transition:all .2s;position:absolute;top:3px;left:3px}.toggle-row.checked i{background:#24836e}.toggle-row.checked i b{background:#c5ffed;translate:13px}.config-note{color:#718697;padding:0 12px 10px;font-size:8px;display:block}.how-to-play{color:#879aa8;grid-column:1/3;align-items:center;gap:7px;padding:13px 0 0;font-size:9px;display:flex}.how-to-play span{color:#d5e3e9;font:500 9px var(--mono);background:#ffffff08;border:1px solid #ffffff26;border-radius:4px;padding:4px 6px}.how-to-play small{color:#718697;margin-left:auto}.match-layout{flex-direction:column;flex:1;justify-content:center;width:min(100%,1220px);min-height:0;margin:auto;padding:12px 0 5px;display:flex}.scorebar{background:linear-gradient(90deg,#172a3b,#1b2c3b,#172a3b);border:1px solid #ffffff1a;border-radius:12px;grid-template-columns:1fr 150px 1fr;align-items:center;width:min(100%,900px);height:55px;margin:0 auto 10px;display:grid;box-shadow:0 8px 26px #050d1540}.score-team{font:600 10px var(--mono);letter-spacing:.06em;align-items:center;gap:10px;padding:0 17px;display:flex}.score-team b{font:700 22px var(--display);color:#f3fbff}.score-team small{color:#8195a4;font:9px var(--sans);letter-spacing:0;margin-left:auto}.red-score{justify-content:flex-end}.red-score small{margin:0 auto 0 0}.score-clock{border-left:1px solid #ffffff13;border-right:1px solid #ffffff13;flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.score-clock b{font:600 19px var(--mono);color:#fff}.score-clock small,.overtime{color:#8ca0ad;font:8px var(--mono);letter-spacing:.08em;margin-top:1px}.overtime{color:#ffd17a}.arena-frame{aspect-ratio:16/9;background:#17324a;border:1px solid #ffffff2a;border-radius:14px;width:min(100%,1220px);max-height:min(67vh,680px);margin:0 auto;position:relative;overflow:hidden;box-shadow:0 16px 60px #040a1170}.game-canvas,.game-canvas canvas{touch-action:none;width:100%;height:100%;display:block}.arena-label{color:#cee0e5;font:8px var(--mono);letter-spacing:.08em;pointer-events:none;background:#0d1c2a8f;border:1px solid #ffffff30;border-radius:99px;padding:6px 9px;position:absolute;top:12px}.left-label{left:13px}.right-label{color:#aef5db;right:13px}.center-callout{color:#17302f;text-shadow:0 1px #fff6;flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;top:50%;left:50%;translate:-50% -50%}.center-callout span{font:700 9px var(--mono);letter-spacing:.2em;color:#e7fff8;text-shadow:0 2px 8px #000}.center-callout strong{width:90px;height:90px;font:700 43px var(--display);background:#5ce1bd;border-radius:50%;place-items:center;animation:.45s ease-out count-pop;display:grid;box-shadow:0 0 50px #5ce1bd7a}@keyframes count-pop{0%{opacity:.3;scale:.55}to{opacity:1;scale:1}}.goal-callout{color:#382811;background:#ffe083ef;border-radius:99px;align-items:center;gap:10px;padding:9px 17px;animation:.35s cubic-bezier(.2,1.7,.5,1) goal-pop;display:flex;position:absolute;top:23%;left:50%;translate:-50%;box-shadow:0 6px 26px #03091350}.goal-callout span{font-size:22px}.goal-callout strong{font:900 20px var(--display);letter-spacing:.05em}.goal-callout small{font-size:10px}@keyframes goal-pop{0%{opacity:.2;scale:.6}to{opacity:1;scale:1}}.result-card{z-index:4;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0c1828b8;flex-direction:column;justify-content:center;align-items:center;animation:.3s fade-in;display:flex;position:absolute;inset:0}.result-emoji{font-size:34px}.result-card p{color:var(--mint);font:700 12px var(--mono);letter-spacing:.16em;margin:6px 0}.result-score{font:700 42px var(--display);color:#f7fcfd;align-items:center;gap:13px;display:flex}.result-score i{color:#91a5b0;font-size:25px;font-style:normal}.result-card>small{color:#a8bac5;font-size:11px}.rematch-button{height:38px;margin:15px 0 2px;padding:0 20px;font-size:9px}.rematch-button em{color:#255750;margin-left:7px;font-style:normal}.subtle-button{font-size:9px}.camp-warning,.freeze-banner{color:#ffdd9c;font:600 11px var(--mono);letter-spacing:.04em;background:#30291de8;border:1px solid #ffbd5977;border-radius:10px;padding:11px 16px;animation:.7s infinite alternate warning-pulse;position:absolute;top:48%;left:50%;translate:-50% -50%}.camp-warning b{margin-left:8px;font-size:20px}.freeze-banner{color:#c9f9ff;background:#193140ed;border-color:#a7f2ff88;font-size:15px;top:34%}@keyframes warning-pulse{to{scale:1.04;box-shadow:0 0 26px #ffbd5944}}.match-footer{justify-content:space-between;align-items:center;width:min(100%,1220px);margin:9px auto 0;display:flex}.local-player{align-items:center;gap:8px;display:flex}.mini-avatar{border:1px solid #ffffff45;border-radius:11px;place-items:center;width:34px;height:34px;font-size:19px;display:grid}.local-player>span:nth-child(2){flex-direction:column;gap:1px;display:flex}.local-player strong{font-size:10px}.local-player small{color:#8fa2af;font-size:8px}.skill-chip{color:var(--mint);font:8px var(--mono);background:#5ce1bd0d;border:1px solid #5ce1bd43;border-radius:6px;margin-left:5px;padding:5px 7px}.skill-chip i{margin-left:3px;font-style:normal}.match-hint{color:#8095a4;font-size:9px}.match-hint kbd{color:#e2ecef;font:9px var(--mono);border:1px solid #ffffff27;border-radius:4px;padding:3px 5px}.ping{color:#5ce1bd;font-size:8px}.ping span{color:#91a5b2;font:8px var(--mono);letter-spacing:.05em;margin-left:4px}.touch-controls{padding:0 max(18px,env(safe-area-inset-left));z-index:6;pointer-events:none;opacity:0;justify-content:space-between;align-items:flex-end;transition:opacity .2s;display:flex;position:absolute;bottom:50px;left:0;right:0}.touch-controls button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;color:#eaf8fa;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#101d2bc9;border:1px solid #fff5;box-shadow:0 4px 14px #03080e6a}.move-controls,.action-controls{align-items:flex-end;gap:9px;display:flex}.move-controls button{border-radius:50%;width:57px;height:57px;font-size:20px}.action-controls button{border-radius:50%;width:58px;height:58px;font-size:8px;font-weight:800}.action-controls .emote-control{width:42px;height:42px;font-size:18px}.action-controls .jump-control{background:#28584fdd;border-color:#5ce1bd77}.action-controls .shoot-control{background:#34445bdc;border-color:#8cb0d377}.action-controls .skill-control{background:#573e64dd;border-color:#d783ee77;width:51px;height:51px}.rotate-hint{z-index:12;text-align:center;color:#ffda94;background:#121f2aed;padding:7px;font-size:10px;display:none;position:fixed;inset:0 0 auto}.how-to-play kbd{font:inherit}@media (hover:none),(pointer:coarse){.touch-controls{opacity:1}.arena-frame{max-height:68vh}}@media (max-width:760px){.home-topbar{height:65px}.hero{text-align:center;grid-template-columns:1fr;gap:0;min-height:auto;padding:25px 0 10px}.hero-copy{padding:0}.hero-kicker{justify-content:center}.hero h1{letter-spacing:-2.8px;margin:13px 0;font-size:48px}.hero-copy>p{margin:12px 0 14px;font-size:12px}.feature-pills{justify-content:center}.feature-pills span{padding:7px 9px;font-size:9px}.hero-scene{transform-origin:top;width:min(100%,450px);height:200px;margin:-3px auto 0;scale:.88}.play-card{width:min(100%,410px);margin:0 auto 14px;padding:20px 20px 17px}.home-bottom{justify-content:center;padding:10px 0 0}.credits{display:none}.mode-chips span{padding:7px 10px}.home-footer{padding-top:13px}.help-button span{display:none}.help-button{justify-content:center;width:33px;height:33px;padding:0}.lobby-layout{justify-content:flex-start;padding:17px 0}.lobby-heading h1{font-size:25px}.subheading{font-size:10px}.lobby-main{grid-template-columns:1fr;gap:12px}.teams-grid{grid-column:auto;grid-template-columns:1fr 27px 1fr;gap:7px}.team-panel-head{padding:0 9px}.team-name{gap:6px;font-size:8px}.team-count{font-size:10px}.roster{padding:4px}.player-row{gap:5px;min-height:43px;padding:5px 3px}.roster-avatar{border-radius:9px;width:28px;height:28px;font-size:16px}.player-info strong{font-size:9px}.player-info>span{font-size:7px}.player-row select{opacity:.01;width:54px;height:28px;position:absolute;right:2px}.ready-label{font-size:6px}.team-switch{margin:0 6px 7px;padding:6px 2px;font-size:7px}.empty-slot{min-height:85px;font-size:8px}.versus{font-size:9px}.lobby-bottom{grid-area:auto;grid-template-columns:1fr 1fr;align-items:end;gap:12px;padding:0;display:grid}.my-ready{gap:5px}.ready-button,.start-button{height:39px}.config-panel{grid-column:auto;margin-top:2px}.config-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.how-to-play{flex-wrap:wrap;gap:5px;font-size:8px}.how-to-play small{display:none}.site-footer{padding-top:9px;font-size:8px}.game-shell{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.game-topbar{height:48px}.brand-small{font-size:16px}.brand-small .brand-ball{width:25px;height:25px;font-size:15px}.room-pill{gap:6px;padding:6px 9px;font-size:8px}.room-pill strong{font-size:10px}.top-actions{gap:5px}.connection-pill{justify-content:center;width:24px;height:24px;padding:7px;font-size:0}.connection-pill:before{content:"●";font-size:9px}.connection-pill.reconnecting:before{content:"↻";font-size:13px}.text-button{padding:7px;font-size:10px}.scorebar{border-radius:9px;grid-template-columns:1fr 88px 1fr;height:43px;margin-bottom:7px}.score-team{gap:6px;padding:0 8px;font-size:8px}.score-team b{font-size:17px}.score-team small{font-size:7px}.score-clock b{font-size:15px}.score-clock small,.overtime{font-size:6px}.arena-frame{aspect-ratio:16/9;border-radius:9px;width:100%;max-height:none}.arena-label{padding:4px 6px;font-size:6px;top:5px}.left-label{left:5px}.right-label{right:5px}.match-layout{justify-content:flex-start;padding:6px 0 0}.match-footer{margin-top:6px}.mini-avatar{border-radius:9px;width:28px;height:28px;font-size:16px}.local-player{gap:5px}.local-player strong{font-size:8px}.local-player small{font-size:7px}.skill-chip{margin-left:1px;padding:4px;font-size:7px}.match-hint{display:none}.ping{font-size:7px}.touch-controls{padding:0 12px;bottom:50px}.move-controls,.action-controls{gap:6px}.move-controls button{width:45px;height:45px;font-size:16px}.action-controls button{width:45px;height:45px;font-size:7px}.action-controls .emote-control{width:34px;height:34px;font-size:15px}.action-controls .skill-control{width:41px;height:41px}.center-callout strong{width:60px;height:60px;font-size:30px}.goal-callout{padding:6px 11px;top:15%}.goal-callout strong{font-size:15px}.goal-callout span{font-size:17px}.result-card p{font-size:10px}.result-emoji{font-size:25px}.result-score{font-size:29px}.rematch-button{height:32px;margin-top:8px;font-size:8px}.result-card>small{font-size:9px}.result-card .subtle-button{padding:5px;font-size:8px}}@media (max-width:480px){.online-badge{padding:7px 9px;font-size:8px}.hero-scene{height:171px;scale:.76}.play-card{padding:17px 15px 15px}.play-card-top{margin-bottom:14px}.play-card-top small{font-size:8px}.input-label{font-size:10px}.name-input-wrap,.code-input-wrap,.create-button,.join-button{height:44px}.join-button{padding:0 12px;font-size:9px}.privacy-note{font-size:8px}.mode-chips span{padding:6px 8px;font-size:8px}.home-footer{font-size:8px}.mobile-help{right:10px;bottom:max(8px,env(safe-area-inset-bottom));z-index:3;padding:6px 9px;font-size:9px;display:block;position:fixed}.home-bottom{margin-bottom:22px}.lobby-heading{margin-bottom:12px}.lobby-heading h1{font-size:22px}.share-code{min-width:92px;padding:7px 9px}.share-code strong{font-size:16px}.share-code span,.share-code small{font-size:7px}.lobby-main{gap:9px}.team-panel-head{height:36px}.player-row{min-height:39px}.you-tag,.owner-tag{padding:2px 3px;font-size:6px}.ready-status{font-size:8px}.ready-button,.start-button{height:35px;font-size:8px}.config-panel summary{height:34px}.config-grid{gap:7px}.config-grid label{font-size:8px}.config-grid select{height:28px;font-size:9px}.toggle-row{font-size:8px}.config-note{font-size:7px}.how-to-play{padding-top:8px}.how-to-play span{padding:3px 4px;font-size:7px}.score-team{font-size:7px}.score-team small{display:none}.scorebar{grid-template-columns:1fr 73px 1fr}.touch-controls{bottom:43px}.move-controls button,.action-controls button{width:40px;height:40px}.action-controls .emote-control{width:30px;height:30px}.action-controls .skill-control{width:37px;height:37px}.game-topbar{height:43px}.site-footer{padding-top:5px}}@media (orientation:portrait) and (max-width:760px){.rotate-hint{display:block}.game-shell .game-topbar{margin-top:27px}.match-layout{justify-content:flex-start}.arena-frame{max-height:48vh}.touch-controls{bottom:54px}.lobby-layout{padding-top:42px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.arena-frame{position:relative}.reconnect-overlay{z-index:9;color:#f5fbff;font:600 14px var(--display);text-align:center;background:#101b2ae8;place-content:center;justify-items:center;gap:12px;display:grid;position:absolute;inset:0}.reconnect-overlay .pulse-dot{background:var(--mint);border-radius:50%;width:12px;height:12px;animation:1.2s infinite live-pulse;box-shadow:0 0 0 8px #5ce1bd20}.canvas-loading{color:#dce9ed;font:600 14px var(--display);place-items:center;display:grid;position:absolute;inset:0}.touch-controls{display:none}@media (hover:none),(pointer:coarse),(max-width:760px){.touch-controls{width:100%;padding:10px 2px max(4px,env(safe-area-inset-bottom));opacity:1;pointer-events:auto;border-top:1px solid #ffffff24;align-items:center;gap:8px;margin:10px auto 0;display:flex;position:relative;bottom:auto;left:auto;right:auto}.touch-controls button{min-width:48px;min-height:48px;transition:transform .1s,filter .1s}.touch-controls button:active{filter:brightness(1.35);transform:scale(.92)}.move-controls,.action-controls{gap:6px}.move-controls button,.action-controls button,.action-controls .skill-control{width:clamp(48px,13vw,58px);height:clamp(48px,13vw,58px)}.action-controls .emote-control{width:48px;height:48px}.action-controls button{font-size:9px}}@media (max-width:480px){.touch-controls{padding-left:0;padding-right:0;bottom:auto}.action-controls .emote-control{display:none}}@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){.game-shell{height:100dvh;min-height:0}.game-shell .game-topbar{flex:0 0 44px;height:44px}.match-layout{flex:1;justify-content:flex-start;margin:0 auto;padding:2px 0 0;position:relative}.scorebar{height:43px;margin-bottom:6px}.arena-frame{width:min(100%,177.778dvh - 275.556px);max-height:none}.match-footer,.game-shell .site-footer{display:none}.touch-controls{left:0;right:0;bottom:max(6px,env(safe-area-inset-bottom));border:0;width:100%;margin:0;padding:0;position:absolute}.touch-controls button{width:52px;min-width:52px;height:52px;min-height:52px}.action-controls .skill-control{width:52px;height:52px}.action-controls .emote-control{display:none}}@media (orientation:portrait) and (max-width:760px){.game-shell .site-footer{display:none}.touch-controls{margin-top:auto;margin-bottom:max(10px,env(safe-area-inset-bottom))}}@media (max-width:760px){.lobby-main{flex-direction:column;gap:10px;display:flex}}