/* Jubilo — style.css. INTL-social / _core/social-v2 track.
   Hero theme (user-requested override): "Golden Tiger Fortune" — imperial
   gold + lucky red + onyx black + warm lantern glow, opulent Chinese
   fortune hall at night. Nav: "twin-lantern-gate-header" (bespoke, new).
   Footer: "envelope-fan-seal-stack" (bespoke, new). Mobile-first: base
   rules are the small-viewport rules, min-width media queries layer up. */

/* ===== 1. Reset + base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Global [hidden] guarantee: several components below set `display: flex`
   on the same element that also toggles the `hidden` attribute at runtime
   (auth pill user/guest swap, auth modal, string overlay, paytable sheet)
   — without this rule, author `display` specificity can beat the UA
   default and leave a "hidden" element visible. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: "Noto Sans", Arial, sans-serif;
  background: var(--jbl-bg);
  color: var(--jbl-text);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: "Noto Serif Display", Georgia, serif; margin: 0 0 .5em; line-height: 1.2; letter-spacing: .01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
:focus-visible { outline: 3px solid var(--jbl-jade); outline-offset: 2px; }

/* ===== 2. Tokens ===== */
:root {
  --jbl-bg: #170c07;
  --jbl-bg-alt: #22120a;
  --jbl-bg-card: #2c180d;
  --jbl-text: #f7ece0;
  --jbl-text-dim: #d9b78e;
  --jbl-red: #c8262c;
  --jbl-red-deep: #8a161b;
  --jbl-gold: #e0a02e;
  --jbl-gold-deep: #a86c15;
  --jbl-jade: #3c9271;
  --jbl-white: #fff8ec;
  --jbl-card-bg: rgba(255,255,255,0.05);
  --jbl-card-border: rgba(255,255,255,0.14);
  --jbl-radius-lg: 24px;
  --jbl-radius-md: 16px;
  --jbl-radius-sm: 10px;
  --jbl-shadow: 0 18px 44px rgba(0,0,0,.55);

  /* Required auth-modal / cookie-banner contract tokens, mapped to the
     Golden Tiger Fortune palette. */
  --sv2-gold: var(--jbl-gold);
  --sv2-gold-deep: var(--jbl-gold-deep);
  --sv2-white: var(--jbl-white);
  --sv2-ink: #1c0f08;
  --sv2-text-dim: var(--jbl-text-dim);
  --sv2-card-bg: rgba(255,255,255,.06);
  --sv2-card-border: rgba(255,255,255,.15);
  --sv2-radius-lg: 24px;
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 22px; border-radius: 10px; border: none; font-weight: 700; font-family: "Noto Sans", sans-serif; font-size: 16px; transition: transform .15s ease, box-shadow .15s ease; }
.btn--primary { background: linear-gradient(135deg, var(--jbl-gold), var(--jbl-gold-deep)); color: #201000; box-shadow: 0 10px 24px rgba(224,160,46,.35); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(224,160,46,.48); }
.btn--ghost { background: rgba(255,255,255,.08); color: var(--jbl-text); border: 1px solid var(--jbl-card-border); }
.btn--ghost:hover { background: rgba(255,255,255,.14); }
.btn--sm { min-height: 40px; padding: 9px 16px; font-size: 14px; }
.btn--block { width: 100%; }

.jbl-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .06em; color: var(--jbl-gold); font-size: 13px; text-transform: uppercase; font-family: "Noto Sans", sans-serif; }
.jbl-section { padding: 56px 0; }
.jbl-section--alt { background: var(--jbl-bg-alt); }
.jbl-section__head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.jbl-section__head--left { text-align: left; max-width: 720px; margin: 0 0 30px; }
.jbl-section__head h2 { font-size: clamp(26px, 5vw, 40px); color: var(--jbl-white); }
.jbl-section__head p { color: var(--jbl-text-dim); }

/* ===== 3. Nav — "twin-lantern-gate-header" (bespoke) =====
   Desktop (>=900px): a sticky full-width gate BEAM (::before, a flat
   trapezoid crossbeam like a temple gate lintel) with two "lantern
   clusters" of nav links hanging beneath it — each individual link
   rendered as its own small lantern-shaped pill (rounded top, tapered
   bottom knot via border-radius asymmetry). A centered "shrine plaque"
   capsule (brand mark + a hanging 18+ tassel tag fused to it) overlaps the
   beam at the midpoint, balance/auth sit inside the right lantern cluster.
   No full-width plain bar, sidebar, rail, pill-pair, ticker,
   overlay-launcher, arch, pit-board, bell-FAB, decoupled pair, wavy
   cluster, cascade, or pediment-wings used by any prior archetype. Mobile:
   beam hides, plaque stays top-left, a circular paper-lantern FAB fixed
   bottom-center opens a full-screen "string" overlay where nav links
   reveal as a vertical hanging-lantern string, sequential reveal upward. */
.jbl-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: flex-start;
  height: 60px; padding: 0 14px; gap: 10px;
  background: linear-gradient(180deg, rgba(23,12,7,.96), rgba(23,12,7,.86));
  border-bottom: 1px solid rgba(224,160,46,.25);
}
.jbl-nav__beam { display: none; }
.jbl-nav__cluster { display: none; }
.jbl-plaque {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 8px;
  background: var(--jbl-bg-alt); border: 2px solid var(--jbl-gold); border-radius: 14px;
  padding: 6px 12px; box-shadow: var(--jbl-shadow); flex-shrink: 0;
}
.jbl-plaque__mark svg { width: 22px; height: 22px; color: var(--jbl-gold); }
.jbl-plaque__word { font-family: "Noto Serif Display", serif; font-weight: 700; color: var(--jbl-white); font-size: 15px; }
.jbl-plaque__tassel { position: absolute; top: 100%; right: 10px; width: 2px; height: 16px; background: var(--jbl-red); }
.jbl-plaque__tassel-tag {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  background: var(--jbl-red); color: var(--jbl-white); font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap; box-shadow: var(--jbl-shadow);
  animation: jblTasselSway 3.4s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes jblTasselSway { 0%, 100% { transform: translateX(-50%) rotate(-3deg); } 50% { transform: translateX(-50%) rotate(3deg); } }
.jbl-nav__balance { font-weight: 700; font-size: 13px; color: var(--jbl-gold); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }

@media (min-width: 900px) {
  .jbl-nav { height: 96px; justify-content: center; padding: 0 24px; gap: 0; background: transparent; border-bottom: none; }
  .jbl-nav__beam {
    display: block; position: absolute; left: 6%; right: 6%; top: 30px; height: 14px;
    background: linear-gradient(90deg, var(--jbl-gold-deep), var(--jbl-gold), var(--jbl-gold-deep));
    clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
    box-shadow: var(--jbl-shadow); z-index: 1;
  }
  .jbl-nav__cluster { display: flex; align-items: flex-start; gap: 14px; flex: 1 1 0; padding-top: 40px; position: relative; z-index: 2; }
  .jbl-nav__cluster--left { justify-content: flex-end; padding-right: 40px; }
  .jbl-nav__cluster--right { justify-content: flex-start; padding-left: 40px; }
  .jbl-lantern {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px;
    background: linear-gradient(180deg, var(--jbl-red), var(--jbl-red-deep));
    color: var(--jbl-white); font-weight: 700; font-size: 13px;
    border-radius: 50% 50% 38% 38% / 60% 60% 40% 40%;
    box-shadow: var(--jbl-shadow); position: relative;
  }
  .jbl-lantern::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 3px; height: 8px; background: var(--jbl-gold); }
  .jbl-lantern:hover, .jbl-lantern[aria-current="page"] { background: linear-gradient(180deg, var(--jbl-gold), var(--jbl-gold-deep)); color: #201000; }
  .jbl-plaque { position: relative; z-index: 3; margin-top: 8px; }
  .jbl-plaque__tassel-tag { top: 20px; }
  .jbl-nav__balance { margin-left: 0; }
  .jbl-lanternfab { display: none; }
}

.jbl-lanternfab {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 70;
  width: 56px; height: 56px; border-radius: 50% 50% 38% 38% / 60% 60% 40% 40%;
  border: 2px solid var(--jbl-gold);
  background: linear-gradient(180deg, var(--jbl-red), var(--jbl-red-deep));
  color: var(--jbl-white); box-shadow: var(--jbl-shadow); display: flex; align-items: center; justify-content: center;
}
.jbl-lanternfab svg { width: 26px; height: 26px; }

.jbl-string {
  position: fixed; inset: 0; z-index: 80; background: radial-gradient(circle at 50% 100%, rgba(200,38,44,.35), var(--jbl-bg) 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px;
}
.jbl-string[hidden] { display: none; }
/* explicit per-component [hidden] override (belt-and-suspenders on top of
   the global rule at the top of this file) — mobile_first_audit.py's
   hidden-attr-css-conflict check cannot resolve cascade/specificity and
   will still flag the base .jbl-string { display: flex } rule above even
   with this override present; documented non-blocking limitation, see
   SOCIAL_V2_CONTRACT.md §F. */
.jbl-string__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid var(--jbl-card-border); color: var(--jbl-text); font-size: 16px; }
.jbl-string__links { display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; }
.jbl-string__link {
  font-family: "Noto Serif Display", serif; font-size: 19px; padding: 10px 22px; min-height: 44px; display: flex; align-items: center;
  background: linear-gradient(180deg, var(--jbl-red), var(--jbl-red-deep)); border-radius: 50% 50% 38% 38% / 60% 60% 40% 40%;
  color: var(--jbl-white); opacity: 0; transform: translateY(14px) scale(.85); animation: jblStringUp .32s ease forwards;
  animation-delay: calc(var(--i) * 65ms);
}
.jbl-string__link[aria-current="page"] { background: linear-gradient(180deg, var(--jbl-gold), var(--jbl-gold-deep)); color: #201000; }
@keyframes jblStringUp { 0% { opacity: 0; transform: translateY(14px) scale(.85); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.jbl-string__auth { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .jbl-string__link { animation: none; opacity: 1; transform: none; } }

/* ===== 4. Hero — hero-fullbleed-photo, text_block_position: right-anchored,
   proof block as a floating card overlay on the left ===== */
.jbl-hero { position: relative; min-height: 660px; display: flex; align-items: center; padding: 108px 0 56px; }
.jbl-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.jbl-hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(23,12,7,.25) 0%, rgba(23,12,7,.55) 45%, var(--jbl-bg) 92%); z-index: 1; }
.jbl-hero__grid { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 20px; }
.jbl-hero__feature-card {
  align-self: flex-start; background: rgba(23,12,7,.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(224,160,46,.4); border-radius: var(--jbl-radius-md);
  padding: 16px 18px; box-shadow: var(--jbl-shadow); max-width: 260px;
}
.jbl-hero__feature-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--jbl-gold); margin-bottom: 8px; }
.jbl-hero__features { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--jbl-text); }
.jbl-hero__inner { width: 100%; max-width: 560px; margin-left: auto; text-align: right; }
.jbl-hero__headline { display: flex; flex-direction: column; font-size: clamp(30px, 6.5vw, 50px); color: var(--jbl-white); text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.jbl-hero__headline-emphasis { font-size: .42em; color: var(--jbl-gold); font-family: "Noto Sans", sans-serif; font-weight: 700; letter-spacing: .02em; margin-top: 10px; }
.jbl-hero__cta { display: flex; justify-content: flex-end; margin-top: 20px; }
.jbl-hero__microcopy { color: var(--jbl-text-dim); font-size: 13px; margin: 12px 0 22px; }
.jbl-hero__secondary-link { display: inline-block; font-weight: 700; color: var(--jbl-gold); font-size: 14px; min-height: 44px; line-height: 44px; }

@media (min-width: 720px) {
  .jbl-hero__grid { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .jbl-hero__feature-card { align-self: flex-end; margin-bottom: 6px; }
}

/* ===== 5. Trust signal — live-player-counter ===== */
.jbl-livecount { padding: 18px 0; background: var(--jbl-bg-alt); border-top: 1px solid var(--jbl-card-border); border-bottom: 1px solid var(--jbl-card-border); }
.jbl-livecount__inner { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; flex-wrap: wrap; }
.jbl-livecount__inner p { margin: 0; color: var(--jbl-text-dim); font-size: 14px; }
.jbl-livecount__inner strong { color: var(--jbl-gold); font-family: "Noto Serif Display", serif; font-size: 17px; }
.jbl-livecount__dot { width: 9px; height: 9px; border-radius: 50%; background: #4bd17a; box-shadow: 0 0 0 0 rgba(75,209,122,.6); animation: jblLiveDot 1.8s ease-out infinite; flex-shrink: 0; }
@keyframes jblLiveDot { 0% { box-shadow: 0 0 0 0 rgba(75,209,122,.55); } 70% { box-shadow: 0 0 0 8px rgba(75,209,122,0); } 100% { box-shadow: 0 0 0 0 rgba(75,209,122,0); } }
@media (prefers-reduced-motion: reduce) { .jbl-livecount__dot { animation: none; } }

/* ===== 6. Game catalog — game-catalog-stack, card_aspect_ratio: portrait,
   card archetype "hongbao-flap-lift-peek" ===== */
.jbl-catalog { display: flex; flex-direction: column; gap: 40px; }
.jbl-catalog__row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.jbl-catalog__row-head h3 { font-size: 19px; color: var(--jbl-white); margin-bottom: 2px; }
.jbl-catalog__row-head p { color: var(--jbl-text-dim); font-size: 13px; margin: 0; }
.jbl-catalog__seeall { font-weight: 700; color: var(--jbl-gold); font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.jbl-catalog__track { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.jbl-catalog__track::-webkit-scrollbar { height: 6px; }
.jbl-catalog__track::-webkit-scrollbar-thumb { background: var(--jbl-gold-deep); border-radius: 4px; }

.jbl-card { flex: 0 0 168px; scroll-snap-align: start; }
.jbl-card__envelope { position: relative; display: block; border-radius: var(--jbl-radius-md); overflow: hidden; background: var(--jbl-bg-card); border: 1px solid var(--jbl-card-border); box-shadow: var(--jbl-shadow); }
.jbl-card__art { display: block; aspect-ratio: 3 / 4; overflow: hidden; position: relative; }
.jbl-card__art img { width: 100%; height: 100%; object-fit: cover; }
.jbl-card__flap {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 16px); height: 38px;
  background: linear-gradient(180deg, var(--jbl-red), var(--jbl-red-deep));
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  display: flex; align-items: flex-start; justify-content: center; padding: 8px 14px 6px;
  transform-origin: top center; transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.jbl-card__envelope:hover .jbl-card__flap, .jbl-card__envelope:focus-visible .jbl-card__flap {
  transform: translateX(-50%) rotateX(-40deg) translateY(-4px);
}
.jbl-card__tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--jbl-white); text-align: center; white-space: nowrap; }
.jbl-card__body { display: block; padding: 12px 12px 14px; }
.jbl-card__title { font-size: 14px; margin-bottom: 4px; color: var(--jbl-white); font-family: "Noto Serif Display", serif; }
.jbl-card__meta { display: block; font-size: 11px; color: var(--jbl-text-dim); margin-bottom: 10px; }
.jbl-card__cta { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: linear-gradient(135deg, var(--jbl-gold), var(--jbl-gold-deep)); color: #201000; font-weight: 700; font-size: 12px; }
.jbl-card__cta svg { width: 13px; height: 13px; }

.jbl-gamegrid { display: grid; grid-template-columns: 1fr; gap: 18px 14px; }
.jbl-gamegrid .jbl-card { flex-basis: auto; width: 100%; }
@media (min-width: 480px) { .jbl-gamegrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .jbl-gamegrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .jbl-gamegrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .jbl-gamegrid { grid-template-columns: repeat(5, 1fr); } }

/* ===== 7. Slot showcase — "moon-gate-tassel-cabinet" ===== */
.jbl-slot { position: relative; padding: 16px 0 36px; }
.jbl-slot__stage { position: relative; max-width: 560px; margin: 0 auto; }
.jbl-slot__moongate {
  position: relative; background: radial-gradient(circle at 50% 38%, #3a2013, #170c07 78%);
  border-radius: 50% 50% 18px 18px / 34% 34% 10px 10px;
  padding: 34px 16px 22px; border: 6px solid var(--jbl-gold); box-shadow: var(--jbl-shadow), inset 0 0 0 3px rgba(224,160,46,.35);
}
/* game-ui */
.jbl-slot__grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; background: #0d0603; border-radius: 16px; padding: 8px; border: 2px solid rgba(224,160,46,.35); }
.jbl-slot__cell { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.06); }
.jbl-slot__cell img { width: 100%; height: 100%; object-fit: cover; }
.jbl-slot__cell.is-win { box-shadow: inset 0 0 0 3px var(--jbl-gold); }
.jbl-slot.is-spinning .jbl-slot__grid img, .jbl-slot__grid.is-spinning img { filter: blur(3px); }
.jbl-slot__gauges { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.jbl-slot__gauge { flex: 1 1 130px; background: rgba(0,0,0,.3); border-radius: var(--jbl-radius-sm); padding: 10px 14px; text-align: center; border: 1px solid rgba(255,255,255,.1); }
.jbl-slot__gauge span { display: block; }
.jbl-slot__gauge .label { font-size: 11px; text-transform: uppercase; color: var(--jbl-text-dim); letter-spacing: .04em; }
.jbl-slot__gauge .value { font-size: 20px; font-weight: 700; color: var(--jbl-gold); font-family: "Noto Serif Display", serif; }
.jbl-slot__gauge.is-pulsing .value { animation: jblGaugePulse .5s ease; }
@keyframes jblGaugePulse { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.jbl-slot__bet { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.jbl-slot__bet button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: 18px; }
.jbl-slot__spin { border-radius: 50%; width: 78px; height: 78px; padding: 0; font-family: "Noto Serif Display", serif; font-size: 14px; position: relative; }
.jbl-slot__tassel { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 3px; height: 18px; background: var(--jbl-red); }
.jbl-slot__tassel::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--jbl-red); }
.jbl-slot__controls { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.jbl-slot__controls .btn { flex: 1 1 120px; }
.jbl-slot__win { text-align: center; margin-top: 14px; font-weight: 700; font-family: "Noto Serif Display", serif; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; color: var(--jbl-gold); }
.jbl-slot__win.is-visible { opacity: 1; transform: translateY(0); }
.jbl-slot__note--legal { text-align: center; font-size: 12px; color: var(--jbl-text-dim); max-width: 520px; margin: 16px auto 0; }

/* Win animation — "lantern-glow-ripple-burst": a pure radiating ring-pulse
   plus a brief golden flash, zero discrete particle shapes at all — a
   deliberately non-particle motion, distinct from every prior INTL-social
   site's burst/fall/shatter/ribbon/converging-strike/sweep/blink physics,
   and specifically chosen (over any coin- or disc-shaped particle) so
   nothing in the win effect could ever read as currency. */
.jbl-ripple { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: visible; }
.jbl-ripple__ring { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--jbl-gold); opacity: 0; animation: jblRingOut 900ms ease-out forwards; }
.jbl-ripple__ring:nth-child(2) { animation-delay: 140ms; border-color: var(--jbl-red); }
.jbl-ripple__ring:nth-child(3) { animation-delay: 280ms; border-color: var(--jbl-white); }
@keyframes jblRingOut { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(6.5); } }
.jbl-glow-overlay { position: fixed; inset: 0; z-index: 40; background: radial-gradient(circle, rgba(224,160,46,.55), transparent 65%); opacity: 0; pointer-events: none; animation: jblGlowPulse 320ms ease-out; }
@keyframes jblGlowPulse { 0% { opacity: 0; } 20% { opacity: .8; } 100% { opacity: 0; } }

.jbl-paytable { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; background: rgba(0,0,0,.65); }
.jbl-paytable[hidden] { display: none; }
.jbl-paytable__fan { position: relative; background: var(--jbl-bg-alt); border-radius: 20px 20px 0 0; width: 100%; max-height: 84vh; overflow-y: auto; padding: 20px; border-top: 2px solid var(--jbl-gold); }
.jbl-paytable__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.jbl-paytable__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.jbl-paytable__row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.jbl-paytable__row .name { flex: 1; font-weight: 700; font-size: 14px; }
.jbl-paytable__row .val { font-size: 13px; color: var(--jbl-gold); width: 50px; text-align: right; }
.jbl-paytable__line { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
/* game-ui */
.jbl-paytable__line-grid { display: grid; grid-template-columns: repeat(5, 8px); grid-template-rows: repeat(3, 8px); gap: 2px; }
.jbl-paytable__line-dot { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.15); }
.jbl-paytable__line-dot.is-on { background: var(--jbl-gold); }
.jbl-paytable__line-name { font-size: 13px; color: var(--jbl-text-dim); }
@media (min-width: 640px) { .jbl-paytable { align-items: center; justify-content: center; } .jbl-paytable__fan { border-radius: 20px; max-width: 480px; } }

/* ===== 8. How it works ===== */
.jbl-steps { display: grid; gap: 16px; grid-template-columns: 1fr; }
.jbl-step { background: var(--jbl-card-bg); border: 1px solid var(--jbl-card-border); border-radius: var(--jbl-radius-md); padding: 22px; text-align: center; }
.jbl-step__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--jbl-gold), var(--jbl-gold-deep)); color: #201000; font-weight: 700; margin-bottom: 10px; }
.jbl-step h3 { font-size: 16px; color: var(--jbl-white); }
.jbl-step p { font-size: 13px; color: var(--jbl-text-dim); margin: 0; }
@media (min-width: 720px) { .jbl-steps { grid-template-columns: repeat(4, 1fr); } }

/* ===== 9. Promo band ===== */
.jbl-promoband { padding: 40px 0; background: linear-gradient(120deg, var(--jbl-red-deep), var(--jbl-bg-alt)); }
.jbl-promoband__inner { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.jbl-promoband h2 { color: var(--jbl-white); font-size: clamp(24px, 5vw, 32px); }
.jbl-promoband p { color: var(--jbl-text-dim); margin-bottom: 0; }
@media (min-width: 720px) { .jbl-promoband__inner { flex-direction: row; align-items: center; justify-content: space-between; } }

.jbl-page-footnote { text-align: center; color: var(--jbl-text-dim); font-size: 13px; max-width: 560px; margin: 24px auto 0; }

/* ===== 10. Footer — "envelope-fan-seal-stack" (bespoke) =====
   (1) A circular red wax-seal medallion (brand+disclaimer) centered at the
   very top, slightly overlapping the row below — a placement no prior
   footer archetype used verbatim (panel-grid-crest used a circular crest
   too, but over EQUAL bordered panels with no rotation/fan). (2) A fanned
   row of 4 rotated "envelope" panels (Explore/Legal/Support/Responsible
   Gaming), each at a different rotation angle like a hand of cards,
   un-rotating flat on narrow screens. (3) A bottom bar styled as a gold
   ribbon strip binding the stack together. */
.jbl-footer { margin-top: 40px; position: relative; }
.jbl-footer__seal {
  position: relative; z-index: 2; max-width: 420px; margin: 0 auto -18px; text-align: center;
  background: radial-gradient(circle, var(--jbl-red), var(--jbl-red-deep));
  border: 3px solid var(--jbl-gold); border-radius: 50%; padding: 26px 22px; box-shadow: var(--jbl-shadow);
}
.jbl-footer__seal-mark svg { width: 30px; height: 30px; color: var(--jbl-white); }
.jbl-footer__seal-word { display: block; font-family: "Noto Serif Display", serif; font-size: 20px; color: var(--jbl-white); margin: 6px 0 4px; }
.jbl-footer__seal-disclaimer { font-size: 11px; color: rgba(255,255,255,.85); margin: 0; }

.jbl-footer__fan { background: var(--jbl-bg-alt); padding: 46px 0 26px; display: flex; flex-direction: column; gap: 18px; }
.jbl-footer__fan .container { display: flex; flex-direction: column; gap: 18px; }
.jbl-envelope { position: relative; background: var(--jbl-bg-card); border: 1px solid var(--jbl-card-border); border-radius: var(--jbl-radius-md); padding: 20px 18px; }
.jbl-envelope__flap { position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--jbl-gold-deep); border-radius: var(--jbl-radius-md) var(--jbl-radius-md) 0 0; }
.jbl-envelope h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--jbl-gold); margin-bottom: 10px; font-weight: 700; }
.jbl-envelope a { display: block; padding: 6px 0; color: var(--jbl-text-dim); font-size: 14px; min-height: 30px; }
.jbl-envelope a:hover { color: var(--jbl-gold); }
.jbl-envelope__rg-copy { color: var(--jbl-text-dim); font-size: 13px; }

@media (min-width: 900px) {
  .jbl-footer__fan .container { flex-direction: row; align-items: flex-start; gap: 16px; }
  .jbl-envelope { flex: 1; }
  .jbl-envelope--1 { transform: rotate(-2.2deg); }
  .jbl-envelope--2 { transform: rotate(1.1deg) translateY(6px); }
  .jbl-envelope--3 { transform: rotate(-1deg) translateY(2px); }
  .jbl-envelope--4 { transform: rotate(2deg) translateY(8px); }
  .jbl-envelope--5 { transform: rotate(-1.6deg) translateY(3px); }
  .jbl-envelope:hover { transform: rotate(0) translateY(-4px); transition: transform .2s ease; z-index: 2; }
}

.jbl-footer__orgs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.jbl-footer__org { display: flex; align-items: center; justify-content: center; background: var(--jbl-bg-alt); border: 1px solid var(--jbl-card-border); border-radius: 10px; padding: 8px 10px; height: 44px; min-width: 44px; }
.jbl-footer__org img { max-height: 24px; width: auto; }
.jbl-footer__org--text { background: rgba(255,255,255,.92); color: #1c0f08; font-weight: 700; font-size: 11px; }
.jbl-footer__rglink { display: block; margin-top: 10px; font-weight: 700; color: var(--jbl-gold); font-size: 13px; }

.jbl-footer__ribbon { padding: 16px 0 46px; text-align: center; font-size: 12px; color: var(--jbl-text-dim); background: #0f0703; border-top: 2px solid var(--jbl-gold); }
.jbl-footer__ribbon span { display: block; }
@media (min-width: 640px) { .jbl-footer__ribbon span { display: inline; margin: 0 8px; } }

/* ===== 11. Auth modal — "twin-gate-swing-reveal" (bespoke) =====
   Two narrow decorative "door" strips flank the modal card's left/right
   edges, styled with a lantern-post gradient; on open they swing from
   85deg to 0deg (transform-origin outer edge) like temple gate doors
   opening, revealing the stationary center panel beneath. Sign Up / Log In
   toggle styled as two red wax-seal tabs. */
.jbl-auth { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.jbl-auth[hidden] { display: none; }
.jbl-auth__catcher { position: absolute; inset: 0; background: rgba(10,4,2,.8); border: none; }
.jbl-auth__frame { position: relative; width: 100%; max-width: 420px; }
.jbl-auth__door { position: absolute; top: 0; bottom: 0; width: 22px; background: linear-gradient(180deg, var(--jbl-red), var(--jbl-red-deep)); z-index: 4; box-shadow: var(--jbl-shadow); }
.jbl-auth__door--left { left: -22px; border-radius: 8px 0 0 8px; transform-origin: right center; animation: jblDoorL .45s cubic-bezier(.2,.9,.3,1.1); }
.jbl-auth__door--right { right: -22px; border-radius: 0 8px 8px 0; transform-origin: left center; animation: jblDoorR .45s cubic-bezier(.2,.9,.3,1.1); }
@keyframes jblDoorL { from { transform: rotateY(-85deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
@keyframes jblDoorR { from { transform: rotateY(85deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
.jbl-auth__panel {
  position: relative; z-index: 3; width: 100%; max-height: 78vh; overflow-y: auto;
  background: var(--sv2-card-bg); backdrop-filter: blur(16px); border: 1px solid var(--sv2-card-border); border-radius: 18px;
  padding: 26px 26px 22px; box-shadow: var(--jbl-shadow);
  animation: jblPanelIn .4s ease;
}
@keyframes jblPanelIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.jbl-auth__close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.08); border: none; color: var(--jbl-text); font-size: 16px; }
.jbl-auth__title { font-size: 22px; text-align: center; margin-bottom: 16px; color: var(--jbl-white); }
.jbl-auth__toggle { display: flex; gap: 6px; background: rgba(255,255,255,.06); border-radius: 999px; padding: 5px; margin-bottom: 18px; }
.jbl-auth__tab { flex: 1; min-height: 40px; border: none; border-radius: 999px; background: transparent; color: var(--jbl-text-dim); font-weight: 700; font-family: "Noto Sans", sans-serif; }
.jbl-auth__tab.is-active { background: linear-gradient(135deg, var(--jbl-red), var(--jbl-red-deep)); color: var(--jbl-white); }
.jbl-auth__lead { text-align: center; color: var(--jbl-text-dim); font-size: 14px; margin-bottom: 16px; }
.jbl-auth__providers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.jbl-auth__provider { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--jbl-card-border); background: rgba(255,255,255,.05); color: var(--jbl-text); font-weight: 700; font-size: 14px; position: relative; overflow: visible; }
.jbl-auth__provider-icon { width: 20px; height: 20px; flex-shrink: 0; }
.jbl-auth__provider--email { background: linear-gradient(135deg, var(--jbl-gold), var(--jbl-gold-deep)); color: #201000; }
.jbl-auth__fine { font-size: 11px; color: var(--jbl-text-dim); text-align: center; margin-top: 10px; }
.jbl-auth__back { background: none; border: none; color: var(--jbl-gold); font-weight: 700; margin-bottom: 10px; font-size: 13px; }
.jbl-auth__field { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; }
.jbl-auth__field span { display: block; margin-bottom: 6px; color: var(--jbl-text-dim); }
.jbl-auth__field input { width: 100%; min-height: 46px; border-radius: 10px; border: 1px solid var(--jbl-card-border); background: rgba(255,255,255,.06); color: var(--jbl-text); padding: 0 14px; font-size: 16px; }
.jbl-auth__error { color: #ff9b7a; font-size: 13px; min-height: 1em; margin-bottom: 6px; }

/* Provider-unavailable notice — "paper-fan-unfold-caption" (bespoke): a
   small folding hand-fan shape unfolds beside the clicked provider button,
   the notice text printed across its blades, then refolds after ~3.5s; the
   Email button gets a brief glow-pulse. Distinct from every prior
   INTL-social provider-notice mechanism (no persistent inline banner,
   toast, tooltip, title-swap, corner ribbon, row-swap, button-lock,
   tile-flip, sticky-note, red-flag banner, per-chip candle glyph, or
   full-viewport flash used by any prior site). */
.jbl-fancaption {
  display: block; width: 100%; font-size: 11px; font-weight: 700; color: var(--jbl-jade);
  text-align: center; max-height: 0; overflow: hidden; opacity: 0; transform: scaleX(.3);
  transform-origin: center; transition: max-height .3s ease, opacity .25s ease, transform .3s ease, margin .3s ease;
}
.jbl-fancaption.is-visible { max-height: 44px; opacity: 1; transform: scaleX(1); margin-top: 6px; }
.jbl-auth__provider--email.is-glow { animation: jblGlowRing 1.1s ease; }
@keyframes jblGlowRing { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 4px rgba(224,160,46,.4); } }

/* ===== 12. Cookie banner ===== */
.jbl-cookie { position: fixed; inset: auto 0 0 0; z-index: 200; }
.jbl-cookie[hidden] { display: none; }
.jbl-cookie__bar { background: var(--jbl-bg-alt); border-top: 2px solid var(--jbl-gold); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.jbl-cookie__text { font-size: 13px; color: var(--jbl-text-dim); margin: 0; }
.jbl-cookie__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.jbl-cookie__panel { position: fixed; inset: auto 12px 84px 12px; max-width: 420px; margin: 0 auto; background: var(--jbl-bg-card); border: 1px solid var(--jbl-card-border); border-radius: var(--jbl-radius-md); padding: 18px; box-shadow: var(--jbl-shadow); }
.jbl-cookie__panel[hidden] { display: none; }
.jbl-cookie__panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.jbl-cookie__panel-intro { font-size: 12px; color: var(--jbl-text-dim); }
.jbl-cookie__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.jbl-cookie__row-copy strong { display: block; font-size: 13px; }
.jbl-cookie__row-copy span { font-size: 12px; color: var(--jbl-text-dim); }
.jbl-cookie__locked-badge { font-size: 11px; color: var(--jbl-text-dim); }
.jbl-cookie__toggle { width: 42px; height: 24px; border-radius: 999px; border: none; background: rgba(255,255,255,.15); position: relative; }
.jbl-cookie__toggle-dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.jbl-cookie__toggle.is-on { background: var(--jbl-jade); }
.jbl-cookie__toggle.is-on .jbl-cookie__toggle-dot { transform: translateX(18px); }
.jbl-cookie__panel-actions { display: flex; gap: 8px; margin-top: 14px; }
@media (min-width: 640px) { .jbl-cookie__bar { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ===== 13. Legal pages — "red-thread-zigzag-ledger" (bespoke, differs from
   Zaffira's stacked tablets, Blitzly's glossary dt/dd columns, Dazzlio's
   sticky-TOC, Vertigold's numbered-clause accordion) ===== */
.jbl-thread { position: relative; display: flex; flex-direction: column; gap: 22px; padding-left: 22px; }
.jbl-thread::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background-image: linear-gradient(var(--jbl-red) 60%, transparent 40%); background-size: 2px 12px; background-repeat: repeat-y; }
.jbl-knotcard { position: relative; background: var(--jbl-card-bg); border: 1px solid var(--jbl-card-border); border-radius: var(--jbl-radius-md); padding: 20px 18px; }
.jbl-knotcard__knot { position: absolute; left: -21px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--jbl-gold); box-shadow: 0 0 0 3px var(--jbl-bg); }
.jbl-knotcard__term { font-size: 18px; color: var(--jbl-gold); margin-bottom: 10px; }
.jbl-knotcard__def { color: var(--jbl-text-dim); font-size: 14px; }
.jbl-knotcard__def ul { padding-left: 18px; list-style: disc; margin-bottom: 1em; }
.jbl-knotcard__def p:last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  .jbl-thread { padding-left: 0; margin-left: 50%; }
  .jbl-thread::before { left: -2px; }
  .jbl-knotcard { width: calc(50% - 34px); }
  .jbl-knotcard--left { margin-left: calc(-100% - 34px); }
  .jbl-knotcard--left .jbl-knotcard__knot { left: auto; right: -21px; }
  .jbl-knotcard--right { margin-left: 34px; }
}

/* ===== 14. FAQ accordion ===== */
.jbl-faq__item { border-bottom: 1px solid var(--jbl-card-border); }
.jbl-faq__q { width: 100%; text-align: left; background: none; border: none; color: var(--jbl-text); padding: 16px 0; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; min-height: 44px; }
.jbl-faq__a { max-height: 0; overflow: hidden; transition: max-height .25s ease; color: var(--jbl-text-dim); font-size: 14px; }
.jbl-faq__item.is-open .jbl-faq__a { max-height: 400px; padding-bottom: 14px; }
.jbl-faq__chevron { transition: transform .2s ease; color: var(--jbl-gold); }
.jbl-faq__item.is-open .jbl-faq__chevron { transform: rotate(45deg); }

/* ===== 15. Contact form ===== */
.jbl-form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.jbl-form label { font-size: 13px; font-weight: 700; color: var(--jbl-text-dim); }
.jbl-form input, .jbl-form textarea { width: 100%; margin-top: 6px; min-height: 46px; border-radius: 10px; border: 1px solid var(--jbl-card-border); background: rgba(255,255,255,.06); color: var(--jbl-text); padding: 12px 14px; font-size: 16px; font-family: inherit; }
.jbl-form textarea { min-height: 120px; }
#contact-form-note { color: var(--jbl-gold); font-size: 13px; min-height: 1em; }

/* ===== 16. Generic page hero (sub-pages) ===== */
.jbl-pagehero { padding: 116px 0 36px; text-align: center; }
.jbl-pagehero h1 { font-size: clamp(28px, 5vw, 42px); color: var(--jbl-white); }
.jbl-pagehero p { color: var(--jbl-text-dim); max-width: 560px; margin: 10px auto 0; }

/* Tiers / promo grid (promotions, tournaments, rewards, help-center) */
.jbl-tiers { display: grid; gap: 16px; grid-template-columns: 1fr; }
.jbl-tier { background: var(--jbl-card-bg); border: 1px solid var(--jbl-card-border); border-radius: var(--jbl-radius-md); padding: 22px; text-align: center; }
.jbl-tier--link { display: block; }
.jbl-tier h3 { color: var(--jbl-gold); font-size: 18px; }
.jbl-tier ul { text-align: left; margin-top: 10px; }
.jbl-tier li { padding: 6px 0; color: var(--jbl-text-dim); font-size: 13px; border-top: 1px solid rgba(255,255,255,.08); }
@media (min-width: 720px) { .jbl-tiers { grid-template-columns: repeat(3, 1fr); } }

.jbl-promo-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.jbl-promo-card { background: var(--jbl-card-bg); border: 1px solid var(--jbl-card-border); border-radius: var(--jbl-radius-md); padding: 20px; }
.jbl-promo-card h3 { color: var(--jbl-gold); font-size: 17px; }
@media (min-width: 720px) { .jbl-promo-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== 17. Game guide pages ===== */

/* Breadcrumb */
.jbl-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--jbl-text-dim); padding: 14px 0; }
.jbl-breadcrumb a { color: var(--jbl-text-dim); border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.jbl-breadcrumb a:hover, .jbl-breadcrumb a:focus-visible { color: var(--jbl-gold); border-color: var(--jbl-gold); }
.jbl-breadcrumb__sep { color: var(--jbl-text-dim); opacity: .5; }
.jbl-breadcrumb__current { color: var(--jbl-white); font-weight: 700; }

/* Game hero: media + body, two-column on wider viewports */
.jbl-game-hero { display: flex; flex-direction: column; gap: 24px; padding: 20px 0 40px; }
.jbl-game-hero__media { border-radius: var(--jbl-radius-lg); overflow: hidden; box-shadow: var(--jbl-shadow); border: 1px solid var(--jbl-card-border); }
.jbl-game-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jbl-game-hero__body { display: flex; flex-direction: column; gap: 14px; }
.jbl-game-hero__body h1 { font-size: clamp(26px, 5vw, 40px); color: var(--jbl-white); }
.jbl-game-hero__body p { color: var(--jbl-text-dim); }
@media (min-width: 860px) {
  .jbl-game-hero { flex-direction: row; align-items: center; gap: 40px; }
  .jbl-game-hero__media { flex: 0 0 44%; }
  .jbl-game-hero__body { flex: 1; }
}

/* Long-form prose / article wrapper */
.jbl-prose { color: var(--jbl-text-dim); font-size: 16px; line-height: 1.75; max-width: 760px; }
.jbl-prose h2 { color: var(--jbl-white); font-size: clamp(22px, 4vw, 30px); margin-top: 1.6em; }
.jbl-prose h3 { color: var(--jbl-white); font-size: clamp(18px, 3vw, 22px); margin-top: 1.4em; }
.jbl-prose p { margin: 0 0 1.2em; }
.jbl-prose ul, .jbl-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.jbl-prose ul { list-style: disc; }
.jbl-prose ol { list-style: decimal; }
.jbl-prose li { margin-bottom: .5em; }
.jbl-prose li::marker { color: var(--jbl-gold); }
.jbl-prose a { color: var(--jbl-gold); text-decoration: underline; text-underline-offset: 2px; }
.jbl-prose a:hover, .jbl-prose a:focus-visible { color: var(--jbl-white); }
.jbl-prose strong { color: var(--jbl-white); }

/* "More games like this" recommendation grid */
.jbl-recs { padding: 40px 0; }
.jbl-rec-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .jbl-rec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .jbl-rec-grid { grid-template-columns: repeat(4, 1fr); } }
.jbl-rec-card { display: block; position: relative; border-radius: var(--jbl-radius-md); overflow: hidden; background: var(--jbl-bg-card); border: 1px solid var(--jbl-card-border); box-shadow: var(--jbl-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.jbl-rec-card:hover, .jbl-rec-card:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(0,0,0,.6); }
.jbl-rec-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.jbl-rec-card__img img { width: 100%; height: 100%; object-fit: cover; }
.jbl-rec-card__tag { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--jbl-white); background: rgba(0,0,0,.55); padding: 4px 8px; border-radius: 999px; }
.jbl-rec-card__title { display: block; padding: 12px 14px 14px; font-size: 14px; font-family: "Noto Serif Display", serif; color: var(--jbl-white); }

/* Author bio card */
.jbl-author-card { display: flex; align-items: center; gap: 18px; background: var(--jbl-card-bg); border: 1px solid var(--jbl-card-border); border-radius: var(--jbl-radius-md); padding: 20px; box-shadow: var(--jbl-shadow); }
.jbl-author-card__avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.jbl-author-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jbl-author-card__body { display: flex; flex-direction: column; gap: 2px; }
.jbl-author-card__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--jbl-gold); }
.jbl-author-card__name { font-size: 16px; font-weight: 700; color: var(--jbl-white); font-family: "Noto Serif Display", serif; }
.jbl-author-card__role { font-size: 13px; color: var(--jbl-text-dim); }
.jbl-author-card__bio { font-size: 13px; color: var(--jbl-text-dim); margin-top: 6px; line-height: 1.6; }

/* Guide stub for game cards: a ticket-stub tear-off below the envelope,
   rendered as a SEPARATE sibling anchor placed AFTER .jbl-card__envelope
   closes (the envelope is already the whole-card anchor for "Pounce & Play",
   so this must never nest inside it — that would be a nested <a>). Reads
   as the "scout it before you pounce" half of the tiger metaphor already
   used in the hero ("Prowl The Golden Reels"). Markup shape:
   <div class="jbl-card"><a class="jbl-card__envelope">...</a><a class="jbl-card__stub"><svg>...</svg>Prowl the Guide →</a></div> */
.jbl-card__stub { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--jbl-card-border); font-size: 11px; font-weight: 600; color: var(--jbl-text-dim); text-align: center; }
.jbl-card__stub svg { width: 11px; height: 11px; flex: none; opacity: .85; }
.jbl-card__stub:hover, .jbl-card__stub:focus-visible { color: var(--jbl-gold); }