/* ============================================================
   JOVEM RIO MIDIA INDOOR - PLAYER (Smart TV / TV Box)
   Estilos da tela de reproducao.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  color: #fff;
}

/* ---------- Tela de PIN ---------- */
#pinScreen {
  position: fixed; top:0; left:0; right:0; bottom:0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #062a55 0%, #0b5cab 55%, #08203f 100%);
  z-index: 50;
}
#pinScreen.hidden, #player.hidden { display: none; }

.card {
  text-align: center;
  padding: 4vmin 9vmin;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  max-width: 90vw; max-height: 90vh;
  overflow: hidden;
}
.logoMark {
  width: 6vmin; height: 6vmin;
  margin: 0 auto 2vmin;
  border-radius: 18px;
  background: linear-gradient(135deg, #25c2ff, #0b5cab);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 2.6vmin; color: #fff;
}
.brandTitle { font-size: 3.2vmin; font-weight: 700; letter-spacing: 1px; margin-bottom: 1vmin; }
.brandSub  { font-size: 1.7vmin; opacity: 0.75; margin-bottom: 4vmin; }

.pinLabel { font-size: 1.6vmin; opacity: 0.7; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1.2vmin; }
.pinCode {
  font-size: 12vmin; font-weight: 800; letter-spacing: 2vmin;
  color: #25c2ff; text-shadow: 0 4px 24px rgba(37,194,255,0.35);
  margin-bottom: 3vmin; user-select: none;
}
.pinHint { font-size: 1.7vmin; line-height: 1.6; max-width: 60vw; margin: 0 auto; opacity: 0.85; }

.statusLine { margin-top: 3vmin; font-size: 1.7vmin; color: #25c2ff; }
.spinner {
  display: inline-block; width: 1.8vmin; height: 1.8vmin;
  border: 0.3vmin solid rgba(37,194,255,0.25); border-top-color: #25c2ff;
  border-radius: 50%; vertical-align: middle;
  animation: spin 0.9s linear infinite; margin-right: 1vmin;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tela de reproducao ---------- */
#player {
  position: fixed; top:0; left:0; right:0; bottom:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(37,194,255,0.18), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(11,92,171,0.35), transparent 45%),
    linear-gradient(135deg, #062a55, #0b5cab);
}
#mediaLayer { position: absolute; top:0; left:0; right:0; bottom:0; z-index: 1; }

/* Apresentacao de carga (logotipo enquanto busca a playlist) */
.splash {
  position: absolute; top:0; left:0; right:0; bottom:0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2vmin;
}
.splashLogo {
  width: 14vmin; height: 14vmin; border-radius: 20%;
  background: linear-gradient(135deg, #25c2ff, #0b5cab);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 6vmin; color: #fff;
  box-shadow: 0 2vmin 5vmin rgba(0,0,0,0.25);
}
.splashName { font-size: 4vmin; font-weight: 600; letter-spacing: 1px; color: #fff; opacity: .92; }
.splash .statusLine { margin-top: 1vmin; color: #cfe9ff; }

/* Temporizador opcional durante video (protecao) */
#mediaLayer img.photo {
  position: absolute; top:0; left:0; right:0; bottom:0;
  width: 100%; height: 100%;
  object-fit: contain;
}
#mediaLayer img.photo.cover { object-fit: cover; }

#mediaLayer video.mediaVideo {
  position: absolute; top:0; left:0; right:0; bottom:0;
  width: 100%; height: 100%;
  object-fit: contain; background: #000;
}
#mediaLayer iframe.mediaIframe {
  position: absolute; top:0; left:0; right:0; bottom:0;
  width: 100%; height: 100%; border: 0;
}

/* Texto simples — tamanho proporcional a tela (qualquer proporcao: 16:9, 4:3, 21:9) */
.textBox {
  position: absolute; top:0; left:0; right:0; bottom:0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(37,194,255,0.18), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(11,92,171,0.35), transparent 45%),
    linear-gradient(135deg, #062a55, #0b5cab);
  font-size: 64px;
  font-size: 9vmin;
  font-weight: 600; line-height: 1.3;
  padding: 6vmin;
}

/* Ticker rolante */
.tickerBox {
  position: absolute; top:0; left:0; right:0; bottom:0;
  display: flex; align-items: center;
  overflow: hidden; white-space: nowrap;
}
.tickerBar { display: inline-block; padding-left: 100%; animation: marquee 22s linear infinite; }
.tickerBar span { font-size: 14vmin; font-weight: 800; color: #25c2ff; text-shadow: 0 6px 30px rgba(37,194,255,0.3); }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* Fade entre itens */
.fade-enter { animation: fadeIn 0.7s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Widgets overlays */
#clockBox {
  position: absolute; top: 2vmin; right: 3vmin; z-index: 10;
  text-align: right; pointer-events: none;
  font-family: "Segoe UI", Arial, sans-serif;
}
#clockTime { font-size: 4vmin; font-weight: 700; letter-spacing: 2px; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
#clockDate { font-size: 1.7vmin; margin-top: 2px; opacity: 0.75; }

/* Avisos */
#noticeLayer {
  position: absolute; top:0; left:0; right:0; bottom:0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: #000e1f;
}
#noticeLayer.hidden { display: none; }
#noticeLayer .notice {
  text-align: center; max-width: 70vw; padding: 3vmin;
  font-size: 2.4vmin; line-height: 1.5; color: #9fd4ff;
}
#noticeLayer .notice .big { font-size: 4.2vmin; color: #25c2ff; font-weight: 700; margin-bottom: 1.6vmin; }

/* Transicao de pin -> player suave */
#player.ready { animation: playerIn 0.8s ease both; }
@keyframes playerIn { from { opacity: 0; } to { opacity: 1; } }

/* Status discreto do cache off-line (canto inferior esquerdo) */
#cacheStatus {
  position: absolute; left: 2vmin; bottom: 1.6vmin; z-index: 20;
  font-size: 1.5vmin; color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.35);
  padding: 0.8vmin 1.6vmin;
  border-radius: 8px;
  pointer-events: none; white-space: nowrap;
}
#cacheStatus.hidden { display: none; }