/* ==========================================================================
   Sorteo — la pantalla de la gente.

   No hay proyector: ESTE celular es el escenario. De ahí todo lo demás —
   tipografía enorme, fondo oscuro para un salón en penumbra, y una sola cosa
   por pantalla. Se mira de reojo, con el plato adelante y ruido alrededor.
   ========================================================================== */

:root {
  --s-fondo:   #0b1220;
  --s-panel:   #131f33;
  --s-borde:   #24395c;
  --s-texto:   #f1f5f9;
  --s-suave:   #94a3b8;
  --s-marca:   #5b9bd5;
  --s-oro:     #fbbf24;
  --s-ok:      #22c55e;
  --s-error:   #ef4444;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--s-fondo);
  color: var(--s-texto);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.oculto { display: none !important; }

.escenario {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  text-align: center;
}

.paso { width: 100%; max-width: 480px; }

.marca--chica { --marca-alto: 40px; margin: 0 auto 22px; display: block; }

.escenario__titulo { margin: 0 0 18px; font-size: 1.5rem; font-weight: 700; }
.escenario__pie { margin: 26px 0 0; font-size: .88rem; color: var(--s-suave); }

/* ─── Cuántos participan ─────────────────────────────────────────────────── */
/* El número va grande y a la vista antes de tirar: es la única prueba que el
   salón tiene de que el sorteo es entre todos los que están, y en una sala de
   productores de seguros esa pregunta se hace sola. */
.contador { margin: 0 0 24px; }
.contador strong {
  display: block;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--s-marca);
  font-variant-numeric: tabular-nums;
}
.contador span { font-size: .9rem; color: var(--s-suave); }

/* ─── Quién sos ──────────────────────────────────────────────────────────── */
.yo {
  background: var(--s-panel);
  border: 1px solid var(--s-borde);
  border-radius: 16px;
  padding: 18px 16px;
}
.yo__estado { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--s-ok); font-weight: 700; }
.yo__nombre { display: block; margin-top: 4px; font-size: 1.3rem; font-weight: 700; }

.yo__label { display: block; margin-bottom: 12px; font-size: .95rem; color: var(--s-texto); }
.yo__dni {
  width: 100%;
  /* 16px es el piso; acá va mucho más porque se tipea parado y sin anteojos. */
  font-size: 1.5rem;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  letter-spacing: .08em;
  color: var(--s-texto);
  background: var(--s-fondo);
  border: 1.5px solid var(--s-borde);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.yo__dni:focus { outline: none; border-color: var(--s-marca); }
.yo__dni::placeholder { color: #44597a; font-weight: 400; }
.yo__error { margin: 10px 0 0; font-size: .88rem; color: var(--s-error); min-height: 1.1em; }
.yo__error a { color: var(--s-marca); }

.boton {
  width: 100%;
  min-height: 52px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: var(--s-marca);
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.boton:disabled { opacity: .55; }

.lineal {
  margin-top: 10px;
  padding: 6px 2px;
  font-family: inherit;
  font-size: .8rem;
  color: var(--s-suave);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

/* ─── Ganaste y no estabas mirando ───────────────────────────────────────── */
.ganaste-antes {
  display: block;
  background: linear-gradient(150deg, #166534, #22c55e);
  color: #052e16;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 22px;
}
.ganaste-antes__titulo { display: block; font-size: 1.25rem; font-weight: 800; }
.ganaste-antes__detalle { display: block; margin-top: 4px; font-size: .92rem; font-weight: 600; }
.ganaste-antes .lineal { color: #052e16; opacity: .75; }

/* ─── Tirada ─────────────────────────────────────────────────────────────── */
.tirada__rotulo { margin: 0; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--s-suave); }
.tirada__premio { margin: 6px 0 30px; font-size: 1.6rem; font-weight: 700; color: var(--s-oro); }
.tirada__pie { margin: 24px 0 0; font-size: .9rem; color: var(--s-suave); }

/* Letras girando. No son nombres de nadie: mostrar apellidos reales durante la
   cuenta sería repartir la lista de asistentes a 250 teléfonos para decorar. */
.ruleta {
  background: var(--s-panel);
  border: 1px solid var(--s-borde);
  border-radius: 16px;
  padding: 22px 10px;
  overflow: hidden;
}
.ruleta__letras {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--s-marca);
  font-family: "Courier New", ui-monospace, monospace;
  white-space: nowrap;
}

.cuenta {
  margin: 26px 0 0;
  font-size: 4.6rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--s-texto);
}

/* ─── Resultado ──────────────────────────────────────────────────────────── */
.resultado { padding: 10px 0; }
.resultado__rotulo { margin: 0; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--s-suave); }
.resultado__nombre {
  margin: 10px 0 0;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  /* Un apellido largo no puede empujar la pantalla a lo ancho. */
  overflow-wrap: anywhere;
}
.resultado__premio { margin: 14px 0 0; font-size: 1.25rem; font-weight: 700; color: var(--s-oro); }
.resultado__pie { margin: 22px 0 0; font-size: .92rem; color: var(--s-suave); }

/* Ganaste vos. Esto es lo único que un celular hace mejor que un escenario:
   avisarte a vos, sin depender de que escuches tu apellido por un parlante. */
body.gane { background: #14532d; }
body.gane .resultado__rotulo { color: #bbf7d0; }
body.gane .resultado__nombre { color: #fff; font-size: 3rem; }
body.gane .resultado__premio { color: #fde68a; }
body.gane .resultado__pie { color: #d1fae5; font-weight: 600; font-size: 1.05rem; }

/* ─── Entregados ─────────────────────────────────────────────────────────── */
.entregados { margin-top: 30px; text-align: left; }
.entregados__titulo {
  margin: 0 0 10px;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s-suave);
  text-align: center;
}
.entregados__lista { list-style: none; margin: 0; padding: 0; }
.entregados__lista li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: var(--s-panel);
  border: 1px solid var(--s-borde);
  border-radius: 12px;
  margin-bottom: 7px;
  font-size: .88rem;
}
.entregados__lista b { font-weight: 700; }
.entregados__lista span { color: var(--s-suave); flex: 0 0 auto; }

/* ─── Movimiento ─────────────────────────────────────────────────────────── */
@keyframes aparece { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes latido  { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }

.resultado { animation: aparece .5s cubic-bezier(.16, 1, .3, 1); }
.cuenta--final { animation: latido .5s ease infinite; color: var(--s-oro); }

@media (prefers-reduced-motion: reduce) {
  .resultado, .cuenta--final { animation: none; }
}

/* Pantallas chicas (SE, 5S): que la cuenta y el nombre no desborden. */
@media (max-height: 680px) {
  .contador strong { font-size: 2.6rem; }
  .cuenta { font-size: 3.4rem; }
  .resultado__nombre { font-size: 2rem; }
  body.gane .resultado__nombre { font-size: 2.3rem; }
}