/* === TIMER === */
/* Simple text timer matching points style exactly */

.stat-hourglass {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat-hourglass .stat-label {
  font-family: 'Bubblegum Sans', cursive;
  font-size: 12px;
  color: var(--storybook-brown-deep);
}

.stat-hourglass .timer-text {
  position: relative !important;
  font-family: 'Bubblegum Sans', cursive !important;
  font-size: 1.6em !important;
  font-weight: bold !important;
  color: var(--storybook-brown) !important;
  text-shadow: var(--text-shadow-gold) !important;
  display: inline-block !important;
  min-width: 40px;
  text-align: center;
}

.stat-hourglass .timer-text::after {
  content: '';
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    rgba(255, 217, 102, 0) 0%,
    rgba(255, 217, 102, 0.8) 50%,
    rgba(255, 217, 102, 0) 100%
  ) !important;
  border-radius: 2px !important;
}

.stat-hourglass .timer-text.warning {
  color: #e74c3c !important;
  animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}