/* ==========================================================================
   LB PALETTE — the single hex source of truth for the whole product.
   --------------------------------------------------------------------------
   Loaded FIRST on index.html and on every one of the 21 game pages, so the
   lobby, the packs/battles surfaces and every game frame resolve to the same
   values. This is also the canonical home for brand, action, state, VIP and
   rarity colours. Components consume tokens from here; they do not keep a
   private copy of a hex that merely happens to match today.

   THE LADDER (one low-chroma midnight-slate family)
     --lb-bg           #151C21  page canvas
     --lb-surface      #0D1317  rails, topbar and modal shells
     --lb-control-deep #141C21  search fields and quiet segmented-control beds
     --lb-surface-2    #1E282E  cards and controls sitting on a panel
     --lb-surface-3    #2A353C  raised / hover surfaces
     --lb-surface-4    #3A464E  active / selected surfaces
     --lb-line         #2A353C  every hairline. --lb-line-2 for the rare stronger one.

   WHY body != panel: the tonal ladder is the depth cue. A route owns the
   canvas, rails and modal shells use the darker panel tone, and content cards
   rise back above them. No unrelated neutral greys may interrupt the ladder.

   ACTION COLOURS keep one job each (pink = commit/start, green = cash out,
   gold = win, red = loss). Vivid fills use measured dark ink; passive and
   selected controls remain slate so navigation never looks like a bet.
   ========================================================================== */

:root{
  /* ---- the ladder ---- */
  --lb-bg:#151C21;
  --lb-surface:#0D1317;
  --lb-surface-2:#1E282E;
  --lb-surface-3:#2A353C;
  --lb-surface-4:#3A464E;
  --lb-canvas:var(--lb-bg);
  --lb-rail:var(--lb-surface);
  --lb-control-deep:#141C21;
  --lb-line:#2A353C;
  --lb-line-2:#48565F;
  --lb-control-border:#43515A;
  --lb-control-selected:var(--lb-surface-4);
  --lb-menu:#192228;
  --lb-input-bg:var(--lb-control-deep);

  /* ---- shell and selection roles ---- */
  --lb-topbar:var(--lb-surface);
  --lb-sidebar:var(--lb-surface);
  --lb-sidebar-seg:#182127;
  --lb-sidebar-seg-border:var(--lb-line);
  --lb-sidebar-gray-base:var(--lb-surface-2);
  --lb-sidebar-gray-1:var(--lb-surface-2);
  --lb-sidebar-gray-2:var(--lb-surface-3);
  --lb-sidebar-gray-3:var(--lb-surface-4);
  /* The Packs/Battles mode switch is the one branded navigation exception:
     pink gives orientation while ordinary page/navigation selection stays
     on the neutral surface ladder below. */
  --lb-sidebar-selected-base:var(--lb-brand-pink);
  --lb-sidebar-selected-navy:var(--lb-surface);
  --lb-selection-fill:var(--lb-surface-4);
  --lb-selection-hover:var(--lb-line-2);
  --lb-selection-accent:var(--lb-brand-pink);
  --lb-selection-ink:var(--lb-ink);

  /* ---- Originals: one neutral contract across every game engine ----
     The playfield stays on the page navy while controls/footer step down to
     the rail tone. Tiles then rise through the same surface ladder used by
     the lobby. Game-specific art and win/loss colours remain game-owned. */
  --lb-game-stage:var(--lb-bg);
  --lb-game-panel:var(--lb-surface);
  --lb-game-control:var(--lb-surface-2);
  --lb-game-raised:var(--lb-surface-3);
  --lb-game-active:var(--lb-surface-4);
  --lb-game-line:var(--lb-line);
  --lb-game-footer:var(--lb-surface);

  /* ---- warm player-facing text hierarchy ---- */
  --lb-ink:#F7F4F0;
  --lb-ink-2:#D6D0CA;
  --lb-ink-muted:#AAA39C;
  --lb-placeholder:#928C86;
  --lb-chrome-icon:#C6C0BA;
  --lb-chrome-text:var(--lb-ink);

  /* ---- brand identity ---- */
  --lb-brand-pink:#F45DC4;
  --lb-pink:var(--lb-brand-pink);
  --lb-pink-2:#FF76D0;
  --lb-purple:#7659C6;
  --lb-purple-2:#A28CDE;
  --lb-pack-purple:#7659C6;
  --lb-pack-ui-accent:var(--lb-brand-pink);

  /* ---- semantic states and premium roles ---- */
  --lb-success:#38C979;
  --lb-success-hover:#4BD68A;
  --lb-success-active:#2EAD67;
  --lb-warning:#E8B849;
  --lb-orange:#E98648;
  --lb-notification:#FFC44D;
  --lb-error:#F25F70;
  --lb-gold:#E8B849;
  --lb-gold-2:#F4D276;
  --lb-locked:#858C90;
  --lb-focus:var(--lb-pink-2);

  /* ---- action system ---- */
  --lb-action-primary:var(--lb-brand-pink);
  --lb-action-primary-hover:var(--lb-pink-2);
  --lb-action-primary-active:#D848AB;
  --lb-action-primary-ink:#171117;
  /* Runtime bridges still consume these explicit theme and wallet aliases. */
  --lb-theme-primary:var(--lb-action-primary);
  --lb-theme-primary-hover:var(--lb-action-primary-hover);
  --lb-wallet-bg:var(--lb-action-primary);
  --lb-wallet-hover:var(--lb-action-primary-hover);
  --lb-wallet-ink:var(--lb-action-primary-ink);
  --lb-action-secured:var(--lb-success);
  --lb-action-secured-hover:var(--lb-success-hover);
  --lb-action-secured-active:var(--lb-success-active);
  --lb-action-secured-ink:#08150E;
  --lb-action-secondary:var(--lb-surface-2);
  --lb-action-secondary-hover:var(--lb-surface-3);
  --lb-action-secondary-active:var(--lb-surface-4);
  --lb-action-secondary-border:var(--lb-control-border);
  --lb-action-secondary-ink:var(--lb-ink);
  --lb-action-danger:var(--lb-error);
  --lb-action-danger-hover:#FF7584;
  --lb-action-danger-active:#D94A5D;
  --lb-action-danger-ink:#1A0C10;
  --lb-action-gold-ink:#171209;
  --lb-action-disabled:var(--lb-surface-2);
  --lb-action-disabled-ink:var(--lb-locked);
  --lb-action-focus:var(--lb-focus);
  /* Two neutral layers lift filled actions without adding a colored halo. */
  --lb-action-shadow:0 6px 15px -7px rgba(0,0,0,.68),0 1px 0 rgba(255,255,255,.10) inset;

  /* ---- Lucky Packs rarity system ----
     These approved catalog hues stay independent from UI brand/action edits. */
  --lb-rarity-common:#8F9AAB;
  --lb-rarity-uncommon:#4C9AFF;
  --lb-rarity-rare:#A45CFF;
  --lb-rarity-epic:#FF4DB8;
  --lb-rarity-legendary:#FF4D4D;
  --lb-rarity-mythic:#FFC83D;

  /* ---- press feel: shared by every button in the product ---- */
  --lb-press-scale:.96;
  --lb-press-in:70ms cubic-bezier(.4,0,1,1);
  --lb-press-out:170ms cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   UNIVERSAL PRESS — Shuffle's button mechanic, applied product-wide.
   --------------------------------------------------------------------------
   Shuffle's button scales its FACE down on pointer-down and springs it back on
   release: fast in, slow out. That asymmetry is the whole feel — a symmetric
   transition reads mushy.

   `.lb-originals-btn` already does this on its inner .lb-originals-btn__content.
   This block gives the same motion to every ordinary <button> so no control in
   a bet modal is left inert, without touching colour, size, radius or border.
   Opt out with `data-lb-no-press` (drag handles, sliders, anything where a
   scale would fight the gesture).
   ========================================================================== */

button,
[role="button"],
.lb-press{
  transition:transform var(--lb-press-out),
             background-color .18s ease,
             border-color .18s ease,
             color .18s ease,
             opacity .18s ease;
}

/* Exclusions carry a reason, not a taste:
   .lb-originals-btn  presses its inner face (double-dip otherwise)
   .tb-home         already scales the logo mark inside it
   .gcard/.game-*   carousel tiles own a hover/press transform of their own
   [data-lb-no-press] the manual escape hatch for drag handles and sliders */
button:active:not(:disabled):not([data-lb-no-press]):not(.lb-originals-btn):not(.tb-home):not(.gcard):not(.game-more-card),
[role="button"]:active:not([aria-disabled="true"]):not([data-lb-no-press]),
.lb-press:active:not(:disabled):not([data-lb-no-press]){
  transform:scale(var(--lb-press-scale));
  transition:transform var(--lb-press-in);
}

/* The Shuffle primitive presses its inner face, so the outer box must not also
   scale — otherwise the two compound into a double-dip. */
button.lb-originals-btn:active:not(:disabled){transform:none}

/* Pack and prize artwork does not press (owner 2026-08-08). These are grids and
   strips of artwork you scan, not rows of controls you fire; the dip made a
   whole wall of items twitch like bet buttons. Worse on a phone: the pack strip
   inside a battle card is something you SWIPE, and every swipe started by
   shrinking the card it lives in. Tapping still opens the contents.

   !important is doing real work here, not papering over a mistake. The universal
   press selector above is `button:active:not(:disabled):not([data-lb-no-press])
   :not(.lb-originals-btn):not(.tb-home):not(.gcard):not(.game-more-card)` — six
   :not()s deep, specificity (0,7,1). A plain `.lbp-poss-cell:active` is (0,2,0)
   and loses, which is why the prize tiles kept dipping after they were "fixed".
   Every opt-out below has to outrank that selector or it does nothing. */
.lbp-poss-cell:active,
.lbp-packpeek-item:active,
.lbp-battle-card:active,
.lbp-brow-packs:active,
.lbp-brow-pk:active,
.lbp-astage-packs:active,
.lbp-astage-card:active,
.lbp-arena-strip:active,
.lbp-arena-strip button:active{transform:none!important}

/* Switches and dropdown openers do not press (owner 2026-08-08). The dip says
   "this fires an action"; a toggle flips a state and a dropdown reveals a menu,
   and both keep their pressed appearance afterwards — so the dip fights the
   thing the control is already doing. Colour and the open state still respond. */
button[role="switch"]:active,
[role="switch"]:active,
.toggle:active,
.wm-toggle:active,
button[aria-haspopup]:active:not(:disabled),
.lbp-dd-btn:active:not(:disabled),
.lb-select-btn:active:not(:disabled),
.dd-btn:active:not(:disabled){transform:none}

/* Controls that live inside a game's bet modal press a little deeper: they are
   small, and a 4% scale on a 32px chip is invisible. */
.lb-originals-stepper:active:not(:disabled),
[data-lb-wager-half]:active:not(:disabled),
[data-lb-wager-double]:active:not(:disabled){
  transform:scale(.92);
  transition:transform var(--lb-press-in);
}

@media (prefers-reduced-motion:reduce){
  button,[role="button"],.lb-press{transition-duration:.01ms}
  button:active,[role="button"]:active,.lb-press:active,
  .lb-originals-stepper:active,[data-lb-wager-half]:active,[data-lb-wager-double]:active{transform:none}
}