/* Everything outside the play field. The HUD is canvas and is not styled here. */

:root {
  --bg: #0a0c0f;
  --panel: #11151b;
  --line: #1e2630;
  --ink: #c8d2dc;
  --dim: #6b7885;
  --hot: #d9552f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  /* A drag on the play field must not scroll the page or trigger pull-to-refresh. */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#stage {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
}

#game canvas { display: block; }

#loading, .notice {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .5rem;
  text-align: center;
  padding: 2rem;
  background: var(--bg);
}

#loading h1, .notice h1 {
  margin: 0;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  letter-spacing: .16em;
  font-weight: 600;
}

#loading p, .notice p { margin: 0; color: var(--dim); font-size: 13px; }