/* Top Dog: noche de estadio, cromos con brillo y tipografía condensada. Fuentes OFL incluidas (fuentes/LICENCIA.txt). */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fuentes/BarlowCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/fuentes/Barlow-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/fuentes/Barlow-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
:root {
  --noche: #121826;
  --noche-2: #1b2334;
  --papel: #f6f1e7;
  --amarillo: #ffd23f;
  --rojo: #ff5a4e;
  --verde: #3ddc97;
  --gris: #9aa4b5;
  --linea: rgba(246, 241, 231, 0.14);
  --condensada: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--noche);
  color: var(--papel);
  font-family: Barlow, 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100vh;
  background: radial-gradient(120% 60% at 50% -10%, #2b3a5c 0%, var(--noche) 60%) no-repeat, var(--noche);
}
main {
  max-width: 480px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}
a {
  color: var(--amarillo);
}
h1,
h2 {
  font-family: var(--condensada);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
}
h2 {
  font-size: 34px;
  margin-top: 40px;
}
.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 18px;
}
.marca {
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--noche);
  background: var(--amarillo);
  padding: 4px 12px 2px;
  border-radius: 6px;
}
.titular {
  font-size: clamp(58px, 17vw, 84px);
}
.entradilla {
  font-size: 20px;
  color: #d6dce6;
  margin: 14px 0 0;
  max-width: 22em;
}
.ayuda {
  color: var(--gris);
  margin: 8px 0 14px;
  font-size: 16px;
}
.escaparate {
  position: relative;
  width: 82%;
  margin: 26px auto 22px;
  transform: rotate(-3deg);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.escaparate .carta {
  filter: none;
}
.reflejo {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 48%, transparent 60%);
  background-size: 250% 100%;
  animation: reflejo 4.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
@keyframes reflejo {
  0%,
  35% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}
.boton {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 15px 16px 13px;
  border: 1.5px solid var(--linea);
  border-radius: 14px;
  background: var(--noche-2);
  color: var(--papel);
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.boton:active {
  transform: scale(0.97);
}
.boton.principal {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--noche);
  font-size: 26px;
  padding: 18px 16px 16px;
}
.boton.enlace {
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  text-transform: none;
  text-decoration: underline;
  color: var(--gris);
}
.fila {
  display: flex;
  gap: 10px;
}
.fila .boton {
  font-size: 19px;
}
.tira {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 4px 16px 12px;
  scrollbar-width: none;
}
.tira::-webkit-scrollbar {
  display: none;
}
.tira .carta {
  width: 42%;
  flex: 0 0 42%;
  scroll-snap-align: start;
}
.tira.elegible {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: visible;
  margin: 0;
  padding: 0;
}
.tira.elegible .carta {
  width: 100%;
  cursor: pointer;
}
.carta {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4.8%/3.4%;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
}
.carta.grande {
  width: 90%;
  margin: 8px auto 16px;
}
.aparece {
  animation: aparece 0.5s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes aparece {
  from {
    transform: translateY(24px) rotateY(80deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.banner {
  background: var(--noche-2);
  border: 1.5px solid var(--amarillo);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 22px;
}
.banner strong {
  display: block;
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
  color: var(--amarillo);
}
.banner p {
  margin: 6px 0 4px;
  color: #d6dce6;
}
.vista-foto {
  width: 100%;
  border-radius: 16px;
  margin-top: 8px;
}
.etiqueta {
  display: block;
  margin: 18px 0 4px;
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
}
.campo {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  font: inherit;
  font-size: 20px;
  color: var(--papel);
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  background: var(--noche-2);
}
.campo:focus {
  outline: 2px solid var(--amarillo);
  border-color: transparent;
}
.cargando {
  text-align: center;
  padding-top: 32vh;
}
.cargando-texto {
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  text-align: center;
}
.huella {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 6px solid var(--noche-2);
  border-top-color: var(--amarillo);
  animation: gira 0.8s linear infinite;
}
@keyframes gira {
  to {
    transform: rotate(360deg);
  }
}
.error {
  font-size: 22px;
  text-align: center;
  margin-top: 28vh;
}

.codigo-error {
  text-align: center;
  font-size: 14px;
  opacity: 0.6;
  margin-top: -8px;
}
.marcador {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--gris);
}
.marcador strong {
  font-size: 40px;
  color: var(--papel);
}
.mesa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0;
}
.estado {
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  text-align: center;
  min-height: 2.2em;
  margin: 8px 0;
}
.estado.bien {
  color: var(--verde);
}
.estado.mal {
  color: var(--rojo);
}
.opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.opciones .boton.principal {
  grid-column: 1 / -1;
}
.chip {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 16px 12px;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  background: var(--noche-2);
  color: var(--papel);
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
}
.chip span:last-child {
  color: var(--amarillo);
  font-size: 28px;
}
.chip:disabled {
  opacity: 0.25;
}
.final {
  text-align: center;
  padding-top: 10vh;
}
.final.victoria .titular {
  color: var(--amarillo);
}
.marcador-final {
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 96px;
  margin: 10px 0 0;
  line-height: 1;
}
footer {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  font-size: 14px;
  color: var(--gris);
}
.oculto {
  display: none;
}
.aviso {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--papel);
  color: var(--noche);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  max-width: 90vw;
  z-index: 10;
}
.creditos li {
  margin: 10px 0;
}

/* ---------- Paseo ---------- */
.paseo h2 {
  margin: 22px 0 10px;
}
.titular.pequeno {
  font-size: 44px;
}
.situacion {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  padding: 16px 18px;
  margin: 10px 0;
  border-radius: 16px;
  background: #fffdf7;
  color: var(--noche);
  border: 4px solid #1d1a1c;
}
.situacion.doble {
  box-shadow: 6px 6px 0 var(--amarillo);
}
.situacion strong {
  display: block;
  font-family: var(--condensada);
  font-size: 34px;
  line-height: 1.05;
  text-transform: uppercase;
}
.situacion p {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 18px;
}
.situacion.pequena {
  padding: 10px 14px;
  margin: 6px 0;
  border-width: 3px;
}
.situacion.pequena strong {
  font-size: 24px;
}
.situacion-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1d1a1c;
  color: var(--amarillo);
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 24px;
}
.etiqueta-stat,
.sello {
  padding: 2px 10px;
  border-radius: 999px;
  background: #ece5d6;
  font-weight: 600;
}
.sello {
  background: var(--amarillo);
}
.sello.reves {
  background: #b7c4f0;
}
.situacion .bonus {
  color: #5a5258;
}
.rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.eleccion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--papel);
  cursor: pointer;
}
.eleccion .carta {
  width: 100%;
}
.eleccion .valor {
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 32px;
  color: var(--amarillo);
}
.eleccion .valor em {
  font-style: normal;
  font-size: 22px;
  color: var(--verde);
}
.eleccion.usado {
  opacity: 0.25;
  cursor: default;
}
.lista-situaciones {
  margin-bottom: 8px;
}
.bloque-dia {
  margin: 26px 0 14px;
  padding: 18px;
  border-radius: 18px;
  background: var(--noche-2);
  border: 1.5px solid var(--linea);
}
.bloque-dia strong {
  font-family: var(--condensada);
  font-size: 34px;
  text-transform: uppercase;
  color: var(--amarillo);
}
.bloque-dia p {
  margin: 6px 0 14px;
  color: var(--gris);
}
.niveles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 18px 0;
}
.niveles .chip {
  flex: 1;
  justify-content: center;
}
.chip.activo {
  border-color: var(--amarillo);
  color: var(--amarillo);
}
.casillas {
  font-size: 40px;
  letter-spacing: 6px;
  margin: 10px 0;
}

/* ---------- sobres y álbum ---------- */
.rejilla.album {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.rejilla.album .carta {
  cursor: pointer;
}
.celda-sobre {
  position: relative;
  animation-fill-mode: both;
}
.celda-sobre .sello {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--condensada);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  background: var(--amarillo);
  color: var(--noche);
}
.celda-sobre .sello.repetida {
  background: var(--noche-2);
  color: var(--gris);
  border: 1px solid var(--linea);
}
.carta.retirada {
  aspect-ratio: 750 / 1050;
  display: grid;
  place-items: center;
  background: var(--noche-2);
  border: 1.5px dashed var(--linea);
  color: var(--gris);
  font-size: 14px;
  text-align: center;
  padding: 8px;
  filter: none;
}
.contadores .contador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.contadores .contador span {
  flex: 1 1 100%;
  color: var(--papel);
  font-weight: 600;
}
.casilla {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 17px;
}
.casilla input {
  width: 22px;
  height: 22px;
  accent-color: var(--amarillo);
}
.codigo {
  font-family: ui-monospace, monospace;
  font-size: 15px;
  word-break: break-all;
  padding: 12px;
  border-radius: 12px;
  background: var(--noche-2);
}
.centrada {
  text-align: center;
}
.boton:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------- ediciones y regalos ---------- */
.celda-sobre .sello.brillante {
  background: linear-gradient(90deg, #ff5e7e, #ffe66b, #5ff0a8, #5fc8ff, #a77bff);
}
.celda-sobre .sello.halloween {
  background: #ff7a1a;
}
.bloque-dia .temporada {
  color: #ff9a4d;
  font-weight: 600;
}
.regalo-carta {
  width: 62%;
  margin: 12px auto 16px;
}
.regalo-carta .carta {
  width: 100%;
}