#mine-wrapper .game-timer-container { display: flex; gap: 12px; justify-content: center; margin-bottom: 10px; } #mine-wrapper .game-timer { display: flex; gap: 10px; align-items: center; justify-content: center; min-width: 115px; border-radius: 8px; padding: 8px 18px; font-family: 'Rajdhani', sans-serif; font-weight: bold; border: 2px solid transparent; transition: all 0.4s ease; } // Red – waiting #mine-wrapper .game-timer.red-timer { background: linear-gradient(to bottom, #4a0603 0%, #6b2515 100%); border-color: #7a1e10; color: rgba(246, 125, 82, 0.55); } // Red – active (thinking) #mine-wrapper .game-timer.red-timer.active { background: linear-gradient(to bottom, #ad0a05 0%, #f67d52 100%); border-color: #ff9b6b; color: #fff; box-shadow: 0 0 16px rgba(173, 10, 5, 0.75), 0 0 5px rgba(246, 125, 82, 0.5); } // Blue – waiting #mine-wrapper .game-timer.blue-timer { background: linear-gradient(to bottom, #0b2530 0%, #163d55 100%); border-color: #173650; color: rgba(149, 207, 245, 0.55); } // Blue – active (thinking) #mine-wrapper .game-timer.blue-timer.active { background: linear-gradient(to bottom, #236f87 0%, #95cff5 100%); border-color: #b8e5ff; color: #fff; box-shadow: 0 0 16px rgba(35, 111, 135, 0.75), 0 0 5px rgba(149, 207, 245, 0.5); } #mine-wrapper .game-timer .timer-icon { font-size: 15px; opacity: 0.7; flex-shrink: 0; } #mine-wrapper .game-timer.active .timer-icon { opacity: 1; animation: timer-icon-pulse 1.6s ease-in-out infinite; } @keyframes timer-icon-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.2); opacity: 1; } } #mine-wrapper .game-timer .timer-display { font-family: 'Courier New', monospace; font-size: 20px; letter-spacing: 2px; }