/* ============================================================
   Tileborne — Games shared shell (v4: theme-reactive chrome)
   Shared chrome for every mini-game. Include shared/shell.css + shared/shell.js,
   give the root node class .mj-game, mark toolbar buttons with data-act,
   then call GameShell.init().

   Appearance is two orthogonal dimensions, freely combinable:
     <div class="mj-game" data-bg="paper" data-accent="brass">
     background: paper | cream | sage | evergreen | ink | plum
     theme:      brass | jade | indigo | violet | rose | crimson

   Rule: nothing in the chrome may hardcode a color. Every visible part reads
   --g-accent* (theme) or --g-bg/--g-card (background) so both pickers move
   the whole frame, including the top bar.
   ============================================================ */

.mj-game{
  --g-radius:14px; --g-topbar-h:58px;
  /* Games own the exact viewport: fixed height (dynamic vh on mobile so the
     browser bar can't push a scrollbar in), overflow hidden. Taller content
     scrolls inside the stage, never the page. */
  position:relative; height:100vh; height:100dvh; overflow:hidden;
  font-family:var(--sans,'Inter',system-ui,-apple-system,sans-serif);
  display:flex; flex-direction:column;
  background:radial-gradient(130% 90% at 50% -12%, var(--g-bg2), var(--g-bg) 62%);
  color:var(--g-fg);
  transition:background .35s ease, color .35s ease;
}

/* ---------- defaults (Paper + Brass); data attributes override ---------- */
.mj-game{
  --g-bg:#FDFBF7; --g-bg2:#F3ECDC; --g-card:#FFFFFF;
  --g-fg:#14261F; --g-muted:#6B7A72; --g-strong:#1B4332;
  --g-line:rgba(27,67,50,.14);
  --g-glass:rgba(253,251,247,.82); --g-panel:#FFFFFF;
  --g-glow1:rgba(176,141,87,.12); --g-glow2:rgba(27,67,50,.06);
  --g-shadow-sm:0 1px 2px rgba(20,38,31,.07), 0 2px 6px rgba(20,38,31,.06);
  --g-shadow-md:0 4px 12px rgba(20,38,31,.10), 0 14px 34px rgba(20,38,31,.10);
  --g-shadow-lg:0 12px 28px rgba(20,38,31,.16), 0 30px 64px rgba(20,38,31,.20);
  --g-accent:#B08D57; --g-accent-lt:#D4B483; --g-accent-dk:#8A6B3B;
  --g-accent-soft:rgba(176,141,87,.20); --g-accent-hi:rgba(176,141,87,.42);
  --g-accent-edge:rgba(176,141,87,.30);
  --g-heading:var(--g-accent-dk);
}

/* ================= backgrounds (light and dark) ================= */
/* --g-heading points at the readable end of whatever theme color is active:
   the dark shade on light backgrounds, the light shade on dark ones. */
.mj-game[data-bg="paper"]{
  --g-bg:#FDFBF7; --g-bg2:#F3ECDC; --g-card:#FFFFFF;
  --g-fg:#14261F; --g-muted:#6B7A72; --g-strong:#1B4332;
  --g-line:rgba(27,67,50,.14);
  --g-glass:rgba(253,251,247,.82); --g-panel:#FFFFFF;
  --g-glow1:rgba(176,141,87,.12); --g-glow2:rgba(27,67,50,.06);
  --g-shadow-sm:0 1px 2px rgba(20,38,31,.07), 0 2px 6px rgba(20,38,31,.06);
  --g-shadow-md:0 4px 12px rgba(20,38,31,.10), 0 14px 34px rgba(20,38,31,.10);
  --g-shadow-lg:0 12px 28px rgba(20,38,31,.16), 0 30px 64px rgba(20,38,31,.20);
  --g-heading:var(--g-accent-dk);
}
.mj-game[data-bg="cream"]{
  --g-bg:#F7F0E3; --g-bg2:#EFE3CF; --g-card:#FFFDF8;
  --g-fg:#3A2E20; --g-muted:#8A7A62; --g-strong:#4A3A22;
  --g-line:rgba(58,46,32,.14);
  --g-glass:rgba(247,240,227,.86); --g-panel:#FFFDF8;
  --g-glow1:rgba(176,141,87,.16); --g-glow2:rgba(176,141,87,.06);
  --g-shadow-sm:0 1px 2px rgba(58,46,32,.07), 0 2px 6px rgba(58,46,32,.06);
  --g-shadow-md:0 4px 12px rgba(58,46,32,.10), 0 14px 34px rgba(58,46,32,.12);
  --g-shadow-lg:0 12px 28px rgba(58,46,32,.16), 0 30px 64px rgba(58,46,32,.20);
  --g-heading:var(--g-accent-dk);
}
.mj-game[data-bg="sage"]{
  --g-bg:#EEF3EE; --g-bg2:#E0EAE2; --g-card:#FBFCFB;
  --g-fg:#1F332A; --g-muted:#6E8375; --g-strong:#1F4335;
  --g-line:rgba(31,51,42,.14);
  --g-glass:rgba(238,243,238,.86); --g-panel:#FBFCFB;
  --g-glow1:rgba(46,139,107,.14); --g-glow2:rgba(46,139,107,.06);
  --g-shadow-sm:0 1px 2px rgba(31,51,42,.07), 0 2px 6px rgba(31,51,42,.06);
  --g-shadow-md:0 4px 12px rgba(31,51,42,.10), 0 14px 34px rgba(31,51,42,.12);
  --g-shadow-lg:0 12px 28px rgba(31,51,42,.16), 0 30px 64px rgba(31,51,42,.20);
  --g-heading:var(--g-accent-dk);
}
/* Evergreen — the default dark background, easy on the eyes at night */
.mj-game[data-bg="evergreen"]{
  --g-bg:#0E2A1E; --g-bg2:#0A1E15; --g-card:#163A2C;
  --g-fg:#E7EEE7; --g-muted:#9DB2A5; --g-strong:#D4B483;
  --g-line:rgba(212,180,131,.20);
  --g-glass:rgba(10,30,21,.82); --g-panel:#163A2C;
  --g-glow1:rgba(212,180,131,.12); --g-glow2:rgba(60,138,102,.22);
  --g-shadow-sm:0 1px 2px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.35);
  --g-shadow-md:0 6px 16px rgba(0,0,0,.45), 0 16px 38px rgba(0,0,0,.50);
  --g-shadow-lg:0 14px 32px rgba(0,0,0,.55), 0 34px 70px rgba(0,0,0,.60);
  --g-heading:var(--g-accent-lt);
}
.mj-game[data-bg="ink"]{
  --g-bg:#12181C; --g-bg2:#0C1114; --g-card:#1B2329;
  --g-fg:#E6EBEF; --g-muted:#9AA8B2; --g-strong:#A9C6E4;
  --g-line:rgba(230,235,239,.14);
  --g-glass:rgba(12,17,20,.84); --g-panel:#1B2329;
  --g-glow1:rgba(120,170,220,.14); --g-glow2:rgba(70,110,160,.12);
  --g-shadow-sm:0 1px 2px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.35);
  --g-shadow-md:0 6px 16px rgba(0,0,0,.45), 0 16px 38px rgba(0,0,0,.50);
  --g-shadow-lg:0 14px 32px rgba(0,0,0,.55), 0 34px 70px rgba(0,0,0,.60);
  --g-heading:var(--g-accent-lt);
}
.mj-game[data-bg="plum"]{
  --g-bg:#1B1530; --g-bg2:#130F22; --g-card:#241C3D;
  --g-fg:#EDE9F5; --g-muted:#A79CC0; --g-strong:#C9B6EC;
  --g-line:rgba(237,233,245,.14);
  --g-glass:rgba(19,15,34,.84); --g-panel:#241C3D;
  --g-glow1:rgba(150,120,205,.18); --g-glow2:rgba(90,70,150,.18);
  --g-shadow-sm:0 1px 2px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.38);
  --g-shadow-md:0 6px 16px rgba(0,0,0,.48), 0 16px 38px rgba(0,0,0,.52);
  --g-shadow-lg:0 14px 32px rgba(0,0,0,.58), 0 34px 70px rgba(0,0,0,.62);
  --g-heading:var(--g-accent-lt);
}

/* ================= theme colors (orthogonal to background) ================= */
/* soft = wash/glow layer, hi = hairlines and focus rings */
.mj-game[data-accent="brass"]  { --g-accent:#B08D57; --g-accent-lt:#D4B483; --g-accent-dk:#8A6B3B;
  --g-accent-soft:rgba(176,141,87,.20); --g-accent-hi:rgba(176,141,87,.45); }
.mj-game[data-accent="jade"]   { --g-accent:#2E8B6B; --g-accent-lt:#6FC2A5; --g-accent-dk:#1C6049;
  --g-accent-soft:rgba(46,139,107,.20); --g-accent-hi:rgba(46,139,107,.45); }
.mj-game[data-accent="indigo"] { --g-accent:#4A6FA5; --g-accent-lt:#8FAFD8; --g-accent-dk:#2E4870;
  --g-accent-soft:rgba(74,111,165,.22); --g-accent-hi:rgba(74,111,165,.48); }
.mj-game[data-accent="violet"] { --g-accent:#8B6FBF; --g-accent-lt:#BFAEE0; --g-accent-dk:#5F4A8C;
  --g-accent-soft:rgba(139,111,191,.22); --g-accent-hi:rgba(139,111,191,.48); }
.mj-game[data-accent="rose"]   { --g-accent:#C08A8A; --g-accent-lt:#E0B6B6; --g-accent-dk:#8E6161;
  --g-accent-soft:rgba(192,138,138,.22); --g-accent-hi:rgba(192,138,138,.48); }
.mj-game[data-accent="crimson"]{ --g-accent:#C0392B; --g-accent-lt:#E4796C; --g-accent-dk:#8A261C;
  --g-accent-soft:rgba(192,57,43,.20); --g-accent-hi:rgba(192,57,43,.45); }

/* ---------- soft top glow for depth (tinted by the theme color too) ---------- */
.mj-game::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(58% 38% at 50% -8%, var(--g-glow1), transparent 70%),
    radial-gradient(42% 30% at 100% 0%, var(--g-glow2), transparent 70%),
    radial-gradient(70% 26% at 50% 0%, var(--g-accent-soft), transparent 72%);
}
.mj-game > *{ position:relative; z-index:1; }

/* ---------- toolbar (frosted glass, tinted by the theme color) ---------- */
.mj-topbar{
  position:sticky; top:0; z-index:40; height:var(--g-topbar-h);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  background-color:var(--g-glass);
  background-image:linear-gradient(180deg, var(--g-accent-soft), transparent 72%);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--g-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), var(--g-shadow-sm);
  transition:background-color .35s ease, background-image .35s ease, border-color .35s ease;
}
.mj-title{ font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--g-heading);
  transition:color .35s ease; }
.mj-tools{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* round icon button — used for the help / info affordance in the top bar */
.mj-iconbtn{ width:36px; height:36px; flex:0 0 auto; padding:0; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-weight:700; font-size:17px; line-height:1;
  color:var(--g-strong);
  background:linear-gradient(180deg, var(--g-card), var(--g-bg));
  border:1px solid var(--g-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--g-shadow-sm);
  transition:border-color .15s, color .15s, transform .12s, box-shadow .15s; }
.mj-iconbtn:hover{ border-color:var(--g-accent); color:var(--g-accent); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px var(--g-accent-soft); }
.mj-iconbtn:active{ transform:translateY(0); }
.mj-iconbtn:focus-visible{ outline:2px solid var(--g-accent); outline-offset:2px; }

/* embossed buttons */
.mj-btn{
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; color:var(--g-fg);
  background:linear-gradient(180deg, rgba(255,255,255,.30), var(--g-card));
  border:1px solid var(--g-line); border-radius:10px; padding:7px 13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--g-shadow-sm);
  transition:transform .08s, box-shadow .15s, border-color .15s, background .15s, color .15s;
}
/* sun/moon day-night toggle glyph + label (injected by the shell) */
.mj-ico-night{ display:inline-flex; width:16px; height:16px; }
.mj-ico-night svg{ width:16px; height:16px; display:block; }
.mj-lbl-night{ margin-left:2px; }
.mj-btn:hover{ border-color:var(--g-accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px var(--g-accent-soft); }
.mj-btn:active{ transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(0,0,0,.14); }
.mj-btn:focus-visible{ outline:2px solid var(--g-accent); outline-offset:2px; }
.mj-btn.is-on{ background:linear-gradient(180deg, var(--g-accent-lt), var(--g-accent)); color:var(--g-on-accent,#fff); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px var(--g-accent-soft); text-shadow:0 1px 1px rgba(0,0,0,.18); }

.mj-turn{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--g-muted); margin-right:4px; }
.mj-turn .dot{ width:11px; height:11px; border-radius:50%; background:var(--g-accent);
  box-shadow:0 0 0 3px var(--g-accent-soft), 0 0 10px var(--g-accent); }
.mj-turn b{ color:var(--g-heading); font-weight:700; }

.mj-stage{ flex:1; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center;
  margin:14px;
  padding:24px 18px calc(24px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, var(--g-card), var(--g-bg));
  border:2px solid var(--g-accent-edge);
  border-radius:20px;
  box-shadow:0 0 0 4px var(--g-accent-soft), var(--g-shadow-lg), inset 0 1px 0 rgba(255,255,255,.28);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease; }
/* On dark backgrounds the bright inset highlight reads wrong — drop it there. */
.mj-game[data-bg="evergreen"] .mj-stage,
.mj-game[data-bg="ink"] .mj-stage,
.mj-game[data-bg="plum"] .mj-stage{
  box-shadow:0 0 0 4px var(--g-accent-soft), var(--g-shadow-lg), inset 0 1px 0 rgba(255,255,255,.06); }
/* margin:auto keeps children centered while letting a too-tall panel (level
   list, help sheet) scroll fully into reach instead of clipping at the top. */
.mj-stage > *{ width:100%; max-width:760px; margin:auto; }

.mj-surface{ background:linear-gradient(180deg, rgba(255,255,255,.35), var(--g-card));
  border:1px solid var(--g-line); border-radius:var(--g-radius); box-shadow:var(--g-shadow-md); }

/* ---------- fullscreen: toolbar becomes a floating overlay ---------- */
.mj-game:fullscreen{ min-height:100vh; }
.mj-game.is-fullscreen .mj-topbar{
  position:fixed; left:0; right:0; top:0; z-index:50;
  background-color:var(--g-glass);
  background-image:linear-gradient(180deg, var(--g-accent-soft), transparent 70%);
  border-bottom:1px solid var(--g-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--g-shadow-lg);
  transition:transform .28s ease, background-color .35s ease, background-image .35s ease;
}
.mj-game.is-fullscreen .mj-topbar.hide{ transform:translateY(-100%); }
.mj-game.is-fullscreen .mj-btn{ background-color:transparent;
  background-image:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); }
.mj-game.is-fullscreen .mj-stage{ margin:0; border-radius:0; padding-top:calc(var(--g-topbar-h) + 18px);
  box-shadow:var(--g-shadow-lg), inset 0 1px 0 rgba(255,255,255,.06); }

/* ---------- slide-out menu ---------- */
/* Scrim: click anywhere outside the panel to collapse the menu.
   Deliberately sits BELOW the toolbar (z-index 40) so the toolbar buttons stay
   clickable while the menu is open — otherwise the first tap only closes the menu
   and the button looks dead. */
.mj-menu-scrim{
  position:fixed; inset:0; z-index:30;
  background:rgba(0,0,0,.16); backdrop-filter:blur(1px);
}
.mj-menu-scrim[hidden]{ display:none; }

.mj-menu-panel{
  position:fixed; top:calc(var(--g-topbar-h) + 8px); right:12px; z-index:55;
  width:min(336px,calc(100vw - 24px)); max-height:calc(100vh - var(--g-topbar-h) - 24px); overflow:auto;
  background:var(--g-panel); color:var(--g-fg);
  border:1px solid var(--g-line); border-top:3px solid var(--g-accent);
  border-radius:var(--g-radius);
  box-shadow:var(--g-shadow-lg); padding:16px; display:flex; flex-direction:column; gap:14px;
  transition:border-color .35s ease, background .35s ease;
}
.mj-menu-panel[hidden]{ display:none; }
.mj-menu-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mj-menu-row > span{ font-size:13px; color:var(--g-muted); min-width:52px; }
.mj-menu-sep{ height:1px; background:var(--g-line); }
.mj-seg{ display:inline-flex; gap:6px; }
.mj-seg .mj-btn{ padding:6px 12px; }
.mj-seg .mj-btn.is-sel{ background:linear-gradient(180deg, var(--g-accent), var(--g-accent-dk)); color:var(--g-on-accent,#fff); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 10px var(--g-accent-soft); }

/* swatches: one gem per theme — dark theme disc with its accent as a colored
   setting ring, so the four read as green / black / blue / purple at a glance.
   The selected one lifts, gets a double ring in its own color, and a check. */
.mj-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.mj-sw{ position:relative; width:28px; height:28px; border-radius:50%; cursor:pointer; padding:0;
  border:3px solid var(--g-line); box-shadow:inset 0 1px 2px rgba(255,255,255,.22), var(--g-shadow-sm);
  transition:transform .12s, box-shadow .15s, border-color .15s; }
.mj-sw:hover{ transform:translateY(-2px); }
.mj-sw:focus-visible{ outline:2px solid var(--g-accent); outline-offset:2px; }
.mj-sw.is-sel{ transform:scale(1.18);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sw) 30%, transparent), 0 0 0 5px var(--sw), var(--g-shadow-md); }
.mj-sw.is-sel::after{ content:''; position:absolute; left:50%; top:50%;
  width:6px; height:11px; margin:-7px 0 0 -3px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }

/* ---------- celebration feedback ---------- */
.mj-fx{ position:fixed; inset:0; pointer-events:none; z-index:80; }
.mj-toast{
  position:fixed; left:50%; bottom:36px; transform:translateX(-50%) translateY(22px);
  background:linear-gradient(180deg, var(--g-panel), var(--g-card)); color:var(--g-heading);
  padding:12px 22px; border-radius:999px; font-weight:700; font-size:15px;
  box-shadow:var(--g-shadow-lg), 0 0 0 4px var(--g-accent-soft);
  border:1px solid var(--g-accent-hi);
  opacity:0; transition:opacity .3s, transform .3s; z-index:85;
}
.mj-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.mj-win{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:82;
  background:rgba(0,0,0,.5); backdrop-filter:blur(5px); opacity:0; transition:opacity .3s; }
.mj-win.show{ opacity:1; }
.mj-win-card{ width:min(430px,90vw); text-align:center; padding:32px 28px;
  background:var(--g-panel); color:var(--g-fg);
  border:1px solid var(--g-line); border-top:3px solid var(--g-accent); border-radius:24px;
  box-shadow:var(--g-shadow-lg), 0 0 0 6px var(--g-accent-soft);
  transform:translateY(16px) scale(.95); transition:transform .35s cubic-bezier(.2,.9,.3,1.3); }
.mj-win.show .mj-win-card{ transform:none; }
.mj-win-card .mj-medal{ font-size:52px; line-height:1; filter:drop-shadow(0 6px 10px var(--g-accent-soft)); }
.mj-win-card h2{ font-family:var(--serif,Georgia,serif); font-size:30px; color:var(--g-heading); margin:10px 0 6px; }
.mj-win-card .mj-win-sub{ color:var(--g-muted); font-size:15px; margin-bottom:4px; }

@media (max-width:700px){
  /* Narrow screens: Restart / All games live in the Menu and the night toggle
     goes icon-only, so the top bar stays a single row and the game keeps the
     exact full-viewport height with nothing spilling into a page scroll. */
  .mj-topbar [data-act="restart"],
  .mj-topbar [data-act="home"]{ display:none; }
  .mj-lbl-night{ display:none; }
}
@media (max-width:560px){
  .mj-title{ font-size:16px; }
  .mj-btn{ padding:6px 9px; font-size:12px; }
  .mj-topbar{ gap:8px; padding:0 10px; }
  .mj-topbar [data-act="full"]{ display:none; }
}

/* The school site's consult widget (injected by assets/app.js) has no place
   inside a game. Hidden here so every game inherits the rule. */
#consultFab, #consultModal{ display:none !important; }

/* The page behind a game never scrolls — the game is the whole page. */
body.mj-body-lock{ overflow:hidden; height:100vh; height:100dvh; }
/* No floating "Aa" button inside games either: the Menu's "Text & display"
   row opens the same reading dialog (window.MJA11y, injected by assets/app.js). */
body.mj-body-lock .a11y{ display:none; }

/* ================= coordinated themes (single pick: paired bg + accent) =================
   Each theme sets the WHOLE palette so background, buttons, fonts, game frame and
   game content move together from one choice. Day/Night toggles data-night to flip
   the backdrop shade while keeping the theme's accent identity.
   Themes: Deep Green · Black · Royal Blue · Deep Purple (4, not 36). */
.mj-game[data-theme="green"]{
  --g-bg:#082318; --g-bg2:#04130C; --g-card:#153425;
  --g-fg:#E7EEE7; --g-muted:#9DB2A5; --g-strong:#D4B483;
  --g-line:rgba(212,180,131,.20);
  --g-glass:rgba(10,30,21,.82); --g-panel:#163A2C;
  --g-glow1:rgba(212,180,131,.12); --g-glow2:rgba(60,138,102,.22);
  --g-shadow-sm:0 1px 2px rgba(0,0,0,.40),0 2px 6px rgba(0,0,0,.35);
  --g-shadow-md:0 6px 16px rgba(0,0,0,.45),0 16px 38px rgba(0,0,0,.50);
  --g-shadow-lg:0 14px 32px rgba(0,0,0,.55),0 34px 70px rgba(0,0,0,.60);
  --g-accent:#B08D57; --g-accent-lt:#D4B483; --g-accent-dk:#8A6B3B;
  --g-accent-soft:rgba(176,141,87,.20); --g-accent-hi:rgba(176,141,87,.45);
  --g-accent-edge:rgba(176,141,87,.30);
  --g-on-accent:#1c130a; --g-heading:var(--g-accent-lt);
}
/* Green theme, day: warm parchment instead of pale sage — ivory ground,
   brass accent, deep-green ink. Same register as the site's paper pages,
   so daytime reads expensive instead of washed out. */
.mj-game[data-theme="green"][data-night="1"]{
  --g-bg:#F6F1E4; --g-bg2:#EAE1CC; --g-card:#FDFBF5;
  --g-fg:#24382E; --g-muted:#6E7F72; --g-strong:#1B4332;
  --g-line:rgba(27,67,50,.16);
  --g-glass:rgba(250,247,238,.90); --g-panel:#FDFBF5;
  --g-glow1:rgba(176,141,87,.16); --g-glow2:rgba(27,67,50,.06);
  --g-shadow-sm:0 1px 2px rgba(36,50,40,.07),0 2px 6px rgba(36,50,40,.06);
  --g-shadow-md:0 4px 12px rgba(36,50,40,.10),0 14px 34px rgba(36,50,40,.11);
  --g-shadow-lg:0 12px 28px rgba(36,50,40,.15),0 30px 64px rgba(36,50,40,.18);
  --g-on-accent:#1c130a; --g-heading:var(--g-accent-dk);
}
.mj-game[data-theme="black"]{
  --g-bg:#0A0A0B; --g-bg2:#050506; --g-card:#161618;
  --g-fg:#EDEDED; --g-muted:#9A9AA2; --g-strong:#D8D8DE;
  --g-line:rgba(255,255,255,.14);
  --g-glass:rgba(12,12,14,.86); --g-panel:#161618;
  --g-glow1:rgba(199,203,211,.14); --g-glow2:rgba(120,130,150,.10);
  --g-shadow-sm:0 1px 2px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.40);
  --g-shadow-md:0 6px 16px rgba(0,0,0,.50),0 16px 38px rgba(0,0,0,.55);
  --g-shadow-lg:0 14px 32px rgba(0,0,0,.60),0 34px 70px rgba(0,0,0,.65);
  --g-accent:#C7CBD3; --g-accent-lt:#E2E5EA; --g-accent-dk:#9AA0AA;
  --g-accent-soft:rgba(199,203,211,.18); --g-accent-hi:rgba(199,203,211,.48);
  --g-accent-edge:rgba(199,203,211,.26);
  --g-on-accent:#15171A; --g-heading:var(--g-accent-lt);
}
.mj-game[data-theme="black"][data-night="1"]{
  --g-bg:#E6E6E9; --g-bg2:#D6D6DB; --g-card:#F6F6F8;
  --g-fg:#15171A; --g-muted:#666B73; --g-strong:#2A2D33;
  --g-line:rgba(0,0,0,.14);
  --g-glass:rgba(230,230,233,.88); --g-panel:#F6F6F8;
  --g-glow1:rgba(60,64,72,.10); --g-glow2:rgba(60,64,72,.05);
  --g-shadow-sm:0 1px 2px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.06);
  --g-shadow-md:0 4px 12px rgba(0,0,0,.10),0 14px 34px rgba(0,0,0,.12);
  --g-shadow-lg:0 12px 28px rgba(0,0,0,.16),0 30px 64px rgba(0,0,0,.20);
  --g-on-accent:#FFFFFF; --g-heading:var(--g-accent-dk);
}
.mj-game[data-theme="navy"]{
  --g-bg:#0B1B3A; --g-bg2:#07142B; --g-card:#122A52;
  --g-fg:#E8EEFB; --g-muted:#9FB2D4; --g-strong:#E0B84A;
  --g-line:rgba(224,184,74,.22);
  --g-glass:rgba(7,20,43,.86); --g-panel:#122A52;
  --g-glow1:rgba(224,184,74,.14); --g-glow2:rgba(60,110,200,.18);
  --g-shadow-sm:0 1px 2px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.40);
  --g-shadow-md:0 6px 16px rgba(0,0,0,.50),0 16px 38px rgba(0,0,0,.55);
  --g-shadow-lg:0 14px 32px rgba(0,0,0,.60),0 34px 70px rgba(0,0,0,.65);
  --g-accent:#E0B84A; --g-accent-lt:#F0D27A; --g-accent-dk:#B8922F;
  --g-accent-soft:rgba(224,184,74,.18); --g-accent-hi:rgba(224,184,74,.45);
  --g-accent-edge:rgba(224,184,74,.26);
  --g-on-accent:#1A1405; --g-heading:var(--g-accent-lt);
}
.mj-game[data-theme="navy"][data-night="1"]{
  --g-bg:#D3DEF1; --g-bg2:#BFCFEB; --g-card:#F1F5FC;
  --g-fg:#102247; --g-muted:#4A5E89; --g-strong:#102A6B;
  --g-line:rgba(16,42,107,.16);
  --g-glass:rgba(211,222,241,.88); --g-panel:#F1F5FC;
  --g-glow1:rgba(224,184,74,.12); --g-glow2:rgba(60,110,200,.08);
  --g-shadow-sm:0 1px 2px rgba(16,42,107,.07),0 2px 6px rgba(16,42,107,.06);
  --g-shadow-md:0 4px 12px rgba(16,42,107,.10),0 14px 34px rgba(16,42,107,.12);
  --g-shadow-lg:0 12px 28px rgba(16,42,107,.16),0 30px 64px rgba(16,42,107,.20);
  --g-on-accent:#FFFFFF; --g-heading:var(--g-accent-dk);
}
.mj-game[data-theme="purple"]{
  --g-bg:#190D31; --g-bg2:#100720; --g-card:#251247;
  --g-fg:#EFEBF7; --g-muted:#A99DC6; --g-strong:#CBB6F2;
  --g-line:rgba(203,182,242,.22);
  --g-glass:rgba(16,7,32,.86); --g-panel:#251247;
  --g-glow1:rgba(173,139,236,.20); --g-glow2:rgba(110,80,180,.20);
  --g-shadow-sm:0 1px 2px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.38);
  --g-shadow-md:0 6px 16px rgba(0,0,0,.48),0 16px 38px rgba(0,0,0,.52);
  --g-shadow-lg:0 14px 32px rgba(0,0,0,.58),0 34px 70px rgba(0,0,0,.62);
  --g-accent:#A87BE6; --g-accent-lt:#C9B2F2; --g-accent-dk:#6F4FB0;
  --g-accent-soft:rgba(173,139,236,.22); --g-accent-hi:rgba(173,139,236,.50);
  --g-accent-edge:rgba(173,139,236,.30);
  --g-on-accent:#160A2C; --g-heading:var(--g-accent-lt);
}
.mj-game[data-theme="purple"][data-night="1"]{
  --g-bg:#E1D9F1; --g-bg2:#CFC2E8; --g-card:#F4F0FA;
  --g-fg:#241A3A; --g-muted:#665A87; --g-strong:#4A2D70;
  --g-line:rgba(74,45,112,.16);
  --g-glass:rgba(225,217,241,.88); --g-panel:#F4F0FA;
  --g-glow1:rgba(173,139,236,.14); --g-glow2:rgba(90,70,150,.08);
  --g-shadow-sm:0 1px 2px rgba(74,45,112,.07),0 2px 6px rgba(74,45,112,.06);
  --g-shadow-md:0 4px 12px rgba(74,45,112,.10),0 14px 34px rgba(74,45,112,.12);
    --g-shadow-lg:0 12px 28px rgba(74,45,112,.16),0 30px 64px rgba(74,45,112,.20);
    --g-on-accent:#FFFFFF; --g-heading:var(--g-accent-dk);
}

/* green theme (night only): keep the very top of the page and the top bar a
   deeper, cleaner green instead of the brass glow that was washing the top
   out. In day mode the parchment palette supplies its own warm glow. */
.mj-game[data-theme="green"]:not([data-night="1"])::before{
  background:
    radial-gradient(58% 38% at 50% -8%, rgba(60,138,102,.20), transparent 70%),
    radial-gradient(42% 30% at 100% 0%, rgba(40,110,84,.16), transparent 70%),
    radial-gradient(70% 26% at 50% 0%, rgba(46,138,102,.13), transparent 72%);
}
.mj-game[data-theme="green"]:not([data-night="1"]) .mj-topbar{
  background-image:linear-gradient(180deg, rgba(46,138,102,.20), transparent 72%);
}

/* ---- Joker chip: the shared wildcard economy HUD ---- */
.mj-joker-chip{ display:inline-flex; align-items:center; gap:8px; padding:3px 10px 3px 4px;
  border:1px solid var(--g-line); border-radius:999px;
  background:linear-gradient(180deg, var(--g-card), var(--g-bg));
  box-shadow:var(--g-shadow-sm); transition:opacity .2s ease; }
.mj-joker-chip.is-empty{ opacity:.42; }
.mj-joker-face{ width:22px; height:30px; display:flex; border-radius:4px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.35); }
.mj-joker-face .tl{ width:100%; height:100%; display:flex; background:#F5EDDC; }
.mj-joker-face svg{ width:100%; height:100%; display:block; }
.mj-joker-chip b{ font-size:12.5px; font-weight:700; color:var(--g-fg); min-width:20px; }
.mj-joker-use{ border:1px solid var(--g-accent-edge); background:var(--g-accent-soft);
  color:var(--g-fg); font:600 12px/1 inherit; padding:5px 10px; border-radius:999px;
  cursor:pointer; transition:background .15s ease, transform .12s ease; }
.mj-joker-use:hover:not(:disabled){ background:var(--g-accent-hi); transform:translateY(-1px); }
.mj-joker-use:disabled{ opacity:.4; cursor:default; }