@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --tinta: #0d0d0d;
  --boton: #1c1c1c;
  --boton-activo: #333333;
  --oro: #d7b35f;
  --rojo: #ff5a70;
  --verde: #3ccb6c;
  --gris: #a8a8a8;
  --blanco: #ffffff;
}

* { box-sizing: border-box; }

html { background: var(--tinta); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--tinta);
  color: var(--blanco);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.35;
  text-align: center;
}

main {
  width: 100%;
  max-width: 560px;
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  outline: none;
}

.pantalla { animation: entra 180ms ease-out; }
@keyframes entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pantalla { animation: none; } }

h1, h2, p { margin: 0; }

/* Marcador */
.marcador {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}
.marcador img { width: 40px; height: 40px; object-fit: contain; display: block; }
.marcador .nombre { color: var(--oro); font-weight: 700; font-size: 0.9375rem; }
.marcador .puntos { font-weight: 700; font-size: 0.9375rem; text-align: right; white-space: nowrap; }

/* Ilustración */
.fondo {
  display: block;
  width: 100%;
  aspect-ratio: 18 / 11;
  max-height: 34dvh;
  object-fit: cover;
  background: var(--tinta);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
@media (min-width: 561px) {
  .fondo {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-composite: intersect;
  }
}

/* Contenido */
.cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 0;
}
.avance { color: var(--gris); font-size: 0.8125rem; }
.dicho { color: var(--oro); font-weight: 700; font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.2; text-wrap: balance; }
.pregunta { font-size: 1.125rem; text-wrap: pretty; }
.resultado { font-weight: 700; font-size: 1.1875rem; }
.resultado.bien { color: var(--verde); }
.resultado.mal { color: var(--rojo); }
.cifra { color: var(--oro); font-weight: 700; font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.15; text-wrap: balance; }
.texto { font-size: 1.0625rem; text-wrap: pretty; }
.fuente { color: var(--gris); font-size: 0.8125rem; }
.remate { color: var(--oro); font-weight: 700; font-size: 1.0625rem; text-wrap: balance; }

/* Botones */
.botones { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: var(--boton);
  color: var(--blanco);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.boton.oro { color: var(--oro); }
.boton:active { background: var(--boton-activo); }
.boton:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
@media (hover: hover) { .boton:hover { background: var(--boton-activo); } }

/* Inicio y resultado final */
.portada {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-height: calc(100dvh - 24px);
  padding: 24px 16px;
}
.portada .logo { width: 150px; height: auto; margin: 0 auto; display: block; }
.portada h1 { color: var(--oro); font-weight: 700; font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1.1; }
.portada .gris { color: var(--gris); }
.portada .legal { color: var(--gris); font-size: 0.8125rem; margin-top: 8px; }
.marca-final { color: var(--oro); font-weight: 700; font-size: clamp(3.5rem, 18vw, 5rem); line-height: 1; }
.rango { font-weight: 700; font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }

.aviso { padding: 24px 16px; }