/* ============================================================
   base.css — Design tokens, reset, game root + canvas
   ============================================================ */

:root {
  --bg: #0a0a14;
  --bg-2: #11112a;
  --friendly: #00e5ff;
  --friendly-soft: rgba(0, 229, 255, 0.4);
  --enemy: #ff3b3b;
  --enemy-warm: #ff8c42;
  --amber: #ffb800;
  --gold: #ffd700;
  --violet: #9d4edd;
  --text: #e6f7ff;
  --panel-bg: rgba(10, 10, 25, 0.85);
  --panel-border: rgba(0, 229, 255, 0.35);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}

/* The game renders at a fixed virtual resolution (DESIGN_W x DESIGN_H
   in js/constants.js). main.js applies a uniform CSS transform on
   #game-root to scale-fit it into the browser window with letterbox
   bars (the black body background shows through). Every child uses
   design-space pixels. */
#game-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 1600px;
  height: 900px;
  overflow: hidden;
  transform-origin: top left;
  background: radial-gradient(ellipse at center, #11112a 0%, #0a0a14 70%, #050510 100%);
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}