:root{--blue: #2f8fff;--blue-d: #1358b8;--sky: #33c6ff;--green: #5ed321;--green-d: #2f8a0c;--yellow: #ffc21c;--yellow-d: #c47a00;--orange: #ff7a1c;--orange-d: #b84a00;--red: #ff4b4b;--red-d: #a8161a;--purple: #b23cff;--purple-d: #6d1cb0;--gray: #7a8494;--gray-d: #3b4250;--ink: #0f1b33;--panel: #0e2a5c;--panel-2: #123a7a}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Nunito,system-ui,sans-serif;font-weight:700;color:#fff;overflow:hidden;background:#0b1f45}#bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(1200px 700px at 30% 20%,#1d63c9,#0f3c8e 45%,#0a2154)}#bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.12;background-image:repeating-linear-gradient(135deg,#fff 0 2px,transparent 2px 28px)}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;padding:18px 28px}.screen.active{display:flex}.screen.modal{align-items:center;justify-content:center;background:#040c1eb3;z-index:20}.screen.modal.active{display:flex}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.logo{font-family:Lilita One,sans-serif;font-size:44px;line-height:.9;letter-spacing:1px;display:flex;flex-direction:column;text-shadow:0 4px 0 #0a1d44,0 0 24px rgba(51,198,255,.5);transform:rotate(-3deg)}.logo.small{font-size:26px}.logo-street{color:#fff}.logo-football{color:var(--yellow);margin-top:-2px}.profile-chip{display:flex;gap:10px;align-items:center;background:#081a40d9;border:3px solid #0a1d44;border-radius:16px;padding:8px 14px;box-shadow:0 4px #071535}.rank-badge{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:30px;background:linear-gradient(#ffd34a,#ff9d00);border:3px solid #7a4a00;box-shadow:0 3px #7a4a00}.pc-name{font-family:Lilita One;font-size:20px;letter-spacing:.5px}.pc-bar{width:220px;height:12px;background:#071535;border-radius:6px;overflow:hidden;border:2px solid #071535;margin:3px 0}.pc-bar>div{height:100%;background:linear-gradient(#8bff5a,#45c012);border-radius:6px}.pc-sub{font-size:12px;color:#a9c4ff}.menu-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;flex:1;min-height:0}.panel{border-style:solid;border-width:18px 18px 22px 18px;border-image:url(/ui/panel.svg) 20 20 26 20 fill stretch;padding:2px 4px 0;display:flex;flex-direction:column;gap:12px;overflow:auto;filter:drop-shadow(0 4px 0 rgba(3,8,22,.55))}.panel-title{font-family:Lilita One;margin:0;font-size:22px;letter-spacing:1px;color:#fff;text-shadow:0 3px 0 #071535;background:linear-gradient(90deg,var(--blue),transparent);padding:6px 12px;border-radius:10px;clip-path:polygon(0 0,100% 0,96% 100%,0 100%)}.panel-modal{min-width:520px;max-width:760px;max-height:92vh}.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#a9c4ff}input{font:inherit;font-weight:900;color:#fff;outline:none;border-style:solid;border-width:12px;border-image:url(/ui/field.svg) 18 fill stretch;padding:0 2px;background:none}input:focus{filter:drop-shadow(0 0 4px var(--sky))}.code-input{text-transform:uppercase;letter-spacing:6px;font-family:Lilita One;font-size:22px;flex:1;text-align:center}.row{display:flex;gap:10px;align-items:center}.col{display:flex;flex-direction:column;gap:10px;flex:1}.hint{font-size:12px;color:#a9c4ff;margin:0}.divider{display:flex;align-items:center;gap:10px;color:#a9c4ff;font-size:12px}.divider:before,.divider:after{content:"";flex:1;height:4px;background:url(/ui/divider.svg) repeat-x center / auto 4px}.foot{text-align:center;font-size:12px;color:#a9c4ff;margin-top:10px}.btn{font-family:Lilita One,sans-serif;font-size:18px;letter-spacing:.5px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45);border-style:solid;border-width:11px 12px 14px 12px;border-image-slice:18 18 24 18 fill;border-image-repeat:stretch;background:none;padding:0 6px;cursor:pointer;position:relative;white-space:nowrap;transition:transform .06s,filter .06s;-webkit-user-select:none;user-select:none}.btn:active{transform:translateY(4px);filter:brightness(.9)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-blue{border-image-source:url(/ui/btn-blue.svg)}.btn-green{border-image-source:url(/ui/btn-green.svg)}.btn-yellow{border-image-source:url(/ui/btn-yellow.svg)}.btn-orange{border-image-source:url(/ui/btn-orange.svg)}.btn-red{border-image-source:url(/ui/btn-red.svg)}.btn-purple{border-image-source:url(/ui/btn-purple.svg)}.btn-gray{border-image-source:url(/ui/btn-gray.svg)}.btn-xl{font-size:26px;border-width:17px 16px 22px 16px;padding:0 8px}.btn-lg{font-size:21px;border-width:13px 16px 17px 16px;padding:0 8px}.btn-sm{font-size:14px;border-width:8px 10px 10px 10px;padding:0 4px}.class-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.class-card{border-style:solid;border-width:10px;border-image:url(/ui/field.svg) 18 fill stretch;background:none;padding:0 2px 4px;cursor:pointer;text-align:center;transition:transform .08s,filter .08s}.class-card:hover{transform:translateY(-2px)}.class-card.sel{border-image-source:url(/ui/field-sel.svg);filter:drop-shadow(0 0 8px rgba(255,194,28,.45))}.cc-icon{font-size:30px}.cc-name{font-family:Lilita One;font-size:15px}.cc-tag{font-size:10px;color:#a9c4ff}.cc-stats{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;font-size:9px;margin-top:6px;color:#a9c4ff;text-align:left}.cc-stats i{display:block;height:6px;background:#0a1d44;border-radius:3px;overflow:hidden}.cc-stats i b{display:block;height:100%}.cc-skill{font-size:10px;margin-top:6px;color:#ffe27a}.class-cards.mini .cc-stats,.class-cards.mini .cc-skill,.class-cards.mini .cc-tag{display:none}.class-cards.mini .class-card{padding:4px 8px;display:flex;gap:6px;align-items:center}.class-cards.mini .cc-icon{font-size:20px}.mode-tabs{display:flex;gap:6px}.mode-tab{flex:1;text-align:center;font-family:Lilita One;font-size:14px;cursor:pointer;color:#a9c4ff;border-style:solid;border-width:9px 10px;border-image:url(/ui/field.svg) 18 fill stretch;background:none;padding:0 2px}.mode-tab.sel{color:#fff;border-image-source:url(/ui/btn-blue.svg);border-image-slice:18 18 24 18 fill;border-width:8px 10px 11px}.rooms-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#a9c4ff;letter-spacing:1px;margin-top:4px}.rooms-list{display:flex;flex-direction:column;gap:6px;max-height:190px;overflow:auto}.room-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;font-size:13px;border-style:solid;border-width:8px 10px;border-image:url(/ui/field.svg) 18 fill stretch;background:none;padding:0}.room-row .rr-code{font-family:Lilita One;letter-spacing:2px;color:var(--yellow);font-size:16px}.room-row .rr-info small{color:#a9c4ff;display:block}.room-row .rr-count{font-family:Lilita One}.soon{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}.chip{background:#071535;border:2px solid #0a1d44;border-radius:20px;padding:4px 10px;font-size:12px;color:#a9c4ff}.chip small{color:var(--yellow)}#avatar-preview,#locker-preview{background:radial-gradient(#3a4352,#232831);border:3px solid #0a1d44;border-radius:16px;box-shadow:0 4px #071535}.locker-opts{gap:8px}.opt>span{font-size:12px;color:#a9c4ff;display:block;margin-bottom:4px}.swatches{display:flex;gap:6px;flex-wrap:wrap}.sw{width:34px;height:34px;border-radius:10px;border:3px solid #0a1d44;cursor:pointer;display:grid;place-items:center;font-size:16px;background:#071535}.sw.sel{border-color:var(--yellow);box-shadow:0 0 10px #ffc21c99}.controls-table{border-collapse:collapse;font-size:15px}.controls-table td{padding:6px 12px;border-bottom:2px solid #0a1d44}kbd{background:#071535;border:2px solid #0a1d44;border-bottom-width:4px;border-radius:6px;padding:2px 7px;font-family:Lilita One;margin-right:3px}.lobby{display:grid;grid-template-columns:340px 1fr;grid-template-rows:1fr auto;gap:16px;flex:1;min-height:0}.lobby-code{align-items:center;text-align:center;grid-row:span 2}.lc-label{font-size:12px;color:#a9c4ff;letter-spacing:2px}.lc-code{font-family:Lilita One;font-size:56px;letter-spacing:8px;color:var(--yellow);text-shadow:0 4px 0 #7a4a00}.lobby-status{margin-top:auto;font-size:14px;color:#ffe27a}.teams{display:grid;grid-template-columns:1fr auto 1fr;gap:12px}.team{border-style:solid;border-width:14px 14px 17px 14px;border-image:url(/ui/panel.svg) 20 20 26 20 fill stretch;background:none;padding:0 2px;display:flex;flex-direction:column;gap:8px}.team h3{margin:0;font-family:Lilita One;font-size:22px;text-align:center;padding:6px;border-radius:10px}.team-0 h3{background:linear-gradient(var(--sky),var(--blue))}.team-1 h3{background:linear-gradient(#ff9a3c,var(--orange))}.team-list{display:flex;flex-direction:column;gap:6px;min-height:120px;overflow:auto}.member{display:flex;align-items:center;gap:8px;padding:0 2px;border-style:solid;border-width:8px 10px;border-image:url(/ui/field.svg) 18 fill stretch;background:none}.member .m-icon{font-size:20px}.member .m-name{flex:1;font-size:15px}.member .m-name small{color:#a9c4ff;font-size:11px}.member .m-ready{font-size:12px;color:var(--green)}.member.me{border-image-source:url(/ui/field-sel.svg)}.vs{font-family:Lilita One;font-size:40px;align-self:center;color:var(--yellow);text-shadow:0 4px 0 #7a4a00;transform:rotate(-8deg)}.lobby-actions{display:flex;gap:14px;align-items:center;flex-shrink:0;min-width:0}.lobby-actions .class-cards{flex:1;min-width:0}#screen-game{padding:0;background:#1b1e24}#game{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.scoreboard{position:absolute;top:10px;left:50%;transform:translate(-50%);display:grid;grid-template-columns:auto auto auto;align-items:center;gap:0;background:#071535;border:3px solid #0a1d44;border-radius:14px;box-shadow:0 5px #050f2a;overflow:hidden}.sb-team{font-family:Lilita One;font-size:18px;padding:8px 16px;letter-spacing:1px}.sb-0{background:linear-gradient(var(--sky),var(--blue));clip-path:polygon(0 0,100% 0,88% 100%,0 100%);padding-right:24px}.sb-1{background:linear-gradient(#ff9a3c,var(--orange));clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);padding-left:24px}.sb-score{font-family:Lilita One;font-size:30px;padding:0 14px;color:var(--yellow);text-shadow:0 3px 0 #7a4a00}.sb-time{grid-column:span 3;text-align:center;font-family:Lilita One;font-size:16px;background:#0a1d44;padding:2px}.sb-time.hurry{color:var(--red);animation:pulse .5s infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.12)}}.hud-bottom-left{position:absolute;left:16px;bottom:16px;display:flex;gap:12px;align-items:flex-end}.stam{display:flex;gap:6px;align-items:center;background:#071535;border:3px solid #0a1d44;border-radius:12px;padding:6px 10px;box-shadow:0 4px #050f2a}.stam-bar{width:140px;height:14px;background:#0a1d44;border-radius:7px;overflow:hidden}#stam-fill{height:100%;width:100%;background:linear-gradient(#8bff5a,#45c012);transition:width .1s}.skill{width:74px;height:74px;border-radius:16px;background:linear-gradient(#c96bff,var(--purple));border:3px solid #0a1d44;box-shadow:0 4px 0 var(--purple-d);position:relative;display:grid;place-items:center;overflow:hidden}.skill-icon{font-size:30px}.skill-cd{position:absolute;left:0;right:0;bottom:0;background:#000000a6;height:0%}.skill-name{position:absolute;bottom:2px;font-size:10px;font-family:Lilita One;text-shadow:0 1px 0 #000}.skill.ready{animation:glow 1s infinite alternate}@keyframes glow{0%{box-shadow:0 4px 0 var(--purple-d),0 0 6px #b23cff66}to{box-shadow:0 4px 0 var(--purple-d),0 0 22px #b23cffe6}}.hud-bottom-right{position:absolute;right:16px;bottom:16px;font-size:12px;color:#cfd8e6;background:#071535b3;padding:6px 10px;border-radius:10px;border:2px solid #0a1d44}.banner{position:absolute;top:38%;left:0;right:0;text-align:center;font-family:Lilita One;font-size:90px;letter-spacing:3px;color:var(--yellow);text-shadow:0 6px 0 #7a4a00,0 0 40px rgba(255,194,28,.6);opacity:0;transform:scale(.5) rotate(-6deg);transition:opacity .15s,transform .25s cubic-bezier(.2,1.6,.4,1)}.banner.show{opacity:1;transform:scale(1) rotate(-4deg)}.banner small{display:block;font-size:26px;color:#fff;text-shadow:0 3px 0 #071535}.feed{position:absolute;top:90px;left:16px;display:flex;flex-direction:column;gap:4px}.feed div{background:#071535d9;border-left:4px solid var(--yellow);padding:4px 10px;border-radius:6px;font-size:13px;animation:fadein .2s}@keyframes fadein{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:none}}.results{align-items:center;text-align:center}.res-title{font-family:Lilita One;font-size:44px;color:var(--yellow);text-shadow:0 5px 0 #7a4a00;transform:rotate(-3deg)}.res-score{font-family:Lilita One;font-size:64px;display:flex;gap:18px}.res-score .t0{color:var(--sky)}.res-score .t1{color:var(--orange)}.res-rank{font-size:16px;color:#ffe27a}.res-table{border-collapse:collapse;width:100%;font-size:14px}.res-table th{color:#a9c4ff;font-size:11px;letter-spacing:1px;padding:4px 8px}.res-table td{padding:5px 8px;border-top:2px solid #0a1d44}.res-table tr.t0 td:first-child{border-left:4px solid var(--sky)}.res-table tr.t1 td:first-child{border-left:4px solid var(--orange)}.res-table tr.mvp td{background:#ffc21c26}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);background:var(--red);border:3px solid #0a1d44;border-radius:12px;padding:10px 18px;font-family:Lilita One;z-index:50;transition:transform .25s;box-shadow:0 4px 0 var(--red-d)}#toast.show{transform:translate(-50%)}#toast.ok{background:var(--green);box-shadow:0 4px 0 var(--green-d)}@media (max-width: 900px){.menu-grid,.lobby{grid-template-columns:1fr}.class-cards{grid-template-columns:repeat(2,1fr)}}.ic{width:1.1em;height:1.1em;vertical-align:-.2em;display:inline-block}.btn .ic{width:1.05em;height:1.05em;margin-right:2px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}.btn-icon{padding:6px 8px}.chip .ic{width:1em;height:1em;color:var(--yellow)}.rank-badge .ic,.cc-icon .ic{width:34px;height:34px}.m-icon .ic{width:22px;height:22px}.skill-icon .ic{width:34px;height:34px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}.stam .ic{width:18px;height:18px;color:var(--yellow)}.m-flag{display:inline-flex;gap:4px;align-items:center;color:#a9c4ff}.m-flag .ic{width:14px;height:14px}.panel-wide{min-width:860px;max-width:960px}.locker{display:grid;grid-template-columns:300px 1fr;gap:16px}.locker-left{display:flex;flex-direction:column;gap:10px}.locker-stats{font-size:12px;color:#a9c4ff;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}.locker-stats b{color:#fff}.locker-right{display:flex;flex-direction:column;gap:10px;min-height:0}.locker-tabs{display:flex;gap:6px;flex-wrap:wrap}.locker-tab{font-family:Lilita One;font-size:13px;cursor:pointer;color:#a9c4ff;border-style:solid;border-width:8px 10px;border-image:url(/ui/field.svg) 18 fill stretch;background:none;padding:0}.locker-tab.sel{color:#fff;border-image-source:url(/ui/btn-purple.svg);border-image-slice:18 18 24 18 fill;border-width:7px 10px 10px}.locker-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:340px;overflow:auto}.item{border-style:solid;border-width:9px;border-image:url(/ui/field.svg) 18 fill stretch;background:none;padding:2px;text-align:center;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}.item .ic{width:34px;height:34px}.item .it-color{width:34px;height:34px;border-radius:10px;border:3px solid #0a1d44}.item .it-name{font-size:11px}.item .it-req{font-size:9px;color:var(--yellow)}.item.sel{border-image-source:url(/ui/field-sel.svg);filter:drop-shadow(0 0 8px rgba(255,194,28,.45))}.item.locked{opacity:.55;cursor:not-allowed}.item.locked .it-lock{position:absolute;top:4px;right:4px;color:var(--yellow)}.item.locked .it-lock .ic{width:14px;height:14px}.controls-table td.keys{display:flex;gap:6px}.keycap{background:#071535;border:2px solid #0a1d44;border-bottom-width:4px;border-radius:6px;padding:3px 9px;font-family:Lilita One;cursor:pointer;min-width:44px;text-align:center}.keycap:hover{border-color:var(--sky)}.keycap.listening{border-color:var(--yellow);background:#15316b;animation:pulse .5s infinite alternate}.keycap.empty{color:#5a6b8f}.pad-box{display:flex;gap:8px;align-items:center;font-size:12px;color:#a9c4ff;background:#071535;border:2px solid #0a1d44;border-radius:10px;padding:8px 10px}.pad-box .ic{width:22px;height:22px;color:var(--sky);flex-shrink:0}.ctrl-tabs{display:flex;gap:6px}.ctrl-tab{display:flex;align-items:center;gap:6px;font-family:Lilita One;font-size:14px;padding:8px 14px;background:#071535;border:3px solid #0a1d44;border-radius:10px;cursor:pointer;color:#a9c4ff}.ctrl-tab .ic{width:18px;height:18px}.ctrl-tab.sel{background:linear-gradient(var(--sky),var(--blue));color:#fff;box-shadow:0 3px 0 var(--blue-d)}.ctrl-tab.live:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.pad-table{display:none}.pad-table.show{display:table}.padcap{display:inline-block;background:#071535;border:2px solid #2a4c8f;border-bottom-width:4px;border-radius:8px;padding:3px 10px;font-family:Lilita One;color:#fff;min-width:44px;text-align:center}.pic{width:30px;height:30px;display:inline-block;vertical-align:-8px;color:#dce7ff;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}.padcap .pic{margin:0 1px}.glyphs{display:flex;gap:4px;align-items:center}.glyphs .sep{color:#5a6b8f;font-size:12px}.keycap.glyph{background:none;border:none;padding:0;min-width:0}.keycap.glyph .pic{width:34px;height:34px;vertical-align:-10px}.keycap.glyph:hover .pic{color:var(--sky)}.keycap.glyph.listening .pic{color:var(--yellow)}.hud-bottom-right .pic{width:20px;height:20px;vertical-align:-5px;color:#cfe0ff}.btn-icon-only{padding:0 2px;min-width:0}.btn-icon-only .ic{margin:0}.controls-table tr.nav td{color:#a9c4ff}.ladder-table{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}.ladder-table th{font-size:10px;letter-spacing:1px;color:#a9c4ff;text-align:left;padding:2px 8px}.ladder-table td{padding:5px 8px;border-top:2px solid #0a1d44}.ladder-table td.num{text-align:center;font-family:Lilita One}.ladder-table .lb-pos{font-family:Lilita One;color:var(--yellow);width:34px}.ladder-table .lb-tier .ic{width:18px;height:18px;vertical-align:-3px;margin-right:4px}.ladder-table tr.me{background:#ffc21c1f}.friend-me{display:flex;align-items:center;gap:10px;font-size:12px;color:#a9c4ff;letter-spacing:2px}.friend-me b{font-family:Lilita One;font-size:26px;letter-spacing:6px;color:var(--yellow);text-shadow:0 3px 0 #7a4a00}.friend-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;min-width:460px}.friend-row{display:grid;grid-template-columns:10px 1fr auto auto;gap:10px;align-items:center;font-size:14px;border-style:solid;border-width:8px 10px;border-image:url(/ui/field.svg) 18 fill stretch;background:none;padding:0}.friend-row .fr-dot{width:10px;height:10px;border-radius:50%;background:var(--gray)}.friend-row.on .fr-dot{background:var(--green);box-shadow:0 0 8px var(--green)}.friend-row .fr-name{font-weight:900}.friend-row .fr-sub{display:block;font-size:11px;color:#a9c4ff;letter-spacing:1px}.friend-head{font-size:11px;letter-spacing:2px;color:#a9c4ff;margin:6px 0 2px}.gp-focus{outline:3px solid #fff;outline-offset:3px;border-radius:10px;box-shadow:0 0 0 7px #33c6ff73}.board{position:absolute;top:90px;left:50%;transform:translate(-50%);display:none;gap:14px;background:#071535eb;border:3px solid #0a1d44;border-radius:16px;padding:14px;box-shadow:0 6px #050f2a;min-width:560px}.board.show{display:grid;grid-template-columns:1fr 1fr}.board table{border-collapse:collapse;width:100%;font-size:13px}.board th{font-size:10px;letter-spacing:1px;color:#a9c4ff;padding:2px 6px;text-align:left}.board td{padding:4px 6px;border-top:2px solid #0a1d44}.board td.num{text-align:center;font-family:Lilita One}.board h4{margin:0 0 6px;font-family:Lilita One;font-size:16px;padding:4px 10px;border-radius:8px}.board .bt-0 h4{background:linear-gradient(var(--sky),var(--blue))}.board .bt-1 h4{background:linear-gradient(#ff9a3c,var(--orange))}.board tr.me td{background:#ffc21c1f}.replay-tag{position:absolute;top:96px;right:24px;display:none;align-items:center;gap:6px;font-family:Lilita One;font-size:20px;color:#fff;background:var(--red);border:3px solid #0a1d44;border-radius:10px;padding:4px 12px;box-shadow:0 4px 0 var(--red-d);animation:pulse 1s infinite alternate}.replay-tag.show{display:flex}.replay-tag .ic{width:18px;height:18px}#screen-game .hud-bottom-right .ic{width:14px;height:14px}.arena-tabs .mode-tab{font-size:12px;padding:6px 4px}.hud-mute{position:absolute;top:14px;right:16px;pointer-events:auto}.reconnect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;gap:10px;align-items:center;font-family:Lilita One;font-size:26px;background:#071535eb;border:3px solid #0a1d44;border-radius:14px;padding:14px 22px;box-shadow:0 6px #050f2a}.reconnect.show{display:flex}.reconnect .ic{width:26px;height:26px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.touch{display:none;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.touch.avail{display:block}.touch.avail~.hud-bottom-right,#screen-game:has(.touch.avail) .hud-bottom-right{display:none}.joy{position:absolute;left:24px;bottom:90px;width:150px;height:150px;border-radius:50%;background:#07153573;border:3px solid rgba(255,255,255,.25);pointer-events:auto;touch-action:none}.joy-knob{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#ffffff8c;border:3px solid #0a1d44}.tbtns{position:absolute;right:18px;bottom:80px;width:250px;height:250px;pointer-events:none}.tbtn{position:absolute;width:74px;height:74px;border-radius:50%;border:3px solid #0a1d44;color:#fff;font-family:Lilita One;font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 4px #0006;opacity:.9}.tbtn .ic{width:26px;height:26px}.tbtn.on{transform:scale(.92);opacity:1;filter:brightness(1.2)}.tb-shoot{right:0;bottom:60px;background:var(--red);width:90px;height:90px}.tb-pass{right:100px;bottom:20px;background:var(--blue)}.tb-lob{right:120px;bottom:105px;background:var(--sky)}.tb-tackle{right:30px;bottom:160px;background:var(--orange)}.tb-skill{right:170px;bottom:190px;background:var(--purple)}.tb-sprint{right:190px;bottom:0;background:var(--green);width:64px;height:64px}.tb-small{width:46px;height:46px;background:var(--gray)}.tb-small:nth-of-type(7){right:0;bottom:200px}.tb-small:nth-of-type(8){right:60px;bottom:230px}.rotate-hint{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:#0b1f45;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-family:Lilita One;font-size:22px;text-align:center;padding:20px}.rotate-hint .ic{width:64px;height:64px;color:var(--yellow)}@media (pointer: coarse){.hud-bottom-right{display:none}.hud-bottom-left{left:190px;bottom:16px;transform:scale(.85);transform-origin:left bottom}.skill{display:none}.screen{padding:10px 12px}.logo{font-size:30px}.panel-modal,.panel-wide{min-width:0;width:96vw}.locker{grid-template-columns:1fr}#locker-preview{width:160px;height:160px;margin:0 auto}.class-cards{grid-template-columns:repeat(2,1fr)}.btn-xl{font-size:20px;padding:12px 16px}}@media (pointer: coarse) and (orientation: portrait){#screen-game.active .rotate-hint{display:flex}}@media (max-height: 520px){.tbtns{transform:scale(.68);transform-origin:right bottom;bottom:30px;right:10px}.joy{transform:scale(.75);transform-origin:left bottom;bottom:30px;left:12px}.hud-bottom-left{transform:scale(.7);transform-origin:left bottom;left:150px;bottom:8px}.scoreboard{transform:translate(-50%) scale(.8);transform-origin:top center}.hud-mute{top:8px;right:8px;transform:scale(.85)}}