/* ─── base.css ─────────────────────────────────────────────────────────────
   Reset, :root vars (mobile board scale), shared cell-highlight primitive.
   Split out of the old style.css as a pure ordered slice. The <link> order
   in index.html (base → menu → online → board → folks → war → overlays →
   mobile → free-mode) preserves the original cascade — do not reorder. ─── */

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

/* Mobile board scale (number); JS overrides on phones, see updateBoardScale() */
:root { --board-scale: 1; }

/* Cell-highlight squares (move / attack / select / spell / upgrade) share ONE
   corner radius and ONE pulse speed — tweak these two values. The highlight box
   is a ::before inset inside each cell (see "Highlight overlays" below), so its
   radius is independent of the cell's own border-radius. */
:root { --cell-highlight-radius: 6px; --hl-pulse-duration: 1.6s; }

body {
  font-family: 'Segoe UI', sans-serif;
  background: #1a1a2e;
  color: #e0e0e0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen { display: none; width: 100%; }
.screen.active { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
.hidden { display: none !important; }

/* ── Button hierarchy ──
   The DEFAULT button is a quiet secondary. Loud colours are reserved meanings:
   yellow = Upgrade · purple = Spell · green = confirm/ready · red = destructive
   (and the menu's brand accent) · orange = pending-request banners · folk
   accents = player identity. A loud button is a deliberate exception, never
   the fallback. */
button {
  background: #2e3346;
  color: #dde3f2;
  border: none;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
button:hover { background: #3b4158; }
/* Disabled must read DIMMER than the (dark) enabled default — darker fill,
   low-contrast text. (#555 used to be LIGHTER than the enabled #2e3346,
   which made live spell-step buttons look dead and vice versa.) */
button:disabled { background: #26262f; color: #5b5b6b; cursor: default; }