/* ---- Fullscreen kiosk base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Hide the mouse pointer everywhere — including over the <video>, where the
   browser would otherwise re-show it. !important beats the browser default. */
*, *::before, *::after { cursor: none !important; }

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

/* Each stage fills the whole screen and fades in/out */
.stage {
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade, 800ms) ease-in-out;
  background: #000 center center no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage.visible { opacity: 1; }

/* Media inside a stage */
.stage img,
.stage video,
.stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* "contain" = show the whole image with black bars; "cover" = fill, crop edges */
.stage img.contain,
.stage video.contain { object-fit: contain; }
.stage img.cover,
.stage video.cover   { object-fit: cover; }

/* ---- Fallback / error message ---- */
.message {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: center;
  padding: 6vmin;
}
.message.hidden { display: none; }
.message h1 { font-size: 5vmin; font-weight: 600; letter-spacing: .02em; margin-bottom: 2vmin; opacity: .9; }
.message p  { font-size: 2.6vmin; opacity: .6; max-width: 80vw; line-height: 1.5; }