/* ============================================================
   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,.18);
  color:var(--yellow);
  letter-spacing:.14em;
  text-shadow:
     1px  0   0 #100f07,
    -1px  0   0 #100f07,
     0   1px 0 #100f07,
     0  -1px 0 #100f07,
     0   0   2px #100f07,
     0   0  10px rgba(228,230,168,.5);
}
.crt-tl{ top:max(10px, var(--safe-t)); left:max(12px, var(--safe-l)); }

/* 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:1.2;
  letter-spacing:.06em;
  color:var(--yellow);
  margin-bottom:9px;
}
#val-clock{ font-size:34px; }
/* 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; }
}