.block-puzzle-board{position:relative;display:flex;justify-content:center;align-items:center;min-height:650px;background:linear-gradient(135deg,#f0f0f0 0%,#e8e8e8 100%);border-radius:12px;box-shadow:inset 0 2px 8px #0000001a;overflow:hidden}#gameCanvas{border:3px solid #333;border-radius:8px;background:#000;box-shadow:0 4px 20px #0000004d;display:none}#gameStartMessage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.side-panel{height:100%;min-height:650px;display:flex;flex-direction:column}.score-panel .card{background:#fff;color:#333;border:2px solid #e3f2fd;box-shadow:0 4px 12px #00000026}.score-vertical{display:flex;flex-direction:column;gap:8px}.score-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:6px;border:1px solid #dee2e6}.stat-item{padding:.5rem}.stat-value{font-size:1.5rem;font-weight:700;line-height:1}.stat-label{font-size:.75rem;opacity:.9;text-transform:uppercase;letter-spacing:.5px}.next-block-panel .card{border:2px solid #e3f2fd;background:linear-gradient(135deg,#e3f2fd 0%,#f8f9ff 100%)}.next-block-container{display:flex;flex-direction:column;align-items:center;gap:15px;padding:10px 0}.next-block-item{text-align:center;width:100%;max-width:90px}.next-block-item canvas{border:1px solid #ddd;border-radius:4px;background:#f9f9f9;box-shadow:inset 0 1px 3px #0000001a}#pauseButton{background:linear-gradient(135deg,#ffc107 0%,#ff9800 100%);border:none;color:#333;font-weight:700;transition:all .3s ease}#pauseButton:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ffc10766}.touch-controls{padding:1rem;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:12px;margin:0 -.5rem}.control-buttons-container{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;max-width:100%}.control-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:80px;height:70px;border:2px solid #6c757d;border-radius:12px;background:linear-gradient(135deg,#fff 0%,#f8f9fa 100%);color:#495057;font-weight:700;transition:all .3s ease;cursor:pointer;user-select:none;box-shadow:0 2px 8px #0000001a}.control-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003;border-color:#495057}.control-btn:active{transform:translateY(0);box-shadow:0 2px 5px #0003;background:linear-gradient(135deg,#e9ecef 0%,#dee2e6 100%)}.control-btn.active{background:linear-gradient(135deg,#007bff 0%,#0056b3 100%);color:#fff;border-color:#0056b3;box-shadow:0 4px 15px #007bff66}.control-label{font-size:1.2rem;font-weight:700;line-height:1;margin-bottom:2px}.control-btn small{font-size:.65rem;opacity:.8;text-align:center;line-height:1.1}.difficulty-card{cursor:pointer;transition:all .3s ease;border:2px solid #e9ecef}.difficulty-card:hover{border-color:#007bff;transform:translateY(-2px);box-shadow:0 4px 12px #007bff26}.difficulty-card.selected{border-color:#007bff;background:linear-gradient(135deg,#e3f2fd 0%,#f8f9ff 100%);box-shadow:0 4px 12px #007bff40}.difficulty-card .badge{font-size:.7rem}#gameStatus{font-weight:700;padding:.5rem .75rem;font-size:.875rem}#gameStatus.ready{background:linear-gradient(135deg,#6c757d 0%,#495057 100%)}#gameStatus.playing{background:linear-gradient(135deg,#28a745 0%,#1e7e34 100%);animation:pulse-playing 2s infinite}#gameStatus.paused{background:linear-gradient(135deg,#ffc107 0%,#e0a800 100%);color:#333}#gameStatus.game-over{background:linear-gradient(135deg,#dc3545 0%,#bd2130 100%)}@keyframes pulse-playing{0%,100%{opacity:1}50%{opacity:.8}}.statistic-item{padding:1rem .5rem;transition:transform .3s ease}.statistic-item:hover{transform:translateY(-2px)}.statistic-number{font-size:2rem;font-weight:700;line-height:1;margin-bottom:.25rem}.statistic-label{font-size:.75rem;color:#6c757d;text-transform:uppercase;letter-spacing:.5px;line-height:1.2}@media (max-width: 768px){.block-puzzle-board{min-height:500px}#gameCanvas{width:280px!important;height:480px!important}.side-panel{min-height:auto;margin-top:1rem}.control-btn{width:60px;height:60px;font-size:.9rem}.control-btn small{font-size:.6rem}.statistic-number{font-size:1.5rem}.stat-value{font-size:1.2rem}.next-block-container{flex-direction:column;gap:10px;padding:5px 0}.next-block-item canvas{width:60px!important;height:45px!important}}@media (max-width: 576px){.control-buttons-container{gap:8px}.control-btn{width:50px;height:50px;font-size:.8rem}.control-label{font-size:1rem}.touch-controls{margin:0 -1rem;padding:.75rem}}@media (max-width: 767.98px){.side-panel{flex-direction:column;gap:10px;min-height:auto}.score-next-container{display:flex;flex-direction:row;gap:10px}.score-panel,.next-block-panel{flex:1;margin-bottom:15px!important}.pause-panel{width:100%;margin-top:10px}.score-panel .card-body{padding:1rem}.next-block-panel .card-body{padding:.5rem}.score-vertical{flex-direction:column;justify-content:flex-start;gap:8px}.score-item{text-align:center;flex:1}.stat-value{font-size:1.2rem;font-weight:700}.stat-label{font-size:.75rem}.next-block-container{flex-direction:column;align-items:center;gap:10px;padding:10px 0}.next-block-item{max-width:70px}.next-block-item canvas{width:60px!important;height:45px!important}.next-block-item small{font-size:.65rem}}.line-clear-animation{animation:lineFlash .5s ease-in-out}@keyframes lineFlash{0%{opacity:1}25%{opacity:.5;background-color:#fff}50%{opacity:1;background-color:#ff0}75%{opacity:.5;background-color:#fff}100%{opacity:0}}.quad-clear-effect{position:relative;overflow:hidden}.quad-clear-effect::before,.quad-clear-effect::after{content:'';position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;background:linear-gradient(45deg,#ff6b6b,#ffd93d,#6bcf7f,#4ecdc4,#45b7d1,#96ceb4,#ffeaa7,#fab1a0);background-size:400% 400%;border-radius:15px;z-index:-1;opacity:0;animation:quadClearGlow 2s ease-out}.quad-clear-effect::after{animation-delay:.1s;filter:blur(8px)}@keyframes quadClearGlow{0%{opacity:0;background-position:0 50%;transform:scale(0.95)}25%{opacity:1;background-position:100% 50%;transform:scale(1.05)}75%{opacity:.8;background-position:0 50%;transform:scale(1.02)}100%{opacity:0;background-position:100% 50%;transform:scale(1)}}.side-panel.quad-clear-celebration{animation:sideParticleBurst 1.5s ease-out}@keyframes sideParticleBurst{0%{box-shadow:0 0 0 #ff6b6b80 0 0 0 #ffd93d80 0 0 0 #6bcf7f80}50%{box-shadow:-20px -20px 40px #ff6b6bcc 20px -20px 40px #ffd93dcc 0 20px 40px #6bcf7fcc -15px 15px 30px #4ccdc4b3 15px -15px 30px #96ceb4b3;transform:translateY(-5px)}100%{box-shadow:0 0 0 #ff6b6b00 0 0 0 #ffd93d00 0 0 0 #6bcf7f00;transform:translateY(0)}}.game-over-effect{animation:gameOverShake .5s ease-in-out}@keyframes gameOverShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.card:hover{transform:translateY(-2px);transition:transform .3s ease}.side-panel::-webkit-scrollbar{width:4px}.side-panel::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px}.side-panel::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:2px}.side-panel::-webkit-scrollbar-thumb:hover{background:#a8a8a8}