@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--ink:#111923;--cream:#f4ecda;--orange:#ff7547;--line:#ffffff24;font-family:Inter,system-ui,sans-serif;background:var(--ink);color:var(--cream)}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:800 12px Inter,system-ui,sans-serif;letter-spacing:.06em;cursor:pointer;color:inherit;background:transparent;border:1px solid var(--line);border-radius:5px;padding:12px 17px}button:hover{background:#ffffff12}button:focus-visible,a:focus-visible{outline:3px solid #7bedef;outline-offset:4px}[hidden]{display:none!important}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);background:#111923;position:relative;z-index:15}.brand{color:var(--cream);font-size:29px;font-weight:900;letter-spacing:-2px;text-decoration:none}.brand span{font:600 11px Inter,system-ui;letter-spacing:.16em;margin-left:22px;color:#b6bfc6}.top-actions{display:flex;gap:7px}.top-actions button{font-size:10px;padding:10px 12px}kbd{opacity:.5;margin-left:8px}.menu{min-height:min(820px,calc(100svh - 70px));position:relative;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate}.hero-art{position:absolute;inset:0;background:url('assets/cover.webp') center right/cover no-repeat;z-index:-3}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#111923 0%,#111923e8 27%,#11192375 52%,#11192300 80%),linear-gradient(0deg,#111923 0%,transparent 28%)}.intro{padding:58px 6vw 130px;max-width:650px}.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:800;color:var(--orange);margin:0 0 20px}h1{font:900 clamp(72px,9vw,130px)/.78 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.02em;transform:skew(-5deg);margin:30px 0 26px}h1>span{display:block;color:var(--orange)}.dot{color:var(--cream)}.tagline{font-size:clamp(20px,2.5vw,32px);font-weight:800;line-height:1.05;margin:20px 0 16px}.description{font-size:13px;line-height:1.75;max-width:355px;color:#bbc3c8}.primary{border:0;background:var(--orange);color:#171b20;border-radius:4px;font-size:13px;padding:20px 24px;box-shadow:0 5px 0 #a93e25;margin-top:14px}.primary:hover{background:#ff9264}.primary>span{margin-left:40px;font-size:20px}.quick-facts{display:flex;gap:15px;font-size:8px;letter-spacing:.1em;font-weight:800;margin-top:23px;color:#d3cbbf}.best{font-size:9px;letter-spacing:.13em;color:#909aa2;margin-top:23px}.best strong{color:var(--cream);font-size:14px;margin-left:12px}.menu-bottom{position:absolute;bottom:22px;left:6vw;right:6vw;display:flex;gap:6vw;border-top:1px solid var(--line);padding-top:20px}.menu-bottom b{font-size:9px;letter-spacing:.12em;color:#ffb391}.menu-bottom p{font-size:11px;color:#b4bcc2}.about{max-width:820px;margin:auto;padding:65px 25px}.about h2{font:800 36px/1.1 'Barlow Condensed',Impact,sans-serif;max-width:460px}.about p:not(.eyebrow){font-size:13px;color:#a5b1bb;line-height:1.9}.about a{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--orange);display:inline-block;margin-top:15px}footer{padding:25px 5vw;border-top:1px solid var(--line);display:flex;gap:20px;font-size:10px;color:#8c9aa5}footer a{color:inherit}footer span{margin-left:auto;letter-spacing:.18em}
body.playing{overflow:hidden}.playing .about,.playing footer{display:none}#arena{position:relative;height:calc(100svh - 70px);overflow:hidden;background:#222b3b;touch-action:none;user-select:none;-webkit-user-select:none}#game{width:100%;height:100%;display:block;outline:none;touch-action:none}.hud{position:absolute;inset:22px 25px auto;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;text-shadow:0 2px 4px #0008}.score-panel>span,.district-panel>span,.power>span{display:block;font-size:9px;letter-spacing:.15em;font-weight:800}.score-panel>strong{font:800 48px/1.1 'Barlow Condensed',Impact,sans-serif}.score-panel>div{min-width:155px;position:relative;padding-bottom:9px}.score-panel b{font-size:10px;color:#ffb363;letter-spacing:.07em}.score-panel i{position:absolute;bottom:0;left:0;height:3px;background:#ffad6d;width:0}.district-panel{text-align:center}.district-panel strong{display:block;font:800 31px 'Barlow Condensed',Impact,sans-serif;color:#fff3db;margin:4px}.district-panel>span:last-child{color:#fdb682;font-size:8px}.power{width:150px}.power>div{height:7px;background:#111b2bbb;margin-top:9px;transform:skew(-15deg)}.power i{display:block;height:100%;width:100%;background:#72ebdc}.power small{font-size:7px;color:#bfcfcf}.weapon-panel{position:absolute;bottom:25px;left:25px;display:flex;align-items:center;gap:12px;padding:15px 17px;background:#111923e8;border:1px solid #ffffff29;box-shadow:0 8px 30px #0003;border-radius:5px;min-width:310px;pointer-events:auto}.weapon-panel>i{width:5px;height:40px;background:#ffd073}.weapon-panel span{font-size:8px;letter-spacing:.16em;display:block;color:#a9bcc4}.weapon-panel strong{display:block;font:800 27px 'Barlow Condensed',Impact,sans-serif;line-height:1.3}.weapon-panel small{font-size:9px;color:#b9c2c6}.weapon-panel button{margin-left:auto;padding:9px;font-size:16px}.weapon-panel button span{margin-top:5px;font-size:7px}.desktop-help{position:absolute;bottom:30px;right:25px;font-size:10px;font-weight:800;word-spacing:3px;text-shadow:0 1px 5px #000}.desktop-help span{font-size:7px;opacity:.65;word-spacing:normal;margin-right:9px}.toast{position:absolute;top:145px;left:50%;transform:translateX(-50%) skew(-4deg);text-align:center;pointer-events:none;font:800 32px/.95 'Barlow Condensed',Impact,sans-serif;white-space:pre-line;text-shadow:3px 3px 0 #111923;background:#111923df;border-left:5px solid var(--orange);padding:14px 23px;opacity:0;transition:opacity .15s}.toast.show{opacity:1}.toast small{font:600 10px Inter;letter-spacing:.08em;display:block;margin-top:8px}.next{position:absolute;right:25px;top:110px;background:#f4ecda;color:#17252f;font-size:10px}.overlay{position:fixed;inset:70px 0 0;z-index:30;background:#111923cf;backdrop-filter:blur(9px);display:grid;place-items:center;padding:20px;text-align:center}.overlay>div{max-width:490px}.overlay h2{font:900 66px/.9 'Barlow Condensed',Impact,sans-serif;margin:10px 0 24px}.overlay #summary{color:#b9c5cd;font-size:14px}.overlay button{display:block;width:100%;margin:12px 0}.controls-note{font-size:10px!important;line-height:1.9;color:#99a6af;margin-top:22px}.touch{display:none}.stick{position:absolute;bottom:28px;left:26px;width:110px;height:110px;border:2px solid #ffffff35;border-radius:50%;background:#101c2b55;touch-action:none}.stick i{position:absolute;top:32px;left:32px;width:42px;height:42px;border-radius:50%;background:#e7e7d959;border:2px solid #ffffff7d;pointer-events:none}.stick span{position:absolute;bottom:-20px;font-size:8px;font-weight:800;letter-spacing:.14em;width:100%;text-align:center;pointer-events:none}.stick.aim{left:auto;right:26px;border-color:#ffb58475}.aim i{background:#ffae7366;border-color:#ffbc86}.touch-actions{position:absolute;right:16px;bottom:180px;display:flex;gap:7px}.touch-actions button{width:55px;height:55px;border-radius:50%;background:#182637ba;font-size:9px;border-color:#ffffff70;padding:4px}.touch-actions #jump{background:#ff7547bd;color:#111923;width:66px;height:66px;margin-top:-6px}.touch-actions button:active{transform:scale(.94)}
@media(pointer:coarse){.touch{display:block}.desktop-help{display:none}.weapon-panel{bottom:155px;left:18px;min-width:0;padding:9px;max-width:205px;gap:7px}.weapon-panel strong{font-size:19px}.weapon-panel small{display:none}.weapon-panel>i{height:29px}.weapon-panel button{font-size:12px;padding:7px}.weapon-panel span{font-size:6px}}
@media(max-width:700px){.topbar{height:57px;padding:0 16px}.brand{font-size:26px}.brand span{margin-left:13px;font-size:9px;letter-spacing:.09em}.top-actions{gap:4px}.top-actions button{font-size:8px;padding:8px}kbd{display:none}.menu{min-height:820px}.hero-art{background-position:61% top;background-size:auto 580px;opacity:.9}.hero-shade{background:linear-gradient(0deg,#111923 26%,#11192388 65%,#11192344),linear-gradient(90deg,#111923c9,transparent)}.intro{padding:40px 25px 190px;max-width:450px}.intro h1{font-size:102px;margin-top:35px}.description{max-width:280px}.menu-bottom{left:25px;right:25px;gap:18px;bottom:18px}.menu-bottom div{flex:1}.menu-bottom b{font-size:8px}.menu-bottom p{font-size:10px;line-height:1.5}.quick-facts{gap:12px;font-size:7px}.primary{padding:18px 20px}.primary>span{margin-left:15px}#arena{height:calc(100svh - 57px)}.overlay{inset:57px 0 0}.hud{inset:15px 13px auto}.score-panel>strong{font-size:34px}.score-panel>span{font-size:7px}.score-panel>div{min-width:110px}.score-panel b{font-size:8px}.district-panel strong{font-size:25px}.district-panel>span{font-size:7px}.power{width:78px}.power>span{font-size:7px}.power small{display:none}.toast{top:115px;font-size:24px;width:max-content;max-width:85vw;padding:10px 15px}.next{top:86px;right:13px;font-size:8px;padding:9px}.desktop-help{display:none}.weapon-panel{min-width:0;max-width:290px;bottom:18px;left:13px}.weapon-panel strong{font-size:23px}.weapon-panel small{font-size:8px}.overlay h2{font-size:48px}.about h2{font-size:31px}footer span{display:none}}
@media(max-width:700px) and (pointer:coarse){.weapon-panel{bottom:168px;max-width:210px}.weapon-panel strong{font-size:20px}.touch-actions{bottom:172px}.stick{width:100px;height:100px;left:22px}.stick.aim{right:22px}.stick i{left:27px;top:27px}}
@media(max-height:550px) and (pointer:coarse){.topbar{height:45px}#arena{height:calc(100svh - 45px)}.hud{inset:10px 18px auto}.power{width:110px}.score-panel>strong{font-size:30px}.district-panel strong{font-size:22px}.stick{width:86px;height:86px;bottom:25px}.stick i{left:21px;top:21px}.touch-actions{bottom:32px;right:130px;gap:5px}.touch-actions button{width:43px;height:43px;font-size:8px}.touch-actions #jump{width:52px;height:52px}.weapon-panel{bottom:15px;left:140px;padding:8px;max-width:200px}.weapon-panel strong{font-size:19px}.toast{top:95px;font-size:23px}.overlay{inset:45px 0 0}.overlay h2{font-size:36px}.overlay button{display:inline-block;width:auto;margin:5px}.controls-note{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.district-panel small{display:block;color:#ffd19c;font-size:9px;font-weight:800;letter-spacing:.08em;margin:5px 0}.district-panel strong.urgent{color:#ff8057}.district-panel{max-width:240px}#summary{line-height:1.8}@media(max-width:700px){.district-panel{max-width:145px}.district-panel small{font-size:8px}.district-panel>span:last-child{font-size:7px}}
@media(max-width:700px) and (pointer:coarse){.weapon-panel{top:99px;bottom:auto;left:13px;max-width:200px}.weapon-panel button{min-width:44px;min-height:44px}.toast{top:181px}.touch-actions{bottom:158px}.power>span{font-size:6px}}
@media(max-height:550px) and (pointer:coarse){.weapon-panel{top:auto;bottom:15px;left:130px;max-width:190px}.touch-actions{right:125px;bottom:30px}.weapon-panel button{min-width:40px;min-height:40px}.toast{top:100px}.hud{inset:9px 15px auto}}
@media(pointer:coarse){.stick{bottom:calc(28px + env(safe-area-inset-bottom,0px));left:max(22px,env(safe-area-inset-left,0px))}.stick.aim{left:auto;right:max(22px,env(safe-area-inset-right,0px))}.touch-actions{padding-right:env(safe-area-inset-right,0px)}}

/* Touch attack target is a hint, not the boundary of the attack surface. */
.stick.aim{background:radial-gradient(circle,#ff9b5124,#18273855 65%);box-shadow:inset 0 0 24px #ffb46b12;border-style:dashed}.aim i{background:radial-gradient(circle,#fff2c388,#ff9a5b44);box-shadow:0 0 18px #ff9d5d33}.aim.attacking{border-style:solid;border-color:#fff0c4;box-shadow:0 0 24px #ffae7355,inset 0 0 28px #ffb46b33}.aim.attacking i{background:#ffcd96aa}.stick span{white-space:nowrap;font-size:7px;letter-spacing:.06em}

/* Lock the game to the viewport; normal page scrolling/zoom returns in the lobby. */
html:has(body.playing){overflow:hidden;overscroll-behavior:none;touch-action:none}
body.playing{position:fixed;inset:0;width:100%;height:100%;overscroll-behavior:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;--riot-bar:70px}
.playing .topbar{position:fixed;inset:0 0 auto;height:var(--riot-bar);width:100%}
.playing #arena{position:fixed;inset:var(--riot-bar) 0 0;height:auto;width:100%;touch-action:none}
.playing button,.playing .stick,.playing canvas,.playing .overlay{touch-action:none;-webkit-touch-callout:none}
@media(max-width:700px){body.playing{--riot-bar:57px}}
@media(max-height:550px) and (pointer:coarse){body.playing{--riot-bar:45px}}

.chaos-hud{position:absolute;right:25px;top:100px;padding:9px 12px;background:#102137dc;border:1px solid #b8f8ff77;border-left:3px solid #72f8ff;color:#e7fbff;font-size:11px;font-weight:800;line-height:1.8;white-space:pre-line;pointer-events:none;box-shadow:0 0 20px #72f8ff15}
@media(max-width:700px){.chaos-hud{right:13px;top:106px;max-width:155px;font-size:8px;padding:6px 8px}}
@media(max-height:550px){.chaos-hud{top:100px;right:15px;font-size:8px;padding:5px 8px}}

/* Competition is readable before and after a round on narrow screens. */
.lobby-boards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;max-width:620px}.lobby-boards>div,.result-board{border:1px solid #83eefa3d;background:#071c2bcf;border-radius:12px;padding:13px}.lobby-boards h2{font-size:12px;color:#8ef4ff;letter-spacing:.12em;margin:0 0 9px}.rank-row{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #ffffff21;font-size:11px}.rank-row:last-child{border:0}.rank-row strong{color:#ffe3a2;white-space:nowrap}.brief{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#07111bf2;padding:18px;overflow:auto}.brief-card{background:linear-gradient(145deg,#243d50,#131d2c 58%);border:2px solid #8df7ffc4;box-shadow:0 0 65px #32e8ff4c,0 25px 100px #000a;max-width:520px;width:100%;position:relative;padding:clamp(22px,5vw,42px);border-radius:17px}.brief-card h2{font:900 clamp(38px,9vw,68px)/.92 'Barlow Condensed',Impact,sans-serif;margin:12px 0 20px;color:#fff1d3}.brief-card p{line-height:1.5}.brief-card>strong{display:block;color:#85f3ff;margin:22px 0 10px;font-size:clamp(16px,4vw,23px)}.brief-card .primary{width:100%;margin-top:12px}.brief-close{position:absolute;right:12px;top:12px;padding:4px 11px;font-size:25px}.result-place{font-weight:900;color:#83f5ff;line-height:1.4;margin:12px 0}.result-board{margin:10px auto 18px;max-width:440px;max-height:min(29vh,220px);overflow:auto;text-align:left}.overlay>div{max-height:100%;overflow:auto;overscroll-behavior:contain}
@media(max-width:700px){.lobby-boards{grid-template-columns:1fr;max-width:340px}.lobby-boards>div{padding:10px}.rank-row{font-size:10px}.brief-card{max-height:calc(100svh - 30px);overflow:auto}.result-board{max-height:180px}.overlay>div{padding-bottom:20px}}
@media(max-height:550px){.brief-card{max-width:730px;padding:12px 25px}.brief-card h2{font-size:35px;margin:4px 0}.brief-card p{margin:5px 0}.brief-card>strong{margin:8px 0}.brief-card .primary{margin-top:4px}.result-board{max-height:80px}.result-place{margin:4px 0}}

/* Let the leaderboard extend the lobby instead of covering the instructions. */
.menu{min-height:0}.intro{padding-bottom:32px}.menu-bottom{position:relative;bottom:auto;left:auto;right:auto;margin:0 6vw 22px}.brief-card a,.overlay a{color:#8df7ff;font-size:12px;font-weight:800}.overlay a{display:inline-block;margin-bottom:12px}@media(max-width:700px){.menu{min-height:0}.intro{padding-bottom:26px}.menu-bottom{margin:0 25px 20px;left:auto;right:auto}.lobby-boards{margin-top:16px}}

.lobby-boards{grid-template-columns:1fr;max-width:540px}