:root{color-scheme:dark;--bg:#0b0f1a;--panel:#101827;--text:#eaf2ff;--muted:#91a0b8;--cyan:#22d3ee;--purple:#a78bfa;--line:rgba(167,187,219,.13);--board-h:min(56dvh,600px);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 15% 15%,#a78bfa0e,transparent 45%),radial-gradient(ellipse at 85% 90%,#22d3ee0c,transparent 48%),var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 18%,#fff6 50%,transparent 100%),radial-gradient(1px 1px at 38% 62%,#fff5 50%,transparent 100%),radial-gradient(1px 1px at 76% 26%,#fff4 50%,transparent 100%),radial-gradient(1px 1px at 87% 78%,#fff5 50%,transparent 100%);background-size:330px 310px,470px 430px,390px 540px,630px 620px}
button,select,input{font:inherit}button{color:inherit;cursor:pointer}button,a,select,input{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button:disabled{cursor:default;opacity:.4}button svg,.install-link svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px;flex-shrink:0}button h2{pointer-events:none}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.app{width:min(100%,870px);margin:0 auto;padding:24px 26px 16px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px}.brand{display:flex;align-items:center;gap:10px}.brand h1{font-size:21px;letter-spacing:2px;font-weight:800;margin:0;line-height:1}.brand h1>span:first-child{display:block;font-size:10px;letter-spacing:3px;color:var(--muted);margin-bottom:5px}.brand .edition{display:none}.toolbar{display:flex;gap:6px}.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#ffffff04;display:grid;place-items:center;color:#b0c0db}.icon-button:hover{background:#ffffff0a;color:var(--text)}.statusline{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);padding:10px 0 16px;min-height:44px;font-size:11px;letter-spacing:.1px}.connection{display:flex;align-items:center;gap:7px;color:var(--muted)}.connection i{width:6px;height:6px;background:#e7b866;border-radius:50%;flex-shrink:0}.connection i.ready{background:#34d399;box-shadow:0 0 10px #34d39933}.install-link{display:flex;align-items:center;gap:5px;font-size:11px;background:transparent;border:0;color:var(--cyan);padding:5px 0}.install-link svg{width:15px;height:15px}.arcade{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:start}.play-column{min-width:0}.scorebar{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px;padding:0 0 14px}.scorebar>div{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line);padding-left:15px}.scorebar>div:first-child{border:0;padding:0}.stat-label,.mini-card h2{font-size:10px;text-transform:uppercase;letter-spacing:1.7px;font-weight:600;color:var(--muted)}.scorebar strong{font-size:24px;line-height:1.1;letter-spacing:.5px;font-variant-numeric:tabular-nums}.scorebar .score-stat strong{color:var(--cyan)}.play-area{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:12px;align-items:stretch}.board-shell{position:relative;isolation:isolate;min-width:0;aspect-ratio:1/2;border:1px solid #26364d;border-radius:12px;overflow:hidden;background:#090f1c;box-shadow:0 12px 35px #0004,0 0 30px #22d3ee04;touch-action:none;user-select:none;-webkit-user-select:none}#screen{display:block;width:100%;height:100%;touch-action:none}.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff02 0,#ffffff02 1px,transparent 1px,transparent 4px);opacity:.5}.queuebar{display:flex;flex-direction:column;gap:10px;min-width:0}.mini-card{border:1px solid var(--line);background:linear-gradient(145deg,#121b2b,#0e1625);border-radius:12px;text-align:center;min-width:0;padding:11px 6px}.mini-card h2{margin:0 0 8px;font-size:9px;letter-spacing:1.5px}.mini-card canvas{display:block;width:100%;height:auto;margin:auto}.next-card{flex:1}.next-card canvas{max-height:250px;object-fit:contain}.hold-card{width:100%;padding-bottom:8px;transition:opacity .1s}.hold-card canvas{max-height:47px;object-fit:contain}.hold-card>span{font-size:9px;color:var(--muted);display:block;margin-top:3px}.hold-card.unavailable{opacity:.45}.best-card{width:100%;padding:9px 4px}.small-crown{color:#eacb79;font-size:18px}.best-card h2{margin:3px 0 5px}.best-card strong{display:block;font-size:13px;font-variant-numeric:tabular-nums;color:#eacb79;overflow-wrap:anywhere}.pause-button{display:flex;align-items:center;justify-content:center;gap:5px;border-radius:10px;border:1px solid var(--line);background:#ffffff04;min-height:44px;font-size:10px;color:#a9bad4;padding:6px}.pause-button svg{width:13px;height:18px;stroke-width:2.7}.touch-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px;touch-action:none;user-select:none;-webkit-user-select:none}.control{border:1px solid #28354a;border-radius:11px;background:linear-gradient(180deg,#1a263a,#141f31);height:54px;display:flex;align-items:center;justify-content:center;gap:5px;box-shadow:0 3px 0 #060b14;touch-action:none;user-select:none;-webkit-user-select:none}.control.utility{height:45px;font-size:10px;color:#a5b5ce}.utility svg{width:18px;height:18px}.rotate-icon{font-family:system-ui,sans-serif;font-size:25px;line-height:1}.rotate-icon.flip{font-size:23px}.control.accent{color:var(--purple);border-color:#a78bfa40}.direction svg{width:26px;height:26px}.control.pressed{background:#283c56;border-color:#22d3ee99;transform:translateY(2px);box-shadow:0 1px 0 #060b14}.drop-button{flex-direction:column;gap:0;background:linear-gradient(180deg,#22d3ee,#17b5d3);border-color:#64e8fa;color:#04202a;font-weight:800;font-size:10px;letter-spacing:.8px;text-transform:uppercase;box-shadow:0 3px 0 #073d48}.drop-button svg{width:20px;height:24px;stroke-width:2}.drop-button.pressed{background:#7be7f5;color:#04202a}.gesture-hint{font-size:10px;color:#798ba5;text-align:center;margin:12px 0 0;letter-spacing:.1px}.board-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:linear-gradient(160deg,#0c1322ed,#090f1cdb);backdrop-filter:blur(4px);text-align:center;z-index:2}.overlay-content{display:flex;flex-direction:column;align-items:center;width:100%}.overlay-symbol{color:var(--cyan);font-size:31px;margin-bottom:20px;text-shadow:0 0 30px #22d3ee77;line-height:1}.eyebrow{color:var(--cyan);font-size:9px;letter-spacing:1.8px;font-weight:650;line-height:1.6}.board-overlay h2{font-size:clamp(26px,3.4vw,40px);font-weight:750;letter-spacing:-1.6px;line-height:1.06;margin:13px 0 0}.board-overlay p{color:#a0b0c8;font-size:12px;line-height:1.7;margin:16px 0 22px}.primary-button{background:var(--cyan);color:#04202a;border:1px solid #5ce2f6;min-height:46px;border-radius:10px;padding:12px 20px;font-size:12px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:17px}.primary-button:hover{background:#56e1f3}.primary-button span{font-size:18px}.overlay-hint{font-size:9px;color:#8192ad;margin-top:24px;line-height:1.6}.text-button{border:0;background:transparent;color:var(--muted);padding:12px 4px;font-size:12px;min-height:44px}.text-button:hover{color:var(--text)}.clear-message{position:absolute;left:0;right:0;top:42%;z-index:1;text-align:center;pointer-events:none;color:var(--cyan);font-size:21px;font-weight:800;text-shadow:0 0 15px #000,0 2px 12px #000;opacity:0;letter-spacing:2px}.clear-message.visible{animation:clear-pop 1s ease forwards}@keyframes clear-pop{0%{opacity:0;transform:translateY(8px)}20%,70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10px)}}.desktop-rail{padding-top:0;display:flex;flex-direction:column;gap:18px}.rail-card{border:1px solid var(--line);border-radius:16px;padding:22px 20px;background:linear-gradient(145deg,#111a2b,#0d1523)}.rail-card h2{font-size:24px;letter-spacing:-.7px;font-weight:650;line-height:1.15;margin:14px 0}.rail-card p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}.rail-rule{border-top:1px solid var(--line);margin:25px 0 18px}.record-score{display:block;margin:8px 0 4px;font-size:32px;font-weight:650;letter-spacing:-1px;color:#eacb79}.rail-link{color:#b5c6df;font-size:11px}.keyboard-card{padding:18px 20px}.keyboard-card h2{font-size:13px;letter-spacing:.3px;margin:0 0 16px}.keyboard-card>div{display:flex;justify-content:space-between;align-items:center;margin:10px 0;font-size:11px;color:var(--muted);gap:8px}kbd{font-family:inherit;font-size:10px;color:#b9c8df;border:1px solid var(--line);padding:4px 6px;border-radius:5px;white-space:nowrap;background:#ffffff03}.local-note{font-size:11px;line-height:1.8;color:#6f819d;margin:0 4px}footer{display:flex;justify-content:space-between;gap:10px;padding-top:22px;font-size:10px;color:#65758d}footer a{color:#91a0b8;text-decoration:none}footer a span{color:#5c738f;margin-left:3px}
dialog{width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow-y:auto;padding:24px;background:#101a2b;border:1px solid #2a3a55;border-radius:20px;color:var(--text);box-shadow:0 25px 100px #0009;overscroll-behavior:contain}dialog::backdrop{background:#030811b8;backdrop-filter:blur(8px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.dialog-head h2{font-size:23px;letter-spacing:-.5px;margin:0}.close-button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#ffffff04;color:#a9bbd6;font-size:27px;line-height:1}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:65px;border-bottom:1px solid var(--line);font-size:14px}.setting-row select{padding:10px;border-radius:8px;background:#19263c;border:1px solid #34445f;max-width:160px;color:var(--text);font-size:13px}.switch{appearance:none;-webkit-appearance:none;position:relative;width:44px;height:26px;border-radius:18px;background:#314057;border:1px solid #41516c;cursor:pointer;flex-shrink:0;transition:background .15s}.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#d3dded;border-radius:50%;transition:transform .15s}.switch:checked{background:#138ba0;border-color:#22d3ee}.switch:checked::after{transform:translateX(18px);background:#e6fbff}.dialog-note{color:#8295b1;font-size:11px;line-height:1.8;margin:18px 0}.secondary-button{background:#1a2a42;border:1px solid #33445f;border-radius:10px;min-height:44px;padding:11px 16px;font-size:12px;color:#d3e1f6}.full{width:100%}.version{font-size:9px;letter-spacing:2px;color:#687e9d;text-align:center;margin:23px 0 0}.confirm-reset,.update-box{padding:14px;border:1px solid #a78bfa33;border-radius:12px;margin-top:12px;background:#a78bfa08}.confirm-reset p,.update-box p{font-size:12px;line-height:1.6;margin:0 0 10px}.danger{color:#fb97aa!important}.high-score{display:grid;grid-template-columns:26px 1fr auto;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}.score-rank{font-size:12px;font-weight:700;color:#7990b2}.high-score:first-child .score-rank{color:#eacb79}.score-detail strong{display:block;font-size:20px;font-variant-numeric:tabular-nums}.score-detail small,.score-date{font-size:10px;color:#8197b5}.score-detail small{display:block;margin-top:4px}.score-empty{text-align:center;padding:25px 5px;color:#a4b5ce;line-height:1.7;font-size:13px}.help-item{display:flex;gap:14px;margin-top:20px}.help-number{font-size:11px;color:var(--cyan);padding-top:3px}.help-item h3{margin:0 0 5px;font-size:13px}.help-item p,dialog>p:not(.dialog-note):not(.version){font-size:12px;line-height:1.8;color:#a4b6d1;margin-top:0}.help-item p{margin:0}#installDialog{text-align:center}#installDialog .dialog-head{text-align:left}.install-icon{border-radius:18px;margin:5px auto 0}#installDialog h3{font-size:19px;margin:14px 0}.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,15px);background:#1b2d46;color:#eaf2ff;border:1px solid #3b5375;border-radius:12px;padding:13px 20px;font-size:12px;line-height:1.5;z-index:20;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;max-width:calc(100vw - 30px);width:max-content}.toast.show{opacity:1;transform:translate(-50%,0)}.storage-warning{background:#523f1d;color:#f7dfaa;border-radius:8px;padding:10px;font-size:11px;line-height:1.5;margin:0 0 12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.noscript{position:fixed;inset:30%;padding:25px;background:#101a2b;color:white;z-index:100}
@media(min-width:681px){.play-column{width:min(100%,calc((100dvh - 326px)/2 + 100px));min-width:310px;margin-inline:auto}.arcade{grid-template-columns:minmax(310px,1fr) 220px}.app{max-width:850px}.board-overlay h2{font-size:36px}}
@media(max-width:680px){:root{--board-h:min(57dvh,580px)}.app{width:min(100%,440px);padding:12px 14px 12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}.topbar{padding-bottom:11px}.brand{gap:8px}.brand img{width:30px;height:30px}.brand h1{font-size:19px}.brand h1>span:first-child{font-size:8px;letter-spacing:2.6px;margin-bottom:4px}.toolbar{gap:5px}.icon-button{height:38px;width:38px;border-radius:10px}.icon-button svg{width:19px;height:19px}.statusline{padding:7px 0 11px;min-height:37px;font-size:10px}.install-link{font-size:10px}.arcade{display:block}.desktop-rail{display:none}.scorebar{padding-bottom:11px}.scorebar strong{font-size:22px}.scorebar>div{gap:4px;padding-left:12px}.stat-label{font-size:9px;letter-spacing:1.5px}.play-area{grid-template-columns:minmax(0,1fr) 76px;gap:10px;width:fit-content;max-width:100%;margin:0 auto}.board-shell{height:var(--board-h);width:calc(var(--board-h)/2);max-width:calc(100vw - 114px);max-height:calc((100vw - 114px)*2)}.queuebar{gap:8px}.mini-card{border-radius:10px;padding:9px 5px}.mini-card h2{font-size:8px;margin-bottom:6px}.next-card canvas{max-height:calc(var(--board-h)*.43)}.hold-card{padding-bottom:6px}.hold-card canvas{max-height:36px}.hold-card>span{font-size:8px;margin-top:2px}.best-card{padding:7px 3px}.small-crown{font-size:16px}.best-card h2{margin:2px 0 4px}.best-card strong{font-size:12px}.pause-button{font-size:9px;min-height:40px;padding:5px}.touch-controls{margin-top:12px;gap:7px}.control{height:52px;border-radius:10px}.control.utility{height:43px;font-size:9px;gap:4px}.board-overlay h2{font-size:clamp(26px,7.7vw,35px);letter-spacing:-1.2px}.board-overlay p{font-size:11px;margin:12px 0 19px}.overlay-symbol{font-size:27px;margin-bottom:15px}.eyebrow{font-size:8px;letter-spacing:1.5px}.primary-button{font-size:11px;min-height:44px;padding:11px 15px;gap:12px}.overlay-hint{margin-top:18px;font-size:8px}.gesture-hint{margin:10px 0 0;font-size:9px}footer{padding-top:17px;font-size:9px}.next-card{display:flex;flex-direction:column}.next-card canvas{flex:1;min-height:0;width:100%}}
@media(max-width:680px) and (max-height:760px){:root{--board-h:min(54dvh,405px)}.app{padding-top:max(8px,env(safe-area-inset-top))}.topbar{padding-bottom:8px}.statusline{padding-top:4px;padding-bottom:8px;min-height:31px}.scorebar{padding-bottom:9px}.scorebar strong{font-size:20px}.touch-controls{margin-top:10px}.control{height:47px}.control.utility{height:40px}.queuebar{gap:6px}.next-card canvas{max-height:calc(var(--board-h)*.4)}.mini-card{padding-top:7px;padding-bottom:7px}.hold-card canvas{max-height:28px}.best-card{padding:5px 2px}.pause-button{min-height:36px}.overlay-symbol{margin-bottom:9px}.board-overlay p{margin:10px 0 14px}.overlay-hint{margin-top:13px}.gesture-hint{margin-top:8px}footer{padding-top:12px}}
@media(max-width:360px){.app{padding-left:10px;padding-right:10px}.brand h1{font-size:17px}.brand img{width:26px;height:26px}.icon-button{width:34px;height:36px}.play-area{grid-template-columns:minmax(0,1fr) 68px;gap:8px}.board-shell{max-width:calc(100vw - 96px);max-height:calc((100vw - 96px)*2)}.toolbar{gap:3px}.board-overlay{padding:10px}.eyebrow{font-size:7px}.board-overlay h2{font-size:27px}.overlay-hint{max-width:130px}.control.utility{gap:2px;font-size:8px}.rotate-icon{font-size:22px}}
@media(max-height:510px) and (min-width:620px){.app{max-width:900px;padding:10px 20px}.topbar{padding-bottom:8px}.statusline{display:none}.arcade{grid-template-columns:minmax(310px,1fr) 210px;gap:25px}.play-column{width:350px;min-width:0;display:grid;grid-template-columns:205px 1fr;gap:10px;margin:0 auto}.scorebar{grid-column:1/-1;padding-bottom:0}.scorebar strong{font-size:18px}.play-area{grid-template-columns:145px 55px;gap:5px;width:205px}.board-shell{width:145px;height:290px;max-height:none;max-width:none}.queuebar{gap:4px}.mini-card{padding:5px 2px;border-radius:7px}.mini-card h2{font-size:7px;margin-bottom:3px}.next-card canvas{max-height:120px}.hold-card canvas{max-height:23px}.hold-card>span{display:none}.best-card strong{font-size:9px}.small-crown{display:none}.pause-button{font-size:0;min-height:28px}.pause-button span{display:none}.touch-controls{margin:0;grid-template-columns:repeat(2,1fr);gap:7px;align-content:center}.control,.control.utility{height:58px;font-size:9px;flex-direction:column;gap:1px}.gesture-hint{display:none}.desktop-rail{display:block}.rail-card{padding:14px}.rail-card h2{font-size:18px;margin:8px 0}.rail-card p{font-size:11px}.rail-rule{margin:12px 0}.record-score{font-size:24px}.keyboard-card,.local-note{display:none}footer{padding-top:10px}.board-overlay h2{font-size:25px}.board-overlay .eyebrow,.overlay-hint,.overlay-symbol{display:none}.board-overlay p{font-size:10px;margin:10px 0}.board-overlay .primary-button{font-size:10px;min-height:40px;padding:9px}.overlay-content{max-width:140px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}.clear-message.visible{opacity:1;animation:none}}