/* DEADZONE: EXTRACTION - UI entry stylesheet (linked by index.html). Tokens + base + boot screen here; HUD, inventory
   and menus in ./css/. Palette: charcoal + olive panels, off-white type, amber caution, toxic green, rarity accents. */
@import url('../../assets/ui/fonts/fonts.css?v=202611040329');
@import url('./css/base.css?v=202611040329');
@import url('./css/hud.css?v=202611040329');
@import url('./css/inventory.css?v=202611040329');
@import url('./css/menus.css?v=202611040329');
@import url('./css/haven.css?v=202611040329');
@import url('./css/scavenging.css?v=202611040329');
@import url('./css/economy.css?v=202611040329');
@import url('./css/arsenal.css?v=202611040329');
@import url('./css/art.css?v=202611040329');
@import url('./css/touch.css?v=202611040329');

:root {
  /* surfaces */
  --bg: #0f110e;
  --panel: rgba(17, 20, 16, 0.82);
  --panel-solid: #171a15;
  --panel-raised: #1e221b;
  --panel-olive: #232a1c;
  --line: rgba(226, 219, 196, 0.14);
  --line-strong: rgba(226, 219, 196, 0.32);
  /* type */
  --text: #ece6d4;
  --text-dim: #b8b29e;
  --muted: #8f8a78;
  --display: 'Barlow Condensed', Bahnschrift, 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Segoe UI', Arial, sans-serif;
  /* semantic */
  --amber: #e9a83e;
  --amber-hi: #f6c25e;
  --amber-dim: #8a6427;
  --toxic: #92d150;
  --danger: #e04a3a;
  --health: #9fd36a;
  --stamina: #ece6d4;
  --armor: #7fb3d6;
  --calm: #9fae6a; --alert: #e9a83e; --hunt: #e5733a; --overrun: #e04a3a;
  /* rarity (paired with a letter tag + stripe pattern for colour-blind players) */
  --r-common: #b9b6a8; --r-uncommon: #7fc25a; --r-rare: #4fa3e6; --r-epic: #b277e6; --r-legendary: #f2a93b;
  /* scale: --u is set by hud.js from the viewport height (1080p = 1) times the HUD scale setting */
  --u: 1;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--body);
  -webkit-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.hidden { display: none !important; }
button { font-family: var(--display); }

/* ------------------------------------------------------------------ boot (index.html) */
#boot { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 60%, #26281a 0%, #0d0f0c 72%); }
.boot-box { width: min(460px, 80vw); text-align: center; }
.boot-title { font: 700 46px/1 var(--display); letter-spacing: 8px; color: var(--amber); margin-bottom: 22px; }
.boot-title span { display: block; font-size: 17px; letter-spacing: 14px; color: var(--text); margin-top: 8px; font-weight: 500; }
.boot-track { position: relative; height: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
#boot-bar { height: 100%; width: 2%; background: var(--amber); transition: width 0.25s; }
.boot-track::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: dz-sweep 1.2s linear infinite; }
@keyframes dz-sweep { from { transform: translateX(-110%); } to { transform: translateX(380%); } }
#boot-text { margin-top: 14px; font: 600 14px var(--display); letter-spacing: 4px; color: var(--text-dim); }

#debug { position: fixed; right: 8px; top: 8px; z-index: 60; margin: 0; padding: 8px 10px; background: rgba(0, 0, 0, 0.72); color: #b9f08a;
  font: 12px/1.45 Consolas, monospace; pointer-events: none; white-space: pre; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }