:root{--bg:#0f1026;--bg-tile:#15173a;--panel:#1a1d45;--edge:#050616;--edge-light:#3b4290;--text:#f2f4ff;--muted:#9ba5e0;--yellow:#ffc531;--red:#e8383d;--red-dark:#a61f34;--blue:#3a86ff;--blue-dark:#2154c8;--pixel:"Press Start 2P", ui-monospace, monospace;font-family:var(--pixel);color:var(--text)}*{box-sizing:border-box}body{touch-action:manipulation;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' shape-rendering='crispEdges'%3E%3Crect x='6' y='10' width='2' height='2' fill='%23343a7a'/%3E%3Crect x='40' y='44' width='2' height='2' fill='%23343a7a'/%3E%3Crect x='52' y='16' width='2' height='2' fill='%23262b62'/%3E%3C/svg%3E"), conic-gradient(var(--bg-tile) 25%, var(--bg) 0 50%, var(--bg-tile) 0 75%, var(--bg) 0);min-height:100dvh;image-rendering:pixelated;background-size:64px 64px,32px 32px;place-items:center;margin:0;display:grid}body:after{content:"";pointer-events:none;z-index:100;background:repeating-linear-gradient(#00000029 0 1px,#0000 1px 3px);position:fixed;inset:0}.hidden{display:none!important}.screen{justify-content:center;align-items:center;gap:32px;padding:24px 16px;display:flex}#menu{flex-direction:column;gap:20px}#mascots{width:256px;height:80px;image-rendering:pixelated}.logo{color:var(--blue);text-shadow:4px 4px 0 var(--blue-dark), 8px 8px 0 var(--edge);margin:0;font-size:clamp(36px,8vw,64px);font-weight:400}.logo span{color:var(--red);text-shadow:4px 4px 0 var(--red-dark), 8px 8px 0 var(--edge);margin-left:16px}.tagline{color:var(--muted);margin:0 0 6px;font-size:11px}.panel{background:var(--panel);box-shadow:0 0 0 4px var(--edge-light), 0 0 0 8px var(--edge), 8px 8px 0 8px var(--edge);flex-direction:column;gap:20px;width:min(340px,100% - 16px);padding:22px;display:flex}#menu:not(.cpu) .cpu-only,#menu:not(.multi) .multi-only,#menu:not(.online) .online-only,#menu.online .not-online,#menu:not(.local) .local-only,#menu.local .not-local{display:none!important}.menu-note{color:var(--muted);margin:0;font-size:9px;line-height:1.8}.pad-list{flex-direction:column;gap:8px;margin:0;padding:0;font-size:9px;line-height:1.7;list-style:none;display:flex}.pad-list li{flex-wrap:wrap;gap:4px 12px;display:flex}.pad-list .ok{color:#4fe07a}.pad-list .hint,.pad-list li.hint{color:var(--muted)}.pad-list .warn{color:#ff8e7a;flex-basis:100%}.local-title{color:var(--yellow);text-shadow:3px 3px 0 var(--edge);font-size:18px;font-weight:400}#play.local .not-local{display:none!important}.stage .board-label{text-align:center;white-space:nowrap;text-overflow:ellipsis;margin-top:10px;position:absolute;top:100%;left:-12px;right:-12px;overflow:hidden}#play:not(.equal) .board-label{display:none}input[type=text]{font:inherit;color:var(--text);box-shadow:inset 2px 2px 0 #0006, 0 0 0 3px var(--edge-light);background:#0f1129;border:0;width:100%;min-width:0;padding:10px;font-size:12px}input[type=text]:focus{outline:3px solid var(--yellow);outline-offset:2px}#join-code{text-transform:uppercase;letter-spacing:4px}.online-menu{flex-direction:column;gap:18px;display:flex}.join-row{gap:10px;display:flex}.join-row button{flex:none}.error{color:#ff8e7a;min-height:0;margin:0;font-size:9px;line-height:1.8}.error:empty{display:none}button.quiet{box-shadow:none;color:var(--muted);background:0 0;font-size:9px}button:disabled{opacity:.45;cursor:not-allowed;filter:none}.lobby-panel{width:min(520px,100% - 16px)}.lobby-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.lobby-head div{flex-direction:column;gap:8px;display:flex}#room-code{letter-spacing:6px;color:var(--yellow);text-shadow:3px 3px 0 var(--edge);font-size:32px;font-weight:400}.status{color:var(--muted);margin:0;font-size:9px;line-height:1.8}.players{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.players li{box-shadow:0 0 0 2px var(--edge);background:#151838;align-items:center;gap:10px;padding:12px;font-size:11px;display:flex}.players li.empty{color:var(--muted);justify-content:center;font-size:9px}.players .who{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.players .meta{color:var(--muted);font-size:8px}.players .tag{background:#262b62;padding:4px 6px;font-size:8px}.players .tag.ready{background:#2f8f4e}.players .tag.host{background:var(--yellow);color:#2b1a00}.players .tag.away{background:#6b2b2b}.players .tag.cpu{background:#5a3d9a}.players .tag.couch{background:#1f6f8b}.players input.guest-name{flex:1;min-width:0;padding:6px 8px;font-size:11px}.players .device{min-width:0!important}.players li.cpu-row,.players li.seat-row{gap:6px}.players li.cpu-row .who:after{content:" · CPU";color:var(--muted);font-size:8px}.players button.mini{flex:none;padding:6px 7px 5px;font-size:8px}.players li.cpu-row .meta,.players li.seat-row .meta{text-align:center;min-width:40px}@media (width<=440px){.players li.cpu-row,.players li.seat-row{flex-wrap:wrap;row-gap:10px}.players li.cpu-row .who,.players li.seat-row .who{flex-basis:100%}}button.add-cpu{color:var(--yellow);align-self:center;font-size:9px}.panel-cols.two{grid-template-columns:1fr 1fr}.lobby-actions{grid-template-columns:1fr 1fr;gap:12px;display:grid}button.on#ready-btn{color:var(--text);background:#2f8f4e}#play:not(.vs) .vs-only,#play:not(.vs):not(.online) .match-only{display:none!important}.hud-rounds{flex-direction:column;gap:8px;display:flex}.hud-rounds .who-name{text-overflow:ellipsis;white-space:nowrap;max-width:90px;overflow:hidden}.hud-rounds .out .who-name{opacity:.45;text-decoration:line-through}#menu.cpu .panel{width:min(600px,100% - 16px)}.seg.seg-mode button{flex:auto;min-width:0;padding:14px 6px 12px;font-size:11px}.panel-cols{grid-template-columns:1fr;gap:28px;display:grid}#menu.cpu .panel-cols{grid-template-columns:1fr 1fr}.panel-cols .col{flex-direction:column;gap:18px;min-width:0;display:flex}.panel h3{color:var(--yellow);margin:0;font-size:12px;font-weight:400}.field small{text-transform:none;color:var(--muted);opacity:.8;font-size:8px}.field{flex-direction:column;gap:12px;display:flex}.field label,.label{color:var(--muted);text-transform:uppercase;font-size:10px}.field output{color:var(--text);margin-left:8px;font-size:14px}input[type=range]{width:100%;accent-color:var(--yellow)}.seg{gap:8px;display:flex}.seg button{flex:1}button{font:inherit;color:var(--text);cursor:pointer;box-shadow:inset -3px -3px 0 #00000059, inset 3px 3px 0 #ffffff2e, 0 0 0 3px var(--edge);background:#2c3274;border:0;border-radius:0;padding:12px 10px 10px;font-size:11px}button:hover{filter:brightness(1.15)}button:active{box-shadow:inset 3px 3px 0 #00000059, 0 0 0 3px var(--edge);transform:translateY(1px)}button.on{background:var(--yellow);color:#2b1a00}button.primary{background:var(--red);padding:14px 10px 12px;font-size:14px}button:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}.controls{color:var(--muted);text-align:center;max-width:820px;font-size:9px;line-height:2.6}.controls.small{text-align:left;margin-top:16px;line-height:2.8}kbd{min-width:20px;color:var(--text);text-align:center;box-shadow:inset -2px -2px 0 #0006, 0 0 0 2px var(--edge);background:#262b62;margin:0 2px;padding:3px 5px 2px;font-family:inherit;font-size:9px;display:inline-block}.audio-toggles{z-index:30;gap:12px;display:flex;position:fixed;top:14px;right:14px}.audio-toggles button{min-width:96px;padding:9px 10px 8px;font-size:9px}.audio-toggles button.off{opacity:.5;text-decoration:line-through}body.touch-play{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body.touch-play .chat-log{touch-action:pan-y}@media (width<=520px){.audio-toggles{gap:8px}.audio-toggles button{min-width:0;padding:9px 11px 8px;font-size:12px}.audio-toggles .txt{display:none}}.volume-panel{background:var(--panel);width:280px;box-shadow:0 0 0 4px var(--edge-light), 0 0 0 8px var(--edge), 6px 6px 0 8px var(--edge);flex-direction:column;gap:14px;padding:16px;display:flex;position:absolute;top:calc(100% + 14px);right:0}.volume-panel label{color:var(--muted);grid-template-columns:60px 1fr 44px;align-items:center;gap:10px;font-size:9px;display:grid}.volume-panel output{color:var(--text);text-align:right}.stage{position:relative}canvas{image-rendering:pixelated;display:block}.hud{flex-direction:column;gap:22px;min-width:130px;display:flex}.hud div{flex-direction:column;gap:8px;display:flex}.hud .hud-col{gap:22px}.hud strong{text-shadow:3px 3px 0 var(--edge);font-size:22px;font-weight:400}#hud-germs{color:var(--yellow)}#hud-speed.flash{animation:.9s step-end speed-flash}@keyframes speed-flash{0%,22%,44%,66%{color:var(--yellow)}11%,33%,55%,77%,to{color:var(--text)}}.hud .germ-counts{flex-flow:wrap;gap:14px 22px;max-width:170px;display:flex}.hud .germ-counts>div{flex-direction:column;gap:6px;min-width:0;display:flex}.hud .germ-counts .who{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:70px;font-size:8px;overflow:hidden}.hud .germ-counts strong{color:#ff8e7a}.hud .germ-counts .mine strong{color:var(--yellow)}.hud .germ-counts .out{opacity:.4}.pips-row{align-items:center;gap:10px;font-size:10px;display:flex;flex-direction:row!important}.pips{gap:6px;display:inline-flex}.pip{clip-path:polygon(50% 0%,62% 36%,100% 38%,70% 60%,80% 98%,50% 76%,20% 98%,30% 60%,0% 38%,38% 36%);background:#343a7a;width:16px;height:16px}.pip.on{background:var(--yellow)}.fast-flag{color:var(--yellow);font-size:9px;line-height:1.8}.opponents{align-self:center;align-items:center;gap:32px;display:flex}.opponent{position:relative}.opponent .label{text-align:center;white-space:nowrap;text-overflow:ellipsis;margin-top:10px;position:absolute;top:100%;left:-12px;right:-12px;overflow:hidden}.opponents.many .opponent .label{font-size:8px}.opponent.out canvas,#play.you-out #board{filter:grayscale()brightness(.55)}.opponent.out:after,#play.you-out .stage:after{content:"OUT";color:#ff8e7a;text-shadow:3px 3px 0 var(--edge);pointer-events:none;justify-content:center;align-items:center;font-size:18px;display:flex;position:absolute;inset:0}#play.you-out .stage:after{z-index:1;font-size:32px}.stage .overlay{z-index:2}.overlay{text-align:center;background:#080918db;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px;display:flex;position:absolute;inset:0}.overlay h2{color:var(--yellow);text-shadow:3px 3px 0 var(--edge);margin:0;font-size:20px;font-weight:400;line-height:1.5}.overlay p{color:var(--muted);margin:0 0 12px;font-size:10px;line-height:1.8}.overlay .buttons{flex-direction:column;gap:14px;width:180px;display:flex}.overlay .buttons button:focus{outline:3px solid var(--yellow);outline-offset:4px}.lobby-panel{position:relative}#app{padding-right:var(--chat-room,0px)}.chat-dock{z-index:20;pointer-events:none;align-items:flex-start;display:flex;position:fixed;top:64px;bottom:16px;right:0}.chat-dock>*{pointer-events:auto}.chat-tab{writing-mode:vertical-rl;align-items:center;gap:10px;margin-top:8px;padding:14px 8px;font-size:10px;display:flex}.chat-tab .badge{writing-mode:horizontal-tb;background:var(--red);color:var(--text);box-shadow:0 0 0 2px var(--edge);padding:4px 5px 3px;font-size:8px}.chat-dock .chat{background:var(--panel);width:290px;height:100%;box-shadow:0 0 0 4px var(--edge-light), 0 0 0 8px var(--edge);margin-right:8px;padding:14px}.chat-dock:not(.open) .chat{display:none}.chat{text-align:left;flex-direction:column;gap:10px;display:flex}.chat-log{min-height:80px;box-shadow:inset 2px 2px 0 #0006, 0 0 0 3px var(--edge-light);overflow-wrap:anywhere;background:#0f1129;flex-direction:column;flex:1;gap:8px;margin:0;padding:8px;font-size:9px;line-height:1.7;list-style:none;display:flex;overflow-y:auto}.chat-log:empty:before{content:"No messages yet.";color:var(--muted);opacity:.7}.chat-log b{color:#8fb8ff;font-weight:400}.chat-log .mine b{color:var(--yellow)}.chat-form input[type=text]{padding:8px;font-size:10px}.chat-form input:disabled{opacity:.5;cursor:not-allowed}.emotes{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.emotes button{padding:4px 0;font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;font-size:16px;line-height:1.2}.emotes button:disabled{filter:grayscale()}.overlay{overflow-y:auto}.voice{flex-direction:column;gap:8px;display:flex}.voice-row{gap:8px;display:flex}.voice-row button{flex:1;padding:9px 6px 8px;font-size:9px}.voice-row button.off{background:#6b2b2b}.voice-row button.quiet{flex:none}.voice-note{color:var(--muted);margin:0;font-size:8px;line-height:1.7}.voice-note:empty{display:none}.voice-list{flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;font-size:9px;list-style:none;display:flex}.voice-list:empty{display:none}.voice-list li{align-items:center;gap:6px;min-width:0;display:flex}.voice-list .name{text-overflow:ellipsis;white-space:nowrap;max-width:110px;overflow:hidden}.voice-list .state{color:var(--muted);font-size:7px}.voice-list .dot{width:8px;height:8px;box-shadow:0 0 0 2px var(--edge);background:#343a7a;flex:none}.voice-list .dot.talking{box-shadow:0 0 0 2px var(--edge), 0 0 8px #4fe07a;background:#4fe07a}.chat-tab .tab-icon{writing-mode:horizontal-tb;font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;font-size:12px}.chat-tab .tab-icon:empty{display:none}.emote-pop{z-index:13;pointer-events:none;flex-direction:column;align-items:center;gap:6px;animation:2.2s ease-out forwards emote-pop;display:flex;position:absolute;top:42%;left:50%}.emote-pop .emoji{filter:drop-shadow(4px 4px 0 var(--edge));font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;font-size:96px;line-height:1}.opponents.many .emote-pop .emoji{font-size:64px}.emote-pop .who{color:var(--text);text-shadow:2px 2px 0 var(--edge);white-space:nowrap;font-size:10px}@keyframes emote-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)}12%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}22%{transform:translate(-50%,-50%)scale(1)}75%{opacity:1;transform:translate(-50%,-60%)scale(1)}to{opacity:0;transform:translate(-50%,-85%)scale(.9)}}@media (width<=620px){#menu.cpu .panel-cols{grid-template-columns:1fr}}#play.compact{justify-content:center;display:grid}#play.compact .stage{grid-area:stage}#play.compact .hud{display:contents}#play.compact .hud-left{margin-top:var(--shoulder,0px);grid-area:left;place-self:start end;gap:14px}#play.compact .hud-right{margin-top:var(--shoulder,0px);grid-area:right;place-self:start;gap:14px}#play.compact .opponents{grid-area:opps;gap:8px;margin-bottom:24px}#play.compact .opponent .label,#play.compact .stage .board-label{font-size:7px;left:0;right:0}#play.compact .hud .controls{display:none}#play.compact .hud strong{font-size:18px}#play.compact .hud .germ-counts{flex-flow:column;gap:8px}#play.compact .hud-rounds .who-name{max-width:64px;font-size:8px}#play.compact .pips{gap:3px}#play.compact .pip{width:11px;height:11px}#play.compact .pips-row{align-items:flex-start;gap:3px;flex-direction:column!important}#play.compact .fast-flag{max-width:60px;font-size:7px}#play.compact .fast-flag .flag-on{display:none}#play.portrait{width:calc(100vw - var(--chat-room,0px));grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"left stage right""opps opps opps";align-items:center;gap:12px 10px;padding-top:64px}#play.portrait .opponents{justify-self:center}#play.portrait .hud-left{justify-self:start}#play.portrait .hud-right{text-align:right;justify-self:end;align-items:flex-end}#play.portrait .hud-right .germ-counts>div{align-items:flex-end}#play.landscape{grid-template-columns:auto auto auto auto;grid-template-areas:"left stage right opps";align-items:start;gap:0 12px;padding:52px 12px 12px}#play.landscape .opponents{align-self:start;gap:10px}#play.portrait.buttons{padding-top:52px;padding-bottom:var(--pad-h,0px);grid-template-areas:"opps opps opps""left stage right"}#play.portrait.buttons .opponents{margin-bottom:28px}#play.landscape.buttons{padding-left:var(--pad-w,0px);padding-right:var(--pad-w,0px)}#play.buttons:not(.compact){padding-bottom:var(--pad-h,0px)}#play.equal{grid-template-areas:none;grid-template-columns:auto repeat(var(--cols,2), auto) auto;grid-template-rows:auto;justify-content:center;align-items:start;gap:34px 24px;padding-top:48px;padding-bottom:46px;display:grid}#play.equal .hud,#play.equal .opponents{display:contents}#play.equal .stage{grid-area:1/2;margin:0}#play.equal .hud-left{margin-top:var(--shoulder,0px);grid-area:1/1/-1;justify-self:end}#play.equal .hud-right{margin-top:var(--shoulder,0px);grid-area:1/-2/-1;justify-self:start}#play.equal .hud .germ-counts{flex-flow:column;gap:8px}#play.equal.big-you .opponent{align-self:center}#play.equal.landscape{gap:34px 12px;padding:52px 12px 12px}#play.equal.portrait{grid-template-columns:repeat(var(--cols,1), auto);gap:34px 10px;padding-top:64px}#play.equal.portrait .stage{grid-column:1}#play.equal.portrait :is(.stage,.opponent){justify-self:center}#play.equal.portrait .hud{flex-direction:row;grid-area:3/1/auto/-1;justify-content:space-between;gap:24px;min-width:100%;display:flex}#play.equal.portrait :is(.hud-left,.hud-right){margin-top:0}#play.equal .stage .board-label,#play.equal .opponent .label{font-size:8px;left:0;right:0}#play.local .hud .germ-counts .mine strong{color:#ff8e7a}#play.equal .stage .overlay{inset:0 var(--chat-w,0px) 0 0;z-index:12;position:fixed}.touch-pad{z-index:15;padding:12px 16px calc(16px + env(safe-area-inset-bottom));pointer-events:none;justify-content:space-between;align-items:flex-end;display:flex;position:fixed;bottom:0;left:0;right:0}.touch-pad .cluster{grid-template-columns:repeat(var(--cols), 58px);pointer-events:auto;grid-template-rows:58px 58px;display:grid}.tbtn{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;justify-content:center;align-items:center;width:58px;height:58px;padding:0;display:flex}.tbtn .ico{fill:currentColor;pointer-events:none;width:32px;height:32px;display:block}.tbtn.down{filter:brightness(1.35);transform:translateY(2px)}.touch-pad .move{--cols:3;grid-template-areas:"l.r"".d."}.touch-pad .move .tbtn{--face:#2c3274}.touch-pad .move [data-action=left]{grid-area:l}.touch-pad .move [data-action=right]{grid-area:r}.touch-pad .move [data-action=softDrop]{grid-area:d}.touch-pad .turn{--cols:2;grid-template-areas:".cw""ccw."}.tbtn.cw{--face:var(--red);grid-area:cw}.tbtn.ccw{--face:var(--blue-dark);grid-area:ccw}.tbtn.round{--pixel-circle:polygon(30% 0, 70% 0, 70% 7%, 84% 7%, 84% 16%, 93% 16%, 93% 30%, 100% 30%, 100% 70%, 93% 70%, 93% 84%, 84% 84%, 84% 93%, 70% 93%, 70% 100%, 30% 100%, 30% 93%, 16% 93%, 16% 84%, 7% 84%, 7% 70%, 0 70%, 0 30%, 7% 30%, 7% 16%, 16% 16%, 16% 7%, 30% 7%);background:var(--edge);box-shadow:none;clip-path:var(--pixel-circle);position:relative}.tbtn.round:before{content:"";clip-path:var(--pixel-circle);background:var(--face);position:absolute;inset:3px;box-shadow:inset -4px -4px #00000059,inset 4px 4px #fff3}.tbtn.round .ico{position:relative}.touch-pad.sides{align-items:center;padding:52px 12px 12px;top:0}.toast{z-index:40;background:var(--panel);box-shadow:0 0 0 3px var(--edge-light), 0 0 0 6px var(--edge);pointer-events:none;padding:10px 14px;font-size:10px;position:fixed;top:64px;left:50%;transform:translate(-50%)}@media (width<=520px){.seg-mode{gap:6px}.seg.seg-mode button{padding:12px 2px 10px;font-size:9px}}body.pad-nav :is(button,input):focus{outline:3px solid var(--yellow);outline-offset:4px}.osk{z-index:40;background:var(--panel);width:min(520px,100% - 32px);box-shadow:0 0 0 4px var(--edge-light), 0 0 0 8px var(--edge), 8px 8px 0 8px var(--edge);flex-direction:column;gap:12px;padding:16px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.osk-preview{white-space:nowrap;min-height:38px;box-shadow:inset 2px 2px 0 #0006, 0 0 0 3px var(--edge-light);background:#0f1129;padding:10px;font-size:14px;overflow:hidden}.osk-keys{grid-template-columns:repeat(10,1fr);gap:8px;display:grid}.osk-keys button{padding:10px 0 8px;font-size:11px}.osk-keys .wide2{grid-column:span 2;font-size:9px}.osk-keys .wide4{grid-column:span 4;font-size:9px}