/* CreaTV — Splash (rediseño moderno-sobrio) */

/* Layout FAIL-SAFE con CSS grid:
   El bug recurrente era que flex justify-content: center centraba el contenido
   sobre la altura virtual del #app que era mayor a la pantalla visible (notch,
   gesture bar, status bar) → el boton Ver TV caia debajo del viewport.

   Solucion definitiva: grid con 3 filas (top-pad / centro / bottom-pad) donde:
     - El logo ocupa el centro pero con max-height controlado
     - El boton vive en una fila SEPARADA con padding-bottom seguro
     - El boton NUNCA puede salirse del viewport porque tiene su propia
       celda con espacio reservado abajo (con safe-area + min 80px).
*/
#screen-splash {
  background: var(--bg-deep);
  display: grid;
  /* 3 filas: contenido superior (gear+spacer), centro (logo), inferior (boton+hint) */
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  /* Padding interno: respeta safe-area (notch/barra de sistema en TWA Android,
     iPhone notch, overscan TVs). Min 24px arriba/abajo, 16px laterales. */
  padding-top:    max(24px, env(safe-area-inset-top));
  padding-right:  max(16px, env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  padding-left:   max(16px, env(safe-area-inset-left));
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Cuando esta activa, sobrescribir display:none de .screen */
}
#screen-splash.active {
  display: grid !important;
}

/* La logo ocupa la fila 1fr (centro elastico) */
.splash-logo-container {
  grid-row: 2;
}
/* El gear icon ya esta position:absolute, no afecta el grid */
/* btn-ver-tv y hint van naturalmente en grid-row: 3 (auto) */
#btn-ver-tv {
  grid-row: 3;
  margin-top: 24px;
}
.splash-install-hint {
  grid-row: 3;
  margin-top: 8px;
}

.splash-logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ocupa toda la fila 1fr del grid PERO con max para que no se desborde
     en pantallas chicas. min: 0 permite que se contraiga si hace falta. */
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  /* Limites duros: no mas grande que 480px ni que 80% del lado mas corto.
     Esto garantiza que el logo siempre deje espacio para el boton. */
  max-width: min(480px, 80vmin);
  max-height: min(480px, 80vmin);
  margin: 0 auto;
}

.splash-logo {
  /* La imagen interna se adapta al container, no al doble. object-fit: contain
     mantiene proporcion 1:1 sin recortar. */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: splash-fadein 0.6s ease forwards;
  filter: drop-shadow(0 14px 36px rgba(107, 170, 160, 0.25));
}

@keyframes splash-fadein {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Animación Glitch (transición a player) ───────────── */
@keyframes glitch-clip {
  0%   { clip-path: inset(0 0 95% 0); transform: translate(-4px, 0); }
  10%  { clip-path: inset(30% 0 50% 0); transform: translate(4px, 0); }
  20%  { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
  30%  { clip-path: inset(10% 0 80% 0); transform: translate(3px, 0); }
  40%  { clip-path: inset(70% 0 5% 0);  transform: translate(-4px, 0); }
  50%  { clip-path: inset(40% 0 40% 0); transform: translate(2px, 0); }
  60%  { clip-path: inset(5% 0 70% 0);  transform: translate(-3px, 0); }
  70%  { clip-path: inset(80% 0 10% 0); transform: translate(4px, 0); }
  80%  { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 0); }
  90%  { clip-path: inset(50% 0 30% 0); transform: translate(3px, 0); }
  100% { clip-path: inset(0 0 0 0);     transform: translate(0, 0); }
}

@keyframes glitch-color {
  0%, 100% { filter: hue-rotate(0deg)   saturate(1)   brightness(1); }
  25%       { filter: hue-rotate(90deg)  saturate(3)   brightness(1.5); }
  50%       { filter: hue-rotate(180deg) saturate(0.5) brightness(0.8); }
  75%       { filter: hue-rotate(270deg) saturate(2)   brightness(1.3); }
}

.logo-glitch {
  animation:
    glitch-clip  0.15s steps(1) infinite,
    glitch-color 0.3s  linear   infinite !important;
}

/* Capa de ruido/estática */
.static-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 2px
  );
}
.static-overlay.active {
  opacity: 0.3;
  animation: flicker 0.05s steps(1) infinite;
}
@keyframes flicker {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.1; }
  100% { opacity: 0.3; }
}

/* Flash negro global */
.flash-black {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.2s ease;
}
.flash-black.visible { opacity: 1; }

/* ── Botón Ver TV ───────────────────────────────────────
   Píldora con borde sutil, texto blanco, sin estridencia. Hover/focus
   leves. Funciona igual de bien con tactil, mouse y mando-TV. */
#btn-ver-tv {
  padding: 16px 56px;
  font-size: 22px;
  font-weight: 700;
  background: var(--crea-teal);
  color: #0D1C1A;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.5px;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 24px rgba(107, 170, 160, 0.25);
  min-width: 200px;
}
#btn-ver-tv:hover {
  background: var(--crea-mint);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(145, 201, 168, 0.35);
}
#btn-ver-tv:active {
  transform: translateY(0);
}
#btn-ver-tv:focus,
#btn-ver-tv.focused {
  outline: none;
  border-color: var(--accent-focus);
  box-shadow: 0 0 0 4px rgba(212, 236, 90, 0.25);
}

/* Hint de instalación (solo visible en iOS Safari, mostrado por JS).
   En TVs no se muestra (es iOS-only), por eso 14 px es OK; subimos
   ligeramente desde 13 → 14 para mejor lectura genérica. */
.splash-install-hint {
  display: none;
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
}
.splash-install-hint.visible {
  display: block;
  animation: splash-fadein 0.4s ease 0.6s forwards;
  opacity: 0;
}
.splash-install-hint .icon {
  display: inline-block;
  vertical-align: -3px;
  margin: 0 2px;
  font-weight: 700;
}

/* ── Responsive ───────────────────────────────────────────────
   Con el nuevo grid layout, el logo se contrae automaticamente para
   dejar espacio al boton. Estas media queries solo ajustan tamanos
   tipograficos para que se vean bien. */
@media (max-width: 480px) {
  #btn-ver-tv { padding: 14px 44px; font-size: 20px; min-width: 180px; }
}

/* Portrait celular */
@media (orientation: portrait) and (max-width: 640px) {
  .splash-logo-container { max-width: min(360px, 70vmin); max-height: min(360px, 70vmin); }
  #btn-ver-tv            { padding: 14px 40px; font-size: 19px; min-width: 170px; }
  .splash-install-hint   { font-size: 13px; max-width: 280px; }
}

/* Pantallas muy bajas (mobile en landscape, ~360px alto): comprimir logo */
@media (max-height: 520px) {
  .splash-logo-container { max-width: min(280px, 60vh); max-height: min(280px, 60vh); }
  #btn-ver-tv            { padding: 10px 28px; font-size: 16px; min-width: 140px; }
}