html, body {
  height: 100%;
  margin: 0;
}

@keyframes flip {
  0% { transform: rotateX(0deg); filter: brightness(1); }
  49% { transform: rotateX(88deg); filter: brightness(1.08); }
  50% { transform: rotateX(92deg); filter: brightness(0.95); }
  100% { transform: rotateX(0deg); filter: brightness(1); }
}

/* Branding button (colours + hover effects controlled by CSS variables)
   --brand-primary
   --brand-secondary
   --brand-hover-gradient ("1"|"0")
   --brand-hover-anim (none|sheen|pulse)
*/
.brand-button {
  background: var(--brand-primary, #FBBF24);
  transition: transform 180ms ease, filter 180ms ease, background-position 650ms ease;
  user-select: none;
}

.brand-button:hover {
  filter: brightness(1.05);
}

.brand-button:active {
  filter: brightness(0.95);
  transform: translateY(1px);
}

/* Gradient hover (enabled via --brand-hover-gradient) */
.bg-wrap[style*="--brand-hover-gradient: 1"] .brand-button:hover {
  background-image: linear-gradient(90deg, var(--brand-primary, #FBBF24), var(--brand-secondary, #F59E0B), var(--brand-primary, #FBBF24));
  background-size: 200% 200%;
  background-position: 0% 50%;
}

/* Sheen animation on hover */
.bg-wrap[style*="--brand-hover-anim: sheen"] .brand-button:hover {
  background-position: 100% 50%;
}

/* Pulse animation on hover */
@keyframes brandPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.bg-wrap[style*="--brand-hover-anim: pulse"] .brand-button:hover {
  animation: brandPulse 900ms ease-in-out infinite;
}

/* Rolling fog overlay */
.bg-wrap { position: relative; overflow: hidden; }
.fog-layer {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0.35;
  filter: blur(18px) saturate(1.05);
  mix-blend-mode: screen;
  background:
    radial-gradient(closest-side at 20% 30%, rgba(255,255,255,0.14), rgba(255,255,255,0) 65%),
    radial-gradient(closest-side at 70% 60%, rgba(255,255,255,0.11), rgba(255,255,255,0) 68%),
    radial-gradient(closest-side at 45% 80%, rgba(255,255,255,0.09), rgba(255,255,255,0) 70%);
  animation: fogDrift 24s linear infinite;
}

@keyframes fogDrift {
  0% { transform: translate3d(-6%, -4%, 0) scale(1.05); }
  50% { transform: translate3d(6%, 3%, 0) scale(1.1); }
  100% { transform: translate3d(-6%, -4%, 0) scale(1.05); }
}


/* Mobile responsiveness */
@media (max-width: 640px) {
  /* Make board scrollable horizontally if needed */
  .ticker-board-wrapper {
    overflow-x: auto;
  }

  /* Reduce gaps and increase cell size for legibility */
  .ticker-grid {
    gap: 0.25rem !important;
  }

  .flip-cell {
    min-width: 28px;
    min-height: 36px;
  }
}