/* ============================================================
   Live blackjack game single (v2) - .lg- vocabulary.
   Stack: tokens.css + chrome-legacy.css (chrome, .cv2-container,
   .cv2-btn) + v2-components.css (.cv2-toc, .cv2-faq) + bse-charts.css
   (strategy chart vocabulary) + this file.
   Mirrors mockups/live-game-v2/ (approved rounds 1-5).
   ============================================================ */

/* ---- page base (same reset the other v2 page styles carry) ---- */
*, *::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);
}
.lg-page img { max-width: 100%; height: auto; }

/* ============ hero: title + scorecard left, video right ============ */
.lg-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 var(--bji-space-7);
}
.lg-hero .crumbs {
  font-size: var(--bji-text-xs);
  color: var(--bji-text-inverse-muted);
  margin-bottom: var(--bji-space-5);
}
.lg-hero .crumbs a { color: var(--bji-text-inverse-muted); text-decoration: none; }
.lg-hero .crumbs a:hover { color: #fff; }
.lg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--bji-space-7);
  align-items: center;
}
@media (max-width: 900px) { .lg-hero-grid { grid-template-columns: 1fr; gap: var(--bji-space-5); } }
.lg-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-1);
}
.lg-hero .provider {
  font-size: var(--bji-text-sm);
  color: var(--bji-text-inverse-muted);
  margin: 0 0 var(--bji-space-3);
}
.lg-hero .provider a {
  color: #fff;
  font-weight: var(--bji-weight-semibold);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
}
.lg-hero .provider a:hover { border-bottom-color: #fff; }
.lg-hero .tagline {
  font-size: var(--bji-text-lg);
  color: var(--bji-text-inverse-muted);
  margin: 0 0 var(--bji-space-4);
}

/* rule scorecard: every core rule as a verdict chip */
.lg-scorecard {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-2);
  margin: 0 0 var(--bji-space-5);
  padding: 0;
  list-style: none;
}
.lg-scorecard li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  border-radius: var(--bji-radius-pill);
  padding: 5px 12px;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.18);
  color: var(--bji-text-inverse);
}
.lg-scorecard .m {
  font-style: normal;
  font-weight: var(--bji-weight-bold);
  font-size: 0.72rem;
}
.lg-scorecard .is-good { border-color: rgb(61 220 132 / 0.55); }
.lg-scorecard .is-good .m { color: #3ddc84; }
.lg-scorecard .is-bad { border-color: rgb(255 107 107 / 0.55); }
.lg-scorecard .is-bad .m { color: #ff6b6b; }
.lg-scorecard .is-neutral .m { color: var(--bji-text-inverse-muted); }

.lg-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--bji-space-3); align-items: center; }
.lg-hero-ctas .sub {
  flex-basis: 100%;
  font-size: var(--bji-text-xs);
  color: var(--bji-text-inverse-muted);
}
.lg-video {
  border-radius: var(--bji-radius-lg);
  overflow: hidden;
  box-shadow: var(--bji-shadow-lg);
  aspect-ratio: 16 / 9;
  background: var(--bji-navy-950);
}
.lg-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.lg-video .lg-video-still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the cover-crop to the TOP of the frame. The featured stills are
     dealer photos (mostly square/portrait, taller than this 16:9 box), so a
     default center crop sliced the dealer's head off. center top keeps the
     face in frame and crops the felt at the bottom instead - the same fix
     the dossier stills already use (.ldh-cas .media img.shot). No-op for the
     handful of true-16:9 stills. */
  object-position: center top;
}
.lg-video .lg-video-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bji-space-2);
  color: var(--bji-text-inverse-muted);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
}

/* ============ stat band: the four numbers that answer the search ============ */
/* bottom margin carries the gap to the TOC; the shared .cv2-toc itself is
   flush so hub pages (hero -> TOC directly) have no stray gap */
.lg-statband {
  margin-top: calc(-1 * var(--bji-space-5));
  margin-bottom: var(--bji-space-6);
}
.lg-statband .inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bji-space-4);
}
@media (max-width: 900px) { .lg-statband .inner { grid-template-columns: repeat(2, 1fr); } }
.lg-stat {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  box-shadow: var(--bji-shadow-md);
  padding: var(--bji-space-4) var(--bji-space-5);
}
.lg-stat .k {
  display: block;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bji-text-muted);
  margin-bottom: 2px;
}
.lg-stat .v {
  display: block;
  font-size: var(--bji-text-2xl);
  font-weight: var(--bji-weight-black);
  color: var(--bji-navy-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.lg-stat .v.bad { color: var(--bji-red-600, #c23a3a); }
.lg-stat .note { display: block; font-size: var(--bji-text-xs); color: var(--bji-text-faint); margin-top: 2px; }

/* tiny house-edge scale inside the first stat */
.lg-edge-scale { margin-top: var(--bji-space-2); }
.lg-edge-scale .bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bji-green-500), var(--bji-amber-500) 55%, var(--bji-red-500));
}
.lg-edge-scale .dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bji-navy-900);
  transform: translate(-50%, -50%);
}
.lg-edge-scale .ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--bji-text-faint);
  margin-top: 3px;
}


/* ============ shared section shell ============ */
.lg-section { padding-top: var(--bji-section-gap); }
.lg-section > .cv2-container > h2 {
  font-size: var(--bji-text-2xl);
  font-weight: var(--bji-weight-bold);
  margin: 0 0 var(--bji-space-2);
}
.lg-section .lead {
  margin: 0 0 var(--bji-space-4);
  color: var(--bji-text-muted);
  max-width: 52rem;
}
/* Exception: the legality panel's intro sits directly above the full-width
   .usst-law table (live-dealer country pages, shared by GB + AU). Capping it
   to the 52rem readable measure while the table below runs the full container
   reads as a broken indent, so this lead runs the full container to align with
   the table. Scoped to .lg-section#legal so the studios / live-vs-online leads
   keep their readable measure and the country-hub .och-legal is unaffected. */
.lg-section#legal .lead { max-width: none; }
.lg-section:last-of-type { padding-bottom: var(--bji-section-gap); }

/* ============ verdict: play it if / skip it if / variance ============ */
.lg-verdict-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bji-space-4);
}
@media (max-width: 900px) { .lg-verdict-grid { grid-template-columns: 1fr; } }
.lg-verdict-card {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-5);
}
.lg-verdict-card.play { border-top: 4px solid var(--bji-green-500); }
.lg-verdict-card.skip { border-top: 4px solid var(--bji-red-500); }
.lg-verdict-card.variance { border-top: 4px solid var(--bji-amber-500); }
.lg-verdict-card h3 { margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-base); }
.lg-verdict-card ul { margin: 0; padding: 0; list-style: none; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.lg-verdict-card li { position: relative; padding-left: 1.5em; margin-bottom: var(--bji-space-2); }
.lg-verdict-card li:last-child { margin-bottom: 0; }
.lg-verdict-card.play li::before { content: "\2713"; position: absolute; left: 0; color: var(--bji-green-500); font-weight: var(--bji-weight-bold); }
.lg-verdict-card.skip li::before { content: "\2717"; position: absolute; left: 0; color: var(--bji-red-500); font-weight: var(--bji-weight-bold); }

/* variance meter: all three level colors always show (owner call
   2026-07-11, supersedes the progressive fill); the ACTIVE segment is
   the needle, taller with a ring, and its label is bolded/colored. */
.lg-meter { margin-bottom: var(--bji-space-3); }
.lg-meter .segs { display: flex; gap: 4px; align-items: center; height: 16px; }
.lg-meter .segs i {
  flex: 1;
  height: 10px;
  border-radius: 3px;
}
.lg-meter .segs i:nth-child(1) { background: var(--bji-green-500); }
.lg-meter .segs i:nth-child(2) { background: var(--bji-amber-500); }
.lg-meter .segs i:nth-child(3) { background: var(--bji-red-500); }
.lg-meter.is-low .segs i:nth-child(1),
.lg-meter.is-medium .segs i:nth-child(2),
.lg-meter.is-high .segs i:nth-child(3) {
  height: 16px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--bji-surface), 0 0 0 4px currentColor;
}
.lg-meter.is-low .segs i:nth-child(1) { color: rgb(31 162 84 / 0.45); }
.lg-meter.is-medium .segs i:nth-child(2) { color: rgb(232 168 34 / 0.5); }
.lg-meter.is-high .segs i:nth-child(3) { color: rgb(220 60 60 / 0.45); }
.lg-meter .labels {
  display: flex;
  font-size: 0.62rem;
  color: var(--bji-text-faint);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lg-meter .labels span { flex: 1; text-align: center; }
.lg-meter.is-low .labels span:nth-child(1),
.lg-meter.is-medium .labels span:nth-child(2),
.lg-meter.is-high .labels span:nth-child(3) { font-weight: var(--bji-weight-bold); }
.lg-meter.is-high .labels span:nth-child(3) { color: var(--bji-red-600, #c23a3a); }
.lg-meter.is-medium .labels span:nth-child(2) { color: var(--bji-amber-500); }
.lg-meter.is-low .labels span:nth-child(1) { color: var(--bji-green-600, #1a8a4a); }
.lg-verdict-card.variance p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.lg-verdict-card.variance p b { color: var(--bji-text); }

/* ============ strategy panel ============ */
.lg-strategy-panel {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-md);
  overflow: hidden;
}

/* honesty callout for fee/multiplier variants */
.lg-variant-note {
  margin: 0 var(--bji-space-5);
  background: var(--bji-amber-050, #fff8e8);
  border: 1px solid var(--bji-amber-300, #e8c86a);
  border-left: 4px solid var(--bji-amber-500);
  border-radius: var(--bji-radius-sm);
  padding: var(--bji-space-3) var(--bji-space-4);
  font-size: var(--bji-text-sm);
  line-height: var(--bji-leading-snug);
}
.lg-variant-note b { color: var(--bji-navy-900); }
@media (max-width: 560px) { .lg-variant-note { margin-inline: var(--bji-space-3); } }

/* engine/trainer bridges in the chart foot */
.lg-bridges { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--bji-space-2); }
@media (max-width: 700px) { .lg-bridges { margin-left: 0; } }
.lg-bridge-btn {
  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);
  padding: 7px 16px;
  cursor: pointer;
  text-decoration: none;
}
.lg-bridge-btn:hover { border-color: var(--bji-blue-500); color: var(--bji-blue-600); }

/* ============ where to play ============ */
.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; }

/* ============ how it works: flow + prose/aside grid ============ */
.lg-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bji-space-4);
  margin-bottom: var(--bji-space-5);
}
@media (max-width: 900px) { .lg-flow { grid-template-columns: 1fr; } }
.lg-flow-step {
  position: relative;
  background: var(--bji-navy-900);
  color: var(--bji-text-inverse);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-5);
}
.lg-flow-step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bji-blue-500);
  color: #fff;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-bold);
  margin-bottom: var(--bji-space-3);
}
.lg-flow-step h3 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-base); color: #fff; }
.lg-flow-step p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-inverse-muted); }
.lg-flow-step .big {
  display: block;
  font-size: var(--bji-text-xl);
  font-weight: var(--bji-weight-black);
  color: #ffd166;
  margin-bottom: var(--bji-space-1);
}

.lg-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--bji-space-5);
  align-items: start;
}
@media (max-width: 900px) { .lg-about-grid { grid-template-columns: 1fr; } }
.lg-prose {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
}
.lg-prose h2, .lg-prose h3 { font-size: var(--bji-text-lg); font-weight: var(--bji-weight-bold); margin: var(--bji-space-5) 0 var(--bji-space-2); }
.lg-prose h2:first-child, .lg-prose h3:first-child { margin-top: 0; }
.lg-prose p { margin: 0 0 var(--bji-space-4); }
.lg-prose p:last-child { margin-bottom: 0; }
.lg-prose ul, .lg-prose ol { padding-left: 1.2em; margin: 0 0 var(--bji-space-4); }
.lg-prose li { margin-bottom: var(--bji-space-2); }

/* aside cards next to the prose */
.lg-aside { display: grid; gap: var(--bji-space-4); }
.lg-aside-card {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-5);
}
.lg-aside-card h3 {
  margin: 0 0 var(--bji-space-3);
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bji-text-muted);
}
.lg-aside-card .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bji-space-3);
  padding: var(--bji-space-2) 0;
  border-bottom: 1px solid var(--bji-border);
  font-size: var(--bji-text-sm);
}
.lg-aside-card .row:last-child { border-bottom: 0; padding-bottom: 0; }
.lg-aside-card .row .k { color: var(--bji-text-muted); }
.lg-aside-card .row .v { font-weight: var(--bji-weight-semibold); text-align: right; }
.lg-aside-card .row .v.bad { color: var(--bji-red-600, #c23a3a); }
.lg-aside-card .row .v.good { color: var(--bji-green-600, #1a8a4a); }
.lg-aside-card p.foot { margin: var(--bji-space-3) 0 0; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }

/* ============ vs classic comparison ============ */
.lg-compare-scroll { overflow-x: auto; }
.lg-compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  overflow: hidden;
  font-size: var(--bji-text-sm);
}
.lg-compare th, .lg-compare td {
  padding: var(--bji-space-3) var(--bji-space-4);
  text-align: left;
  border-bottom: 1px solid var(--bji-border);
}
.lg-compare thead th { background: var(--bji-navy-900); color: #fff; font-weight: var(--bji-weight-semibold); }
.lg-compare tbody th { font-weight: var(--bji-weight-semibold); color: var(--bji-text-muted); width: 30%; }
.lg-compare tbody tr:last-child th, .lg-compare tbody tr:last-child td { border-bottom: 0; }
.lg-compare td.this { font-weight: var(--bji-weight-semibold); }
.lg-compare .good { color: var(--bji-green-600, #1a8a4a); }
.lg-compare .bad { color: var(--bji-red-600, #c23a3a); }

/* ============ rank strip: this game across all tracked variations ====== */
.lg-ranks {
  margin-top: var(--bji-space-4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bji-space-4);
}
@media (max-width: 900px) { .lg-ranks { grid-template-columns: 1fr; } }
.lg-rank-card {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4) var(--bji-space-5);
  display: flex;
  align-items: center;
  gap: var(--bji-space-4);
}
.lg-rank-card .pos {
  flex: none;
  min-width: 64px;
  text-align: center;
  font-size: var(--bji-text-xl);
  font-weight: var(--bji-weight-black);
  color: var(--bji-navy-900);
  font-variant-numeric: tabular-nums;
}
.lg-rank-card .pos small {
  display: block;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-faint);
}
.lg-rank-card p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.lg-rank-card p b { color: var(--bji-text); }
.lg-ranks-foot { margin-top: var(--bji-space-3); font-size: var(--bji-text-sm); }

/* ============ detailed specs: group cards in a grid ============ */
.lg-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--bji-space-4);
}
.lg-specs-group {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-5);
}
.lg-specs-group h3 {
  margin: 0 0 var(--bji-space-3);
  font-size: var(--bji-text-base);
  font-weight: var(--bji-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--bji-space-2);
}
.lg-specs-group h3 .ic { font-size: 1.1rem; line-height: 1; }
.lg-specs-group dl { margin: 0; }
.lg-specs-group .row {
  display: flex;
  justify-content: space-between;
  gap: var(--bji-space-4);
  padding: var(--bji-space-2) 0;
  border-bottom: 1px solid var(--bji-border);
  font-size: var(--bji-text-sm);
}
.lg-specs-group .row:last-child { border-bottom: 0; padding-bottom: 0; }
.lg-specs-group dt { margin: 0; color: var(--bji-text-muted); }
.lg-specs-group dd { margin: 0; font-weight: var(--bji-weight-semibold); text-align: right; }

/* ==========================================================================
   Provider hub (.lgh-): /live-blackjack-game/{provider}/
   Mirrors mockups/live-game-v2/hub.html (approved rounds 1-5).
   ========================================================================== */

.lgh-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-2);
  margin: var(--bji-space-4) 0 var(--bji-space-5);
  padding: 0;
  list-style: none;
}
.lgh-hero-stats 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;
}
.lgh-hero-stats b { color: #3ddc84; }

.lgh-hero-langs {
  margin: 0;
  font-size: var(--bji-text-xs);
  color: var(--bji-text-inverse-muted);
  max-width: 46rem;
}
.lgh-hero-langs b { color: #fff; }

/* comparison table: link rows */
.lgh-table-scroll { overflow-x: auto; }
.lgh-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  overflow: hidden;
  font-size: var(--bji-text-sm);
}
.lgh-table th, .lgh-table td {
  padding: var(--bji-space-3) var(--bji-space-4);
  text-align: left;
  border-bottom: 1px solid var(--bji-border);
  white-space: nowrap;
  vertical-align: middle;
}
.lgh-table thead th {
  background: var(--bji-navy-900);
  color: #fff;
  font-weight: var(--bji-weight-semibold);
}
.lgh-table tbody tr:last-child td { border-bottom: 0; }
.lgh-table tbody tr:hover td { background: var(--bji-blue-050); }
.lgh-table td:first-child a {
  font-weight: var(--bji-weight-bold);
  color: var(--bji-navy-800);
  text-decoration: none;
}
.lgh-table td:first-child a:hover { color: var(--bji-blue-600); }
.lgh-table td:first-child .badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.62rem;
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bji-green-600, #1a8a4a);
  background: rgb(31 162 84 / 0.12);
  border-radius: var(--bji-radius-pill);
  padding: 2px 8px;
}
.lgh-table .good { color: var(--bji-green-600, #1a8a4a); font-weight: var(--bji-weight-semibold); }
.lgh-table .bad { color: var(--bji-red-600, #c23a3a); }
.lgh-table .muted { color: var(--bji-text-faint); }
.lgh-table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bji-space-3);
  margin-top: var(--bji-space-3);
}
.lgh-table-foot .note { margin: 0; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }

/* picks trio reuses lg-verdict-card visual language */
.lgh-pick h3 a { color: inherit; text-decoration: none; }
.lgh-pick h3 a:hover { color: var(--bji-blue-600); }
.lgh-pick .why { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.lgh-pick .num {
  display: block;
  font-size: var(--bji-text-xl);
  font-weight: var(--bji-weight-black);
  color: var(--bji-navy-900);
  margin-bottom: var(--bji-space-1);
}

/* provider-vs-provider edge strip */
.lgh-provscale {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  padding: var(--bji-space-6) var(--bji-space-5) var(--bji-space-5);
}
.lgh-provscale .bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  margin: 44px 8px 6px;
  background: linear-gradient(90deg, var(--bji-green-500), var(--bji-amber-500) 55%, var(--bji-red-500));
}
.lgh-provscale .mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bji-navy-900);
}
.lgh-provscale .mark .lbl {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text);
  background: var(--bji-surface-sunken);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-pill);
  padding: 3px 10px;
}
.lgh-provscale .mark .lbl b { color: var(--bji-navy-900); }
.lgh-provscale .ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--bji-text-faint);
  margin: 0 8px;
}
@media (max-width: 700px) {
  .lgh-provscale .mark .lbl { font-size: 0.58rem; padding: 2px 6px; }
}
.lgh-cmp tbody th { width: 24%; }
.lgh-cmp thead a { color: #fff; }

/* fairness block */
.lgh-fair {
  color: var(--bji-text-inverse);
  background:
    radial-gradient(48rem 22rem at 88% -10%, rgb(31 162 84 / 0.22), transparent 60%),
    linear-gradient(160deg, var(--bji-navy-900), var(--bji-navy-950));
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--bji-radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.lgh-fair h2 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-2xl); font-weight: var(--bji-weight-bold); color: #fff; }
.lgh-fair > p { margin: 0 0 var(--bji-space-4); color: var(--bji-text-inverse-muted); max-width: 52rem; }
.lgh-fair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--bji-space-4);
}
.lgh-fair-card {
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4);
}
.lgh-fair-card h3 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-base); color: #fff; }
.lgh-fair-card p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-inverse-muted); }

/* ==========================================================================
   Live dealer topic hub (1.LD-1): /live-dealer-blackjack/ (.ldh- block).
   Lifted from mockups/live-game-v2/css/topic-hub-shared.css (concept A,
   owner-approved rounds 3-8). Consumed by page-live-dealer-blackjack.php
   with js/live-dealer-hub.js; motion is scoped under body.ldh-motion.
   ========================================================================== */

/* JS-injected controls must stay gone without JS (their display rules
   would otherwise defeat the hidden attribute) */
.ldh-controls[hidden] { display: none !important; }

/* ===== hero chips + routing (round 1) ===== */
.ldh-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-2);
  margin: var(--bji-space-4) 0 var(--bji-space-5);
  padding: 0;
  list-style: none;
}
.ldh-hero-stats 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;
}
.ldh-hero-stats b { color: #3ddc84; }
.ldh-hero-stats li.geo { border-color: rgb(61 220 132 / 0.55); }
.ldh-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--bji-space-3); }

/* ===== picks (round 1) + resolution line (round 2) ===== */
.ldh-picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--bji-space-4);
}
.lg-verdict-card.calm { border-top: 4px solid var(--bji-navy-800); }
.ldh-pick .who {
  display: block;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bji-text-muted);
  margin-bottom: var(--bji-space-2);
}
.ldh-pick h3 { margin: 0 0 var(--bji-space-1); }
.ldh-pick h3 a { color: inherit; text-decoration: none; }
.ldh-pick h3 a:hover { color: var(--bji-blue-600); }
.ldh-pick h3 small { font-weight: var(--bji-weight-medium); color: var(--bji-text-muted); }
.ldh-pick .num {
  display: block;
  font-size: var(--bji-text-lg);
  font-weight: var(--bji-weight-black);
  color: var(--bji-navy-900);
  margin-bottom: var(--bji-space-2);
}
.ldh-pick .why { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.ldh-resolve {
  margin-top: var(--bji-space-3);
  padding-top: var(--bji-space-3);
  border-top: 1px dashed var(--bji-border-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bji-space-2);
  font-size: var(--bji-text-sm);
}
.ldh-resolve .at { color: var(--bji-text-muted); }
.ldh-resolve .at b { color: var(--bji-text); }
.ldh-resolve .at small { display: block; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.ldh-resolve .cv2-btn { flex: none; }

/* ===== data tables: games (round 1) + casinos (round 2 reuses it) ===== */
.ldh-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bji-space-2) var(--bji-space-3);
  margin-bottom: var(--bji-space-3);
}
.ldh-controls .pills { display: flex; flex-wrap: wrap; gap: var(--bji-space-2); }
.ldh-controls .pills button {
  font: inherit;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-muted);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-pill);
  padding: 5px 12px;
  cursor: pointer;
}
.ldh-controls .pills button:hover { border-color: var(--bji-blue-500); color: var(--bji-blue-600); }
.ldh-controls .pills button[aria-pressed="true"] {
  background: var(--bji-navy-900);
  border-color: var(--bji-navy-900);
  color: #fff;
}
.ldh-controls .verified-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-muted);
  cursor: pointer;
}
.ldh-controls .count {
  margin-left: auto;
  font-size: var(--bji-text-xs);
  color: var(--bji-text-faint);
}
.ldh-controls .count a { color: inherit; }
.ldh-table-scroll {
  overflow-x: auto;
  border-radius: var(--bji-radius-lg);
  background:
    linear-gradient(90deg, var(--bji-surface), transparent) 0 0 / 2.5rem 100% no-repeat local,
    linear-gradient(90deg, transparent, var(--bji-surface)) 100% 0 / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(14 22 56 / 0.2), transparent) 0 0 / 1.25rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(14 22 56 / 0.2), transparent) 100% 0 / 1.25rem 100% no-repeat scroll,
    var(--bji-surface);
}
.ldh-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: transparent; /* the scroller owns the surface + scroll shadows */
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  overflow: hidden;
  font-size: var(--bji-text-sm);
}
.ldh-table th, .ldh-table td {
  padding: var(--bji-space-3) var(--bji-space-4);
  text-align: left;
  border-bottom: 1px solid var(--bji-border);
  white-space: nowrap;
  vertical-align: middle;
}
.ldh-table thead th {
  background: var(--bji-navy-900);
  color: #fff;
  font-weight: var(--bji-weight-semibold);
}
.ldh-table thead th button {
  font: inherit;
  font-weight: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.ldh-table thead th button::after { content: " \2195"; opacity: 0.55; font-size: 0.75em; }
.ldh-table thead th[aria-sort="ascending"] button::after { content: " \2191"; opacity: 1; }
.ldh-table thead th[aria-sort="descending"] button::after { content: " \2193"; opacity: 1; }
.ldh-table tbody tr:last-child td { border-bottom: 0; }
.ldh-table tbody tr:hover td { background: var(--bji-blue-050); }
.ldh-table td:first-child a {
  font-weight: var(--bji-weight-bold);
  color: var(--bji-navy-800);
  text-decoration: none;
}
.ldh-table td:first-child a:hover { color: var(--bji-blue-600); }
.ldh-table td:first-child .badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.62rem;
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bji-green-600, #1a8a4a);
  background: rgb(31 162 84 / 0.12);
  border-radius: var(--bji-radius-pill);
  padding: 2px 8px;
}
.ldh-table .prov { color: var(--bji-text-muted); }
.ldh-table .good { color: var(--bji-green-600, #1a8a4a); font-weight: var(--bji-weight-semibold); }
.ldh-table .bad { color: var(--bji-red-600, #c23a3a); }
.ldh-table .muted { color: var(--bji-text-faint); }
.ldh-table td .pchips span {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-800);
  background: var(--bji-blue-050);
  border: 1px solid var(--bji-blue-200);
  border-radius: var(--bji-radius-pill);
  padding: 1px 7px;
  margin-right: 4px;
}
.ldh-table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bji-space-3);
  margin-top: var(--bji-space-3);
}
.ldh-table-foot .note { margin: 0; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }

/* ===== casino dossier podium (round 2) ===== */
.ldh-cas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bji-space-4);
  margin-bottom: var(--bji-space-5);
}
.ldh-cas {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  box-shadow: var(--bji-shadow-md);
  padding: var(--bji-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bji-space-3);
}
.ldh-cas .head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bji-space-3); }
.ldh-cas h3 { margin: 0; font-size: var(--bji-text-lg); }
.ldh-cas h3 a { color: var(--bji-navy-800); text-decoration: none; }
.ldh-cas h3 a:hover { color: var(--bji-blue-600); }
.ldh-cas .rating { font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold); color: var(--bji-text-muted); white-space: nowrap; }
.ldh-cas .rating b { color: var(--bji-navy-900); font-size: var(--bji-text-sm); }
.ldh-cas .provs { display: flex; flex-wrap: wrap; gap: 6px; }
.ldh-cas .provs span {
  font-size: 0.66rem;
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-800);
  background: var(--bji-blue-050);
  border: 1px solid var(--bji-blue-200);
  border-radius: var(--bji-radius-pill);
  padding: 2px 9px;
}
.ldh-cas dl { margin: 0; }
.ldh-cas .row {
  display: flex;
  justify-content: space-between;
  gap: var(--bji-space-3);
  padding: var(--bji-space-1) 0;
  border-bottom: 1px solid var(--bji-border);
  font-size: var(--bji-text-sm);
}
.ldh-cas .row:last-child { border-bottom: 0; }
.ldh-cas dt { margin: 0; color: var(--bji-text-muted); }
.ldh-cas dd { margin: 0; font-weight: var(--bji-weight-semibold); text-align: right; }
.ldh-cas dd .good { color: var(--bji-green-600, #1a8a4a); }
.ldh-cas .bonus { margin: 0; font-size: var(--bji-text-sm); }
.ldh-cas .bonus span { display: block; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.ldh-cas .ctas { margin-top: auto; display: flex; gap: var(--bji-space-3); align-items: center; }
.ldh-cas .ctas .rev { font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); }

/* ===== country satellite strip (round 1) ===== */
.ldh-countries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bji-space-2);
  margin-top: var(--bji-space-4);
  font-size: var(--bji-text-sm);
  color: var(--bji-text-muted);
}
.ldh-countries a {
  font-size: var(--bji-text-xs);
  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);
  padding: 5px 12px;
  text-decoration: none;
}
.ldh-countries a:hover { border-color: var(--bji-blue-500); color: var(--bji-blue-600); }

/* ===== provider router + edge strip (round 1) ===== */
.ldh-provs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--bji-space-4);
}
.ldh-prov {
  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-3);
}
.ldh-prov h3 { margin: 0; font-size: var(--bji-text-lg); }
.ldh-prov h3 a { color: var(--bji-navy-800); text-decoration: none; }
.ldh-prov h3 a:hover { color: var(--bji-blue-600); }
.ldh-prov dl { margin: 0; }
.ldh-prov .row {
  display: flex;
  justify-content: space-between;
  gap: var(--bji-space-3);
  padding: var(--bji-space-1) 0;
  border-bottom: 1px solid var(--bji-border);
  font-size: var(--bji-text-sm);
}
.ldh-prov .row:last-child { border-bottom: 0; }
.ldh-prov dt { margin: 0; color: var(--bji-text-muted); }
.ldh-prov dd { margin: 0; font-weight: var(--bji-weight-semibold); text-align: right; }
.ldh-prov dd .good { color: var(--bji-green-600, #1a8a4a); }
.ldh-prov p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); flex: 1; }
.ldh-prov .more { font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); text-decoration: none; }
.ldh-provs-foot { margin-top: var(--bji-space-3); font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
/* ===== live vs RNG + strategy (round 1) ===== */
.ldh-vs thead th { width: 38%; }
.ldh-vs thead th:first-child { width: 24%; }
.ldh-strategy {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  padding: clamp(1.25rem, 1rem + 2vw, 2rem);
}
.ldh-strategy p { margin: 0 0 var(--bji-space-3); max-width: 52rem; }
.ldh-strategy p:last-of-type { margin-bottom: var(--bji-space-4); }
.ldh-strategy .bridges { display: flex; flex-wrap: wrap; gap: var(--bji-space-3); }

/* ============================================================
   Round 3 additions (concept A chosen): podium media headers,
   Best-for job labels, Blackjack-options tier pills, games-table
   thumbnails, provider edge bar rows.
   ============================================================ */

/* podium card, round 4: job band on top, media, caption strip,
   padded body (.bodypad); card owns the radius clipping */
.ldh-cas.has-media {
  padding: 0;
  gap: 0;
  position: relative;
  overflow: visible; /* the crown pill straddles the top edge */
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bji-surface), var(--bji-surface)) padding-box,
    linear-gradient(120deg, var(--bji-green-500, #1fa254), var(--bji-blue-500, #0698ff) 60%, var(--bji-green-500, #1fa254)) border-box;
  box-shadow: 0 10px 30px rgb(6 152 255 / 0.12);
}
.ldh-cas .head .avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--bji-border-strong);
  box-shadow: var(--bji-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ldh-cas .head .avatar img { max-width: 74%; max-height: 74%; width: auto; height: auto; object-fit: contain; display: block; }
/* wordmark logos (aspect > ~1.6) get a height-bound chip: a 3:1 mark
   inscribed in a circle can only ever be a sliver */
.ldh-cas .head .wordmark {
  flex: none;
  width: 116px;
  height: 44px; /* matches the avatar diameter so both frames align */
  background: #fff;
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-sm);
  box-shadow: var(--bji-shadow-sm);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ldh-cas .head .wordmark img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.ldh-cas.has-media .head { align-items: center; gap: 10px; }
.ldh-cas.has-media .head h3 { flex: 1; min-width: 0; }
.ldh-cas.has-media .ctas { flex-direction: column; align-items: stretch; gap: var(--bji-space-2); }
.ldh-cas.has-media .ctas .cv2-btn { width: 100%; }
.ldh-cas.has-media .ctas .rev { text-align: center; font-size: var(--bji-text-xs); }
.ldh-cas.has-media .media {
  border-radius: calc(var(--bji-radius-md) - 1px) calc(var(--bji-radius-md) - 1px) 0 0;
  overflow: hidden; /* card no longer clips, so the media clips its own image */
  z-index: 5; /* above the tab's tucked lower half */
}
.ldh-cas.has-media .bodypad { position: relative; z-index: 5; background: var(--bji-surface); border-radius: 0 0 var(--bji-radius-md) var(--bji-radius-md); }
.ldh-cas-grid { padding-top: 24px; } /* room for the tabs above the cards */
.ldh-cas.has-media .provs { min-height: 52px; align-content: flex-start; }
.ldh-cas.has-media .caption { min-height: 3.6em; }
.ldh-cas .bodypad {
  padding: var(--bji-space-4) var(--bji-space-5) var(--bji-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bji-space-3);
  flex: 1;
}
/* Best-for label, owner-approved option 2b: gradient crown pill centered
   on the card's top edge, gradient-clipped text */
.ldh-cas .joblabel {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  white-space: nowrap;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 7px 18px;
  border-radius: var(--bji-radius-pill);
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, var(--bji-green-500, #1fa254), var(--bji-blue-500, #0698ff)) border-box;
  box-shadow: 0 6px 16px rgb(14 22 56 / 0.14);
}
.ldh-cas .joblabel i {
  font-style: normal;
  background: linear-gradient(120deg, var(--bji-green-600, #1a8a4a), var(--bji-blue-600, #0284d8));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ldh-cas .media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bji-navy-950);
}
.ldh-cas .media img.shot,
.ldh-cas .media .grid2 { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Anchor the cover-crop to the TOP of the frame: the dossier stills are
   dealer photos (mostly square or portrait, taller than the 16:9 media box),
   so a default center crop lopped their heads off. center top keeps faces in
   frame and crops the felt at the bottom instead. Applies to the single still
   and each collage tile; a no-op for the handful of true-16:9 stills. */
.ldh-cas .media img.shot { object-fit: cover; object-position: center top; display: block; }
.ldh-cas .media .grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; }
.ldh-cas .media .grid2 img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; object-position: center top; display: block; }
/* podium preview: chrome-less video fades in over the still (round 9).
   The iframe is oversized vertically and centered so the 16:9 video band
   fills the media box exactly while YouTube's non-removable chrome (title
   overlay, watermark, tap controls) renders outside the visible crop;
   pointer-events stay off so the player never receives hover/tap. */
.ldh-cas .media { overflow: hidden; }
.ldh-cas .media iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 250%;
  transform: translate(-50%, -50%);
  border: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.ldh-cas .media iframe.on { opacity: 1; }
.ldh-cas .caption {
  margin: 0;
  padding: var(--bji-space-2) var(--bji-space-5);
  font-size: var(--bji-text-xs);
  color: var(--bji-text-muted);
  background: var(--bji-surface-sunken);
  border-bottom: 1px solid var(--bji-border);
}
.ldh-cas .caption b { color: var(--bji-text); }
.ldh-cas .caption .good { color: var(--bji-green-600, #1a8a4a); font-weight: var(--bji-weight-bold); }

/* bonus offer box */
.ldh-offer {
  border: 1px solid var(--bji-blue-200);
  border-left: 4px solid var(--bji-blue-500);
  background: linear-gradient(135deg, var(--bji-blue-050), var(--bji-surface));
  border-radius: var(--bji-radius-sm);
  padding: var(--bji-space-3) var(--bji-space-4);
}
.ldh-offer .eyebrow {
  display: block;
  font-size: 0.62rem;
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bji-text-muted);
  margin-bottom: 2px;
}
.ldh-offer .deal {
  display: block;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-navy-900);
}

/* Blackjack-options tier pill with click/hover reveal */
.ldh-tier {
  position: relative;
  font: inherit;
  font-size: 0.66rem;
  font-weight: var(--bji-weight-bold);
  border-radius: var(--bji-radius-pill);
  padding: 3px 10px;
  cursor: pointer;
  border: 1px solid;
}
.ldh-tier.great { color: var(--bji-green-600, #1a8a4a); background: rgb(31 162 84 / 0.12); border-color: rgb(31 162 84 / 0.35); }
.ldh-tier.good { color: var(--bji-blue-600); background: var(--bji-blue-050); border-color: var(--bji-blue-200); }
.ldh-tier.ok { color: var(--bji-text-muted); background: var(--bji-gray-100); border-color: var(--bji-border-strong); }
.ldh-tier::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bji-navy-900);
  color: #fff;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  display: none; /* not opacity: an invisible nowrap bubble still creates page overflow */
  pointer-events: none;
  z-index: 30;
}
.ldh-tier:hover::after, .ldh-tier:focus-visible::after, .ldh-tier.open::after { display: block; }

/* games-table thumbnails (hidden on small screens; the game page carries media there) */
.ldh-table .thumb {
  width: 56px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 8px;
}
@media (max-width: 560px) { .ldh-table .thumb { display: none; } }

/* provider edge bar rows (single series: one hue; values in text tokens) */
.ldh-provbars {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  padding: var(--bji-space-5);
  margin-top: var(--bji-space-4);
}
.ldh-provbars .charttitle {
  margin: 0 0 var(--bji-space-3);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
}
.ldh-provbars .plot { position: relative; }
.ldh-provbars .row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: var(--bji-space-3);
  padding: 5px 0;
}
.ldh-provbars .name { font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); }
.ldh-provbars .name a { color: var(--bji-navy-800); text-decoration: none; }
.ldh-provbars .name a:hover { color: var(--bji-blue-600); }
.ldh-provbars .track { display: flex; align-items: center; min-height: 18px; }
.ldh-provbars .bar {
  height: 18px;
  background: var(--bji-navy-800);
}
.ldh-provbars .bar.best {
  background: var(--bji-green-600, #1a8a4a);
  border-radius: 0 4px 4px 0;
  flex: none;
}
.ldh-provbars .val {
  margin-left: 8px;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ldh-provbars .val small { font-weight: var(--bji-weight-medium); color: var(--bji-text-faint); }
.ldh-provbars .nv { font-size: var(--bji-text-xs); color: var(--bji-text-faint); font-style: normal; }
.ldh-provbars .ticks {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--bji-space-3);
  margin-top: 2px;
}
.ldh-provbars .ticks div {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--bji-text-faint);
}
.ldh-provbars .foot { margin: var(--bji-space-3) 0 0; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
@media (max-width: 700px) {
  /* the rule annotations don't fit beside short mobile bars; the value keeps the row honest */
  .ldh-provbars .val small { display: none; }
}
@media (max-width: 560px) {
  .ldh-provbars .row, .ldh-provbars .ticks { grid-template-columns: 84px 1fr; }
}


/* games table: columns must never squeeze below content (the badge was
   painting over the provider column); Special may wrap instead */
.ldh-table.ldh-games { min-width: 1080px; }
.ldh-table.ldh-games th:first-child { min-width: 340px; } /* thumb + longest name + badge; the badge's
  inline-block boundary otherwise lets auto layout under-size the column and the badge paints over
  the provider cell */
.ldh-table.ldh-games td:last-child { white-space: normal; min-width: 200px; }


/* ============================================================
   Round 8: tier-1 motion (owner pick), scoped to .ldh-motion so the
   archived FX comparison page keeps its own scopes. JS adds .pre to
   the podium grid at load (no-JS pages stay fully visible) and
   .inview when it enters the viewport.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .ldh-motion .ldh-cas-grid.pre .ldh-cas { opacity: 0; }
  .ldh-motion .ldh-cas-grid.inview .ldh-cas {
    animation: ldh-card-in 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .ldh-motion .ldh-cas-grid.inview .ldh-cas:nth-child(1) { animation-delay: 0.05s; }
  .ldh-motion .ldh-cas-grid.inview .ldh-cas:nth-child(2) { animation-delay: 0.15s; }
  .ldh-motion .ldh-cas-grid.inview .ldh-cas:nth-child(3) { animation-delay: 0.25s; }
  @keyframes ldh-card-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  .ldh-motion .ldh-cas.has-media { transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .ldh-motion .ldh-cas.has-media:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgb(14 22 56 / 0.16);
  }
  .ldh-motion .ldh-cas .media img.shot,
  .ldh-motion .ldh-cas .media .grid2 { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
  .ldh-motion .ldh-cas.has-media:hover .media img.shot,
  .ldh-motion .ldh-cas.has-media:hover .media .grid2 { transform: scale(1.045); }
}

/* casino dossier table needs the wider floor */
.ldh-table.ldh-castable { min-width: 1000px; }