/* ============================================================
   OGACIAL — IN-GAME HUD
   ============================================================ */

#hud-layer { pointer-events: none; }

/* ---------- Crosshair ---------- */
.crosshair {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
}
.crosshair::before, .crosshair::after {
  content: "";
  position: absolute;
  background: rgba(238, 242, 246, 0.85);
  mix-blend-mode: difference;
}
.crosshair::before { left: 6px; top: 0; width: 2px; height: 14px; }
.crosshair::after  { top: 6px; left: 0; width: 14px; height: 2px; }

/* ---------- Hotbar ---------- */
.hotbar {
  position: absolute; bottom: var(--s5); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: var(--s1);
}
.hotbar-slot {
  width: 52px; height: 52px;
  background: rgba(11, 14, 20, 0.78);
  border: 1px solid var(--line-1);
  position: relative;
  display: grid; place-items: center;
}
.hotbar-slot.active {
  border-color: var(--ice);
  outline: 1px solid var(--ice);
  outline-offset: 1px;
}
.hotbar-slot .key {
  position: absolute; top: 2px; left: 4px;
  font-size: 10px; font-weight: 600; color: var(--text-2);
}
.hotbar-slot .block-swatch {
  width: 26px; height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.hotbar-slot .name {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--text-1); white-space: nowrap;
  opacity: 0; transition: opacity var(--t-fast);
}
.hotbar-slot.active .name { opacity: 1; }

/* ---------- Vitals ---------- */
.vitals {
  position: absolute; bottom: var(--s5); left: var(--s5);
  display: flex; flex-direction: column; gap: var(--s2);
  width: 220px;
}
.vital { display: flex; flex-direction: column; gap: 3px; }
.vital .row { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--text-1); }
.vital .bar { height: 4px; background: rgba(11, 14, 20, 0.8); border: 1px solid var(--line-0); }
.vital .bar i { display: block; height: 100%; background: var(--success); }
.vital.stamina .bar i { background: var(--ice); }

/* ---------- Debug / position readout ---------- */
.debug-readout {
  position: absolute; top: var(--s4); left: var(--s4);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-1);
  background: rgba(11, 14, 20, 0.7);
  border: var(--hairline);
  padding: var(--s2) var(--s3);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  min-width: 190px;
}
.debug-readout b { color: var(--ice); font-weight: 600; }

/* ---------- Time-of-day strip ---------- */
.day-strip {
  position: absolute; top: var(--s4); right: var(--s4);
  display: flex; align-items: center; gap: var(--s3);
  background: rgba(11, 14, 20, 0.7);
  border: var(--hairline);
  padding: var(--s2) var(--s3);
}
.day-strip .clock { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Pause overlay ---------- */
.pause-overlay {
  position: absolute; inset: 0;
  background: rgba(7, 9, 13, 0.86);
  display: flex;
  pointer-events: auto;
}
.pause-overlay .panel-center { width: min(380px, calc(100vw - 48px)); }
.pause-title {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: 0.08em;
  margin-bottom: var(--s5);
}
.pause-overlay .menu-nav { gap: var(--s3); }

/* ---------- Control hints ---------- */
.hint-card {
  position: absolute; bottom: var(--s5); right: var(--s5);
  background: rgba(11, 14, 20, 0.7);
  border: var(--hairline);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: 1.9;
}
.hint-card kbd {
  font-family: var(--font);
  font-weight: 700;
  color: var(--text-1);
  border: 1px solid var(--line-1);
  padding: 0 5px;
  margin-right: var(--s1);
  font-size: 10px;
}