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

html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0c10; }

/* The canvas is sized in JS via renderer.setSize(w, h, false) - the `false` means three does not
   touch the style, so these rules own the layout and there is no fight between the two. */
#view { display: block; width: 100%; height: 100%; }

body { font: 13px/1.4 ui-monospace, "DejaVu Sans Mono", monospace; color: #cfd6e4; }

#version {
  position: fixed; right: 8px; bottom: 6px;
  color: #6b7686; font-size: 11px; letter-spacing: 0.04em;
  pointer-events: none; user-select: none;
}

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

#stats {
  position: fixed; left: 16px; bottom: 12px;
  display: flex; gap: 20px;
  font-size: 26px; font-weight: 600; color: #f0a63c;
  text-shadow: 0 2px 0 rgba(0,0,0,.7);
  pointer-events: none; user-select: none;
}

#damage-flash {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(150,10,10,.55) 100%);
  opacity: 0; transition: opacity 180ms ease-out;
}

#debug {
  position: fixed; left: 8px; top: 8px;
  padding: 8px 10px; background: rgba(6,8,12,.82);
  border: 1px solid #1e2634; border-radius: 3px;
  font-size: 12px; color: #9fb0c8; white-space: pre;
  pointer-events: none; user-select: none;
}