/* Timer overlay proportions and decoration from tiktimer/timer.html. */
@font-face {
  font-family: "TikTimer Inter";
  src: url("./assets/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
.tiktimer-preview {
  position: relative;
  font-family: "TikTimer Inter", Inter, sans-serif;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
  --tt-scale: .15;
  --tt-color: #fff;
  --tt-shadow: 0 -6px #000, 0 6px #000, -6px 0 #000, 6px 0 #000,
    -4px -5px #000, 4px -5px #000, -4px 5px #000, 4px 5px #000,
    -5px -4px #000, 5px -4px #000, -5px 4px #000, 5px 4px #000,
    -2px -6px #000, 2px -6px #000, -2px 6px #000, 2px 6px #000,
    -6px -2px #000, 6px -2px #000, -6px 2px #000, 6px 2px #000;
  --tt-thin-shadow: 0 -3px #000, 0 3px #000, -3px 0 #000, 3px 0 #000,
    -2px -2px #000, 2px -2px #000, -2px 2px #000, 2px 2px #000;
}
.floating-timer .tiktimer-preview { width: 100%; aspect-ratio: 1000 / 600; margin-top: 5px; }
.timer-visual > .tiktimer-preview { position: absolute; inset: 48px 15px 47px; }
.tt-stage {
  position: absolute;
  width: 1000px;
  height: 560px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--tt-scale));
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-timer { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.tt-time {
  position: relative;
  z-index: 1;
  font-size: 224px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: normal;
  color: var(--tt-color);
  white-space: nowrap;
  text-shadow: var(--tt-shadow), 0 10px 40px rgb(255 255 255 / .4), 0 0 60px rgb(255 255 255 / .3);
  transition: color .3s, text-shadow .3s;
}
.tt-multiplier {
  position: absolute;
  top: 100%;
  margin-top: 16px;
  padding: 12px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border: 4px solid #10b981;
  border-radius: 32px;
  background: linear-gradient(135deg, #10b981, rgb(0 0 0 / .5));
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
  color: #fff;
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: var(--tt-thin-shadow), 0 5px 15px rgb(0 0 0 / .5);
  animation: tt-bounce 1s infinite;
}
.tt-multiplier[hidden] { display: none; }
.tt-multiplier-label { letter-spacing: .05em; }
.tt-multiplier-time {
  font-size: 60px;
  font-variant-numeric: tabular-nums;
  padding: 8px 24px;
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / .2);
  background: rgb(0 0 0 / .4);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / .05);
  text-shadow: var(--tt-thin-shadow);
}
.tt-alert {
  position: absolute;
  z-index: 3;
  left: 50%;
  font-size: 123.2px;
  font-weight: 900;
  line-height: 1.5;
  color: #34d399;
  white-space: nowrap;
  text-shadow: var(--tt-thin-shadow), 0 5px 20px rgb(0 0 0 / .9);
  animation: tt-float-up 2s ease-out forwards;
}
@keyframes tt-float-up {
  0% { transform: translate(-50%, 50px) scale(.5); opacity: 0; }
  15% { transform: translate(-50%, -10px) scale(1.2); opacity: 1; }
  80% { transform: translate(-50%, -60px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -100px) scale(.8); opacity: 0; }
}
@keyframes tt-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}
@media (max-width: 767px) {
  .tt-multiplier { font-size: 36px; }
  .tt-multiplier-time { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .tiktimer-preview * { animation: none !important; transition: none; }
}