/* ============================================================
   US state pages v2 (.usst- vocabulary)
   Loaded on page-us-state.php / page-us-hub.php on top of
   tokens.css + article.css (the article shell). Mockup reference:
   mockups/us-states/{georgia,us-hub}.html.
   ============================================================ */

/* breakout: same recipe as .mpg-breakout (free-games.css) */
.usst-breakout {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(66rem, calc(100vw - 2 * var(--bji-gutter)));
  margin-block: var(--bji-space-4) var(--bji-space-5);
}

/* hero fact-check line (below the eeat byline) */
.usst-factcheck {
  margin: var(--bji-space-2) 0 0;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: #7fe0a8; /* readable green on the navy hero */
}

/* ---- quick answer ---- */
.usst-prose .usst-short {
  margin: var(--bji-space-5) 0;
  padding: var(--bji-space-4) var(--bji-space-5);
  background: var(--bji-blue-050);
  border: 1px solid var(--bji-blue-200);
  border-radius: var(--bji-radius-lg);
}
.usst-prose .usst-short h2 {
  font-size: var(--bji-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bji-blue-700);
  margin: 0 0 var(--bji-space-2);
}
.usst-prose .usst-short ul { margin: 0; padding-left: 1.2rem; }
.usst-prose .usst-short li { margin: var(--bji-space-1) 0; }

/* ---- kicker over section headings ---- */
.usst-prose .usst-kicker {
  font-size: var(--bji-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--bji-weight-bold);
  color: var(--bji-blue-600);
  margin: var(--bji-space-6) 0 0;
}
.usst-prose .usst-kicker + h2 { margin-top: var(--bji-space-1); }

/* ---- toplist (approved r3 "Quiet Card": preview stage expands over
   the details on hover/tap, bonus column fixed; see
   mockups/us-states/toplist/t1-quiet-r3.html) ---- */
.usst-toplist { display: flex; flex-direction: column; gap: var(--bji-space-3); }
.usst-casino {
  position: relative;
  display: grid;
  grid-template-columns: 15rem 1fr 14.5rem;
  background: var(--bji-surface);
  border: 1px solid var(--bji-gray-200);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(14 22 56 / .05);
  overflow: hidden;
}
.usst-casino--nostage { grid-template-columns: 1fr 14.5rem; }
.usst-rank {
  position: absolute; top: 0; left: 0; z-index: 6;
  width: 2.1rem; height: 2.1rem;
  background: var(--bji-navy-900); color: #fff;
  font-weight: var(--bji-weight-black); font-size: var(--bji-text-base);
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 0 10px 0;
}

/* preview stage: column 1; expands over column 2 while the bonus stays */
.usst-stage {
  position: absolute; inset: 0 auto 0 0; width: 15rem; z-index: 4;
  overflow: hidden;
  transition: width .32s cubic-bezier(.4,0,.2,1);
  background: var(--bji-navy-900);
}
.usst-casino.is-expanded .usst-stage { width: calc(100% - 14.5rem); }
/* no usable screenshot (missing, or a filename that breaks the CSS url()):
   a deliberate logo-on-gradient poster, not an empty/broken image. Reuses
   the navy palette so it reads as a variant of the real stage, not a patch. */
.usst-stage--fallback {
  background: radial-gradient(120% 100% at 50% 18%, #223268 0%, var(--bji-navy-900) 68%);
}
.usst-stage--fallback .usst-stage-brand { background: transparent; }
.usst-stage--fallback .usst-logochip { width: 8.4rem; height: 8.4rem; }
.usst-stage-media { position: absolute; inset: 0; background-size: cover; background-position: top center; transition: filter .35s, transform .35s; }
/* brand-panel idle state: the screenshot is texture, not content; the
   darkening normalizes any screenshot, so no per-casino curation */
.usst-casino:not(.is-expanded) .usst-stage-media { filter: blur(3px) saturate(.55) brightness(.9); transform: scale(1.08); }
/* PROTOTYPE — crop/filter tuning (2026-08-02, for owner review, not settled).
   Centered crop clears the featureless top band many casino homepage
   screenshots share; lighter blur/saturation keeps more of the shot legible
   as texture. Delete this block to revert to the two rules above. */
.usst-stage-media { background-position: center; }
.usst-casino:not(.is-expanded) .usst-stage-media { filter: blur(2px) saturate(.8) brightness(.9); }
.usst-stage-brand {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgb(14 22 56 / .74);
  opacity: 1; transition: opacity .3s;
}
/* fine grain: hides gradient banding, adds filmic texture */
.usst-stage-brand::after {
  content: ''; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.usst-casino.is-expanded .usst-stage-brand { opacity: 0; pointer-events: none; }
.usst-logochip {
  position: relative; z-index: 1; overflow: hidden;
  width: 7.4rem; height: 7.4rem; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgb(0 0 0 / .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.usst-logochip img { max-width: 74%; max-height: 60%; }
/* click targets: logo -> offer (every card, so the lift/sheen is honest on
   all of them), chip -> expand toggle, playing video -> offer */
.usst-logochip { cursor: pointer; text-decoration: none; }
.usst-stage-play { cursor: pointer; }
.usst-casino.is-expanded .usst-stage[data-usst-stage] { cursor: pointer; }
.usst-logochip:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 14px 32px rgb(0 0 0 / .45); }
/* one-pass sheen on hover entry; never loops */
.usst-logochip::after {
  content: ''; position: absolute; inset: -20%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .5) 50%, transparent 58%);
  transform: translateX(-120%);
}
.usst-logochip:hover::after { animation: usst-sheen .65s ease .08s 1 forwards; }
@keyframes usst-sheen { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .usst-logochip:hover { transform: none; }
  .usst-logochip:hover::after { animation: none; }
  .usst-stage-media { transition: none; }
}
/* lobby footage element (lazy-attached by js/us-state.js when the stage
   carries data-video); sits above the screenshot, below the chips */
.usst-stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .3s .1s; }
.usst-casino.is-expanded .usst-stage-video { opacity: 1; }
/* when real footage is playing, the stand-in pan is redundant */
.usst-casino.is-expanded .usst-stage:has(.usst-stage-video) .usst-stage-media { animation: none; }
/* footage stand-in until per-casino video assets exist: slow pan while
   expanded (a data-video attribute on the stage will swap in a real
   <video> via js/us-state.js when the pipeline lands) */
.usst-casino.is-expanded .usst-stage-media { animation: usst-kb 9s ease-in-out infinite alternate; }
@keyframes usst-kb { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.12) translateY(-4%); } }
@media (prefers-reduced-motion: reduce) { .usst-casino.is-expanded .usst-stage-media { animation: none; } }
.usst-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 22 56 / 0), rgb(14 22 56 / .22)); }
.usst-stage-play {
  position: absolute; left: .75rem; bottom: .7rem; z-index: 2;
  display: flex; align-items: center; gap: .45rem;
  background: rgb(14 22 56 / .78); color: #fff;
  font-size: var(--bji-text-xs); font-weight: var(--bji-weight-bold); letter-spacing: .04em;
  border-radius: var(--bji-radius-pill); padding: .3rem .75rem;
}
.usst-stage-play .tri { width: 0; height: 0; border-left: .5rem solid #fff; border-top: .32rem solid transparent; border-bottom: .32rem solid transparent; }
.usst-casino.is-expanded .usst-stage-play .lbl-idle { display: none; }
.usst-stage-play .lbl-live { display: none; }
.usst-casino.is-expanded .usst-stage-play .lbl-live { display: inline; }
.usst-casino.is-expanded .usst-stage-play .tri { border-left-color: var(--bji-red-500); }
.usst-stage-who {
  position: absolute; right: .85rem; bottom: .7rem; z-index: 2;
  color: #fff; font-weight: var(--bji-weight-black); font-size: var(--bji-text-base);
  text-shadow: 0 1px 6px rgb(14 22 56 / .6);
  opacity: 0; transition: opacity .25s .15s;
}
.usst-casino.is-expanded .usst-stage-who { opacity: 1; }

/* details */
.usst-det { grid-column: 2; padding: var(--bji-space-4) var(--bji-space-5); min-width: 0; }
.usst-casino--nostage .usst-det { grid-column: 1; }
.usst-titlerow { display: flex; align-items: center; gap: .7rem; }
.usst-logo {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem;
  border: 1px solid var(--bji-gray-200); border-radius: 10px; background: #fff;
}
.usst-logo img { max-width: 2.6rem; max-height: 2.2rem; }
.usst-titlerow h3 { margin: 0; font-size: var(--bji-text-xl); font-weight: var(--bji-weight-black); }
.usst-titlerow h3 a { color: var(--bji-text); text-decoration: none; }
.usst-ratingrow { display: flex; align-items: center; gap: .5rem; margin: .15rem 0 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.usst-ratingrow b { color: var(--bji-text); }
.usst-stars { position: relative; font-size: .9rem; letter-spacing: 1px; color: var(--bji-gray-300); }
.usst-stars .on { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #F1C410; }

.usst-pros { margin: var(--bji-space-3) 0; padding: 0; list-style: none; font-size: var(--bji-text-sm); }
.usst-pros li { padding: .16rem 0 .16rem 1.1rem; position: relative; }
.usst-pros li::before { content: ''; position: absolute; left: .1rem; top: .72em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--bji-blue-500); }

.usst-methods { border-top: 1px solid var(--bji-gray-100); padding-top: .75rem; font-size: .78rem; }
.usst-mrow { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .45rem; }
.usst-mrow .lbl { flex: none; font-weight: var(--bji-weight-bold); color: var(--bji-gray-800); }
.usst-pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.usst-pill { font: inherit; background: var(--bji-gray-100); color: var(--bji-gray-700); border: 0; border-radius: var(--bji-radius-pill); padding: .12rem .6rem; white-space: nowrap; }
.usst-pill--hidden { display: none; }
.usst-pills.is-open .usst-pill--hidden { display: inline-block; }
.usst-pill--more { background: #fff; border: 1px dashed var(--bji-gray-300); color: var(--bji-blue-600); cursor: pointer; }
.usst-pill--none { background: transparent; color: var(--bji-gray-400); padding-left: 0; }

.usst-eligible {
  margin: var(--bji-space-2) 0 0;
  font-size: .78rem;
  color: var(--bji-green-600);
  font-weight: var(--bji-weight-semibold);
}
.usst-eligible.na { color: var(--bji-text-muted); font-weight: var(--bji-weight-regular); }

/* cash-out clock: the fastest researched withdrawal time for this casino,
   rendered only where we hold the figure. A quiet differentiator, not a loud
   badge. */
.usst-cashout {
  display: flex; align-items: center; gap: 0.4rem;
  margin: var(--bji-space-2) 0 0;
  font-size: .82rem;
  color: var(--bji-navy-800);
}
.usst-cashout .ico { flex: 0 0 auto; color: var(--bji-green-600); }
.usst-cashout b { font-weight: var(--bji-weight-bold); }
.usst-cashout .via { color: var(--bji-text-muted); font-weight: var(--bji-weight-regular); }

/* bonus column: fixed, sunken surface */
.usst-bon {
  grid-column: 3; position: relative; z-index: 5;
  background:
    radial-gradient(24rem 16rem at 85% -20%, rgb(6 152 255 / 0.18), transparent 60%),
    linear-gradient(165deg, var(--bji-navy-800), var(--bji-navy-900) 75%);
  color: #fff;
  padding: var(--bji-space-4) var(--bji-space-5);
  display: flex; flex-direction: column; justify-content: center; text-align: center; gap: .35rem;
}
.usst-casino--nostage .usst-bon { grid-column: 2; }
.usst-bon .head { font-size: var(--bji-text-xl); font-weight: var(--bji-weight-black); line-height: 1.2; color: #fff; }
.usst-bon .type { font-size: .78rem; color: #aab6cf; }
.usst-bon .type a { color: #aab6cf; }
.usst-bon .cta {
  margin-top: .5rem; background: var(--bji-cta); color: #fff;
  font-weight: var(--bji-weight-bold); text-decoration: none;
  padding: .62rem 1rem; border-radius: 9px;
}
.usst-bon .cta:hover { background: var(--bji-cta-hover); color: #fff; }
.usst-code { font: inherit; margin-top: .45rem; font-size: .8rem; color: #aab6cf; background: none; border: 0; cursor: pointer; }
.usst-code b { background: rgb(255 255 255 / .08); border: 1px dashed rgb(255 255 255 / .35); border-radius: 6px; padding: .18rem .5rem; color: #fff; letter-spacing: .04em; }
.usst-bon .review { font-size: .8rem; color: var(--bji-blue-300); }

/* collapsed tail: the ranked remainder behind a native disclosure */
.usst-tail { margin-top: var(--bji-space-3); }
.usst-tail > summary {
  cursor: pointer;
  text-align: center;
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-link);
  padding: var(--bji-space-2);
  list-style-position: inside;
}
/* Once open, the reveal control moves to the END of the shown list (flex
   order), so "Show 10 more" always sits where the reader has just finished
   reading, not stranded above the cards it revealed. */
.usst-tail[open] { display: flex; flex-direction: column; }
.usst-tail[open] > summary { order: 2; margin-top: var(--bji-space-3); }
/* Under an active rail filter the tail is just more matches, so its "Show the
   remaining N" toggle is hidden and the tail's own top margin (space-3, the
   same as the gap between cards) makes the results read as one list. */
.usst-tail.is-filtering > summary { display: none; }
/* Batched tail reveal (js/banking.js): the remainder shows 10 at a time.
   Scoped to :not(.is-filtering) because an active rail filter turns the tail
   into "more matches", where batching would silently eat results. */
.usst-tail:not(.is-filtering) .usst-casino.usst-tail-hide { display: none; }

/* ---- law panel ---- */
.usst-law {
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  overflow-x: auto;
  background: var(--bji-surface);
}
.usst-law table { width: 100%; border-collapse: collapse; font-size: var(--bji-text-base); margin: 0; }
.usst-law th, .usst-law td { text-align: left; padding: var(--bji-space-2) var(--bji-space-4); border-top: 1px solid var(--bji-gray-100); vertical-align: top; }
.usst-law thead th {
  background: var(--bji-gray-050); border-top: 0;
  font-size: var(--bji-text-xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--bji-text-muted);
}
.usst-law td:first-child { font-weight: var(--bji-weight-semibold); white-space: nowrap; }
.usst-status {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  padding: 0.12rem 0.6rem;
  border-radius: var(--bji-radius-pill);
  white-space: nowrap;
}
.usst-status--legal { background: var(--bji-green-100); color: var(--bji-green-700); }
.usst-status--illegal { background: var(--bji-red-100); color: var(--bji-red-700); }
.usst-status--gray { background: var(--bji-amber-100); color: var(--bji-amber-700); }
.usst-law .note { color: var(--bji-text-muted); font-size: var(--bji-text-sm); }
/* licensed-casinos variant: brand lists wrap, partner column stays quiet */
.usst-lic td:first-child { font-weight: var(--bji-weight-semibold); white-space: normal; }
.usst-lic td:last-child { white-space: nowrap; }
.usst-lawfoot { font-size: var(--bji-text-sm); color: var(--bji-gray-500); margin: var(--bji-space-2) 0 0; }
.usst-lawsources { font-size: .78rem; color: var(--bji-gray-500); margin: .3rem 0 0; }
.usst-lawsources a { color: var(--bji-gray-600); text-decoration: underline; }
.usst-lawsources a:hover { color: var(--bji-link); }

/* penalty reality */
.usst-penalty {
  border-left: 4px solid var(--bji-amber-500);
  background: var(--bji-amber-100);
  border-radius: 0 var(--bji-radius-md) var(--bji-radius-md) 0;
  padding: var(--bji-space-4) var(--bji-space-5);
  margin-top: var(--bji-space-4);
}
.usst-penalty h3 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-lg); }
.usst-penalty p { margin: 0; font-size: var(--bji-text-base); }

/* ---- nearby states ---- */
.usst-nearby { display: flex; flex-wrap: wrap; gap: var(--bji-space-2); margin: var(--bji-space-4) 0; padding: 0; list-style: none; }
.usst-nearby li { margin: 0; }
.usst-nearby a {
  display: inline-block;
  padding: var(--bji-space-2) var(--bji-space-4);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-pill);
  text-decoration: none;
  color: var(--bji-text);
  font-weight: var(--bji-weight-semibold);
  font-size: var(--bji-text-sm);
}
.usst-nearby a:hover { border-color: var(--bji-blue-400); color: var(--bji-link); }

/* ---- hub grid ---- */
.usst-region { font-size: var(--bji-text-lg); font-weight: var(--bji-weight-black); margin: var(--bji-space-5) 0 var(--bji-space-2); }
.usst-hubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--bji-space-2); }
.usst-hubgrid a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bji-space-2);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-2) var(--bji-space-3);
  text-decoration: none;
  color: var(--bji-text);
  font-weight: var(--bji-weight-semibold);
  font-size: var(--bji-text-sm);
  background: var(--bji-surface);
}
.usst-hubgrid a:hover { border-color: var(--bji-blue-400); }
.usst-hubgrid .usst-status { font-size: 0.68rem; }

/* ---- responsive: stacked card; the stage becomes a strip that grows
   on tap while the details give way (same footage + offer end state as
   desktop, per the approved r3 mobile behavior) ---- */
@media (max-width: 780px) {
  .usst-casino, .usst-casino--nostage { grid-template-columns: 1fr; }
  .usst-logochip { width: 5.4rem; height: 5.4rem; }
  /* label above the pills so they wrap the full card width instead of
     stacking in the narrow column beside the label */
  .usst-mrow { display: block; margin-bottom: .6rem; }
  .usst-mrow .lbl { display: block; margin-bottom: .25rem; }
  .usst-stage { position: relative; width: 100%; height: 8rem; inset: auto; transition: height .32s cubic-bezier(.4,0,.2,1); }
  .usst-casino.is-expanded .usst-stage { width: 100%; height: 15rem; }
  .usst-casino.is-expanded .usst-det { display: none; }
  .usst-det, .usst-bon { grid-column: 1; }
  .usst-bon { border-left: 0; }
}

/* ---- legislative timeline (state history section) ---- */
.usst-timeline { border-left: 2px solid var(--bji-gray-200); margin: var(--bji-space-4) 0 var(--bji-space-5) .4rem; padding-left: 1.6rem; }
.usst-tl { position: relative; padding-bottom: var(--bji-space-4); }
.usst-tl:last-child { padding-bottom: 0; }
.usst-tl::before {
  content: ''; position: absolute; left: -2.03rem; top: .3rem;
  width: .72rem; height: .72rem; border-radius: 50%;
  background: var(--bji-surface-sunken); border: 2px solid var(--bji-navy-900);
}
.usst-tl-year { font-weight: var(--bji-weight-black); font-size: var(--bji-text-lg); }
.usst-tl p { margin: .15rem 0 0; color: var(--bji-text-muted); font-size: var(--bji-text-base); }
.usst-tl-dead {
  display: inline-block; font-size: var(--bji-text-xs); font-weight: var(--bji-weight-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--bji-red-700);
  background: var(--bji-red-100); border-radius: var(--bji-radius-pill); padding: .1rem .55rem; margin-left: .25rem;
}