:root{
  --lime:#baff00;
  --lime-soft:#d6ff55;
  --white:#fff;
  --muted:#cfd5c7;
  --dark:#020400;
  --active-bg:rgba(186,255,0,.075);
  --active-border:rgba(186,255,0,.95);
  --shadow:0 0 8px rgba(186,255,0,.7),0 0 22px rgba(186,255,0,.28);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--white);
}

body{
  display:grid;
  place-items:center;
}

.screen{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  isolation:isolate;

  background:
    #000
    url("assets/fondo2.png")
    center center / 100% 100%
    no-repeat;
}


/* =========================================================
   RANKING
   ========================================================= */

.ranking{
  position:absolute;
  left:3.55%;
  top:24.58%;
  width:31.0%;
  height:58.0%;
  pointer-events:none;
}

.rank-row{
  position:absolute;
  left:0;
  width:100%;
  height:18.4%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding-left:24.5%;
  padding-right:4.7%;

  /* Todas las medidas visuales se atan al lienzo 16:9, no al viewport.
     Esto evita que una TV 4K, una pantalla ultrapanorámica o un móvil
     deformen las fuentes respecto al fondo. */
  border-radius:min(1.2vw,2.133vh);

  transition:
    transform .55s cubic-bezier(.2,.85,.25,1),
    opacity .35s ease;
}

.rank-row[data-slot="0"]{
  top:0;
}

.rank-row[data-slot="1"]{
  top:20.43%;
}

.rank-row[data-slot="2"]{
  top:41.31%;
}

.rank-row[data-slot="3"]{
  top:61.29%;
}

.rank-row[data-slot="4"]{
  top:80.62%;
}

.rank-copy{
  min-width:0;

  display:flex;
  flex-direction:column;
  justify-content:center;

  gap:min(.45vh,.253vw);
}

.rank-name{
  display:block;

  max-width:min(19vw,33.778vh);

  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;

  font-size:min(1.45vw,2.578vh);
  font-weight:900;
  line-height:1;
  letter-spacing:-.025em;

  color:#fff;

  text-shadow:
    0 2px 5px rgba(0,0,0,.95);
}

.rank-date{
  display:block;

  max-width:min(19vw,33.778vh);

  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;

  color:rgba(255,255,255,.82);

  font-size:min(.78vw,1.387vh);
  font-weight:800;
  line-height:1;
  letter-spacing:.075em;

  text-shadow:
    0 2px 5px rgba(0,0,0,.95);
}

.rank-score{
  flex:0 0 auto;

  margin-left:min(1.2vw,2.133vh);

  min-width:min(4.7vw,8.356vh);

  text-align:right;

  font-size:min(2.15vw,3.822vh);
  font-weight:950;
  line-height:1;
  letter-spacing:-.04em;

  color:var(--lime);

  text-shadow:var(--shadow);
}


/* =========================================================
   EVENTO ACTUAL
   Solo se diferencia mediante el texto "EVENTO ACTUAL".
   Sin fondo, sin borde, sin halo y sin recuadro añadido.
   ========================================================= */

.current-tag{
  display:none;

  color:var(--lime);

  font-size:min(.64vw,1.138vh);
  font-weight:900;
  line-height:1;
  letter-spacing:.09em;

  text-transform:uppercase;
}

.rank-row.is-current{
  background:transparent;
  border:0;
  outline:0;
  box-shadow:none;
}

.rank-row.is-current::before{
  display:none;
  content:none;
}

.rank-row.is-current .current-tag{
  display:block;
}

/* El bloque completo se centra, incluida la etiqueta EVENTO ACTUAL. */
.rank-row.is-current .rank-copy,
.rank-row.is-current .rank-score{
  transform:none;
}


/* =========================================================
   CENTRO
   ========================================================= */

.center-data{
  position:absolute;

  left:37.5%;
  top:10.5%;

  width:28.3%;
  height:76.3%;

  pointer-events:none;
}

.needed{
  position:absolute;

  left:0;
  top:14.5%;

  width:100%;
  height:17%;

  display:grid;
  place-items:center;

  color:var(--lime);

  font-weight:950;
  font-size:min(6.65vw,11.822vh);
  line-height:.82;
  letter-spacing:-.065em;

  text-shadow:
    0 0 10px rgba(186,255,0,.72),
    0 0 28px rgba(186,255,0,.28);

  animation:
    goalPulse 3.8s ease-in-out infinite;
}

.current-followers-wrap{
  position:absolute;

  left:0;
  top:49.0%;

  width:100%;
  height:28%;

  display:grid;
  place-items:center;
}

.current-followers{
  color:#fff;

  font-weight:950;
  font-size:min(11.7vw,20.8vh);
  line-height:.78;
  letter-spacing:-.075em;

  text-shadow:
    0 0 5px rgba(255,255,255,.4),
    0 0 18px rgba(186,255,0,.46),
    0 0 38px rgba(186,255,0,.19);

  transform-origin:center;

  animation:
    counterBreath 4.6s ease-in-out infinite;
}

.progress-wrap{
  position:absolute;

  left:4.2%;
  top:77%;

  width:94%;
  height:16.5%;

  display:flex;
  align-items:center;
  justify-content:center;
}

.progress-track{
  position:absolute;

  inset:0;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(0,0,0,.44);

  box-shadow:
    inset 0 0 14px rgba(0,0,0,.9),
    inset 0 0 0 1px rgba(186,255,0,.08);
}

.progress-fill{
  position:absolute;

  left:1.2%;
  top:18%;
  bottom:18%;

  width:0%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #8cd900 0%,
      #baff00 48%,
      #ddff63 100%
    );

  box-shadow:
    0 0 7px rgba(186,255,0,.92),
    0 0 20px rgba(186,255,0,.48);

  transition:
    width .9s cubic-bezier(.22,.8,.22,1);
}

.progress-sweep{
  position:absolute;

  top:10%;
  bottom:10%;

  width:18%;

  left:-22%;

  transform:
    skewX(-18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.05),
      rgba(220,255,120,.54),
      rgba(255,255,255,.06),
      transparent
    );

  filter:
    blur(1px);

  animation:
    sweep 3.3s linear infinite;
}

.progress-text{
  position:relative;

  z-index:2;

  font-size:min(1.1vw,1.956vh);
  font-weight:950;
  letter-spacing:.015em;

  color:#fff;

  text-shadow:
    0 2px 7px #000,
    0 0 8px rgba(186,255,0,.44);
}


/* =========================================================
   QR DINÁMICO
   ========================================================= */

.qr-zone{
  position:absolute;

  left:70.9%;
  top:30.1%;

  width:24.3%;

  aspect-ratio:1/1;

  display:grid;
  place-items:center;
}

.event-qr{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;

  background:#fff;

  border-radius:min(1.05vw,1.867vh);

  padding:min(.45vw,.8vh);

  box-shadow:
    0 0 0 2px rgba(186,255,0,.8),
    0 0 14px rgba(186,255,0,.54),
    0 0 35px rgba(186,255,0,.18);
}


/* =========================================================
   ESTADO INTERNO
   ========================================================= */

.connection-state{
  display:none;

  position:absolute;

  right:1.2vw;
  bottom:1.1vh;

  padding:.45em .75em;

  border:
    1px solid rgba(186,255,0,.6);

  border-radius:999px;

  color:var(--lime);

  background:
    rgba(0,0,0,.72);

  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}

body.debug .connection-state{
  display:block;
}


/* =========================================================
   CAMBIOS / ANIMACIONES
   ========================================================= */

.rank-row.flash{
  animation:
    rowFlash 1.25s ease;
}

.number-change{
  animation:
    numberChange .7s cubic-bezier(.16,.84,.28,1);
}

@keyframes counterBreath{
  0%,
  100%{
    transform:scale(1);
    filter:brightness(1);
  }

  50%{
    transform:scale(1.012);
    filter:brightness(1.07);
  }
}

@keyframes goalPulse{
  0%,
  100%{
    filter:brightness(1);
  }

  50%{
    filter:brightness(1.12);
  }
}

@keyframes sweep{
  0%{
    left:-24%;
    opacity:0;
  }

  12%{
    opacity:1;
  }

  72%{
    opacity:.9;
  }

  100%{
    left:110%;
    opacity:0;
  }
}

@keyframes rowFlash{
  0%{
    filter:brightness(1);
  }

  32%{
    filter:brightness(1.5);
  }

  100%{
    filter:brightness(1);
  }
}

@keyframes numberChange{
  0%{
    transform:scale(.94);
    opacity:.4;
  }

  55%{
    transform:scale(1.045);
    opacity:1;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }
}


/* =========================================================
   MANTENER DISEÑO 16:9
   ========================================================= */

@media (max-aspect-ratio:16/9){

  .screen{
    width:100vw;
    height:56.25vw;
  }

}

@media (min-aspect-ratio:16/9){

  .screen{
    width:177.7777778vh;
    height:100vh;
  }

}