:root{
  --hud-cyan:#35e8ff;
  --hud-cyan-soft:rgba(53,232,255,.34);
  --hud-cyan-faint:rgba(53,232,255,.14);
  --hud-gold:#f0c74e;
  --hud-bg:rgba(7,18,32,.68);
  --hud-bg-strong:rgba(5,13,24,.82);
  --hud-border:rgba(53,232,255,.86);
  --hud-text:#d7f4ff;
  --hud-muted:#a5bfd0;
}

#hud{
  position:fixed;
  top:18px;
  left:18px;
  right:18px;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
  transition:opacity .4s;
}

#hud>*{pointer-events:auto}

.hud-title,
.hud-stat,
#controls-hint,
#minimap{
  position:relative;
  background:linear-gradient(180deg,rgba(10,25,44,.72),rgba(5,15,26,.78));
  border:1px solid var(--hud-cyan-soft);
  box-shadow:0 0 24px rgba(53,232,255,.12),inset 0 0 18px rgba(53,232,255,.05);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}

.hud-title::before,
.hud-stat::before,
#controls-hint::before,
#minimap::before,
#mission-objective::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,var(--hud-border),transparent) top left/72px 2px no-repeat,
    linear-gradient(180deg,var(--hud-border),transparent) top left/2px 22px no-repeat,
    linear-gradient(90deg,transparent,var(--hud-border)) top right/20px 2px no-repeat,
    linear-gradient(180deg,var(--hud-border),transparent) top right/2px 18px no-repeat,
    linear-gradient(90deg,var(--hud-border),transparent) bottom left/20px 2px no-repeat,
    linear-gradient(180deg,transparent,var(--hud-border)) bottom left/2px 18px no-repeat,
    linear-gradient(90deg,transparent,var(--hud-border)) bottom right/24px 2px no-repeat,
    linear-gradient(180deg,transparent,var(--hud-border)) bottom right/2px 24px no-repeat;
  opacity:.95;
}

.hud-title{
  min-width:304px;
  padding:14px 20px 18px;
  font-family:"Orbitron",sans-serif;
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:2px;
  color:var(--hud-cyan);
  text-shadow:0 0 18px rgba(53,232,255,.28);
}

.hud-title::after{
  content:"••••";
  position:absolute;
  right:18px;
  bottom:8px;
  font-size:.55rem;
  letter-spacing:4px;
  color:var(--hud-cyan);
  opacity:.85;
}

.hud-stats{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.hud-stat{
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--hud-text);
  font-size:.86rem;
  font-weight:500;
  backdrop-filter:blur(10px);
}

.hud-stat .icon{
  font-family:"Orbitron",sans-serif;
  font-size:.8rem;
  letter-spacing:1px;
  color:var(--hud-cyan);
}

.hud-stat .val{
  color:var(--hud-cyan);
  font-weight:700;
  font-family:"Orbitron",sans-serif;
  font-size:.86rem;
}

.hud-stat:nth-child(2){
  border-color:rgba(240,199,78,.45);
  box-shadow:0 0 24px rgba(240,199,78,.08),inset 0 0 16px rgba(240,199,78,.05);
}

.hud-stat:nth-child(2)::before{
  background:
    linear-gradient(90deg,rgba(240,199,78,.9),transparent) top left/64px 2px no-repeat,
    linear-gradient(180deg,rgba(240,199,78,.9),transparent) top left/2px 20px no-repeat,
    linear-gradient(90deg,transparent,rgba(240,199,78,.9)) top right/20px 2px no-repeat,
    linear-gradient(180deg,rgba(240,199,78,.9),transparent) top right/2px 18px no-repeat,
    linear-gradient(90deg,rgba(240,199,78,.9),transparent) bottom left/20px 2px no-repeat,
    linear-gradient(180deg,transparent,rgba(240,199,78,.9)) bottom left/2px 18px no-repeat,
    linear-gradient(90deg,transparent,rgba(240,199,78,.9)) bottom right/24px 2px no-repeat,
    linear-gradient(180deg,transparent,rgba(240,199,78,.9)) bottom right/2px 24px no-repeat;
}

.hud-stat:nth-child(2) .icon,
.hud-stat:nth-child(2) .val{color:var(--hud-gold)}

#controls-hint{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:100;
  width:min(720px,calc(100vw - 28px));
  padding:12px 18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  backdrop-filter:blur(12px);
  transition:opacity .4s;
}

.key-hint{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 22px;
  min-height:36px;
  color:var(--hud-text);
  font-size:.9rem;
}

.key-hint:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:2px;
  bottom:2px;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--hud-cyan-soft),transparent);
}

.key-hint kbd{
  min-width:26px;
  padding:4px 8px;
  border:1px solid rgba(53,232,255,.55);
  border-radius:4px;
  background:rgba(10,29,47,.6);
  box-shadow:inset 0 0 10px rgba(53,232,255,.06);
  font-family:"Orbitron",sans-serif;
  font-size:.86rem;
  line-height:1;
  color:var(--hud-cyan);
  text-align:center;
}

#shop-popup{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.9);
  z-index:200;
  background:rgba(8,8,18,.95);
  backdrop-filter:blur(20px);
  border:1px solid rgba(0,240,255,.2);
  border-radius:16px;
  padding:32px 40px;
  color:#cde;
  max-width:420px;
  width:90%;
  opacity:0;
  pointer-events:none;
  transition:all .35s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 60px rgba(0,240,255,.08),0 20px 60px rgba(0,0,0,.5);
}

#shop-popup.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
#shop-popup h2{font-family:"Orbitron",sans-serif;font-size:1.2rem;margin-bottom:4px;letter-spacing:2px}
#shop-popup .shop-type{font-size:.75rem;color:#556;text-transform:uppercase;letter-spacing:3px;margin-bottom:16px}
#shop-popup .shop-desc{font-size:.9rem;line-height:1.6;color:#89a;margin-bottom:20px}
#shop-popup .shop-items{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
#shop-popup .shop-item{background:rgba(0,240,255,.06);border:1px solid rgba(0,240,255,.12);border-radius:6px;padding:4px 10px;font-size:.75rem;color:#7bf}
#shop-popup .shop-close{display:inline-block;background:linear-gradient(135deg,rgba(0,240,255,.15),rgba(123,47,255,.15));border:1px solid rgba(0,240,255,.25);border-radius:8px;padding:8px 24px;color:#00f0ff;font-family:"Orbitron",sans-serif;font-size:.75rem;letter-spacing:2px;cursor:pointer;transition:all .2s}
#shop-popup .shop-close:hover{background:linear-gradient(135deg,rgba(0,240,255,.25),rgba(123,47,255,.25));box-shadow:0 0 20px rgba(0,240,255,.2)}

#minimap{
  position:fixed;
  right:18px;
  bottom:16px;
  z-index:100;
  width:194px;
  height:206px;
  background:
    linear-gradient(90deg,var(--hud-border),var(--hud-border)) top 18px left/28px 2px no-repeat,
    linear-gradient(180deg,var(--hud-border),var(--hud-border)) top 18px left/2px 28px no-repeat,
    linear-gradient(90deg,var(--hud-border),var(--hud-border)) top 18px right/28px 2px no-repeat,
    linear-gradient(180deg,var(--hud-border),var(--hud-border)) top 18px right/2px 28px no-repeat,
    linear-gradient(90deg,var(--hud-border),var(--hud-border)) bottom 12px left/28px 2px no-repeat,
    linear-gradient(180deg,var(--hud-border),var(--hud-border)) bottom 12px left/2px 28px no-repeat,
    linear-gradient(90deg,var(--hud-border),var(--hud-border)) bottom 12px right/28px 2px no-repeat,
    linear-gradient(180deg,var(--hud-border),var(--hud-border)) bottom 12px right/2px 28px no-repeat,
    linear-gradient(180deg,rgba(8,20,36,.32),rgba(8,20,36,.08));
  border:none;
  box-shadow:none;
  clip-path:none;
  overflow:visible;
  transition:opacity .4s;
}

#minimap::before{
  inset:18px 0 0;
  background:none;
}

#minimap::after{
  content:"N";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  font-family:"Orbitron",sans-serif;
  font-size:.78rem;
  letter-spacing:2px;
  color:var(--hud-cyan);
}

#minimap canvas{
  position:absolute;
  inset:26px 17px 18px;
  width:calc(100% - 34px);
  height:calc(100% - 44px);
  border-radius:16px;
}

#interact-prompt{
  position:fixed;
  top:55%;
  left:50%;
  transform:translate(-50%,0);
  z-index:100;
  background:rgba(10,10,20,.85);
  backdrop-filter:blur(10px);
  border:1px solid rgba(0,240,255,.25);
  border-radius:10px;
  padding:8px 20px;
  color:#00f0ff;
  font-family:"Orbitron",sans-serif;
  font-size:.7rem;
  letter-spacing:2px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
  text-align:center;
}

#interact-prompt.visible{opacity:1}
#interact-prompt .shop-name-hint{display:block;color:#fff;font-size:.85rem;margin-bottom:2px}

@media (max-width:700px){
  #hud{
    top:12px;
    left:12px;
    right:12px;
    flex-direction:column;
    gap:10px;
  }

  .hud-title{min-width:0;width:min(300px,calc(100vw - 24px))}
  .hud-stats{width:100%;gap:8px;justify-content:flex-end;flex-wrap:wrap}
  .hud-stat{padding:8px 12px;font-size:.76rem}
  #controls-hint{bottom:12px;padding:10px 12px}
  .key-hint{padding:0 12px;font-size:.78rem;gap:6px}
  .key-hint kbd{padding:4px 6px;font-size:.72rem}
  #minimap{right:10px;bottom:10px;width:168px;height:178px}
  #minimap canvas{inset:24px 15px 16px}
}