/* Muck Poker design tokens (2026-10-01). The single source of colour for the lobby, Muck GTO and any
   new UI. Rules and examples: docs/STYLE-GUIDE.md. New CSS uses these variables; never a new hex. */
/* iOS Safari enlarges some text on its own ("text autosizing"): on a real iPhone the homepage's small labels came out
   bigger than their neighbours, and with larger phone text settings buttons and cards overflowed (Shaun, 2026-10-05).
   Sizes here are already set for phones, so keep them exactly as written. Pinch zoom still works. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root {
  /* surfaces: neutral near-black, lightest last */
  --muck-bg: #0e0e0e;
  --muck-surface-1: #141414;   /* cards, panels */
  --muck-surface-2: #1b1b1b;   /* raised / hover */
  --muck-surface-3: #242424;   /* inputs, chips, secondary buttons */
  --muck-line: #292929;        /* default 1px border */
  --muck-line-strong: #3a3a3a; /* hover / focus border */

  /* text */
  --muck-text: #f2f2f2;
  --muck-text-2: #b4b4b4;      /* supporting copy */
  --muck-text-3: #7d7d7d;      /* captions, meta */

  /* warm card surfaces: the table builder (Play with friends) and the profile */
  --muck-warm-1: #20211d;      /* card gradient start */
  --muck-warm-2: #171815;      /* card gradient end */
  --muck-warm-tile: #24251f;   /* tiles inside a warm card */
  --muck-warm-line: #33332e;   /* card border */
  --muck-warm-line-2: #42433a; /* tile border */
  --muck-warm-num: #c6ae77;    /* step numbers (01, 02...) */

  /* the one accent: gold */
  --muck-gold: #ffd34f;        /* icons, links, highlights */
  --muck-gold-muted: #d8bd84;  /* eyebrows, quiet gold text */
  --muck-silver: #c9d0d8;      /* 2nd place: leaderboard podium, medals */
  --muck-bronze: #c98a5c;      /* 3rd place: leaderboard podium, medals */
  --muck-gold-cta: linear-gradient(#ffdf72, #ffcc3e);  /* primary buttons */
  --muck-gold-cta-hover: linear-gradient(#ffe68f, #ffda62);  /* every yellow button's hover (below) */
  --muck-gold-cta-hover-line: #ffda62;
  --muck-gold-ink: #0b1117;    /* text on gold */
  /* QR codes only: black on white whatever the theme, or a wallet can't read them */
  --muck-qr-paper: #fff;
  --muck-qr-ink: #000;

  /* purple: the Muck GTO wordmark and level / premium badges only */
  --muck-purple: #a970ff;
  --muck-purple-soft: #c9a7ff;
  --muck-purple-deep: #2a1d44;

  /* status (never decorative) */
  --muck-green: #3fcf6e;
  --muck-red: #e5484d;
  --muck-blue: #3b7cc4;
  --muck-amber: #f2b84b;       /* warnings, "inaccuracy" grades */

  /* MuckNet builds on Meet the Bots (the layer stack's live LED and label), one colour each; nowhere else */
  /* Meet the Bots' layer stack, by place, not version: the newest green, the next yellow, the third red, the rest plain
     (Shaun, 2026-10-26: "no have red yellow green on the top 3 only"); a new version moves everyone down a color */
  --muck-build-1: #75d69b; --muck-build-2: #ffdb59; --muck-build-3: #f07878;

  /* four-colour deck */
  --muck-suit-s: #4b4f55; --muck-suit-h: #c8313b; --muck-suit-d: #2c5fd0; --muck-suit-c: #2e9a4c;

  /* solver actions (Muck GTO) */
  --muck-act-allin: #7a1c23; --muck-act-bet: #f0505a; --muck-act-call: #4aad6c; --muck-act-fold: #3b7cc4;

  /* spacing: the only padding, margin and gap values new CSS uses (Shaun, 2026-10-13: "Never introduce arbitrary
     spacing values"; docs/STYLE-GUIDE.md) */
  --muck-space-1: 4px; --muck-space-2: 8px; --muck-space-3: 12px; --muck-space-4: 16px;
  --muck-space-5: 24px; --muck-space-6: 32px; --muck-space-7: 48px;

  /* shape. --muck-radius-lg is 6px for the pages already using it (smaller than the base, a historical slip); new CSS
     uses the named radii below instead (docs/STYLE-GUIDE.md, 2026-10-13) */
  --muck-radius-sm: 6px; --muck-radius: 10px; --muck-radius-lg: 6px;
  --muck-radius-btn: 7px;      /* buttons */
  --muck-radius-field: 8px;    /* inputs, selects */
  --muck-radius-card: 12px;    /* cards, panels, list boxes */
  --muck-radius-overlay: 16px; /* dialogs, popovers, the support window */
  --muck-radius-pill: 999px;   /* pills, badges, toasts, switches */
  --muck-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --muck-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* machine voice: readouts, chat, stats */

  /* elevation: cards are flat; only things floating over the page get a shadow */
  --muck-shadow-menu: 0 18px 40px -12px rgb(0 0 0 / .8);   /* dropdowns, popovers */
  --muck-shadow-overlay: 0 24px 80px rgb(0 0 0 / .65);     /* dialogs, the support window */
  --muck-ring-selected: inset 3px 0 0 var(--muck-gold);    /* the selected row's gold edge */

  /* stacking: one ladder, lowest first */
  --muck-z-sticky: 90;      /* the site header */
  --muck-z-popover: 600;    /* HUD, notes, small popovers */
  --muck-z-widget: 900;     /* MuckBot in the corner */
  --muck-z-menu: 1000;      /* the header's dropdown menu */
  --muck-z-toast: 9000;     /* toasts */
  --muck-z-dialog: 10050;   /* MuckDialog and every modal */

  /* motion */
  --muck-dur-fast: .15s;    /* hovers, presses, colour changes */
  --muck-dur: .2s;          /* toasts, panels opening */
  --muck-dur-slow: .35s;    /* a section building in */
  --muck-ease: cubic-bezier(.2, .8, .2, 1);       /* things settling into place */
  --muck-ease-pop: cubic-bezier(.34, 1.4, .64, 1); /* a dialog or card popping in */
}

/* One hover for every yellow button, the Learn in 2 minutes one: a touch brighter gold, no peach, no brightness filter
   (Shaun, 2026-10-08: "make the hover color the same as the learn button, also update the hover color for any other
   yellow buttons to that as well so its consistent"). The list is every gold button found on the lobby (and its panels),
   Muck Club, Muck GTO, Freeroll, onboarding and RoboLarry pages. Older sheets set their own hovers with !important and
   ids, so the :not(#_) chain lifts this above them (each one counts as an id); it changes colour only, never size. */
:root:not(#_):not(#_):not(#_) :is(
  #s2-panel :is(.px-btn, .btn-primary, .ps-go, .msn-claim-btn, .rwd-buy-btn, .fm-btn--play, .store-pack-btn, .czs-load-more-btn, #settings-save, .acct-code-btn, .store-redeem-btn),
  #lobby :is(.ls-hero-play-btn, .lmh-guest-play-btn, .save-name-btn),
  .gom-btn.btn-primary, #game-dim-back-in-btn, #btn-hh-gto, .wl-signin-face,
  .mb-cta, .h-btn.primary, .l-next, .gg-btn, #sf-register, .mh-cta, .ob-primary, .ml-button, .mm-open, .mm-final-cta, .mm-cta a.gold, .sp-send
):not(:disabled):not([aria-disabled="true"]):hover,
:root:not(#_):not(#_):not(#_) #lobby .lp-card:hover .lp-action {
  background: var(--muck-gold-cta-hover) !important; border-color: var(--muck-gold-cta-hover-line) !important; filter: none !important;
  color: var(--muck-gold-ink);   /* dark text on the gold, always: Settings' Use This kept its own gold hover text, gold on gold (Shaun, 2026-10-25) */
}

/* Every scrollbar like the private table date picker's day strip (assets/play-setup.css .sp-days): thin, a dark rounded
   thumb that goes muted gold on hover, no track (Shaun, 2026-10-18: "make these scrollers like the horizontal one in the
   date picker" / "any scrollbars should be like that too"). Pages that hide their own scrollbar keep it hidden. */
* { scrollbar-width: thin; scrollbar-color: var(--muck-line-strong) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--muck-line-strong); border-radius: var(--muck-radius-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--muck-gold-muted); }

/* Page to page: a short cross-fade instead of a dark blank between pages (Shaun, 2026-10-19: "when i hit leave table it
   flashes ... this happens in other areas around site too"). Same-origin navigations only; browsers without it just
   navigate as before. Off for anyone who asks for less motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }