/* The stat bar sits above the canvas in normal flow — never over the house. */
.hud {
  display: flex;
  align-items: center;
  /* Trimmed from 16px to buy room for larger labels: the row may not wrap, so a
     bigger type scale has to come out of the gaps and the meter, not out of a
     second line. */
  gap: 12px;
  /* One row: a wrapping bar leaves an awkward empty band under the stats. */
  flex-wrap: nowrap;
  margin-bottom: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(18, 13, 32, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hud__group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.hud__label {
  /* The bar's budget, not a taste choice — see the note in the comment above
     `.hud`. Tracking comes down as the size goes up: 0.09em is what small caps at
     10px needed to stay legible, and at 13px it is only costing width. */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  white-space: nowrap;
}

/*
 * The hearts are deliberately the loudest thing on the bar. They are the stat that ends
 * the run, and at the old 17px they read as small print beside a 150px meter.
 */
.hud__hearts {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 32px;
  line-height: 1;
  color: var(--bad);
  text-shadow: 0 0 14px rgba(255, 107, 107, 0.45);
}

/* A spent heart is an absence, not another red one — hence a pip per heart, not one string. */
.hud__heart--spent {
  color: rgba(255, 107, 107, 0.28);
  text-shadow: none;
}

.hud__hearts--critical {
  animation: hud-heartbeat 0.9s ease-in-out infinite;
}

.hud__meter {
  position: relative;
  /*
   * Narrowed from 150px along with the row's gaps, to pay for the label size — and
   * made shrinkable, which is the part that matters. The row may not wrap and the
   * labels are `nowrap`, so without a shrinkable element an over-long bar clips the
   * text at the end. The two bars give width back instead: the meter is read as a
   * proportion and the toy track as full-or-not, so neither loses meaning at 90px,
   * while a clipped "Sigue peligroso" does.
   */
  flex: 0 1 126px;
  min-width: 90px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.hud__meter-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--good));
  transition: width 180ms ease-out;
}

.hud__meter-value,
.hud__hazards-value {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  min-width: 44px;
}

.hud__hazards-value {
  color: var(--accent);
}

.hud__score-value {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  min-width: 56px;
  color: var(--good);
}

.hud__score-value--bumped {
  animation: hud-score-bump 320ms ease-out;
}

@keyframes hud-score-bump {
  40% { transform: scale(1.3); }
}

.hud__toy-track {
  flex: 0 1 54px;
  min-width: 36px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.hud__toy-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--ink-quiet);
  transform-origin: left center;
  transform: scaleX(1);
}

.hud__toy--ready .hud__toy-fill {
  background: var(--good);
  box-shadow: 0 0 10px rgba(126, 224, 184, 0.7);
}

/*
 * Alert chips. These used to float over the map; folding them into the bar keeps
 * them prominent without covering the house. The row is always present and always
 * the same height, so lighting one never reflows the layout.
 */
/* Only ever one chip at a time, so the slot is reserved and the row never reflows. */
.hud__chips {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  min-height: 30px;
  flex: 0 0 auto;
}

.hud__danger,
.hud__immune {
  position: absolute;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 180ms ease;
}

.hud__danger {
  color: #ffd9d9;
  background: rgba(180, 40, 34, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 110, 0.5);
}

.hud__immune {
  color: #2a2010;
  background: var(--accent);
}

.hud__danger--active,
.hud__immune--active {
  opacity: 1;
}

.hud__danger--active {
  animation: hud-pulse 1.3s ease-in-out infinite;
}

@keyframes hud-pulse {
  50% { box-shadow: inset 0 0 0 2px rgba(255, 140, 130, 0.95); }
}

@keyframes hud-heartbeat {
  50% { transform: scale(1.18); }
}

/* The toast log, below the canvas and also outside the map. */
.log {
  margin-top: 10px;
  min-height: 43px;
}

.log__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.log__item {
  padding: 8px 15px;
  border-radius: 9px;
  font-size: 17.5px;
  font-weight: 500;
  background: rgba(18, 13, 32, 0.85);
  animation: log-in 200ms ease-out;
}

.log__item--good {
  color: var(--good);
  box-shadow: inset 0 0 0 1px rgba(126, 224, 184, 0.35);
}

.log__item--bad {
  color: #ffb0b0;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.4);
}

@keyframes log-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hud__score-value--bumped,
  .hud__danger--active,
  .hud__hearts--critical,
  .log__item {
    animation: none;
  }
}

/*
 * A lesson is one verb and a counter. Everything the bar says about a *house* — how much
 * is still dangerous, the score, the toy's cooldown — is noise on a lit room with three
 * things in it, so it is hidden rather than shown reading zero.
 *
 * Hiding groups only ever relieves the row's width budget (see the note on `.hud` above),
 * so none of this can push the bar past its one hard constraint.
 */
.hud[data-mode="lesson"] [data-hud="hazards"],
.hud[data-mode="lesson"] [data-hud="score"],
.hud[data-mode="lesson"] [data-hud="toy"] {
  display: none;
}

/* No child in the room means the hearts cannot move, and a stat that cannot move is a
   stat the player learns to ignore. La galleta's lesson has him, and keeps them. */
.hud[data-child="no"] [data-hud="hearts"] {
  display: none;
}

/* Nothing in a lesson can hurt him, so neither warning has anything to say. The snapshot
   already reports both as false without a child; this also covers the two lessons he is
   in, where the room is empty of anything dangerous. */
.hud[data-mode="lesson"] .hud__chips {
  display: none;
}

/* "0 de 3" is two words where a percentage was one, and the value box was sized for the
   latter — at the old width it wrapped onto a second line and pushed the bar taller. */
.hud[data-mode="lesson"] .hud__meter-value {
  white-space: nowrap;
}