/* ONE LOOK FOR BOTH HALVES (Wayfarer Merge, his words 2026-10-18: "Each half still has its own buttons and screens ... just make it
   look nice"). The islands (style.css) and the farm (farm/style.css, in its frame) both load this file first and take every colour, the
   font, the corners and the shadows from here, so moving between them feels like one game. The look is the farm's, which its players
   know (FOCUS 4.2: "I don't want a radical change for the people playing the farm game"): night-sea panels, cream words, gold for what
   is chosen, leaf green for Go and for progress, coral for a problem. Change a token here and both halves follow.
   Each style sheet keeps its own short names (--panel, --ink, ...) as aliases of these. */
:root {
  /* the words */
  --wm-font: ui-rounded, 'Nunito', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --wm-ink: #fdfaf2;                       /* the words on a panel */
  --wm-dim: #cfe0e6;                       /* the quieter words under them */
  --wm-faint: #93afb8;                     /* the quietest: a label, a count */

  /* the panels: glass over the world (the farm's top bar), the panels that hold a list, the cards in front of everything */
  --wm-glass: rgba(18, 52, 66, 0.78);
  --wm-glass-strong: rgba(18, 52, 66, 0.9);
  --wm-panel: rgba(21, 57, 74, 0.95);
  --wm-panel-see: rgba(21, 57, 74, 0.7);   /* the see-through backpack */
  --wm-card: #15394a;
  --wm-well: rgba(255, 255, 255, 0.07);    /* a row, a slot, a card inside a panel */
  --wm-well-hi: rgba(255, 255, 255, 0.12); /* the same under the mouse */
  --wm-sunk: rgba(0, 16, 24, 0.3);         /* a track, a field, the strip of tabs */
  --wm-edge: rgba(255, 255, 255, 0.14);
  --wm-edge-hi: rgba(255, 255, 255, 0.28);
  --wm-line: rgba(255, 255, 255, 0.1);     /* a line between rows */
  --wm-scrim: rgba(5, 20, 28, 0.55);       /* behind a card that must be answered */

  /* the colours that mean something */
  --wm-gold: #ffd447;                      /* chosen, a level, a count */
  --wm-gold-deep: #e0a82e;
  --wm-gold-soft: rgba(255, 212, 71, 0.18);
  --wm-gold-edge: rgba(255, 212, 71, 0.6);
  --wm-gold-ink: #2a1d00;                  /* words on gold */
  --wm-leaf: #7fcf5a;                      /* progress, done */
  --wm-leaf-dark: #3f8f3a;                 /* Go, Buy, Place */
  --wm-good: #a8e88a;                      /* words that say you have enough */
  --wm-bad: #ff7a66;
  --wm-bad-ink: #ffb4a8;                   /* words that say what is missing */
  --wm-warm: #f6c27a;                      /* a soft warning, a warm meal */
  --wm-sea: #4fb0d6;
  --wm-sea-dark: #2b7fa3;

  /* buttons */
  --wm-btn: rgba(255, 255, 255, 0.1);
  --wm-btn-hi: rgba(255, 255, 255, 0.17);
  --wm-btn-lift: inset 0 1px 0 rgba(255, 255, 255, 0.12);   /* the soft top light every button has */
  --wm-progress: linear-gradient(90deg, #3f8f3a, #7fcf5a); /* every progress bar */
  --wm-track: rgba(255, 255, 255, 0.14);                     /* the track it fills */

  /* corners: a slot, a button or a row, a bar, a card */
  --wm-r-sm: 8px;
  --wm-r-md: 12px;
  --wm-r: 14px;
  --wm-r-lg: 18px;
  --wm-pill: 999px;

  /* shadows */
  --wm-shadow-sm: 0 3px 10px rgba(0, 20, 30, 0.28);
  --wm-shadow: 0 8px 24px rgba(0, 20, 30, 0.35);
  --wm-shadow-lg: 0 16px 44px rgba(0, 20, 30, 0.5);

  /* the smallest thing a thumb taps, and the round buttons over the world (the view button on both halves) */
  --wm-hit: 44px;
  --wm-round: 46px;

  /* the crossing: sky, sand line and sea, with white wave flecks (the farm's sailing card, and the fade between the halves) */
  --wm-sail-sky: linear-gradient(180deg, #3f86cf 0%, #8cc3ec 42%, #eadcc4 55%, #3c8db0 56%, #2c6f8f 100%);
  --wm-sail-waves:
    radial-gradient(ellipse 60px 10px at 20% 20%, rgba(255, 255, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 80px 12px at 60% 45%, rgba(255, 255, 255, 0.3), transparent 70%),
    radial-gradient(ellipse 50px 9px at 85% 30%, rgba(255, 255, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 70px 10px at 40% 70%, rgba(255, 255, 255, 0.25), transparent 70%);
}

/* a keyboard user sees where they are, the same gold ring on both halves (a mouse or a finger never shows it) */
:focus-visible { outline: 2px solid var(--wm-gold); outline-offset: 2px; }

/* the crossing's motion, used by both halves */
@keyframes wm-waves { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes wm-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }