/* =============================================================================
   Expedition Games — the house tokens ("Trail Lantern", docs/site-vision-plan.md §4)
   =============================================================================
   ONE copy of the colours every browse page is painted with. Linked from every
   page you browse or choose on (hub, /games/ and the guides, About, Field Notes,
   the leaderboard, the legal pages) BEFORE that page's own <style>, so a page can
   still set its own layout variables (--maxw, --radius) but no longer its palette.

   The rule:
     - Navy is the canvas for browsing and choosing. The game pages keep their own
       warm Campfire surface (--eg-ember-*); that is where you step into the light.
     - ONE accent pair everywhere: gold + coral, cream text. The old amber #e0a760
       went with the gold logo tile it lived on (2026-10-06): the mark is the
       brand emblem now (below).

   The legacy names (--bg, --panel, --text, --accent …) are aliases, so every
   page's existing rules pick the house colours up without being rewritten.
   ========================================================================== */
:root{
  --eg-navy:#0b0d12;
  --eg-navy-panel:#161a23;
  --eg-navy-line:#232a37;
  --eg-ember-deep:#15110f;
  --eg-ember-surf:#241f1d;
  --eg-gold:#f6b53f;
  --eg-coral:#e6552e;
  --eg-cream:#f7efe4;
  --eg-muted:#9aa4b5;
  --eg-muted-ember:#b8a696;
  --eg-dim:#6d768a;
  --eg-green:#4fd08a;
  --eg-bar:linear-gradient(90deg,#f6b53f,#e6552e);
  --eg-radius:14px;
  --eg-ink:#1a0f06;                /* dark text on the gold→coral button */

  /* the names the pages were written against */
  --bg:var(--eg-navy);
  --panel:var(--eg-navy-panel);
  --line:var(--eg-navy-line);
  --text:var(--eg-cream);
  --muted:var(--eg-muted);
  --dim:var(--eg-dim);
  --accent:var(--eg-gold);
}

/* ---- the primary button: the gold→coral bar, dark text ------------------- */
.eg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:0 18px;border-radius:999px;border:0;
  background:var(--eg-bar);color:var(--eg-ink);
  font:inherit;font-size:14.5px;font-weight:800;letter-spacing:.2px;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:0 6px 18px rgba(230,85,46,.22);
  -webkit-tap-highlight-color:transparent;transition:transform .14s,filter .2s;
}
.eg-btn:active{transform:scale(.96)}
@media (hover:hover){ .eg-btn:hover{filter:brightness(1.06)} }

/* ---- the masthead's pinned Play button (guides) -------------------------- */
header.masthead .eg-play{flex:0 0 auto;margin-left:auto}

/* ---- eyebrow labels: 11pt, +0.12em, uppercase, gold ---------------------- */
.eg-eyebrow{
  margin:0;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--eg-gold);
}

/* ---- the logo: the brand emblem ---------------------------------------------
   The gold medallion (gen_favicon.py cuts it from docs/brand/ into
   img/brand/, transparent outside its own outline), replacing the gold tile
   and its glyph. Each page's own .logo rule keeps its place in the masthead;
   this takes away the tile — its gradient, glow and rounded corners — and
   sizes the emblem. A page can set --eg-emblem-size (the 404 shows it large). */
.logo.eg-emblem{
  width:var(--eg-emblem-size,46px);height:var(--eg-emblem-size,46px);
  background:none;box-shadow:none;border-radius:50%;padding:0;
}
.logo.eg-emblem img{
  display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.5));
}