@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{color-scheme:dark;--bg:#090c18;--ink:#e9eff6;--muted:#79879e;--cyan:#a5ffdf;--line:#273241}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100svh}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 49% 55%,#12434730,transparent 45%),radial-gradient(ellipse at 94% 22%,#60326715,transparent 40%);z-index:-1}header{height:85px;border-bottom:1px solid var(--line);margin:0 4%;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;letter-spacing:2px;display:flex;align-items:center;gap:12px}.brand-icon{font-size:28px;color:var(--cyan)}.arcade{color:var(--muted);font-weight:400}.header-right{display:flex;align-items:center;gap:35px}.edition,.eyebrow,.label,.small,.board-top,.board-bottom,footer,.start-hint,.best,.mobile-controls{font-family:'Space Mono',monospace}.edition{font-size:11px;letter-spacing:1px;color:var(--muted)}button{font-family:inherit;cursor:pointer;color:inherit;border:1px solid var(--line);background:#111724;transition:background .18s,transform .18s}button:hover{background:#233330}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}#sound{font-size:15px;padding:10px 13px;border-radius:5px;color:var(--cyan)}#sound span{font-family:'Space Mono',monospace;font-size:11px;margin-left:6px}main{max-width:1090px;margin:auto;padding:32px 35px 0}.masthead{display:flex;justify-content:space-between;align-items:center;max-width:880px;margin:0 auto 30px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--cyan);margin:0 0 7px}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:78px;letter-spacing:-1px;line-height:1;margin:0;font-weight:800;font-style:italic}h1 span{color:var(--cyan);margin-left:10px}h1 sup{font-family:'DM Sans',sans-serif;font-size:12px;vertical-align:top;position:relative;top:12px;margin-left:8px;font-style:normal}.intro{color:#99a6b9;font-size:14px;line-height:1.7}.machine{display:grid;grid-template-columns:190px minmax(240px,340px) 170px;gap:36px;justify-content:center;align-items:start}.left-rail,.right-rail{padding-top:28px}.panel{border:1px solid var(--line);background:linear-gradient(130deg,#19223190,#10172230);border-radius:6px;padding:18px}.label{color:var(--muted);font-size:11px;letter-spacing:2px;display:block}.score-panel strong{font-family:'Space Mono',monospace;display:block;font-size:31px;letter-spacing:-1px;color:var(--cyan);margin:10px 0 20px;text-shadow:0 0 22px #a5ffdf35}.best{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-wrap:wrap;gap:7px;justify-content:space-between;font-size:10px;color:var(--muted)}.best span:last-child{color:#c8d3e1}.hold-panel{margin-top:20px}.panel-heading{display:flex;align-items:center;justify-content:space-between}kbd{display:inline-flex;min-width:24px;height:23px;align-items:center;justify-content:center;padding:0 5px;border:1px solid #354151;border-bottom:2px solid #354151;border-radius:4px;color:#a7b3c5;font-family:'Space Mono',monospace;font-size:11px}.hold-panel canvas{display:block;width:100%;height:80px}.session{display:flex;flex-wrap:wrap;gap:20px;margin-top:25px;padding:0 4px}.session>div:not(.level-track){width:calc(50% - 10px)}.session strong{font-family:'Space Mono',monospace;font-size:30px;display:block;margin-top:5px;font-weight:400}.level-track{height:3px;background:#23303e;width:100%;margin-top:-3px}.level-track i{display:block;background:var(--cyan);width:0;height:100%;transition:width .4s}.small{color:var(--muted);font-size:9px;margin-top:-10px}.rail-note{margin-top:48px;display:flex;align-items:center;gap:13px;color:#64788a}.rail-note>span{font-size:34px}.rail-note p{font-size:12px;line-height:1.7}.board-top{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#89a69f;letter-spacing:1px;height:28px}.board-top i{display:inline-block;width:5px;height:5px;background:var(--cyan);border-radius:50%;margin-right:5px;box-shadow:0 0 9px var(--cyan)}.board-wrap{position:relative;border:1px solid #57776e;border-radius:4px;box-shadow:0 0 0 5px #12232670,0 0 50px #63e2b211;overflow:hidden;background:#0a131c}.board-wrap:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#00000013 3px 4px)}#board{display:block;width:100%;aspect-ratio:1/2;touch-action:none;outline:none}.board-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--muted);height:42px;letter-spacing:1px}#pause{border:0;background:none;color:#a6b8c9;font-size:14px;padding:8px 0 8px 12px}#pause span{font-family:'Space Mono',monospace;font-size:9px;margin-left:6px}.next-panel canvas{width:100%;height:230px;display:block}.controls{margin-top:30px}.controls>.label{margin-bottom:20px}.controls>div{display:flex;justify-content:space-between;align-items:center;color:#8d9bb0;font-size:12px;margin:12px 0}.touch-note{border-top:1px solid var(--line);margin-top:25px;padding-top:15px;display:flex;gap:10px;color:var(--muted)}.touch-note>span{font-size:24px;color:#acbfba}.touch-note p{font-size:10px;line-height:1.8;margin:0}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(#09121ad9,#09121ae8 65%,#09121a95);text-align:center;z-index:2;backdrop-filter:blur(2px)}#overlay.hidden{display:none}.overlay-inner{width:78%}.orbit{width:52px;height:52px;border:1px solid #547b6d;border-radius:50%;margin:0 auto 27px;display:grid;place-items:center;color:var(--cyan);font-size:26px;box-shadow:0 0 35px #a5ffdf10}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:77px;line-height:.92;margin:20px 0;font-weight:800;font-style:italic;letter-spacing:-1px}h2 em{color:var(--cyan);font-style:italic}.overlay-inner p{font-size:13px;color:#9daebb;margin-bottom:28px}.primary{background:var(--cyan);border:0;color:#0b2221;border-radius:3px;font-weight:800;letter-spacing:1px;font-size:13px;padding:17px 20px;display:flex;justify-content:space-between;width:100%;box-shadow:0 0 25px #a5ffdf20}.primary:hover{background:#cdffed;box-shadow:0 0 35px #a5ffdf40}.start-hint{display:block;margin-top:15px;font-size:9px;letter-spacing:1px;color:#718b91}#toast{position:absolute;top:45%;left:0;right:0;text-align:center;font-family:'Barlow Condensed',Impact,sans-serif;font-size:40px;color:white;font-weight:800;pointer-events:none;z-index:3;text-shadow:0 0 20px var(--cyan);opacity:0;transition:opacity .15s}#toast.show{opacity:1}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0;margin-top:28px;font-size:9px;letter-spacing:1.5px;color:#67788d}.mobile-controls{display:none}@media(min-width:900px) and (max-height:950px){main{padding-top:23px}.masthead{margin-bottom:19px}h1{font-size:66px}.machine{grid-template-columns:190px minmax(220px,285px) 170px;gap:32px}.next-panel canvas{height:180px}.rail-note{margin-top:30px}footer{margin-top:14px}}@media(max-width:700px), (pointer:coarse){header{height:58px;margin:0 20px}.brand{font-size:10px;letter-spacing:1px;gap:7px}.brand-icon{font-size:24px}.edition,.arcade{display:none}#sound{padding:8px;font-size:14px}#sound span{font-size:9px}main{padding:19px 16px 0}.masthead{margin-bottom:14px}h1{font-size:47px}.eyebrow{font-size:8px;letter-spacing:1.9px}.intro{font-size:10px;line-height:1.6}.machine{grid-template-columns:1fr 76px;gap:14px;max-width:410px;margin:auto}.left-rail{grid-column:1/-1;padding:0;display:flex;gap:12px;align-items:center}.score-panel{flex:1;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.label{font-size:9px;letter-spacing:1px}.score-panel strong{font-size:23px;margin:0}.best,.hold-panel,.rail-note,.session .small,.level-track{display:none}.session{margin:0;padding:0;gap:14px;flex-wrap:nowrap}.session>div:not(.level-track){width:auto}.session strong{font-size:21px;margin-top:1px}.play-column{grid-column:1;grid-row:2}.right-rail{grid-column:2;grid-row:2;padding-top:28px}.panel{border-radius:4px}.next-panel{padding:13px 7px}.next-panel .label{text-align:center}.next-panel canvas{height:180px}.controls,.touch-note{display:none}.board-top{font-size:8px;letter-spacing:.4px}.board-bottom{font-size:8px;height:31px}.board-wrap{max-height:calc(100svh - 285px);min-height:300px;aspect-ratio:1/2;margin:auto}#board{height:100%;width:100%}.overlay-inner{width:80%}h2{font-size:60px;margin:12px 0}.orbit{width:36px;height:36px;font-size:20px;margin-bottom:16px}.overlay-inner p{margin:12px 0 20px}.primary{padding:13px 15px;font-size:11px}.start-hint{font-size:8px;margin-top:11px}.mobile-controls{display:flex;justify-content:space-between;gap:10px;align-items:center;max-width:410px;margin:9px auto 0}.mobile-controls button{height:43px;border-radius:4px;font-family:inherit;font-size:11px;padding:0 13px}.mobile-controls>span{font-size:8px;text-align:center;line-height:1.8;color:var(--muted)}#mobile-rotate{font-size:23px;min-width:45px}footer{margin-top:17px;font-size:7px;padding:14px 0;letter-spacing:.5px}.footer-middle{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* A fixed, safe-area-aware arcade cabinet on touch screens. */
html{overscroll-behavior:none}
@media(max-width:700px), (pointer:coarse){
 html{height:100%;overflow:hidden}
 body{position:fixed;inset:0;min-height:0;height:var(--viewport-height,100dvh);overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);touch-action:pinch-zoom;-webkit-user-select:none;user-select:none}
 header{height:48px;min-height:48px;flex:none}
 main{width:100%;max-width:650px;margin:0 auto;padding:10px 16px 8px;min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden}
 .masthead{flex:none;width:100%;margin:0 auto 10px}
 h1{font-size:40px}
 .machine{width:100%;max-width:410px;flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 70px;grid-template-rows:46px minmax(0,1fr);gap:10px 12px;margin:0 auto;align-items:stretch}
 .left-rail{min-width:0}.score-panel{min-width:0;padding:8px 10px}
 .play-column{min-height:0;min-width:0;height:100%;align-self:stretch;display:flex;flex-direction:column;overflow:hidden}.board-top,.board-bottom{flex:none}
 .board-wrap{height:var(--board-height,0px);width:var(--board-width,0px);flex:none;max-width:100%;max-height:none;min-height:0;aspect-ratio:auto;margin:0 auto;touch-action:none}
 #board{position:absolute;inset:0;height:100%;width:100%;max-height:100%;aspect-ratio:auto}
 .right-rail{min-height:0;overflow:hidden}.next-panel canvas{height:auto;width:100%}
 .mobile-controls{flex:none;width:100%;margin-top:8px}.mobile-controls button{touch-action:manipulation}
 footer{display:none}
 .overlay-inner{max-height:100%;padding:8px 0}.orbit{margin-bottom:10px}
}
@media(max-height:600px) and (pointer:coarse){
 header{height:38px;min-height:38px}.masthead{display:none}.orbit,.start-hint,.overlay-inner>.eyebrow{display:none}
 .overlay-inner h2{font-size:38px;margin:4px 0}.overlay-inner p{margin:8px 0;font-size:11px}.primary{padding:10px 14px}
 .mobile-controls{margin-top:4px}.mobile-controls button{height:35px}
}
/* Polished glass, luminous edges and moving colour reflections. */
:root{--piece-color:#89f8ef}
.ambient{background:radial-gradient(ellipse at 47% 62%,#1bbd9230,transparent 44%),radial-gradient(ellipse at 85% 22%,#7634cf24,transparent 46%),radial-gradient(ellipse at 5% 75%,#2b64ca20,transparent 36%);animation:ambient-drift 16s ease-in-out infinite alternate}
@keyframes ambient-drift{from{transform:scale(1);filter:hue-rotate(0deg)}to{transform:scale(1.13);filter:hue-rotate(24deg)}}
h1{color:#f1f7ff;text-shadow:0 2px 0 #354353,0 4px 0 #17212b,0 12px 30px #0009}
h1 span{color:#b0ffe1;text-shadow:0 0 2px #effff9,0 0 20px #69ffc43b,0 0 45px #69ffc425,0 3px 0 #2f7368}
.board-wrap{border-color:#a5ffdf99;border-radius:6px;box-shadow:0 0 0 1px #ddfff02b,0 0 0 5px #25464055,0 0 25px #74ffcd26,0 0 75px #61efc115,inset 0 0 25px #9affe52b;background:#06121a;transition:box-shadow .35s}
.board-wrap:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 1px 1px 0 #ffffff70,inset -1px -1px 0 #a5ffdf44,inset 0 0 18px #060c1899;background:linear-gradient(110deg,#ffffff0a,transparent 19%,transparent 74%,#b2ffff08)}
.board-wrap:after{z-index:1;opacity:.5}
.panel{background:linear-gradient(130deg,#253145a0,#111827a0 55%,#15292b75);box-shadow:inset 0 1px 0 #ffffff0b,0 8px 28px #00000026;border-top-color:#445264}
.score-panel strong{text-shadow:0 0 8px #a5ffdf55,0 0 28px #a5ffdf40}
.next-panel canvas,.hold-panel canvas{filter:drop-shadow(0 4px 9px #89f8ef15)}
.primary{background:linear-gradient(115deg,#d9ffee,#a5ffdf 45%,#7ee8d6);box-shadow:inset 0 1px 0 white,0 0 24px #a5ffdf38,0 7px 25px #0005}
.primary:hover{box-shadow:inset 0 1px 0 white,0 0 40px #a5ffdf66,0 7px 25px #0005}
#sound{box-shadow:inset 0 1px 0 #ffffff10}#sound[aria-pressed=true]{border-color:#a5ffdf45;color:#b8ffe5;text-shadow:0 0 12px #a5ffdf75}
.orbit{box-shadow:inset 0 0 20px #a5ffdf15,0 0 20px #a5ffdf20,0 0 50px #a5ffdf10;animation:orbit-breathe 3s ease-in-out infinite}
@keyframes orbit-breathe{50%{box-shadow:inset 0 0 20px #a5ffdf25,0 0 32px #a5ffdf40,0 0 65px #a5ffdf20;transform:rotate(90deg)}}
#toast{letter-spacing:3px;font-style:italic;text-shadow:0 0 2px #fff,0 0 14px #a5ffdf,0 0 35px #83ebff;transform:scale(.92);transition:opacity .14s,transform .24s cubic-bezier(.2,1.7,.3,1)}
#toast.show{transform:scale(1)}
@media(max-width:700px), (pointer:coarse){.play-column{overflow:visible}.mobile-controls button{background:linear-gradient(140deg,#253647,#101a28);border-color:#4a696b;box-shadow:inset 0 1px 0 #ffffff16,0 0 14px #a5ffdf09}.mobile-controls button:active{background:#35584f;box-shadow:0 0 18px #a5ffdf44}}
@media(prefers-reduced-motion:reduce){.ambient,.orbit{animation:none}#toast{transform:none;transition:none}}