/* styles.css — mission-control HUD (1970s aerospace) + touch controls. */
:root { --void:#0a0e2a; --amber:#ffb000; --green:#33ff66; }
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--void); }
body {
  font-family:'Courier New', Courier, monospace;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  touch-action:none; /* let the touch source own gestures */
}
canvas { display:block; position:fixed; inset:0; z-index:0; }

#hud {
  position:fixed; inset:0; z-index:10; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:env(safe-area-inset-top,16px) 18px env(safe-area-inset-bottom,16px);
  color:var(--green); text-transform:uppercase; letter-spacing:2px;
}
#hud .frame { position:fixed; inset:10px; border:1px solid rgba(51,255,102,.25); pointer-events:none; }
#hud .top { display:flex; justify-content:space-between; font-size:13px; }
#hud .tag { color:var(--amber); }
#hud .bottom { font-size:11px; opacity:.8; }

/* Crosshair — small dot + ring at screen center. */
#crosshair {
  position:fixed; left:50%; top:50%; width:4px; height:4px; z-index:5;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--green); box-shadow:0 0 0 6px rgba(51,255,102,.0), 0 0 4px rgba(51,255,102,.9);
  pointer-events:none;
}
#crosshair::after {
  content:''; position:absolute; left:50%; top:50%; width:22px; height:22px;
  transform:translate(-50%,-50%); border:1px solid rgba(51,255,102,.5); border-radius:50%;
}
/* Hitmarker — brief X at center; amber for body, vermillion for precision. */
#hitmarker {
  position:fixed; left:50%; top:50%; width:20px; height:20px; z-index:6;
  transform:translate(-50%,-50%) rotate(45deg); opacity:0; pointer-events:none;
}
#hitmarker::before, #hitmarker::after {
  content:''; position:absolute; left:50%; top:50%; background:var(--amber);
}
#hitmarker::before { width:2px; height:20px; transform:translate(-50%,-50%); }
#hitmarker::after  { width:20px; height:2px; transform:translate(-50%,-50%); }
#hitmarker.crit::before, #hitmarker.crit::after { background:#ff5533; }
/* Ammo readout — bottom-right. */
#ammo {
  position:fixed; right:24px; bottom:24px; z-index:10; pointer-events:none;
  color:var(--amber); font-size:20px; letter-spacing:2px;
}
#ammo.reloading { color:var(--green); opacity:.7; }

/* Touch controls (created by source-touch.js, shown only when touch is the active source). */
#touch-layer { position:fixed; inset:0; z-index:20; pointer-events:none; }
#touch-layer.active { pointer-events:auto; }

.stick-base {
  position:absolute; width:120px; height:120px; border-radius:50%;
  border:2px solid rgba(51,255,102,.35); background:rgba(51,255,102,.05);
  transform:translate(-50%,-50%); pointer-events:none;
}
.stick-knob {
  position:absolute; width:54px; height:54px; border-radius:50%;
  border:2px solid var(--green); background:rgba(51,255,102,.15);
  transform:translate(-50%,-50%); pointer-events:none;
}
.touch-btn {
  position:absolute; min-width:64px; padding:14px 16px; border-radius:10px;
  border:1px solid var(--amber); color:var(--amber); background:rgba(255,176,0,.08);
  font-family:inherit; font-size:13px; letter-spacing:2px; text-transform:uppercase;
  text-align:center; pointer-events:auto; -webkit-user-select:none; user-select:none;
}
.touch-btn:active, .touch-btn.held { background:rgba(255,176,0,.28); }