:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#121212;--surface:#1e1e1e;--surface-2:#2a2a2a;--primary:#ff9800;--on-primary:#1f1200;--secondary:#40c4ff;--text:#ffffffeb;--text-dim:#fff9;--danger:#ef5350;--on-danger:#290d0c;--ok:#66bb6a;--warn:#ffb300;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--mono:ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;--shadow-1:0 2px 6px #00000059;--shadow-2:0 6px 18px #00000073;--shadow-3:0 12px 40px #0009;--focus-ring:2px solid var(--secondary)}*,:before,:after{box-sizing:border-box}html,body,h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0}button,input,select{font:inherit;color:inherit}img,canvas{max-width:100%}[hidden]{display:none!important}html{height:100%}body{min-height:100vh;min-height:100dvh;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;accent-color:var(--primary);line-height:1.4;overflow-x:hidden}a{color:var(--secondary)}a:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:4px}::selection{background:#ff980073}body:before{content:"";z-index:0;pointer-events:none;opacity:.45;background-image:radial-gradient(circle,#ffffff61 1px,#0000 1.6px),radial-gradient(circle,#40c4ff4d 1px,#0000 1.6px),radial-gradient(circle,#ff980038 1px,#0000 1.6px);background-position:12px 34px,78px 120px,150px 40px;background-size:190px 190px,290px 290px,370px 370px;animation:120s linear infinite starfield;position:fixed;inset:0}@keyframes starfield{to{background-position:12px 1174px,78px 1280px,150px 1150px}}body:after{content:"";z-index:0;pointer-events:none;background-image:radial-gradient(120% 90% at 50% 38%,#0000 45%,#00000080 100%),linear-gradient(#ffffff07 1px,#0000 1px),linear-gradient(90deg,#ffffff07 1px,#0000 1px);background-size:100% 100%,64px 64px,64px 64px;position:fixed;inset:0}#app{z-index:1;position:relative}.noscript{z-index:1;min-height:100vh;text-align:center;justify-content:center;align-items:center;min-height:100dvh;padding:1.5rem;font-size:1.2rem;display:flex;position:relative}.screen{display:none}.screen.active{min-height:100vh;min-height:100dvh;padding:24px;padding:calc(24px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));flex-direction:column;justify-content:center;align-items:center;animation:.22s ease-out both screen-in;display:flex}@keyframes screen-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.game-title{letter-spacing:-.02em;text-align:center;font-size:clamp(2.6rem,11vw,4.8rem);font-weight:800;line-height:1.05}.title-portal{color:var(--secondary);text-shadow:0 0 18px #40c4ff8c,0 0 46px #40c4ff40}.title-breakout{color:var(--primary);text-shadow:0 0 18px #ff98008c,0 0 46px #ff980040}.tagline{text-align:center;max-width:46ch;color:var(--text-dim);margin:12px 0 30px}.menu-buttons{flex-direction:column;gap:14px;width:min(320px,86vw);display:flex}.menu-buttons .btn{width:100%}.menu-footer{color:var(--text-dim);margin-top:34px;font-size:.8rem}#screen-levels.active{height:100vh;justify-content:flex-start;height:100dvh;padding:0;overflow:hidden}.screen-header{width:min(100%,920px);padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));align-items:center;gap:12px;display:flex}.screen-header h2{font-size:1.5rem}.level-grid{width:min(100%,920px);padding:4px 16px calc(24px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain;flex:1;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));grid-auto-rows:max-content;align-content:start;gap:12px;display:grid;overflow-y:auto}.level-tile{aspect-ratio:1;background:var(--surface);color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;border:1px solid #ffffff14;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:4px;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;position:relative;overflow:hidden}.level-tile:hover{box-shadow:var(--shadow-2);border-color:#ffffff2e;transform:translateY(-3px)}.level-tile:focus-visible{outline:var(--focus-ring);outline-offset:2px}.level-tile:disabled,.level-tile.locked{opacity:.45;cursor:default;pointer-events:none}.level-tile.done{border-color:#66bb6a59}.tile-num{font-size:1.5rem;font-weight:700;line-height:1}.tile-name{max-width:calc(100% - 8px);color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:.62rem;overflow:hidden}.tile-glyph{font-size:.8rem;line-height:1;position:absolute;top:6px;right:8px}.tile-lock{filter:grayscale()}.tile-check{color:var(--ok);font-weight:700}.tile-play{color:var(--primary);opacity:0;transition:opacity .15s}.level-tile:hover .tile-play,.level-tile:focus-visible .tile-play{opacity:1}.tile-best{color:var(--ok);font-size:.6rem}#screen-game.active{padding:0}#game-canvas{width:100vw;height:100vh;max-width:100vw;height:100dvh;max-height:100vh;touch-action:none;max-height:100dvh;margin:auto;display:block}.net-banner{top:calc(10px + env(safe-area-inset-top,0px));z-index:30;white-space:nowrap;box-shadow:var(--shadow-2);background:var(--surface-2);border-radius:999px;padding:8px 18px;font-size:.85rem;font-weight:500;position:fixed;left:50%;transform:translate(-50%)}.net-banner.lost{background:var(--warn);color:#201200}.net-banner.ok{background:var(--ok);color:#06230b;animation:.2s ease-out banner-in}@keyframes banner-in{0%{opacity:0;transform:translate(-50%)translateY(-8px)}}.btn{letter-spacing:.06em;text-transform:uppercase;height:48px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:none;border-radius:24px;justify-content:center;align-items:center;gap:8px;padding:0 24px;font-size:.9rem;font-weight:500;transition:box-shadow .15s,filter .15s,background-color .15s,transform .1s;display:inline-flex;position:relative;overflow:hidden}.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.97)}.btn:focus-visible{outline:var(--focus-ring);outline-offset:2px}.btn:disabled{opacity:.38;pointer-events:none}.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-1)}.btn-primary:hover{box-shadow:var(--shadow-2)}.btn-tonal{background:var(--surface-2)}.btn-tonal:hover{box-shadow:var(--shadow-1);background:#333}.btn-text{color:var(--primary)}.btn-text:hover{filter:none;background:#ff98001a}.btn-danger{background:var(--danger);color:var(--on-danger);box-shadow:var(--shadow-1)}.btn-icon{letter-spacing:0;text-transform:none;border-radius:50%;width:48px;height:48px;padding:0;font-size:1.3rem}.btn-icon:hover{filter:none;background:#ffffff14}.pause-fab{top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:20;box-shadow:var(--shadow-2);background:#2a2a2ad9;display:none;position:fixed}.pause-fab:hover{background:#3c3c3ce6}@media (pointer:coarse){.pause-fab{display:inline-flex}}.btn .ripple,.level-tile .ripple{opacity:.22;pointer-events:none;background:currentColor;border-radius:50%;animation:.45s ease-out forwards ripple-grow;position:absolute;transform:scale(0)}@keyframes ripple-grow{to{opacity:0;transform:scale(1)}}@keyframes ripple-pulse{0%{opacity:.18}to{opacity:0}}dialog{overscroll-behavior:contain;background:var(--surface);max-width:min(92vw,560px);max-height:85vh;color:var(--text);box-shadow:var(--shadow-3);border:none;border-radius:16px;padding:24px;overflow:auto}dialog[open]{animation:.2s ease-out dlg-in}@keyframes dlg-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009}#dlg-options,#dlg-multiplayer,#dlg-how,#dlg-versus,#dlg-lobby{width:min(92vw,560px)}#dlg-pause,#dlg-level-end,#dlg-confirm-quit{width:min(92vw,380px)}dialog h2{margin-bottom:8px;font-size:1.4rem}dialog h3{letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin:22px 0 8px;font-size:.85rem;font-weight:600}.dialog-actions{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}.dialog-actions-stack{flex-direction:column;align-items:stretch}.dialog-actions-stack .btn{width:100%}.field-row{justify-content:space-between;align-items:center;gap:16px;margin:12px 0;display:flex}.field-row label{flex:1;font-size:.95rem}.field-row input[type=range]{flex:0 0 min(200px,48%)}.field-row select{flex:0 0 min(180px,45%)}.field-row input[type=text]{flex:0 0 min(220px,55%)}.field-row select,.field-row input[type=text]{min-width:0;max-width:100%}input[type=range]{appearance:none;cursor:pointer;height:32px;accent-color:var(--primary);background:0 0;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--primary) var(--fill,50%), var(--surface-2) var(--fill,50%));border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--primary);border-radius:50%;width:18px;height:18px;margin-top:-7px;transition:box-shadow .15s;box-shadow:0 1px 4px #00000080}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px #ff980026}input[type=range]::-moz-range-track{background:var(--surface-2);border-radius:2px;height:4px}input[type=range]::-moz-range-progress{background:var(--primary);border-radius:2px;height:4px}input[type=range]::-moz-range-thumb{background:var(--primary);border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #00000080}input[type=range]:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:6px}input.switch{appearance:none;background:var(--surface-2);cursor:pointer;border:1px solid #ffffff40;border-radius:14px;flex:none;width:48px;height:28px;margin:0;transition:background-color .18s,border-color .18s;position:relative}input.switch:before{content:"";background:#ffffffd9;border-radius:50%;width:20px;height:20px;transition:transform .18s,background-color .18s;position:absolute;top:50%;left:3px;transform:translateY(-50%);box-shadow:0 1px 3px #00000080}input.switch:checked{border-color:var(--primary);background:#ff980073}input.switch:checked:before{background:var(--primary);transform:translate(20px,-50%)}input.switch:hover:before{box-shadow:0 0 0 8px #ffffff12,0 1px 3px #00000080}input.switch:focus-visible{outline:var(--focus-ring);outline-offset:2px}select,input[type=text]{background:var(--surface-2);color:var(--text);border:none;border-bottom:1px solid #fff6;border-radius:8px 8px 0 0;padding:10px 12px;transition:border-color .15s,box-shadow .15s,background-color .15s}select:hover,input[type=text]:hover{background:#313131}select:focus,input[type=text]:focus{border-bottom-color:var(--primary);box-shadow:0 1px 0 0 var(--primary);outline:none}input[type=text]::placeholder{color:#ffffff59}#mp-join-code{font-family:var(--mono);letter-spacing:.08em}.binds-list{grid-template-columns:1fr auto;align-items:center;gap:8px 16px;margin-top:8px;display:grid}.bind-label{font-size:.95rem}.bind-key{min-width:96px;height:36px;font-family:var(--mono);color:var(--text);background:var(--surface-2);cursor:pointer;border:1px solid #ffffff47;border-bottom-width:3px;border-radius:8px;padding:0 12px;font-size:.85rem;transition:border-color .15s,color .15s,background-color .15s}.bind-key:hover{background:#333}.bind-key:focus-visible{outline:var(--focus-ring);outline-offset:2px}.bind-key.listening{color:var(--secondary);border-color:var(--secondary);animation:1s ease-in-out infinite bind-pulse}@keyframes bind-pulse{0%,to{box-shadow:0 0 #40c4ff66}50%{box-shadow:0 0 0 6px #40c4ff00}}.mp-section{margin:16px 0}#mp-room-box{margin-top:14px}#mp-room-box p{color:var(--text-dim);font-size:.9rem}.room-code{font-family:var(--mono);letter-spacing:.25em;color:var(--secondary);-webkit-user-select:all;user-select:all;margin:6px 0 12px;font-size:1.6rem;display:block}.mp-status{min-height:1.4em;color:var(--text-dim);margin-top:10px;font-size:.9rem}.lobby-players{align-items:stretch;gap:12px;margin:16px 0 8px;display:flex}.lobby-player{background:var(--surface-2);text-align:center;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:3px;min-width:0;min-height:68px;padding:12px 10px;font-weight:600;transition:opacity .15s,border-color .15s,background-color .15s;display:flex}.lobby-player small{letter-spacing:.04em;text-transform:uppercase;max-width:100%;color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:.66rem;font-weight:500;overflow:hidden}.lobby-player.is-host{color:var(--primary);background:#ff98001f;border-color:#ff980080}.lobby-player.is-guest{color:var(--secondary);background:#40c4ff1f;border-color:#40c4ff80}.lobby-player.waiting{background:var(--surface-2);color:var(--text-dim);opacity:.6;border-style:dashed;border-color:#ffffff2e}.lobby-vs{letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);flex:none;align-self:center;font-size:.78rem;font-weight:700}.lobby-invite{margin:10px 0 4px}.lobby-invite .hint{margin-bottom:6px}.lobby-host,.lobby-guest{margin:8px 0 4px}.lobby-guest .hint{margin:8px 0}.lobby-preview{flex-direction:column;align-items:center;gap:6px;margin:10px 0 4px;display:flex}.lobby-preview canvas{background:#0b1017;border-radius:10px;width:min(240px,62%);display:block;box-shadow:0 2px 10px #00000073}.lobby-preview-name{color:var(--text-dim);letter-spacing:.02em;font-size:.82rem}.le-stats{grid-template-columns:auto 1fr;gap:8px 16px;margin-top:12px;display:grid}.le-label{color:var(--text-dim);font-size:.9rem}.le-value{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.new-best{background:var(--primary);color:var(--on-primary);letter-spacing:.06em;border-radius:999px;margin-left:8px;padding:2px 8px;font-size:.65rem;font-weight:700;animation:.3s cubic-bezier(.3,1.6,.5,1) both pop-in;display:inline-block}@keyframes pop-in{0%{opacity:0;transform:scale(.6)}}.toast{inset:auto auto auto 50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--surface-2);max-width:92vw;color:var(--text);text-align:center;box-shadow:var(--shadow-2);opacity:0;pointer-events:none;border:none;border-radius:999px;margin:0;padding:10px 20px;font-size:.9rem;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%)translateY(12px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.c-orange{color:var(--primary);font-weight:600}.c-blue{color:var(--secondary);font-weight:600}.hint{color:var(--text-dim);margin:4px 0 12px;font-size:.85rem}.how-list{flex-direction:column;gap:12px;margin-top:12px;list-style:none;display:flex}.how-list li{padding-left:20px;line-height:1.45;position:relative}.how-list li:before{content:"›";color:var(--primary);font-weight:700;position:absolute;left:4px}@media (max-width:420px){dialog{padding:16px}.level-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}.field-row{flex-wrap:wrap}.field-row input[type=range],.field-row select{flex:100%}.lobby-preview canvas{width:min(200px,70%)}.lobby-players{gap:8px}.lobby-player{min-height:60px;padding:10px 6px}.lobby-vs{font-size:.7rem}}@media (prefers-reduced-motion:reduce){body:before{display:none}.screen.active,dialog[open],.net-banner.ok,.new-best,.bind-key.listening{animation:none}.bind-key.listening{box-shadow:0 0 0 2px #40c4ff66}.btn .ripple,.level-tile .ripple{animation:.18s ease-out forwards ripple-pulse;transform:scale(1)}.btn,.level-tile,.tile-play,input.switch,input.switch:before,select,input[type=text],.lobby-player,.bind-key{transition:none}input[type=range]::-webkit-slider-thumb{transition:none}.btn:active,.level-tile:hover{transform:none}.toast{transition:opacity .2s;transform:translate(-50%)}}.update-banner{z-index:40;background:var(--surface-2,#1b232c);border:1px solid #40c4ff59;border-radius:14px;align-items:center;gap:10px;max-width:min(92vw,520px);padding:10px 12px 10px 18px;animation:.26s ease-out banner-rise;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 8px 28px #0000008c}.update-banner[hidden]{display:none}.update-banner #update-text{color:var(--text,#e6edf3);font-size:.92rem}.update-banner .btn{padding:8px 14px;font-size:.85rem}@keyframes banner-rise{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}@media (max-width:420px){.update-banner{flex-wrap:wrap;justify-content:center;padding-left:12px}.update-banner #update-text{text-align:center;flex:100%}}@media (prefers-reduced-motion:reduce){.update-banner{animation:none}}