*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#030303;background-image:radial-gradient(760px 420px at 8% -8%,rgba(20,80,48,.25),transparent 62%),linear-gradient(180deg,#050505 0%,#020202 60%,#000 100%);color:#fff;min-height:100vh}.page{max-width:1400px;margin:0 auto;padding:18px 20px 46px}.hero{text-align:center;margin-bottom:22px}.hero-banner{position:relative;display:inline-flex;align-items:center;justify-content:center;width:min(100%,1180px);min-height:210px;text-decoration:none;color:#fff;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,rgba(20,70,45,.55),rgba(10,10,10,.9));border:1px solid rgba(255,214,102,.18)}.hero-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:saturate(.85) brightness(.65)}.hero-banner span{position:relative;z-index:1;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(4rem,14vw,11rem);letter-spacing:.04em;color:rgba(255,255,255,.58);text-shadow:0 4px 0 rgba(0,0,0,.3),0 0 34px rgba(68,255,165,.22)}.hero p{color:rgba(255,255,255,.7);margin-top:12px}.session-alert{margin:0 auto 18px;max-width:980px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,178,31,.35);background:rgba(80,45,0,.28);color:#ffe7b8;font-size:.92rem;line-height:1.45}.session-alert strong{color:#fff4d8}.session-alert.offline{border-color:rgba(255,92,92,.35);background:rgba(80,12,12,.28);color:#ffd4d4}.status-bar{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:10px auto 24px;padding:10px 16px;width:max-content;max-width:100%;border-radius:999px;background:rgba(0,0,0,.62);border:1px solid rgba(255,214,102,.24)}.status-item{font-size:.9rem;color:rgba(255,244,216,.88)}.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:7px;background:#18e38d;box-shadow:0 0 12px rgba(24,227,141,.75)}.status-dot.warn{background:#ffb21f;box-shadow:0 0 12px rgba(255,178,31,.75)}.status-dot.offline{background:#ff5c5c;box-shadow:0 0 12px rgba(255,92,92,.75)}.controls{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 24px}.controls input,.controls select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;color:#fff;padding:12px 14px;min-height:44px}.controls input{flex:1 1 320px}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:22px}.game-card{display:block;text-decoration:none;color:inherit;position:relative;border-radius:22px;min-height:300px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 44px rgba(0,0,0,.34);transition:transform .18s,filter .18s}.game-card:hover{transform:translateY(-6px);filter:brightness(1.06)}.card-top{display:flex;justify-content:flex-end;align-items:center;min-height:30px}.id-pill{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,214,102,.35);background:rgba(0,0,0,.42);font-size:.78rem;font-weight:800;color:#fff4d8}.game-title{font-size:1.22rem;font-weight:900;line-height:1.1;margin-top:18px;color:#fff4d8}.game-sub{margin-top:8px;color:rgba(255,255,255,.62);font-size:.86rem}.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.meta-chip{font-size:.76rem;border-radius:999px;padding:7px 9px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.75)}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}.metric{border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);padding:10px 8px;text-align:center}.metric span{display:block;font-size:.68rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.05em}.metric strong{display:block;margin-top:4px;font-size:1.08rem;color:#fff}.metric.good strong{color:#18e38d}.metric.warn strong{color:#ffb21f}.view-dashboard{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;padding:10px 14px;border-radius:13px;background:linear-gradient(135deg,#104b31,#1f8a5a);border:1px solid rgba(68,255,165,.25);color:#fff;font-weight:800;font-size:.86rem;min-width:135px;max-width:56%}.note{margin-top:12px;color:rgba(255,255,255,.54);font-size:.78rem;line-height:1.35}.no-results{grid-column:1/-1;text-align:center;color:rgba(255,255,255,.6);padding:40px}footer{text-align:center;margin-top:38px;color:rgba(255,255,255,.45);font-size:.85rem}@media(max-width:520px){.page{padding:12px}.hero-banner{min-height:145px}.games-grid{grid-template-columns:1fr}.view-dashboard{max-width:60%;min-width:120px}.metrics{gap:6px}.metric{padding:8px 5px}.metric strong{font-size:.94rem}}


/* TenguBet dark surface override: remove green/blue cast from the hub shell. */
body.blackjack-hub{
  background:#020202!important;
  background-image:radial-gradient(760px 420px at 8% -8%,rgba(90,8,8,.24),transparent 62%),linear-gradient(180deg,#030303 0%,#020202 60%,#000 100%)!important;
}

/* Full-width header art: same treatment as roulette/baccarat hub banners. */
body.blackjack-hub .hero-banner{
  display:inline-block!important;
  width:min(100%,1180px)!important;
  min-height:0!important;
  border:none!important;
  border-radius:0!important;
  background:none!important;
  overflow:visible!important;
}
body.blackjack-hub .hero-banner img{
  position:static!important;
  width:100%!important;
  height:auto!important;
  display:block!important;
  object-fit:initial!important;
  opacity:1!important;
  filter:saturate(1.08) contrast(1.04) drop-shadow(0 24px 46px rgba(0,0,0,.48))!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
body.blackjack-hub .hero-banner span{
  display:none!important;
}

/* Hub game cards — poster art like baccarat / roulette table cards */
body.blackjack-hub .games-grid{
  grid-template-columns:repeat(auto-fill,minmax(286px,1fr));
  gap:24px;
  align-items:stretch;
}
body.blackjack-hub .game-card{
  position:relative;
  min-height:392px;
  border-radius:24px;
  overflow:hidden;
  display:grid;
  align-content:end;
  color:inherit;
  background:
    linear-gradient(160deg, rgba(139, 26, 26, 0.18), rgba(8, 6, 5, 0.92)),
    #050505;
  border:1px solid rgba(255, 212, 107, 0.28);
  box-shadow:
    0 22px 46px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(139, 26, 26, 0.22);
  isolation:isolate;
  transition:transform .22s ease,filter .22s ease,border-color .22s ease,box-shadow .22s ease;
  padding:0;
}
body.blackjack-hub .game-card:hover{
  transform:translateY(-7px);
  filter:brightness(1.06);
  border-color:rgba(255, 212, 107, 0.58);
  box-shadow:
    0 26px 54px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 22px rgba(255, 122, 26, 0.14);
}
body.blackjack-hub .game-card.live{border-color:rgba(31,208,139,.34)}
body.blackjack-hub .game-card.good-count{border-color:rgba(255,212,107,.48);box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 0 1px rgba(255,212,107,.12)}
body.blackjack-hub .game-card.watching{border-color:rgba(255,255,255,.14)}
body.blackjack-hub .meta-chip.good-badge{background:rgba(255,212,107,.18);border-color:rgba(255,212,107,.42);color:#fff4d8;font-weight:800}
body.blackjack-hub .meta-chip.lang-chip{background:rgba(255,255,255,.04)}
body.blackjack-hub .meta-chip.provider-chip{color:#ffd66a;border-color:rgba(255,214,102,.4);background:rgba(255,214,102,.1);font-weight:800}
body.blackjack-hub .stat-block--hero .stat-value.good{font-size:1.15rem}
body.blackjack-hub .game-card.closed{opacity:.92}
body.blackjack-hub .game-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--card-art),linear-gradient(180deg,#1a5c47 0%,#0a3026 55%,#061f18 100%);
  background-position:center,center;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
  opacity:.78;
}
body.blackjack-hub .game-card.has-poster::before{
  opacity:1;
  filter:saturate(1.16) contrast(1.08) brightness(1.06);
}
body.blackjack-hub .game-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(8,5,5,.52) 42%,rgba(0,0,0,.92) 100%);
}
body.blackjack-hub .game-card.has-poster::after{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(8,5,5,.18) 48%,rgba(0,0,0,.84) 100%);
}
body.blackjack-hub .game-card.poster-pending::before{opacity:.55;filter:saturate(.72) brightness(.82)}
body.blackjack-hub .game-card.no-poster::before{
  background-image:linear-gradient(180deg,#1a5c47 0%,#0a3026 55%,#061f18 100%);
  opacity:1;
  filter:none;
}
body.blackjack-hub .card-top{
  position:absolute;
  left:14px;
  right:14px;
  top:14px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  min-height:0;
}
body.blackjack-hub .source-pill.id-pill{
  color:#fff4d8;
  border-color:rgba(255,214,102,.42);
  background:rgba(0,0,0,.52);
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,214,102,.42);
  font-size:.7rem;
  font-weight:900;
}
body.blackjack-hub .card-copy{
  padding:138px 18px 18px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
body.blackjack-hub .game-title{
  color:#fff;
  font-size:clamp(.92rem,1.55vw,1.18rem);
  font-weight:900;
  line-height:1.14;
  text-shadow:0 2px 8px rgba(0,0,0,.74);
  margin:0 0 10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.28em;
}
body.blackjack-hub .game-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:14px;
}
body.blackjack-hub .game-meta .meta-chip{
  min-height:27px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.86);
  font-size:.72rem;
  font-weight:800;
}
body.blackjack-hub .meta-chip.status-chip.is-open{
  color:#d7ffe8;
  border-color:rgba(31,208,139,.34);
  background:rgba(31,208,139,.12);
}
body.blackjack-hub .meta-chip.status-chip.is-closed{
  color:#ffe5ea;
  border-color:rgba(236,93,114,.34);
  background:rgba(236,93,114,.12);
}
body.blackjack-hub .meta-chip.type-chip{
  color:#fff4d8;
  border-color:rgba(255,212,107,.24);
  background:rgba(139,26,26,.18);
}
body.blackjack-hub .game-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
body.blackjack-hub .stat-block{
  border-radius:13px;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.07);
  padding:9px 8px;
  text-align:center;
  min-width:0;
}
body.blackjack-hub .stat-label{
  display:block;
  color:rgba(255,255,255,.52);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  margin-bottom:5px;
}
body.blackjack-hub .stat-value{
  display:block;
  color:#fff4d8;
  font-size:1.05rem;
  font-weight:950;
}
body.blackjack-hub .stat-value.good{color:#18e38d}
body.blackjack-hub .stat-value.warn{color:#ffb21f}
body.blackjack-hub .stat-value.muted{color:rgba(255,255,255,.45)}
body.blackjack-hub .stat-age{
  display:block;
  margin-top:3px;
  font-size:.62rem;
  color:rgba(255,255,255,.42);
  letter-spacing:.02em;
}
body.blackjack-hub .view-dashboard{
  display:flex;
  width:100%;
  min-height:40px;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  max-width:none;
  border-radius:999px;
  border:1px solid rgba(255, 212, 107, 0.48);
  color:#fff8e6;
  font-weight:900;
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-size:clamp(0.72rem, 1.8vw, 0.84rem);
  background:
    linear-gradient(135deg, rgba(139, 26, 26, 0.92), rgba(18, 12, 8, 0.96)),
    radial-gradient(circle at 18% 30%, rgba(255, 212, 107, 0.18), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.34),
    0 0 16px rgba(255, 122, 26, 0.12);
  transition:border-color .18s ease, box-shadow .18s ease;
}
body.blackjack-hub .game-card:hover .view-dashboard{
  border-color:rgba(255, 212, 107, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 24px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(255, 122, 26, 0.18);
}
body.blackjack-hub .no-results{
  grid-column:1/-1;
  min-height:180px;
  display:grid;
  place-items:center;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:18px;
  color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.03);
  text-align:center;
  padding:20px;
}
@media(max-width:780px){
  body.blackjack-hub .games-grid{grid-template-columns:minmax(0,1fr)}
  body.blackjack-hub .card-copy{padding-top:124px}
}

.controls select option{color:#111;background:#fff;}

/* === tengu controls/edges 20260724 === */
body.blackjack-hub .controls.hub-controls,
body.blackjack-hub .hub-controls {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin: 0 0 24px;
  padding: 8px 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.blackjack-hub .search-wrap {
  display: grid;
  gap: 7px;
  text-align: left;
  min-width: 0;
}
body.blackjack-hub .tengu-select,
body.blackjack-hub .controls select.tengu-select {
  min-height: 52px;
  min-width: 160px;
  padding: 0 18px;
  border: 1px solid rgba(255, 212, 107, 0.45) !important;
  border-radius: 999px !important;
  color: #ffe8ad !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  background:
    linear-gradient(135deg, rgba(18, 12, 8, 0.94), rgba(8, 6, 5, 0.96)),
    rgba(0, 0, 0, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.28);
  outline: none;
}
body.blackjack-hub .tengu-select:focus {
  border-color: rgba(255, 212, 107, 0.78) !important;
}

/* Game card gold edge + hollow Tengu frame */
body.blackjack-hub .game-card {
  border-radius: 22px !important;
  border: 1px solid rgba(212, 175, 55, 0.48) !important;
  box-shadow:
    0 0 0 1px rgba(90, 55, 10, 0.85),
    0 0 0 3px rgba(255, 212, 107, 0.22),
    0 22px 46px rgba(0, 0, 0, 0.42),
    inset 0 0 28px rgba(139, 26, 26, 0.14) !important;
}
body.blackjack-hub .game-card:hover {
  border-color: rgba(255, 214, 106, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(120, 75, 12, 0.95),
    0 0 0 3px rgba(255, 212, 107, 0.38),
    0 26px 52px rgba(0, 0, 0, 0.48),
    inset 0 0 30px rgba(139, 26, 26, 0.18) !important;
}

/* View Table Tengu strip button (beat shell .tengu-draw-btn chrome) */
html[data-shell="v2"] body.blackjack-hub .view-dashboard,
html[data-shell="v2"] body.blackjack-hub .view-dashboard.tengu-draw-btn,
body.blackjack-hub .view-dashboard,
body.blackjack-hub .view-dashboard.tengu-draw-btn {
  display: flex !important;
  width: min(100%, 240px) !important;
  max-width: 100% !important;
  min-height: 64px !important;
  aspect-ratio: 3 / 1;
  margin: 8px auto 0 !important;
  padding: 0 22px !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  color: #ffe8ad !important;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(0.68rem, 1.7vw, 0.8rem);
  text-shadow:
    0 1px 0 rgba(90, 55, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.55);
  background: url("/assets/strategy-frames/footer-strip.w1056.webp?v=20260608") center / contain no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.34));
  transition: transform 0.18s ease, filter 0.18s ease;
}
html[data-shell="v2"] body.blackjack-hub .game-card:hover .view-dashboard,
body.blackjack-hub .game-card:hover .view-dashboard {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  filter: brightness(1.1) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.42));
  transform: translateY(-1px);
}

@media (max-width: 780px) {
  body.blackjack-hub .controls.hub-controls,
  body.blackjack-hub .hub-controls {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   Card layout rework - operator request 2026-10-20.
   Name top-left in a solid holder (readable over poster art) with the operator
   as a subheader; every metric in a matching filled holder; table id demoted to
   bottom-left fine print; View Table button matched to the holder style.
   ============================================================ */
body.blackjack-hub .card-top{ display:none; }

body.blackjack-hub .card-head{
  position:absolute;
  left:14px;
  top:14px;
  right:14px;
  z-index:3;
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-start;
  max-width:calc(100% - 28px);
  padding:8px 12px;
  border-radius:12px;
  background:rgba(8,9,11,.82);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(3px);
  box-sizing:border-box;
}
body.blackjack-hub .card-head .game-title{
  margin:0;
  min-height:0;
  text-shadow:none;
  -webkit-line-clamp:2;
  font-size:clamp(.9rem,1.5vw,1.1rem);
}
body.blackjack-hub .game-operator{
  display:block;
  color:rgba(255,255,255,.62);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2;
}

/* metric chips become solid holders rather than translucent pills */
body.blackjack-hub .game-meta .meta-chip{
  background:rgba(8,9,11,.82);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  color:#fff;
}
body.blackjack-hub .meta-chip.status-chip.is-open{
  background:rgba(12,32,24,.88);
  border-color:rgba(94,233,181,.45);
  color:#5ee9b5;
}
body.blackjack-hub .meta-chip.status-chip.is-closed{
  background:rgba(34,12,16,.88);
  border-color:rgba(255,113,133,.42);
  color:#ff7185;
}

/* two holders now (True Count, Limits), both filled to match */
body.blackjack-hub .game-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body.blackjack-hub .stat-block{
  padding:8px 10px;
  border-radius:12px;
  background:rgba(8,9,11,.82);
  border:1px solid rgba(255,255,255,.14);
  box-sizing:border-box;
}
body.blackjack-hub .stat-value--limits{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
body.blackjack-hub .limit-sep{
  color:rgba(255,255,255,.4);
  margin:0 4px;
  font-weight:700;
}

/* View Table matched to the holders: same fill, border and radius */
body.blackjack-hub .view-dashboard{
  border-radius:12px;
  background:rgba(8,9,11,.82);
  border:1px solid rgba(255,212,107,.48);
}
body.blackjack-hub .game-card:hover .view-dashboard{
  background:rgba(255,212,107,.16);
}

/* table id: fine print, bottom-left, no longer a focal point */
body.blackjack-hub .table-id-note{
  display:block;
  margin-top:10px;
  color:rgba(255,255,255,.34);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.07em;
  text-align:left;
}


/* Tier gate upsell - operator instruction 2026-10-20. A non-qualifying viewer sees
   an explicit call to subscribe in place of the count, never a dash or a zero. */
body.blackjack-hub .stat-block--locked{
  background:rgba(255,212,107,.12);
  border-color:rgba(255,212,107,.42);
}
body.blackjack-hub .stat-value--locked{
  color:#ffd46b;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.2;
  display:block;
}
body.blackjack-hub .view-dashboard--locked{
  background:rgba(255,212,107,.18);
  border-color:rgba(255,212,107,.7);
  color:#fff8e6;
}
body.blackjack-hub .game-card:hover .view-dashboard--locked{
  background:rgba(255,212,107,.3);
}


/* ============================================================
   Mockup layout - operator 2026-10-20, superseding the earlier card-head version.
   Limits top-left, True Count top-right, one bottom holder for name/operator/id
   and the button. Amendments to the mockup: smaller id, full-width name, button
   moved below the name, no vertical divider.
   ============================================================ */
body.blackjack-hub .card-head{ display:none; }

body.blackjack-hub .card-corner{
  position:absolute;
  top:14px;
  z-index:3;
  min-width:116px;
  max-width:calc(50% - 20px);
  padding:8px 12px;
  border-radius:14px;
  background:rgba(14,15,18,.9);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  box-sizing:border-box;
  text-align:center;
}
body.blackjack-hub .card-corner--left{ left:14px; }
body.blackjack-hub .card-corner--right{ right:14px; }
body.blackjack-hub .card-corner--locked{
  background:rgba(40,30,8,.92);
  border-color:rgba(255,212,107,.5);
}
body.blackjack-hub .card-corner .stat-label{
  margin-bottom:2px;
  font-size:.6rem;
  letter-spacing:.09em;
  color:rgba(255,255,255,.62);
}
body.blackjack-hub .card-corner .stat-value{
  font-size:1.35rem;
  font-weight:900;
  line-height:1.1;
  display:block;
}
body.blackjack-hub .card-corner .stat-value--limits{
  font-size:1rem;
  white-space:nowrap;
}
body.blackjack-hub .card-corner .stat-value--locked{
  font-size:.74rem;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.03em;
}
body.blackjack-hub .card-corner .stat-age{
  display:block;
  margin-top:1px;
  font-size:.62rem;
  color:rgba(255,255,255,.5);
}

/* chips sit above the bottom holder */
body.blackjack-hub .game-meta{ margin-bottom:12px; }

/* ONE bottom holder: name, operator, id, then the button beneath - no divider */
body.blackjack-hub .card-foot{
  display:block;
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(26,10,12,.95), rgba(12,13,16,.95));
  border:1.5px solid rgba(255,212,107,.55);
  box-shadow:0 8px 22px rgba(0,0,0,.5);
  box-sizing:border-box;
}
body.blackjack-hub .card-foot .game-title{
  display:block;            /* full width; long names wrap rather than clamp to a column */
  width:100%;
  margin:0 0 1px;
  min-height:0;
  text-shadow:none;
  font-size:clamp(1rem,1.9vw,1.3rem);
  line-height:1.15;
  -webkit-line-clamp:2;
}
body.blackjack-hub .card-foot .game-operator{
  display:block;
  color:rgba(255,255,255,.66);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
/* id deliberately the smallest text on the card */
body.blackjack-hub .card-foot .table-id-note{
  display:block;
  margin:2px 0 0;
  color:rgba(255,255,255,.34);
  font-size:.56rem;
  font-weight:600;
  letter-spacing:.05em;
  word-break:break-all;
}
body.blackjack-hub .card-foot .view-dashboard{
  display:flex;
  width:100%;
  margin-top:10px;
  min-height:38px;
  border-radius:10px;
  background:rgba(255,212,107,.1);
  border:1px solid rgba(255,212,107,.5);
  color:#ffe9b0;
  font-size:.82rem;
}
body.blackjack-hub .game-card:hover .card-foot .view-dashboard{
  background:rgba(255,212,107,.22);
}
body.blackjack-hub .card-foot .view-dashboard--locked{
  background:rgba(255,212,107,.2);
  border-color:rgba(255,212,107,.75);
}


/* ============================================================
   Operator template 2026-10-20: split LIMITS and COUNTS holders.
   ============================================================ */
body.blackjack-hub .card-corner{ min-width:132px; padding:7px 10px 8px; }
body.blackjack-hub .corner-head{
  display:block;
  text-align:center;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:3px;
}
body.blackjack-hub .limit-split,
body.blackjack-hub .count-split{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  align-items:center;
  gap:0;
}
body.blackjack-hub .limit-split::before,
body.blackjack-hub .count-split::before{
  content:"";
  grid-column:2;
  grid-row:1;
  width:1px;
  height:80%;
  background:rgba(255,212,107,.42);
  justify-self:center;
}
body.blackjack-hub .limit-cell,
body.blackjack-hub .count-cell{ text-align:center; padding:0 7px; min-width:0; }
body.blackjack-hub .limit-cell{ grid-row:1; }
body.blackjack-hub .limit-cell:first-child,
body.blackjack-hub .count-cell:first-child{ grid-column:1; }
body.blackjack-hub .limit-cell:last-child,
body.blackjack-hub .count-cell:last-child{ grid-column:3; }
body.blackjack-hub .count-cell{ grid-row:1; }

body.blackjack-hub .card-corner .stat-label{
  margin-bottom:0;
  font-size:.58rem;
  letter-spacing:.07em;
  color:rgba(255,255,255,.62);
}
body.blackjack-hub .card-corner .stat-value{
  font-size:1.15rem;
  font-weight:900;
  line-height:1.15;
  display:block;
}
/* money in gold, counts take their tcClass colour */
body.blackjack-hub .stat-value--money{ color:#ffd46b; font-size:1.05rem; white-space:nowrap; }

/* horizontal rule then DECKS LEFT, per the template */
body.blackjack-hub .count-decks{
  margin-top:4px;
  padding-top:4px;
  border-top:1px solid rgba(255,212,107,.42);
  text-align:center;
}
body.blackjack-hub .count-decks .stat-value{ font-size:1.05rem; }

/* bottom holder: identity left, button bottom-right, NO divider */
body.blackjack-hub .card-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
body.blackjack-hub .foot-id{ min-width:0; flex:1 1 auto; }
body.blackjack-hub .card-foot .view-dashboard{
  flex:0 0 auto;
  width:auto;
  margin-top:0;
  padding:0 14px;
  min-height:34px;
  white-space:nowrap;
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.06em;
}


/* LAST UPDATE lives at the foot of the LIMITS holder, per the operator template.
   It is the age of the data on the card, so it stays visible to every tier even
   when the counts themselves are gated - a figure without its age is the failure
   mode of the old dashboard. */
body.blackjack-hub .last-update{
  display:block;
  margin-top:4px;
  padding-top:3px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  text-align:left;
}
body.blackjack-hub .last-update b{ color:rgba(255,255,255,.66); font-weight:800; }


/* ============================================================
   FRAMED CARD - operator-supplied template used as an IMAGE.
   assets/blackjack/card-frame-20261020.webp, 1149x1369. All labels are painted
   into the artwork; CSS places ONLY the values, at percentages measured from the
   frame's own alpha channel. An earlier version recreated this chrome in CSS and
   was wrong - do not reintroduce that.
   ============================================================ */
body.blackjack-hub .game-card.framed{
  position:relative;
  aspect-ratio:1149/1369;
  container-type:inline-size;
  padding:0;
  border:0;
  border-radius:18px;
  overflow:hidden;
  background:#0b0c0e;
  box-shadow:none;
}
/* poster fills the card; the frame sits over it */
body.blackjack-hub .game-card.framed::before{
  content:"";
  position:absolute;
  inset:3.5% 5% 20% 5%;
  background-image:var(--card-art);
  background-size:cover;
  background-position:center;
  border-radius:10px;
  z-index:1;
  opacity:1;
  filter:none;
}
body.blackjack-hub .game-card.framed::after{ content:none; }
body.blackjack-hub .game-card.framed .card-frame{
  position:absolute;
  inset:0;
  z-index:4;
  background:url('/assets/blackjack/card-frame-20261020.webp') no-repeat center/100% 100%;
  pointer-events:none;
}
body.blackjack-hub .game-card.framed .frame-values{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}
body.blackjack-hub .game-card.framed .v{
  position:absolute;
  display:block;
  text-align:center;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  transform:translateX(-50%);
}
/* LIMITS - values sit under the painted MIN / MAX labels */
body.blackjack-hub .framed .v-min{ left:13.6%; top:12.6%; font-size:3.4cqw; color:#ffd46b; }
body.blackjack-hub .framed .v-max{ left:30.4%; top:12.6%; font-size:3.4cqw; color:#ffd46b; }
body.blackjack-hub .framed .v-age{
  left:5.6%; top:17.3%; transform:none; text-align:left;
  font-size:1.7cqw; font-weight:700; color:rgba(255,255,255,.52);
  letter-spacing:.04em; text-transform:uppercase;
}
/* COUNTS */
body.blackjack-hub .framed .v-true { left:69.8%; top:8.6%;  font-size:4cqw; }
body.blackjack-hub .framed .v-run  { left:86.8%; top:8.6%;  font-size:4cqw; }
body.blackjack-hub .framed .v-decks{ left:78.5%; top:15.9%; font-size:3.4cqw; }
body.blackjack-hub .framed .v-locked{
  left:78%; top:9.5%; width:30%; white-space:normal;
  font-size:2cqw; color:#ffd46b; letter-spacing:.04em; text-transform:uppercase;
}
body.blackjack-hub .framed .v.good { color:#5ee9b5; }
body.blackjack-hub .framed .v.warn { color:#ff7185; }
body.blackjack-hub .framed .v.muted{ color:rgba(255,255,255,.55); }
/* IDENTITY - left of the painted VIEW TABLE */
body.blackjack-hub .framed .v-name{
  left:7.8%; top:80.2%; transform:none; text-align:left;
  max-width:50%; white-space:normal;
  font-size:4.3cqw; color:#fff; line-height:1.08;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.blackjack-hub .framed .v-op{
  left:7.8%; top:88.6%; transform:none; text-align:left;
  font-size:2.5cqw; color:rgba(255,255,255,.72);
  letter-spacing:.07em; text-transform:uppercase;
}
body.blackjack-hub .framed .v-id{
  left:7.8%; top:92.6%; transform:none; text-align:left;
  font-size:1.8cqw; font-weight:600; color:rgba(255,255,255,.42); letter-spacing:.03em;
}
/* locked: mask the painted VIEW TABLE wording */
body.blackjack-hub .framed .v-cta{
  left:69.5%; top:88.2%; width:34%; padding:1cqw 0;
  background:rgba(14,10,4,.94); border-radius:6px;
  font-size:2.6cqw; color:#ffd46b; letter-spacing:.06em; text-transform:uppercase;
}
/* status/type chips float over the poster, just above the bottom bar */
body.blackjack-hub .game-card.framed .frame-chips{
  position:absolute;
  left:6%; right:6%; top:71.5%;
  z-index:5;
  display:flex; flex-wrap:wrap; gap:1.2cqw;
  pointer-events:none;
}
body.blackjack-hub .game-card.framed .frame-chips .meta-chip{
  min-height:0; padding:1cqw 2.2cqw; font-size:2cqw; border-radius:999px;
}
body.blackjack-hub .game-card.framed:hover{ transform:translateY(-2px); }


/* --- positioning corrections after rendering the real frame, 2026-10-20 ---
   1. The left-aligned values were still getting translateX(-50%) from
      `body.blackjack-hub .game-card.framed .v` (specificity 0,4,1), which beat the
      per-value `transform:none` (0,2,0). Name/operator/id were drawn half their
      width off the card. Matching the full selector so the override actually wins.
   2. The age sat on top of the painted LAST UPDATE label; it now sits to its right,
      right-aligned inside the limits holder, which ends at 39.5% of the card width.
*/
body.blackjack-hub .game-card.framed .v-name,
body.blackjack-hub .game-card.framed .v-op,
body.blackjack-hub .game-card.framed .v-id,
body.blackjack-hub .game-card.framed .v-age{
  transform:none;
  text-align:left;
}
body.blackjack-hub .game-card.framed .v-age{
  left:auto; right:6.5%; top:17.6%; text-align:right;
  font-size:1.6cqw; color:rgba(255,255,255,.58);
}
body.blackjack-hub .game-card.framed .v-name{ left:8%; top:79.8%; max-width:46%; }
body.blackjack-hub .game-card.framed .v-op{   left:8%; top:88.4%; }
body.blackjack-hub .game-card.framed .v-id{   left:8%; top:92.4%; max-width:46%;
  overflow:hidden; text-overflow:ellipsis; }
/* the age holder is only 39.5% wide, so keep it inside that box */
body.blackjack-hub .game-card.framed .v-age{ right:61.5%; }


/* Same specificity trap as the transform, caught on the second render: the base
   `body.blackjack-hub .game-card.framed .v` rule sets white-space:nowrap (0,4,1)
   and beat the per-value white-space:normal (0,2,0), so a long name could not wrap
   and was clipped mid-word ("Bet Behind Pro Blackja"). Full selector, and the name
   is allowed two lines with the type shrinking only when it needs to. */
body.blackjack-hub .game-card.framed .v-name{
  white-space:normal;
  max-width:48%;
  font-size:clamp(2.6cqw, 4.3cqw, 4.3cqw);
  line-height:1.05;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  top:79%;
}
/* long names get two lines, so nudge the operator/id down out of the way */
body.blackjack-hub .game-card.framed .v-op{ top:88.6%; }
body.blackjack-hub .game-card.framed .v-id{ top:92.5%; }


/* Game name spans the FULL width of the bottom bar, operator request 2026-10-20.
   The bar's inner span is 5.2%-94.6%, and the painted VIEW TABLE wording occupies
   x57-82% at y89-91.2%. The name therefore runs the full width but stays ABOVE
   that band: two lines at this size end around y87%, clear of it. The operator and
   id sit lower on the LEFT only, so they never meet VIEW TABLE horizontally. */
body.blackjack-hub .game-card.framed .v-name{
  max-width:84%;
  top:79.2%;
  font-size:4cqw;
  line-height:1.04;
}


/* Typographic tweaks, operator 2026-10-20:
     name  - down and larger
     id    - up slightly
     age   - left slightly and larger; it was 1.6cqw and genuinely hard to read,
             which matters because the age is the honesty signal on this card. */
body.blackjack-hub .game-card.framed .v-name{
  top:80.6%;
  font-size:4.7cqw;
}
body.blackjack-hub .game-card.framed .v-id{
  top:91.7%;
}
body.blackjack-hub .game-card.framed .v-age{
  right:63.5%;
  font-size:2.1cqw;
  color:rgba(255,255,255,.72);
}
