:root{font-family:system-ui,sans-serif;color:#e8eef3;background:#0c1520;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{background:#162331;border:1px solid #4c5f71;color:inherit;padding:7px 12px;cursor:pointer}button:hover{background:#26394b}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}canvas#arena{display:block;width:100vw;height:100dvh;outline:none}header,footer{position:fixed;left:20px;right:20px;display:flex;align-items:center;gap:16px;z-index:1;font-size:12px}header{top:16px}header a{font-weight:650;font-size:15px}header a span{font-weight:400;opacity:.6}header #connection{margin-left:auto}footer{bottom:18px;background:#101c29d9;padding:8px 12px;justify-content:space-between}footer>span:nth-child(2){opacity:.65}.scoreboard{position:fixed;top:15px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;background:#101d2ae8;min-width:224px;text-align:center}.scoreboard>strong{font-size:34px;font-weight:500;min-width:56px;padding:4px 12px}#blue{background:#17467a}#orange{background:#8c3c1d}.scoreboard>div{padding:5px 18px}.scoreboard b{display:block;font-size:21px;font-weight:500;font-variant-numeric:tabular-nums}.scoreboard small{font-size:9px;letter-spacing:1.4px;color:#a4b5c5}#boost{position:fixed;right:28px;bottom:95px;display:grid;width:140px;text-align:right}#boost b{font-size:55px;font-variant-numeric:tabular-nums;font-weight:350}#boost span{font-size:10px;letter-spacing:3px;opacity:.65}meter{width:100%;height:7px;margin-top:12px}#error{position:fixed;left:20%;right:20%;top:30%;padding:20px;background:#3b2024;border:1px solid #c78580;white-space:pre-wrap}#console{position:fixed;bottom:0;left:0;right:0;height:60dvh;min-height:260px;z-index:5;background:#0b1520f5;border-top:1px solid #536576;padding:14px 22px;font:12px ui-monospace,monospace;overflow:auto}.console-head{display:flex;gap:10px;align-items:center;margin-bottom:12px}.console-head b{margin-right:auto;color:#9abbcf}#console label{display:flex;gap:12px;align-items:center}#replay{flex:1}#metrics{color:#b8c7d3;line-height:1.65}#console-input{flex:1;background:transparent;color:#eff7fc;border:0;padding:6px;outline:none}#console-form{border-top:1px solid #354757;padding-top:6px}#console-log{white-space:pre-wrap;color:#a3d2bd}.touch{display:none}[hidden]{display:none!important}@media(pointer:coarse){footer>span:nth-child(2){display:none}.touch{display:flex;position:fixed;bottom:75px;left:15px;right:15px;justify-content:space-between;pointer-events:none}.touch button{pointer-events:auto;touch-action:none;min-height:54px;min-width:50px;opacity:.75}.direction{display:grid;grid-template-columns:repeat(3,50px)}.direction button:first-child{grid-column:2}.direction button:nth-child(2){grid-column:1}.touch>div:last-child{display:grid;grid-template-columns:repeat(2,80px);gap:6px}#boost{bottom:220px}.scoreboard{top:65px}header{left:12px;right:12px;font-size:10px}}@media(prefers-reduced-motion:no-preference){#console{animation:slidein .14s ease-out}@keyframes slidein{from{transform:translateY(100%)}}}

#console-watches{display:flex;gap:16px;overflow:auto}#console-log{max-height:100px;overflow:auto}#recording-panel{min-height:320px}#console-input{min-width:0;width:100%}
#physics-debug[aria-pressed="true"]{border-color:#35d6f2;color:#8deeff}#physics-readout{position:fixed;z-index:3;left:12px;top:90px;width:min(380px,calc(100vw - 24px));max-height:42dvh;overflow:auto;padding:10px 12px;background:#07111bdc;border:1px solid #39a9c4;color:#d8e8ef;font:11px/1.45 ui-monospace,monospace;white-space:pre-wrap;pointer-events:none}
@media(max-width:600px){footer{gap:3px}footer #physics-debug,footer #diagnostics{padding:3px 5px;font-size:9px;white-space:nowrap}#physics-readout{top:calc(env(safe-area-inset-top,0px) + 90px);font-size:9px;width:min(300px,calc(100vw - 16px));left:8px}}
.match-stats{position:fixed;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:#102031f2;border:1px solid #6b8495;box-shadow:0 18px 55px #0009;padding:16px 18px;font-size:13px}.match-stats-head,.match-stats-score,.match-stats-teams{display:flex;justify-content:space-between;gap:12px}.match-stats-head{color:#a9c0cd;letter-spacing:1px;font-size:11px}.match-stats-score{align-items:center;justify-content:center;margin:10px 0;font-variant-numeric:tabular-nums}.match-stats-score strong{font-size:32px;min-width:60px;text-align:center}.match-stats-score strong:first-child{color:#64a5ef}.match-stats-score strong:last-child{color:#f39360}.match-stats-teams>div{width:50%;padding:8px 10px;background:#1b3042}.match-stats-teams>div:first-child{border-top:3px solid #3689db}.match-stats-teams>div:last-child{border-top:3px solid #d7743c}.match-stats-teams b{font-size:11px;letter-spacing:1px}.match-stats-teams div div{padding-top:4px}.match-stats-teams .vacant{opacity:.5}.match-stats-grid{display:grid;grid-template-columns:1fr auto;gap:7px 12px;margin:14px 0 8px}.match-stats-grid dt{color:#aec2cf}.match-stats-grid dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.match-stats-grid small{opacity:.65}.match-stats-hint{color:#8298a8}#fps{margin-left:0;font-variant-numeric:tabular-nums;white-space:nowrap}#fps[aria-expanded="true"]{border-color:#92bde0}
@media(max-width:600px){
 header{top:env(safe-area-inset-top,0px);left:8px;right:8px;gap:6px;height:40px;font-size:10px}
 header a{font-size:12px;white-space:nowrap}header a span{display:none}
 header #connection{display:none}
 header #fps{margin-left:auto;padding:6px 7px;font-size:10px}
 header #join{padding:6px 8px;font-size:10px;white-space:nowrap}
 .scoreboard{top:calc(env(safe-area-inset-top,0px) + 44px);min-width:0;background:#101d2ac9}
 .scoreboard>strong{font-size:23px;min-width:40px;padding:3px 8px}
 .scoreboard>div{padding:3px 10px}.scoreboard b{font-size:16px}.scoreboard small{font-size:8px;letter-spacing:.6px}
 footer{left:8px;right:8px;bottom:env(safe-area-inset-bottom,0px);height:30px;padding:2px 6px;gap:4px;background:#101c29a8;font-size:10px}
 footer>span:nth-child(2){display:none}
 footer #diagnostics{padding:3px 7px;font-size:10px}
 .touch{display:flex;position:fixed;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 38px);gap:8px;align-items:end;justify-content:space-between;pointer-events:none;z-index:2}
 .touch button{pointer-events:auto;touch-action:none;min-width:0;min-height:44px;padding:2px 4px;border-radius:8px;background:#14283bbc;opacity:.82;font-size:12px}
 .direction{display:grid;grid-template-columns:repeat(3,44px)}
 .direction button:first-child{grid-column:2}.direction button:nth-child(2){grid-column:1}
 .touch>div:last-child{display:grid;grid-template-columns:repeat(2,64px);gap:4px}
 #boost{right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 140px);width:65px;pointer-events:none;text-align:center}
 #boost b{font-size:26px;line-height:1}#boost span{font-size:8px;letter-spacing:1px}#boost meter{height:4px;margin-top:3px}
 #console{height:75dvh;min-height:0;padding:10px}
 #error{left:8px;right:8px;top:25%;padding:12px;font-size:12px}
 .match-stats{padding:10px 12px;font-size:11px;max-height:calc(100dvh - 12px)}.match-stats-score{margin:5px 0}.match-stats-score strong{font-size:25px}.match-stats-teams>div{padding:5px 6px}.match-stats-grid{gap:4px 8px;margin:8px 0 4px}
}
@media(max-width:320px){
 header #nickname{width:58px;min-width:48px;padding-inline:3px}header #connection{display:none}header #join{margin-left:auto}
 .direction{grid-template-columns:repeat(3,38px)}
 .touch>div:last-child{grid-template-columns:repeat(2,58px)}
 .touch button{min-height:38px;font-size:10px}
 #boost{bottom:calc(env(safe-area-inset-bottom,0px) + 120px)}
}

header #nickname{width:132px;min-width:70px;background:#101d2ac9;border:1px solid #40566a;color:inherit;padding:7px 9px}header #nickname::placeholder{color:#9aabba}.goal-celebration{position:fixed;inset:0;z-index:3;display:grid;place-items:center;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at center,#14345135 0%,#06101c00 62%)}.goal-rays{position:absolute;inset:-70%;background:repeating-conic-gradient(from 4deg,#cfefff0a 0deg 2deg,transparent 2deg 13deg);animation:goal-spin 14s linear infinite}.goal-card{position:relative;display:grid;justify-items:center;gap:7px;min-width:min(440px,88vw);padding:28px 48px 22px;border-block:2px solid #d9efffbd;background:linear-gradient(90deg,#10223400,#102234e8 18% 82%,#10223400);text-shadow:0 3px 18px #000b;animation:goal-enter .5s cubic-bezier(.15,.8,.2,1.2) both}.goal-card small{font-size:12px;letter-spacing:.24em;color:#c5d9e8}.goal-card strong{font-size:clamp(50px,12vw,104px);line-height:.95;letter-spacing:.03em;color:#fff}.goal-card b{font-size:24px;font-variant-numeric:tabular-nums}.goal-card button{pointer-events:auto;margin-top:12px;background:#13283a;border-color:#a9c6dc;font-size:13px}.goal-celebration.team-blue .goal-card{border-color:#62b5ff}.goal-celebration.team-orange .goal-card{border-color:#ff9a63}.goal-celebration.team-blue .goal-card strong{color:#a7d7ff}.goal-celebration.team-orange .goal-card strong{color:#ffc09b}@keyframes goal-spin{to{transform:rotate(360deg)}}@keyframes goal-enter{from{opacity:0;transform:translateY(24px) scale(.78)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:700px){header{gap:6px}header #nickname{width:84px;padding:7px 5px;font-size:11px}header #connection{display:none}.goal-card{padding:22px 18px}.goal-card b{font-size:19px}}
@media(prefers-reduced-motion:reduce){.goal-rays{animation:none}.goal-card{animation:none}}