/* Signage web player.
   Targets LG webOS TV browsers, which are several years behind desktop Chrome:
   no CSS nesting, no :has(), no container queries. Everything here is
   deliberately plain so it renders identically on a 2018 panel. */

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

/* MUST stay above every layout rule below.
   The [hidden] attribute is only honoured by a low-priority browser default,
   so any author rule setting `display` on the same element silently defeats
   it. .overlay{display:flex} did exactly that, leaving the pairing, idle,
   setup and diagnostics panels permanently on screen over the content. */
[hidden] { display: none !important; }

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* A TV has no pointer; hiding the cursor stops an arrow sitting on the wall. */
  cursor: none;
  user-select: none;
}

#stage {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  /* Duration is overwritten from playlist settings at runtime. */
  transition: opacity 700ms ease-in-out;
  background: #000;
}
.layer.visible { opacity: 1; }

/* Media fills the layer, letterboxed by default. */
.layer img,
.layer video,
.layer canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
.layer img.cover,
.layer video.cover,
.layer canvas.cover { object-fit: cover; }

.layer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Announcement slides */
.notice {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5vh 6vw;
  font-weight: 700;
  line-height: 1.2;
}

/* Full-screen clock item */
.bigclock {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bigclock .t { font-size: 18vw; font-weight: 700; line-height: 1; }
.bigclock .d { font-size: 4vw; opacity: .7; margin-top: 1vh; }

/* ------------------------------------------------------------ overlays */

#clock {
  position: absolute;
  bottom: 3vh; right: 3vw;
  background: rgba(0,0,0,.45);
  padding: 1.2vh 1.6vw;
  border-radius: 8px;
  text-align: center;
  z-index: 20;
}
#clock .clock-time { font-size: 3.4vw; font-weight: 700; line-height: 1.1; }
#clock .clock-date { font-size: 1.4vw; opacity: .75; }

#ticker {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  background: #0b3d91;
  color: #fff;
  padding: 1.4vh 0;
  font-size: 2.6vw;
  white-space: nowrap;
  overflow: hidden;
  z-index: 25;
}
#ticker span {
  display: inline-block;
  padding-left: 100%;
  /* Duration is set from settings at runtime. */
  animation: scroll-left 45s linear infinite;
}
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ------------------------------------------------------- full screens */

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0b2545;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4vh 5vw;
  z-index: 50;
}
.overlay h1 { font-size: 3.4vw; margin-bottom: 1.5vh; }
.overlay .sub { font-size: 1.7vw; opacity: .7; max-width: 70vw; line-height: 1.5; }

#pair-code {
  font-size: 9vw;
  font-weight: 700;
  letter-spacing: .18em;
  background: #173a63;
  padding: 2.5vh 4vw;
  border-radius: 12px;
  margin: 3vh 0;
}

#sleeping {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  z-index: 60;
}

/* Setup and diagnostics are operated with a TV remote, so targets are large
   and focus must be unmistakable from across a room. */
#setup input {
  font-size: 2vw;
  padding: 1.5vh 2vw;
  width: 60vw;
  margin: 2vh 0;
  border-radius: 8px;
  border: 2px solid #2a3348;
  background: #0f1420;
  color: #fff;
  text-align: center;
}
.buttons { display: flex; gap: 1.5vw; margin-top: 1vh; flex-wrap: wrap; justify-content: center; }
.buttons button {
  font-size: 1.6vw;
  padding: 1.4vh 2.5vw;
  border-radius: 8px;
  border: 2px solid #2a3348;
  background: #1e2637;
  color: #fff;
  cursor: pointer;
}
.buttons button:focus,
#setup input:focus {
  outline: none;
  border-color: #4a8cff;
  box-shadow: 0 0 0 4px rgba(74,140,255,.35);
}

#diag-body {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.3vw;
  text-align: left;
  background: #0f1420;
  padding: 2vh 2vw;
  border-radius: 10px;
  max-height: 55vh;
  overflow: auto;
  white-space: pre-wrap;
  margin: 2vh 0;
}