:root{--bg0: #050b16;--bg1: #0b1d33;--panel: rgba(10, 20, 33, .72);--panel-solid: #0a1421;--edge: rgba(120, 190, 230, .16);--edge-strong: rgba(140, 210, 245, .34);--accent: #2de3ff;--accent2: #7c6bff;--danger: #ff4d6d;--good: #4dffa8;--text: #e8f3fb;--text-dim: #8ba6bd;--text-faint: #5b7a92;--radius: 14px;--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--rail: 214px}*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body{height:100%;overflow:hidden;background:var(--bg0);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation}body{position:fixed;inset:0}#app{position:relative;height:100%;width:100%}kbd{font-family:var(--mono);font-size:.68em;padding:.12em .42em;border-radius:5px;border:1px solid var(--edge-strong);background:#ffffff0f;color:var(--text-dim);white-space:nowrap}#play{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;background:radial-gradient(1200px 700px at 50% -10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),linear-gradient(160deg,var(--bg1),var(--bg0) 60%);transition:background .7s ease}#topbar{display:flex;align-items:center;gap:16px;padding:10px clamp(10px,2vw,22px);border-bottom:1px solid var(--edge);background:linear-gradient(180deg,rgba(0,0,0,.42),transparent)}.brand{font-weight:800;letter-spacing:.14em;font-size:15px;white-space:nowrap}.brand span{color:var(--text-dim)}.brand b{color:var(--accent)}.stage-readout{flex:1;text-align:center;line-height:1.15;min-width:0}.stage-line{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:clamp(12px,1.6vw,16px);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-sub{font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:.06em}.topbar-actions{display:flex;gap:6px}.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--edge);background:#ffffff0a;color:var(--text-dim);cursor:pointer;transition:.14s ease}.icon-btn svg{width:17px;height:17px;fill:currentColor}.icon-btn:hover{color:var(--accent);border-color:var(--edge-strong);background:#ffffff17}.icon-btn[aria-pressed=true]{color:var(--danger)}.icon-btn[aria-pressed=true] #muteWaves{opacity:.18}#stage{display:grid;grid-template-columns:var(--rail) minmax(0,1fr) var(--rail);gap:clamp(8px,1.2vw,18px);padding:clamp(8px,1.4vh,16px) clamp(8px,1.5vw,20px);min-height:0}#app[data-hand=left] #stage{direction:rtl}#app[data-hand=left] #stage>*{direction:ltr}aside{background:var(--panel);border:1px solid var(--edge);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:10px;min-height:0;backdrop-filter:blur(9px)}.rail-title{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);font-weight:700}.rail-note{margin-top:auto;font-size:10.5px;line-height:1.45;color:var(--text-dim);border-top:1px solid var(--edge);padding-top:8px}#queueList{display:flex;flex-direction:column;gap:7px;min-height:0}.queue-item{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:10px;border:1px solid var(--edge);background:#00000047;transition:.16s ease}.queue-item canvas{display:block;border-radius:7px}.queue-item .q-label{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:.05em}.queue-item.now{border-color:color-mix(in srgb,var(--accent) 62%,transparent);background:color-mix(in srgb,var(--accent) 11%,rgba(0,0,0,.3));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),0 6px 22px -10px var(--accent)}.queue-item.now .q-label{color:var(--accent);font-weight:700}#boardWrap{position:relative;min-width:0;min-height:0;display:grid}#board{width:100%;height:100%;display:block;border-radius:var(--radius);outline:none;cursor:crosshair}#board:focus-visible{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent),0 0 26px -8px var(--accent)}#app[data-playing=false] #topbar,#app[data-playing=false] #queuePanel,#app[data-playing=false] #statsPanel,#app[data-playing=false] .flow-bar{opacity:0;pointer-events:none}#app[data-playing=false] #stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}#app[data-playing=false] #board{cursor:default;box-shadow:none}.flow-bar{position:absolute;left:50%;transform:translate(-50%);top:4px;width:min(430px,82%);height:24px;border-radius:999px;border:1px solid var(--edge-strong);background:#040a12d1;overflow:hidden;display:grid;place-items:center;backdrop-filter:blur(5px)}.flow-fill{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent),color-mix(in srgb,var(--accent2) 55%,transparent));transform-origin:left;transition:transform 90ms linear}.flow-label{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.15em;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.9)}.flow-bar.urgent{border-color:var(--danger);animation:pulseBar .62s ease-in-out infinite}.flow-bar.urgent .flow-fill{background:linear-gradient(90deg,var(--danger),#ff9f1c)}.flow-bar.flowing .flow-fill{background:linear-gradient(90deg,color-mix(in srgb,var(--good) 55%,transparent),color-mix(in srgb,var(--accent) 60%,transparent))}@keyframes pulseBar{50%{box-shadow:0 0 22px -2px var(--danger)}}.readout{border:1px solid var(--edge);border-radius:10px;background:#0000004d;padding:8px 10px;position:relative}.readout.small{flex:1}.readout-row{display:flex;gap:8px}.readout-label{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);font-weight:700}.readout-label em{font-style:normal;font-family:var(--mono);letter-spacing:0;float:right;color:var(--text)}.readout-value{display:block;font-family:var(--mono);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}.score-readout .readout-value{font-size:28px;color:var(--accent);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}.score-readout.bump .readout-value{animation:bump .26s ease}@keyframes bump{40%{transform:scale(1.14)}}.readout-delta{position:absolute;right:10px;top:8px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--good);opacity:0}.readout-delta.show{animation:floatUp .9s ease-out}@keyframes floatUp{0%{opacity:1;transform:translateY(6px)}to{opacity:0;transform:translateY(-14px)}}.meter{margin-top:6px;height:7px;border-radius:999px;background:#ffffff17;overflow:hidden}.meter-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .22s cubic-bezier(.2,.9,.3,1)}.meter-fill.met{background:linear-gradient(90deg,var(--good),var(--accent));box-shadow:0 0 14px var(--good)}.powerups{display:flex;flex-direction:column;gap:6px}.power{display:grid;grid-template-columns:20px 1fr auto auto;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;border:1px solid var(--edge);background:#0000004d;color:var(--text-dim);cursor:pointer;font:inherit;transition:.14s ease}.power svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}.power svg circle{fill:currentColor;stroke:none}.power-name{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;text-align:left}.power-count{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text)}.power:disabled{opacity:.34;cursor:not-allowed}.power:not(:disabled):hover{color:var(--accent);border-color:var(--edge-strong);background:#ffffff12}.power.armed{color:var(--danger);border-color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent);animation:pulseBar .8s ease-in-out infinite}.power.gained{animation:gained .7s ease}@keyframes gained{0%,to{box-shadow:none}40%{box-shadow:0 0 0 2px var(--good),0 0 24px -4px var(--good)}}.banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(closest-side,#03080eeb,#03080eb8);border-radius:var(--radius);text-align:center;padding:20px;animation:fadeIn .24s ease;z-index:5}@keyframes fadeIn{0%{opacity:0}}.banner-kicker{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);font-weight:700}.banner-title{font-size:clamp(28px,5.2vw,54px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 34px color-mix(in srgb,var(--accent) 55%,transparent);line-height:1}.banner-title.bad{color:var(--danger);text-shadow:0 0 34px color-mix(in srgb,var(--danger) 55%,transparent)}.banner-sub{color:var(--text-dim);font-size:13px;max-width:42ch}.banner-rows{display:flex;flex-direction:column;gap:3px;margin:6px 0 4px;font-family:var(--mono);font-size:12.5px;min-width:min(300px,80%)}.banner-rows div{display:flex;justify-content:space-between;gap:20px;padding:3px 10px;border-radius:6px;background:#ffffff0d}.banner-rows div b{color:var(--accent);font-variant-numeric:tabular-nums}.banner-rows div.total{background:color-mix(in srgb,var(--accent) 16%,transparent)}.btn{font:inherit;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;padding:11px 22px;border-radius:10px;border:1px solid var(--edge-strong);background:#ffffff0d;color:var(--text);cursor:pointer;transition:.14s ease}.btn:hover{background:#ffffff1c;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#041018;box-shadow:0 8px 26px -12px var(--accent)}.btn.primary:hover{filter:brightness(1.12)}.btn.big{padding:15px 40px;font-size:15px}.btn.ghost{background:transparent}.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}.btn.wide{width:100%}.btn kbd{border-color:currentColor;opacity:.7}#overlay{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(680px 460px at 50% 46%,color-mix(in srgb,var(--bg0) 74%,transparent),transparent 74%),radial-gradient(900px 600px at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%),linear-gradient(160deg,color-mix(in srgb,var(--bg1) 52%,transparent),color-mix(in srgb,var(--bg0) 76%,transparent));backdrop-filter:blur(1.5px) saturate(1.15);z-index:20;overflow-y:auto;padding:24px;transition:background .7s ease}#app[data-screen=none] #overlay{display:none}#app[data-screen=pause] #overlay,#app[data-screen=gameover] #overlay{background:#03080ed6;backdrop-filter:blur(11px)}#app[data-screen=howto] #overlay,#app[data-screen=scores] #overlay,#app[data-screen=settings] #overlay{background:radial-gradient(900px 600px at 50% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 62%),linear-gradient(160deg,color-mix(in srgb,var(--bg1) 94%,transparent),color-mix(in srgb,var(--bg0) 97%,transparent));backdrop-filter:blur(10px) saturate(1.05)}.screen{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(880px,100%);animation:rise .3s cubic-bezier(.2,.9,.3,1)}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}.screen[hidden]{display:none}.logo{text-align:center}.logo-main{font-size:clamp(44px,11vw,108px);font-weight:800;letter-spacing:.02em;line-height:.95}.logo-main span{color:var(--text)}.logo-main b{color:var(--accent);text-shadow:0 0 46px color-mix(in srgb,var(--accent) 60%,transparent)}.logo-sub{margin-top:10px;font-family:var(--mono);font-size:clamp(11px,1.8vw,14px);letter-spacing:.34em;text-transform:uppercase;color:var(--text-dim)}.menu{display:flex;flex-direction:column;gap:10px;width:min(300px,100%)}.footnote{font-size:11.5px;color:var(--text-dim);letter-spacing:.06em}.screen-title{font-size:clamp(24px,4.4vw,38px);font-weight:800;letter-spacing:.1em;text-transform:uppercase}.screen-subtitle{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);font-weight:700;align-self:flex-start}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;width:100%}.mode-card{text-align:left;padding:16px;border-radius:var(--radius);border:1px solid var(--edge);background:var(--panel);cursor:pointer;color:var(--text);font:inherit;transition:.16s ease;display:flex;flex-direction:column;gap:7px}.mode-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 16px 40px -22px var(--accent)}.mode-card h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.mode-card p{font-size:12px;line-height:1.5;color:var(--text-dim)}.mode-card .mode-best{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:auto;padding-top:6px;border-top:1px solid var(--edge)}.howto{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;width:100%;align-items:start}.steps{display:flex;flex-direction:column;gap:10px;padding-left:20px}.steps li{font-size:13px;line-height:1.6;color:var(--text-dim)}.steps li b{color:var(--text)}.steps li em{font-style:normal;color:var(--accent)}.legend{display:flex;flex-direction:column;gap:8px}.legend-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-dim)}.legend-row canvas{border-radius:8px;background:#00000057;border:1px solid var(--edge);flex:none}.legend-row b{color:var(--text);display:block;font-size:12.5px}.key-table{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 18px;width:100%;font-size:12px;color:var(--text-dim);border-top:1px solid var(--edge);padding-top:14px}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tab{font:inherit;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:8px 16px;border-radius:999px;border:1px solid var(--edge);background:transparent;color:var(--text-dim);cursor:pointer}.tab[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#041018}.score-table{width:100%;display:flex;flex-direction:column;gap:3px;min-height:120px}.score-row{display:grid;grid-template-columns:34px 1fr auto auto;gap:12px;align-items:center;padding:8px 14px;border-radius:8px;background:#ffffff0a;font-family:var(--mono);font-size:13px}.score-row .rank{color:var(--text-dim)}.score-row .who{font-family:var(--sans);font-weight:700;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-row .lvl{color:var(--text-dim);font-size:11px}.score-row .pts{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}.score-row.fresh{background:color-mix(in srgb,var(--accent) 20%,transparent);animation:gained .9s ease}.empty-note{color:var(--text-dim);font-size:12.5px;text-align:center;padding:26px}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;width:100%}.stat{padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:#00000042}.stat span{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);font-weight:700}.stat b{font-family:var(--mono);font-size:17px;font-weight:700}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;width:100%}.setting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;border-radius:10px;border:1px solid var(--edge);background:#00000042}.setting label{font-size:12.5px;font-weight:600}.setting .hint{display:block;font-size:10.5px;color:var(--text-dim);font-weight:400;margin-top:2px;max-width:30ch}.setting input[type=range]{width:120px;accent-color:var(--accent)}.setting select{font:inherit;font-size:12px;padding:6px 9px;border-radius:8px;border:1px solid var(--edge-strong);background:var(--panel-solid);color:var(--text)}.switch{position:relative;width:42px;height:23px;border-radius:999px;flex:none;border:1px solid var(--edge-strong);background:#ffffff12;cursor:pointer;transition:.16s ease}.switch:after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--text-dim);transition:.16s cubic-bezier(.2,.9,.3,1)}.switch[aria-checked=true]{background:color-mix(in srgb,var(--accent) 40%,transparent);border-color:var(--accent)}.switch[aria-checked=true]:after{left:21px;background:var(--accent)}.row-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.final-score{font-family:var(--mono);font-size:clamp(46px,10vw,84px);font-weight:800;color:var(--accent);text-shadow:0 0 50px color-mix(in srgb,var(--accent) 50%,transparent);font-variant-numeric:tabular-nums}.name-entry{display:flex;flex-direction:column;align-items:center;gap:8px}.name-entry label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--good);font-weight:700}.name-entry input{font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:.22em;text-align:center;width:260px;max-width:100%;padding:10px;text-transform:uppercase;border-radius:10px;border:1px solid var(--accent);background:#0006;color:var(--text)}.name-entry input:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 50%,transparent)}#toast{position:absolute;left:50%;bottom:26px;transform:translate(-50%,20px);padding:10px 20px;border-radius:999px;background:#040a12f0;border:1px solid var(--edge-strong);font-size:12px;letter-spacing:.08em;font-weight:600;opacity:0;pointer-events:none;transition:.26s ease;z-index:40;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%)}@media (max-width: 900px){:root{--rail: 168px}.howto{grid-template-columns:1fr}}@media (max-height: 560px) and (min-width: 721px){:root{--rail: 150px}#topbar{padding:5px 12px}.stage-line{font-size:12px}.readout{padding:5px 8px}.readout-value{font-size:15px}.score-readout .readout-value{font-size:20px}.power{padding:5px 7px}.rail-note{display:none}}@media (max-width: 720px){#topbar{padding:6px 10px;gap:8px}.brand{display:none}.icon-btn{width:30px;height:30px}#stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px;padding:6px}#statsPanel{order:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) auto auto;grid-template-areas:"score meter mult lives" "pow   pow   pow  btn";align-content:start;gap:6px;padding:7px}#statsPanel>.readout.score-readout{grid-area:score}#statsPanel>.readout:not(.score-readout){grid-area:meter}#statsPanel .readout-row{display:contents}#statsPanel .readout-row>.readout:first-child{grid-area:mult}#statsPanel .readout-row>.readout:last-child{grid-area:lives}#statsPanel .powerups{grid-area:pow;flex-direction:row;gap:5px}#statsPanel #btnRelease{grid-area:btn;width:auto;padding:8px 12px;font-size:10px;white-space:nowrap}#statsPanel #btnRelease kbd,#statsPanel .rail-note{display:none}.readout{padding:5px 8px}.readout-label{font-size:8.5px;letter-spacing:.12em}.readout-value{font-size:15px}.score-readout .readout-value{font-size:21px}.readout-delta{top:5px;right:7px;font-size:10px}.meter{margin-top:4px;height:5px}.power{grid-template-columns:16px auto;padding:6px;flex:1;justify-content:center;gap:5px}.power .power-name,.power kbd{display:none}.power svg{width:14px;height:14px}.power-count{font-size:12px}#boardWrap{order:1}.flow-bar{height:20px;top:2px;width:min(320px,90%)}.flow-label{font-size:9.5px;letter-spacing:.1em}#queuePanel{order:2;flex-direction:row;align-items:center;padding:6px;gap:6px}#queuePanel .rail-title{writing-mode:vertical-rl;transform:rotate(180deg);font-size:8px;letter-spacing:.16em}#queuePanel .rail-note{display:none}#queueList{flex-direction:row;flex:1;gap:5px;justify-content:space-around}.queue-item{flex-direction:column;gap:2px;padding:4px}.queue-item .q-label{font-size:8px}.banner-rows{font-size:11px}.howto{grid-template-columns:1fr}}@media (max-width: 520px){.key-table{grid-template-columns:1fr}.btn.big{padding:13px 26px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:60ms!important}}