/* =========================================================
   10 · Game over (#game-over)
   Las letras caen una a una, aparece la puntuación final y
   el botón para volver al inicio. Sin JS se ve todo ya colocado.
   ========================================================= */

.stage--over { background: #000; }

/* Fondo: viñeta roja y lluvia de píxeles */
.over__bg {
  left: 0;
  width: 100%;
  background:
    radial-gradient(70% 60% at 50% 45%, rgb(120 10 30 / .45), transparent 70%),
    #000;
}
.over__rain {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 37px, rgb(255 90 95 / .35) 37px 39px, transparent 39px 83px),
    repeating-linear-gradient(90deg, transparent 0 61px, rgb(255 210 63 / .2) 61px 63px, transparent 63px 127px);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 40px);
  mask: repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 40px);
  animation: over-rain 1.8s steps(12) infinite;
}
@keyframes over-rain { to { -webkit-mask-position: 0 40px; mask-position: 0 40px; } }

.over {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(16px, 3vh, 28px);
  text-align: center;
}

.over__title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .5em;
  margin: 0;
  font: 400 clamp(3rem, 11vw, 9rem)/1 var(--f-display);
}
.over__word { display: flex; }
.over__word b {
  display: inline-block;
  font-weight: 400;
  color: var(--red-bright);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 5px 5px 0 #6a0a14, 10px 10px 0 var(--ink);
}

.over__score {
  display: flex;
  gap: clamp(20px, 5vw, 64px);
  margin: 0;
}
.over__score div { display: grid; gap: 8px; }
.over__score dt {
  color: var(--red-bright);
  font: 700 var(--px-xs)/1 var(--f-pixel);
}
.over__score dd {
  margin: 0;
  color: var(--gold);
  font: 700 clamp(1.1rem, 2.4vw, 1.6rem)/1 var(--f-pixel);
  font-variant-numeric: tabular-nums;
}

.over__thanks {
  margin: 0;
  color: var(--cream);
  font: 700 var(--px-xs)/1.4 var(--f-pixel);
  text-transform: uppercase;
  animation: blink 1.2s steps(1) infinite;
}
.over__again svg { width: 12px; height: 12px; }
.over__credits {
  margin: 0;
  color: var(--text-muted);
  font: 600 .95rem/1.6 var(--f-body);
}