/* ── Benjamin brand ──
   Benjamin.bet skin (brand code "benjamin"), carried over from the Dice pilot:
   vault-black ground with a green cast, dollar-green felt with a walnut rim and
   a brass ring, cream type, gold for money. Selection is dollar green, the bet
   CTA is flat gold with dark text, every amount is gold or cream with the
   dollar sign first. Inter for UI, JetBrains Mono for numbers. Activated by
   app.jsx adding `brand-benjamin` to <html> once the server names the brand;
   everything here is scoped to :root.brand-benjamin, so the other skins are
   untouched. Control sizes, spacing and radii stay the shared Originals ones. */
@font-face {
  font-family: 'Benjamin Inter';
  src: url('fonts/inter-latin-wght-normal.woff2?v=1') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Benjamin Unbounded';
  src: url('fonts/unbounded-latin-wght-normal.woff2?v=1') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'Benjamin Mono';
  src: url('fonts/jetbrains-mono-latin-wght-normal.woff2?v=1') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}
:root.brand-benjamin {
  --bn-ground-0: #0b0d0c;
  --bn-ground-1: #161a18;
  --bn-ground-2: #202522;
  --bn-ground-3: #2a302c;
  --bn-felt: #1F6F4A;
  --bn-s3: #215640;
  --bn-cream: #EDE7D3;
  --bn-ink: #0B1F17;
  --bn-gold: #C9A24A;
  --bn-gold-hover: #D6B260;
  --bn-gold-press: #B48F3C;
  --bn-muted: #a9b1ac;
  --bn-meta: #959d98;
  --bn-line: rgba(237, 231, 211, 0.10);
  --bn-line-2: rgba(237, 231, 211, 0.18);
  --bn-line-3: rgba(237, 231, 211, 0.36);
  --bn-edge-lit: inset 0 1px 0 rgba(237, 231, 211, 0.12), inset 0 0 0 1px rgba(237, 231, 211, 0.06);
  --bn-guilloche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cg fill='none' stroke='%23EDE7D3' stroke-opacity='.045' stroke-width='.7'%3E%3Cpath d='M0 9C20 1 40 1 60 9S100 17 120 9'/%3E%3Cpath d='M0 9C20 17 40 17 60 9S100 1 120 9'/%3E%3C/g%3E%3C/svg%3E");
  --bn-ground-bg:
    radial-gradient(80% 55% at 50% 34%, rgba(31, 111, 74, 0.20) 0%, rgba(11, 13, 12, 0) 70%),
    var(--bn-guilloche),
    #0b0d0c;
  /* Felt cloth for boards and tables: the pilot table's radial cloth, with a
     quiet guilloche of nested ellipses woven in at low contrast. */
  --bn-felt-cloth:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23EDE7D3' stroke-opacity='.07' stroke-width='.8'%3E%3Cellipse cx='200' cy='120' rx='150' ry='64'/%3E%3Cellipse cx='200' cy='120' rx='138' ry='57'/%3E%3Cellipse cx='200' cy='120' rx='126' ry='50' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(120% 140% at 50% 38%, #22774f 0%, #1a5e40 42%, #0f3a27 100%);
  /* Walnut ring, then the brass ring, then the drop. */
  --bn-rim:
    0 0 0 5px #3f2817,
    0 0 0 6px #8a6a24,
    0 0 0 7px rgba(0, 0, 0, 0.55),
    0 22px 48px rgba(0, 0, 0, 0.55);
  --bn-notch:
    radial-gradient(circle at 0 0, transparent 10px, #000 10.5px) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent 10px, #000 10.5px) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent 10px, #000 10.5px) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 10px, #000 10.5px) 100% 100% / 51% 51% no-repeat;
}
/* ===================================================================
   Benjamin skin: Rock Paper Scissors. Everything scoped under
   :root.brand-benjamin so every other brand renders unchanged.
   =================================================================== */
:root.brand-benjamin {
  --panel: var(--bn-ground-1);
  --board: var(--bn-ground-0);
  --card-bg: #0C1A13;
  --card-shadow: rgba(0, 0, 0, 0.45);
  --elevated: var(--bn-ground-2);
  --hairline: var(--bn-line);
  --toggle-bg: var(--bn-ground-1);
  --toggle-border: var(--bn-line-2);
  --input-border: var(--bn-line-2);
  --input-bg-from: var(--bn-ground-2);
  --input-bg-to: var(--bn-ground-2);
  --chip-bg: var(--bn-ground-0);
  --text: var(--bn-cream);
  --text-75: rgba(237, 231, 211, 0.75);
  --text-mid: var(--bn-muted);
  --text-dim: rgba(237, 231, 211, 0.40);
  --text-dimmer: var(--bn-meta);
  --accent: var(--bn-gold);
  --accent-border: rgba(228, 198, 126, 0.45);
  --accent-glow: rgba(228, 198, 126, 0.14);
  --plum: rgba(228, 198, 126, 0.06);
  --plum-2: rgba(228, 198, 126, 0.12);
  --indigo-line: var(--bn-line-2);
  --gold: #E4C67E;
  --gold-bg: rgba(228, 198, 126, 0.16);
  --green: #E4C67E;
  --green-bg: rgba(228, 198, 126, 0.16);
  --red: #B9B2A0;
  --red-bg: rgba(185, 178, 160, 0.10);
  --locked-bg: rgba(5, 22, 14, 0.55);
  --pad-bg: var(--bn-ground-1);
  --pad-border: var(--bn-line-2);
  --pad-shadow: rgba(0, 0, 0, 0.45);
  --pad-blue-border: rgba(228, 198, 126, 0.40);
  --pad-blue-glow: rgba(228, 198, 126, 0.12);
  --pick-blue-border: rgba(228, 198, 126, 0.60);
  --pick-blue-shadow: rgba(228, 198, 126, 0.18);
  --payout-head-bg: var(--bn-ground-2);
  --payout-body-bg: var(--bn-ground-0);
  --green-bright: #E4C67E;
}
:root.brand-benjamin,
:root.brand-benjamin body { background: var(--bn-ground-0); font-family: 'Benjamin Inter', system-ui, sans-serif; }
:root.brand-benjamin .mono,
:root.brand-benjamin .side-balance-value,
:root.brand-benjamin .header-bal-mobile { font-family: 'Benjamin Mono', ui-monospace, monospace; }

/* Scene: dark ground, calm centre, felt table under the ladder. */
:root.brand-benjamin .board { background: var(--bn-ground-bg); }
:root.brand-benjamin .center-line,
:root.brand-benjamin .top-circuit { display: none; }
:root.brand-benjamin .stages-track {
  background: var(--bn-felt-cloth);
  border: 1px solid rgba(228, 198, 126, 0.55);
  border-radius: 20px;
  box-shadow: var(--bn-rim);
  outline: 1px solid rgba(237, 231, 211, 0.16);
  outline-offset: -8px;
  padding-left: 12px;
  padding-right: 12px;
  height: calc(100% - 16px);
  margin-top: 8px;
}
:root.brand-benjamin .player-zone .side-line {
  background: linear-gradient(90deg, transparent 0%, rgba(228, 198, 126, 0.18) 30%, rgba(228, 198, 126, 0.32) 50%, rgba(228, 198, 126, 0.18) 70%, transparent 100%);
}

/* Cards: dark inlay on the felt, brass hairline, wordmark on the dealer back. */
:root.brand-benjamin .card { box-shadow: 0 3px 0 0 var(--card-shadow), inset 0 0 0 1px rgba(237, 231, 211, 0.14); }
:root.brand-benjamin .card::before { background: linear-gradient(180deg, rgba(237, 231, 211, 0.04) 0%, rgba(0, 0, 0, 0.25) 100%); opacity: 1; }
:root.brand-benjamin .card.top.back::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("wordmark-benjamin.svg") center / 64% auto no-repeat;
  z-index: 1;
  pointer-events: none;
  opacity: 0.8;
}
:root.brand-benjamin .card.player.back::after { opacity: 0.4; }
@keyframes bnRpsAwait {
  0%, 100% { box-shadow: 0 3px 0 0 var(--card-shadow), 0 0 0 1px rgba(228, 198, 126, 0.25); }
  50%      { box-shadow: 0 3px 0 0 var(--card-shadow), 0 0 0 2px rgba(228, 198, 126, 0.85); }
}
:root.brand-benjamin .card.awaiting { animation: bnRpsAwait 0.9s ease-in-out infinite; }
:root.brand-benjamin .stage.active .card.top { animation: none; }
:root.brand-benjamin .app.playing .stage.active .card.top { box-shadow: 0 3px 0 0 var(--card-shadow), 0 0 0 2px #E4C67E; }
:root.brand-benjamin .app.playing .stage.active .card.player { box-shadow: 0 3px 0 0 var(--card-shadow), 0 0 0 1px rgba(237, 231, 211, 0.45); }
:root.brand-benjamin .card.win-glow  { box-shadow: 0 3px 0 0 var(--card-shadow), 0 0 0 2px #E4C67E; }
:root.brand-benjamin .card.lose-glow { box-shadow: 0 3px 0 0 var(--card-shadow), 0 0 0 1px rgba(185, 178, 160, 0.55); }
:root.brand-benjamin .card.tie-glow  { box-shadow: 0 3px 0 0 var(--card-shadow), 0 0 0 1px rgba(237, 231, 211, 0.55); }

/* Multipliers are the hero: crisp, never dimmed. */
:root.brand-benjamin .mult {
  opacity: 1;
  border-color: rgba(228, 198, 126, 0.30);
  color: var(--bn-cream);
  font-family: 'Benjamin Mono', ui-monospace, monospace;
  letter-spacing: -0.01em;
}
:root.brand-benjamin .stage.active ~ .stage { opacity: 1; filter: none; }
:root.brand-benjamin .stage.active ~ .stage .card { opacity: 0.5; }
:root.brand-benjamin .stage.active ~ .stage .mult { opacity: 1; color: rgba(237, 231, 211, 0.86); }
:root.brand-benjamin .mult.gold,
:root.brand-benjamin .mult.green { background: var(--bn-ink); border-color: #E4C67E; color: #E4C67E; box-shadow: none; }
:root.brand-benjamin .app.playing .mult.gold { background: var(--bn-ink); border-color: var(--bn-cream); color: var(--bn-cream); }
:root.brand-benjamin .mult.red { background: rgba(185, 178, 160, 0.10); border-color: rgba(185, 178, 160, 0.6); color: #B9B2A0; box-shadow: none; }
:root.brand-benjamin .mult.tie { background: rgba(237, 231, 211, 0.08); border-color: rgba(237, 231, 211, 0.5); color: var(--bn-cream); box-shadow: none; }

/* Pick pad. */
:root.brand-benjamin .pad { background: var(--bn-ground-1); border-color: rgba(228, 198, 126, 0.30); }
:root.brand-benjamin .pick-btn { background: var(--bn-ground-2); }
:root.brand-benjamin .pick-btn::before { background: none; }
:root.brand-benjamin .app.playing .pad { border-color: rgba(228, 198, 126, 0.55); filter: none; }
:root.brand-benjamin .app.playing .pick-btn { border-color: rgba(228, 198, 126, 0.40); box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.45); }
:root.brand-benjamin .pick-btn:hover:not(:disabled) { border-color: #E4C67E; box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.45); }

/* Controls: same boxes and radii, recoloured; notched panel. */
:root.brand-benjamin .desktop-controls { background: var(--bn-ground-1); backdrop-filter: none; border-color: var(--bn-line-2); }
@media (min-width: 861px) {
  :root.brand-benjamin .desktop-controls { -webkit-mask: var(--bn-notch); mask: var(--bn-notch); }
}
:root.brand-benjamin .stake-bet-btn,
:root.brand-benjamin .desktop-controls .stake-bet-btn,
:root.brand-benjamin .place-btn { background: var(--bn-gold); color: var(--bn-ink); box-shadow: none; }
:root.brand-benjamin .stake-bet-btn .stake-bet-label,
:root.brand-benjamin .desktop-controls .stake-bet-label { color: rgba(14, 18, 16, 0.72); }
:root.brand-benjamin .stake-bet-btn .stake-bet-amount,
:root.brand-benjamin .desktop-controls .stake-bet-amount { color: var(--bn-ink); }
:root.brand-benjamin .cashout-btn,
:root.brand-benjamin .cashout-btn.cashout-ready,
:root.brand-benjamin .m-cashout-btn,
:root.brand-benjamin .desktop-controls .d-cashout-btn { background: var(--bn-gold); color: var(--bn-ink); box-shadow: none; animation: none; }
:root.brand-benjamin .desktop-controls .d-cashout-btn:disabled { background: var(--bn-ground-2); color: var(--bn-meta); }
:root.brand-benjamin .auto-open-btn,
:root.brand-benjamin .desktop-controls .auto-open-btn { background: var(--bn-ground-2); border-color: var(--bn-line-2); color: var(--bn-cream); }
:root.brand-benjamin .auto-open-btn:hover,
:root.brand-benjamin .desktop-controls .auto-open-btn:hover { background: var(--bn-s3); border-color: var(--bn-s3); color: var(--bn-cream); }
:root.brand-benjamin .fast-mode-btn.active { background: var(--bn-s3); border-color: var(--bn-s3); color: var(--bn-cream); }
:root.brand-benjamin .auto-chip.selected,
:root.brand-benjamin .auto-pick-chip.selected { background: var(--bn-s3); border-color: var(--bn-s3); color: var(--bn-cream); }
:root.brand-benjamin .bet-balance-amount,
:root.brand-benjamin .stake-bal { color: #E4C67E; }

/* Result badge: ink with a gold ring, gold amount text. */
:root.brand-benjamin .result-badge.win,
:root.brand-benjamin .result-badge.cashout,
:root.brand-benjamin .result-badge.bigwin,
:root.brand-benjamin .result-badge.superbigwin,
:root.brand-benjamin .result-badge.maxwin { background: var(--bn-ink); color: #E4C67E; box-shadow: 0 0 0 1px #E4C67E, 0 10px 30px rgba(0, 0, 0, 0.45); }
:root.brand-benjamin .result-badge.lose { background: var(--bn-ground-2); color: var(--bn-cream); box-shadow: 0 0 0 1px rgba(185, 178, 160, 0.5); }
:root.brand-benjamin .banner-overlay.win .banner-title,
:root.brand-benjamin .banner-overlay.win .banner-amt { color: #E4C67E; }

/* Mobile: the ladder scrolls, so the felt sits on the fixed stage zone. */
@media (max-width: 860px) {
  :root.brand-benjamin .stages-track { background: none; border: 0; box-shadow: none; outline: 0; padding: 0; margin-top: 0; height: 100%; border-radius: 0; }
  :root.brand-benjamin .stages-zone {
    background: var(--bn-felt-cloth);
    border: 1px solid rgba(228, 198, 126, 0.55);
    border-radius: 18px;
    box-shadow: var(--bn-rim);
    outline: 1px solid rgba(237, 231, 211, 0.16);
    outline-offset: -7px;
    margin: 8px 10px;
    width: calc(100% - 20px);
  }
}