:root{--mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", "Roboto Mono", monospace;--cyan: #00f0f0;--magenta: #b43cf0;--amber: #f0d000;--ink: #05060a;--dim: #6b7a99}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ink);color:#dfe7ff;font-family:var(--mono);-webkit-font-smoothing:antialiased;user-select:none;cursor:default}#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;-webkit-tap-highlight-color:transparent}#ui:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 130% 100% at 50% 50%,#05060a00 55%,#05060a8c);mix-blend-mode:multiply}#ui{position:fixed;inset:0;z-index:2;pointer-events:none;font-family:var(--mono)}.hud{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .4s ease}.hud.show{opacity:1}.panel{position:absolute;letter-spacing:.14em;text-transform:uppercase}.stats{left:max(3vw,24px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:clamp(14px,2.4vh,28px);min-width:150px}.stat{display:flex;flex-direction:column;gap:3px}.stat .label{font-size:clamp(10px,1.1vw,13px);color:var(--dim);letter-spacing:.32em}.stat .value{font-size:clamp(22px,3vw,40px);font-weight:700;color:#eaf2ff;font-variant-numeric:tabular-nums;text-shadow:0 0 6px rgba(0,240,240,.55),0 0 18px rgba(0,240,240,.3);line-height:1}.stat.level .value{text-shadow:0 0 6px rgba(180,60,240,.6),0 0 18px rgba(180,60,240,.32)}.label-hold,.label-next{font-size:clamp(11px,1.2vw,15px);letter-spacing:.3em;color:var(--dim);text-shadow:0 0 8px rgba(107,122,153,.5)}.label-hold{left:max(20vw,200px);top:30%;transform:translate(-50%);text-align:center}.label-next{right:max(15vw,150px);top:18%;transform:translate(50%);text-align:center}.combo{left:max(3vw,24px);bottom:max(5vh,30px);display:flex;flex-direction:column;gap:6px;font-size:clamp(13px,1.5vw,18px);letter-spacing:.22em;opacity:0;transition:opacity .18s ease}.combo.show{opacity:1}.combo .combo-line{color:var(--amber);text-shadow:0 0 10px rgba(240,208,0,.6)}.combo .b2b-line{color:var(--magenta);text-shadow:0 0 10px rgba(180,60,240,.6)}.popups{position:absolute;left:50%;top:46%;width:0;height:0;overflow:visible}.popup{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;font-size:clamp(18px,2.4vw,34px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 0 10px rgba(0,240,240,.8),0 0 26px rgba(0,240,240,.45);opacity:0;will-change:transform,opacity}.popup.kind-tetris{color:#d8fbff;text-shadow:0 0 12px rgba(0,240,240,.95),0 0 32px rgba(0,240,240,.6)}.popup.kind-tspin{color:#f3dcff;text-shadow:0 0 12px rgba(180,60,240,.95),0 0 32px rgba(180,60,240,.6)}.popup.kind-perfect{color:#fff7d6;text-shadow:0 0 14px rgba(240,208,0,.95),0 0 36px rgba(240,208,0,.6)}.popup.run{animation:floatUp 1.15s ease-out forwards}@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.85)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}30%{transform:translate(-50%,-56%) scale(1)}to{opacity:0;transform:translate(-50%,-150%) scale(1)}}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at center,#05060a8c,#05060adb);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .35s ease}.overlay.show{opacity:1;pointer-events:auto}.title{font-size:clamp(48px,11vw,150px);font-weight:800;letter-spacing:.08em;line-height:.96;text-transform:uppercase;background:linear-gradient(180deg,#eaffff,#00f0f0 45%,#b43cf0);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(0,240,240,.55)) drop-shadow(0 0 40px rgba(180,60,240,.4));animation:titlePulse 3.2s ease-in-out infinite}.title .dot{color:var(--amber);-webkit-text-fill-color:var(--amber);filter:drop-shadow(0 0 14px rgba(240,208,0,.8))}@keyframes titlePulse{0%,to{filter:drop-shadow(0 0 16px rgba(0,240,240,.55)) drop-shadow(0 0 40px rgba(180,60,240,.4))}50%{filter:drop-shadow(0 0 26px rgba(0,240,240,.85)) drop-shadow(0 0 60px rgba(180,60,240,.6))}}.subtitle{margin-top:10px;font-size:clamp(12px,1.6vw,18px);letter-spacing:.4em;text-transform:uppercase;color:var(--dim)}.controls{margin-top:clamp(24px,4vh,48px);border-collapse:collapse;font-size:clamp(11px,1.3vw,15px);letter-spacing:.14em;color:#b9c6e6}.controls td{padding:4px 14px;text-transform:uppercase}.controls td.key{text-align:right;color:var(--cyan);font-weight:700;text-shadow:0 0 8px rgba(0,240,240,.5);white-space:nowrap}.controls td.act{text-align:left;color:#93a2c6}.prompt{margin-top:clamp(26px,4.5vh,54px);font-size:clamp(15px,2vw,24px);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#eaf2ff;text-shadow:0 0 12px rgba(0,240,240,.7);animation:blink 1.4s steps(1,end) infinite}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:.25}}.over-title{font-size:clamp(34px,7vw,92px);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ff4d6a;text-shadow:0 0 16px rgba(240,60,80,.7),0 0 44px rgba(240,60,80,.4)}.over-stats{margin-top:clamp(18px,3.5vh,40px);display:flex;flex-direction:column;gap:10px;font-size:clamp(14px,1.8vw,22px);letter-spacing:.18em;text-transform:uppercase}.over-stats .big{font-size:clamp(26px,4vw,52px);font-weight:700;color:#eaf2ff;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(0,240,240,.55)}.over-stats .hi{color:var(--dim)}.over-stats .hi .val{color:var(--amber);text-shadow:0 0 10px rgba(240,208,0,.5)}.over-stats .record{color:var(--amber);font-weight:700;letter-spacing:.3em;text-shadow:0 0 14px rgba(240,208,0,.8);animation:blink 1s steps(1,end) infinite}.pause-title{font-size:clamp(34px,7vw,88px);font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#eaf2ff;text-shadow:0 0 16px rgba(0,240,240,.6),0 0 44px rgba(180,60,240,.35)}.muted-badge{position:absolute;right:max(3vw,22px);bottom:max(4vh,24px);font-size:clamp(11px,1.2vw,14px);letter-spacing:.26em;text-transform:uppercase;color:var(--dim);opacity:0;transition:opacity .25s ease}.muted-badge.show{opacity:1}.touch-btns{position:absolute;inset:0;pointer-events:none}.tbtn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--cyan);background:#05060a66;border:1px solid rgba(0,240,240,.5);border-radius:9px;box-shadow:0 0 10px #00f0f040,inset 0 0 8px #00f0f01f;text-shadow:0 0 8px rgba(0,240,240,.6);font-family:var(--mono);pointer-events:auto;-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation;z-index:3}.tbtn:active{background:#00f0f02e}.tbtn-pause{right:calc(env(safe-area-inset-right,0px) + 12px)}.tbtn-mute{left:calc(env(safe-area-inset-left,0px) + 12px)}.tbtn-mute.muted{color:var(--dim);border-color:#6b7a9980;box-shadow:none;text-shadow:none}@media(max-width:600px){.stats{left:max(3vw,12px);gap:clamp(8px,1.8vh,18px);min-width:0}.stat .label{font-size:10px;letter-spacing:.24em}.stat .value{font-size:clamp(18px,6vw,28px)}.combo{left:max(3vw,12px);bottom:max(4vh,18px);font-size:clamp(11px,3.4vw,15px)}.popup{font-size:clamp(16px,5.2vw,26px)}.title{font-size:clamp(40px,16vw,92px)}.controls{margin-top:clamp(14px,3vh,28px);font-size:clamp(11px,3.4vw,14px)}.controls td{padding:3px 8px}.prompt{margin-top:clamp(18px,4vh,34px);font-size:clamp(14px,4.4vw,20px)}}@media(orientation:portrait){.label-hold{left:12%;top:26%}.label-next{right:12%;left:auto;top:16%}}
