/* ═══════════════════════════════════════════════════════════════════════════
   Veat · Ruta Nocturna — la piel del juego
   ═══════════════════════════════════════════════════════════════════════════

   Fichero aparte de `styles.css` a propósito: son 400 líneas que solo se usan
   dentro del juego, y mezcladas con el resto obligarían a leerlas cada vez que
   alguien busca por qué una tarjeta tiene ese margen.

   Usa las fichas de color de la app (`--n800`, `--tx`, `--burdeos-alto`…), así
   que si se repinta la app, el juego va detrás sin tocar nada aquí.

   Lo único que NO hereda es el lienzo: ahí manda `image-rendering: pixelated`,
   que es lo que convierte un lienzo de 200 px de ancho en píxeles gordos y
   limpios en vez de en una mancha interpolada.
   ═══════════════════════════════════════════════════════════════════════════ */

.jg {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: var(--n900);
  overflow: hidden;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .28s var(--suave), transform .28s var(--sal);
}
.jg--on { opacity: 1; transform: none; }
.jg[hidden] { display: none; }

/* El lienzo ocupa todo y no se suaviza. `touch-action: none` es obligatorio:
   sin él, en móvil el primer toque hace scroll o dispara el zoom por doble
   toque, y el salto llega tarde o no llega. */
.jg__lienzo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Cuando se juega, la app de debajo no debe poder moverse. */
html.jugando, html.jugando body { overflow: hidden; overscroll-behavior: none; }

/* ─────────────────────────── La capa de encima ─────────────────────────── */

.jg__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1rem 1.5rem;
  /* El velo deja ver la calle de detrás: recuerda que hay un juego ahí abajo
     y no una pantalla de formulario cualquiera. */
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(21,10,15,.55), rgba(21,10,15,.93) 62%),
    rgba(21,10,15,.5);
  backdrop-filter: blur(3px) saturate(.9);
  -webkit-backdrop-filter: blur(3px) saturate(.9);
}
.jg__capa[hidden] { display: none; }

.jg-x {
  position: absolute; top: .75rem; right: .75rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 0; border-radius: var(--r-pil); cursor: pointer;
  background: var(--vidrio-alto); color: var(--tx2);
}
.jg-x:active { transform: scale(.92); }

.jg-marca { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; }
.jg-marca__g { width: 2.125rem; height: 2.125rem; flex: none; }
.jg-marca__t { font-size: .9375rem; font-weight: 650; letter-spacing: -.01em; color: var(--tx); }
.jg-marca__s { font-size: .75rem; color: var(--tx3); margin-top: .0625rem; }

/* ───────────────────────────── Los paneles ───────────────────────────── */

.jg-panel {
  margin: auto 0;
  background: linear-gradient(180deg, var(--n700), var(--n800));
  border: 1px solid var(--pelo);
  border-radius: var(--r-out);
  box-shadow: var(--brillo), 0 24px 48px -20px rgba(0,0,0,.7);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.jg-panel--menu, .jg-panel--fin { gap: 1rem; }
.jg-panel--texto, .jg-panel--tabla { margin: 0 0 auto; }

.jg-tit { font-size: 1.125rem; font-weight: 680; letter-spacing: -.02em; color: var(--tx); }
.jg-sub { font-size: .875rem; font-weight: 640; color: var(--tx); margin-top: .375rem; }
.jg-txt { font-size: .8125rem; line-height: 1.55; color: var(--tx2); }
.jg-txt--c { text-align: center; }
.jg-txt b { color: var(--tx); font-weight: 620; }
.jg-nota {
  font-size: .6875rem; line-height: 1.5; color: var(--tx4);
  border-top: 1px solid var(--pelo); padding-top: .75rem;
}
.jg-saludo {
  font-size: .8125rem; color: var(--ambar); text-align: center;
  background: rgba(230,199,156,.07); border: 1px solid rgba(230,199,156,.18);
  border-radius: var(--r-in); padding: .5rem .75rem;
}
.jg-error {
  font-size: .75rem; color: var(--rojo);
  background: rgba(255,143,138,.08); border: 1px solid rgba(255,143,138,.22);
  border-radius: .75rem; padding: .5rem .75rem;
}

/* ────────────────────────────── Formulario ────────────────────────────── */

.jg-campo { display: flex; flex-direction: column; gap: .3125rem; }
.jg-campo > span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
.jg-campo input {
  width: 100%; font: inherit; font-size: .9375rem; color: var(--tx);
  background: var(--n850); border: 1px solid var(--pelo);
  border-radius: .875rem; padding: .6875rem .8125rem;
  transition: border-color .18s var(--suave), background .18s var(--suave);
}
.jg-campo input::placeholder { color: var(--tx4); }
.jg-campo input:focus {
  outline: none; border-color: var(--burdeos-vivo); background: var(--n800);
}
/* El PIN, en cifras grandes y separadas: es lo que dice «cuatro y no más». */
.jg-campo input[name=pin] {
  letter-spacing: .5em; font-size: 1.25rem; text-align: center; padding-left: .5em;
}

.jg-enlace {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .75rem; color: var(--tx3);
  text-decoration: underline; text-underline-offset: 3px;
  padding: .25rem; align-self: center;
}
.jg-enlace:active { color: var(--tx); }

/* ───────────────────────────── Cifras del menú ───────────────────────────── */

.jg-cifras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  text-align: center;
}
.jg-cifras > div {
  background: var(--vidrio); border: 1px solid var(--pelo);
  border-radius: var(--r-in); padding: .6875rem .375rem;
}
.jg-cifras b {
  display: block; font-size: 1.375rem; font-weight: 700; color: var(--tx);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.jg-cifras b i { font-style: normal; font-size: .875rem; color: var(--tx4); }
.jg-cifras span { display: block; font-size: .625rem; line-height: 1.3; color: var(--tx4); margin-top: .1875rem; }

.jg-barra {
  height: .375rem; border-radius: var(--r-pil);
  background: var(--n850); overflow: hidden; border: 1px solid var(--pelo);
}
.jg-barra i {
  display: block; height: 100%; border-radius: var(--r-pil);
  background: linear-gradient(90deg, var(--ambar), var(--burdeos-vivo));
  transition: width .6s var(--sal);
}

.jg-agotado {
  background: rgba(255,255,255,.035); border: 1px solid var(--pelo);
  border-radius: var(--r-in); padding: .875rem;
  display: flex; flex-direction: column; gap: .375rem;
}
.jg-agotado p { font-size: .8125rem; line-height: 1.5; color: var(--tx2); }
.jg-agotado b { color: var(--tx); }
.jg-agotado .jg-nota { border: 0; padding: 0; margin-top: .25rem; }

.jg-acciones { display: flex; gap: .5rem; }
.jg-acciones .btn { flex: 1; }

/* ────────────────────────────── Fin de ruta ────────────────────────────── */

.jg-fin-et {
  text-align: center; font-size: .6875rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--tx4);
}
.jg-fin-n {
  text-align: center; font-size: 3rem; font-weight: 750; letter-spacing: -.045em;
  line-height: 1; color: var(--tx); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--tx), var(--ambar));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jg-fin-d { text-align: center; font-size: .75rem; color: var(--tx3); }

.jg-premio {
  display: flex; align-items: center; gap: .75rem;
  background: var(--vidrio); border: 1px solid var(--pelo);
  border-radius: var(--r-in); padding: .75rem .875rem;
}
.jg-premio b {
  font-size: 1.75rem; font-weight: 720; letter-spacing: -.03em; color: var(--tx4);
  font-variant-numeric: tabular-nums;
}
.jg-premio span { font-size: .75rem; line-height: 1.4; color: var(--tx3); }
.jg-premio--si {
  background: linear-gradient(135deg, rgba(230,199,156,.14), rgba(201,69,95,.1));
  border-color: rgba(230,199,156,.3);
}
.jg-premio--si b { color: var(--ambar); }
.jg-premio--si span { color: var(--tx2); }

.jg-record {
  text-align: center; font-size: .8125rem; font-weight: 620; color: var(--ambar);
}
.jg-cifras--fin b { font-size: 1.125rem; }

/* ───────────────────────── El hueco de publicidad ─────────────────────────
   El vacío se dibuja con trama diagonal y borde discontinuo: tiene que
   parecer un hueco reservado, no una tarjeta rota. */

.jg-hueco { border-radius: var(--r-in); padding: .875rem; }
.jg-hueco__et {
  font-size: .5625rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tx4); margin-bottom: .3125rem;
}
.jg-hueco__t { font-size: .875rem; font-weight: 640; color: var(--tx); }
.jg-hueco__d { font-size: .6875rem; line-height: 1.5; color: var(--tx3); margin-top: .25rem; }

.jg-hueco--vacio {
  border: 1px dashed var(--pelo-alto);
  background-image: repeating-linear-gradient(
    -45deg, rgba(255,255,255,.028) 0 6px, transparent 6px 12px);
}
.jg-hueco--promo {
  border: 1px solid rgba(230,199,156,.24);
  background: linear-gradient(135deg, rgba(140,32,68,.28), rgba(230,199,156,.06));
  display: flex; flex-direction: column; gap: .5rem;
}
.jg-hueco--promo .btn { margin-top: .125rem; }

/* ───────────────────────────── Clasificación ───────────────────────────── */

.jg-pestanas {
  display: flex; gap: .25rem; padding: .25rem;
  background: var(--n850); border: 1px solid var(--pelo); border-radius: var(--r-pil);
}
.jg-pest {
  flex: 1; border: 0; cursor: pointer; font: inherit; font-size: .75rem;
  padding: .4375rem .25rem; border-radius: var(--r-pil);
  background: transparent; color: var(--tx3); transition: background .2s, color .2s;
}
.jg-pest--on { background: var(--burdeos); color: #fff; font-weight: 620; }

.jg-tabla { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.jg-fila {
  display: grid; grid-template-columns: 1.75rem 1fr auto; align-items: center;
  gap: .5rem; padding: .5rem .625rem;
  background: var(--vidrio); border: 1px solid transparent;
  border-radius: .75rem;
}
.jg-fila:nth-child(1) { background: linear-gradient(90deg, rgba(230,199,156,.16), var(--vidrio)); }
.jg-fila:nth-child(2) { background: linear-gradient(90deg, rgba(230,199,156,.09), var(--vidrio)); }
.jg-fila:nth-child(3) { background: linear-gradient(90deg, rgba(230,199,156,.05), var(--vidrio)); }
.jg-fila--yo { border-color: var(--burdeos-vivo); }
.jg-fila__p { font-size: .75rem; color: var(--tx4); font-variant-numeric: tabular-nums; }
.jg-fila__a {
  font-size: .8125rem; color: var(--tx); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jg-fila__v { font-size: .875rem; color: var(--ambar); font-variant-numeric: tabular-nums; font-weight: 640; }

.jg-vacia {
  text-align: center; padding: 1.5rem .75rem;
  border: 1px dashed var(--pelo-alto); border-radius: var(--r-in);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.jg-vacia__g { width: 2.5rem; height: 2.5rem; opacity: .5; }
.jg-vacia p { font-size: .8125rem; line-height: 1.5; color: var(--tx3); }
.jg-vacia b { color: var(--tx2); }

/* ───────────────────────────── Reglas ───────────────────────────── */

.jg-escala, .jg-puntos { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.jg-escala li, .jg-puntos li {
  display: flex; align-items: baseline; gap: .4375rem;
  font-size: .75rem; color: var(--tx3);
  background: var(--vidrio); border-radius: .625rem; padding: .4375rem .625rem;
}
.jg-escala b, .jg-puntos b { color: var(--tx); font-variant-numeric: tabular-nums; }
.jg-escala span { color: var(--ambar); margin-left: auto; }

/* ───────────────────────────── Accesibilidad ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .jg, .jg-barra i { transition: none; }
}

/* El acceso desde «Más»: una tarjeta, no un botón de lista, porque es lo único
   de esa pantalla que lleva a otro sitio entero. */
.jg-acceso {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid rgba(230,199,156,.22); border-radius: var(--r-out);
  background: linear-gradient(135deg, rgba(140,32,68,.42), rgba(33,16,24,.9) 70%);
  padding: 1rem 1.125rem; overflow: hidden;
  display: flex; align-items: center; gap: .875rem;
}
.jg-acceso:active { transform: scale(.985); }
.jg-acceso__ic {
  width: 2.75rem; height: 2.75rem; flex: none; border-radius: .875rem;
  background: rgba(0,0,0,.3); border: 1px solid var(--pelo);
  display: grid; place-items: center;
}
.jg-acceso__ic svg { width: 1.75rem; height: 1.75rem; }
.jg-acceso__t { font-size: .9375rem; font-weight: 650; color: var(--tx); letter-spacing: -.01em; }
.jg-acceso__d { font-size: .75rem; line-height: 1.45; color: var(--tx3); margin-top: .125rem; }
.jg-acceso__ch { margin-left: auto; color: var(--tx4); flex: none; }