:root{--bg0:#070b14;--bg1:#0d1424;--panel:#101a2e;--panel2:#0c1526;--line:#1d2b47;--line-bright:#2a3d63;--text:#e8eef7;--dim:#7d92b5;--amber:#ffb454;--cyan:#3fd8f0;--purple:#b45cff;--green:#4ade80;--red:#ff5c6c;--font-display:"Press Start 2P", monospace;--font-body:"Space Grotesk", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-body);color:var(--text);background:radial-gradient(1200px 800px at 72% -10%, #16233f 0%, transparent 60%), radial-gradient(900px 700px at 8% 110%, #131c33 0%, transparent 55%), linear-gradient(180deg, var(--bg1), var(--bg0));touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex-direction:column;min-height:100dvh;display:flex;overflow-x:hidden}.bg-grid{z-index:0;pointer-events:none;background-image:linear-gradient(#5a82c80d 1px,#0000 1px),linear-gradient(90deg,#5a82c80d 1px,#0000 1px);background-size:44px 44px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(90% 80% at 50% 40%,#000 30%,#0000 100%);mask-image:radial-gradient(90% 80% at 50% 40%,#000 30%,#0000 100%)}.drifters{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.drifter{top:-70px;left:var(--x);width:44px;height:44px;opacity:var(--o,.08);animation:drift var(--dur,40s) linear infinite;animation-delay:var(--delay,0s);position:absolute}.drifter i{background:currentColor;border-radius:3px;width:50%;height:50%;position:absolute;box-shadow:0 0 12px}@keyframes drift{0%{transform:translateY(-8vh) rotate(0deg) scale(var(--s,1))}to{transform:translateY(110vh) rotate(var(--rot,360deg)) scale(var(--s,1))}}.topbar{z-index:2;justify-content:space-between;align-items:center;padding:16px 24px 8px;display:flex;position:relative}.logo{font-family:var(--font-display);letter-spacing:5px;-webkit-user-select:none;user-select:none;font-size:clamp(18px,3vw,26px)}.logo span{animation:3.2s ease-in-out infinite letterfloat;display:inline-block}.logo span:first-child{color:var(--purple);text-shadow:0 0 18px #b45cff8c}.logo span:nth-child(2){color:var(--cyan);text-shadow:0 0 18px #3fd8f08c;animation-delay:.2s}.logo span:nth-child(3){color:#ffd23f;text-shadow:0 0 18px #ffd23f80;animation-delay:.4s}.logo span:nth-child(4){color:var(--green);text-shadow:0 0 18px #4ade8080;animation-delay:.6s}.logo span:nth-child(5){color:var(--red);text-shadow:0 0 18px #ff5c6c80;animation-delay:.8s}@keyframes letterfloat{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.topbar-actions{align-items:center;gap:10px;display:flex}.icon-btn{font-family:var(--font-display);letter-spacing:1px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);cursor:pointer;border-radius:7px;padding:9px 11px;font-size:8px;transition:color .15s,border-color .15s,transform .15s}.icon-btn:hover{color:var(--cyan);border-color:var(--line-bright);transform:translateY(-1px)}.stage{z-index:1;flex:1;grid-template-columns:172px auto 172px;justify-content:center;align-items:start;gap:18px;padding:10px 16px 20px;display:grid;position:relative}.panel{flex-direction:column;display:flex}.widget{background:linear-gradient(180deg, var(--panel), var(--panel2));border:1px solid var(--line);border-radius:10px;margin-bottom:14px;padding:12px;box-shadow:0 10px 24px #00000059}.widget-title{font-family:var(--font-display);letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-bottom:10px;font-size:8px}#holdCanvas{width:100%;height:74px;display:block}#nextCanvas{width:100%;height:210px;display:block}.score-value,.best-value{font-family:var(--font-display);letter-spacing:1px;font-size:14px;display:inline-block}.score-value{color:var(--amber);text-shadow:0 0 14px #ffb45473}.best-value{color:var(--cyan);text-shadow:0 0 14px #3fd8f066}.bump{animation:.3s bump}@keyframes bump{40%{transform:scale(1.22)}}.stat{color:var(--dim);border-bottom:1px dashed #7d92b526;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:13px;display:flex}.stat:last-child{border-bottom:0}.stat b{font-family:var(--font-display);color:var(--text);font-size:10px}.screen-wrap{justify-content:center;display:flex}.screen{aspect-ratio:1/2;border:2px solid var(--line-bright);background:#05080f;border-radius:14px;height:min(74vh,660px);position:relative;overflow:hidden;box-shadow:0 0 0 6px #0a1120,0 0 0 8px #1a2942,0 24px 60px #0009,0 0 44px #3fd8f014,inset 0 0 60px #000c}#boardCanvas{width:100%;height:100%;display:block;position:absolute;inset:0}.scanlines{z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,#00000029 0 1px,#0000 1px 3px);position:absolute;inset:0;overflow:hidden}.scanlines:after{content:"";background:linear-gradient(#0000,#78c8ff0d,#0000);height:120px;animation:7s linear infinite sweep;position:absolute;left:0;right:0}@keyframes sweep{0%{top:-25%}to{top:110%}}.screen:after{content:"";z-index:4;pointer-events:none;background:linear-gradient(115deg,#ffffff0d 0%,#0000 32%);position:absolute;inset:0}.popups{z-index:4;pointer-events:none;position:absolute;inset:0}.popup{text-align:center;font-family:var(--font-display);color:var(--text);text-shadow:0 0 12px;font-size:13px;animation:1.1s ease-out forwards popup;position:absolute;top:38%;left:0;right:0}.popup.tetris{color:var(--cyan);font-size:16px}.popup.clear{color:var(--green)}.popup.b2b{color:var(--purple);font-size:10px;top:47%}.popup.combo{color:var(--amber);font-size:10px;top:55%}.popup.level{color:var(--amber);font-size:15px;top:30%}@keyframes popup{0%{opacity:0;transform:translateY(14px)scale(.6)}18%{opacity:1;transform:translate(0)scale(1.12)}32%{transform:translate(0)scale(1)}to{opacity:0;transform:translate(var(--dx,0px), -58px) scale(1)}}.overlay{z-index:5;background:#05080fd6;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:absolute;inset:0}.overlay.hidden{opacity:0;pointer-events:none}.overlay-inner{text-align:center;padding:24px;animation:.3s rise}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.overlay-title{font-family:var(--font-display);letter-spacing:4px;color:var(--cyan);text-shadow:0 0 24px #3fd8f080;margin-bottom:16px;font-size:clamp(20px,4.5vh,30px)}.overlay-sub{color:var(--dim);margin-bottom:24px;font-size:14px;line-height:1.9}.overlay-sub b{color:var(--cyan)}.newbest{font-family:var(--font-display);letter-spacing:2px;color:var(--amber);text-shadow:0 0 14px #ffb45499;margin-top:6px;font-size:11px;animation:.5s infinite alternate bump;display:inline-block}.btn{font-family:var(--font-display);letter-spacing:2px;cursor:pointer;color:#1a1206;background:linear-gradient(#ffc873,#ff9f3f);border:0;border-radius:8px;padding:14px 22px;font-size:11px;transition:transform .12s,box-shadow .12s;box-shadow:0 5px #b3671f,0 10px 20px #0006}.btn:hover{transform:translateY(-2px);box-shadow:0 7px #b3671f,0 14px 24px #00000073}.btn:active{transform:translateY(3px);box-shadow:0 2px #b3671f,0 6px 12px #0006}.btn-sm{padding:10px 13px;font-size:8px}.touch{z-index:2;padding:4px 20px calc(16px + env(safe-area-inset-bottom));justify-content:space-between;gap:14px;display:none;position:relative}.touch-pad{grid-template-columns:repeat(3,62px);gap:10px;display:grid}.touch button{border:1px solid var(--line-bright);height:56px;color:var(--text);font-size:20px;font-family:var(--font-body);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;background:linear-gradient(#182640,#101a2e);border-radius:12px;font-weight:700;box-shadow:0 4px #0a1120}.touch button:active{background:#1c2f52;transform:translateY(3px);box-shadow:0 1px #0a1120}.touch .act{color:var(--cyan)}.touch .act-drop{color:var(--amber)}.touch .act-hold{font-family:var(--font-display);letter-spacing:1px;color:var(--purple);font-size:8px}.hints{z-index:1;color:var(--dim);flex-wrap:wrap;justify-content:center;gap:16px;padding:8px 16px 16px;font-size:12px;display:flex;position:relative}kbd{font-family:var(--font-body);border:1px solid var(--line-bright);color:var(--text);background:#16233f;border-bottom-width:2px;border-radius:4px;margin-right:2px;padding:1px 6px;font-size:11px}.toast{z-index:10;background:var(--panel);border:1px solid var(--line-bright);color:var(--text);border-radius:10px;align-items:center;gap:14px;padding:12px 18px;font-size:13px;transition:transform .3s;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(90px);box-shadow:0 12px 30px #00000080}.toast.show{transform:translate(-50%)translateY(0)}.toast-btn{font-family:var(--font-display);letter-spacing:1px;color:#1a1206;cursor:pointer;background:linear-gradient(#ffc873,#ff9f3f);border:0;border-radius:6px;padding:8px 10px;font-size:8px}@media (width<=900px){.stage{grid-template-columns:1fr 1fr;gap:12px;padding:8px 14px 12px}.screen-wrap{grid-column:1/-1}.screen{height:min(52dvh,460px)}.widget{margin-bottom:10px;padding:10px}#nextCanvas{height:150px}.hints{display:none}.touch{display:flex}}@media (pointer:coarse){.touch{display:flex}}@media (prefers-reduced-motion:reduce){.drifter,.scanlines:after,.logo span{animation:none}}