html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  cursor: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Per-venue brand accent, set from JS (payload.accentColor). Falls back
   to white so unconfigured venues keep the original neutral look. */
#stage {
  --accent: #ffffff;
  --accent-glow: rgba(255, 255, 255, 0.35);
  --accent-glow-strong: rgba(255, 255, 255, 0.55);
}

/* Everything below is positioned with explicit px via JS (app.js),
   against the fixed 1920x1080 design canvas - plain absolute
   positioning, no flexbox "gap" (not reliably supported on older
   Tizen/Chromium signage browsers). */

#stage-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

#stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background: #000;
  transform-origin: top left;
}

#video-box {
  position: absolute;
  background: #000;
  overflow: hidden;
}

#video-box video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

#bottom-left-slot {
  position: absolute;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  box-sizing: border-box;
}

#bottom-slot-logo {
  flex: 0 0 auto;
  height: 70%;
  width: auto;
  object-fit: contain;
  margin-right: 48px;
  display: none; /* shown via JS once a logo is actually configured */
}

#bottom-slot-text {
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--accent);
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  animation: glow-pulse 2.6s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 16px var(--accent-glow), 0 0 2px rgba(255, 255, 255, 0.5); }
  50% { text-shadow: 0 0 34px var(--accent-glow-strong), 0 0 6px rgba(255, 255, 255, 0.7); }
}

#hours-box {
  position: absolute;
  color: #fff;
}

#hours-today {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #0a0a0a;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-sizing: border-box;
  border-radius: 14px;
  border: 3px solid transparent;
  transition: background-color 0.3s ease;
  /* .has-data (toggled from JS only once real data has been rendered)
     carries the accent background/glow - never a static white box, so
     a data outage never shows up blank/white */
}

#hours-today.has-data {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 30px var(--accent-glow);
}

/* The badge's own background IS the accent color, so its text must stay
   a fixed dark color regardless of --accent - never accent-on-accent
   (which is how "Heute" ended up unreadable: white/yellow text on a
   yellow badge). Higher specificity than .hours-row .weekday-date/.time
   on purpose, so it always wins regardless of source order. */
#hours-today.has-data .weekday-date,
#hours-today.has-data .time {
  color: #0a0a0a;
  font-weight: 900;
}

#hours-loading {
  color: #fff;
  opacity: 0.6;
  font-weight: 600;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
}

.hours-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.035);
}

.hours-row .weekday-date {
  white-space: nowrap;
  font-weight: 500;
  color: #e8e8e8;
}

.hours-row .time {
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
  color: var(--accent);
}

#qr-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Rein dekorativ: Neon-Golfball-Grafik (assets/qr-ball.png). Das
   aufgedruckte QR-Muster im Bild selbst ist nur Deko und nicht scanbar
   (über die gewölbte Kugel verzerrt) - bewusst kein echter, scanbarer
   QR-Code mehr auf der Seite. */
#qr-ball {
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
  background-image: url('assets/qr-ball.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 0 55px 10px var(--accent-glow),
    0 0 120px 30px var(--accent-glow);
}