/* -------------------------------------------------------------------------
   Vectoroids — Global Styles
   Clean, minimal, vector-arcade aesthetic.
   ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: system-ui, sans-serif;
  height: 100%;
  overflow: hidden;
}

/* Center the SVG game area */
#game {
  width: 100vw;
  height: 100vh;
  display: block;
  background: #000;
}

/* -------------------------------------------------------------------------
   Entity Styling
   These classes match the <g> class names used in render.js
   ------------------------------------------------------------------------- */

.ship-entity use {
  stroke: #0ff;
  fill: none;
  stroke-width: 1.5;
}

.asteroid-entity use {
  stroke: #fff;
  fill: none;
  stroke-width: 1.2;
}

.bullet-entity use {
  stroke: #f44;
  fill: #f44;
  stroke-width: 1;
}

/* Optional thrust flame */
.ship-entity .thrust {
  stroke: #ff0;
  fill: none;
  stroke-width: 1.2;
}

/* -------------------------------------------------------------------------
   Glow Effects (optional)
   These can be referenced in shapes.svg or applied via CSS filters.
   ------------------------------------------------------------------------- */

.glow-cyan {
  filter: drop-shadow(0 0 4px #0ff);
}

.glow-white {
  filter: drop-shadow(0 0 4px #fff);
}

.glow-red {
  filter: drop-shadow(0 0 4px #f44);
}

/* -------------------------------------------------------------------------
   Debug Helpers (optional)
   Uncomment if you want to visualize entity radii or bounds.
   ------------------------------------------------------------------------- */

/*
.debug-circle {
  stroke: rgba(255,255,255,0.2);
  fill: none;
  stroke-width: 0.5;
}
*/

/* -------------------------------------------------------------------------
   Start Screen
   ------------------------------------------------------------------------- */

#start-screen {
  pointer-events: none;
}

.subtitle-text {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 5px;
  fill: #fff;
  letter-spacing: 2px;
  opacity: 0.8;
}

.license-text {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 4px;
  fill: #fff;
  opacity: 0.5;
  letter-spacing: 1px;
}

/* -------------------------------------------------------------------------
   HUD — Score and lives
   ------------------------------------------------------------------------- */

#hud {
  pointer-events: none;
}

.hud-value {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 4px;
  fill: #0ff;
  letter-spacing: 1px;
}

.hud-lives-ship use {
  stroke: #0ff;
  fill: none;
  stroke-width: 1.5;
}

/* -------------------------------------------------------------------------
   Game Over Screen
   ------------------------------------------------------------------------- */

#gameover-screen {
  pointer-events: none;
}

.gameover-score-text {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 10px;
  fill: #0ff;
  letter-spacing: 2px;
}