[v-cloak] { display: none !important; }

/* Global Fonts for Vuetify Elements */
.v-application, 
.v-application .text-body-1, 
.v-application .text-body-2, 
.v-application .text-h1, 
.v-application .text-h2, 
.v-application .text-h3, 
.v-application .text-h4, 
.v-application .text-h5, 
.v-application .text-h6, 
.v-btn {
  font-family: 'Tajawal', sans-serif !important;
}

/* Custom Utilities that Vuetify doesn't strictly cover for our specific design */
.fire-icon {
  filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.5));
}

.session-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.session-card:active {
  transform: scale(0.98);
}

.completed-badge {
  position: absolute;
  top: 15px;
  right: -35px; /* Since RTL, right is left, left is right conceptually. We want it on a corner. */
  background: #10b981;
  color: white;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 40px;
  transform: rotate(45deg);
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 10;
}

.description-box {
  border-right: 4px solid #f43f5e;
}

/* Big Timer Display */
.timer-display {
  font-size: 5.5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -2px;
  transition: all 0.3s ease;
  font-family: 'Courier New', Courier, monospace; /* To make it look like a digital clock */
  text-shadow: 0 0 15px rgba(255,255,255,0.1);
}

@media (max-width: 400px) {
  .timer-display {
    font-size: 4.5rem;
  }
}

.pulse-anim {
  animation: pulseTimer 1s infinite;
}

@keyframes pulseTimer {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.bounce-anim {
  animation: bounceMedal 2s infinite;
}

@keyframes bounceMedal {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.timer-play-btn {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  color: white !important;
}