/* ==========================================================================
   GULLY BAAZI : BHARAT — hud.css
   In-game cockpit overlay: telemetry strip, minimap, mission directive,
   vitals, wanted meter, armory, dialogue, radio, keybind legend.
   ========================================================================== */

.hud {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.hud > * { pointer-events: none; }
.hud .hud--interactive { pointer-events: auto; }

/* Corner anchoring, arcade-cockpit style */
.hud__tl { position: absolute; top: var(--sm); left: var(--sm); display: flex; flex-direction: column; gap: var(--sm); }
.hud__tr { position: absolute; top: var(--sm); right: var(--sm); display: flex; flex-direction: column; gap: var(--sm); align-items: flex-end; }
.hud__bl { position: absolute; bottom: var(--md); left: var(--sm); display: flex; flex-direction: column; gap: var(--sm); }
.hud__br { position: absolute; bottom: var(--md); right: var(--sm); display: flex; flex-direction: column; gap: var(--sm); align-items: flex-end; }
.hud__tc { position: absolute; top: var(--sm); left: 50%; transform: translateX(-50%); width: min(560px, 78vw); }

/* ==========================================================================
   Minimap / radar
   ========================================================================== */

.hud-minimap {
  position: relative;
  width: 168px;
  height: 168px;
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.hud-minimap__canvas { width: 100%; height: 100%; display: block; }

.hud-minimap__sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, rgba(139, 211, 208, 0.35) 0deg, rgba(139, 211, 208, 0) 70deg, rgba(139, 211, 208, 0) 360deg);
  animation: radar-spin 4s linear infinite;
}

@keyframes radar-spin { to { transform: rotate(360deg); } }

.hud-minimap__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--surface-lowest) 88%, transparent);
  font-family: var(--font-data);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ==========================================================================
   Mission directive banner
   ========================================================================== */

.hud-directive {
  padding: var(--sm);
  background: color-mix(in srgb, var(--surface-lowest) 82%, transparent);
  border-left: 4px solid var(--primary);
  border-right: 4px solid var(--primary);
  text-align: center;
}

.hud-directive__label {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tertiary-container);
}

.hud-directive__text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface);
}

.hud-directive__dist { color: var(--secondary); }

/* ==========================================================================
   Objective checklist
   ========================================================================== */

.hud-objectives {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding: var(--sm);
  background: color-mix(in srgb, var(--surface-container) 92%, transparent);
  border-left: 3px solid var(--secondary);
  box-shadow: var(--shadow-2);
  max-width: 300px;
}

.hud-objectives__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sm);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--on-surface-variant);
}

.hud-objectives__item.is-done { color: var(--outline); text-decoration: line-through; }
.hud-objectives__item.is-active { color: var(--primary); }
.hud-objectives__box { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 3px; border: 2px solid var(--outline-variant); }
.hud-objectives__item.is-done .hud-objectives__box { background: var(--secondary); border-color: var(--secondary); }
.hud-objectives__item.is-active .hud-objectives__box { border-color: var(--primary); background: var(--primary); }

/* ==========================================================================
   Vitals
   ========================================================================== */

.hud-vitals {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  width: 236px;
  padding: var(--sm);
  background: color-mix(in srgb, var(--surface-container) 92%, transparent);
  box-shadow: var(--shadow-2);
}

.hud-vitals__row { display: flex; align-items: center; gap: var(--sm); }
.hud-vitals__key {
  width: 34px;
  font-family: var(--font-data);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--outline);
}
.hud-vitals__val { font-family: var(--font-data); font-size: 11px; font-weight: 700; color: var(--on-surface); text-align: right; min-width: 52px; }

/* Wanted heat: 5 chunky voxel stars */
.hud-wanted { display: flex; align-items: center; gap: var(--sm); padding: var(--xs) var(--sm); background: color-mix(in srgb, var(--surface-lowest) 88%, transparent); }
.hud-wanted__stars { display: flex; gap: 3px; }
.hud-wanted__star { width: 16px; height: 16px; fill: var(--surface-highest); }
.hud-wanted__star.is-on { fill: var(--tertiary-container); filter: drop-shadow(0 0 6px rgba(255, 154, 107, 0.7)); }
.hud-wanted.is-hot .hud-wanted__star.is-on { fill: var(--neon-magenta); filter: drop-shadow(0 0 8px rgba(255, 42, 133, 0.8)); animation: blink 0.45s steps(2) infinite; }

/* ==========================================================================
   Armory / ability
   ========================================================================== */

.hud-armory {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding: var(--sm);
  background: color-mix(in srgb, var(--surface-container) 92%, transparent);
  box-shadow: var(--shadow-2);
  min-width: 168px;
}

.hud-armory__slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm);
  padding: var(--xs) var(--sm);
  background: var(--surface-lowest);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.hud-armory__slot.is-active { background: var(--primary); color: var(--on-primary); }
.hud-armory__slot.is-empty { background: var(--error-container); color: var(--error); }

/* weapon strip — bottom centre */
.hud__bc {
  position: absolute;
  bottom: var(--md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hud-weapon {
  display: flex;
  align-items: center;
  gap: var(--sm);
  min-width: 220px;
  padding: 6px var(--sm);
  background: color-mix(in srgb, var(--surface-container) 92%, transparent);
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow-2);
}
.hud-weapon__icon { width: 18px; height: 18px; fill: var(--primary); flex: 0 0 auto; }
.hud-weapon__name {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.hud-weapon__ammo {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.hud-weapon.is-empty { border-left-color: var(--neon-magenta); }
.hud-weapon.is-empty .hud-weapon__ammo { color: var(--neon-magenta); }

.ability {
  display: flex;
  align-items: center;
  gap: var(--sm);
  padding: var(--xs) var(--sm);
  background: var(--surface-lowest);
  border-left: 3px solid var(--retro-cyan);
}

.ability__name { font-family: var(--font-data); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--retro-cyan); text-shadow: var(--glow-cyan); }
.ability__cool { width: 54px; height: 6px; background: var(--surface-highest); }
.ability__cool-fill { height: 100%; background: var(--retro-cyan); width: 100%; }
.ability.is-ready .ability__name { animation: blink 1.4s steps(2) infinite; }

/* ==========================================================================
   Dialogue
   ========================================================================== */

.hud-dialogue {
  display: flex;
  gap: var(--sm);
  width: min(560px, 82vw);
  padding: var(--sm);
  background: color-mix(in srgb, var(--surface-container) 94%, transparent);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-3);
}

.hud-dialogue__portrait {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
  image-rendering: pixelated;
}

.hud-dialogue__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sm); }
.hud-dialogue__name { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
.hud-dialogue__src { font-family: var(--font-data); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--outline); }
.hud-dialogue__text { font-family: var(--font-display); font-size: 13px; line-height: 1.55; color: var(--on-surface); min-height: 40px; }
.hud-dialogue__cursor { display: inline-block; width: 8px; height: 14px; background: var(--retro-cyan); vertical-align: -2px; animation: blink 0.9s steps(2) infinite; }

.hud-dialogue__choices { display: flex; flex-direction: column; gap: var(--xs); margin-top: var(--sm); }

.hud-dialogue__choice {
  display: flex;
  gap: var(--sm);
  padding: 3px 6px;
  background: var(--surface-lowest);
  border-left: 2px solid var(--outline-variant);
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--on-surface-variant);
}

/* ==========================================================================
   Radio + keybind legend (bottom-right / bottom strip)
   ========================================================================== */

.hud-radio {
  display: flex;
  align-items: center;
  gap: var(--sm);
  padding: var(--xs) var(--sm);
  background: color-mix(in srgb, var(--surface-container) 92%, transparent);
  box-shadow: var(--shadow-2);
  max-width: 300px;
}

.hud-radio__icon { width: 20px; height: 20px; fill: var(--secondary); flex: 0 0 auto; }
.hud-radio__text { display: flex; flex-direction: column; min-width: 0; }
.hud-radio__station { font-family: var(--font-data); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--secondary); }
.hud-radio__track { font-family: var(--font-data); font-size: 9px; color: var(--on-surface-variant); }

.hud-hints {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--md);
  flex-wrap: wrap;
  padding: 5px var(--md);
  background: color-mix(in srgb, var(--surface-lowest) 90%, transparent);
  border-top: 2px solid var(--surface-high);
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--outline);
}

.hud-hints kbd {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 5px;
  background: var(--surface-low);
  border: 1px solid var(--outline-variant);
  color: var(--secondary);
  font-size: 9px;
}

/* ==========================================================================
   Crosshair + interaction prompt + notices
   ========================================================================== */

.crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  opacity: 0.85;
}
.crosshair::before,
.crosshair::after {
  content: '';
  position: absolute;
  background: var(--retro-cyan);
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
}
.crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }

.interact-prompt {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sm);
  padding: var(--xs) var(--sm);
  background: color-mix(in srgb, var(--surface-lowest) 88%, transparent);
  border: 2px solid var(--surface-high);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface);
}

.hud-notice {
  padding: var(--xs) var(--sm);
  background: color-mix(in srgb, var(--surface-lowest) 90%, transparent);
  border-left: 3px solid var(--tertiary-container);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--on-surface);
}

/* Damage / effect flashes (shown briefly by the HUD) */
.hud-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 42, 133, 0) 40%, rgba(255, 42, 133, 0.45) 100%);
  opacity: 0;
  transition: opacity 0.12s;
}
.hud-flash.is-hit { opacity: 1; }

@media (max-width: 720px) {
  .hud-minimap { width: 116px; height: 116px; }
  .hud-vitals { width: 180px; }
  .hud-armory { min-width: 130px; }
  .hud-directive__text { font-size: 14px; }
  .hud-hints { display: none; }
}

/* ==========================================================================
   Touch controls (mounted only on coarse pointers / narrow viewports)
   ========================================================================== */

.touch { position: absolute; inset: 0; pointer-events: none; }

.touch__stick,
.touch__btn,
.touch__look { pointer-events: auto; }

.touch__stick {
  position: absolute;
  left: 20px;
  bottom: 28px;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface-lowest) 55%, transparent);
  border: 2px solid var(--outline-variant);
  border-radius: 50%;
  touch-action: none;
}

.touch__knob {
  width: 52px;
  height: 52px;
  background: var(--primary);
  border: 2px solid var(--on-primary);
  border-radius: 50%;
  transition: transform 0.05s linear;
}

.touch__look {
  position: absolute;
  right: 0;
  top: 0;
  width: 55%;
  height: 70%;
  touch-action: none;
}

.touch__buttons {
  position: absolute;
  right: 18px;
  bottom: 26px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--xs);
}

.touch__btn {
  min-width: 52px;
  height: 44px;
  padding: 0 8px;
  background: color-mix(in srgb, var(--surface-container) 88%, transparent);
  border: 2px solid var(--outline-variant);
  color: var(--on-surface);
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  touch-action: none;
}
.touch__btn:active { background: var(--primary); color: var(--on-primary); }

body.has-touch .hud-hints { display: none; }
body.has-touch { touch-action: none; }


/* ==========================================================================
   Photo mode
   ========================================================================== */

.photo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface-lowest) 40%, transparent);
  pointer-events: auto;
}
.photo.is-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.85;
  pointer-events: none;
  animation: photo-flash 0.16s steps(2);
}
@keyframes photo-flash { from { opacity: 0.85; } to { opacity: 0; } }

.photo__frame {
  position: relative;
  width: min(940px, 94vw);
  height: min(620px, 88vh);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-4);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%);
}

.photo__corner { position: absolute; width: 34px; height: 34px; border: 3px solid var(--primary); }
.photo__corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.photo__corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.photo__corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.photo__corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.photo__top {
  position: absolute;
  top: var(--sm);
  left: var(--md);
  right: var(--md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.photo__center { position: absolute; inset: 0; display: grid; place-items: center; }
.photo__reticle {
  width: 70px;
  height: 70px;
  border: 2px dashed color-mix(in srgb, var(--primary) 60%, transparent);
  border-radius: 50%;
}

.photo__bottom {
  position: absolute;
  left: var(--md);
  right: var(--md);
  bottom: var(--md);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--md);
  flex-wrap: wrap;
}
.photo__caption {
  max-width: 520px;
  padding: var(--sm);
  background: color-mix(in srgb, var(--surface-lowest) 78%, transparent);
  border-left: 4px solid var(--primary);
}
.photo__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.photo__trivia { font-size: 12px; }
.photo__controls { display: flex; align-items: center; gap: var(--xs); flex-wrap: wrap; }
.photo__controls .btn { width: auto; }

.photo__thumb {
  position: relative;
  margin-top: var(--sm);
  width: 156px;
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-1);
}
.photo__thumb-img { display: block; width: 100%; image-rendering: pixelated; }
.photo__thumb-tag {
  position: absolute;
  top: 2px;
  left: 2px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.62);
  color: var(--primary);
}
.photo__gallery { display: flex; gap: var(--xs); flex-wrap: wrap; margin-top: var(--xs); }
.photo__gallery-img {
  width: 56px;
  height: auto;
  border: 1px solid var(--surface-high);
  image-rendering: pixelated;
}

/* speedometer — bottom centre, above the weapon strip */
.hud-speedo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 230px;
  padding: var(--sm);
  margin-bottom: var(--xs);
  background: color-mix(in srgb, var(--surface-container) 92%, transparent);
  border-left: 4px solid var(--secondary);
  box-shadow: var(--shadow-2);
}
.hud-speedo__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); }
.hud-speedo__name {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.hud-speedo__readout { display: flex; align-items: baseline; gap: 4px; }
.hud-speedo__kmh { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--primary); }
.hud-speedo__unit { font-family: var(--font-data); font-size: 9px; letter-spacing: 0.1em; color: var(--outline); }
.hud-speedo__gear { font-family: var(--font-data); font-size: 15px; font-weight: 700; color: var(--secondary); }
.hud-speedo__bar { height: 6px; background: var(--surface-lowest); border: 2px solid var(--surface-high); padding: 1px; }
.hud-speedo__rpm-fill { height: 100%; background: var(--tertiary-container); width: 0%; }
.hud-speedo__bar--hull .hud-speedo__hull-fill { height: 100%; background: var(--secondary); width: 100%; }

/* ability activation feedback */
.hud-ability-fx {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  text-shadow: var(--glow-primary);
  opacity: 0;
  pointer-events: none;
}
.hud-ability-fx.is-on { animation: ability-pop 0.9s steps(6); }
@keyframes ability-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
  20% { opacity: 1; transform: translateX(-50%) scale(1.05); }
  80% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}
.hud-ability-fx.fx-systemOverride { color: var(--retro-cyan); text-shadow: var(--glow-cyan); }
.hud-ability-fx.fx-goingLive { color: var(--neon-magenta); text-shadow: var(--glow-neon); }
.hud-ability-fx.fx-redline { color: var(--tertiary-container); }
.hud-ability-fx.fx-matriarch { color: var(--secondary); text-shadow: var(--glow-secondary); }

/* stealth meters */
.hud-stealth {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--xs) var(--sm);
  background: color-mix(in srgb, var(--surface-container) 92%, transparent);
  box-shadow: var(--shadow-1);
  min-width: 168px;
}
.hud-stealth__row { display: flex; align-items: center; gap: var(--sm); }
.hud-stealth__bar {
  flex: 1 1 auto;
  height: 8px;
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
  padding: 1px;
}
.hud-stealth__fill { height: 100%; width: 0%; background: var(--secondary); }
.hud-stealth__fill--detect { background: var(--tertiary-container); }
.hud-stealth.is-alarm .hud-stealth__fill--detect { background: var(--neon-magenta); }
.hud-stealth.is-alarm { animation: blink 1s steps(2) infinite; }

/* safe-crack overlay */
.crack-panel { width: min(560px, 94vw); }
.crack-meterage { display: flex; align-items: center; justify-content: space-between; }
.crack-dial {
  position: relative;
  height: 46px;
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
  box-shadow: inset var(--shadow-1);
  overflow: hidden;
}
.crack-dial__sweet {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--secondary) 34%, transparent);
  border-left: 1px solid var(--secondary);
  border-right: 1px solid var(--secondary);
}
.crack-dial__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: var(--primary);
  box-shadow: var(--glow-primary);
}
.crack-pins { display: flex; gap: var(--xs); }
.crack-pin {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  height: 34px;
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  color: var(--on-surface-variant);
}
.crack-pin.is-set { background: var(--secondary-container); color: var(--on-secondary-container); border-color: var(--secondary); }
.crack-pin.is-current { border-color: var(--primary); color: var(--primary); }
.crack-progress { height: 8px; background: var(--surface-lowest); border: 2px solid var(--surface-high); padding: 1px; }
.crack-progress__fill { height: 100%; width: 0%; background: var(--primary); transition: width 0.12s; }
.crack-status { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-variant); }

/* radio tuning animation */
.hud-radio.is-tuning { animation: blink 0.6s steps(3) 2; }

/* weapon wheel */
.hud-wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hud-wheel__slot {
  position: absolute;
  width: 84px;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: color-mix(in srgb, var(--surface-container) 92%, transparent);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-2);
  font-family: var(--font-data);
}
.hud-wheel__slot:nth-child(1) { transform: translate(0, -86px); }
.hud-wheel__slot:nth-child(2) { transform: translate(76px, 50px); }
.hud-wheel__slot:nth-child(3) { transform: translate(-76px, 50px); }
.hud-wheel__key { font-size: 11px; font-weight: 700; color: var(--primary); }
.hud-wheel__name { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
.hud-wheel__slot.is-active { border-color: var(--primary); background: var(--surface-high); }
.hud-wheel__slot.is-empty { border-color: var(--neon-magenta); }

/* System Override glitch */
.hud-glitch { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.hud-glitch.is-on {
  opacity: 1;
  animation: glitch-shift 0.18s steps(3) 3;
  background: repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.14) 0 2px, transparent 2px 4px);
  mix-blend-mode: screen;
}
@keyframes glitch-shift {
  0% { transform: translateX(0); }
  33% { transform: translateX(3px); }
  66% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* Adda chai pop */
.hud-chai {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--surface-container) 92%, transparent);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-2);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--primary);
  opacity: 0;
  pointer-events: none;
}
.hud-chai.is-on { animation: chai-pop 1.2s steps(6); }
@keyframes chai-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}
.hud-chai__icon { width: 22px; height: 22px; fill: var(--primary); }

/* click-to-look hint */
.hud-lookhint {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: var(--xs);
  padding: 4px 10px;
  background: color-mix(in srgb, var(--surface-container) 88%, transparent);
  border: 2px solid var(--surface-high);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  pointer-events: none;
}
.hud-lookhint kbd {
  padding: 1px 5px;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-data);
  font-weight: 700;
}