/* Shared styling for every display wall. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  cursor: none;
}

/* Two stacked players: one shows while the other is prepared, so swaps
   never flash a black frame. */
video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* never crop or distort a client's artwork */
  background: #000;
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;  /* nothing on a display page is clickable */
}
video.live { opacity: 1; }

/* Belt and braces: hide any native control chrome a TV browser might try
   to draw over the video. */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}

#idle {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.2rem;
  font: 500 2rem/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: #4a4a4a;
  text-align: center;
  padding: 2rem;
}
#idle.show { display: flex; }
#idle small { font-size: 1.05rem; color: #333; }