.game-over-buttons { display: flex; gap: 16px; justify-content: center; margin-top: 42px; } .btn-game-icon { width: clamp(70px, 10vw, 80px); height: clamp(70px, 10vw, 80px); padding: 0; background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 20px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .btn-game-icon svg { width: clamp(32px, 5vw, 38px); height: clamp(32px, 5vw, 38px); transition: all 0.3s ease; position: relative; z-index: 2; } .btn-game-icon::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transition: left 0.5s ease; } .btn-game-icon:hover::before { left: 100%; } .btn-game-icon:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2); transform: translateY(-4px); } .btn-game-icon:active { transform: translateY(0); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 2px 8px rgba(0, 0, 0, 0.3); } .btn-restart-game { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)); border-color: rgba(16, 185, 129, 0.6); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .btn-restart-game svg { color: #10b981; filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.5)); } .btn-restart-game:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3)); border-color: rgba(16, 185, 129, 0.9); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 50px rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn-restart-game:hover svg { transform: rotate(180deg); color: #34d399; } .btn-home-game { background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(2, 132, 199, 0.2)); border-color: rgba(14, 165, 233, 0.6); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(14, 165, 233, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .btn-home-game svg { color: #0ea5e9; filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.5)); } .btn-home-game:hover { background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(2, 132, 199, 0.3)); border-color: rgba(14, 165, 233, 0.9); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 50px rgba(14, 165, 233, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn-home-game:hover svg { transform: scale(1.1); color: #38bdf8; }