/* ============================================================
   hud.css — Marcadores superiores e inferiores
   ============================================================ */

/* ——— Superior ——— */

#hud-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 24px;
  pointer-events: none;
}

#logo h1 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(0, 0, 0, 0.6);
}

#streak-container {
  text-align: right;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: #fff;
  text-shadow: var(--shadow-pixel);
}

#streak-bar-bg {
  width: 104px;
  height: 10px;
  margin-top: 7px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #000;
}

#streak-bar {
  width: 0%;
  height: 100%;
  background: var(--success);
  transition: width 0.3s ease, background 0.3s ease;
}

/* ——— Inferior ——— */

#hud-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-end;
  gap: 16px;
  padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Velo oscuro: el HUD queda sobre los bloques y sin él no se leería */
#hud-bottom::before {
  content: '';
  position: absolute;
  inset: -40px 0 0 0;
  z-index: -1;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.45) 45%,
      rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.hud-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.icon-row {
  display: flex;
  gap: 8px;
}

.hud-center {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px, 6vw, 90px);
  padding-bottom: 4px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 70px;
}

.stat-box .label {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  text-shadow: var(--shadow-pixel);
  white-space: nowrap;
}

.stat-box .label em {
  font-style: normal;
  color: var(--gold);
}

/* Los valores numéricos se dibujan con la fuente bitmap AlumniBitmap
   (ver js/bitmapFont.js). El <canvas> se escala visualmente con CSS y se
   redibuja a la resolución real (con devicePixelRatio) desde JS. */
.value-canvas {
  height: 22px;
  width: auto;
  max-width: 160px;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.85));
}

/* La ganancia destaca en dorado cuando hay premio */
#win-display {
  color: var(--gold);
}

.hud-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.aux-row,
.spin-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ——— Adaptación a pantallas estrechas ——— */

@media (max-width: 720px) {
  #hud-top {
    padding: 12px 14px;
  }

  #logo h1 {
    font-size: 13px;
  }

  #streak-container {
    font-size: 8px;
  }

  #streak-bar-bg {
    width: 78px;
    height: 8px;
  }

  #hud-bottom {
    grid-template-columns: auto 1fr auto;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }

  .hud-center {
    gap: 14px;
  }

  .stat-box {
    min-width: 0;
  }

  .stat-box .label {
    font-size: 7px;
  }

  .value-canvas {
    height: 17px;
    max-width: 110px;
  }
}

@media (max-width: 460px) {

  /* En móvil los marcadores pasan a una fila propia bajo los controles */
  #hud-bottom {
    grid-template-columns: auto auto;
    grid-template-areas:
      "stats stats"
      "left  right";
    justify-content: space-between;
  }

  .hud-center {
    grid-area: stats;
    justify-content: space-between;
    width: 100%;
  }

  .hud-left {
    grid-area: left;
    flex-direction: row;
    align-items: center;
  }

  .hud-right {
    grid-area: right;
  }
}