/* =========================================================
   HUD y menú
   1UP, pantalla actual, récord, créditos, barra de avance
   y selector de pantalla (menú móvil).
   ========================================================= */

.hud {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(12px, 2.4vw, 32px);
  height: var(--hud-h);
  padding: 0 var(--gutter);
  background: var(--ink); /* opaco: el contenido pasa por detrás sin transparentarse */
  border-bottom: 3px solid var(--ink);
  font: 700 var(--px-2xs)/1 var(--f-pixel);
  text-shadow: 2px 2px 0 var(--ink);
}
.hud p { margin: 0; }
.hud__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.hud__coin { width: 20px; height: 20px; }
.hud__label { color: var(--red-bright); }
.hud__brand .hud__label { color: var(--gold); }
.hud__value { color: var(--text); font-variant-numeric: tabular-nums; }
.hud__stage {
  display: flex;
  gap: 10px;
  justify-content: center;
  white-space: nowrap;
}
.hud__brand, .hud__hi, .nav__list a { white-space: nowrap; }
.hud__value--stage { color: var(--gold); }
.hud__hi { display: flex; gap: 10px; }

/* Barra de energía: el avance por las pantallas */
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 6px;
  background: rgb(255 255 255 / .08);
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--orange) 60%, var(--red));
  transform: scaleX(0);
  transform-origin: 0 50%;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 16px);
  mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 16px);
}

/* Navegación */
.nav { position: relative; }
.nav__list {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--dur-hover) ease;
}
.nav__cursor {
  width: 7px;
  height: 7px;
  color: var(--gold);
  opacity: 0;
}
.nav__list a.is-active { color: var(--gold); }
.nav__list a.is-active .nav__cursor { opacity: 1; animation: blink 1s steps(1) infinite; }
@media (hover: hover) and (pointer: fine) {
  .nav__list a:hover { color: var(--text); }
  .nav__list a:hover .nav__cursor { opacity: 1; }
}
.nav__toggle { display: none; }

@keyframes blink { 50% { opacity: 0; } }


@media (max-width: 1360px) {
  .hud__hi { display: none; }
  .hud { grid-template-columns: auto 1fr auto; }
}

@media (max-width: 900px) {
  .js .nav__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border: 3px solid var(--cream);
    background: var(--navy);
    color: var(--text);
    font: 700 var(--px-2xs)/1 var(--f-pixel);
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ink);
  }
  .js .nav__toggle:active { transform: translateY(2px); box-shadow: none; }
  .nav__bars,
  .nav__bars::before,
  .nav__bars::after {
    display: block;
    width: 14px;
    height: 3px;
    background: currentColor;
  }
  .nav__bars { position: relative; }
  .nav__bars::before,
  .nav__bars::after { content: ""; position: absolute; left: 0; }
  .nav__bars::before { top: -5px; }
  .nav__bars::after { top: 5px; }
  .nav.is-open .nav__bars { background: transparent; }
  .nav.is-open .nav__bars::before { top: 0; transform: rotate(45deg); }
  .nav.is-open .nav__bars::after { top: 0; transform: rotate(-45deg); }

  /* Selector de pantalla a toda anchura */
  .js .nav__list {
    position: fixed;
    top: calc(var(--hud-h) + 6px);
    left: 12px;
    right: 12px;
    flex-direction: column;
    gap: 0;
    padding: 12px;
    border: 3px solid var(--cream);
    outline: 3px solid var(--ink);
    background: linear-gradient(180deg, var(--blue), var(--navy));
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 200ms steps(6), visibility 0s linear 200ms;
  }
  .js .nav.is-open .nav__list {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 260ms steps(8), visibility 0s;
  }
  .js .nav__list a {
    padding: 16px 8px;
    color: var(--text);
    font-size: 1.05rem;
  }
  .js .nav__list a.is-active { color: var(--gold); }
  .js .nav__cursor { width: 10px; height: 10px; }

  html:not(.js) .nav__list { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  :root { --hud-h: 56px; }
  .hud { gap: 10px; font-size: var(--px-2xs); }
  .hud__stage { flex-direction: column; gap: 6px; align-items: center; min-width: 0; }
  .hud__stage span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .hud__brand .hud__label { display: none; }
  .nav__toggle-text { display: none; }
}

/* Puntos que saltan desde lo que el jugador toca */
.score-pop {
  position: fixed;
  z-index: 150;
  color: var(--gold);
  font: 700 var(--px-xs)/1 var(--f-pixel);
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink);
  pointer-events: none;
  translate: -50% -100%;
  animation: score-pop 900ms steps(9) forwards;
}
@keyframes score-pop {
  0% { transform: translateY(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-36px); opacity: 0; }
}
.hud__value.is-bump { color: var(--gold); }