* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0d1014;
  color: #e8e4dc;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  overflow: hidden;
}

#view { display: block; width: 100vw; height: 100vh; cursor: pointer; }
body.locked #view { cursor: none; }

#crosshair {
  position: fixed; left: 50%; top: 50%; width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px; background: #e8e4dc; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6); opacity: 0; pointer-events: none;
}
body.locked #crosshair { opacity: .85; }

#hud {
  position: fixed; left: 24px; bottom: 22px; width: 240px;
  pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
#hud .row { display: flex; align-items: baseline; gap: 10px; }
#speed { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(180,85,44,.22); color: #e8a074;
}
.tag.air { background: rgba(90,140,200,.22); color: #8ab6e6; }
.track {
  height: 3px; margin-top: 6px; border-radius: 2px;
  background: rgba(232,228,220,.14); overflow: hidden;
}
#speedbar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #6b8fb8, #e8a074 62%, #ff6b3d);
  transition: width .05s linear;
}
.dim { color: rgba(232,228,220,.45); }
#fps { margin-top: 5px; font-size: 11px; }

#hint {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, 84vw); padding: 22px 26px; text-align: center;
  background: rgba(13,16,20,.82); border: 1px solid rgba(232,228,220,.14);
  border-radius: 6px; backdrop-filter: blur(6px);
}
#hint strong { display: block; font-size: 15px; margin-bottom: 10px; }
#hint p { font-size: 12px; margin-top: 8px; }
body.locked #hint { display: none; }