/* ============================================================
   RETO ERONDON · Vista TV
   Marcador tipo retransmisión: fondo noche neutro, todo el
   color lo ponen los 3 participantes. El líder lleva oro.
   Pensado para verse a 3 metros en una pantalla 16:9.
   ============================================================ */

:root{
  --ink:      #0a0f1e;
  --ink-2:    #0d1428;
  --panel:    #121a31;
  --panel-2:  #0f1526;
  --linea:    rgba(255,255,255,.08);
  --texto:    #f4f6ff;
  --apagado:  #93a0c8;
  --oro:      #f6c445;
  --oro-suave: rgba(246,196,69,.16);
  --radio:    22px;
  --display:  "Bebas Neue", "Arial Narrow", sans-serif;
  --cuerpo:   "Archivo", "Segoe UI", Arial, sans-serif;
}

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

html,body{ height:100%; }

body.tv{
  background:
    radial-gradient(1200px 600px at 85% -10%, #16224a 0%, rgba(22,34,74,0) 60%),
    radial-gradient(900px 500px at 0% 110%, #131c3d 0%, rgba(19,28,61,0) 55%),
    var(--ink);
  color:var(--texto);
  font-family:var(--cuerpo);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding: 2.2vh 2.4vw 2.4vh;
}

/* ------------------------------ cabecera ------------------------------ */

.top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1.6vh;
}
.brand{ display:flex; align-items:center; gap:1vw; }
.flag{
  width:.9vw; min-width:10px; height:4.6vh; border-radius:6px;
  background:linear-gradient(180deg,var(--oro),#e2892e);
  box-shadow:0 0 18px rgba(246,196,69,.45);
}
.brand h1{
  font-family:var(--display);
  font-size:4.6vh; letter-spacing:.14em; font-weight:400; line-height:1;
}
.fecha{
  color:var(--apagado); font-size:2.1vh; font-weight:500;
  letter-spacing:.02em; text-transform:capitalize;
}

/* --------------------------- banda del crono --------------------------- */

.cronoband{
  display:flex; align-items:center; justify-content:space-between;
  gap:2vw;
  background:linear-gradient(90deg, rgba(246,196,69,.14), rgba(246,196,69,.03) 55%);
  border:1px solid rgba(246,196,69,.35);
  border-radius:var(--radio);
  padding:1vh 2.2vw;
  margin-bottom:1.8vh;
}
.crono-etiqueta{
  font-family:var(--display); font-size:3.4vh; letter-spacing:.12em;
  color:var(--oro); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:30vw;
}
.crono-tiempo{
  font-family:var(--display); font-size:9.5vh; line-height:.95;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(246,196,69,.35);
}
.crono-estado{
  font-size:2vh; font-weight:800; letter-spacing:.22em;
  color:var(--oro); white-space:nowrap;
}
.cronoband.pausado{ border-color:rgba(147,160,200,.4); background:rgba(147,160,200,.08); }
.cronoband.pausado .crono-etiqueta,
.cronoband.pausado .crono-estado{ color:var(--apagado); }
.cronoband.pausado .crono-tiempo{ text-shadow:none; color:var(--apagado); }
.cronoband.terminado{
  border-color:#ff5d6c; background:rgba(255,93,108,.14);
  animation:parpadeo 1s steps(2,end) infinite;
}
.cronoband.terminado .crono-etiqueta,
.cronoband.terminado .crono-estado,
.cronoband.terminado .crono-tiempo{ color:#ff8b96; text-shadow:0 0 30px rgba(255,93,108,.5); }
@keyframes parpadeo{ 50%{ opacity:.55; } }

/* ------------------------------ rejilla ------------------------------ */

.rejilla{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto minmax(0,1fr);
  gap:1.8vh 1.2vw;
}
.podio{ grid-column:1 / -1; display:flex; gap:1.2vw; }

.panel{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:2vh 1.6vw;
  min-height:0;
  display:flex; flex-direction:column;
}
.panel h2{
  font-size:1.8vh; font-weight:800; letter-spacing:.26em;
  text-transform:uppercase; color:var(--apagado);
  padding-bottom:1.4vh;
}

/* ------------------------------ podio ------------------------------ */

.tarjeta{
  flex:1; min-width:0;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:2vh 1.4vw 2.2vh;
  display:flex; flex-direction:column; align-items:center; gap:1.1vh;
  position:relative;
  transition:transform .4s ease;
}
.tarjeta.lider{
  border-color:rgba(246,196,69,.55);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--oro-suave), rgba(246,196,69,0) 55%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow:0 0 46px rgba(246,196,69,.18);
  animation:aura 3.2s ease-in-out infinite;
}
@keyframes aura{
  0%,100%{ box-shadow:0 0 34px rgba(246,196,69,.14); }
  50%    { box-shadow:0 0 60px rgba(246,196,69,.30); }
}
.puesto{
  position:absolute; top:1.4vh; left:1vw;
  font-family:var(--display); font-size:3.2vh; line-height:1;
  color:var(--apagado); letter-spacing:.05em;
}
.tarjeta.lider .puesto{ color:var(--oro); }
.chapa-lider{
  position:absolute; top:1.5vh; right:1vw;
  font-size:1.5vh; font-weight:900; letter-spacing:.2em;
  color:var(--oro); background:var(--oro-suave);
  border:1px solid rgba(246,196,69,.4);
  border-radius:999px; padding:.5vh .8vw;
}
.foto{
  width:13.5vh; height:13.5vh; border-radius:50%;
  border:.55vh solid var(--c, #888);
  box-shadow:0 0 0 .7vh var(--c-suave, rgba(255,255,255,.1)),
             0 0 4.5vh var(--c-brillo, rgba(255,255,255,.2));
  overflow:hidden; background:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
}
.foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.foto .inicial{
  font-family:var(--display); font-size:7vh; color:var(--c,#fff); line-height:1;
}
.nombre{
  font-size:3.1vh; font-weight:800; letter-spacing:.01em;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.total{ display:flex; align-items:baseline; gap:.5vw; }
.total .num{
  font-family:var(--display); font-size:8.6vh; line-height:.9;
  color:var(--c,#fff); font-variant-numeric:tabular-nums;
}
.total .uds{ font-size:2vh; font-weight:700; color:var(--apagado); letter-spacing:.14em; }
.num.salto{ animation:salto .6s ease; }
@keyframes salto{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.22); filter:brightness(1.35); }
  100%{ transform:scale(1); }
}

/* ------------------------------ retos ------------------------------ */

.lista-retos{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:1.7vh; }
.reto{ }
.reto-cab{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom:.8vh; }
.reto-nombre{
  font-size:2.5vh; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:1vw;
}
.reto-valor{ font-size:1.8vh; font-weight:700; color:var(--apagado); white-space:nowrap; }
.fila-barra{ display:flex; align-items:center; gap:.8vw; padding:.35vh 0; }
.chip{
  width:2.6vh; height:2.6vh; min-width:2.6vh; border-radius:50%;
  overflow:hidden; border:2px solid var(--c,#888);
  background:var(--ink-2); display:flex; align-items:center; justify-content:center;
}
.chip img{ width:100%; height:100%; object-fit:cover; display:block; }
.chip span{ font-size:1.4vh; font-weight:900; color:var(--c,#fff); }
.pista{
  flex:1; height:2vh; border-radius:999px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.relleno{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--c-suave2, #666), var(--c,#999));
  box-shadow:0 0 12px var(--c-brillo, rgba(255,255,255,.25));
  transition:width .8s cubic-bezier(.2,.8,.2,1);
  min-width:0;
}
.pct{
  width:3.4vw; min-width:52px; text-align:right;
  font-size:2vh; font-weight:800; color:var(--texto);
  font-variant-numeric:tabular-nums;
}
.pct.cien{ color:var(--oro); }
.sin-retos{ color:var(--apagado); font-size:2.2vh; padding-top:1vh; }

/* ------------------------------ gráfica ------------------------------ */

.grafica-caja{ flex:1; min-height:0; position:relative; }
.grafica-caja canvas{ position:absolute; inset:0; }

/* ------------------------------ estado vacío ------------------------------ */

.vacio{
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2vh; text-align:center;
  background:var(--ink); padding:0 8vw;
}
.vacio .grande{
  font-family:var(--display); font-size:9vh; letter-spacing:.1em; line-height:1;
}
.vacio .peq{ color:var(--apagado); font-size:2.6vh; max-width:60ch; line-height:1.5; }
.vacio .peq b{ color:var(--oro); font-weight:700; }

/* --------------------- celebración / explosión --------------------- */

.fx{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:60;
}
.celebra{
  position:fixed; inset:0; z-index:59;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; padding:0 6vw;
  font-family:var(--display); font-size:15vh; letter-spacing:.08em;
  color:#fff; text-align:center; line-height:1;
  text-shadow:0 0 40px rgba(246,196,69,.85), 0 0 90px rgba(255,93,108,.6);
}
.celebra.activa{ animation:celebraIn 3.2s ease forwards; }
@keyframes celebraIn{
  0%{   opacity:0; transform:scale(.6); }
  10%{  opacity:1; transform:scale(1.12); }
  20%{  transform:scale(1); }
  70%{  opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.03); }
}

.oculto{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Pantallas verticales o estrechas (por si se abre en un móvil) */
@media (max-aspect-ratio: 4/3){
  body.tv{ overflow:auto; }
  .rejilla{ display:flex; flex-direction:column; }
  .podio{ flex-direction:column; }
  .panel{ min-height:40vh; }
  .crono-tiempo{ font-size:6.5vh; }
}