/* timer/timer.css — transparent OBS overlay */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: transparent !important;   /* CRITICAL for OBS browser source */
  overflow: hidden;
  font-family: 'Segoe UI', 'Heebo', 'Rubik', 'Arial', sans-serif;
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
}

.overlay {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;          /* big timer on the LEFT visually, RTL */
  justify-content: space-around;
  align-items: center;
  padding: 40px 60px;
  gap: 60px;
}

.timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.timer .title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.9);
  opacity: 0.95;
}

.timer .digits {
  font-family: 'Roboto Mono', 'Consolas', 'Courier New', monospace;
  font-size: 140px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 4px;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 18px currentColor,
    0 4px 16px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 1);
  transition: color 600ms ease;
}

.timer .meta {
  font-size: 22px;
  font-weight: 600;
  opacity: 0.85;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* Default colors */
.timer.big .digits  { color: #FFD700; }
.timer.small .digits { color: #ffffff; }

/* Goal-reached state — applies for the GOAL_WINDOW_HOURS after each reset */
.timer.at-goal .digits {
  color: #00ff88 !important;
  animation: pulse 1.6s ease-in-out infinite;
}

.timer.at-goal .title {
  color: #00ff88;
}

@keyframes pulse {
  0%, 100% {
    text-shadow:
      0 0 18px #00ff88,
      0 0 36px rgba(0, 255, 136, 0.45),
      0 4px 16px rgba(0, 0, 0, 0.9);
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 28px #00ff88,
      0 0 60px rgba(0, 255, 136, 0.7),
      0 4px 16px rgba(0, 0, 0, 0.9);
    transform: scale(1.03);
  }
}

.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Single-timer mode (big.html / small.html) — fills the viewport. */
body.mode-single .overlay { justify-content: center; }
body.mode-single .timer .digits { font-size: 220px; letter-spacing: 6px; }
body.mode-single .timer .title  { font-size: 48px; }
body.mode-single .timer .meta   { font-size: 28px; }

@media (max-width: 1100px) {
  .overlay { flex-direction: column; gap: 30px; padding: 20px; }
  .timer .digits { font-size: 84px; }
  .timer .title { font-size: 22px; }
  .timer .meta { font-size: 16px; }
  body.mode-single .timer .digits { font-size: 110px; }
  body.mode-single .timer .title  { font-size: 28px; }
  body.mode-single .timer .meta   { font-size: 18px; }
}