:root{--primary-color:#4a6cf7;--primary-light:#6a8af8;--primary-dark:#3a56d4;--primary-gradient:linear-gradient(135deg,#4a6cf7 0%,#6a8af8 100%);--primary-gradient-hover:linear-gradient(135deg,#3a56d4 0%,#5a7af7 100%);--grid-bg:#bbada0;--cell-bg:rgba(238,228,218,0.35);--text-color:#776e65;--light-bg:#f8f9fa;--shadow-sm:0 2px 8px rgba(0,0,0,0.06);--shadow-md:0 4px 12px rgba(0,0,0,0.08);--shadow-lg:0 8px 24px rgba(0,0,0,0.1);--transition:all 0.3s ease}.game-container{position:relative;overflow:hidden}.game-grid-wrapper{position:relative;max-width:500px;margin:0 auto}.game-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;background-color:var(--grid-bg);border-radius:12px;padding:10px;aspect-ratio:1/1;box-shadow:inset 0 0 8px rgba(0,0,0,0.1)}.grid-cell{background-color:var(--cell-bg);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.5rem;color:var(--text-color);transition:var(--transition);box-shadow:inset 0 0 4px rgba(0,0,0,0.05)}.tile{position:absolute;width:calc(25% - 12px);height:calc(25% - 12px);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.75rem;color:#776e65;transition:all 0.2s cubic-bezier(0.22,0.61,0.36,1);z-index:2;box-shadow:0 3px 8px rgba(0,0,0,0.1);user-select:none}.tile-2{background-color:#eee4da}.tile-4{background-color:#ede0c8}.tile-8{background-color:#f2b179;color:#f9f6f2}.tile-16{background-color:#f59563;color:#f9f6f2}.tile-32{background-color:#f67c5f;color:#f9f6f2}.tile-64{background-color:#f65e3b;color:#f9f6f2}.tile-128{background-color:#edcf72;color:#f9f6f2;font-size:1.5rem;box-shadow:0 4px 10px rgba(237,207,114,0.3)}.tile-256{background-color:#edcc61;color:#f9f6f2;font-size:1.5rem;box-shadow:0 4px 10px rgba(237,204,97,0.3)}.tile-512{background-color:#edc850;color:#f9f6f2;font-size:1.5rem;box-shadow:0 4px 10px rgba(237,200,80,0.3)}.tile-1024{background-color:#edc53f;color:#f9f6f2;font-size:1.3rem;box-shadow:0 4px 12px rgba(237,197,63,0.4)}.tile-2048{background-color:#edc22e;color:#f9f6f2;font-size:1.3rem;box-shadow:0 4px 12px rgba(237,194,46,0.4)}.score-container{background:var(--primary-gradient);color:#ffffff;border-radius:6px;padding:0.25rem 1.65rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.score-label{font-size:0.875rem;opacity:0.9;margin-bottom:0.25rem}.score-value{font-size:1.25rem;line-height:1;font-weight:bold;padding:4px}.badge-primary{background:var(--primary-gradient) !important;border:none}@media (max-width:768px){.game-grid{grid-gap:10px;padding:10px}.tile{width:calc(25% - 14px);height:calc(25% - 14px);font-size:1.5rem}.tile-128,.tile-256,.tile-512{font-size:1.3rem}.tile-1024,.tile-2048{font-size:1.1rem}.score-value{font-size:1.5rem}}@media (max-width:576px){.game-grid{grid-gap:8px;padding:8px}.tile{width:calc(25% - 12px);height:calc(25% - 12px);font-size:1.25rem}.tile-128,.tile-256,.tile-512{font-size:1.1rem}.tile-1024,.tile-2048{font-size:0.9rem}.score-container{padding:0.5rem 1rem}.score-value{font-size:1.25rem}}.key-hint{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:8px;font-weight:bold;margin:0 3px;box-shadow:0 2px 4px rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.05)}.game-over-mask{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;z-index:10;backdrop-filter:blur(8px);animation:fadeIn 0.5s ease-out}.game-over-mask .text-center{background:rgba(255,255,255,0.95);padding:1rem;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.2);max-width:90%;animation:slideUp 0.4s ease-out 0.2s both}.game-over-mask h3{color:#4a6cf7;font-size:1.6rem;font-weight:700;margin-bottom:1rem;text-shadow:0 2px 4px rgba(0,0,0,0.1)}.game-over-mask p{color:#333;font-size:1.2rem;margin-bottom:2rem;display:grid}.game-over-mask #final-score{color:#4a6cf7;font-size:1.8rem;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,0.1)}.game-over-mask #play-again-btn{color:#ffffff;font-weight:600;box-shadow:0 4px 12px rgba(74,108,247,0.3);transition:all 0.3s ease}.game-over-mask #play-again-btn:hover{background:linear-gradient(135deg,#3a56d4 0%,#5a7af7 100%);transform:translateY(-2px);box-shadow:0 6px 16px rgba(74,108,247,0.4)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.game-over-mask .text-center{padding:1.5rem}.game-over-mask h3{font-size:1.5rem}.game-over-mask p{font-size:1rem}.game-over-mask #final-score{font-size:1.5rem}.game-over-mask #play-again-btn{font-size:1rem;padding:0.7rem 1.5rem}}@media (max-width:576px){.game-over-mask .text-center{padding:1.25rem}.game-over-mask h3{font-size:1.3rem}.game-over-mask p{font-size:0.9rem}.game-over-mask #final-score{font-size:1.3rem}.game-over-mask #play-again-btn{font-size:0.9rem;padding:0.6rem 1.2rem}}.compact-section{padding-top:1.5rem;padding-bottom:1.5rem}.controls-card{background:#ffffff;border-radius:12px;padding:1.25rem;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.05)}@keyframes tile-appear{0%{opacity:0;transform:scale(0.5)}100%{opacity:1;transform:scale(1)}}.tile-new{animation:tile-appear 0.3s ease}.progress-indicator{margin-top:1rem}.mobile-controls{display:none}@media (max-width:768px){.mobile-controls{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}.mobile-control-btn{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#ffffff;border:1px solid rgba(74,108,247,0.2);font-size:1.5rem;color:var(--primary-color);box-shadow:var(--shadow-sm);transition:var(--transition)}.mobile-control-btn:active{background:rgba(74,108,247,0.1);transform:scale(0.95)}}@media (max-width:768px){.btn-mobile{font-size:1rem;padding:0.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px}.score-container{padding:0.4rem 0.8rem}.score-value{font-size:1.25rem}.score-label{font-size:0.75rem}}@media (min-width:769px) and (max-width:992px){.btn-mobile{font-size:0.9rem;padding:0.5rem 1rem;min-width:90px}}@media (min-width:769px){.btn-mobile{font-size:0.875rem;padding:0.5rem 1rem;min-width:100px}.btn-mobile::after{content:attr(data-text);margin-left:0.5rem}}