/* ============================================================
   RIOBET CASINO — Production CSS
   Mobile First · Core Web Vitals Optimized
   No Bootstrap · No Tailwind · No dependencies
   ============================================================
   TABLE OF CONTENTS
   1.  Custom Properties (Design Tokens)
   2.  Reset
   3.  Base
   4.  Typography
   5.  Layout
   6.  Buttons
   7.  Header & Navigation
   8.  Hero
   9.  Trust Bar
   10. Cards (generic, bonus, provider)
   11. Game Cards
   12. Quick Answer (AI Overviews block)
   13. Breadcrumb
   14. FAQ Accordion
   15. Tables
   16. CTA Banner
   17. How-To Steps
   18. Sidebar Layout
   19. Payment Hero
   20. Game Hero
   21. GEO sections
   22. Providers & Payments grids
   23. Footer
   24. Badges & Labels
   25. Forms & Search
   26. Utilities
   27. Animations & Transitions
   28. Media Queries
   29. Print
   ============================================================ */

/* ============================================================
   1. CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* --- Colour palette --- */
  --clr-bg:          #0d0f1a;
  --clr-surface:     #161928;
  --clr-surface-2:   #1e2240;
  --clr-surface-3:   #252840;
  --clr-border:      #252840;
  --clr-border-2:    #2e3354;

  --clr-accent:      #f5a623;
  --clr-accent-dim:  #c4831a;
  --clr-accent-glow: rgba(245,166,35,.18);
  --clr-danger:      #e8363d;
  --clr-danger-dim:  #b82b31;
  --clr-success:     #22c55e;
  --clr-info:        #38bdf8;

  --clr-text:        #e8eaf0;
  --clr-text-muted:  #8b90a7;
  --clr-text-dim:    #565b73;
  --clr-text-inv:    #0d0f1a;

  /* --- Typography --- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Fira Code', monospace;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-black:  900;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* --- Spacing (4 px base) --- */
  --sp-1:  .25rem;   /*  4px */
  --sp-2:  .5rem;    /*  8px */
  --sp-3:  .75rem;   /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */

  /* --- Radius --- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* --- Shadows (transform-based preferred; shadows only where needed) --- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow:    0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.55);
  --shadow-accent: 0 0 24px rgba(245,166,35,.22);

  /* --- Transitions --- */
  --trans-fast: 120ms ease;
  --trans:      200ms ease;
  --trans-slow: 300ms ease;

  /* --- Z-index layers --- */
  --z-base:     1;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-modal:   300;

  /* --- Layout --- */
  --max-w:    1200px;
  --max-w-md:  800px;
  --max-w-sm:  600px;
  --header-h:   60px;
  --sidebar-w: 300px;

  /* --- Header height for sticky offset --- */
  --sticky-top: calc(var(--header-h) + 1px);
}

/* ============================================================
   2. RESET  (minimal, modern)
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Prevent font-size adjustment on iOS rotation → prevents CLS */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent horizontal scroll */
  overflow-x: hidden;
}

img,
video,
svg,
canvas {
  display: block;
  max-width: 100%;
  /* Reserve space → prevents CLS */
  height: auto;
}

/* Prevent oversized SVG icons */
svg { overflow: hidden; }

a {
  color: var(--clr-accent);
  text-decoration: none;
}
a:hover  { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  overflow-wrap: break-word;
}

p { overflow-wrap: break-word; }

table {
  border-collapse: collapse;
  width: 100%;
}

/* Remove default details/summary marker in Firefox */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Reserve aspect ratio for media → CLS prevention */
iframe {
  border: none;
  display: block;
}

/* ============================================================
   3. BASE
   ============================================================ */
/* Skip link — accessibility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus-visible {
  position: fixed;
  inset: var(--sp-4);
  width: auto; height: auto;
  clip: auto;
  z-index: var(--z-modal);
  background: var(--clr-accent);
  color: var(--clr-text-inv);
  font-weight: var(--weight-bold);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius);
  text-decoration: none;
}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
h1 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: var(--weight-black); }
h2 { font-size: clamp(1.3rem,  3vw,   1.875rem); }
h3 { font-size: clamp(1.1rem,  2.5vw, 1.35rem); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

h2, h3, h4 { font-weight: var(--weight-bold); }

p + p { margin-top: var(--sp-4); }

.article-intro {
  font-size: var(--text-lg);
  color: var(--clr-text-muted);
  line-height: var(--leading-relaxed);
}

em  { font-style: normal; color: var(--clr-accent); }
strong { font-weight: var(--weight-bold); }

/* Fluid hero title */
.hero__title {
  font-size: clamp(1.875rem, 6vw, 3.25rem);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}
.hero__title em { color: var(--clr-accent); font-style: normal; }

/* Section title */
.section__title { font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: var(--weight-black); }
.section__sub   { color: var(--clr-text-muted); margin-top: var(--sp-2); }

/* ============================================================
   5. LAYOUT
   ============================================================ */
.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.section {
  padding-block: var(--sp-16);
}

/* Belowfold sections: hint browser to skip paint until visible */
.section--lazy {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Two-column: article + sidebar */
.content-with-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); }
.grid-6 { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-4); }

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .7em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  /* Only composite-friendly properties */
  transition:
    opacity var(--trans-fast),
    transform var(--trans-fast);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

.btn:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); opacity: 1; }

.btn--primary {
  background: var(--clr-accent);
  color: var(--clr-text-inv);
  border-color: var(--clr-accent);
}
.btn--primary:hover { background: var(--clr-accent-dim); border-color: var(--clr-accent-dim); }

.btn--danger {
  background: var(--clr-danger);
  color: #fff;
  border-color: var(--clr-danger);
}
.btn--danger:hover { background: var(--clr-danger-dim); border-color: var(--clr-danger-dim); }

.btn--outline {
  background: transparent;
  color: var(--clr-accent);
  border-color: var(--clr-accent);
}
.btn--outline:hover { background: var(--clr-accent-glow); }

.btn--ghost {
  background: transparent;
  color: var(--clr-text);
  border-color: var(--clr-border-2);
}
.btn--ghost:hover { border-color: var(--clr-accent); color: var(--clr-accent); }

.btn--sm  { font-size: var(--text-xs);  padding: .5em 1.1em; }
.btn--lg  { font-size: var(--text-base); padding: .85em 2em; }
.btn--xl  { font-size: var(--text-lg);  padding: 1em 2.4em; }
.btn--full { width: 100%; }

.btn--icon {
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
}

/* ============================================================
   7. HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-h);
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  /* Promote to own layer → avoids repaint on scroll */
  will-change: transform;
}

.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--sp-4);
}

/* Logo */
.logo {
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: var(--weight-black);
  color: var(--clr-accent);
  letter-spacing: -.02em;
  text-decoration: none;
  line-height: 1;
}
.logo:hover { opacity: .88; text-decoration: none; }
.logo img {
  height: 36px;
  width: auto;
}

/* Primary nav — hidden on mobile, shown via is-open class */
.pnav {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
}
.pnav > ul {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.pnav > ul > li { position: relative; }

.pnav > ul > li > a {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--trans-fast), color var(--trans-fast);
}
.pnav > ul > li > a:hover,
.pnav > ul > li:hover > a {
  background: var(--clr-surface-3);
  color: var(--clr-accent);
}
.pnav > ul > li > a[aria-current] { color: var(--clr-accent); }

/* Dropdown arrow */
.pnav > ul > li > a[aria-haspopup]::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px,-2px);
  margin-left: 2px;
  transition: transform var(--trans-fast);
}
.pnav > ul > li:hover > a[aria-haspopup]::after {
  transform: rotate(-135deg) translate(-1px,-2px);
}

/* Dropdown menu */
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 200px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2) 0;
  /* Hidden by default — GPU composite transition */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--trans-fast),
    transform var(--trans-fast),
    visibility 0s var(--trans-fast);
  pointer-events: none;
}
.pnav > ul > li:hover .dropdown,
.pnav > ul > li:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity var(--trans-fast),
    transform var(--trans-fast);
}

.dropdown a {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  color: var(--clr-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--trans-fast), background var(--trans-fast);
}
.dropdown a:hover {
  background: var(--clr-surface-2);
  color: var(--clr-accent);
}

/* CTA button group */
.header-cta {
  display: none;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Burger button */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--sp-2);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--trans-fast);
  flex-shrink: 0;
}
.burger:hover { background: var(--clr-surface-3); }
.burger span {
  display: block;
  height: 2px;
  background: var(--clr-text);
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}

/* Burger → X animation */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.pnav.is-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--clr-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
  z-index: var(--z-sticky);
  border-top: 1px solid var(--clr-border);
}
.pnav.is-open > ul {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.pnav.is-open > ul > li > a {
  padding: var(--sp-4) 0;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
  justify-content: space-between;
}
.pnav.is-open .dropdown {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0 0 var(--sp-2) var(--sp-4);
  background: transparent;
  pointer-events: auto;
}
.pnav.is-open .dropdown a {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text-dim);
}

/* ============================================================
   8. HERO
   ============================================================ */
.hero {
  position: relative;
  padding-block: var(--sp-20) var(--sp-16);
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(245,166,35,.08) 0%, transparent 60%),
    linear-gradient(160deg, var(--clr-bg) 0%, #12152a 100%);
  text-align: center;
  overflow: hidden;
  /* Reserve min height to prevent CLS when text loads */
  min-height: 420px;
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--clr-text-muted);
  max-width: 600px;
  margin-inline: auto;
  margin-top: var(--sp-4);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-6);
}

.hero__disclaimer {
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--clr-text-dim);
}

/* GEO hero variant */
.geo-hero {
  padding-block: var(--sp-12) var(--sp-10);
  background: linear-gradient(135deg, var(--clr-bg), #12152a);
}

.geo-hero__sub {
  font-size: var(--text-lg);
  color: var(--clr-text-muted);
  max-width: 640px;
  margin-top: var(--sp-3);
}

/* ============================================================
   9. TRUST BAR
   ============================================================ */
.trust-bar {
  background: var(--clr-surface);
  border-block: 1px solid var(--clr-border);
  padding-block: var(--sp-5);
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-6) var(--sp-8);
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
}

.trust-item__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.trust-item strong {
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  color: var(--clr-accent);
  display: block;
}

.trust-item span:not(.trust-item__icon) {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ============================================================
   10. CARDS (generic, bonus, provider)
   ============================================================ */
.card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  transition: border-color var(--trans), transform var(--trans);
}

.card:hover {
  border-color: var(--clr-accent);
  transform: translateY(-2px);
}

.card--flat:hover {
  transform: none;
}

.card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--sp-3);
}

.card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  margin-bottom: var(--sp-2);
}

.card__text {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
}

/* Category card (SILO hub) */
.cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.cat-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Bonus card */
.bonus-card { padding: var(--sp-6); }

.bonus-card__badge {
  display: inline-block;
  padding: .2em .75em;
  background: var(--clr-accent);
  color: var(--clr-text-inv);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--sp-3);
}

.bonus-card__amount {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  color: var(--clr-accent);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.bonus-card__terms {
  font-size: var(--text-xs);
  color: var(--clr-text-dim);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}

/* ============================================================
   11. GAME CARDS
   ============================================================ */
.game-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  transition: border-color var(--trans), transform var(--trans);
}

.game-card:hover {
  border-color: var(--clr-accent);
  transform: translateY(-2px);
}

/* Fixed aspect ratio → prevents CLS */
.game-card__thumb {
  position: relative;
  aspect-ratio: 7 / 4;
  overflow: hidden;
  background: var(--clr-surface-2);
}

.game-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--trans-slow);
}

.game-card:hover .game-card__thumb img {
  transform: scale(1.04);
}

/* Hover overlay with CTA */
.game-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: rgba(13,15,26,.82);
  opacity: 0;
  transition: opacity var(--trans);
}

.game-card:hover .game-card__overlay,
.game-card:focus-within .game-card__overlay {
  opacity: 1;
}

.game-card__body {
  padding: var(--sp-3) var(--sp-4);
}

.game-card__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  margin-bottom: var(--sp-1);
}

.game-card__name a {
  color: var(--clr-text);
  text-decoration: none;
}
.game-card__name a:hover { color: var(--clr-accent); }

.game-card__provider {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
}
.game-card__provider a {
  color: var(--clr-text-muted);
  text-decoration: none;
}
.game-card__provider a:hover { color: var(--clr-accent); }

.game-card__rtp {
  font-size: var(--text-xs);
  color: var(--clr-text-dim);
  margin-top: var(--sp-1);
}
.game-card__rtp strong { color: var(--clr-success); }

/* ============================================================
   12. QUICK ANSWER  (AI Overviews / Featured Snippets)
   ============================================================ */
.quick-answer {
  background: linear-gradient(135deg, var(--clr-surface), var(--clr-surface-2));
  border: 1px solid var(--clr-accent);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  margin-block: var(--sp-6);
}

.quick-answer__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-accent);
  margin-bottom: var(--sp-2);
}

.quick-answer p {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

/* ============================================================
   13. BREADCRUMB
   ============================================================ */
.breadcrumb { padding-block: var(--sp-3); }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
}

.breadcrumb li { color: var(--clr-text-muted); }

.breadcrumb li + li::before {
  content: '›';
  margin-right: var(--sp-2);
  color: var(--clr-text-dim);
}

.breadcrumb a { color: var(--clr-text-muted); }
.breadcrumb a:hover { color: var(--clr-accent); text-decoration: none; }

/* ============================================================
   14. FAQ ACCORDION
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.faq-item {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item[open] { border-color: var(--clr-accent); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: none;
  border: none;
  color: var(--clr-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  text-align: left;
  cursor: pointer;
  transition: color var(--trans-fast);
  line-height: var(--leading-snug);
}

.faq-q:hover { color: var(--clr-accent); }

/* Chevron */
.faq-q::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform var(--trans);
}

.faq-item[open] .faq-q::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.faq-a {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--clr-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.faq-a a { color: var(--clr-accent); }

/* ============================================================
   15. TABLES
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  margin-block: var(--sp-5);
}

.table-wrap table {
  font-size: var(--text-sm);
  min-width: 480px;
}

.table-wrap caption {
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--weight-bold);
  text-align: left;
  background: var(--clr-surface-2);
  border-bottom: 1px solid var(--clr-border);
  caption-side: top;
}

.table-wrap thead tr {
  background: var(--clr-surface-2);
}

.table-wrap th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: var(--weight-semi);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--clr-text-muted);
  white-space: nowrap;
}

.table-wrap td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--clr-border);
  vertical-align: middle;
}

.table-wrap tbody tr:hover { background: var(--clr-surface-2); }

/* Row-header style (th in tbody) */
.table-wrap tbody th {
  font-weight: var(--weight-medium);
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
}

/* Highlight cell */
td.highlight { color: var(--clr-accent); font-weight: var(--weight-bold); }

/* ============================================================
   16. CTA BANNER
   ============================================================ */
.cta-banner {
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(245,166,35,.1), transparent),
    linear-gradient(135deg, #1a0a30, #2a0d4a);
  border: 1px solid var(--clr-accent);
  border-radius: var(--radius-xl);
  padding: var(--sp-10) var(--sp-8);
  text-align: center;
}

.cta-banner__title {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: var(--weight-black);
  margin-bottom: var(--sp-3);
}

.cta-banner__sub {
  color: var(--clr-text-muted);
  max-width: 540px;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
}

.cta-banner__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.cta-banner__disclaimer {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--clr-text-dim);
}

/* ============================================================
   17. HOW-TO STEPS
   ============================================================ */
.howto-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.howto-step {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}

.howto-step__num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-accent);
  color: var(--clr-text-inv);
  font-weight: var(--weight-black);
  font-size: var(--text-sm);
  border-radius: 50%;
}

.howto-step__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  margin-bottom: var(--sp-1);
}

.howto-step__text {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  line-height: var(--leading-snug);
}

/* ============================================================
   18. SIDEBAR LAYOUT
   ============================================================ */
.sidebar { display: flex; flex-direction: column; gap: var(--sp-4); }

.sidebar-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.sidebar-card__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-accent);
  margin-bottom: var(--sp-4);
}

/* Sidebar CTA card */
.sidebar-card--cta,
.card--cta {
  background: linear-gradient(135deg, #1a0a30, #2a0d4a);
  border-color: var(--clr-accent);
  text-align: center;
}

/* Sidebar links card */
.card--links { }
.card--links h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-accent);
  margin-bottom: var(--sp-4);
}
.card--links ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
  padding: 0; margin: 0;
}
.card--links a {
  font-size: var(--text-sm);
  color: var(--clr-text-dim);
  text-decoration: none;
  transition: color var(--trans-fast);
}
.card--links a:hover { color: var(--clr-accent); }

/* card--cta inner elements */
.card--cta h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  margin-bottom: var(--sp-3);
}
.card--cta .bonus-amount {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--clr-accent);
  margin-bottom: var(--sp-3);
}
.card--cta .bonus-details {
  list-style: none;
  padding: 0; margin: 0 0 var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
}
.card--cta .bonus-details li::before { content: "✓ "; color: var(--clr-accent); }
.card--cta .btn--full { width: 100%; }

/* Sidebar stat row */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--clr-border);
}
.stat-row:last-child { border-bottom: none; }
.stat-row dt { color: var(--clr-text-muted); }
.stat-row dd { font-weight: var(--weight-semi); }

/* GEO grid inside sidebar */
.geo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.geo-grid a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  background: var(--clr-surface-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  text-align: center;
  color: var(--clr-text);
  text-decoration: none;
  transition: background var(--trans-fast), color var(--trans-fast);
}
.geo-grid a:hover { background: var(--clr-accent); color: var(--clr-text-inv); }

/* ============================================================
   19. PAYMENT HERO
   ============================================================ */
.payment-hero {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  padding-block: var(--sp-8);
}

.payment-hero__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.payment-logo {
  background: #fff;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
  flex-shrink: 0;
  /* Reserve exact space to prevent CLS */
  min-width: 120px;
  min-height: 56px;
  display: flex;
  align-items: center;
}

.payment-logo img {
  height: 32px;
  width: auto;
}

.payment-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ============================================================
   20. GAME HERO
   ============================================================ */
.game-hero {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  padding-block: var(--sp-6);
}

.game-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

/* Game iframe container: reserve aspect ratio → prevents CLS */
.game-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--clr-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 720px;
  width: 100%;
}

.game-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.game-frame__cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background-size: cover;
  background-position: center;
}

.game-frame__cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13,15,26,.7);
}

.game-frame__cover > * { position: relative; z-index: 1; }

/* Provider badge */
.provider-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--clr-surface-3);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs);
  color: var(--clr-text);
  text-decoration: none;
  transition: background var(--trans-fast);
}
.provider-badge:hover { background: var(--clr-border-2); text-decoration: none; }

.provider-badge img {
  height: 18px;
  width: auto;
  display: inline-block;
}

/* Rating stars */
.star-rating {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.star-rating__stars { color: var(--clr-accent); letter-spacing: .1em; }
.star-rating__score { font-weight: var(--weight-bold); }
.star-rating__count { font-size: var(--text-xs); color: var(--clr-text-muted); }

/* ============================================================
   21. GEO SECTIONS
   ============================================================ */
/* GEO sub-navigation bar */
.geo-subnav {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-sticky) - 1);
}

.geo-subnav ul {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}
.geo-subnav ul::-webkit-scrollbar { display: none; }

.geo-subnav a {
  display: block;
  padding: var(--sp-4) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color var(--trans-fast), border-color var(--trans-fast);
}
.geo-subnav a:hover,
.geo-subnav a[aria-current] {
  color: var(--clr-accent);
  border-bottom-color: var(--clr-accent);
}

/* FAQ category nav (reuses geo-subnav pattern) */
.faq-categories {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-sticky) - 1);
}
.faq-categories ul {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.faq-categories ul::-webkit-scrollbar { display: none; }
.faq-categories a {
  display: block;
  padding: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color var(--trans-fast), border-color var(--trans-fast);
}
.faq-categories a:hover,
.faq-categories a.active { color: var(--clr-accent); border-bottom-color: var(--clr-accent); }

/* ============================================================
   22. PROVIDERS & PAYMENTS GRIDS
   ============================================================ */
.providers-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-6);
}

.providers-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  transition: border-color var(--trans-fast), transform var(--trans-fast);
  /* Reserve exact space → no CLS */
  min-width: 120px;
  height: 56px;
}
.providers-grid a:hover {
  border-color: var(--clr-accent);
  transform: translateY(-1px);
}
.providers-grid img {
  max-height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .7;
  transition: opacity var(--trans-fast);
}
.providers-grid a:hover img { opacity: 1; }

/* Payments icon strip */
.payments-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-5);
}

.payments-strip a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Reserve space */
  width: 72px; height: 40px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  opacity: .8;
  transition: opacity var(--trans-fast), border-color var(--trans-fast);
}
.payments-strip a:hover { opacity: 1; border-color: var(--clr-accent); }
.payments-strip img {
  max-width: 56px;
  max-height: 28px;
  width: auto; height: auto;
}

/* ============================================================
   23. FOOTER
   ============================================================ */
footer {
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  padding-top: var(--sp-12);
}

/* ── Footer class aliases (footer-* = foot-* equivalents) ─── */
.footer-cols,
.foot-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8) var(--sp-6);
  padding-bottom: var(--sp-10);
}
.footer-col h4,
.foot-col__h {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-4);
}
.footer-col ul,
.foot-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer-col a,
.foot-col a {
  font-size: var(--text-sm);
  color: var(--clr-text-dim);
  text-decoration: none;
  transition: color var(--trans-fast);
  line-height: 1;
}
.footer-col a:hover,
.foot-col a:hover { color: var(--clr-accent); }

.footer-disclaimer,
.foot-disclaimer {
  border-top: 1px solid var(--clr-border);
  padding-block: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--clr-text-dim);
  line-height: var(--leading-relaxed);
}
.footer-disclaimer a,
.foot-disclaimer a { color: var(--clr-text-muted); }
.footer-disclaimer a:hover,
.foot-disclaimer a:hover { color: var(--clr-accent); }

/* Columns */
.foot-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8) var(--sp-6);
  padding-bottom: var(--sp-10);
}

.foot-col__h {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-4);
}

.foot-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.foot-col a {
  font-size: var(--text-sm);
  color: var(--clr-text-dim);
  text-decoration: none;
  transition: color var(--trans-fast);
  line-height: 1;
}
.foot-col a:hover { color: var(--clr-accent); }

/* GEO strip */
.foot-geo {
  border-top: 1px solid var(--clr-border);
  padding-block: var(--sp-6);
}

.foot-geo__h {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-text-dim);
  margin-bottom: var(--sp-3);
}

.foot-geo__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.foot-geo__links a {
  padding: var(--sp-2) var(--sp-4);
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  text-decoration: none;
  transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}
.foot-geo__links a:hover {
  background: var(--clr-accent);
  color: var(--clr-text-inv);
  border-color: var(--clr-accent);
}

/* Disclaimer */
.foot-disclaimer {
  border-top: 1px solid var(--clr-border);
  padding-block: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--clr-text-dim);
  line-height: var(--leading-relaxed);
}
.foot-disclaimer a { color: var(--clr-text-muted); }
.foot-disclaimer a:hover { color: var(--clr-accent); }

/* Bottom bar */
.foot-btm {
  border-top: 1px solid var(--clr-border);
}

.foot-btm-in {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
}

.foot-copy {
  font-size: var(--text-xs);
  color: var(--clr-text-dim);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.foot-links a {
  font-size: var(--text-xs);
  color: var(--clr-text-dim);
  text-decoration: none;
}
.foot-links a:hover { color: var(--clr-accent); }

.foot-badges {
  display: flex;
  gap: var(--sp-2);
}

/* ============================================================
   24. BADGES & LABELS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: .2em .7em;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
}

.badge--accent  { background: var(--clr-accent);      color: var(--clr-text-inv); }
.badge--danger  { background: var(--clr-danger);       color: #fff; }
.badge--success { background: var(--clr-success);      color: var(--clr-text-inv); }
.badge--info    { background: var(--clr-info);         color: var(--clr-text-inv); }
.badge--muted   { background: var(--clr-surface-3);    color: var(--clr-text-muted); }
.badge--outline { background: transparent; border: 1px solid var(--clr-accent); color: var(--clr-accent); }

.foot-badge {
  padding: var(--sp-1) var(--sp-3);
  background: var(--clr-surface-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  white-space: nowrap;
}

/* NEW / HOT ribbon on game cards */
.ribbon {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-raised);
}

/* ============================================================
   25. FORMS & SEARCH
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--clr-text-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border-2);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  color: var(--clr-text);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  transition: border-color var(--trans-fast);
  /* No appearance changes that cause CLS */
  -webkit-appearance: none;
  appearance: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--clr-accent);
}

.field input::placeholder { color: var(--clr-text-dim); }

/* Search bar */
.search-bar {
  display: flex;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border-2);
  border-radius: var(--radius);
  overflow: hidden;
}

.search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  padding: var(--sp-4) var(--sp-5);
  color: var(--clr-text);
  font-family: inherit;
  font-size: var(--text-base);
}
.search-bar input:focus { outline: none; }
.search-bar input::placeholder { color: var(--clr-text-dim); }

.search-bar button {
  padding: var(--sp-3) var(--sp-5);
  background: var(--clr-accent);
  color: var(--clr-text-inv);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  border: none;
  cursor: pointer;
  transition: background var(--trans-fast);
}
.search-bar button:hover { background: var(--clr-accent-dim); }

/* ============================================================
   26. UTILITIES
   ============================================================ */
.sr-only { /* defined in §3 */ }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--clr-text-muted); }
.text-dim    { color: var(--clr-text-dim); }
.text-accent { color: var(--clr-accent); }
.text-danger { color: var(--clr-danger); }
.text-success{ color: var(--clr-success); }

.font-bold  { font-weight: var(--weight-bold); }
.font-black { font-weight: var(--weight-black); }

.mt-auto    { margin-top: auto; }
.mx-auto    { margin-inline: auto; }

.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

.hidden { display: none !important; }
.visible { display: block; }

/* Section spacing variants */
.section--sm { padding-block: var(--sp-10); }
.section--lg { padding-block: var(--sp-20); }

/* Divider */
.divider {
  height: 1px;
  background: var(--clr-border);
  margin-block: var(--sp-8);
}

/* See-all link */
.see-all {
  font-size: var(--text-sm);
  color: var(--clr-accent);
  font-weight: var(--weight-medium);
}
.see-all:hover { text-decoration: underline; }

/* ============================================================
   27. ANIMATIONS & TRANSITIONS
   ============================================================ */

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fade-in for sections (triggered by JS IntersectionObserver) */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pulse animation for live badge */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--clr-danger);
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

/* Shimmer for skeleton loading */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--clr-surface-2) 25%,
    var(--clr-surface-3) 50%,
    var(--clr-surface-2) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ============================================================
   28. MEDIA QUERIES  (Mobile → Tablet → Desktop)
   ============================================================ */

/* ── sm: 480px ── */
@media (min-width: 480px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .foot-btm-in {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
  }
}

/* ── md: 768px ── */
@media (min-width: 768px) {
  /* Nav visible */
  .pnav        { display: flex; }
  .header-cta  { display: flex; }
  .burger      { display: none; }

  /* Footer columns */
  .foot-cols, .footer-cols { grid-template-columns: repeat(3, 1fr); }

  /* Hero */
  .hero { min-height: 500px; padding-block: var(--sp-20); }

  /* Game hero — side by side on tablet */
  .game-hero__inner { grid-template-columns: 1fr auto; }

  /* Grid */
  .grid-4 { grid-template-columns: repeat(3, 1fr); }

  /* Content + sidebar stacked */
  .content-with-sidebar {
    flex-direction: row;
    align-items: flex-start;
  }

  /* Article takes remaining space */
  .content-with-sidebar > article { flex: 1 1 0; min-width: 0; }

  /* Sidebar fixed width */
  .sidebar {
    flex-shrink: 0;
    width: var(--sidebar-w);
    position: sticky;
    top: var(--sticky-top);
    max-height: calc(100dvh - var(--sticky-top) - var(--sp-8));
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* Trust bar */
  .trust-list { gap: var(--sp-6) var(--sp-12); }

  /* GEO hero flag + text side by side */
  .geo-hero__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--sp-8);
  }
}

/* ── lg: 1024px ── */
@media (min-width: 1024px) {
  /* Footer all 5 columns */
  .foot-cols, .footer-cols { grid-template-columns: repeat(5, 1fr); }

  /* Bigger grids */
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-6 { grid-template-columns: repeat(6, 1fr); }

  /* Game hero: frame wider */
  .game-frame { max-width: 720px; }

  /* Payments strip more compact */
  .payments-strip a { width: 80px; height: 44px; }
}

/* ── xl: 1200px ── */
@media (min-width: 1200px) {
  .wrap { padding-inline: var(--sp-8); }
}

/* ── High-DPI — sharper images ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .logo img { image-rendering: -webkit-optimize-contrast; }
}

/* ── Dark mode — already dark; honour system preference ── */
@media (prefers-color-scheme: light) {
  /* Riobet is dark-only brand — no light mode override */
}

/* ============================================================
   29. PRINT
   ============================================================ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  .site-header,
  .pnav,
  .burger,
  .header-cta,
  .sidebar,
  footer,
  .cta-banner,
  .btn { display: none !important; }

  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }

  .breadcrumb, h1, h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  img { max-width: 100% !important; }

  .table-wrap { overflow: visible; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
}