/* List Sweepstakes Casinos - one stylesheet, one style per component.
   Every component below is rendered on /ui-kit/ (draft builds) by the same Python function the pages use.
   A page may change a component's LAYOUT (grid, columns) but not its LOOK: a different look is a modifier
   listed in the component's own section, never a page-specific copy.

   1. Tokens            5. Components: figures, map, cards (link, studio, casino, bonus, game, game tile)
   2. Base              6. Components: panels, data (kv, rows, tables, facts), law feed, timeline, offers
   3. Layout            7. Components: games hub filter, game hero, demo box
   4. Primitives        8. Page layouts: home first screen, review layout, grids
*/

/* 1. Tokens ------------------------------------------------------------------ */
/* Inter, self-hosted (site-static/fonts/, licence Inter-OFL.txt): one variable file for every weight, Latin only */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --navy: #0e1a33; --navy-2: #1b3266; --ink: #131a2a; --muted: #5a6478; --bg: #ffffff; --card: #ffffff;
  --line: #e1e6ef; --line-strong: #c3cde0; --soft: #f8fafd; --link: #1d4ed8; --cta: #15803d; --cta-hover: #166534; --gold: #f5b301;
  --ok: #067647; --ok-bg: #d3f8df; --watch: #175cd3; --watch-bg: #dbeafe;
  --warn: #93370d; --warn-bg: #fef0c7; --bad: #b42318; --bad-bg: #fee4e2; --gold-bg: #fff4cc; --gold-ink: #7a5200;
  --muted-bg: #eceff5; --muted-ink: #4a556b; --chip-bg: #eef2f9;
  --on-dark: #dbe4f5; --on-dark-muted: #aab7d1;
  --radius: 16px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06);
  --shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .1);
}

/* 2. Base -------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.65 var(--font); }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 10px 0 12px; }
h2 { font-size: 1.65rem; font-weight: 800; margin: 44px 0 14px; }
h3 { font-size: 1.1rem; margin: 24px 0 6px; }
h4 { font-size: 1rem; font-weight: 700; margin: 16px 0 6px; }
.small { font-size: .85rem; color: var(--muted); }
.tbv { color: var(--muted); font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main > ul:not([class]) li, [data-block="sources"] li { margin-bottom: 6px; }
main ol:not(.brand-list) li { margin-bottom: 8px; }
@media (max-width: 560px) { body { font-size: 16px; } }

/* 3. Layout: page width, header, intro band, footer ------------------------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
main.wrap { padding-top: 28px; padding-bottom: 64px; }  /* main.wrap: .wrap alone would win over a plain main rule */
main > :first-child { margin-top: 0; }  /* every page starts its content at the same distance from the band */

.top { background: var(--navy); position: sticky; top: 0; z-index: 10; }
.top .wrap { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.05rem; }
.main { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.main a { color: #cfd8ea; text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: .95rem; font-weight: 600; }
.main a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
/* header drop-down: the link goes to the hub, the arrow opens its sub-pages (nav.js) */
.nav-group { position: relative; display: flex; align-items: center; border-radius: 8px; }
.nav-toggle { display: grid; place-items: center; width: 26px; height: 34px; padding: 0 8px 0 0; border: 0; border-radius: 0 8px 8px 0;
  background: none; color: #cfd8ea; cursor: pointer; }
.nav-toggle svg { transition: transform .15s; }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu { display: none; position: absolute; top: calc(100% + 12px); left: -6px; z-index: 20; min-width: 220px; padding: 8px;
  background: var(--card); border-radius: 14px; box-shadow: 0 16px 40px rgba(8, 15, 32, .22), 0 2px 6px rgba(8, 15, 32, .08); }
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }  /* bridge: the pointer can cross the gap */
.nav-menu::after { content: ""; position: absolute; top: -5px; left: 34px; width: 12px; height: 12px; background: var(--card);
  border-radius: 2px; transform: rotate(45deg); }
.main .nav-menu a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); white-space: nowrap; }
.main .nav-menu a:hover { background: var(--soft); color: var(--link); }
.main .nav-menu .nav-all { display: block; margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
  color: var(--link); font-size: .9rem; }
.nav-menu.open { display: block; }
html:not(.js) .nav-toggle { display: none; }
/* desktop: link and arrow read as one item, with one hover background */
@media (min-width: 861px) {
  .main .nav-group > a { padding-right: 4px; border-radius: 8px 0 0 8px; }
  .main .nav-group > a:hover { background: none; }
  .nav-group:hover, .nav-group:has(.nav-toggle[aria-expanded="true"]) { background: rgba(255, 255, 255, .1); }
  .nav-group:hover > a, .nav-group:hover .nav-toggle, .nav-toggle[aria-expanded="true"] { color: #fff; }
}
@media (hover: hover) and (min-width: 861px) {
  .nav-group:hover .nav-menu { display: block; }
  .nav-group:hover .nav-toggle svg { transform: rotate(180deg); }
}
.burger { display: none; }
/* phone and tablet: one compact bar, the menu opens under it */
@media (max-width: 860px) {
  .top .wrap { flex-wrap: nowrap; justify-content: space-between; gap: 12px; min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
  .brand { min-width: 0; font-size: 1rem; }
  .brand .mark { flex: none; }
  .brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .js .burger { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -10px; padding: 0;
    background: none; border: 0; border-radius: 10px; cursor: pointer; }
  .js .burger:hover, .js .burger[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
  .burger span, .burger span::before, .burger span::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff;
    transition: transform .18s, background-color .18s; }
  .burger span { position: relative; }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
  .burger span::before { top: -7px; }
  .burger span::after { top: 7px; }
  .burger[aria-expanded="true"] span { background: transparent; }
  .burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
  .js .main { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; gap: 0;
    padding: 6px 12px 12px; background: var(--navy); border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 32px rgba(8, 15, 32, .35); max-height: calc(100vh - 56px); overflow-y: auto; }
  .js .main.open { display: flex; }
  .js .main a { padding: 13px 12px; font-size: 1.05rem; border-radius: 10px; }
  /* inside the phone menu the drop-down opens in place, indented under its link */
  .js .nav-group { flex-wrap: wrap; }
  .js .nav-group > a { flex: 1; padding-right: 12px; }
  .js .nav-toggle { width: 48px; height: 48px; padding: 0; border-radius: 10px; }
  .js .nav-toggle:hover, .js .nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: #fff; }
  .js .nav-toggle svg { width: 16px; height: 16px; }
  .js .nav-menu { position: static; width: 100%; margin: 0 0 4px; padding: 0 0 0 14px;
    background: none; border-left: 2px solid rgba(255, 255, 255, .14); border-radius: 0; box-shadow: none; }
  .js .nav-menu::before, .js .nav-menu::after, .js .main .nav-menu .nav-all { display: none; }
  .js .main .nav-menu a { color: #cfd8ea; padding: 11px 12px; font-size: 1rem; }
  .js .main .nav-menu a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  /* no JavaScript: the links stay on screen as one scrollable row under the name */
  html:not(.js) .top .wrap { flex-wrap: wrap; gap: 2px 12px; }
  html:not(.js) .main { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  html:not(.js) .main a { white-space: nowrap; }
  html:not(.js) .nav-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) { .burger span, .burger span::before, .burger span::after { transition: none; } }
.geo { background: var(--gold); color: var(--navy); padding: 10px 16px; text-align: center; font-weight: 600; }
.geo a { color: inherit; }

/* intro band: every first screen is dark. hero (home, games hubs) is taller, bad / warn (state pages) add a red or amber edge,
   game (game pages, section 7) shows the cover. Below the band the page is one white background */
.band { color: #fff; padding: 22px 0 32px;
  background: radial-gradient(900px 420px at 85% 10%, rgba(46, 144, 250, .28), transparent 60%),
              radial-gradient(700px 380px at 0% 100%, rgba(245, 179, 1, .14), transparent 60%),
              linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
.band-hero { padding: 40px 0 44px; }
.band-bad { border-top: 4px solid var(--bad);
  background: radial-gradient(900px 420px at 85% 0%, rgba(240, 68, 56, .38), transparent 60%),
              linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
.band-warn { border-top: 4px solid #f79009;
  background: radial-gradient(900px 420px at 85% 0%, rgba(247, 144, 9, .34), transparent 60%),
              linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
.crumbs { font-size: .85rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.trust { color: var(--muted); font-size: .9rem; margin: 0 0 16px; }
.trust a { color: inherit; }
.answer { font-size: 1.2rem; line-height: 1.55; margin: 0; font-weight: 500; }
.band .answer { color: var(--on-dark); font-weight: 400; }
.band .answer a { color: #fff; }
.band .crumbs, .band .crumbs a, .band .trust { color: var(--on-dark-muted); }
.band .small, .band .small a { color: var(--on-dark); }
.band .flag { border-color: rgba(255, 255, 255, .3); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }

/* footer: the site's name and the responsible-gaming note, columns of links, the legal lines */
.bottom { background: var(--navy); color: var(--on-dark-muted); padding: 48px 0 28px; font-size: .92rem; line-height: 1.6; }
.bottom a { color: var(--on-dark); text-decoration: none; }
.bottom a:hover { color: #fff; text-decoration: underline; }
.bottom .small { color: var(--on-dark-muted); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; align-items: start;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.foot-brand .brand { margin-bottom: 12px; }
.foot-brand .brand:hover { text-decoration: none; }
.foot-brand p { margin: 0; max-width: 380px; }
.rg { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.rg strong { color: #fff; }
.rg a { text-decoration: underline; }
.rg-phone { white-space: nowrap; }  /* the helpline number never breaks at its hyphens */
.age-badge { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold);
  display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; padding: 32px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1); }
.foot-title { margin: 0 0 12px; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-legal { display: grid; gap: 6px; padding-top: 20px; }
.foot-legal p { margin: 0; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }

/* 4. Primitives -------------------------------------------------------------- */
/* surface: every white box on the page has the same background, border, radius and shadow */
.panel, .map, .table-wrap, .brand-card, .hero-card, .gcard, .tile-card, .top-list, .source, .stat, .facts-list, .toc, .gfilter, .proscons > div {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
/* lift: every card that is a link rises a little under the pointer */
a.source, .brand-card, .gcard, .tile-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.source:hover, .brand-card:hover, .gcard:hover, .tile-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
@media (prefers-reduced-motion: reduce) {
  a.source, .brand-card, .gcard, .tile-card, .gcard-art, .tile { transition: none; }
  a.source:hover, .brand-card:hover, .gcard:hover, .tile-card:hover, .gcard:hover .gcard-art { transform: none; } }

/* buttons: .btn (green action), .btn-ghost (secondary), .btn-light (on a dark band); .btn-lg for a first screen;
   .btn-os .btn-ios / .btn-android (an app button in its platform's look) */
.btn { display: inline-block; background: var(--cta); color: #fff; text-decoration: none; padding: 11px 22px; border: 0;
  border-radius: var(--radius-sm); font: inherit; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 0 var(--cta-hover); }
.btn:hover { background: var(--cta-hover); }
.btn-ghost { background: #fff; color: var(--link); border: 1.5px solid var(--line-strong); box-shadow: none; padding: 9.5px 12px; }
.btn-ghost:hover { background: #f1f5fd; border-color: var(--link); }
/* a section's "see all" link set as a button under the section (.more-link around a .btn-ghost) */
.more-link { margin: 20px 0 0; }
.more-link .btn { display: block; width: 100%; text-align: center; padding-left: 20px; padding-right: 20px; }
.btn-light { background: #fff; color: var(--navy); box-shadow: 0 2px 0 #b9c4d9; }
.btn-light:hover { background: #e9eef8; }
.app-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }  /* one row at full width: two halves, or one */
/* platform buttons (ed.app_download_links): each in its OS look with its mark. They open the casino's site, never a store */
.btn-os { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 16px; line-height: 1.15;
  text-align: left; box-shadow: none; }
.btn-os span { display: grid; font-size: 1.05rem; font-weight: 700; }
.btn-os small { font-size: .7rem; font-weight: 500; opacity: .85; }
.btn-os .os-icon { flex: none; }
.btn-ios { background: #000; color: #fff; }
.btn-ios:hover { background: #262626; }
.btn-android { background: #202124; color: #fff; }
.btn-android .os-icon { color: #3ddc84; }
.btn-android:hover { background: #33353a; }
.btn-lg { padding: 14px 28px; font-size: 1.06rem; border-radius: 12px; text-align: center; }
@media (max-width: 900px) { .btn { text-align: center; } }

/* status pill: the legal status of a state */
.pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pill-banned, .pill-ban_enacted { background: var(--bad-bg); color: var(--bad); }
.pill-restricted, .pill-unknown { background: var(--warn-bg); color: var(--warn); }
.pill-bill_pending { background: var(--watch-bg); color: var(--watch); }
.pill-no_specific_ban { background: var(--ok-bg); color: var(--ok); }

/* chips (ed.pills): a list of short values or links. <b> inside is a count.
   Modifiers: .pills-states (green, states where a casino is open) with .pills-states-off (grey, states where it is not),
   .pills-on-dark (tags on a dark band),
   .pills-accent (prominent links: game collections), .pills-pay (payment methods with their mark: ed.pay_pills) */
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pills li { margin: 0; padding: 4px 11px; border-radius: 999px; background: var(--chip-bg); font-size: .86rem; font-weight: 600; line-height: 1.4; }
.pills a { text-decoration: none; }
.pills a:hover { text-decoration: underline; }
.pills b { display: inline-block; min-width: 22px; margin-left: 2px; padding: 0 6px; border-radius: 999px; text-align: center;
  font-size: .78rem; background: var(--watch-bg); color: var(--watch); }
.pills-states li { background: var(--ok-bg); }
.pills-states a { color: var(--ok); }
.pills-states-off li { background: var(--muted-bg); }
.pills-states-off a { color: var(--muted-ink); }
.pills-on-dark { margin: 0 0 14px; }
.pills-on-dark li { padding: 3px 11px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--on-dark); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); }
.pills-on-dark li:first-child { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.pills-accent { margin: -4px 0 16px; }
.pills-accent li { padding: 0; background: none; }
.pills-accent a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 16px; border-radius: 999px; text-decoration: none;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: var(--shadow); }
.pills-accent a:hover { filter: brightness(1.2); text-decoration: none; }
.pills-accent b { min-width: 28px; background: var(--gold); color: var(--navy); font-size: .82rem; }
.pills-pay { gap: 8px; }
.pills-pay li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 9px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.pay-icon { flex: none; }  /* width and height come from the markup: a wordmark is wider than a square mark */

/* badge (ed.badge): a small label - a count after a title, a tag on a card. Tones: muted, ok, watch, gold */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .7rem; line-height: 1.5; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
.badge-muted { background: var(--muted-bg); color: var(--muted-ink); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-watch { background: var(--watch-bg); color: var(--watch); }
.badge-gold { background: var(--gold-bg); color: var(--gold-ink); }
summary .badge { margin-left: 6px; }

/* coins: Gold Coins and Sweeps Coins of a bonus */
.coins { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.coin { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.coin b { font-size: 1.1rem; font-weight: 800; }
.coin-gc { background: var(--gold-bg); color: var(--gold-ink); }
.coin-sc { background: var(--ok-bg); color: var(--ok); }
.code { font: 700 .9rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--chip-bg);
  border: 1px dashed #9aa7bd; border-radius: 6px; padding: 2px 8px; letter-spacing: .04em; }
.yn { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .95em; font-weight: 800; }
.yn-yes { background: var(--ok-bg); color: var(--ok); }
.yn-no { background: var(--muted-bg); color: var(--muted-ink); }
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; }
.stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 1px; }
.stars::before { content: "★★★★★"; color: #d3d9e4; }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; }
.stars-fill::before { content: "★★★★★"; color: var(--gold); }

/* notes: advertising disclosure, warning, editor's placeholder */
.disclosure { font-size: .82rem; color: var(--muted); margin: 0 0 16px; }
/* warning: a bold first sentence on its own line, an amber edge and a mark */
.warn { position: relative; margin: 0 0 16px; padding: 4px 0 4px 54px; max-width: none; font-size: .95rem; line-height: 1.55;
  color: #7a2e0e; border-left: 4px solid #f79009; }
.warn::before { content: "!"; position: absolute; left: 16px; top: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid;
  place-items: center; background: #f79009; color: #fff; font-weight: 800; font-size: .95rem; line-height: 1; }
.warn > strong:first-child { display: block; margin-bottom: 4px; font-size: 1.02rem; color: #4e1d09; }
.warn a { color: inherit; font-weight: 600; }
.warn ul { margin: 6px 0; }
@media (max-width: 600px) { .warn { padding: 2px 0 2px 48px; } .warn::before { left: 12px; top: 2px; } }
.editor-note { border: 1.5px dashed var(--line-strong); color: var(--muted); padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: .88rem; background: rgba(255, 255, 255, .6); }

/* pictures: casino logo (square), studio logo (20:9), state flag; a monogram where there is no file */
.logo { width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  font-weight: 800; letter-spacing: .02em; background: linear-gradient(135deg, hsl(var(--h) 62% 42%), hsl(calc(var(--h) + 40) 66% 30%)); }
.logo-img { display: block; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.studio-logo { display: block; width: 100%; height: auto; aspect-ratio: 20 / 9; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
span.studio-logo { display: grid; place-items: center; color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg, hsl(var(--h) 62% 42%), hsl(calc(var(--h) + 40) 66% 30%)); }
.band .studio-logo { float: right; width: 187px; margin: 4px 0 12px 24px; box-shadow: var(--shadow); }
.flag { float: right; height: 84px; width: auto; margin: 4px 0 12px 24px; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.flag-sm { width: 30px; height: auto; vertical-align: middle; margin-right: 10px; border: 1px solid var(--line); border-radius: 2px; }
@media (max-width: 700px) {
  .band .studio-logo { width: 107px; margin-left: 14px; font-size: 1rem; }
  .flag { height: 48px; margin-left: 14px; } }

/* section title: a rule across with a short gold mark. A "see all" link never sits next to it: it is a button under
   the section (more_button, .more-link) */
main > h2, main > section > h2, .review-body > section > h2, .panel > h2 {
  position: relative; margin: 64px 0 18px; padding-top: 26px; border-top: 1px solid var(--line-strong); scroll-margin-top: 84px; }
main > h2::before, main > section > h2::before, .review-body > section > h2::before, .panel > h2::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 4px; border-radius: 2px; background: var(--gold); }
main > :first-child, main > section:first-child > h2, .review-body > section:first-child > h2 { margin-top: 0; }

/* tabs (tabs()): switch between related lists, the current one filled. Sits in the intro band under the answer */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 20px 0 0; padding: 4px; background: var(--chip-bg); border-radius: 12px; }
.tabs a, .tabs span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9px; font-weight: 700;
  font-size: .92rem; text-decoration: none; color: var(--ink); }
.tabs a:hover { background: #fff; color: var(--link); }
.tabs [aria-current] { background: var(--navy); color: #fff; box-shadow: 0 2px 6px rgba(14, 26, 51, .25); }
.tabs b { min-width: 24px; padding: 0 7px; border-radius: 999px; text-align: center; font-size: .75rem; background: #fff; color: var(--muted-ink); }
.tabs [aria-current] b { background: rgba(255, 255, 255, .2); color: #fff; }
@media (max-width: 600px) {  /* phone: one row of equal cells, the count under the name */
  .tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; width: 100%; }
  .tabs a, .tabs span { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center;
    font-size: .82rem; line-height: 1.2; }
}

/* state picker */
.state-pick { margin: 24px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; max-width: 520px; }
/* the same select as the filters (.gfilter select), at first-screen size: its own arrow, the open list styled where the browser allows */
.state-pick select { font: inherit; font-size: 1rem; font-weight: 600; min-width: 0; height: 52px; padding: 0 46px 0 18px; border-radius: 12px;
  border: 1px solid var(--line-strong); appearance: none; cursor: pointer; color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235a6478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 13px;
  transition: box-shadow .15s ease; }
.state-pick select:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245, 179, 1, .55); }
.band-hero .state-pick select { border: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.band-hero .state-pick select:focus-visible { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 3px rgba(245, 179, 1, .7); }
.state-pick .btn { height: 52px; padding-top: 0; padding-bottom: 0; }
@media (max-width: 480px) { .state-pick { grid-template-columns: minmax(0, 1fr); } }

/* 5. Components: figures, map, cards ---------------------------------------- */
/* stat tiles: a figure and its caption; the top edge carries the tone (ok / bad / warn / watch / plain). .stats-dark on a dark band */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.stat { padding: 16px 18px; border-top: 4px solid var(--line); }
.stat b { display: block; font-size: 2.1rem; line-height: 1.1; font-weight: 800; }
.stat span { display: block; font-size: .88rem; line-height: 1.35; color: var(--muted); margin-top: 4px; }
.stat-ok { border-top-color: #17b26a; } .stat-bad { border-top-color: #f04438; }
.stat-warn { border-top-color: #f79009; } .stat-watch { border-top-color: #2e90fa; } .stat-plain { border-top-color: var(--gold); }
.stats-dark { gap: 10px; margin: 28px 0 0; }
.stats-dark .stat { padding: 10px 12px; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); border-top-width: 3px; box-shadow: none; }
.stats-dark .stat b { font-size: 1.6rem; color: #fff; }
.stats-dark .stat span { font-size: .76rem; color: var(--on-dark-muted); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* tile map of the states (tile_map): the grid on top, the legend with a count per tone under it.
   A tile is a solid tone with a name-and-status tip; pointing at a legend line dims every other tone */
.map { margin: 18px 0; padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.tilemap { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; max-width: 760px; width: 100%; margin: 0 auto; }
.tone-ok { --t1: #17a34a; --t2: #05603a; --tt: #fff; }
.tone-watch { --t1: #3b7bf0; --t2: #1847a8; --tt: #fff; }
.tone-warn { --t1: #fcc53a; --t2: #e8890c; --tt: #3d2402; }
.tone-bad { --t1: #ec5257; --t2: #a3181c; --tt: #fff; }
.tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; text-decoration: none;
  background: linear-gradient(145deg, var(--t1), var(--t2)); color: var(--tt);
  font-size: clamp(.6rem, 1.5vw, .86rem); font-weight: 800; letter-spacing: .03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 1px 2px rgba(16, 24, 40, .14);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease; }
.tile:hover, .tile:focus-visible { z-index: 2; transform: translateY(-3px) scale(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 22px -8px var(--t2); }
/* the tip exists only while shown: a hidden one would still widen the page at the right edge */
.tile:hover::after, .tile:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); padding: 5px 10px; border-radius: 8px; background: var(--navy); color: #fff; white-space: nowrap;
  font-size: .76rem; font-weight: 600; letter-spacing: 0; box-shadow: 0 8px 20px rgba(16, 24, 40, .25); pointer-events: none;
  animation: tip-in .15s ease; }
@keyframes tip-in { from { opacity: 0; transform: translate(-50%, 4px); } }
@media (hover: none) { .tile:hover::after { content: none; } }
.legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.legend .key { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: .86rem; font-weight: 600; line-height: 1.3;
  color: var(--ink); cursor: default; transition: border-color .15s ease, background .15s ease; }
.legend .key:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.legend .key b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.legend i { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(145deg, var(--t1), var(--t2)); }
.map:has(.key-ok:hover) .tile:not(.tone-ok), .map:has(.key-watch:hover) .tile:not(.tone-watch),
.map:has(.key-warn:hover) .tile:not(.tone-warn), .map:has(.key-bad:hover) .tile:not(.tone-bad) { opacity: .15; }
@media (max-width: 860px) { .map { gap: 20px; } .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .map { padding: 14px; } .tilemap { gap: 3px; } .tile { border-radius: 5px; }
  .legend { gap: 6px; } .legend .key { gap: 8px; padding: 8px 10px; font-size: .78rem; } .legend .key b { font-size: 1.05rem; } }

/* link card (link_card): one link - an optional picture or badge, the title, a line of text. A studio card is a link card with the studio logo */
.tile-card { padding: 18px 20px; text-decoration: none; color: var(--ink); display: grid; gap: 4px; align-content: start; }
.tile-card strong { color: var(--link); font-size: 1.05rem; line-height: 1.3; }
.tile-card > span:last-child { font-size: .9rem; color: var(--muted); }
.tile-card .badge { justify-self: start; margin-bottom: 6px; }
.tile-card .studio-logo { margin-bottom: 6px; }
/* top list (top_list): a short ranking by one fact. The fact under the title, then rank, logo, casino and its figure, the full list under it */
.top-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }  /* two a row: names and figures keep one line */
@media (max-width: 700px) { .top-grid { grid-template-columns: minmax(0, 1fr); } }
.top-list { padding: 18px 20px; display: grid; align-content: start; }
.top-list h3 { margin: 0; font-size: 1.1rem; }
.top-list > p { margin: 2px 0 10px; font-size: .85rem; color: var(--muted); }
.top-list ol { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: top; }
.top-list li { counter-increment: top; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line); }
.top-list li::before { content: counter(top); font-weight: 800; color: var(--muted); }
.top-list li:first-child::before { color: var(--gold-ink); }
.top-list li a { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; text-decoration: none; }
.top-list li a:hover span { text-decoration: underline; }
.top-list .logo { width: 32px; height: 32px; border-radius: 8px; font-size: .65rem; flex: none; }
.top-list li b { font-size: .9rem; text-align: right; }
.top-more { font-weight: 700; text-decoration: none; }
.top-more:hover { text-decoration: underline; }
.card-grid-dense .tile-card { padding: 12px 14px; }
.card-grid-dense .tile-card strong { font-size: .95rem; }
.card-grid-dense .tile-card > span:last-child { font-size: .82rem; }

/* casino card (brand_cards) and its bonus variant (bonus_cards): fixed tracks, so the columns line up down the list */
.brand-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
/* a long list shows its first cards, more.js hides the rest behind the button under it */
.brand-list > li[hidden] { display: none; }
.show-all { display: flex; width: 100%; justify-content: center; margin: -6px 0 18px; }
.show-all[hidden] { display: none; }
.brand-card { overflow: hidden; }
.bc-head { display: grid; grid-template-columns: 28px 72px minmax(0, 1fr) minmax(0, 1.15fr) 156px;
  align-items: center; gap: 14px 18px; padding: 18px 20px; }
.bonus-card .bc-head { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.15fr) 156px; }
.rank { font-weight: 800; font-size: .95rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.ranked .rank { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid;
  place-items: center; font-size: .85rem; }
.ranked .brand-card:first-child { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245, 179, 1, .35), var(--shadow); }
.ranked .brand-card:first-child .rank { background: var(--gold); color: var(--navy); }
.bc-main { min-width: 0; display: grid; gap: 2px; }
.bc-name { font-size: 1.2rem; font-weight: 800; line-height: 1.25; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.bc-name:hover { color: var(--link); }
.bc-sub { font-size: .82rem; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-offer { min-width: 0; align-self: stretch; display: grid; align-content: center; gap: 6px;
  border-left: 1px solid var(--line); padding-left: 18px; }
.bc-label, .bc-facts dt, .kv dt, .gfilter label, .gfilter .gf-field > span { font-size: .7rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; }
.bc-offer-text { margin: 0; font-weight: 700; line-height: 1.35; }
.bc-offer-none { margin: 0; font-size: .9rem; color: var(--muted); }
.bc-cta { display: grid; gap: 7px; text-align: center; font-size: .85rem; }
.bc-cta .btn { text-align: center; padding: 11px 12px; }
.bc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.bc-facts > div { min-width: 0; padding: 9px 20px 10px; border-left: 1px solid var(--line); }
.bc-facts > div:first-child { border-left: 0; }
.bc-facts dt .dt-icon { margin-right: 5px; vertical-align: -2px; }  /* App Store / Google Play mark before the label */
.bc-facts dd { margin: 1px 0 0; font-weight: 650; font-size: .93rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-facts dd.none { color: #a3acbf; font-weight: 400; }
.bc-note { margin: 0; padding: 8px 20px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
@media (min-width: 901px) {  /* bonus cards (bonus_cards): upright, three in a row, buttons on one line */
  .brand-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .brand-list-grid .brand-card { display: flex; flex-direction: column; }
  .brand-list-grid .bonus-card .bc-head { flex: 1; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto 1fr auto;
    align-items: start; gap: 14px; padding: 18px; }
  .brand-list-grid .bc-main { align-self: center; }
  .brand-list-grid .logo { width: 56px; height: 56px; border-radius: 12px; }
  .brand-list-grid .bc-offer { grid-column: 1 / -1; border-left: 0; padding-left: 0; align-content: start; }
  .brand-list-grid .bc-cta { grid-column: 1 / -1; }
  .brand-list-grid .bc-cta:has(> :only-child)::after { content: "\00a0"; }  /* a card with no site link keeps the review line's room */
  .brand-list-grid .bc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-list-grid .bc-facts > div { padding: 8px 18px 9px; }
  .brand-list-grid .bc-facts > div:nth-child(odd) { border-left: 0; }
  .brand-list-grid .bc-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .brand-list-grid .bc-note { padding: 8px 18px; }
}

/* review top card (review_hero): the casino card at full size */
.hero-card { border-top: 4px solid var(--gold); margin: 16px 0; overflow: hidden; }
.hero-top { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.1fr) 220px; align-items: center; gap: 16px 22px; padding: 22px 24px; }
.hero-top .logo { width: 96px; height: 96px; border-radius: 20px; font-size: 1.4rem; }
.hero-id { display: grid; gap: 3px; min-width: 0; }
.hero-id strong { font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.hero-id .bc-sub { white-space: normal; font-size: .88rem; }
.hero-top .bc-cta .btn { padding: 14px 16px; font-size: 1.02rem; white-space: normal; line-height: 1.25; }
.hero-top .coin b { font-size: 1.3rem; }
.hero-extra { margin: 0; padding: 12px 24px; border-top: 1px solid var(--line); font-weight: 600; line-height: 1.45; }
.hero-extra .bc-label { display: block; color: #8a6100; }
.verdict p { font-size: 1.08rem; line-height: 1.6; margin: 18px 0; }

@media (max-width: 900px) {  /* the offer drops to a second line under the name */
  .bc-head { grid-template-columns: 28px 64px minmax(0, 1fr) 148px; gap: 12px 14px; }
  .bonus-card .bc-head { grid-template-columns: 64px minmax(0, 1fr) 148px; }
  .bc-offer { grid-row: 2; grid-column: 2 / -1; border-left: 0; padding-left: 0; }
  .bonus-card .bc-offer { grid-column: 1 / -1; }
  .logo { width: 64px; height: 64px; border-radius: 14px; }
  .hero-top { grid-template-columns: 80px minmax(0, 1fr) 200px; }
  .hero-top .logo { width: 80px; height: 80px; border-radius: 18px; }
  .hero-top .bc-offer { grid-row: 2; grid-column: 1 / -1; }
}
@media (max-width: 600px) {  /* phone: name, offer, button stacked; facts two by two */
  .bc-head { grid-template-columns: 20px 56px minmax(0, 1fr); padding: 14px; }
  .bonus-card .bc-head { grid-template-columns: 56px minmax(0, 1fr); }
  .bc-offer, .bc-cta { grid-column: 1 / -1; }
  .bc-cta { gap: 9px; }  /* button full width, the review link under it */
  .bc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-facts > div { padding: 8px 14px 9px; }
  .bc-facts > div:nth-child(odd) { border-left: 0; }
  .bc-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bc-note { padding: 8px 14px; }
  .logo { width: 56px; height: 56px; border-radius: 12px; }
  .hero-top { grid-template-columns: 64px minmax(0, 1fr); padding: 16px; }
  .hero-top .logo { width: 64px; height: 64px; border-radius: 14px; }
  .hero-id strong { font-size: 1.25rem; }
  .hero-extra { padding: 10px 16px; }
}

/* game card (game_card): cover, name, studio, three figures, where, two buttons */
.gcards { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.gcard { position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden; }  /* the lobby badge sits over the cover */
.gcard[hidden] { display: none; }
.gcard-cover { position: relative; display: block; aspect-ratio: 390 / 254; overflow: hidden; background: var(--navy); }
.gcard-art { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
span.gcard-art { display: grid; font-size: 2.2rem; }
.gcard:hover .gcard-art { transform: scale(1.04); }
.gcard-lobby { display: none; position: absolute; top: 10px; left: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.gcard.in-lobby .gcard-lobby { display: block; }
.gcard-body { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 13px 14px 14px; }
.gcard-name { color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.04rem; line-height: 1.25; overflow-wrap: anywhere; }
.gcard-name:hover { color: var(--link); }
.gcard-studio { margin-top: -6px; font-size: .82rem; color: var(--muted); }
/* cells take the width of their value ("Med-High" needs more than "96%"): a value is never cut, the row wraps if it must */
.gcard-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.gcard-facts div { flex: 1 1 auto; padding: 6px 6px 5px; border-radius: 9px; background: #f3f6fb; text-align: center; }
.gcard-facts dt { font-size: .6rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted); }
.gcard-facts dd { margin: 1px 0 0; font-size: .84rem; font-weight: 800; white-space: nowrap; }
.gcard-where { margin: 0; font-size: .82rem; color: var(--muted); }
.gcard-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.gcard-cta .btn { padding: 9px 6px; font-size: .9rem; text-align: center; }
.gcard-cta .btn-ghost { padding: 7.5px 6px; }
.gcard-cta .btn:only-child { grid-column: 1 / -1; }
@media (max-width: 560px) { .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gcard-cta { grid-template-columns: minmax(0, 1fr); }
  .gcard-facts dd { font-size: .8rem; } .gcard-body { padding: 10px 10px 12px; } }

/* game tile (ed.game_tile): the compact form of a game inside a review, a studio page, a game page */
.games { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.games li { margin: 0; padding: 7px 10px 7px 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; }
.game-cover { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: .82rem; letter-spacing: .03em;
  background: linear-gradient(135deg, hsl(var(--h) 58% 46%), hsl(calc(var(--h) + 45) 62% 30%)); }
.game-name { font-weight: 650; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.game-name a { color: inherit; text-decoration: none; }
.game-name a:hover { color: var(--link); text-decoration: underline; }
.games .studio { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; margin-top: 1px; }
.game-art-none { display: grid; place-items: center; color: #fff; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg, hsl(var(--h) 58% 46%), hsl(calc(var(--h) + 45) 62% 30%)); }

/* 6. Components: panels and data -------------------------------------------- */
/* panel: a section with its own title (review and game sections, a list's method). It lies flat on the page like any section,
   only the panels of a split (the home page's law tracker) are cards */
.panel { padding: 0; margin: 0; scroll-margin-top: 84px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.split > .panel { padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel h3 { margin: 26px 0 10px; font-size: 1.15rem; }  /* one size for every subheading of a section, first or not */
.panel > h3:first-child { margin: 0 0 10px; }
.panel h3 + *, .panel h4 + * { margin-top: 0; }  /* the gap under a subheading is the subheading's own, whatever follows it */
.panel > :last-child { margin-bottom: 0; }
.panel details { border-top: 1px solid var(--line); padding: 12px 0; }
.panel details:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.panel details + .rows > div:first-child { border-top: 0; }
.panel summary { cursor: pointer; font-weight: 700; }
.panel details[open] summary { margin-bottom: 10px; }
.panel h3 + .pills { margin-bottom: 16px; }
.panel details .table-wrap { box-shadow: none; margin: 4px 0 8px; }
@media (max-width: 600px) { .split > .panel { padding: 16px; } }

/* kv: big figures with a label on top (review numbers, game characteristics) */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0;
  border-top: 1px solid var(--line); overflow: hidden; }
.kv > div { padding: 12px 20px 13px; min-width: 0; margin: 0 -1px -1px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kv dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
/* a tile with an icon at its left (kv items with a third element: the app section's iPhone, Android, browser). The icon keeps
   its own colours when the thing is absent (kv-off): the value says so, a faded Apple mark read as grey (user's call, 2026-10-28) */
.kv > .kv-ico { position: relative; padding-left: 64px; }
.kv-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; }
.panel .kv { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 4px 0 14px; }
/* six figures in a column narrowed by the contents: three per row, so that "Medium-to-high" stays on one line */
@media (min-width: 701px) { [data-block="game-specs"] .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-block="game-specs"] .kv dd { white-space: nowrap; } }
@media (max-width: 600px) { .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv > div { padding: 10px 16px 11px; } .kv dd { font-size: 1.1rem; } }

/* rows: label on the left, value on the right */
.rows { margin: 0; }
.rows > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.rows > div:first-child { border-top: 0; }
.kv + .rows > div:first-child { border-top: 1px solid var(--line); }
.rows dt { font-weight: 600; color: var(--muted); font-size: .92rem; }
.rows dd { margin: 0; }
.rows + .rows { margin-top: 22px; padding-top: 10px; border-top: 2px solid var(--line-strong); }  /* two sets in a row, e.g. two laws of one state */
.rows dd ul:not(.pills) { margin: 0; padding-left: 18px; }
@media (max-width: 600px) { .rows > div { grid-template-columns: minmax(0, 1fr); } }

/* tables: data tables (several things compared); facts about one thing use .rows */
.table-wrap { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; vertical-align: top; padding: 11px 16px; border-bottom: 1px solid var(--line); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line-strong); }
table.states tbody tr:hover, table.brands tbody tr:hover { background: #f7f9fc; }
@media (max-width: 560px) { th, td { padding: 9px 12px; } }

/* facts list: one fact per line */
.facts-list { list-style: none; padding: 0; margin: 12px 0; }
.facts-list li { padding: 10px 18px; border-bottom: 1px solid var(--line); margin: 0; max-width: none; }
.facts-list li:last-child { border-bottom: 0; }

/* law feed (law_feed): date, state with its flag, bill - the newest laws across states */
.law-feed { list-style: none; margin: 0; padding: 0; }
.law-feed li { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; align-items: center;
  margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.law-feed li:first-child { border-top: 0; }
.lf-date { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--bad); }
.lf-date b { display: block; white-space: nowrap; font-size: .92rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.lf-soon { color: #b54708; }
.lf-state { font-weight: 700; text-decoration: none; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-state:hover { color: var(--link); }
.lf-bill { font-size: .85rem; color: var(--muted); }
@media (max-width: 520px) { .law-feed li { grid-template-columns: 136px minmax(0, 1fr); } .lf-bill { grid-column: 2; } }

/* timeline: one state's history */
.timeline { list-style: none; padding: 0 0 0 22px; border-left: 3px solid var(--line); margin-left: 6px; }
.timeline li { position: relative; padding: 4px 0 14px; }
.timeline li::before { content: ""; position: absolute; left: -30.5px; top: 12px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--bad); border: 3px solid var(--bg); }
/* contents of a guide: a numbered list of links to its sections */
.toc { padding: 18px 22px; margin: 22px 0 8px; }
.toc > strong { display: block; margin-bottom: 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.toc li { counter-increment: toc; margin: 0; }
.toc li a { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; padding: 7px 10px; border-radius: 8px;
  color: var(--ink); font-weight: 600; text-decoration: none; }
.toc li a::before { content: counter(toc) "."; color: var(--muted); font-weight: 700; }
.toc li a:hover { background: var(--soft); color: var(--link); }

/* offers: a review's bonus boxes. The type is a tab on the top edge, the offer itself is the title (with the casino's name),
   then a short description and a button to the casino. Tones: offer-free (green), offer-paid (gold, a purchase is needed) */
.offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px 16px; padding-top: 12px; margin-bottom: 6px; }
.offer { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 16px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.offer-tab { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 24px); padding: 3px 12px 3px 9px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-strong);
  color: var(--muted-ink); font-size: .68rem; font-weight: 800; line-height: 1.5; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.offer-icon { flex: none; }
.offer-free .offer-tab { border-color: #9fd9b7; color: var(--ok); }
.offer-paid .offer-tab { border-color: #ecd282; color: var(--gold-ink); }
.panel .offer h3, .offer h3 { margin: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.3; }
.offer-extra { margin: -4px 0 0; font-size: .92rem; font-weight: 600; line-height: 1.4; color: var(--ok); }
.offer-desc { margin: 0; flex: 1; padding-top: 10px; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.offer .btn { display: block; text-align: center; }

/* review summary (review_summary): key facts as short lines, then pros and cons */
.summary-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 2px; }
.summary-points li { position: relative; margin: 0; padding: 6px 0 6px 26px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.summary-points li:last-child { border-bottom: 0; }
.summary-points li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* pros and cons; inside a panel the two boxes are flat, the panel is the surface */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.proscons > div { padding: 4px 20px 10px; }
.proscons > div:first-child { border-top: 4px solid #17b26a; }
.proscons > div:last-child { border-top: 4px solid #f04438; }
.proscons li { margin-bottom: 6px; }
.proscons h3 { margin: 14px 0 8px; }
.panel .proscons { margin-bottom: 12px; }
@media (max-width: 700px) { .proscons { grid-template-columns: 1fr; } }

/* sources (site.sources): kind of source as a badge, the page, its site and the day we read it */
.sources { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; counter-reset: none; }
main ol.sources li { margin: 0; }
.source { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 18px;
  color: var(--ink); text-decoration: none; }
.source .badge { justify-self: start; white-space: nowrap; }
.source-text { display: grid; gap: 1px; min-width: 0; }
.source-title { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
a.source:hover .source-title { color: var(--link); }
.source-meta { font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.source-go { color: #a3acbf; font-size: 1.1rem; }
a.source:hover .source-go { color: var(--link); }
.source-none { background: transparent; border-style: dashed; box-shadow: none; }
@media (max-width: 600px) { .source { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .source .badge { grid-column: 1 / -1; } }

/* FAQ: each question opens with a rule, the answer under it */
[data-block="faq"] h3 { margin: 0; padding: 16px 0 6px; border-top: 1px solid var(--line); }
[data-block="faq"] h2 + h3 { border-top: 0; padding-top: 0; }
[data-block="faq"] p { margin: 0; padding: 0 0 14px; max-width: none; color: #344054; }
[data-block="faq"], [data-block="sources"] { scroll-margin-top: 84px; }

/* 7. Components: games hub filter, game hero, demo box ---------------------- */
html:not(.js) .gfilter, html:not(.js) .gdemo { display: none; }
/* filter form (the games hubs, the casino list): fields in a grid, then a row of toggles with "Reset filters" at its end.
   A field with a choice in it turns blue, so a visitor sees at a glance what narrows the list */
.gfilter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 12px; align-items: end;
  margin: 24px 0 14px; padding: 18px 20px; }
.gfilter { background: #eef3fa; border-color: #dbe4f1; box-shadow: none; }  /* a tinted box, so the form reads apart from the white cards under it: the one filled block on the white page (user's choice, 2026-10-28) */
.gf-toggles { border-top-color: #dbe4f1; }
.gfilter label { display: grid; gap: 6px; min-width: 0; }
.gfilter input[type="search"], .gfilter select, .gf-multi > summary { font: inherit; font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  width: 100%; min-width: 0; height: 46px; padding: 0 40px 0 14px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235a6478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px;
  color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); appearance: none; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.gfilter input[type="search"] { padding-right: 14px; background-image: none; font-weight: 500; cursor: text; }
.gfilter input::placeholder { color: #8a93a6; }
.gfilter input:hover, .gfilter select:hover, .gf-multi > summary:hover { border-color: #9aa8c4; }
.gfilter input:focus-visible, .gfilter select:focus-visible, .gf-multi > summary:focus-visible, .gf-multi[open] > summary {
  outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(29, 78, 216, .16); }
.gfilter select:not([name="sort"]):not(:has(option[value=""]:checked)), .gf-multi:has(input:checked) > summary {
  border-color: var(--link); background-color: #eef4ff; color: var(--navy-2); }
/* a dropdown of checkboxes (several payment methods at once): the closed box is a select, the open list floats under it */
.gfilter .gf-field { display: grid; gap: 6px; min-width: 0; }
.gf-multi { position: relative; min-width: 0; }  /* the box keeps its column: a long choice is cut with an ellipsis, not widened */
.gf-multi > summary { display: block; line-height: 44px; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-multi > summary::-webkit-details-marker { display: none; }
.gf-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(320px, 90vw);
  max-height: 340px; overflow-y: auto; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-hover); }
.gfilter .gf-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: .93rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.gfilter .gf-opt:hover, .gfilter .gf-opt:has(input:focus-visible) { background: var(--chip-bg); }
.gfilter .gf-opt:has(input:checked) { background: #eef4ff; color: var(--link); font-weight: 700; }
.gf-opt input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--cta); }
.gf-ico { flex: none; width: 44px; display: flex; justify-content: center; }  /* marks differ in width: the names line up */
.gf-opt small { margin-left: auto; padding-left: 12px; color: var(--muted); font-weight: 600; }
/* where the browser lets the open list be styled (customizable select), it gets the same rounded look; elsewhere it stays native */
@supports (appearance: base-select) {  /* every select of the site: the filters and the state picker */
  :is(.gfilter, .state-pick) select, :is(.gfilter, .state-pick) select::picker(select) { appearance: base-select; }
  :is(.gfilter, .state-pick) select { padding: 0; }  /* the box's own button (SELECTED in build_site.py) holds the text and its padding */
  :is(.gfilter, .state-pick) select > button { display: flex; align-items: center; width: 100%; height: 100%; min-width: 0; padding: 0 38px 0 14px;
    border: 0; background: none; font: inherit; color: inherit; text-align: left; }
  .state-pick select > button { padding: 0 46px 0 18px; }
  :is(.gfilter, .state-pick) select selectedcontent { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  :is(.gfilter, .state-pick) select::picker-icon { display: none; }
  :is(.gfilter, .state-pick) select::picker(select) { margin-top: 6px; padding: 6px; max-height: 340px; border: 1px solid var(--line); border-radius: 12px;
    background: #fff; box-shadow: var(--shadow-hover); }
  .state-pick select::picker(select) { max-height: 380px; }
  :is(.gfilter, .state-pick) option { padding: 9px 12px; border-radius: 8px; font-size: .93rem; font-weight: 500; color: var(--ink); }
  .state-pick option { padding: 10px 14px; font-size: .97rem; }
  :is(.gfilter, .state-pick) option::checkmark { display: none; }
  :is(.gfilter, .state-pick) option:hover, :is(.gfilter, .state-pick) option:focus-visible { background: var(--chip-bg); outline: none; }
  :is(.gfilter, .state-pick) option:checked { background: #eef4ff; color: var(--link); font-weight: 700; }
}
.gfilter .gf-search { grid-column: 1 / -1; }  /* the search has a row of its own over the selects */
@media (max-width: 900px) and (min-width: 561px) { .gfilter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gf-collections { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.gf-collections .pills-accent { margin: 0; }
/* toggles: each a pill with its own box; a chosen one fills green */
.gf-toggles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.gfilter .gf-check { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: .9rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ink); cursor: pointer; user-select: none; transition: border-color .15s ease, background-color .15s ease; }
.gfilter .gf-check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gfilter .gf-check::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong);
  background: #fff no-repeat center / 10px; }
.gfilter .gf-check:hover { border-color: #9aa8c4; }
.gfilter .gf-check:has(input:checked) { background: var(--ok-bg); border-color: var(--cta); color: var(--ok); }
.gfilter .gf-check:has(input:checked)::before { border-color: var(--cta);
  background: var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px; }
.gfilter .gf-check:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(29, 78, 216, .16); }
.gf-reset { margin-left: auto; height: 38px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 700;
  color: var(--link); cursor: pointer; }
.gf-reset:hover { text-decoration: underline; }
@media (max-width: 560px) {  /* a phone: the form opens from the "Filters" button, two fields a row */
  .js .gf-toggle { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin: 20px 0 12px; }
  .js .gf-toggle[aria-expanded="true"] { border-color: var(--link); color: var(--link); }
  .js .gfilter:not(.is-open) { display: none; }
  .js .gfilter.is-open { margin-top: 0; }
  .gfilter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 16px; }
  .gfilter input[type="search"], .gfilter select, .gf-multi > summary { height: 44px; padding-left: 12px; padding-right: 32px; background-position: right 11px center; }
  .gf-multi > summary { line-height: 42px; }
  @supports (appearance: base-select) { .gfilter select { padding: 0; } .gfilter select > button { padding: 0 30px 0 12px; } }
  .gfilter .gf-check { height: 36px; padding: 0 12px 0 10px; font-size: .86rem; }
}
.gbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; margin: 0 2px 14px; }
/* sort bar (sort_bar): the order of a filtered list, over it and out of the form. The chosen order is a filled chip */
.sortbar { display: flex; align-items: center; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sortbar::-webkit-scrollbar { display: none; }
.sortbar > span { margin-right: 6px; font-size: .9rem; color: var(--muted); white-space: nowrap; }
.sortbar button { flex: none; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font: inherit;
  font-size: .9rem; font-weight: 600; color: var(--muted-ink); white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.sortbar button:hover { color: var(--ink); background: var(--soft); }
.sortbar button[aria-pressed="true"] { background: var(--chip-bg); color: var(--ink); font-weight: 700; }
.sortbar button:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
/* "Filters" (filter_toggle): only on a phone, where the form waits closed behind it; the badge counts filters in use */
.gf-toggle { display: none; }
.gf-on { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--link); color: #fff; font-size: .78rem; }
.gf-on[hidden] { display: none; }
.gbar b { font-size: 1.25rem; }
.gempty { padding: 40px 20px; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* pager (pager() in build_site.py, the same markup from games.js for a filtered list): links a crawler follows */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 4px 0 32px; }
.pager[hidden] { display: none; }
.pager-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px;
  font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); }
a.pager-btn:hover { border-color: var(--link); color: var(--link); }
.pager-btn.is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager-btn.is-disabled { opacity: .45; }
.pager-gap { min-width: 24px; text-align: center; color: var(--muted); font-weight: 700; }
.gbar { scroll-margin-top: 84px; }
@media (max-width: 560px) { .pager-step { flex: 1 1 100%; order: 2; } .pager-btn { min-width: 38px; height: 40px; padding: 0 10px; } }

/* game page, first screen: a dark band over the blurred cover - text and buttons on the left, the cover on the right */
.band-game { position: relative; overflow: hidden; border: 0; padding: 18px 0 40px; color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
.band-game::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 26, 51, .94) 0%, rgba(14, 26, 51, .72) 52%, rgba(14, 26, 51, .3) 100%); }
.ghero-bg { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(36px) saturate(1.35); opacity: .75; }
.band-game .crumbs, .ghero { position: relative; z-index: 1; }
.band-game .crumbs, .band-game .crumbs a, .band-game .trust { color: var(--on-dark-muted); }
.ghero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); gap: 44px; align-items: center; margin-top: 22px; }
.ghero .pills-on-dark { margin-bottom: 12px; }
.ghero h1 { margin: 0 0 14px; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.ghero .answer { font-size: 1.04rem; font-weight: 400; color: var(--on-dark); }
.ghero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 16px; }
.ghero .trust { margin: 0; font-size: .82rem; }
.ghero-cover { display: block; width: 100%; height: auto; aspect-ratio: 390 / 254; object-fit: cover; border-radius: 20px; font-size: 3rem;
  border: 2px solid rgba(255, 255, 255, .22); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 8px rgba(255, 255, 255, .05); }
span.ghero-cover { display: grid; }
@media (max-width: 820px) {
  .band-game { padding-bottom: 28px; }
  .band-game::after { background: rgba(14, 26, 51, .78); }
  .ghero { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 14px; }
  .ghero-art { order: -1; max-width: 300px; }
  .ghero-cover { border-radius: 14px; }
  .ghero-cta .btn { flex: 1 1 100%; }
}

.gdemo { position: relative; aspect-ratio: 16 / 9; max-height: 80vh; width: 100%; margin: 0 0 12px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; text-align: center; color: #fff; background: radial-gradient(circle at 50% 35%, var(--navy-2), var(--navy)); }
.gdemo-bg { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; filter: blur(22px) brightness(.42) saturate(1.2); }
.gdemo-in { position: relative; display: grid; justify-items: center; gap: 10px; padding: 20px; max-width: 100%; }
.gdemo-cover { width: min(300px, 62%); height: auto; aspect-ratio: 390 / 254; object-fit: cover; border-radius: 14px; font-size: 2.4rem;
  border: 2px solid rgba(255, 255, 255, .22); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
span.gdemo-cover { display: grid; }
.gdemo-title { margin: 6px 0 0; font-size: 1.5rem; font-weight: 800; line-height: 1.2; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.gdemo-studio { margin: -8px 0 0; font-size: .9rem; color: #cbd5ea; }
.gdemo button { font-size: 1.08rem; padding: 14px 30px; margin-top: 4px; white-space: normal; }
.gdemo-note { margin: 0; font-size: .82rem; line-height: 1.45; color: #cbd5ea; max-width: 52ch; }
.gdemo-on { display: block; background: #000; }
.gdemo-on::before { content: "Loading the demo…"; position: absolute; inset: 0; display: grid; place-items: center; color: #b9c5dd; }
.gdemo iframe { display: block; position: relative; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .gdemo { aspect-ratio: 4 / 5; } .gdemo-title { font-size: 1.2rem; } .gdemo button { padding: 12px 20px; font-size: 1rem; } }

/* 8. Page layouts ------------------------------------------------------------ */
/* grids of cards: auto (link cards), -3 (three a row), -dense (studios), gcards-4 (four games a row), split (two panels),
   split-stack (panels one under another at full width: a review's payments) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-dense { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gcards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.split > .panel { margin: 0; }
.split-stack { grid-template-columns: minmax(0, 1fr); margin: 18px 0; }
@media (max-width: 1000px) { .gcards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .card-grid-3 { grid-template-columns: minmax(0, 1fr); } }
/* everything fills the container; text is not held to a narrow measure */
.brand-list > li, .facts-list, .table-wrap, .map, .proscons, .stats, .card-grid { width: 100%; max-width: none; }

/* home, first screen: one centred column - the question, the picker, the key figures under it. The map is the first section below */
.home-hero { display: grid; justify-items: center; gap: 34px; max-width: 820px; margin: 0 auto; text-align: center; }
.home-hero > div:not(.stats) { display: grid; justify-items: center; }
.home-hero .pills { justify-content: center; }
.home-hero h1 { margin: 0 0 14px; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; }
.home-hero .answer { font-size: 1.1rem; max-width: 680px; }
.home-hero .state-pick { width: 100%; text-align: left; }
.home-hero .stats { width: 100%; margin: 0; }

/* review and game pages: sections with a side contents list */
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; margin-top: 26px; }
.review-body { min-width: 0; }
.review-body > [data-block="faq"] > h2, .review-body > [data-block="sources"] > h2 { margin-top: 30px; }
.toc-side { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; font-size: .9rem; }
.toc-side strong { margin-right: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.toc-side a { text-decoration: none; padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; }
.toc-side a:hover { border-color: var(--link); }
@media (min-width: 1000px) {
  .review-layout { grid-template-columns: minmax(0, 1fr) 190px; }
  .toc-side { grid-column: 2; grid-row: 1; position: sticky; top: 84px; align-self: start; display: grid; gap: 2px; margin: 0;
    padding: 14px 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
  .toc-side strong { margin: 0 0 6px 10px; }
  .toc-side a { border: 0; background: none; border-radius: 8px; padding: 6px 10px; color: var(--ink); }
  .toc-side a:hover { background: var(--chip-bg); }
  .review-body { grid-column: 1; grid-row: 1; }
}

/* the UI kit page (draft builds only) */
.kit-item { margin: 0 0 28px; }
.kit-item > h3 { margin: 0 0 4px; }
.kit-item > .small { margin: 0 0 12px; }
.kit-item code { font-size: .8rem; background: var(--chip-bg); padding: 1px 6px; border-radius: 5px; }
.kit-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.kit-swatches div { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); font-size: .78rem; }
.kit-swatches i { display: block; height: 44px; }
.kit-swatches span { display: block; padding: 6px 8px; }
.kit-dark { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; padding: 20px; border-radius: var(--radius); }