@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");body,html{overscroll-behavior:none;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--bg-deep:#06080f;--bg-mid:#0c1018;--bg-surface:#111827;--bg-elevated:#1a2236;--bg-glass:rgba(17,24,39,.65);--bg-glass-border:hsla(0,0%,100%,.06);--board-bg:#0a0e18;--board-border:rgba(99,130,255,.12);--cell-empty:#111827;--cell-empty-border:hsla(0,0%,100%,.04);--cell-size:48px;--cell-gap:2px;--cell-radius:6px;--cell-size-small:24px;--cell-size-tray:24px;--block-blue:linear-gradient(135deg,#4d96ff,#2563eb);--block-purple:linear-gradient(135deg,#a855f7,#7c3aed);--block-cyan:linear-gradient(135deg,#22d3ee,#06b6d4);--block-green:linear-gradient(135deg,#4ade80,#16a34a);--block-orange:linear-gradient(135deg,#fb923c,#ea580c);--block-pink:linear-gradient(135deg,#f472b6,#db2777);--block-yellow:linear-gradient(135deg,#facc15,#eab308);--block-red:linear-gradient(135deg,#f87171,#dc2626);--junk-bg:#2a1a1a;--junk-crack:rgba(255,60,60,.25);--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#475569;--text-glow:rgba(99,130,255,.5);--accent:#6366f1;--accent-glow:rgba(99,102,241,.4);--green:#4ade80;--green-glow:rgba(74,222,128,.4);--red:#f87171;--red-glow:hsla(0,91%,71%,.4);--yellow:#facc15;--yellow-glow:rgba(250,204,21,.4);--cyan:#22d3ee}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-deep);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 60% at 15% 85%,rgba(99,102,241,.08) 0,transparent 60%),radial-gradient(ellipse 60% 80% at 85% 15%,rgba(168,85,247,.06) 0,transparent 60%),radial-gradient(ellipse 50% 50% at 50% 50%,rgba(34,211,238,.03) 0,transparent 70%);animation:bgShift 20s ease-in-out infinite alternate}@keyframes bgShift{0%{opacity:1;filter:hue-rotate(0deg)}to{opacity:.7;filter:hue-rotate(15deg)}}body:after{content:"";position:fixed;inset:0;z-index:-1;background-image:linear-gradient(hsla(0,0%,100%,.015) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.015) 1px,transparent 0);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}button{cursor:pointer;border:none;font-family:inherit;font-size:inherit;outline:none}.board-grid{display:grid;grid-template-columns:repeat(8,var(--cell-size));grid-template-rows:repeat(8,var(--cell-size));grid-gap:var(--cell-gap);gap:var(--cell-gap);background:var(--board-bg);border-radius:14px;padding:6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1.5px solid var(--board-border);box-shadow:0 0 60px rgba(99,102,241,.07),0 0 120px rgba(99,102,241,.04),0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 hsla(0,0%,100%,.03);position:relative}.board-grid:before{content:"";position:absolute;inset:-2px;border-radius:15px;background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(168,85,247,.1),rgba(34,211,238,.08));z-index:-1;filter:blur(1px);opacity:.6}.board-grid.small{--cell-size:var(--cell-size-small);--cell-gap:1px;border-radius:10px;padding:3px;box-shadow:0 8px 24px rgba(0,0,0,.4)}.board-grid.small:before{display:none}.board-cell{width:var(--cell-size);height:var(--cell-size);border-radius:var(--cell-radius);position:relative;overflow:hidden}.board-cell.empty{background:var(--cell-empty);border:1px solid var(--cell-empty-border)}.board-cell.empty:hover{background:#161f30;border-color:hsla(0,0%,100%,.08)}.board-cell.placed{background:var(--block-blue);border:1px solid hsla(0,0%,100%,.2);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.25),inset 0 -1px 0 rgba(0,0,0,.2),0 0 8px rgba(99,102,241,.25)}.board-cell.placed:after{content:"";position:absolute;top:0;left:0;width:60%;height:50%;background:linear-gradient(135deg,hsla(0,0%,100%,.2),transparent);border-radius:var(--cell-radius) 0 0 0}@keyframes blockLand{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}75%{transform:scale(.95)}to{transform:scale(1);opacity:1}}.board-cell.junk{background:var(--junk-bg);border:1px solid hsla(0,91%,71%,.2);box-shadow:inset 0 0 12px hsla(0,91%,71%,.1)}.board-cell.junk:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,var(--junk-crack) 30.5%,var(--junk-crack) 31%,transparent 31.5%),linear-gradient(-30deg,transparent 40%,var(--junk-crack) 40.5%,var(--junk-crack) 41%,transparent 41.5%),linear-gradient(70deg,transparent 55%,var(--junk-crack) 55.5%,var(--junk-crack) 56%,transparent 56.5%);border-radius:var(--cell-radius)}@keyframes junkSlam{0%{transform:scale(1.3) translateY(-8px);opacity:.5}50%{transform:scale(.9) translateY(2px)}to{transform:scale(1) translateY(0);opacity:1}}.board-cell.double-junk{background:#3a1a1a!important;border:1px solid rgba(220,38,38,.4)!important;box-shadow:inset 0 0 16px rgba(220,38,38,.25),0 0 6px rgba(220,38,38,.15)!important}.board-cell.double-junk:after{content:"2";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:hsla(0,91%,71%,.6);font-family:Inter,system-ui,sans-serif}.board-cell.ghost{border:2px solid hsla(0,0%,100%,.25);background:rgba(99,102,241,.15);animation:ghostPulse 1.2s ease-in-out infinite}.board-cell.ghost-invalid{border:2px solid hsla(0,91%,71%,.5);background:hsla(0,91%,71%,.15);animation:invalidShake .3s ease}@keyframes ghostPulse{0%,to{opacity:.5}50%{opacity:.9}}@keyframes invalidShake{0%,to{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}.board-cell.clear-preview{border:2px solid rgba(255,220,100,.6);box-shadow:0 0 10px rgba(250,204,21,.4),inset 0 0 8px rgba(250,204,21,.15);z-index:2}.junk-timer{width:100%;display:flex;align-items:center;gap:10px;padding:6px 0;opacity:.9}.junk-timer-track{flex:1 1;height:6px;background:hsla(0,91%,71%,.15);border-radius:3px;overflow:hidden}.junk-timer-fill{height:100%;background:linear-gradient(90deg,#f87171,#fb923c);border-radius:3px;box-shadow:0 0 8px hsla(0,91%,71%,.4);transition:width .05s linear}.junk-timer.urgent .junk-timer-fill{background:linear-gradient(90deg,#dc2626,#f87171);box-shadow:0 0 14px hsla(0,91%,71%,.7);animation:junkUrgent .3s ease-in-out infinite alternate}.junk-timer-label{font-size:11px;font-weight:800;letter-spacing:1px;color:#f87171;white-space:nowrap}.junk-timer.urgent .junk-timer-label{color:#dc2626}@keyframes junkUrgent{0%{box-shadow:0 0 10px hsla(0,91%,71%,.5)}to{box-shadow:0 0 20px hsla(0,91%,71%,.9)}}.piece-queue{display:flex;align-items:center;gap:12px;padding:8px 16px;background:rgba(17,24,39,.4);border-radius:10px;border:1px solid hsla(0,0%,100%,.03)}.queue-label{font-size:9px;font-weight:700;letter-spacing:2px;color:#475569;text-transform:uppercase;white-space:nowrap}.queue-items{display:flex;gap:10px;align-items:center}.queue-piece{padding:4px;transition:opacity .2s ease}.piece-tray{gap:12px;padding:16px 20px;background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--bg-glass-border);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.3)}.piece-slot,.piece-tray{display:flex;justify-content:center;align-items:center}.piece-slot{min-width:90px;min-height:90px;background:hsla(0,0%,100%,.02);border-radius:12px;border:2px solid hsla(0,0%,100%,.04);padding:12px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.piece-slot:hover:not(.empty-slot){border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.06);transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px rgba(99,102,241,.15)}.piece-slot.selected{border-color:var(--accent);background:rgba(99,102,241,.1);transform:translateY(-6px) scale(1.08);box-shadow:0 0 20px var(--accent-glow),0 8px 32px rgba(99,102,241,.2)}.piece-slot.empty-slot{cursor:default;opacity:.15;border-style:dashed}.piece-mini-grid{display:grid;grid-gap:2px;gap:2px}.piece-mini-cell{width:var(--cell-size-tray);height:var(--cell-size-tray);border-radius:4px;transition:transform .15s ease}.piece-mini-cell.filled{border:1px solid hsla(0,0%,100%,.2);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.2),0 0 4px rgba(0,0,0,.3)}.piece-mini-cell.filled:after{content:"";display:block;width:50%;height:40%;background:linear-gradient(135deg,hsla(0,0%,100%,.3),transparent);border-radius:2px 0 0 0}.piece-mini-cell.empty-piece{background:transparent}.game-hud{display:flex;flex-direction:column;gap:12px;min-width:min(200px,30vw)}.hud-section{background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--bg-glass-border);border-radius:14px;padding:16px 18px;box-shadow:0 4px 16px rgba(0,0,0,.2);transition:box-shadow .3s ease}.hud-section:hover{box-shadow:0 4px 24px rgba(99,102,241,.08)}.hud-label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:8px;font-weight:600}.hud-value{font-size:32px;font-weight:800;color:var(--text-primary);letter-spacing:-1px;text-shadow:0 0 20px var(--text-glow)}.combo-display{display:flex;align-items:baseline;gap:8px}.combo-value{font-size:36px;font-weight:900;color:var(--yellow);letter-spacing:-1px;text-shadow:0 0 24px var(--yellow-glow);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.combo-value.combo-bump{animation:comboExplode .4s cubic-bezier(.34,1.56,.64,1)}@keyframes comboExplode{0%{transform:scale(1) rotate(0deg)}30%{transform:scale(1.6) rotate(-3deg);text-shadow:0 0 40px var(--yellow-glow)}60%{transform:scale(.9) rotate(1deg)}to{transform:scale(1) rotate(0deg)}}.combo-label{font-size:11px;color:var(--yellow);font-weight:700;text-transform:uppercase;letter-spacing:1px;opacity:.8}.energy-bar-container{width:100%;height:10px;background:hsla(0,0%,100%,.05);border-radius:5px;overflow:hidden;margin-top:8px;position:relative}.energy-bar-fill{height:100%;background:linear-gradient(90deg,#6366f1,#a855f7,#22d3ee);background-size:200% 100%;animation:energyFlow 3s linear infinite;border-radius:5px;transition:width .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 12px var(--accent-glow)}@keyframes energyFlow{0%{background-position:0 0}to{background-position:200% 0}}.energy-text{font-size:11px;color:var(--text-muted);margin-top:6px;text-align:center;font-weight:500;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.shield-button{width:100%;padding:12px 16px;border-radius:10px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px;transition:all .2s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.shield-button.available{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 4px 16px var(--accent-glow)}.shield-button.available:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 24px var(--accent-glow)}.shield-button.available:after{content:"";position:absolute;top:-50%;left:-100%;width:60%;height:200%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.15),transparent);transform:skewX(-20deg);animation:shieldSweep 3s ease-in-out infinite}@keyframes shieldSweep{0%,to{left:-100%}50%{left:150%}}.shield-button.unavailable{background:hsla(0,0%,100%,.03);color:var(--text-muted);cursor:default;border:1px solid hsla(0,0%,100%,.04)}.shield-button.active{background:linear-gradient(135deg,#4ade80,#16a34a);color:#fff;box-shadow:0 0 30px var(--green-glow);animation:shieldActive 1.5s ease-in-out infinite alternate}@keyframes shieldActive{0%{box-shadow:0 0 20px var(--green-glow),inset 0 0 20px rgba(74,222,128,.1)}to{box-shadow:0 0 40px var(--green-glow),inset 0 0 30px rgba(74,222,128,.15)}}.pending-attacks{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.attack-indicator{background:linear-gradient(135deg,#f87171,#dc2626);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:.5px;box-shadow:0 0 12px var(--red-glow);animation:attackBounce .6s ease-in-out infinite alternate}@keyframes attackBounce{0%{transform:translateY(0) scale(1)}to{transform:translateY(-2px) scale(1.05)}}.match-result-overlay{position:fixed;inset:0;background:rgba(6,8,15,.85);display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:overlayIn .3s ease}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.match-result-card{background:var(--bg-glass);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:24px;padding:56px 64px;text-align:center;border:1px solid var(--bg-glass-border);box-shadow:0 24px 80px rgba(0,0,0,.6);animation:cardIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes cardIn{0%{transform:scale(.8) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.match-result-title{font-size:56px;font-weight:900;letter-spacing:-2px;margin-bottom:8px}.match-result-title.win{background:linear-gradient(135deg,#4ade80,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 30px var(--green-glow))}.match-result-title.lose{background:linear-gradient(135deg,#f87171,#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 30px var(--red-glow))}.match-result-score{font-size:18px;color:var(--text-secondary);margin-bottom:36px;font-weight:500}.match-result-button{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;padding:14px 40px;border-radius:12px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 20px var(--accent-glow);transition:all .2s cubic-bezier(.34,1.56,.64,1)}.match-result-button:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 32px var(--accent-glow)}.game-view{display:flex;align-items:flex-start;justify-content:center;gap:40px;height:100vh;padding:40px 32px 32px}.game-view-center{gap:20px}.game-view-center,.game-view-side{display:flex;flex-direction:column;align-items:center}.game-view-side{gap:10px;padding-top:28px}.game-view-side .side-label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);font-weight:700;margin-bottom:8px}.menu-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:8px}.menu-title{font-size:64px;font-weight:900;letter-spacing:-3px;background:linear-gradient(135deg,#818cf8,#a78bfa,#22d3ee,#4ade80);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:titleShimmer 4s ease-in-out infinite;margin-bottom:4px;filter:drop-shadow(0 0 40px rgba(99,102,241,.3))}@keyframes titleShimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.menu-subtitle{font-size:15px;color:var(--text-muted);margin-bottom:40px;font-weight:500;letter-spacing:2px;text-transform:uppercase}.menu-buttons{display:flex;flex-direction:column;gap:12px;width:280px}.menu-button{padding:16px 28px;border-radius:14px;font-size:15px;font-weight:700;letter-spacing:.5px;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.menu-button.primary{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 4px 20px var(--accent-glow)}.menu-button.primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 32px var(--accent-glow)}.menu-button.primary:after{content:"";position:absolute;top:-50%;left:-100%;width:40%;height:200%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.12),transparent);transform:skewX(-20deg);animation:btnSweep 4s ease-in-out infinite}@keyframes btnSweep{0%,to{left:-100%}50%{left:200%}}.menu-button.secondary{background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--text-primary);border:1px solid var(--bg-glass-border)}.menu-button.secondary:hover{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.2);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}.menu-button.back{background:transparent;color:var(--text-muted);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase}.menu-button.back:hover{color:var(--text-secondary);transform:translateY(-1px)}.local-game{display:flex;align-items:flex-start;justify-content:center;gap:48px;height:100vh;padding:32px}.local-player-panel{display:flex;flex-direction:column;align-items:center;gap:12px}.local-player-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);padding:8px 20px;border-radius:10px;background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--bg-glass-border);transition:all .2s ease}.local-player-label.active-player{color:var(--accent);border-color:rgba(99,102,241,.3);box-shadow:0 0 20px var(--accent-glow)}.local-player-score{font-size:24px;font-weight:800;letter-spacing:-1px}.connection-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);font-weight:500}.connection-dot{width:8px;height:8px;border-radius:50%}.connection-dot.connected{background:var(--green);box-shadow:0 0 8px var(--green-glow)}.connection-dot.disconnected{background:var(--red);box-shadow:0 0 8px var(--red-glow)}.difficulty-picker{display:flex;gap:12px;margin-top:12px}.diff-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 24px;border-radius:14px;background:rgba(17,24,39,.6);border:2px solid hsla(0,0%,100%,.05);color:var(--text-secondary);transition:all .2s cubic-bezier(.34,1.56,.64,1);cursor:pointer;min-width:120px}.diff-btn:hover{border-color:hsla(0,0%,100%,.15);transform:translateY(-2px)}.diff-btn.active{transform:translateY(-4px) scale(1.05)}.diff-btn.active.easy{border-color:#4ade80;box-shadow:0 0 20px rgba(74,222,128,.3);color:#4ade80}.diff-btn.active.medium{border-color:#facc15;box-shadow:0 0 20px rgba(250,204,21,.3);color:#facc15}.diff-btn.active.hard{border-color:#f87171;box-shadow:0 0 20px hsla(0,91%,71%,.3);color:#f87171}.diff-label{font-size:15px;font-weight:800;letter-spacing:1px}.diff-desc{font-size:11px;color:#475569;font-weight:500}.countdown-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:80;pointer-events:none}.countdown-number{font-size:120px;font-weight:900;color:#fff;text-shadow:0 0 40px rgba(99,102,241,.8),0 0 80px rgba(99,102,241,.4),0 0 120px rgba(99,102,241,.2);animation:countIn .8s cubic-bezier(.34,1.56,.64,1);letter-spacing:-4px}.countdown-number.go{font-size:100px;background:linear-gradient(135deg,#4ade80,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 40px rgba(74,222,128,.6));animation:goFlash .6s cubic-bezier(.34,1.56,.64,1);letter-spacing:-2px}.countdown-go{animation:fadeOut .6s ease .4s forwards}@keyframes countIn{0%{transform:scale(2.5);opacity:0}50%{transform:scale(.9);opacity:1}to{transform:scale(1);opacity:1}}@keyframes goFlash{0%{transform:scale(3);opacity:0}40%{transform:scale(.85);opacity:1}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.bot-difficulty-badge{font-size:10px;font-weight:700;letter-spacing:2px;color:#94a3b8;background:rgba(17,24,39,.6);padding:4px 14px;border-radius:20px;border:1px solid hsla(0,0%,100%,.06)}.howto-overlay{position:fixed;inset:0;background:rgba(6,8,15,.9);justify-content:center;z-index:90;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:overlayIn .2s ease}.howto-card,.howto-overlay{display:flex;align-items:center}.howto-card{background:var(--bg-surface,#111827);border:1px solid hsla(0,0%,100%,.06);border-radius:20px;padding:28px 32px;max-width:420px;max-height:90vh;overflow-y:auto;width:90%;flex-direction:column;gap:16px;box-shadow:0 24px 60px rgba(0,0,0,.5);animation:cardIn .3s cubic-bezier(.34,1.56,.64,1)}.howto-dots{display:flex;gap:8px}.howto-dot{width:8px;height:8px;border-radius:50%;background:hsla(0,0%,100%,.1);cursor:pointer;transition:all .2s ease}.howto-dot.active{background:#6366f1;box-shadow:0 0 8px rgba(99,102,241,.4);transform:scale(1.3)}.howto-dot.done{background:rgba(99,102,241,.4)}.howto-title{font-size:24px;font-weight:800;letter-spacing:-.5px;color:#f1f5f9}.howto-visual{padding:8px 0}.howto-text{font-size:14px;line-height:1.6;color:#94a3b8;text-align:center;max-width:340px}.howto-nav{display:flex;gap:12px;width:100%;justify-content:center}.howto-btn{padding:10px 28px;border-radius:10px;font-size:14px;font-weight:700;letter-spacing:.5px;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.howto-btn.next,.howto-btn.play{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.3)}.howto-btn.next:hover,.howto-btn.play:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.4)}.howto-btn.back{background:hsla(0,0%,100%,.05);color:#94a3b8;border:1px solid hsla(0,0%,100%,.06)}.howto-btn.back:hover{background:hsla(0,0%,100%,.08);color:#f1f5f9}@media (max-width:1100px){:root{--cell-size:38px;--cell-size-small:20px}.game-view{gap:24px;padding:20px}.menu-title{font-size:48px}}@media (max-width:800px){:root{--cell-size:32px;--cell-size-small:16px;--cell-size-tray:18px}.game-view{flex-direction:column;align-items:center;padding:16px;gap:16px}.game-view-side{flex-direction:row;padding-top:0}.menu-title{font-size:36px}.countdown-number{font-size:80px!important}.countdown-go{font-size:70px!important}}@media (max-width:480px){:root{--cell-size:26px;--cell-size-small:13px;--cell-size-tray:14px}.game-view{padding:8px;gap:8px}.menu-title{font-size:28px}.hud{min-width:unset}.piece-tray{padding:8px 10px}.piece-slot{min-width:60px;min-height:60px}.match-result-card{padding:24px 20px}.countdown-number{font-size:60px!important}.countdown-go{font-size:50px!important}}@media (max-width:375px){:root{--cell-size:22px;--cell-size-small:11px;--cell-size-tray:12px}.menu-title{font-size:24px}.piece-slot{min-width:50px;min-height:50px}}