/* Funcional Fitness — public billboard styles (atop Tailwind CDN). */

.nums { font-variant-numeric: tabular-nums; }

/* live indicator */
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 999px;
  background: #e11d48; box-shadow: 0 0 0 0 rgba(225,29,72,.5);
  animation: pulse-dot 1.1s ease-in-out infinite;
}

/* entrance */
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: riseIn .4s cubic-bezier(.2,0,0,1) both; }

/* horizontal day strip */
.scroll-x { scrollbar-width: thin; scrollbar-color: #c2ccda transparent; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: #c2ccda; border-radius: 999px; }
/* Subtle week-strip day chips — compact, scroll horizontally. */
.day-chip { flex: 0 0 auto; scroll-snap-align: center; transition: color .15s ease; }

/* Full-screen stadium background. Landscape WebP by default; swap to a 9:16 image
   on portrait/mobile aspect ratios. Sizes/cover come from Tailwind classes on #app. */
#app { background-image: url('bgupscale.webp'); background-position: center 48%; }
@media (max-aspect-ratio: 3/4) {
  #app { background-image: url('bgupscale_mobile.webp'); background-position: center; }
}