/* =========================================================
   PLAYGAMA THEME — P3 panels + B2 buttons + N2 nav.
   Chosen by Graham 2026-08-12 from playgama/MOCKUPS.html.

   Every value is a Playgama design token read live from playgama.com
   (see playgama/PALETTE.md), not eyeballed.

   ---- WHAT IS DELIBERATELY *NOT* RECOLOURED ----
   --green stays green and --gold stays gold. They are SEMANTIC across the whole
   portfolio: green always means "this button plays a rewarded ad", gold always means
   currency. Rewarded video is where the money comes from — a game that makes green
   mean something else is training players wrong. Do not "finish the theme" by
   purpling these two.

   ⚠️ Targets :root, NOT #gameShell. The bottom nav, every popup, the splash and the
   coachmark are SIBLINGS of the 450x800 design card — a theme scoped to #gameShell
   reaches the home screen and nothing else.
   ========================================================= */
:root{
  /* ---- Playgama brand ---- */
  --accent:#c7abff; --accent-dk:#9747ff; --accent-lt:#d8bbff;

  /* ---- SEMANTIC: leave alone (see above) ---- */
  --green:#2fbf6b; --green-dk:#1d8c4c;
  --gold:#ffce3a;  --gold-dk:#e8a417;

  /* ---- furniture — P3 "deep purple" ---- */
  --ink:#12081f;                       /* outline: near-black with purple in it, not blue */
  --panel:#421b75;                     /* purple-200 — the popup face */
  --panel-2:#2e1252;                   /* one step down, for the inset areas */
  --tab:#682eb2;                       /* purple-300 */
  --nav-line:#1b0b30;
  --text:#f3eaff;                      /* lavander-600 — reads warm against purple, not grey */

  /* ---- bottom nav — N2 "purple bar" ----
     #shNav is a 450px rounded-top bar that JS scales with the design card
     (transform: translateX(offX) scale(s)), so it never stretches on a wide viewport.
     These two are the vertical gradient across it. */
  --nav1:#4d2286;  --nav2:#2e1252;

  /* ---- button ramps ----
     1 = face top, 2 = face bottom, 3 = the hard shadow under it, ink = label.
     Change 1/2/3 together or the button stops reading as a key you can press. */
  --pri-1:#aa76ff; --pri-2:#9747ff; --pri-3:#52189a; --pri-ink:#ffffff;  /* B2 — PLAY. Also
                                                        paints the ACTIVE NAV TAB: the shell
                                                        uses this ramp for both, on purpose —
                                                        pressable things share one colour. */
  --go-1:#5ee08d;  --go-2:#2fbf6b;  --go-3:#1d8c4c;  --go-ink:#08240f;   /* rewarded ad */
  --gd-1:#ffca4d;  --gd-2:#f0aa22;  --gd-3:#cf8d0b;  --gd-ink:#3b2f06;   /* currency */
  --gh-1:#5a3690;  --gh-2:#421b75;  --gh-3:#2a0f4d;                      /* neutral */

  --text-scene:#f3eaff;
}

/* ---- the top bar: Playgama purple, same geometry ----
   shell.css hardcodes #ff0033 for the the host build. theme.css loads AFTER it, so this
   is a plain override — no shell edit. Shape, padding, radius and pointer-events:none
   all stay exactly as shell.css defines them. */
#shSub{ background:#9747ff; }