@font-face{font-family:Barlow Condensed;src:url(/fonts/BarlowCondensed-ExtraBoldItalic.ttf);font-weight:800;font-style:italic;font-display:swap}@font-face{font-family:Barlow Condensed;src:url(/fonts/BarlowCondensed-Black.ttf);font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Barlow Condensed;src:url(/fonts/BarlowCondensed-BoldItalic.ttf);font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Barlow Condensed;src:url(/fonts/BarlowCondensed-SemiBold.ttf);font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Barlow Condensed;src:url(/fonts/BarlowCondensed-Medium.ttf);font-weight:500;font-style:normal;font-display:swap}:root{color-scheme:dark;--bg: #0b0b0d;--panel: #16171b;--panel2: #202229;--line: #2c2f38;--fg: #f4f2ee;--dim: #9a9ea8;--accent: #ffcc33;--p1: #e8393d;--p2: #2f7bf6;--p3: #f5c400;--p4: #2fb35a;--display: "Barlow Condensed", "Avenir Next Condensed", Impact, system-ui, sans-serif;--body: "Barlow Condensed", "Avenir Next", system-ui, sans-serif;--mono: ui-monospace, SFMono-Regular, Menlo, monospace;--ease: cubic-bezier(.2,.9,.3,1);--skew: -8deg}:root.cvd{--p1: #d55e00;--p2: #0072b2;--p3: #f0e442;--p4: #009e73}:root.reduced-motion *{transition:none!important;animation:none!important}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:500 18px/1.35 var(--body);overflow:hidden;-webkit-user-select:none;user-select:none}#app{position:fixed;inset:0}.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:max(20px,env(safe-area-inset-top)) 36px 24px;animation:enter .11s var(--ease);background:linear-gradient(115deg,transparent 0 55%,rgba(255,255,255,.035) 55% 56%,transparent 56%),radial-gradient(120% 80% at 80% 110%,#1a1b22 0%,var(--bg) 60%)}@keyframes enter{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:none}}h1{font:italic 800 clamp(48px,9vw,120px)/.9 var(--display);letter-spacing:-.02em;margin:0 0 8px;text-transform:uppercase}h1.logo{font-size:clamp(36px,6.2vw,86px);max-width:12ch}h1.logo .ell{color:var(--p1);letter-spacing:.02em}h2{font:italic 800 34px/1 var(--display);letter-spacing:0;margin:0 0 14px;text-transform:uppercase}.sub{color:var(--dim);margin:0 0 20px;max-width:60ch}.menu{display:flex;flex-direction:column;gap:8px;max-width:460px}.btn{appearance:none;border:0;background:var(--panel);color:var(--fg);font:italic 800 24px/1 var(--display);text-transform:uppercase;padding:16px 22px;border-radius:4px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;transform:skew(var(--skew));transition:background 60ms,transform 90ms var(--ease);box-shadow:inset 4px 0 0 var(--line)}.btn>*{transform:skew(calc(-1 * var(--skew)));display:inline-block}.btn small{font:500 14px/1 var(--body);color:var(--dim);text-transform:none}.btn:focus,.btn.focus{outline:none;background:var(--fg);color:#0b0b0d;box-shadow:inset 6px 0 0 var(--accent);transform:skew(var(--skew)) translate(8px) scale(1.02)}.btn:focus small,.btn.focus small{color:#333}.btn[disabled]{opacity:.4;cursor:default}.btn.danger:focus{box-shadow:inset 6px 0 0 var(--p1)}.row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.spacer{flex:1}.strip{display:flex;gap:18px;align-items:center;color:var(--dim);font:500 15px/1.3 var(--body);padding-top:12px;border-top:1px solid var(--line);margin-top:auto}.strip b{color:var(--fg)}.kbd{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:1px 7px;font:600 13px/1.4 var(--body);color:var(--fg);background:var(--panel)}.tag{display:inline-block;padding:2px 8px;border-radius:3px;font:700 13px/1.4 var(--body);background:var(--line);color:var(--fg)}.pc{--c: var(--p1)}.mainmenu{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:repeat(4,1fr);gap:10px;flex:1;min-height:0;margin:10px 28px 12px 44px;--skew: -6deg}.panel{position:relative;overflow:hidden;border:0;cursor:pointer;border-radius:6px;background:var(--tint, var(--panel));color:var(--fg);text-align:left;padding:18px 26px 18px 34px;display:flex;flex-direction:column;justify-content:flex-end;transform:skew(var(--skew));transition:transform 90ms var(--ease),filter 90ms;filter:brightness(.85)}.panel>*{transform:skew(calc(-1 * var(--skew)))}.panel.big{grid-row:1 / 5;--tint: linear-gradient(160deg, #c8262a, #7a1216 70%)}.panel .name{font:italic 800 clamp(28px,4.2vw,64px)/.95 var(--display);text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.35)}.panel.big .name{font-size:clamp(64px,9vw,140px)}.panel .hint{font:500 15px/1.2 var(--body);color:#ffffffbf;margin-top:6px}.panel:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translate(-120%)}.panel:focus,.panel.focus{outline:0;filter:brightness(1.08);transform:skew(var(--skew)) scale(1.025);box-shadow:0 0 0 4px var(--fg),0 12px 30px #00000080;z-index:1}.panel:focus:after,.panel.focus:after{transition:transform .45s var(--ease);transform:translate(120%)}.panel.online{--tint: linear-gradient(160deg, #2a6cd8, #163a7a 70%)}.panel.training{--tint: linear-gradient(160deg, #2e9e63, #14512f 70%)}.panel.replays{--tint: linear-gradient(160deg, #8a52d6, #3f2270 70%)}.panel.settings{--tint: linear-gradient(160deg, #5a6272, #2a2f3a 70%)}.select{display:flex;flex-direction:column;flex:1;min-height:0;gap:14px}.roster{display:grid;grid-template-columns:repeat(var(--cols, 9),minmax(0,1fr));gap:6px;align-content:start;justify-content:center;max-width:1180px;margin:0 auto;width:100%}.portrait{position:relative;aspect-ratio:1;border-radius:3px;border:3px solid #0b0b0d;background:linear-gradient(180deg,#2a2d36,#16171b);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:transform 80ms var(--ease),border-color 60ms;box-shadow:0 0 0 1px var(--line)}.portrait .silhouette{position:absolute;inset:0;width:100%;height:100%}.portrait .nm{position:relative;font:italic 800 15px/1 var(--display);text-transform:uppercase;padding:4px 6px;background:#0000008c;text-align:center;letter-spacing:.01em}.portrait .arch{display:none}.portrait .cursors{position:absolute;top:4px;left:4px;display:flex;gap:3px;z-index:2}.cursor{width:20px;height:20px;border-radius:3px;background:var(--c);border:2px solid #fff;font:900 11px/16px var(--display);color:#fff;text-align:center;box-shadow:0 2px 4px #00000080}.portrait.hot{transform:scale(1.08);z-index:1;border-color:#fff;box-shadow:0 0 0 2px var(--fg),0 8px 18px #00000080}.pcards{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;height:168px;margin-top:auto}.pcard{position:relative;display:grid;grid-template-columns:150px 1fr;overflow:hidden;border-radius:6px;background:var(--panel2);border-bottom:6px solid var(--c);transform:skew(var(--skew))}.pcard>*{transform:skew(calc(-1 * var(--skew)))}.pcard .preview{width:170px;height:100%;margin-left:-10px;background:radial-gradient(circle at 50% 90%,#33363f,#16171b 70%)}.pcard .info{padding:12px 18px 10px 8px;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}.pcard .who{font:900 15px/1 var(--display);color:#fff;background:var(--c);display:inline-block;padding:4px 10px;border-radius:3px;align-self:flex-start;text-transform:uppercase}.pcard .name{font:italic 800 clamp(30px,3.6vw,54px)/1 var(--display);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}.pcard .meta{color:var(--dim);font:500 14px/1.3 var(--body)}.pcard .ready{position:absolute;right:14px;top:10px;font:italic 800 18px/1 var(--display);color:var(--accent);text-transform:uppercase}.pcard.locked{box-shadow:inset 0 0 0 3px var(--c)}.readybanner{position:absolute;left:0;right:0;top:42%;text-align:center;font:italic 800 clamp(48px,9vw,120px)/1 var(--display);text-transform:uppercase;color:#fff;background:linear-gradient(90deg,transparent,rgba(232,57,61,.9) 20% 80%,transparent);padding:14px 0;pointer-events:none;animation:slam .16s var(--ease)}@keyframes slam{0%{transform:scaleX(1.4);opacity:0}to{transform:none;opacity:1}}.stages{display:grid;grid-template-columns:repeat(auto-fill,260px);gap:14px}.stage{border:0;padding:0;background:var(--panel);border-radius:6px;overflow:hidden;cursor:pointer;text-align:left;color:var(--fg);box-shadow:0 0 0 1px var(--line);transition:transform 80ms var(--ease)}.stage .thumb{height:150px;background:linear-gradient(180deg,#79a7d9,#b9cfe8 60%,#5e8a45 60% 62%,#6b5644 62%);position:relative}.stage .thumb.omega:after{content:"";position:absolute;left:20%;right:20%;top:60%;height:40%;background:#6b5644}.stage .thumb.arena:before{content:"";position:absolute;left:34%;width:32%;top:30%;height:6px;background:#7a9a50;box-shadow:-70px 40px #7a9a50,70px 40px #7a9a50}.stage .lbl{font:italic 800 22px/1 var(--display);text-transform:uppercase;padding:10px 12px}.stage .lbl small{display:block;font:500 13px/1.3 var(--body);color:var(--dim);text-transform:none}.stage:focus,.stage.focus{outline:0;transform:scale(1.04);box-shadow:0 0 0 3px var(--fg)}.results{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"winner view" "rank view" "menu view" "strip view";column-gap:32px;align-items:start}.results .winnerview{grid-area:view;width:380px;height:440px;border-radius:8px;background:radial-gradient(circle at 50% 85%,#2b3040,#16171b 70%);box-shadow:0 0 0 1px var(--line)}.results .winner{grid-area:winner;font:italic 800 clamp(40px,8vw,110px)/.95 var(--display);text-transform:uppercase;margin-bottom:16px}.results .rank{grid-area:rank;display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.results .place{display:grid;grid-template-columns:90px 1fr auto;gap:16px;align-items:center;background:var(--panel);border-left:8px solid var(--c);padding:10px 16px;border-radius:4px;transform:skew(var(--skew))}.results .place>*{transform:skew(calc(-1 * var(--skew)))}.results .place .ord{font:italic 800 40px/1 var(--display);color:var(--accent)}.results .place .nm{font:italic 800 30px/1 var(--display);text-transform:uppercase}.results .place .st{color:var(--dim);font:500 14px/1.4 var(--body)}.results .menu{grid-area:menu}.results .strip{grid-area:strip}@media(max-width:900px){.results{grid-template-columns:1fr;grid-template-areas:"view" "winner" "rank" "menu" "strip"}.results .winnerview{width:100%;height:300px}}.gamesplash{position:absolute;inset:0;display:grid;place-items:center;background:#0000008c;z-index:6;font:italic 800 clamp(80px,16vw,220px)/1 var(--display);text-transform:uppercase;color:#fff;text-shadow:0 6px 0 var(--p1),0 0 40px rgba(0,0,0,.6);animation:slam .14s var(--ease)}.match{padding:0;background:#000}.match canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.match canvas.gl{background:#1b1f2e}.match canvas:not(.gl){background:transparent}.hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:14px 20px 18px}.hud .top{display:flex;justify-content:space-between;color:var(--dim);font:500 14px/1.3 var(--mono);white-space:pre}.hud .players{display:flex;gap:28px;align-self:center;margin-bottom:4px}.hud .pc{position:relative;display:grid;grid-template-columns:64px auto;gap:10px;align-items:end;min-width:190px;padding:8px 14px 8px 8px;border-radius:6px;background:#00000059;backdrop-filter:blur(3px)}.hud .face{width:64px;height:64px;border-radius:50%;background:#1c2030 center/cover;border:3px solid var(--c);box-shadow:0 2px 8px #0009}.hud .name{position:absolute;left:8px;top:-12px;font:900 13px/1 var(--display);text-transform:uppercase;color:#fff;background:var(--c);padding:3px 8px;border-radius:3px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud .pct{font:italic 800 54px/1 var(--display);letter-spacing:-.01em;transition:transform 80ms var(--ease);color:var(--heat, #fff);text-shadow:0 3px 0 rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.4)}.hud .pct .u{font-size:.55em;margin-left:1px}.hud .pct.pop{transform:scale(1.18)}.hud .stocks{display:flex;gap:3px;min-height:20px;align-items:center;color:var(--c)}.hud .stock{width:20px;height:20px;border-radius:50%;background-size:cover;background-color:#1c2030;border:2px solid var(--c);box-shadow:0 1px 3px #00000080}.hud .meta{color:var(--dim);font:500 12px/1.3 var(--body)}.banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font:italic 800 clamp(48px,12vw,160px)/1 var(--display);text-transform:uppercase;pointer-events:none;animation:pop .2s var(--ease);text-shadow:0 6px 0 rgba(0,0,0,.5)}@keyframes pop{0%{transform:translate(-50%,-50%) scale(1.5);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.match .vs{position:absolute;inset:0;z-index:5;display:grid;place-content:center;gap:18px;background:radial-gradient(circle at 50% 40%,#1c2030,#0b0b0d 70%);transition:opacity .3s var(--ease),transform .3s var(--ease)}.match .vs.out{opacity:0;transform:scale(1.04);pointer-events:none}.match .vs .names{display:flex;align-items:baseline;gap:22px;font:italic 800 clamp(40px,7vw,110px)/1 var(--display);text-transform:uppercase}.match .vs .names .v{font-size:.4em;color:var(--dim);text-transform:lowercase}.match .vs .track{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.match .vs .bar{height:100%;width:0;background:var(--fg);transition:width .12s linear}.form{display:flex;flex-direction:column;gap:6px;max-width:760px}.opt{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--panel);padding:12px 18px;border-radius:4px;transform:skew(var(--skew));box-shadow:inset 4px 0 0 var(--line)}.opt>*{transform:skew(calc(-1 * var(--skew)))}.opt:focus,.opt.focus{outline:0;background:var(--fg);color:#0b0b0d;box-shadow:inset 6px 0 0 var(--accent)}.opt:focus .desc,.opt.focus .desc{color:#444}.opt .lbl{font:italic 800 22px/1 var(--display);text-transform:uppercase}.opt .desc{color:var(--dim);font:500 14px/1.3 var(--body)}.opt .val{font:900 22px/1 var(--display);min-width:90px;text-align:right}.opt .val.off{opacity:.5}.overlay{position:absolute;inset:0;background:#0000008c;display:grid;place-items:center;z-index:8;backdrop-filter:blur(2px)}.dialog{background:var(--panel);border-radius:8px;padding:22px 26px;min-width:360px;box-shadow:0 20px 60px #0009,0 0 0 1px var(--line)}.dialog.wide{min-width:min(920px,92vw)}.pausebody{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}.controls{display:grid;gap:4px;font:500 15px/1.3 var(--body)}.crow{display:grid;grid-template-columns:1.1fr 1.2fr 1fr 1fr;gap:12px;padding:6px 10px;background:var(--panel2);border-radius:4px}.crow.head{background:transparent;color:var(--dim);font:italic 800 14px/1 var(--display);text-transform:uppercase}.crow .ck{font:italic 800 15px/1.3 var(--display);text-transform:uppercase}@media(max-width:760px){.pausebody{grid-template-columns:1fr}}
