/* haslett.net — shared theme
 *
 * WHAT THIS IS, AND WHAT IT DELIBERATELY IS NOT.
 *
 * Five rules. That is not an oversight — it is the measured answer. Across the
 * twelve main pages there are 602 distinct CSS selectors, and 500 of them
 * appear on exactly one page. Only eight selectors appear on all twelve, and
 * comparing them property by property, only these five agree everywhere:
 *
 *   :root  *  .site-footer  .floating-leaves  .floating-leaf
 *
 * The other three differ for reasons that are design, not drift:
 *   .board-frame — max-width runs 440px to 660px. Photos and the family tree
 *                  need room for a grid; private.html and sports.html do not.
 *   .chalk-title — font-size is tuned per page to the length of its title.
 *   body         — only `color` differs.
 * Forcing those into one file would change how pages look in order to tidy a
 * statistic. They stay where they are.
 *
 * The point of this file is not saving bytes. It is that the PALETTE is the
 * thing most likely to drift again: eight tokens that were being maintained in
 * twelve places. Now one.
 *
 * NOT USED BY THE GAMES. Six of them (Open Air, Warcaller, Walk-Off, Top of the
 * World, Wanted, Rainbow Road) make zero external requests and run offline by
 * design. A linked stylesheet would end that. Games keep their own copy.
 *
 * LOAD ORDER MATTERS: link this BEFORE each page's own <style>, so a page can
 * still override anything here.
 */

:root {
  --board: #2E3D33;
  --wood: #5C4433;
  --wood-dark: #40301F;
  --cream: #F2EAD3;
  --gold: #E3AE4E;
  --rust: #C4623F;
  --teal: #6F9C93;
  /* --plum is a fourth player colour, used only by the RPG and Monopoly, so it
     is not here — it never belonged to the site-wide palette. */
}

* { box-sizing: border-box; }

.site-footer {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  text-align: center;
  color: rgba(242,234,211,0.42);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* The floating maple leaves. position:fixed and pointer-events:none, so they
   sit behind everything and can never intercept a tap. */
.floating-leaves {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.floating-leaf {
  position: absolute;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,0.35));
}