/* ============================================================
   HUD: ONE CRT PANEL IN THE CORNER
   The panel is glass, not slab: it floats over the map and
   reserves no space, so the whole window is playable.

   The markup is in index.html (HUD section) and the values are written
   by src/ui/hud.js.
   ============================================================ */

/* ---------- The overlay ---------- */

/* Spans the whole frame so the panel can sit in the corner. It is not a
   column: nothing is taken out of the play area for it. */
#hud{
  position:absolute;
  inset:0;
  z-index:5;                 /* its own stacking level, so later elements cannot cover it */
  pointer-events:none;       /* clicks pass through to the game */
  opacity:0;                 /* invisible until a run starts */
  transition:opacity .5s ease;
  font-weight: 900;
}
/* JS adds .on when a run starts. */
#hud.on{ opacity:1; }

.crt{
  position:absolute;
  padding:10px 14px 12px;
  border-radius:10px;
  background:rgba(10,9,5,.6);
  color:var(--yellow);
  letter-spacing:.14em;
}
/* Height of the HUD panel (.crt-c), shared with #flashnote in screens.css
   so the flash cue sits directly below the panel on every tier. Measured
   from panel padding plus tallest cell; overridden per breakpoint in
   base.css. Desktop: 10 px top + ~58 px clock line + 12 px bottom = 82 px. */
:root{ --hud-h:82px; }

.crt-c{
  top:max(10px, var(--safe-t));
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:14px;
  align-items:stretch;
}
.crt-cell.clock{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid rgba(228,230,168,.35);
  padding-right:14px;
}
.crt-cell.stats{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}

/* The scanlines. Behind the content, over the glass. */
.crt::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, rgba(0,0,0,0) 1px 3px);
}
/* ...and the content above them. */
.crt > *{ position:relative; z-index:1; }

/* ---------- Rows ---------- */

/* One readout: a label on the left, its value on the right. A bar sits in
   the middle. The row never wraps: a HUD that wraps is hard to scan. */
.crt-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  line-height:1.8;
  white-space:nowrap;
}
.crt-lbl{
  color:#b6b87e;
  font-size:14px;
  letter-spacing:.2em;
  text-indent:.2em;          /* balances the trailing letter-spacing */
}
.crt-val{
  color:var(--yellow);
  font-size:13px;
  font-variant-numeric:tabular-nums;  /* digits keep the same width, so numbers do not jitter */
  letter-spacing:.02em;
}

/* The second label in a row, set apart from the pair before it. */
.crt-lbl.sep{ margin-left:10px; }

/* ---------- Leaks ---------- */
.crt-leaks{
  display:flex;
  align-items:center;
  gap:4px;
}
.crt-leaks span{
  position:relative;
  width:7px;
  height:7px;
  border-radius:1px;
  box-shadow:0 0 0 1px rgba(16,15,7,.9);
}
/* Open: water, and the loud thing on the row. */
.crt-leaks span.open{
  background:linear-gradient(180deg,#8fc4cc,#3c5a60);
  box-shadow:0 0 0 1px rgba(16,15,7,.9), 0 0 9px rgba(143,196,204,.95);
}
/* Sealed: hollow, so a filled mark can never be mistaken for an open one. */
.crt-leaks span.done{
  background:transparent;
  border:1px solid rgba(228,230,168,.55);
}

/* ---------- Lives ---------- */

/* Spent lives are drawn faded, so the row is a countdown you can read at a
   glance without counting anything. */
.crt-val.lives{ color:var(--danger); letter-spacing:.22em; }
.crt-val.lives span.gone{ opacity:.2; }

/* ---------- Clock ---------- */

/* The biggest number in the HUD, because it is the one thing that can end a
   level on its own. It changes colour but never size: a number that
   resizes would shift everything around it once a second. */
.crt-clock{
  /* line-height:2; */
  letter-spacing:.06em;
  color:var(--yellow);
  /* margin-bottom:9px; */
}
#val-clock{ font-size:52px; }
/* Last 30 seconds: orange. */
#clock.low #val-clock{ color:#e8a05a; }
/* Last 10 seconds: red and blinking once a second. Anything faster would
   be a strobe. */
#clock.critical #val-clock{ color:var(--danger); animation:clockPulse 1s steps(2,end) infinite; }
@keyframes clockPulse{ 0%,60%{ opacity:1; } 61%,100%{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){
  #clock.critical #val-clock{ animation:none; }
}