/* ============================================================
   Free games family (.mpg- block), first page:
   /online-blackjack/multiplayer-blackjack-game/ (page 5245).
   Consumes tokens.css; chrome vocabulary (.cv2-container, .cv2-btn)
   comes from chrome-legacy.css, .cv2-faq from v2-components.css,
   comment styling (.cv2-comments) from casino-v2.css.

   ARTICLE SHELL (owner decision 2026-07-16): the whole page is one
   centered ~49rem reading column (container = content, so no right
   gap exists); the game frame + share row and the practice cards
   break out wider. This is the sanctioned v2 shape for content-led
   pages; data-led pages keep the wide shell.
   ============================================================ */

/* ---- page base (same reset the other v2 page styles carry; on the
   multiplayer page casino-v2.css loads first and carries the identical
   block, so this is a no-op there) ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--bji-font-sans);
  font-size: var(--bji-text-base);
  line-height: var(--bji-leading-body);
  color: var(--bji-text);
  background: var(--bji-surface-sunken);
}
main img { max-width: 100%; height: auto; }
main a { color: var(--bji-link); }
main a:hover { color: var(--bji-link-hover); }

/* --- article column + breakout --- */
.mpg-col {
  max-width: calc(49rem + 2 * var(--bji-gutter));
  margin-inline: auto;
  padding-inline: var(--bji-gutter);
}
.mpg-breakout {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(66rem, calc(100vw - 2 * var(--bji-gutter)));
}

/* --- section shell --- */
.mpg-section { padding-top: var(--bji-section-gap); }
.mpg-section > .mpg-col > h2 {
  font-size: var(--bji-text-2xl);
  font-weight: var(--bji-weight-bold);
  margin: 0 0 var(--bji-space-2);
}
.mpg-section .mpg-lead {
  margin: 0 0 var(--bji-space-4);
  color: var(--bji-text-muted);
}
.mpg-section:last-of-type { padding-bottom: var(--bji-section-gap); }

/* --- navy hero, slim: the game is the hero, the words just set it up --- */
.mpg-hero {
  background:
    radial-gradient(90rem 30rem at 85% -20%, rgb(6 152 255 / 0.25), transparent 60%),
    linear-gradient(160deg, var(--bji-navy-900), var(--bji-navy-800) 70%);
  color: var(--bji-text-inverse);
  padding: var(--bji-space-6) 0 calc(var(--bji-space-7) + 96px);
}
.mpg-hero .crumbs { font-size: var(--bji-text-xs); color: var(--bji-text-inverse-muted); margin-bottom: var(--bji-space-5); }
.mpg-hero .crumbs a { color: var(--bji-text-inverse-muted); text-decoration: none; }
.mpg-hero .crumbs a:hover { color: #fff; }
.mpg-hero h1 {
  font-size: var(--bji-text-3xl);
  font-weight: var(--bji-weight-black);
  line-height: var(--bji-leading-tight);
  margin: 0 0 var(--bji-space-3);
}
.mpg-hero .sub {
  font-size: var(--bji-text-lg);
  color: var(--bji-text-inverse-muted);
  margin: 0 0 var(--bji-space-4);
}
.mpg-hero .sub b { color: #fff; }
.mpg-chips { display: flex; flex-wrap: wrap; gap: var(--bji-space-2); margin: 0; padding: 0; list-style: none; }
.mpg-chips li {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-inverse);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--bji-radius-pill);
  padding: 5px 12px;
}
.mpg-chips b { color: #3ddc84; }

/* --- the game stage: frame overlaps out of the navy into the page --- */
.mpg-stage { margin-top: -96px; }
.mpg-frame {
  position: relative;
  background: #0a2c22; /* felt green: no white flash while the game loads */
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--bji-radius-xl);
  box-shadow: var(--bji-shadow-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.mpg-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mpg-under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bji-space-2) var(--bji-space-4);
  margin-top: var(--bji-space-3);
  font-size: var(--bji-text-sm);
  color: var(--bji-text-muted);
}
.mpg-under .live { display: inline-flex; align-items: center; gap: 8px; }
.mpg-under .live .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bji-green-500);
  box-shadow: 0 0 0 3px rgb(31 162 84 / 0.2);
}

/* --- social share row (brand colors, Reddit first; owner calls) --- */
.mpg-share {
  display: inline-flex;
  align-items: center;
  gap: var(--bji-space-2);
  font-size: var(--bji-text-sm);
  color: var(--bji-text-muted);
}
.mpg-share a, .mpg-share button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  color: #fff;
  cursor: pointer;
  transition: transform var(--bji-duration-fast) var(--bji-ease), filter var(--bji-duration-fast) var(--bji-ease);
}
.mpg-share a:hover, .mpg-share button:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); }
.mpg-share svg { width: 17px; height: 17px; display: block; }
.mpg-share .is-reddit { background: #ff4500; }
.mpg-share .is-facebook { background: #1877f2; }
.mpg-share .is-x { background: #0f1419; }
.mpg-share .is-whatsapp { background: #25d366; }
.mpg-share .is-copy { background: var(--bji-navy-800); font: inherit; }
/* the display:grid above would beat the UA [hidden] rule (ldh gotcha):
   the copy button must stay gone until free-games.js reveals it */
.mpg-share [hidden] { display: none; }

/* legacy-behavior mobile state, kept on purpose: searchers landing here
   from a phone SERP get the game full screen instantly. GOTCHA: the
   breakout's transform would trap position:fixed (a transformed ancestor
   becomes the containing block), so it must go static FIRST.
   Scoped to body.mpg-has-game (body_class filter on the multiplayer
   page): this sheet is the free-games FAMILY sheet, and an unscoped
   body{overflow:hidden} would lock scrolling on every other page. */
@media (max-width: 820px) {
  .mpg-has-game .mpg-breakout { position: static; left: auto; transform: none; width: auto; }
  .mpg-has-game .mpg-frame {
    position: fixed;
    inset: 0;
    z-index: 999;
    height: 100dvh;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
  }
  body.mpg-has-game { overflow: hidden; }
}

/* --- rules grid --- */
.mpg-rules { margin: var(--bji-space-4) 0 0; border-top: 2px solid var(--bji-navy-900); }
.mpg-rules .row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--bji-space-4);
  padding: var(--bji-space-3) 0;
  border-bottom: 1px solid var(--bji-border);
  font-size: var(--bji-text-sm);
}
@media (max-width: 560px) { .mpg-rules .row { grid-template-columns: 1fr; gap: 2px; } }
.mpg-rules dt { margin: 0; font-weight: var(--bji-weight-semibold); color: var(--bji-text-muted); }
.mpg-rules dd { margin: 0; }
.mpg-rules dd b { font-weight: var(--bji-weight-semibold); }
.mpg-rules dd b.good { color: var(--bji-green-700); }

/* --- numbered how-to steps --- */
.mpg-steps { list-style: none; margin: var(--bji-space-4) 0 0; padding: 0; display: grid; gap: var(--bji-space-3); counter-reset: step; }
.mpg-steps li {
  counter-increment: step;
  position: relative;
  padding: var(--bji-space-4) var(--bji-space-5) var(--bji-space-4) 64px;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
}
.mpg-steps li::before {
  content: counter(step);
  position: absolute;
  left: var(--bji-space-4);
  top: var(--bji-space-4);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bji-navy-900);
  color: #fff;
  font-weight: var(--bji-weight-bold);
  display: grid;
  place-items: center;
}
.mpg-steps b { display: block; margin-bottom: 2px; }
.mpg-steps p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }

/* --- keyboard shortcuts --- */
.mpg-kbd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bji-space-2) var(--bji-space-4); margin: var(--bji-space-4) 0 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.mpg-kbd kbd {
  font-family: var(--bji-font-mono);
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-navy-900);
  background: var(--bji-gray-050);
  border: 1px solid var(--bji-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--bji-radius-sm);
  padding: 2px 7px;
}

/* --- practice bridge cards (break out beside the column) --- */
.mpg-bridges { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--bji-space-4); margin-top: var(--bji-space-4); }
.mpg-bridge {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bji-space-2);
}
.mpg-bridge .thumb {
  display: block;
  margin: calc(-1 * var(--bji-space-5)) calc(-1 * var(--bji-space-5)) var(--bji-space-1);
  border-radius: calc(var(--bji-radius-md) - 1px) calc(var(--bji-radius-md) - 1px) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bji-gray-100);
}
.mpg-bridge .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--bji-duration) var(--bji-ease);
}
.mpg-bridge .thumb:hover img { transform: scale(1.04); }
.mpg-bridge .eyebrow {
  font-size: 0.66rem;
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bji-blue-600);
}
.mpg-bridge h3 { margin: 0; font-size: var(--bji-text-lg); line-height: var(--bji-leading-snug); }
.mpg-bridge p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.mpg-bridge .go { margin-top: auto; padding-top: var(--bji-space-3); }

/* --- play responsibly band --- */
.mpg-rg {
  border-left: 4px solid var(--bji-amber-500);
  background: var(--bji-amber-100);
  border-radius: var(--bji-radius-sm);
  padding: var(--bji-space-3) var(--bji-space-4);
  margin: var(--bji-space-3) 0 0;
  font-size: var(--bji-text-sm);
  color: var(--bji-gray-800);
}
.mpg-rg b { color: var(--bji-gray-900); }

/* --- FAQ spacing (definition ships in v2-components.css) --- */
.mpg-section .cv2-faq { margin-top: var(--bji-space-4); }

/* --- free games hub: the bridge cards ride the stage overlap --- */
.mpg-stage .mpg-bridges { margin-top: 0; }

/* ============================================================
   Free Live Blackjack page (/live-dealer-blackjack/free/, page 8526):
   .flb- vocabulary on top of the shared .mpg- article shell.
   Design reference: mockups/free-games-v2/live-free.html.
   ============================================================ */

/* the stage frame holds a live-casino stream, not our felt table:
   studio navy instead of felt green while it loads */
.mpg-frame.flb-frame { background: #0a1626; }

/* --- fullscreen control (legacy iframe_ad_overlay behavior, v2 clothes):
   JS-gated button, fullscreens the frame container --- */
.flb-fs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 6px 14px;
  font: inherit;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-800);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-pill);
  cursor: pointer;
  transition: border-color var(--bji-duration-fast) var(--bji-ease), color var(--bji-duration-fast) var(--bji-ease);
}
.flb-fs:hover { border-color: var(--bji-blue-500); color: var(--bji-blue-600); }
.flb-fs svg { width: 16px; height: 16px; fill: currentColor; }
.mpg-frame:fullscreen, .flb-frame2:fullscreen { aspect-ratio: auto; border: 0; border-radius: 0; }
.mpg-frame:-webkit-full-screen, .flb-frame2:-webkit-full-screen { aspect-ratio: auto; border: 0; border-radius: 0; }

/* --- the three-pieces ledger --- */
.flb-pieces { margin: var(--bji-space-4) 0 0; border-top: 2px solid var(--bji-navy-900); }
.flb-pieces .row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--bji-space-4);
  padding: var(--bji-space-3) 0;
  border-bottom: 1px solid var(--bji-border);
  font-size: var(--bji-text-sm);
}
@media (max-width: 560px) { .flb-pieces .row { grid-template-columns: 1fr; gap: 2px; } }
.flb-pieces dt { margin: 0; font-weight: var(--bji-weight-semibold); color: var(--bji-text-muted); }
.flb-pieces dd { margin: 0; }
.flb-pieces dd b { font-weight: var(--bji-weight-semibold); }

/* --- secondary game frame (Vivo lobby, non-US only), inline always:
   deliberately NOT .mpg-frame so the mobile hijack never grabs it --- */
.flb-frame2 {
  position: relative;
  background: #0a1626;
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-xl);
  box-shadow: var(--bji-shadow-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-top: var(--bji-space-4);
}
.flb-frame2 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.flb-frame2 + .note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bji-space-2) var(--bji-space-4);
  margin-top: var(--bji-space-3);
  font-size: var(--bji-text-sm);
  color: var(--bji-text-muted);
}
.flb-frame2 + .note p { margin: 0; }

/* --- video pair (real live-table footage), thumbnail facades --- */
.flb-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--bji-space-4); margin-top: var(--bji-space-4); }
.flb-video { margin: 0; }
.flb-video .shell {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a1626;
  border-radius: var(--bji-radius-md);
  overflow: hidden;
  box-shadow: var(--bji-shadow-md);
}
.flb-video .shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.flb-video figcaption { margin-top: var(--bji-space-2); font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.flb-video .facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.flb-video .facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flb-video .facade .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border-radius: 12px;
  background: rgb(10 22 38 / 0.82);
  display: grid;
  place-items: center;
  transition: background var(--bji-duration-fast) var(--bji-ease);
}
.flb-video .facade:hover .play { background: #f00; }
.flb-video .facade .play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.flb-after { margin: var(--bji-space-4) 0 0; }

/* --- where to play: the live-game hub casino cards, copied verbatim
   from live-game.css (that sheet does not load here); extracting the
   lg-casino vocabulary into v2-components.css is a 1.5 candidate --- */
.lg-geo-note { font-size: var(--bji-text-xs); color: var(--bji-text-faint); margin: 0 0 var(--bji-space-4); }
.lg-casino-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--bji-space-4);
}
.lg-casino-card {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--bji-space-2);
}
.lg-casino-card .logo {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bji-navy-900);
  border-radius: var(--bji-radius-sm);
  color: #fff;
  font-weight: var(--bji-weight-bold);
  font-size: var(--bji-text-lg);
  letter-spacing: 0.02em;
  overflow: hidden;
}
.lg-casino-card .logo img {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
}
.lg-casino-card h3 { margin: 0; font-size: var(--bji-text-base); }
.lg-casino-card h3 a { color: var(--bji-navy-800); text-decoration: none; }
.lg-casino-card h3 a:hover { color: var(--bji-blue-600); }
.lg-casino-card .rating { font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold); color: var(--bji-text-muted); }
.lg-casino-card .rating b { color: var(--bji-navy-900); font-size: var(--bji-text-sm); }
.lg-casino-card .bonus { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text); min-height: 2.6em; }
.lg-casino-card .bonus span { display: block; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.lg-casino-card .cv2-btn { margin-top: auto; }

/* ============================================================
   Blackjack Strategy Trainer page
   (/blackjackinfo-blackjack-strategy-trainer/, page 3173):
   .bjt- vocabulary on the shared .mpg- article shell. The trainer is
   the plugin-mounted app (div#blackjack-trainer), not an iframe: it
   sizes its own height (min-height:100vh table) and has its own
   fullscreen button, so no aspect-ratio frame and no mobile pin.
   ============================================================ */

/* the app in a framed breakout; bg matches the app's own #0f1a0d so
   nothing flashes while the bundle loads */
.bjt-frame {
  position: relative;
  background: #0f1a0d;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--bji-radius-xl);
  box-shadow: var(--bji-shadow-lg);
  overflow: hidden;
}
.bjt-under { display: block; }
.bjt-under p { margin: 0; }
.bjt-under img { vertical-align: middle; }

/* GOTCHA: the app's settings overlay goes position:fixed under 480px,
   and the breakout's transform would trap it (transformed ancestor =
   containing block), so the breakout goes static below 820px and the
   frame runs full-bleed instead */
@media (max-width: 820px) {
  .bjt-stage { position: static; left: auto; transform: none; width: auto; margin-inline: calc(-1 * var(--bji-gutter)); }
  .bjt-frame { border-radius: 0; border-inline: 0; }
  .bjt-under { padding-inline: var(--bji-gutter); }
}

/* older-version note under the stage */
.bjt-note {
  margin-top: var(--bji-space-4);
  border-left: 4px solid var(--bji-blue-500);
  background: #eef6ff;
  border-radius: var(--bji-radius-sm);
  padding: var(--bji-space-3) var(--bji-space-4);
  font-size: var(--bji-text-sm);
  color: var(--bji-gray-800);
}

/* article prose (h2 comes from the .mpg-section shell) */
.bjt-prose p { margin: 0 0 var(--bji-space-3); }
.bjt-prose p img { vertical-align: middle; }
.bjt-prose h3 {
  font-size: var(--bji-text-lg);
  font-weight: var(--bji-weight-bold);
  margin: var(--bji-space-5) 0 var(--bji-space-2);
}
.bjt-prose ul { margin: 0 0 var(--bji-space-3); padding-left: 1.35rem; }
.bjt-prose li { margin-bottom: 4px; }

/* --- callouts --- */
.flb-note {
  margin-top: var(--bji-space-4);
  border-left: 4px solid var(--bji-blue-500);
  background: #eef6ff;
  border-radius: var(--bji-radius-sm);
  padding: var(--bji-space-3) var(--bji-space-4);
  font-size: var(--bji-text-sm);
  color: var(--bji-gray-800);
}
.flb-rg { margin-top: var(--bji-space-3); }

/* --- Blackjack variation singles (variations rebuild 2026-07) ---
   Demo stage rides .mpg-frame; .bjv-frame is deliberately NOT given
   the mobile hijack (no mpg-has-game body class on variation singles),
   so the demo stays inline on phones. */
.mpg-frame.bjv-frame { background: #0a1626; }
/* The stage's -96px pull-up was designed for the deeper .mpg-hero; give
   the av2 hero matching depth when a demo stage follows so the frame
   rides the navy without covering the hero text. */
.av2-hero.bjv-hero-stage { padding-bottom: calc(var(--bji-space-7) + 96px); }
.bjv-more { margin-top: var(--bji-space-7); padding-top: var(--bji-space-5); border-top: 1px solid var(--bji-border); }
.bjv-more h2 { font-size: var(--bji-text-2xl); font-weight: var(--bji-weight-black); margin: 0 0 var(--bji-space-3); }
.bjv-more h3 {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bji-text-muted);
  margin: var(--bji-space-4) 0 var(--bji-space-2);
}
.bjv-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bji-space-2); }
.bjv-pills a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-pill);
  background: var(--bji-surface);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-secondary);
  text-decoration: none;
  transition: border-color var(--bji-duration-fast) var(--bji-ease), color var(--bji-duration-fast) var(--bji-ease);
}
.bjv-pills a:hover { border-color: var(--bji-blue-500); color: var(--bji-blue-700); }

/* --- BlackjackInfo practice simulator (.bjvs-, variations 1.BV) ---
   Own two-deck practice game on format-type variation pages; replaces
   provider embeds. Markup in single-blackjack_variation.php, logic in
   js/bjv-sim.js (math verified by scripts/bjv_sim_verify.js). */
.bjvs-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: var(--bji-space-3);
  align-items: stretch;
}
@media (max-width: 860px) { .bjvs-stage { grid-template-columns: 1fr; } }
.bjvs-table {
  position: relative;
  background:
    radial-gradient(60rem 26rem at 50% -30%, rgb(255 255 255 / 0.08), transparent 60%),
    linear-gradient(170deg, #0e3a2c, #0a2c22 70%);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--bji-radius-xl);
  box-shadow: var(--bji-shadow-lg);
  color: #eaf4ee;
  padding: var(--bji-space-4);
  min-height: 24rem;
  display: flex;
  flex-direction: column;
}
.bjvs-table .rules-line {
  font-size: var(--bji-text-xs);
  letter-spacing: .02em;
  color: rgb(234 244 238 / 0.66);
  text-align: center;
  margin: 0 0 var(--bji-space-3);
}
.bjvs-table .rules-line b { color: #eaf4ee; font-weight: var(--bji-weight-semibold); }
.bjvs-handrow { min-height: 6.6rem; text-align: center; }
.bjvs-handrow .who {
  font-size: var(--bji-text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgb(234 244 238 / 0.55);
  margin-bottom: 6px;
}
.bjvs-handrow .who .tot {
  display: inline-block;
  min-width: 1.9em;
  margin-left: .5em;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  font-weight: var(--bji-weight-bold);
  letter-spacing: 0;
}
.bjvs-cards { display: flex; justify-content: center; gap: 6px; min-height: 5.4rem; flex-wrap: wrap; }
.bjvs-card {
  width: 3.6rem;
  height: 5.2rem;
  border-radius: 8px;
  background: #fff;
  color: var(--bji-gray-900);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 7px;
  font-weight: var(--bji-weight-bold);
  font-size: var(--bji-text-lg);
  line-height: 1;
  animation: bjvs-deal .25s ease-out;
}
@keyframes bjvs-deal { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.bjvs-card .suit { align-self: flex-end; font-size: var(--bji-text-xl); }
.bjvs-card.red { color: #c22a2a; }
.bjvs-card.back {
  background: repeating-linear-gradient(45deg, #1c2b57, #1c2b57 6px, #24356b 6px, #24356b 12px);
  border: 3px solid #fff;
}
.bjvs-hand { display: inline-block; margin: 0 10px; }
.bjvs-hand.inactive { opacity: .55; }
.bjvs-hand .bet-tag { font-size: var(--bji-text-xs); color: rgb(234 244 238 / 0.66); margin-top: 4px; }
.bjvs-msg {
  text-align: center;
  min-height: 1.6em;
  margin: var(--bji-space-2) 0;
  font-weight: var(--bji-weight-semibold);
  color: #ffd97a;
}
.bjvs-msg.win { color: #7ce3a1; }
.bjvs-msg.lose { color: #ff9d9d; }
.bjvs-controls { margin-top: auto; text-align: center; }
.bjvs-controls .row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: var(--bji-space-2); }
.bjvs-btn {
  font: inherit;
  font-weight: var(--bji-weight-bold);
  font-size: var(--bji-text-sm);
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(255 255 255 / 0.10);
  color: #fff;
  cursor: pointer;
}
.bjvs-btn:hover:not(:disabled) { background: rgb(255 255 255 / 0.2); }
.bjvs-btn:disabled { opacity: .35; cursor: default; }
.bjvs-btn.primary { background: var(--bji-green-500); border-color: var(--bji-green-500); }
.bjvs-btn.primary:hover:not(:disabled) { background: var(--bji-green-600); }
.bjvs-chip {
  font: inherit; font-weight: var(--bji-weight-bold); font-size: var(--bji-text-xs);
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  border: 4px dashed rgb(255 255 255 / 0.85);
  cursor: pointer; color: #fff;
}
.bjvs-chip.c5 { background: #b03a3a; }
.bjvs-chip.c25 { background: #178546; }
.bjvs-chip.c100 { background: #24356b; }
.bjvs-chip[aria-pressed="true"] { outline: 3px solid #ffd97a; outline-offset: 2px; }
.bjvs-bankline { font-size: var(--bji-text-sm); color: rgb(234 244 238 / 0.8); margin-top: var(--bji-space-3); }
.bjvs-bankline b { color: #fff; }
.bjvs-rail { display: flex; flex-direction: column; gap: var(--bji-space-3); }
.bjvs-railcard {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-sm);
  padding: var(--bji-space-3) var(--bji-space-4);
}
.bjvs-railcard h3 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-sm); font-weight: var(--bji-weight-bold); }
.bjvs-railcard p.note { font-size: var(--bji-text-xs); color: var(--bji-text-muted); margin: var(--bji-space-2) 0 0; }
.bjvs-shoe-meter { height: 10px; border-radius: 999px; background: var(--bji-gray-100); position: relative; overflow: hidden; }
.bjvs-shoe-meter .fill { position: absolute; inset: 0 auto 0 0; background: var(--bji-blue-500); border-radius: 999px; width: 100%; transition: width .3s; }
.bjvs-shoe-meter .cut { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 3px; background: var(--bji-amber-500); border-radius: 2px; }
.bjvs-shoe-line { display: flex; justify-content: space-between; font-size: var(--bji-text-xs); color: var(--bji-text-muted); margin-top: 6px; }
.bjvs-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--bji-space-2); }
.bjvs-toggle label { font-size: var(--bji-text-sm); font-weight: var(--bji-weight-bold); }
.bjvs-switch { position: relative; width: 42px; height: 24px; flex: none; }
.bjvs-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bjvs-switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--bji-gray-300); transition: background .15s; pointer-events: none; }
.bjvs-switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.bjvs-switch input:checked + .track { background: var(--bji-green-500); }
.bjvs-switch input:checked + .track::after { left: 21px; }
.bjvs-coach-body { margin-top: var(--bji-space-2); }
.bjvs-coach-body[hidden] { display: none; }
.bjvs-count-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bji-space-2); }
.bjvs-stat { background: var(--bji-gray-050); border-radius: var(--bji-radius-md); padding: 8px 10px; }
.bjvs-stat .k { font-size: var(--bji-text-xs); color: var(--bji-text-muted); }
.bjvs-stat .v { font-size: var(--bji-text-xl); font-weight: var(--bji-weight-black); font-variant-numeric: tabular-nums; }
.bjvs-book-verdict { font-size: var(--bji-text-sm); min-height: 2.4em; margin: 0 0 var(--bji-space-1); }
.bjvs-book-verdict b.good { color: var(--bji-green-600); }
.bjvs-book-verdict b.bad { color: var(--bji-red-500); }
.bjvs-acc { font-size: var(--bji-text-xs); color: var(--bji-text-muted); margin: 0; }

/* --- /blackjack-variations/ hub (.bjvh-, variations 1.BV) --- */
.bjvh-group { margin-top: var(--bji-space-7); }
.bjvh-group h2 { font-size: var(--bji-text-2xl); font-weight: var(--bji-weight-black); margin: 0 0 var(--bji-space-2); }
.bjvh-lead { color: var(--bji-text-secondary); margin: 0 0 var(--bji-space-4); max-width: 62ch; }
.bjvh-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bji-space-3); }
@media (max-width: 640px) { .bjvh-grid { grid-template-columns: 1fr; } }
.bjvh-card {
  display: flex;
  flex-direction: column;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--bji-duration-fast) var(--bji-ease), transform var(--bji-duration-fast) var(--bji-ease);
}
.bjvh-card:hover { box-shadow: var(--bji-shadow-md); transform: translateY(-2px); }
/* screenshot of the game the page actually shows */
.bjvh-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--bji-navy-900);
  overflow: hidden;
}
.bjvh-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bjvh-body { padding: var(--bji-space-4); }
.bjvh-card h3 { margin: 0; font-size: var(--bji-text-md); font-weight: var(--bji-weight-bold); }
.bjvh-card h3 a { text-decoration: none; }
.bjvh-card h3 a:hover { text-decoration: underline; }
.bjvh-badge {
  position: absolute;
  left: var(--bji-space-3);
  bottom: var(--bji-space-3);
  padding: 3px 10px;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-green-500);
  color: #fff;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
}
.bjvh-badge.is-inline {
  position: static;
  display: inline-block;
  margin-top: var(--bji-space-2);
  background: var(--bji-green-100);
  color: var(--bji-green-700);
  box-shadow: none;
}
.bjvh-card p { margin: var(--bji-space-2) 0 0; font-size: var(--bji-text-sm); color: var(--bji-text-secondary); }
.bjvh-more {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bji-text-muted);
  margin: var(--bji-space-4) 0 var(--bji-space-2);
}
.bjvs-sideline {
  font-size: var(--bji-text-sm);
  color: rgb(234 244 238 / 0.85);
  margin: var(--bji-space-3) 0 0;
}
.bjvs-sideline label { cursor: pointer; }
.bjvs-sideline input { margin-right: 6px; vertical-align: -1px; }
.bjvs-sideline #bjvsSideNote { color: #ffd97a; margin-left: 8px; }
/* One rail card only: stack it under the table rather than leaving a
   tall table beside a small floating card. */
.bjvs-stage.is-lean { grid-template-columns: 1fr; }
.bjvs-stage.is-lean .bjvs-rail { flex-direction: row; }
.bjvs-stage.is-lean .bjvs-railcard { flex: 1; }

/* multi-hand: the live hand must be unmistakable, and each hand carries
   its own total so a bust is attributed to the right box */
.bjvs-hand.is-live { position: relative; }
.bjvs-hand.is-live::before {
  content: "";
  position: absolute;
  inset: -10px -8px 4px;
  border: 2px solid #ffd97a;
  border-radius: var(--bji-radius-md);
  pointer-events: none;
}
.bjvs-hand .hand-total { font-size: var(--bji-text-sm); font-weight: var(--bji-weight-bold); color: #fff; margin-top: 4px; }
.bjvs-hand.is-live .playing-flag { font-size: var(--bji-text-xs); font-weight: var(--bji-weight-bold); color: #ffd97a; margin-top: 2px; }
/* betting boxes between rounds */
.bjvs-box {
  font: inherit;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 5.2rem;
  height: 5.2rem;
  margin: 0 6px;
  border-radius: var(--bji-radius-md);
  border: 2px dashed rgb(255 255 255 / 0.35);
  background: rgb(255 255 255 / 0.05);
  color: rgb(234 244 238 / 0.7);
  cursor: pointer;
}
.bjvs-box:hover { border-color: rgb(255 255 255 / 0.6); }
.bjvs-box.has-bet { border-style: solid; border-color: #ffd97a; background: rgb(255 217 122 / 0.12); color: #fff; }
.bjvs-box .amt { font-size: var(--bji-text-md); font-weight: var(--bji-weight-bold); }
.bjvs-box .lbl { font-size: var(--bji-text-xs); opacity: .75; }

/* betting box: click adds the selected chip, the corner x clears the box */
.bjvs-boxwrap { position: relative; display: inline-block; margin: 0 6px; }
.bjvs-boxwrap .bjvs-box { margin: 0; }
.bjvs-boxclear {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.35);
  background: var(--bji-navy-900);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.bjvs-boxclear:hover { background: var(--bji-red-500); border-color: var(--bji-red-500); }
/* per-hand verdict, so the message need not repeat every hand */
.bjvs-hand .hand-result {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  margin-top: 3px;
  text-transform: lowercase;
}
.bjvs-hand .hand-result.is-win { color: #7ce3a1; }
.bjvs-hand .hand-result.is-lose { color: #ff9d9d; }
.bjvs-hand .hand-result.is-push { color: #ffd97a; }
.bjvs-boxes { text-align: center; min-height: 0; }
.bjvs-boxes:not(:empty) { margin-bottom: var(--bji-space-3); }
.bjvs-boxes:not(:empty) { margin: var(--bji-space-3) 0 0; }

/* provider demo that will not load (region lock, blocked host) */
/* display:flex beats the UA [hidden] rule, which silently painted this
   panel over a perfectly working game. Same gotcha as .mpg-share above. */
.bjv-unavailable[hidden] { display: none; }
.bjv-unavailable {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bji-space-2);
  padding: var(--bji-space-5);
  text-align: center;
  background: linear-gradient(170deg, #0e3a2c, #0a2c22 70%);
  color: #eaf4ee;
}
.bjv-unavailable h3 { margin: 0; font-size: var(--bji-text-lg); font-weight: var(--bji-weight-bold); color: #fff; }
.bjv-unavailable p { margin: 0; font-size: var(--bji-text-sm); color: rgb(234 244 238 / 0.82); max-width: 46rem; margin-inline: auto; }
.bjv-unavailable a { color: #ffd97a; }
.bjv-unavailable .direct { font-size: var(--bji-text-xs); color: rgb(234 244 238 / 0.6); }
.bjv-embed-help {
  font: inherit;
  font-size: var(--bji-text-sm);
  color: var(--bji-link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.bjv-embed-help:hover { color: var(--bji-link-hover); }