@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap";
:root{--bg-primary:#0a0a1a;--bg-secondary:#111128;--bg-tertiary:#1a1a3e;--bg-surface:#ffffff0a;--bg-surface-hover:#ffffff14;--glass-bg:#111128a6;--glass-border:#ffffff14;--glass-shadow:0 8px 32px #0006;--accent-cyan:#00e5ff;--accent-magenta:#e040fb;--accent-amber:#ffab40;--accent-lime:#76ff03;--accent-coral:#ff6e6e;--accent-blue:#448aff;--accent-teal:#1de9b6;--piece-I:#00e5ff;--piece-O:#ffab40;--piece-T:#e040fb;--piece-S:#76ff03;--piece-Z:#ff6e6e;--piece-J:#448aff;--piece-L:#ff9100;--piece-I-glow:#00e5ff80;--piece-O-glow:#ffab4080;--piece-T-glow:#e040fb80;--piece-S-glow:#76ff0380;--piece-Z-glow:#ff6e6e80;--piece-J-glow:#448aff80;--piece-L-glow:#ff910080;--text-primary:#f0f0f8;--text-secondary:#f0f0f899;--text-muted:#f0f0f859;--font-display:"Space Grotesk", sans-serif;--font-body:"Inter", sans-serif;--font-mono:"JetBrains Mono", monospace;--gap-xs:4px;--gap-sm:8px;--gap-md:16px;--gap-lg:24px;--gap-xl:32px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--cell-size:min(calc((100dvh - 240px) / 21), 32px);--grid-gap:1px;--board-radius:14px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;touch-action:manipulation;width:100%;min-height:100dvh;position:fixed;overflow:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80% 50% at 50% -20%,#00e5ff14,#0000),radial-gradient(60% 40% at 80% 100%,#e040fb0f,#0000),radial-gradient(50% 50% at 10% 60%,#76ff030a,#0000);position:fixed;inset:0}#__next,main{z-index:1;position:relative}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.glass-light{-webkit-backdrop-filter:blur(12px);background:#ffffff08;border:1px solid #ffffff0f}.game-board{grid-template-columns:repeat(10, var(--cell-size));grid-template-rows:repeat(20, var(--cell-size));gap:var(--grid-gap);border-radius:var(--board-radius);box-shadow:inset 0 0 30px #0009, 0 0 0 1px #000c, 0 0 40px #00e5ff40, 0 0 80px #00e5ff1a, var(--glass-shadow);background:#040412eb;border:2px solid #00e5ff73;padding:4px;display:grid}.cell{width:var(--cell-size);height:var(--cell-size);background:#ffffff0a;border:1px solid #ffffff17;border-radius:3px;transition:background 80ms,box-shadow 80ms,border-color 80ms}.cell.filled{border:1px solid #ffffff40}.cell.ghost{opacity:.2;border-style:dashed}.cell.piece-I{background:var(--piece-I);box-shadow:0 0 8px var(--piece-I-glow), inset 0 1px 0 #ffffff4d;border-color:#00e5ff99}.cell.piece-O{background:var(--piece-O);box-shadow:0 0 8px var(--piece-O-glow), inset 0 1px 0 #ffffff4d;border-color:#ffab4099}.cell.piece-T{background:var(--piece-T);box-shadow:0 0 8px var(--piece-T-glow), inset 0 1px 0 #ffffff4d;border-color:#e040fb99}.cell.piece-S{background:var(--piece-S);box-shadow:0 0 8px var(--piece-S-glow), inset 0 1px 0 #ffffff4d;border-color:#76ff0399}.cell.piece-Z{background:var(--piece-Z);box-shadow:0 0 8px var(--piece-Z-glow), inset 0 1px 0 #ffffff4d;border-color:#ff6e6e99}.cell.piece-J{background:var(--piece-J);box-shadow:0 0 8px var(--piece-J-glow), inset 0 1px 0 #ffffff4d;border-color:#448aff99}.cell.piece-L{background:var(--piece-L);box-shadow:0 0 8px var(--piece-L-glow), inset 0 1px 0 #ffffff4d;border-color:#ff910099}@keyframes lineClear{0%{opacity:1;filter:brightness(2);transform:scaleX(1)}50%{opacity:.6;filter:brightness(3);transform:scaleX(1.05)}to{opacity:0;filter:brightness();transform:scaleX(0)}}.cell.clearing{animation:.4s ease-out forwards lineClear;background:#fff!important;box-shadow:0 0 20px #fffc!important}@keyframes gestureHintFade{0%{opacity:0;transform:translate(-50%)translateY(4px)}15%{opacity:1;transform:translate(-50%)translateY(0)}70%{opacity:1}to{opacity:0}}.gesture-hint{border-radius:var(--radius-full);pointer-events:none;white-space:nowrap;z-index:10;background:#0a0a1abf;border:1px solid #ffffff1f;gap:10px;padding:5px 14px;animation:4s ease-out forwards gestureHintFade;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.gesture-hint span{font-family:var(--font-mono);color:#ffffff80;letter-spacing:.04em;font-size:.6rem}.mini-grid{grid-template-columns:repeat(4, calc(var(--cell-size) * .5));grid-template-rows:repeat(4, calc(var(--cell-size) * .5));place-items:center;gap:1px;display:grid}.mini-cell{width:calc(var(--cell-size) * .5);height:calc(var(--cell-size) * .5);background:0 0;border-radius:2px}.mini-cell.filled{border:1px solid #fff3}.mini-cell.piece-I{background:var(--piece-I);box-shadow:0 0 4px var(--piece-I-glow)}.mini-cell.piece-O{background:var(--piece-O);box-shadow:0 0 4px var(--piece-O-glow)}.mini-cell.piece-T{background:var(--piece-T);box-shadow:0 0 4px var(--piece-T-glow)}.mini-cell.piece-S{background:var(--piece-S);box-shadow:0 0 4px var(--piece-S-glow)}.mini-cell.piece-Z{background:var(--piece-Z);box-shadow:0 0 4px var(--piece-Z-glow)}.mini-cell.piece-J{background:var(--piece-J);box-shadow:0 0 4px var(--piece-J-glow)}.mini-cell.piece-L{background:var(--piece-L);box-shadow:0 0 4px var(--piece-L-glow)}.stat-label{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);font-size:.65rem;font-weight:500}.stat-value{font-family:var(--font-mono);color:var(--text-primary);text-shadow:0 0 12px #00e5ff4d;font-size:1.1rem;font-weight:700}.touch-btn{width:44px;height:44px;color:var(--text-secondary);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;transition:all .15s;display:flex}.touch-btn:active{color:var(--accent-cyan);background:#00e5ff33;border-color:#00e5ff66;transform:scale(.92);box-shadow:0 0 16px #00e5ff4d}.touch-btn-lg{width:54px;height:54px;font-size:1.3rem}.btn-primary{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));color:#0a0a1a;font-family:var(--font-display);letter-spacing:.02em;cursor:pointer;text-transform:uppercase;border:none;justify-content:center;align-items:center;gap:8px;padding:14px 32px;font-size:1rem;font-weight:700;transition:all .25s;display:inline-flex;box-shadow:0 4px 20px #00e5ff4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px #00e5ff80}.btn-primary:active{transform:translateY(0)}.btn-ghost{border-radius:var(--radius-full);color:var(--text-primary);font-family:var(--font-display);cursor:pointer;background:0 0;border:1px solid #ffffff26;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:.9rem;font-weight:600;transition:all .25s;display:inline-flex}.btn-ghost:hover{background:#ffffff14;border-color:#ffffff40}.logo-text{font-family:var(--font-display);letter-spacing:.15em;background:linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-magenta) 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px #00e5ff4d);-webkit-background-clip:text;background-clip:text;font-size:1.8rem;font-weight:900}.overlay{z-index:100;-webkit-backdrop-filter:blur(12px);background:#0a0a1ad9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay-card{width:min(90vw,360px);padding:var(--gap-xl);border-radius:var(--radius-xl);text-align:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scorePopup{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-40px)scale(1.2)}}.animate-fade-in{animation:.4s ease-out forwards fadeIn}.animate-fade-in-scale{animation:.3s ease-out forwards fadeInScale}.animate-slide-up{animation:.5s ease-out forwards slideUp}.animate-pulse{animation:2s ease-in-out infinite pulse}.score-popup{font-family:var(--font-display);color:var(--accent-cyan);text-shadow:0 0 20px var(--accent-cyan);pointer-events:none;z-index:50;font-size:1.5rem;font-weight:800;animation:.8s ease-out forwards scorePopup;position:absolute}.level-badge{border-radius:var(--radius-full);font-family:var(--font-mono);color:var(--accent-cyan);background:linear-gradient(135deg,#00e5ff26,#e040fb26);border:1px solid #00e5ff33;align-items:center;gap:6px;padding:4px 12px;font-size:.75rem;font-weight:600;display:inline-flex}.install-banner{z-index:200;padding:16px;animation:.5s ease-out slideUp;position:fixed;bottom:0;left:0;right:0}.bloc-main{flex-direction:column;align-items:center;gap:6px;width:100%;height:100dvh;padding:6px 0 0;display:flex;position:relative;overflow:hidden}.top-bar{flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:6px;width:100%;max-width:400px;padding:0 8px;display:flex}.top-center{flex-direction:column;flex:1;align-items:center;gap:6px;min-width:0;display:flex}.top-stats{justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.top-stat{flex-direction:column;align-items:center;gap:2px;display:flex}.board-wrapper{flex-shrink:0;align-items:flex-start;gap:6px;display:flex;position:relative}.next-queue{flex-direction:column;flex-shrink:0;gap:4px;display:flex}@media (min-width:768px){:root{--cell-size:30px}}@media (min-width:1024px){:root{--cell-size:32px}body{position:static;overflow:auto}}@supports (padding:env(safe-area-inset-bottom)){.touch-controls{padding-bottom:env(safe-area-inset-bottom)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}