/* style.css -- Dark Sanctuary baseline chrome.
   Structure ported from idle-arpg/style.css's token-driven approach (CLAUDE.md:
   "PORT from it"), but the palette is new: a dark-fantasy co-op looter-shooter
   should read colder and grimmer than Embermark's warm violet/gold idle-game
   chrome -- iron and bone, with a single blood-red accent reserved for danger
   (HP, alerts) rather than gold-for-everything.

   Issue #6 ships no gameplay -- this is the shell: full-window canvas, an
   empty HUD mount point later issues render into, and the WebGL/boot-failure
   overlay index.html's preflight script drives. Keep it short; panel/HUD
   detail belongs to the issues that add the panels. */

:root {
  --bg: #05060a;         /* near-black canvas backdrop -- the zone reads by its own lighting, not this */
  --panel: #14131a;      /* HUD chrome surfaces */
  --panel-2: #1c1a24;
  --border: #33303f;
  --text: #e8e6ef;
  --dim: #8a8796;
  --accent: #9c1f2e;     /* blood-red -- the one warm color in the palette, reserved for danger/HP/alerts */
  --accent-2: #5b6b8c;   /* cold steel-blue -- secondary accent (buffs, allies, links) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* the game fills the viewport; nothing here should scroll */
  font-family: system-ui, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* Full-window render target. client3d.js (once it exists) attaches the
   WebGLRenderer to this canvas; it sits behind everything else. */
#ds-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
}

/* HUD chrome mount point -- an empty shell for now. pointer-events:none so
   it never steals clicks/drags meant for the 3D view; individual HUD
   elements opt back in with pointer-events:auto once later issues add them. */
#ds-hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.ds-hidden { display: none !important; }

/* Boot/WebGL failure overlay -- see index.html's preflight script and its
   fail() helper. Sits above everything, including the canvas underneath it
   (which stays black if this fires). */
#ds-boot-fail {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 10, 0.92);
  padding: 24px;
}
.boot-fail-inner {
  max-width: 480px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.boot-fail-inner h2 {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 20px;
}
.boot-fail-inner p {
  margin: 8px 0;
  line-height: 1.5;
}
.boot-fail-inner code {
  color: var(--dim);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
}