:root{--pal-bg:#1a1c2c;--pal-bg-2:#232544;--pal-panel:#29366f;--pal-panel-2:#333c57;--pal-line:#566c86;--pal-line-soft:#3a4468;--pal-text:#94b0c2;--pal-text-h:#f4f4f4;--pal-blue:#41a6f6;--pal-cyan:#73eff7;--pal-orange:#ef7d57;--pal-yellow:#ffcd75;--pal-green:#a7f070;--pal-red:#b13e53;--pal-magenta:#c247ac;--text:var(--pal-text);--text-h:var(--pal-text-h);--text-muted:var(--pal-line);--bg:var(--pal-bg);--border:var(--pal-line);--code-bg:var(--pal-panel-2);--accent:var(--pal-cyan);--accent-hover:var(--pal-blue);--accent-ink:#06222b;--accent-bg:#73eff724;--accent-border:#73eff78c;--social-bg:#333c5799;--pixel-shadow:4px 4px 0 0 #0c0d16;--pixel-shadow-sm:3px 3px 0 0 #0c0d16;--bevel:inset 2px 2px 0 0 #ffffff2e, inset -2px -2px 0 0 #00000073;--shadow:var(--pixel-shadow);--page-gutter-x:clamp(16px, 4vw, 32px);--room-canvas-gutter-x:clamp(4px, 1vw, 8px);--game-frame-width-fallback:960px;--sans:"Pixelify Sans", "Segoe UI", system-ui, sans-serif;--heading:"Press Start 2P", "Pixelify Sans", monospace;--mono:"Pixelify Sans", ui-monospace, Consolas, monospace;--pixel:"Pixelify Sans", monospace;font:18px/150% var(--sans);letter-spacing:.3px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:16px}}#root{width:100%;max-width:1320px;padding:0 var(--page-gutter-x);text-align:start;box-sizing:border-box;flex-direction:column;min-width:0;min-height:100svh;margin:0 auto;display:flex}body{color:var(--text);background-color:var(--pal-bg);background-image:radial-gradient(120% 80% at 50% -10%,#41a6f61f,#0000 60%),linear-gradient(#566c860f 1px,#0000 1px),linear-gradient(90deg,#566c860f 1px,#0000 1px);background-size:100% 100%,32px 32px,32px 32px;background-attachment:fixed;margin:0}button,input[type=button],input[type=submit],input[type=reset],[role=button],a.room-card,a.room-switcher-btn,a.chrome-brand,.touch-joystick{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button,input[type=button],input[type=submit],input[type=reset],[role=button],a.room-card,a.room-switcher-btn,a.chrome-brand{touch-action:manipulation}body:after{content:"";z-index:9999;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,#00000029 0 1px,#0000 1px 3px);position:fixed;inset:0}h1,h2{font-family:var(--heading);color:var(--text-h);text-shadow:2px 2px #0c0d16;font-weight:400}h1{letter-spacing:0;color:var(--pal-yellow);margin:32px 0;font-size:34px;line-height:1.35}@media (width<=1024px){h1{margin:22px 0;font-size:22px}}h2{letter-spacing:0;margin:0 0 12px;font-size:16px;line-height:1.4}@media (width<=1024px){h2{font-size:14px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:0;display:inline-flex}code{background:var(--code-bg);border:2px solid var(--border);padding:2px 8px;font-size:16px;line-height:135%}.muted{color:var(--text);opacity:.8;font-size:.95rem}.chrome{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.game-column{box-sizing:border-box;width:calc(100% + 2 * (var(--page-gutter-x) - var(--room-canvas-gutter-x)));margin-inline:calc(var(--room-canvas-gutter-x) - var(--page-gutter-x));flex-direction:column;flex:1;align-items:stretch;gap:16px;min-width:0;min-height:0;display:flex}.chrome-header,.room-switcher-bar,.player-list{width:min(100%, var(--game-frame-width,var(--game-frame-width-fallback)));box-sizing:border-box;margin-inline:auto}.chrome-header{background:var(--pal-bg-2);border:3px solid var(--pal-line);box-shadow:var(--bevel), var(--pixel-shadow-sm);align-items:center;gap:16px;margin-top:14px;padding:14px 16px;display:flex}.chrome-brand{font-family:var(--heading);color:var(--pal-cyan);letter-spacing:0;text-shadow:2px 2px #0c0d16;margin-inline-end:auto;font-size:14px;font-weight:400;text-decoration:none}@media (hover:hover) and (pointer:fine){.chrome-brand:hover{color:var(--pal-yellow)}}.chrome-user{color:var(--text-h);font-weight:600}.chrome-logout,.login-provider,.login-dev-panel button,.chat-compose button,.room-switcher-btn,.avatar-option{border-radius:0;position:relative}.chrome-logout{border:2px solid var(--pal-line);background:var(--pal-panel-2);color:var(--text-h);font:inherit;cursor:pointer;box-shadow:var(--bevel);padding:8px 14px;font-weight:600}.chrome-logout:not(:disabled):hover{background:var(--pal-red);border-color:var(--pal-red);color:#fff}.chrome-body{flex-direction:column;flex:1;align-items:stretch;width:100%;min-width:0;min-height:0;display:flex}.auth-page{place-items:center;min-height:60vh;display:grid}.login-page{min-height:calc(100svh - 48px);padding:clamp(48px, 10vh, 88px) var(--page-gutter-x) 32px;align-content:start;place-items:start center}.login-shell{border:3px solid var(--pal-line);background:var(--pal-bg-2);width:min(520px,100%);box-shadow:var(--bevel), 6px 6px 0 0 #0c0d16;box-sizing:border-box;border-radius:0;justify-items:center;gap:20px;padding:2.5rem 2rem 2rem;display:grid}.login-title{font-family:var(--heading);letter-spacing:0;text-align:center;color:var(--pal-yellow);text-shadow:3px 3px #0c0d16;margin:0 0 2rem;font-size:clamp(1.4rem,4vw,2rem);font-weight:400;line-height:1.4}.login-status,.login-empty{color:var(--text);margin:0}.login-error{text-align:center;color:#ffd9d4;border:2px solid var(--pal-red);background:#b13e5340;border-radius:0;width:100%;max-width:280px;margin:0;margin-inline:auto;padding:10px 14px;font-size:.95rem}.login-providers{grid-template-columns:1fr;gap:14px;width:100%;max-width:280px;margin-inline:auto;display:grid}.login-provider{width:100%;min-height:46px;font:inherit;text-align:left;cursor:pointer;box-shadow:var(--bevel), var(--pixel-shadow-sm);border:2px solid #0c0d16;border-radius:0;align-items:center;gap:10px;padding:10px 14px;font-size:.95rem;font-weight:600;line-height:1.2;transition:filter .1s steps(2,end);display:flex}.login-provider span{flex:1;min-width:0}.login-provider:not(:disabled):hover{filter:brightness(1.12)}.login-provider-icon{width:20px;height:20px;image-rendering:pixelated;flex-shrink:0}.login-provider--google{color:#1a1c2c;background:#f4f4f4}.login-provider--github{background:var(--pal-panel-2);color:#fff}.login-provider--guest{background:var(--pal-panel);color:var(--text-h)}.login-provider--guest:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}.login-dev{margin-inline:auto;width:100%;max-width:280px;color:var(--text);margin-top:8px;font-size:.9rem}.login-dev summary{cursor:pointer;text-align:center;color:var(--pal-cyan);list-style:none}.login-dev summary:hover{color:var(--pal-yellow)}.login-dev summary::-webkit-details-marker{display:none}.login-dev[open] summary{margin-bottom:12px}.login-dev-panel{gap:10px;display:grid}.login-dev-panel input{border:2px solid var(--border);background:var(--pal-bg);width:100%;color:var(--text-h);font:inherit;box-sizing:border-box;border-radius:0;padding:10px 12px;box-shadow:inset 2px 2px #0006}.login-dev-panel input:focus-visible{border-color:var(--accent);outline:none}.login-dev-panel button{background:var(--pal-blue);color:#06222b;cursor:pointer;font:inherit;box-shadow:var(--bevel), var(--pixel-shadow-sm);border:2px solid #0c0d16;padding:10px 12px;font-weight:600;transition:filter .1s steps(2,end)}.login-dev-panel button:not(:disabled):hover{filter:brightness(1.12)}.login-dev-panel button:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}.chat-compose input{border:2px solid var(--border);background:var(--pal-bg);width:100%;color:var(--text-h);border-radius:0;padding:8px}.chat-compose input:focus-visible{border-color:var(--accent);outline:none}.callout{border:2px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);box-shadow:var(--pixel-shadow-sm);border-radius:0;padding:12px}.lobby-page{flex-direction:column;flex:1;gap:12px;min-width:0;min-height:0;display:flex;overflow:hidden}.lobby-grid{width:min(100%, var(--game-frame-width,var(--game-frame-width-fallback)));box-sizing:border-box;gap:clamp(12px,3vw,18px);min-width:0;margin-inline:auto;display:grid}.lobby-grid h1{text-align:center;margin:clamp(16px,5vw,32px) 0;font-size:clamp(14px,5.5vw,34px)}.avatar-selector{border:3px solid var(--pal-line);background:var(--pal-bg-2);box-shadow:var(--bevel), var(--pixel-shadow);box-sizing:border-box;border-radius:0;gap:clamp(10px,2.5vw,12px);width:100%;min-width:0;padding:clamp(12px,3vw,18px) clamp(10px,3vw,20px);display:grid}.avatar-selector h2{color:var(--pal-cyan);margin:0;font-size:13px}.avatar-selector-preview-row{flex-wrap:wrap;align-items:flex-start;gap:16px;display:flex}.avatar-preview,.avatar-option-sprite{image-rendering:pixelated;border-radius:0;flex-shrink:0;display:block}.avatar-option-sprite--locked{box-sizing:border-box;place-items:center;display:grid}.avatar-preview{border:3px solid var(--pal-line);box-shadow:var(--bevel)}.avatar-selector-selected-label{gap:2px;padding-top:12px;display:grid}.avatar-selector-selected-name{color:var(--text-h);font-weight:600}.avatar-selector-status{min-height:1.2em;font-size:.75rem;line-height:1.2}.avatar-selector-grid{grid-template-columns:repeat(auto-fill, minmax(var(--avatar-option-size), 1fr));--avatar-option-sprite-size:48px;--avatar-option-size:calc(var(--avatar-option-sprite-size) + clamp(12px, 4vw, 20px) + clamp(4px, 1.5vw, 8px) + 1.25em);gap:clamp(6px,2vw,12px);width:100%;min-width:0;display:grid}.avatar-option{border:2px solid var(--pal-line-soft);background:var(--pal-panel-2);font-family:var(--heading);letter-spacing:0;cursor:pointer;box-shadow:var(--bevel);min-width:var(--avatar-option-size);min-height:var(--avatar-option-size);box-sizing:border-box;border-radius:0;align-content:start;justify-items:center;gap:clamp(4px,1.5vw,8px);padding:clamp(6px,2vw,10px) clamp(4px,1.5vw,8px);font-weight:400;transition:background .1s steps(2,end),border-color .1s steps(2,end);display:grid}@media (hover:hover) and (pointer:fine){.avatar-option:hover:not(:disabled):not(.avatar-option--selected){background:var(--pal-panel);border-color:var(--pal-line)}}.avatar-option--selected{background:var(--pal-panel);border-color:var(--pal-yellow);box-shadow:var(--bevel), 0 0 0 2px var(--pal-yellow)}@media (hover:hover) and (pointer:fine){.avatar-option--selected:hover:not(:disabled){background:var(--pal-panel);border-color:var(--pal-yellow)}}.avatar-option--locked{cursor:not-allowed;opacity:.7;background:var(--pal-bg);box-shadow:none}.avatar-option-lock{width:24px;height:24px;fill:var(--pal-yellow);image-rendering:pixelated;filter:drop-shadow(2px 2px #0c0d16)}.avatar-option-lock__shine{fill:#ffffff59}.avatar-option-lock__keyhole{fill:var(--pal-bg)}.avatar-option-coming-soon{color:var(--text-muted);text-align:center;font-family:inherit}.avatar-option-label{color:var(--text-h);overflow-wrap:anywhere;text-align:center;max-width:100%;font-family:inherit;font-size:clamp(.45rem,2vw,.625rem);font-weight:400;line-height:1.4}.room-cards{flex-wrap:nowrap;align-items:stretch;gap:clamp(4px,1.5vw,14px);width:100%;min-width:0;display:flex}.room-card{border:3px solid var(--pal-line);background:var(--pal-panel);min-width:0;font-family:var(--heading);letter-spacing:0;text-align:center;white-space:nowrap;color:var(--pal-cyan);text-shadow:2px 2px #0c0d16;cursor:pointer;box-shadow:var(--bevel), var(--pixel-shadow);border-radius:0;flex:1 1 0;justify-content:center;align-items:center;padding:clamp(6px,1.5vw,28px) clamp(6px,2vw,14px);font-size:clamp(.55rem,2.8vw,12px);font-weight:400;line-height:1.6;text-decoration:none;transition:background .1s steps(2,end),color .1s steps(2,end),border-color .1s steps(2,end);display:inline-flex}.room-card:hover{background:var(--pal-panel-2);color:var(--pal-cyan);border-color:var(--pal-line)}.room-page{flex-direction:column;flex:1;gap:12px;min-width:0;min-height:0;display:flex;overflow:hidden}.room-switcher-bar{flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:clamp(4px,1.5vw,12px);min-width:0;display:flex}.room-switcher-btn{background:var(--pal-panel-2);min-width:0;color:var(--text-h);white-space:nowrap;cursor:pointer;box-shadow:var(--bevel);border:2px solid #0c0d16;border-radius:0;flex:1 1 0;justify-content:center;align-items:center;padding:clamp(6px,1.5vw,9px) clamp(6px,2vw,14px);font-size:clamp(.72rem,2.8vw,.95rem);font-weight:600;text-decoration:none;transition:background .1s steps(2,end),color .1s steps(2,end);display:inline-flex}.room-switcher-btn:hover{background:var(--pal-panel);color:var(--pal-cyan)}.room-switcher-btn--active{border-color:var(--pal-yellow);background:var(--pal-blue);color:#06222b;box-shadow:var(--bevel), 0 0 0 2px var(--pal-yellow);pointer-events:none}.room-shell{flex-direction:column;flex:1;gap:16px;min-width:0;min-height:0;display:flex}.room-stage{flex-direction:column;flex:1;gap:12px;min-width:0;min-height:0;display:flex}.room-game-stack{box-sizing:border-box;flex-direction:column;flex:1;align-items:stretch;gap:12px;width:100%;min-width:0;min-height:0;display:flex;overflow:hidden}.room-panel{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex;overflow:hidden}.room-panel .pixi-mount-host{flex-shrink:0}.player-list-scroll{flex-direction:column;flex:1 1 0;min-height:0;display:flex;overflow:hidden}.player-list-scroll .player-list{flex:1;min-height:0;margin-bottom:0}.room-switcher{flex-wrap:nowrap;flex:auto;justify-content:center;gap:clamp(4px,1.5vw,8px);width:100%;min-width:0;display:flex}.pixi-mount-host{box-sizing:border-box;width:100%;min-width:0;position:relative}.pixi-mount.pixi-mount__surface{width:100%;height:100%;min-height:0}.pixi-mount-bootstrap-overlay{z-index:2;pointer-events:none;position:absolute;inset:0}.pixi-mount-bootstrap-overlay .pixi-mount--fallback{border:3px solid var(--pal-line);box-shadow:var(--bevel);box-sizing:border-box}.room-minimap{z-index:4;opacity:.85;border:2px solid var(--pal-line);width:150px;height:100px;box-shadow:var(--pixel-shadow-sm);pointer-events:none;image-rendering:pixelated;border-radius:0;position:absolute;top:10px;right:15px}.pixi-canvas-frame .touch-controls-slot{z-index:5;pointer-events:none;position:absolute;bottom:calc(26px + 2.125rem);right:5px}.touch-controls-slot .touch-joystick{pointer-events:auto}.touch-joystick{background:color-mix(in srgb, var(--pal-bg) 35%, transparent);border:2px solid color-mix(in srgb, var(--pal-line) 60%, transparent);touch-action:none;border-radius:50%;place-items:center;width:130px;height:130px;display:grid;position:relative;box-shadow:0 0 0 2px #0c0d1666}.touch-joystick-thumb{background:color-mix(in srgb, var(--pal-cyan) 45%, transparent);border:2px solid color-mix(in srgb, var(--pal-line) 80%, transparent);pointer-events:none;will-change:transform;border-radius:50%;width:50px;height:50px}.pixi-canvas-frame{border:3px solid var(--pal-line);box-shadow:var(--bevel);box-sizing:border-box;margin-inline:auto}.pixi-mount canvas{box-sizing:border-box;width:100%;height:100%;image-rendering:pixelated;border:none;border-radius:0;display:block}.pixi-mount.pixi-mount--fallback{background:radial-gradient(ellipse 85% 70% at 50% 38%, #41a6f62e, transparent 58%), linear-gradient(168deg, var(--pal-panel) 0%, var(--pal-bg) 72%);border:none;border-radius:0;place-items:center;display:grid;position:relative;overflow:hidden}.pixi-canvas-loader{z-index:1;flex-direction:column;align-items:center;gap:16px;display:flex;position:relative}.pixi-canvas-loader__rings{width:52px;height:52px;position:relative}.pixi-canvas-loader__ring{border:4px solid var(--pal-line-soft);box-sizing:border-box;border-radius:0;position:absolute;inset:0}.pixi-canvas-loader__ring--track{opacity:.4}.pixi-canvas-loader__ring--spin{border-color:#0000;border-top-color:var(--pal-cyan);border-right-color:var(--pal-blue);animation:.8s steps(8,end) infinite pixi-canvas-loader-spin}@keyframes pixi-canvas-loader-spin{to{transform:rotate(360deg)}}.pixi-canvas-loader__label{margin:0;font-size:.9rem}@media (prefers-reduced-motion:reduce){.pixi-canvas-loader__ring--spin{opacity:.85;animation:none;transform:rotate(200deg)}}.player-list{border:3px solid var(--pal-line);background:var(--pal-bg-2);min-height:0;box-shadow:var(--bevel), var(--pixel-shadow-sm);box-sizing:border-box;flex-direction:column;padding:8px 12px;display:flex}.player-list__title{font-family:var(--heading);color:var(--pal-green);text-shadow:2px 2px #0c0d16;flex-shrink:0;margin:0 0 4px;padding:0 2px;font-size:11px;font-weight:400}.player-list__names{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:1;min-height:0;margin:0 -2px;padding:0;overflow:hidden auto}.player-list ul{gap:8px;margin:0;padding:0;list-style:none;display:grid}.player-list li{color:var(--text-h)}.player-list small{color:var(--text)}.chat{border:3px solid var(--pal-line);background:var(--pal-bg-2);box-shadow:var(--bevel), var(--pixel-shadow-sm);border-radius:0;flex-direction:column;gap:8px;min-height:480px;max-height:640px;padding:12px;display:flex}.chat--canvas-hud{z-index:3;box-sizing:border-box;width:min(330px,100% - 8px);max-width:calc(100% - 8px);min-height:0;max-height:min(294px,100% - 14px);font-family:var(--pixel);-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;box-shadow:none;pointer-events:auto;background:0 0;border:2px solid #0000;border-radius:0;gap:4px;padding:6px 8px;transition:background .12s steps(2,end),border-color .12s steps(2,end);position:absolute;bottom:10px;left:8px}.chat--canvas-hud:focus-within{border-color:var(--pal-line);box-shadow:var(--pixel-shadow-sm);background:#1a1c2cc7}.chat--canvas-hud .chat-feed{flex:auto;min-height:0;font-size:.95rem;line-height:1.35}.chat--canvas-hud .chat-line{border-bottom:none;padding:1px 0}.chat--canvas-hud .chat-user,.chat--canvas-hud .chat-content,.chat--canvas-hud .chat-content *{-webkit-text-stroke:3px #000;paint-order:stroke fill}.chat--canvas-hud .chat-user{color:var(--pal-cyan)}.chat--canvas-hud .chat-content{color:#fff}.chat--canvas-hud .chat-compose{gap:6px}.chat--canvas-hud .chat-compose input{border:2px solid color-mix(in srgb, var(--pal-line) 55%, transparent);background:#1a1c2c8c;border-radius:0;padding:4px 6px;font-family:inherit;font-size:.95rem;transition:background .12s steps(2,end),border-color .12s steps(2,end)}.chat--canvas-hud:focus-within .chat-compose input{background:var(--pal-bg);border-color:var(--pal-line)}.chat--canvas-hud .chat-compose button{background:var(--pal-cyan);color:#06222b;box-shadow:var(--bevel);border:2px solid #0c0d16;border-radius:0;padding-block:4px;padding-inline:8px;font-size:.9rem;transition:filter .12s steps(2,end)}.chat--canvas-hud .chat-compose button:not(:disabled):hover{filter:brightness(1.12)}.chat-feed{text-align:start;flex:1;overflow-y:auto}.chat-compose{gap:8px;display:flex}.chat-compose button{background:var(--pal-cyan);color:#06222b;cursor:pointer;font-weight:600;font:inherit;box-shadow:var(--bevel), var(--pixel-shadow-sm);border:2px solid #0c0d16;border-radius:0;padding-inline:14px;transition:filter .1s steps(2,end),box-shadow .1s steps(2,end)}.chat-compose button:not(:disabled):hover{filter:brightness(1.12)}.chat-compose button:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}.chat-line{border-bottom:1px solid var(--pal-line-soft);padding:4px 0}.chat-content{word-break:break-word}.chat-mention-highlight{background:var(--pal-magenta);color:#fff;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:0;padding:0 4px;box-shadow:inset 0 0 0 1px #0c0d16}.chat--canvas-hud .chat-mention-highlight{background:var(--pal-magenta);color:#fff;box-shadow:inset 0 0 0 1px #000}.chat-user{color:var(--pal-cyan);font-weight:600}