:root{color-scheme:light;font-family:ui-rounded,"Arial Rounded MT Bold",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#303a40;background:#303a40;font-synthesis:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #303a40;outline-offset:5px}button:disabled{opacity:.45;cursor:wait}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}
#game{position:relative;width:100%;height:100%;height:100dvh;max-width:560px;margin:auto;background:#edf0e5;overflow:hidden;isolation:isolate;touch-action:none}
.arena-frame{position:absolute;inset:138px 0 146px}.arena-frame canvas{display:block;width:100%;height:100%;outline:none}
#world-labels{position:absolute;inset:0;pointer-events:none}.home-marker,.you-marker,.supply-marker{position:absolute;left:0;top:0;white-space:nowrap;transform:translate(-50%,-50%);font-size:9px;font-weight:900;letter-spacing:.08em;color:#263d43}.home-marker{padding:4px 6px;border-radius:5px;background:#22b9dd;color:white;box-shadow:0 2px 0 #167990}.you-marker{font-size:9px;color:#126b81}.you-marker::after{content:'▼';display:block;text-align:center;font-size:8px}.supply-marker{color:#867555;font-size:8px}
#hud{position:absolute;inset:0 0 auto;padding:calc(14px + env(safe-area-inset-top)) 20px 0}.hud-top{display:flex;align-items:center;justify-content:space-between;height:48px}.wordmark{font-size:17px;line-height:.87;letter-spacing:-.8px;font-weight:1000;display:flex;align-items:center;gap:7px}.cone-icon{display:block;width:16px;height:26px;background:#ed7a32;clip-path:polygon(42% 0,58% 0,91% 85%,100% 85%,100% 100%,0 100%,0 85%,9% 85%)}.timer-wrap{text-align:center;padding-right:14px}.timer-caption{display:block;font-size:8px;letter-spacing:.18em;font-weight:800;opacity:.65}#timer{font-size:32px;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums}.urgent #timer{color:#cb5c43}.icon-button{border:1px solid #ccd2c5;border-radius:50%;width:44px;height:44px;background:#f8f7ef;color:#303a40;font-size:21px;font-weight:900}.scores{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}.score-pill{display:flex;justify-content:space-between;align-items:center;background:#f8f7ef;border-radius:9px;padding:7px 8px;border:1px solid #dce0d3;gap:5px}.score-pill.mine{border:2px solid #22b9dd;padding:6px 7px;background:#e1f6f5}.score-left{display:flex;gap:5px;align-items:center;font-size:8px;font-weight:900}.score-dot{width:8px;height:8px;border-radius:50%;background:var(--team)}.score-pill b{font-variant-numeric:tabular-nums;font-size:18px;line-height:1}.objective{text-align:center;font-size:11px;font-weight:750;margin-top:10px;letter-spacing:.01em}
#controls{position:absolute;left:0;right:0;bottom:calc(21px + env(safe-area-inset-bottom));height:111px;display:flex;align-items:center;justify-content:center;gap:24px;padding:0 18px}.joystick{position:relative;width:108px;height:108px;flex-shrink:0;border-radius:50%;background:#dde3d8;border:2px solid #c6d0c2;box-shadow:inset 0 2px 7px #9dad9b22;touch-action:none;user-select:none}.stick-cross::before,.stick-cross::after{content:'';position:absolute;left:22px;right:22px;top:51px;height:2px;background:#bfccbe}.stick-cross::after{transform:rotate(90deg)}.stick-knob{position:absolute;width:42px;height:42px;left:31px;top:31px;border-radius:50%;background:#f8f7ef;border:2px solid #b5c3b4;box-shadow:0 3px 0 #b1c0b0;pointer-events:none}.held .stick-knob{background:#22b9dd;border-color:#168ca6;box-shadow:0 3px 0 #168ca6}.control-copy{max-width:205px;font-size:11px;line-height:1.5}.control-copy strong{display:block;color:#467780;font-size:10px;letter-spacing:.12em;margin-bottom:7px}.control-copy span{display:block;color:#59665c}.keyboard-hint{font-size:9px;margin-top:6px;opacity:.8}.toast{position:absolute;z-index:5;top:146px;left:50%;transform:translateX(-50%);font-size:11px;line-height:1.4;font-weight:800;color:white;background:#303a40;padding:9px 14px;border-radius:40px;text-align:center;max-width:90%;width:max-content;opacity:0;pointer-events:none;transition:opacity .15s}.toast.show{opacity:1}
.title-screen{position:absolute;inset:0;pointer-events:none}.title-brand{position:absolute;top:calc(30px + env(safe-area-inset-top));left:0;right:0;text-align:center}.eyebrow{font-size:9px;letter-spacing:.20em;font-weight:900;color:#697467;display:block}.title-brand h1{font-size:64px;line-height:.82;letter-spacing:-5px;margin:16px 0 11px;font-weight:1000;position:relative;display:inline-block;text-align:left}.title-brand h1 span{display:block;color:#22a6c4}.title-cone{position:absolute;right:-37px;top:10px;width:31px;height:50px;background:#ee7a32;clip-path:polygon(44% 0,56% 0,88% 83%,100% 83%,100% 100%,0 100%,0 83%,12% 83%);transform:rotate(12deg)}.build-tag{display:block;font-size:8px;letter-spacing:.17em;color:#7e8979;font-weight:800}.title-tray{position:absolute;bottom:calc(27px + env(safe-area-inset-bottom));left:24px;right:24px;text-align:center;pointer-events:auto}.tagline{font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.4px;margin:0 0 16px}.tagline strong{font-weight:850}.rules{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;font-size:10px;margin-bottom:18px}.rules b{color:#1e8c9f;margin-right:3px;font-size:8px}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 22px;min-height:57px;background:#22b9dd;border:0;border-bottom:4px solid #178ba5;border-radius:14px;font-size:13px;font-weight:900;letter-spacing:.05em;color:#163d47;box-shadow:0 3px 0 #a7c9c333}.primary span{font-size:23px;line-height:1}.small-note{font-size:10px;line-height:1.5;color:#6b7568;margin:12px 0 0}.secondary{display:block;width:100%;border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:11px;font-weight:700;padding:16px;color:#63725f}.overlay{position:absolute;z-index:10;inset:0;background:#edf0e5c9;display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(5px)}.panel{width:100%;max-width:390px;padding:29px 24px 17px;background:#f8f7ef;border:1px solid #d4dbc9;border-radius:24px;box-shadow:0 15px 60px #34412f15;text-align:center;max-height:calc(100dvh - 36px);overflow-y:auto}.panel h1,.panel h2{font-size:35px;font-weight:900;line-height:1.04;letter-spacing:-1.4px;margin:14px 0 17px}.panel p{font-size:13px;line-height:1.55;color:#697467;margin:0 0 24px}.panel .small-note{font-size:10px;margin:15px 0 0}.loader{height:4px;border-radius:3px;background:linear-gradient(90deg,#22b9dd 0 40%,#dce8d9 40%);margin:24px auto;width:130px}.leaderboard{margin:17px 0}.leader-row{display:flex;align-items:center;gap:11px;padding:10px;border-bottom:1px solid #dbe1d3;text-align:left;font-size:12px}.leader-row.mine{background:#e3f2eb;border-radius:8px}.leader-row .score-dot{width:12px;height:12px}.leader-row b{margin-left:auto;font-size:22px}.leader-row small{font-size:9px;color:#6a7566}.panel .round-stats{font-size:11px;line-height:1.5;margin-bottom:20px}.version{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:.16em;color:#8d9989;pointer-events:none}#game[data-screen="title"] .arena-frame{top:207px;bottom:253px}#game[data-screen="title"] .home-marker,#game[data-screen="title"] .supply-marker,#game[data-screen="loading"] #world-labels{display:none}
@media(min-width:561px){#game{box-shadow:0 0 90px #0005}.title-brand{top:33px}}
@media(max-height:730px){.arena-frame{inset:126px 0 126px}#hud{padding-top:9px}.hud-top{height:39px}.scores{margin-top:8px}.objective{margin-top:7px}#controls{bottom:15px;height:100px;gap:20px}.joystick{width:94px;height:94px}.stick-knob{left:24px;top:24px}.stick-cross::before,.stick-cross::after{top:44px;left:16px;right:16px}.title-brand{top:17px}.title-brand h1{font-size:49px;margin:11px 0 9px;letter-spacing:-3px}.title-tray{bottom:18px}.tagline{font-size:16px;margin-bottom:11px}.rules{margin-bottom:12px;font-size:9px;gap:5px 10px}.primary{padding:14px 19px;min-height:51px}.small-note{margin-top:8px}#game[data-screen="title"] .arena-frame{top:170px;bottom:225px}.toast{top:128px}.title-cone{width:24px;height:42px;right:-30px}.panel{padding-top:23px}.panel h2{font-size:30px}}
@media(max-height:550px){.arena-frame{inset:106px 0 80px}#controls{height:68px;bottom:8px}.joystick{width:68px;height:68px}.stick-knob{width:32px;height:32px;left:16px;top:16px}.stick-cross::before,.stick-cross::after{top:31px;left:12px;right:12px}.control-copy{font-size:9px}.control-copy strong{margin-bottom:1px;font-size:9px}.keyboard-hint{display:none!important}.objective{font-size:9px}.scores{margin-top:4px}.score-pill{padding:4px 8px}.score-pill.mine{padding:3px 7px}.title-brand{top:13px;left:22px;text-align:left}.title-brand h1{font-size:37px}.title-brand .eyebrow{font-size:7px}.build-tag{display:none}.title-tray{left:47%;right:18px;bottom:24px}.tagline{font-size:13px}.rules{display:block;font-size:8px}.rules span{display:block;line-height:1.7}.primary{font-size:10px;min-height:45px;padding:10px 14px}.small-note{font-size:8px}#game[data-screen="title"] .arena-frame{top:125px;bottom:30px;right:52%}#game[data-screen="title"] .you-marker{display:none}.toast{top:108px;font-size:9px}.panel{max-width:360px}.panel h2{font-size:27px;margin:10px 0}.panel p{font-size:11px;margin-bottom:13px}.leader-row{padding:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Two-thumb play and compact match setup. */
.scores{grid-template-columns:repeat(var(--players,3),minmax(0,1fr))}.score-left{min-width:0}.score-pill{min-width:0}
#game[data-players="5"] .score-left,#game[data-players="6"] .score-left{font-size:6px;gap:3px}#game[data-players="5"] .score-pill,#game[data-players="6"] .score-pill{padding:7px 4px;gap:2px}#game[data-players="5"] .score-pill b,#game[data-players="6"] .score-pill b{font-size:16px}
#controls{justify-content:space-between;gap:8px;padding:0 25px}.control-copy{max-width:110px;text-align:center;font-size:10px}.control-copy strong{font-size:8px;letter-spacing:.08em}.keyboard-hint{font-size:8px}
.action-wrap{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0;width:104px}.action-button{position:relative;width:92px;height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:3px solid #a6b8ab;border-bottom-width:6px;background:#e0e7dc;color:#557464;box-shadow:0 4px 10px #34412f15;touch-action:none;user-select:none;transition:background .12s}.action-button span{font-size:26px;font-weight:900;line-height:1}.action-button strong{font-size:12px;letter-spacing:.05em;margin-top:4px}.action-button[data-ready="true"]{background:#22b9dd;border-color:#178ba5;color:#173f48}.action-button[data-kind="3"]{background:#f1aa66;border-color:#ca773d;color:#572e14}.action-button:disabled{cursor:default;opacity:.65}.action-button:active:not(:disabled){transform:translateY(3px);border-bottom-width:3px}#action-hint{font-size:8px;font-weight:900;letter-spacing:.08em;color:#6b7568;min-height:10px}
.title-brand{top:calc(23px + env(safe-area-inset-top))}.title-brand h1{font-size:57px}.title-tray{bottom:calc(24px + env(safe-area-inset-bottom));left:24px;right:24px}.title-tray .tagline{font-size:17px;margin-bottom:12px}.setup{background:#f8f7efdd;border:1px solid #d2dbcc;border-radius:14px;padding:7px 10px 2px}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mode-options button{min-height:39px;border:0;border-radius:9px;font-size:12px;font-weight:800;background:transparent;color:#647460}.mode-options button[aria-pressed="true"]{background:#d4edf0;color:#164b59;box-shadow:inset 0 0 0 1px #22a6c466}.setup-row{display:flex;justify-content:space-between;align-items:center;min-height:52px;gap:10px;font-size:10px;font-weight:750;color:#5e6d59}.setup-row label{display:flex;align-items:center;gap:5px}.setup-row select{font:inherit;font-size:11px;min-height:44px;padding:0 4px;border:0;background:transparent;color:#273f35;outline-offset:0}.setup-summary{font-size:10px;color:#596c55;line-height:1.4;min-height:28px;margin:10px 0}.title-tray .small-note{font-size:9px}#game[data-screen="title"] .arena-frame{top:173px;bottom:315px}.title-brand h1{margin:12px 0 9px}
@media(max-height:730px){.title-brand{top:15px}.title-brand h1{font-size:43px}.title-brand .eyebrow{font-size:8px}.title-tray{bottom:16px}.title-tray .tagline{font-size:14px;margin-bottom:7px}.setup-summary{margin:5px 0;min-height:26px}.mode-options button{min-height:34px}.setup-row{min-height:46px}.title-tray .small-note{font-size:8px;margin-top:7px}#game[data-screen="title"] .arena-frame{top:139px;bottom:286px}.action-button{width:84px;height:84px}.action-wrap{width:92px}.control-copy{max-width:90px}}
@media(max-height:550px){.title-brand{left:20px;right:auto;top:16px}.title-brand h1{font-size:38px}.title-tray{left:46%;right:14px;bottom:14px}.title-tray .tagline{font-size:12px}.setup{padding:5px}.setup-row{gap:4px;font-size:8px}.setup-row select{font-size:9px}.mode-options button{font-size:10px;min-height:32px}.setup-summary{font-size:8px}#game[data-screen="title"] .arena-frame{top:115px;bottom:25px;right:52%}.action-button{width:61px;height:61px}.action-button span{font-size:18px}.action-button strong{font-size:10px}.action-wrap{width:75px;gap:2px}#action-hint{font-size:7px}.control-copy{max-width:130px}}
@media(max-width:350px){#hud{padding-left:12px;padding-right:12px}#controls{padding:0 16px}.control-copy{max-width:80px;font-size:9px}.joystick{width:90px;height:90px}.stick-knob{left:22px;top:22px}.stick-cross::before,.stick-cross::after{top:42px}.action-wrap{width:88px}.action-button{width:80px;height:80px}.title-tray{left:16px;right:16px}.setup-row{gap:5px}}
/* Keep team names legible when the lobby grows. */
#game[data-players="5"] .scores,#game[data-players="6"] .scores{grid-template-columns:repeat(3,minmax(0,1fr))}
#game[data-players="5"] .score-left,#game[data-players="6"] .score-left{font-size:8px;gap:5px}
#game[data-players="5"] .score-pill,#game[data-players="6"] .score-pill{padding:6px 8px;gap:5px}
#game[data-players="5"]:not([data-screen="title"]) .arena-frame,#game[data-players="6"]:not([data-screen="title"]) .arena-frame{top:174px}
#game[data-players="5"] .toast,#game[data-players="6"] .toast{top:177px}
@media(max-height:550px){#game[data-players="5"]:not([data-screen="title"]) .arena-frame,#game[data-players="6"]:not([data-screen="title"]) .arena-frame{top:145px}#game[data-players="5"] .toast,#game[data-players="6"] .toast{top:145px}}