:root{color-scheme:dark;--bg:#080d16;--panel:#101827;--panel2:#151f30;--line:#2b3749;--text:#eff2eb;--muted:#99a8b8;--lime:#d9f45c;--orange:#ff754a;--gold:#ffcf6b;--panel-solid:#101827;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.wrap{width:min(1240px,calc(100% - 64px));margin:auto}.site-shell{overflow:hidden;background:radial-gradient(circle at 79% 8%,#18263b 0,transparent 26%),var(--bg)}
html:has(#sb:not([hidden])){overflow:hidden}html:has(#sb:not([hidden])) .site-shell{display:none}.match-screen{position:fixed;inset:0;z-index:50;background:#070b14;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none}.match-screen *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.match-screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.match-screen #sb-view{touch-action:none;cursor:url(/client/cursor.svg) 16 16,crosshair;outline:0}.mg-quit,.mg-view3d,.mg-turn,.mg-pad{position:absolute;z-index:5;top:12px;width:40px;height:40px;background:#0b1421e6;border:1px solid #506071;color:white;font-size:22px}.mg-quit{right:12px}.mg-view3d{right:59px;font-size:11px;font-weight:900}.mg-turn{right:106px;font-size:21px;line-height:1}.mg-pad{right:153px;font-size:11px;font-weight:900}.mg-quit:hover,.mg-view3d:hover,.mg-turn:hover,.mg-pad:hover{border-color:var(--lime)}.sb-bar{position:absolute;top:12px;left:12px;z-index:6;display:flex;gap:7px;align-items:start}.btn{min-height:39px;background:var(--lime);color:#131808;padding:0 13px}.btn.ghost{background:#101a2bf2;border-color:#5e7283;color:var(--text)}.sb-menu{position:absolute;top:47px;left:0;display:flex;flex-direction:column;gap:5px;background:#101827f4;border:1px solid #5b6b7e;padding:9px;min-width:185px}.sb-chip{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--text);padding:7px}.sb-chip b{color:var(--lime)}.sb-tune{position:absolute;z-index:7;left:12px;top:65px;max-height:75vh;overflow:auto;width:min(350px,calc(100% - 24px));padding:15px;background:#101827f7;border:1px solid #577084;font-size:11px}.sb-tune-head,.sb-tune-row{display:flex;align-items:center;gap:9px;margin:7px 0}.sb-tune-row label{flex:1}.sb-tune-row input{max-width:110px}.mg-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(390px,calc(100% - 30px));max-height:88vh;overflow:auto;z-index:8;text-align:center;background:#111b2aef;border:1px solid var(--lime);padding:23px;box-shadow:0 25px 80px #000b}.mg-card h3{margin:0 0 17px;color:var(--lime);font-size:23px;letter-spacing:.05em}.mg-sub{color:var(--muted);font-size:12px;line-height:1.5}.mg-sub.xp{color:var(--lime);font-weight:800}.sb-final{display:flex;align-items:center;justify-content:center;gap:16px}.sb-final i{font-size:22px;color:var(--muted)}.sb-team{display:grid;gap:4px}.sb-team b{font-size:40px}.sb-team small{font-size:10px;letter-spacing:.1em}.sb-team.t0{color:var(--lime)}.sb-team.t1{color:var(--orange)}.sb-res{list-style:none;padding:0;text-align:left;display:grid;gap:3px}.sb-res li{display:grid;grid-template-columns:1fr auto auto;gap:8px;background:#1b2937;padding:8px;font-size:11px}.sb-res li.me{outline:1px solid var(--lime)}.sb-res .dim{color:var(--muted)}.mg-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.match-connection{position:absolute;z-index:9;top:50%;left:50%;transform:translate(-50%,-50%);background:#101827ed;border:1px solid var(--orange);padding:17px;color:var(--orange);font-weight:900;font-size:13px;letter-spacing:.12em}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.only-touch{display:none}@media(pointer:coarse),(hover:none){.only-kb{display:none!important}.only-touch{display:revert}.controls.only-touch{display:flex}}.touch .only-kb{display:none!important}.touch .only-touch{display:revert}.touch .controls.only-touch{display:flex}

.match-connection button{margin-left:16px;min-height:36px;padding:0 14px;border:0;background:var(--lime);color:#111609;font:900 12px/1 inherit;letter-spacing:.14em;cursor:pointer}

.clip-toast{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;background:#0d1522ee;border:1px solid #3b4b61;color:#eff2eb;font:800 12px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;white-space:nowrap;max-width:calc(100vw - 32px)}
.clip-toast span{overflow:hidden;text-overflow:ellipsis}
.clip-toast button{min-height:36px;padding:0 14px;border:0;background:var(--lime);color:#111609;font:900 12px/1 inherit;letter-spacing:.14em;cursor:pointer}
.clip-toast a.open{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--lime);color:var(--lime);text-decoration:none;font:900 12px/1 inherit;letter-spacing:.14em}
.clip-toast button:disabled{opacity:.6;cursor:wait}
.clip-toast button.x{background:transparent;color:#a9b6c4;font-size:18px;padding:0 6px}
/* A phone: up under the scoreboard, clear of the thumbs' sticks and buttons. */
@media (pointer:coarse){.clip-toast{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 62px)}}
.skip-btn{position:absolute;right:16px;bottom:30px;z-index:6;min-height:40px;padding:0 16px;border:1px solid #3b4b61;background:#0d1522dd;color:#eff2eb;font:900 12px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.skip-btn:hover{border-color:var(--lime);color:var(--lime)}
.skip-btn.voted{border-color:var(--lime);background:var(--lime);color:#111609}
/* The replay's SAVE button, at the end of the bar with SKIP REPLAY just left of it. Pressed: lime and pulsing until the
   clip is saved; then a tick. */
.save-btn{position:absolute;right:16px;bottom:30px;z-index:6;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid #3b4b61;background:#0d1522dd;color:#eff2eb;cursor:pointer;touch-action:manipulation}
.save-btn:not([hidden]) + .skip-btn{right:64px}
.save-btn:hover{border-color:var(--lime);color:var(--lime)}
.save-btn .i-done{display:none}
.save-btn[data-state=wanted],.save-btn[data-state=ready]{border-color:var(--lime);background:var(--lime);color:#111609;animation:save-pulse 0.9s ease-in-out infinite}
.save-btn[data-state=saved]{border-color:var(--lime);color:var(--lime)}
.save-btn[data-state=saved] .i-save{display:none}
.save-btn[data-state=saved] .i-done{display:block}
@keyframes save-pulse{50%{box-shadow:0 0 0 5px rgba(220,245,90,.28)}}
@media (prefers-reduced-motion:reduce){.save-btn{animation:none!important}}

/* Controller setup stays available over a match and on the home page. */
.pad-dialog{width:min(510px,calc(100% - 24px));max-height:min(90vh,760px);overflow:auto;padding:26px;background:#101827;color:var(--text);border:3px solid var(--lime);border-radius:16px;box-shadow:0 18px 64px #000b}
.pad-dialog::backdrop{background:#050913d9;backdrop-filter:blur(4px)}
.pad-dialog h2{margin:0 42px 8px 0;font-size:27px}.pad-dialog h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin:18px 0 8px}
.pad-dialog p{line-height:1.45}.pad-device{font-weight:700;overflow-wrap:anywhere}.pad-intro{color:var(--muted);font-size:14px}
.pad-close{position:absolute;right:16px;top:12px;border:0;background:none;color:var(--text);font-size:28px}
.pad-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--line)}
.pad-row button,.pad-reset{min-height:34px;padding:6px 12px;border:1px solid #647487;border-radius:8px;background:#202d41;color:var(--text);font-weight:700}
.pad-row button{min-width:126px}.pad-row button[aria-pressed="true"]{border-color:var(--lime);color:var(--lime)}
.pad-row button:hover,.pad-reset:hover{border-color:var(--lime)}.pad-instruction{min-height:42px;color:var(--lime);font-weight:700}
.pad-reset{width:100%;margin-top:6px}.pad-dialog :focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* A lobby's menu: in front of the match until its host starts it. */
.sb-lobby{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:16px;background:#070b14;overflow:auto;touch-action:auto}
.lobby-card{width:min(760px,100%);display:grid;gap:18px;background:#101a2b;border:3px solid #2b3a52;border-radius:14px;padding:22px 22px 20px;color:var(--text)}
.lobby-card header h2{margin:0;font-size:30px;line-height:1.1}
.lobby-card header p{margin:6px 0 0;color:#8f9cb3;font-size:15px}
.lobby-card header b{color:#ffb070;letter-spacing:.14em}
.lobby-teams{display:grid;grid-template-columns:repeat(var(--teams,2),minmax(0,1fr));gap:12px}
.lobby-team{display:grid;gap:10px;align-content:start;background:#0b1220;border:2px solid #2b3a52;border-top:6px solid var(--team);border-radius:10px;padding:12px}
.lobby-team h3{margin:0;font-size:16px;color:var(--team)}
.lobby-team ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lobby-team li{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 10px;background:#16233a;border-radius:7px;font-size:15px;overflow:hidden}
.lobby-team li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lobby-team li.me{outline:2px solid var(--team)}
.lobby-team li.bot,.lobby-team li.empty{background:none;border:2px dashed #2b3a52;color:#6f7c93}
.lobby-team li i{font-style:normal;font-size:12px;color:#8f9cb3;border:1px solid #3b4c66;border-radius:5px;padding:1px 6px;flex:none}
.lobby-team .btn:disabled{opacity:.5;cursor:default}
.lobby-card footer{display:grid;gap:12px}
.lobby-card footer p{margin:0;font-size:16px}
.lobby-actions{display:flex;gap:8px;flex-wrap:wrap}
.lobby-actions #lobby-start{margin-left:auto;min-height:46px;padding:0 22px;font-size:17px}
.lobby-actions #lobby-start:disabled{opacity:.6}
@media (max-width:560px){.lobby-card{padding:16px 14px}.lobby-team{padding:10px 8px}.lobby-team li{padding:0 7px;gap:5px;font-size:14px}.lobby-teams{grid-template-columns:repeat(min(var(--teams,2),2),minmax(0,1fr))}.lobby-actions #lobby-start{margin-left:0;flex:1 1 100%;order:-1}}
.ranked-panel{margin:24px 0;padding:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,1fr);gap:28px;background:#111a2a;border:2px solid #ffe27a;box-shadow:7px 7px 0 #050c17}
.ranked-panel h3{margin:6px 0;font-size:clamp(28px,4vw,46px);color:#ffe27a}
.ranked-panel p{max-width:52ch;line-height:1.5}
.ranked-actions{display:grid;gap:10px;align-content:center}
.ranked-actions button{width:100%}
.ranked-live{border-top:1px solid #65748c;padding-top:12px}.ranked-live h4{margin:0 0 8px;color:#ffe27a;font-size:14px}.ranked-live #ranked-live{display:grid;gap:8px}.ranked-live #ranked-live p{margin:0;color:var(--muted);font-size:12px}.ranked-live .open-match{margin:0}.ranked-live .open-match button{width:auto}
#ranked-status{margin:4px 0 0;color:#e8eadf;min-height:1.5em}
.ranked-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.ranked-tabs button{padding:8px 12px;border:1px solid #65748c;background:#172439;color:#e8eadf;cursor:pointer}
.ranked-tabs button[aria-pressed=true]{background:#ffe27a;color:#101827;border-color:#ffe27a}
@media(max-width:700px){.ranked-panel{grid-template-columns:1fr;padding:18px}}
.mg-sound{position:absolute;z-index:5;top:59px;right:12px;min-width:76px;height:30px;padding:0 8px;background:#0b1421e6;border:1px solid #506071;color:white;font-size:11px;font-weight:900;cursor:pointer}.mg-sound:hover,.mg-sound[aria-pressed=true]{border-color:var(--lime)}
.sb-chat{position:absolute;z-index:7;right:12px;top:62px;width:min(330px,calc(100% - 24px));background:#0b1421e8;border:1px solid #506071;color:var(--text);font:700 12px/1.35 Inter,"Segoe UI",Arial,sans-serif;touch-action:auto}.sb-chat>button{display:block;width:100%;padding:7px 10px;text-align:left;background:#18283a;border:0;color:var(--lime);font-size:11px;font-weight:900;letter-spacing:.08em}.sb-chat-feed{min-height:20px;max-height:118px;overflow:auto;padding:6px 9px;overscroll-behavior:contain;user-select:text}.sb-chat-feed p{margin:2px 0;overflow-wrap:anywhere}.sb-chat-feed b{color:var(--lime);margin-right:6px}.sb-chat-feed .self b{color:#ffe27a}#sb-chat-form{display:flex;border-top:1px solid #506071}#sb-chat-input{flex:1;min-width:0;padding:8px;background:#0b1421;color:var(--text);border:0;outline:0;user-select:text;font-size:12px}#sb-chat-input:focus{box-shadow:inset 0 0 0 1px var(--lime)}#sb-chat-form button{padding:0 9px;border:0;border-left:1px solid #506071;background:#18283a;color:var(--lime);font-size:11px;font-weight:900}
@media(max-width:700px),(pointer:coarse){.sb-chat{top:62px;width:min(250px,calc(100% - 140px))}.sb-chat-feed{max-height:100px}}
@media(max-width:700px){.site-shell .nav{flex-wrap:wrap;gap:8px}.site-shell .nav-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}.site-shell #sound-toggle{font-size:13px;padding:4px 6px;border-width:2px}}