/* Delmar signage player styles. Sizes use vmin so overlays scale from 1080p to 4K. */

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

* { cursor: none; }

#stage {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
}

/* Two stacked layers. The incoming one fades in on top of the outgoing one. */
.layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.layer.visible { opacity: 1; }

.media {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000; /* letterbox bars stay black and opaque during fades */
  object-fit: contain;
}
.media.fit-cover { object-fit: cover; }
/* HTML slides scale themselves. No pointer events, so no cursor or hover effects. */
.media-html { pointer-events: none; overflow: hidden; }

/* Shown only when nothing is playable (first boot offline, all slides expired). */
#fallback {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: #000;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9vmin;
  font-weight: bold;
  letter-spacing: 0.05em;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#fallback.visible { opacity: 1; }

#clock {
  position: fixed;
  right: 3vmin;
  bottom: 3vmin;
  z-index: 4;
  padding: 1.2vmin 2.4vmin;
  border-radius: 1.2vmin;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: right;
  text-shadow: 0 0.2vmin 0.6vmin rgba(0, 0, 0, 0.6);
  line-height: 1.15;
}
#clock-time { font-size: 5.5vmin; font-weight: bold; }
#clock-date { font-size: 2.4vmin; opacity: 0.9; }

#debug {
  position: fixed;
  top: 2vmin;
  left: 2vmin;
  z-index: 5;
  margin: 0;
  padding: 1.2vmin 1.6vmin;
  max-width: 90vw;
  background: rgba(0, 0, 0, 0.75);
  color: #7CFC9A;
  font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: 1.7vmin;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
}

.hidden { display: none !important; }