/* SuperBull Gaming — base design system, translated from the original React/Tailwind build */

:root {
  --sb-red: #E31E24;
  --sb-red-dark: #B71C1C;
  --sb-red-darker: #c91a1f;
  --sb-black: #000000;
  --sb-bg: #000000;
  --sb-text: #f5f5f5;
  --sb-text-muted: #a3a3a3;
  --sb-text-faint: #737373;
  --sb-border: rgba(255, 255, 255, 0.1);
  --sb-max-width: 960px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--sb-black);
  color: var(--sb-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; }
p { margin: 0; }
ul { margin: 0; padding: 0; }

.sb-container {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.sb-container--narrow { max-width: 48rem; }

.sb-accent { color: var(--sb-red); }

.sb-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sb-red);
  margin-bottom: 1rem;
}

.sb-section { padding: 5rem 0; }
.sb-section--tight { padding: 3rem 0; }
.sb-section--bg-fade-down { background: linear-gradient(to bottom, #000, var(--sb-bg)); }
.sb-section--bg-fade-up { background: linear-gradient(to bottom, var(--sb-bg), #000); }
.sb-section--dark { background: var(--sb-bg); }
.sb-section--black { background: #000; }

.sb-heading-xl { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.sb-heading-lg { font-size: clamp(2rem, 4vw, 3rem); }
.sb-heading-md { font-size: clamp(1.5rem, 3vw, 2.25rem); }

.sb-lead { font-size: 1.125rem; color: var(--sb-text-muted); max-width: 48rem; }

.sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}
.sb-btn--primary { background: var(--sb-red); color: #fff; }
.sb-btn--primary:hover { background: var(--sb-red-darker); transform: scale(1.04); }
.sb-btn--outline { border-color: rgba(255,255,255,0.2); color: #fff; background: transparent; }
.sb-btn--outline:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
.sb-btn--block { width: 100%; justify-content: center; }
@media (min-width: 640px) { .sb-btn--block { width: auto; } }

.sb-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sb-border);
  border-radius: 1rem;
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.sb-card:hover { border-color: rgba(227,30,36,0.4); }

.sb-grid { display: grid; gap: 1.5rem; }
.sb-grid--2 { grid-template-columns: repeat(1, 1fr); }
.sb-grid--3 { grid-template-columns: repeat(1, 1fr); }
.sb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .sb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Navigation ---------- */
.sb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}
.sb-nav.is-scrolled { background: rgba(0,0,0,0.9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05); }
.sb-nav__inner { max-width: var(--sb-max-width); margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.sb-nav__logo img { height: 2rem; width: auto; }
.sb-nav__links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .sb-nav__links { display: flex; } }
.sb-nav__link { font-size: 0.875rem; font-weight: 500; color: #d4d4d4; padding: 0.5rem 0; position: relative; }
.sb-nav__link:hover, .sb-nav__link.is-active { color: #fff; }
.sb-nav__link.is-active::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--sb-red);
}
.sb-nav__lang { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; color: #d4d4d4; background: none; border: none; cursor: pointer; }
.sb-nav__lang-menu { position: absolute; top: 100%; right: 0; margin-top: 0.5rem; min-width: 140px; background: rgba(0,0,0,0.95); border: 1px solid var(--sb-border); border-radius: 0.5rem; overflow: hidden; display: none; z-index: 50; }
.sb-nav__lang-menu.is-open { display: block; }
.sb-nav__lang-menu button { display: block; width: 100%; text-align: left; padding: 0.6rem 1rem; font-size: 0.875rem; color: #fff; background: none; border: none; cursor: pointer; }
.sb-nav__lang-menu button:hover { background: var(--sb-red); }
.sb-nav__mobile-toggle { display: none; background: none; border: none; color: #fff; cursor: pointer; padding: 0.5rem; }
@media (max-width: 767px) { .sb-nav__mobile-toggle { display: block; } }
.sb-nav__mobile-panel {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.96); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.sb-nav__mobile-panel.is-open { opacity: 1; pointer-events: auto; }
.sb-nav__mobile-panel a { font-size: 1.75rem; font-weight: 500; color: #fff; }
.sb-nav__mobile-panel a:hover { color: var(--sb-red); }

/* ---------- Scroll progress + back to top ---------- */
.sb-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--sb-red); z-index: 60; width: 0%; }
.sb-back-to-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 50; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--sb-red); color: #fff; border: none; display: none; align-items: center; justify-content: center; cursor: pointer;
}
.sb-back-to-top.is-visible { display: flex; }

/* ---------- Hero ---------- */
.sb-hero { position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.sb-hero__bg { position: absolute; inset: 0; }
.sb-hero__bg video, .sb-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.sb-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.2) 50%, #000); }
.sb-hero__content { position: relative; z-index: 10; max-width: var(--sb-max-width); margin: 0 auto; padding: 0 1.5rem; }
.sb-hero--banner { min-height: 60vh; align-items: flex-end; text-align: left; }
.sb-hero__scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); width: 1.5rem; height: 2.5rem; border: 2px solid rgba(255,255,255,0.3); border-radius: 9999px; display: flex; align-items: flex-start; justify-content: center; padding: 0.5rem 0; z-index: 10; }
.sb-hero__scroll-indicator .dot { width: 4px; height: 8px; background: rgba(255,255,255,0.5); border-radius: 9999px; animation: sb-scroll-dot 2s ease-in-out infinite; }
@keyframes sb-scroll-dot { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(10px); opacity: 0.3; } }

/* ---------- Marquee ---------- */
.sb-marquee { overflow: hidden; white-space: nowrap; padding: 1rem 0; border-top: 1px solid var(--sb-border); border-bottom: 1px solid var(--sb-border); background: #000; }
.sb-marquee__track { display: inline-flex; gap: 3rem; animation: sb-marquee 30s linear infinite; }
.sb-marquee--reverse .sb-marquee__track { animation-direction: reverse; }
.sb-marquee__item { font-size: 1.5rem; font-weight: 700; color: rgba(255,255,255,0.15); text-transform: uppercase; letter-spacing: 0.05em; }
@keyframes sb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Carousel (infinite) ---------- */
.sb-carousel { overflow: hidden; }
.sb-carousel__track { display: flex; gap: 1rem; animation: sb-carousel-scroll 40s linear infinite; width: max-content; }
.sb-carousel--right .sb-carousel__track { animation-direction: reverse; }
.sb-carousel__track img { width: 220px; height: 140px; object-fit: cover; border-radius: 0.75rem; }
@keyframes sb-carousel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Game / News cards ---------- */
.sb-game-card { position: relative; display: block; overflow: hidden; border-radius: 1rem; aspect-ratio: 3/4; }
.sb-game-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.sb-game-card:hover img { transform: scale(1.08); }
.sb-game-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, #000, transparent 60%); pointer-events: none; }
.sb-game-card__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem; }
.sb-game-card__badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; background: var(--sb-red); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; border-radius: 9999px; }

.sb-game-card--listing {
  display: block;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.5s ease;
}
.sb-game-card--listing:hover { border-color: rgba(227,30,36,0.5); }
.sb-game-card--listing .sb-game-card__thumb { display: block; position: relative; aspect-ratio: 3/4; overflow: hidden; text-decoration: none; }
.sb-game-card--listing .sb-game-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.sb-game-card--listing:hover .sb-game-card__thumb img { transform: scale(1.1); }

/* Card body (below image) */
.sb-game-card__body { padding: 1rem; }
.sb-game-card__title {
  font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.3s ease;
}
.sb-game-card--listing:hover .sb-game-card__title { color: var(--sb-red); }
.sb-game-card__desc {
  font-size: 0.75rem; color: var(--sb-text-faint); margin-bottom: 0.75rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sb-game-card__meta { display: flex; align-items: center; justify-content: space-between; }
.sb-game-card__meta > span:first-child { font-size: 0.75rem; color: var(--sb-text-faint); }
.sb-game-card__more { font-size: 0.75rem; color: var(--sb-red); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; gap: 0.25rem; }
.sb-game-card--listing:hover .sb-game-card__more { opacity: 1; }

/* Hover glow blur behind card */
.sb-game-card__glow {
  position: absolute; inset: -4px; border-radius: 1.25rem;
  background: linear-gradient(to right, transparent, rgba(227,30,36,0.2), transparent);
  opacity: 0; filter: blur(20px); z-index: -1;
  transition: opacity 0.5s ease; pointer-events: none;
}
.sb-tilt:hover .sb-game-card__glow { opacity: 1; }
.sb-game-card__type-badge { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.2rem 0.6rem; font-size: 0.7rem; font-weight: 600; border-radius: 9999px; background: rgba(227,30,36,0.12); color: var(--sb-red); border: 1px solid rgba(227,30,36,0.35); }
.sb-game-card__new-badge { position: absolute; top: 0.75rem; right: 0.75rem; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; border-radius: 9999px; background: rgba(0,0,0,0.7); color: var(--sb-red); border: 1px solid rgba(227,30,36,0.4); }
.sb-game-card__new-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sb-red); display: inline-block; animation: sb-pulse 1.6s ease-in-out infinite; }
.sb-game-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.sb-game-card:hover .sb-game-card__play, .sb-game-card--listing:hover .sb-game-card__play { opacity: 1; pointer-events: all; }
.sb-game-card__play span { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--sb-red); display: flex; align-items: center; justify-content: center; }
.sb-game-card__play .sb-btn { font-size: 0.8rem; padding: 0.55rem 1.1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sb-game-card__play .sb-btn:hover { transform: scale(1.08); box-shadow: 0 0 20px rgba(227,30,36,0.5); }
.sb-game-card__rtp { position: absolute; bottom: 0.75rem; right: 0.75rem; padding: 0.25rem 0.6rem; font-size: 0.7rem; border-radius: 0.5rem; background: rgba(0,0,0,0.7); color: #d4d4d4; border: 1px solid var(--sb-border); opacity: 0; transition: opacity 0.3s ease; }
.sb-game-card--listing:hover .sb-game-card__rtp { opacity: 1; }
@keyframes sb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---------- Demo popup modal ---------- */
.sb-demo-modal { display: none; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 1rem; }
.sb-demo-modal.is-open { display: flex; }
.sb-demo-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.88); cursor: pointer; }
.sb-demo-modal__inner { position: relative; z-index: 1; width: min(95vw, 1280px); height: min(90vh, 810px); background: #000; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 25px 80px rgba(0,0,0,0.8); }
.sb-demo-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 10; background: rgba(0,0,0,0.85); border: 1px solid rgba(255,255,255,0.35); color: #fff; cursor: pointer; border-radius: 50%; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.5); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.sb-demo-modal__close:hover { transform: scale(1.08); }
.sb-demo-modal__close:hover { background: var(--sb-red); border-color: var(--sb-red); }
.sb-demo-modal__frame { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #000; }
.sb-demo-modal__frame iframe { width: 100%; height: 100%; border: none; display: block; flex-shrink: 0; }
.sb-demo-modal__frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sb-demo-modal__frame video { max-width: 100%; max-height: 100%; object-fit: contain; background: #000; }

.sb-games-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .sb-games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sb-games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sb-gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .sb-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sb-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sb-cinematic-header { position: relative; overflow: hidden; }
/* Games listing page only: its hero should span the full browser width like
   the individual game pages' hero video does, while every other section on
   the page stays inside the 960px .sb-gpage box. Scoped to this page's body
   class rather than the shared .sb-cinematic-header selector itself, since
   that class is also used on the (unboxed) Contact page — this rule would
   be a harmless no-op there, but there's no reason to touch it. Same
   full-bleed-breakout technique as .sb-gpage-hero: width:100vw + margins
   calculated from the viewport edges, safe because .sb-gpage has no
   overflow-x clipping to cut this off at 960px. */
body.page-template-page-games-php .sb-cinematic-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.sb-cinematic-header__bg { position: absolute; inset: 0; opacity: 0.1; background-size: cover; background-position: center; }
.sb-cinematic-header__grid { position: absolute; inset: 0; opacity: 0.03; background-image: linear-gradient(rgba(227,30,36,1) 1px, transparent 1px), linear-gradient(90deg, rgba(227,30,36,1) 1px, transparent 1px); background-size: 60px 60px; }

.sb-sort { position: relative; }
.sb-sort__toggle { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: rgba(255,255,255,0.05); border: 1px solid var(--sb-border); border-radius: 0.75rem; color: #d4d4d4; cursor: pointer; font-size: 0.875rem; }
.sb-sort__toggle:hover { border-color: rgba(227,30,36,0.5); color: #fff; }
.sb-sort__menu { position: absolute; right: 0; top: 100%; margin-top: 0.5rem; min-width: 12rem; background: #1a1a1a; border: 1px solid var(--sb-border); border-radius: 0.75rem; overflow: hidden; z-index: 20; display: none; }
.sb-sort__menu.is-open { display: block; }
.sb-sort__menu button { display: block; width: 100%; text-align: left; padding: 0.7rem 1rem; font-size: 0.875rem; color: #d4d4d4; background: none; border: none; cursor: pointer; }
.sb-sort__menu button:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sb-sort__menu button.is-active { background: var(--sb-red); color: #fff; }

.sb-filter-btn { border: 1px solid var(--sb-border); background: transparent; color: #d4d4d4; padding: 0.4rem 1rem; border-radius: 9999px; font-size: 0.875rem; cursor: pointer; transition: all 0.3s ease; }
.sb-filter-btn:hover { border-color: rgba(227,30,36,0.5); color: #fff; }
.sb-filter-btn.is-active { background: var(--sb-red); border-color: var(--sb-red); color: #fff; }

.sb-news-card { display: flex; flex-direction: column; height: 100%; }
.sb-news-card__img { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 1rem 1rem 0 0; }
.sb-news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.sb-news-card:hover .sb-news-card__img img { transform: scale(1.08); }
.sb-news-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }

/* ---------- Forms ---------- */
.sb-field { margin-bottom: 1.5rem; }
.sb-field label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; }
.sb-field input, .sb-field textarea {
  width: 100%; padding: 0.75rem 1rem; background: rgba(0,0,0,0.5); border: 1px solid var(--sb-border);
  border-radius: 0.5rem; color: #fff; font-size: 1rem; font-family: inherit;
}
.sb-field input:focus, .sb-field textarea:focus { outline: none; border-color: var(--sb-red); }

/* ---------- Footer ---------- */
.sb-footer { background: #000; border-top: 1px solid var(--sb-border); }
.sb-footer__newsletter { border-bottom: 1px solid var(--sb-border); padding: 3rem 0; }
.sb-footer__main { padding: 4rem 0; }
.sb-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-bottom: 3rem; }
@media (min-width: 768px) { .sb-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sb-footer__brand { grid-column: span 1; }
@media (min-width: 1024px) { .sb-footer__brand { grid-column: span 2; } }
.sb-footer__logo img { height: 2.5rem; width: auto; margin-bottom: 1.25rem; }
.sb-footer__socials { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.sb-footer__social { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--sb-border); display: flex; align-items: center; justify-content: center; }
.sb-footer__social:hover { background: var(--sb-red); border-color: var(--sb-red); }
.sb-footer h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem; }
.sb-footer ul { list-style: none; }
.sb-footer ul li { margin-bottom: 0.75rem; }
.sb-footer ul a { font-size: 0.875rem; color: var(--sb-text-muted); }
.sb-footer ul a:hover { color: var(--sb-red); }
.sb-footer__bottom { padding-top: 2rem; border-top: 1px solid var(--sb-border); display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; font-size: 0.75rem; color: var(--sb-text-faint); }
@media (min-width: 768px) { .sb-footer__bottom { flex-direction: row; } }

/* On game pages, the games listing page, and the home page, the whole page
   is boxed to --sb-max-width with a black margin either side (see
   .sb-gpage); the newsletter strip + footer sit outside that wrapper
   (they're a shared partial) but should visually continue the same box
   rather than reverting to a full-bleed black bar, so box the <footer>
   element itself the same way .sb-gpage is boxed — scoped to these
   templates only, since other templates aren't boxed yet and should keep
   the original full-bleed footer. */
body.single-game .sb-footer,
body.page-template-page-games-php .sb-footer,
body.page-template-page-home-2-php .sb-footer {
  max-width: var(--sb-max-width);
  margin-left: auto;
  margin-right: auto;
  background: var(--sb-bg);
}

/* ---------- Reveal animation (progressive enhancement) ---------- */
.sb-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.sb-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Entrance animation (always-in-view pages, e.g. 404) ---------- */
.sb-entrance { animation: sb-entrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes sb-entrance { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

/* ---------- Tilt card (3D tilt + light-shine on mouse move) ---------- */
.sb-tilt { position: relative; transform-style: preserve-3d; transition: transform 0.1s ease-out; will-change: transform; height: 100%; }
.sb-tilt__shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.3s ease; }

/* ---------- Custom cursor ---------- */
html.sb-custom-cursor, html.sb-custom-cursor * { cursor: none !important; }
.sb-cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 2px solid var(--sb-red); border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; box-shadow: 0 0 10px rgba(227,30,36,0.4); opacity: 0; }
.sb-cursor-ring.is-visible { opacity: 1; }
.sb-cursor-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; background: var(--sb-red); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); box-shadow: 0 0 8px rgba(227,30,36,0.8); transition: width 0.1s ease, height 0.1s ease, opacity 0.1s ease; opacity: 0; }
.sb-cursor-dot.is-visible { opacity: 1; }
@media (pointer: coarse) { .sb-cursor-ring, .sb-cursor-dot { display: none; } }

/* ========================================================================
 * Home Page 2 (alternate layout, per Home Page.pdf wireframe)
 * ===================================================================== */

/* Hero (centered, mascot bottom-center) */
/* Full-bleed breakout, same technique as .sb-gpage-hero on the individual
   game pages and .sb-cinematic-header on the games listing page: this hero
   spans the full browser width while every other section on the page stays
   inside the 960px .sb-gpage box (see that rule for why this specific
   width:100vw + margin trick is used instead of just widening the parent). */
.sb-hero2 {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
.sb-hero2__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sb-hero2__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 70%, #000 100%); }

/* Warm golden glow behind mascot */
.sb-hero2__glow {
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: 75vw;
  height: 55vw;
  background: radial-gradient(ellipse at center, rgba(180,95,5,0.48) 0%, rgba(160,70,5,0.2) 38%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Centered content block */
.sb-hero2__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8rem 1.5rem 3rem;
  width: 100%;
  max-width: var(--sb-max-width);
  margin: 0 auto;
}

/* Hero heading & lead overrides (larger than generic utility classes) */
.sb-hero2__content h1 {
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.sb-hero2__content .sb-lead {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
}

/* Eyebrow with horizontal lines: — TEXT — */
.sb-hero2__eyebrow-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.sb-hero2__eyebrow-line {
  flex: 0 0 2.5rem;
  height: 1px;
  background: rgba(255,255,255,0.35);
  display: block;
}
.sb-hero2__eyebrow-text {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .sb-hero2__content { padding-top: 6rem; }
  .sb-hero2__content h1 { font-size: clamp(2.25rem, 8vw, 3rem); }
}

/* ---- Game card hover: alternate image swap (home + games grid) ---- */
.sb-game-card-h2__banner-img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.45s ease, transform 0.55s ease;
  display: block;
  will-change: opacity, transform;
}
/* Base thumbnail art has its own rounded corners baked in with transparent
   PNG/WebP padding around them — at 1:1 scale that transparent margin shows
   through as a mismatched, hard-edged gap against the card's own background.
   A modest base zoom crops that transparent margin out of view without
   cropping the meaningful art (logo/title), which sits well inside it. */
.sb-game-card-h2__thumb-img {
  transition: transform 0.5s ease, filter 0.35s ease, opacity 0.35s ease;
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.08);
}
.sb-game-card-h2:hover .sb-game-card-h2__banner-img { opacity: 1; transform: scale(1); }
.sb-game-card-h2:hover .sb-game-card-h2__thumb-img { opacity: 0; transform: scale(1.1); filter: brightness(0.4); }
/* Expand overlays stats — card height never changes */
.sb-game-card-h2__expand {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sb-game-card-h2__expand .sb-btn { width: 100%; justify-content: center; border-radius: 0.5rem; }
.sb-game-card-h2:hover .sb-game-card-h2__stats { opacity: 0; pointer-events: none; }
.sb-game-card-h2:hover .sb-game-card-h2__expand { opacity: 1; pointer-events: all; }

/* ---- Mascot stage ----
   Used to also host 4 photo-background "stat" cards (2 peeking in from
   off-screen at the sides using vw units, 2 boxed main ones) layered
   behind/above the mascot image — a much busier treatment than the
   reference design's plain mascot-alone shot, and it duplicated the actual
   stats already shown by .sb-stat-simple-card above it. Simplified to just
   the mascot image, matching the reference. */
.sb-mascot-stage {
  position: relative;
  background: #000;
  padding: 3rem 0;
}
.sb-msc-mascot { text-align: center; }
.sb-msc-mascot img {
  width: 52%;
  max-width: 640px;
  display: inline-block;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,0.8));
}
@media (max-width: 768px) { .sb-msc-mascot img { width: 68%; } }
@media (max-width: 480px) { .sb-msc-mascot img { width: 82%; } }

/* ---- Stat flip-cards — a horizontally auto-scrolling strip (drifts left
   to right on its own via JS, pauses while the visitor hovers/drags it —
   see sbInitFlipMarquee in main.js) of flip cards: front shows a big
   value + label, hover/tap flips to a back face with supporting copy.
   Each card also does a one-time staggered "enter from top" animation
   (see [data-sb-flip-enter], toggled to .is-visible by IntersectionObserver
   in main.js) the first time the section scrolls into view. ---- */
.sb-stat-flip-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.5rem 0.25rem 1rem;
  cursor: grab;
}
.sb-stat-flip-track::-webkit-scrollbar { display: none; }
.sb-stat-flip-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.sb-stat-flip-card { flex: 0 0 15.5rem; height: 14rem; }
[data-sb-flip-enter] {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-sb-flip-enter].is-visible { opacity: 1; transform: translateY(0); }
.sb-stat-flip-card__front {
  border: 1px solid rgba(227,30,36,0.35) !important;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(227,30,36,0.18), transparent 60%),
    #0a0a0a !important;
  align-items: center;
  text-align: center;
}
.sb-stat-flip-card__img { width: 2.5rem; height: 2.5rem; object-fit: contain; margin-bottom: 0.75rem; }
.sb-stat-simple-card__value {
  display: block;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}
.sb-stat-simple-card__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  margin-top: 0.5rem;
}

/* Legacy: keep for any existing references */
.sb-home-stats { display: none; }
.sb-home-stat-card { display: none; }

/* Horizontal game carousel with nav arrows */
.sb-game-carousel { position: relative; }
.sb-game-carousel__track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 0.5rem; scrollbar-width: none; }
.sb-game-carousel__track::-webkit-scrollbar { display: none; }
.sb-game-carousel__track > * { flex: 0 0 280px; }
.sb-carousel-arrow { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--sb-border); background: rgba(255,255,255,0.05); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.sb-carousel-arrow:hover { border-color: var(--sb-red); background: var(--sb-red); }

/* Tilt wrapper override for carousel context */
.sb-game-carousel__track .sb-tilt { height: auto; border-radius: 1rem; }
.sb-game-carousel__track .sb-tilt__shine { border-radius: 1rem; }
.sb-game-carousel__track .sb-tilt:hover .sb-game-card__glow { opacity: 1; }

/* height:100% + flex column so every card in a row matches the tallest one
   regardless of title/description length, with the stats row pinned to the
   bottom instead of the extra space being absorbed unevenly mid-card. */
.sb-game-card-h2 { display: flex; flex-direction: column; height: 100%; border-radius: 1rem; overflow: hidden; background: rgba(255,255,255,0.04); border: 1px solid var(--sb-border); transition: border-color 0.4s ease; }
.sb-game-card-h2:hover { border-color: rgba(227,30,36,0.4); }
.sb-game-card-h2__thumb { display: block; position: relative; aspect-ratio: 3/4; overflow: hidden; flex-shrink: 0; }
.sb-game-card-h2__cta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.sb-game-card-h2:hover .sb-game-card-h2__cta { opacity: 1; pointer-events: all; }
.sb-game-card-h2__cta .sb-btn { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sb-game-card-h2__cta .sb-btn:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(227,30,36,0.5); }
.sb-game-card-h2__body { padding: 1rem; position: relative; display: flex; flex-direction: column; flex: 1; }
.sb-game-card-h2__body h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.sb-game-card-h2__body > a p {
  font-size: 0.8rem;
  color: var(--sb-text-faint);
  margin-bottom: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-game-card-h2__stats { display: flex; justify-content: space-between; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--sb-border); transition: opacity 0.25s ease; margin-top: auto; }
.sb-game-card-h2__stats div { display: flex; flex-direction: column; gap: 0.15rem; }
.sb-game-card-h2__stats span { font-size: 0.6rem; color: var(--sb-text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.sb-game-card-h2__stats strong { font-size: 0.8rem; color: #fff; font-weight: 600; }

/* Sticky parallax features section */
.sb-features2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .sb-features2 { grid-template-columns: 1fr 1.3fr; gap: 4rem; } }
.sb-features2__sticky { position: relative; }
@media (min-width: 1024px) { .sb-features2__sticky { position: sticky; top: 8rem; align-self: start; height: fit-content; } }
.sb-features2__list { display: flex; flex-direction: column; gap: 3.5rem; }
.sb-feature2-block { border-top: 1px solid var(--sb-border); padding-top: 1.5rem; transition: opacity 0.5s ease; }
.sb-feature2-block h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.sb-feature2-block p { color: var(--sb-text-muted); line-height: 1.7; margin-bottom: 0.75rem; white-space: pre-line; }
/* Dims to 50% while not the item currently centered in the viewport,
   fading to full opacity as it becomes the focused one while scrolling
   (see data-sb-standout-states in main.js). Only at 1024px+, where the
   list actually scrolls independently alongside the sticky heading —
   below that every block stays fully visible. */
@media (min-width: 1024px) {
  .sb-feature2-block { opacity: 0.5; }
  .sb-feature2-block.is-active { opacity: 1; }
}

/* Slide-in-from-side cards (Why Choose Us) */
.sb-slide-in { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.sb-slide-in--left { transform: translateX(-40px); }
.sb-slide-in--right { transform: translateX(40px); }
.sb-slide-in.is-visible { opacity: 1; transform: translateX(0); }
/* Why-aggregators — large title cards in a 2x2 grid, matching the
   reference design's front face (no icon, no body copy on the front —
   just a big bold title, vertically centered in a generous dark-gradient
   card with a red glow border/shadow); hover/tap flips the card (reusing
   .sb-flip-card) to reveal the supporting copy on the back. */
.sb-why-agg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .sb-why-agg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    /* Figma reference insets this card block to ~74% of the container
       width (extra left/right margin beyond .sb-container's own padding),
       not edge-to-edge. */
    max-width: 680px;
    margin: 0 auto;
  }
}
.sb-why-card.sb-flip-card { height: 18rem; }
.sb-why-card__front {
  display: flex;
  align-items: center;
  padding: 2.5rem !important;
  border: 1px solid rgba(227,30,36,0.4) !important;
  background: linear-gradient(160deg, #262626 0%, #0a0a0a 65%) !important;
  box-shadow: 0 0 24px rgba(227,30,36,0.12);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.sb-why-card:hover .sb-why-card__front { border-color: rgba(227,30,36,0.65) !important; box-shadow: 0 0 32px rgba(227,30,36,0.22); }
.sb-why-card h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}
.sb-why-card__back {
  padding: 2.5rem !important;
  border-color: rgba(227,30,36,0.4) !important;
  background: linear-gradient(160deg, rgba(227,30,36,0.16) 0%, #0a0a0a 70%) !important;
}
.sb-why-card__back p { font-size: 0.95rem; line-height: 1.7; }

/* Partner / Contact split */
.sb-partner-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 1024px) { .sb-partner-grid { grid-template-columns: 1fr 1fr; align-items: center; } }
.sb-contact-card { background: linear-gradient(150deg, var(--sb-red), var(--sb-red-dark)); border-radius: 1.5rem; padding: 2.5rem; }
.sb-contact-card input, .sb-contact-card textarea { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-weight: 400; transition: font-weight 0.2s ease, border-color 0.2s ease; }
.sb-contact-card input::placeholder, .sb-contact-card textarea::placeholder { color: rgba(255,255,255,0.6); }
.sb-contact-card input.is-filled, .sb-contact-card textarea.is-filled { font-weight: 700; border-color: #fff; }
.sb-contact-card .sb-btn--primary { background: #fff; color: var(--sb-red); }
.sb-contact-card .sb-btn--primary:hover { background: #000; color: #fff; }

/* News "View All" hover-darken */
.sb-news-cta:hover { background: var(--sb-red) !important; border-color: var(--sb-red) !important; color: #fff !important; }

/* FAQ accordion */
.sb-faq-item { border-bottom: 1px solid var(--sb-border); }
/* white-space:normal is required: WordPress core's default button styles
   set white-space:nowrap, which this rule never contested — on a narrow
   viewport, that stopped a long question from wrapping next to the chevron
   and pushed the whole button past the page's right edge. Same bug, same
   fix already applied to .sb-gpage-faq__q on the individual game pages. */
.sb-faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem; margin: 0 -1.25rem; background: none; border: none; border-radius: 0.75rem; color: #fff; font-size: 1.05rem; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; white-space: normal; }
.sb-faq-item__q:hover { background: rgba(227,30,36,0.08); color: var(--sb-red); }
.sb-faq-item__q .dashicons { transition: transform 0.3s ease; color: var(--sb-red); flex-shrink: 0; }
.sb-faq-item.is-open .sb-faq-item__q .dashicons { transform: rotate(180deg); }
.sb-faq-item.is-open .sb-faq-item__q { background: rgba(227,30,36,0.06); }
.sb-faq-item__a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.sb-faq-item__a-inner { padding: 0 1.25rem 1.25rem; color: var(--sb-text-muted); line-height: 1.7; }
.sb-faq-item.is-open .sb-faq-item__a { max-height: 30rem; }

/* Watermark text */
.sb-watermark { font-size: clamp(4rem, 18vw, 12rem); font-weight: 800; line-height: 1; text-align: center; color: rgba(255,255,255,0.04); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; user-select: none; }

/* Floating "Games" shortcut */
.sb-floating-games { position: fixed; bottom: 2rem; left: 2rem; z-index: 50; display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.25rem; border-radius: 9999px; background: var(--sb-red); color: #fff; font-weight: 600; font-size: 0.875rem; box-shadow: 0 8px 24px rgba(227,30,36,0.4); transition: transform 0.3s ease, background 0.3s ease; }
.sb-floating-games:hover { transform: scale(1.06); background: var(--sb-red-dark); }
@media (max-width: 640px) { .sb-floating-games span.label { display: none; } .sb-floating-games { padding: 0.75rem; } }

/* ---------- Contact Form 7 styling ---------- */
.wpcf7-form p { margin-bottom: 1.5rem; }
.wpcf7-form label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: #fff; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form input.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control {
  width: 100%; padding: 0.75rem 1rem; background: rgba(0,0,0,0.5); border: 1px solid var(--sb-border);
  border-radius: 0.5rem; color: #fff; font-size: 1rem; font-family: inherit; font-weight: 400;
  transition: border-color 0.2s ease, font-weight 0.2s ease;
}
.wpcf7-form input.wpcf7-form-control:focus,
.wpcf7-form textarea.wpcf7-form-control:focus { outline: none; border-color: var(--sb-red); }
.wpcf7-form input.wpcf7-form-control.is-filled,
.wpcf7-form textarea.wpcf7-form-control.is-filled { font-weight: 700; }
.wpcf7-form input.wpcf7-form-control::placeholder,
.wpcf7-form textarea.wpcf7-form-control::placeholder { color: #6b6b6b; font-weight: 400; }
.wpcf7-form input.wpcf7-submit {
  display: inline-flex; align-items: center; gap: 0.5rem; width: auto; padding: 1rem 2rem; border-radius: 9999px;
  font-weight: 500 !important; border: 1px solid transparent; cursor: pointer; transition: all 0.3s ease; font-size: 0.95rem;
  background: var(--sb-red) !important; color: #fff;
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--sb-red-darker) !important; transform: scale(1.04); }
.wpcf7-form .wpcf7-spinner { margin-left: 0.75rem; }
.wpcf7-not-valid-tip { color: #ff8080; font-size: 0.8rem; margin-top: 0.4rem; }
.wpcf7-response-output { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; border: 1px solid var(--sb-border); color: var(--sb-text-muted); }
.wpcf7-form.sent .wpcf7-response-output { border-color: rgba(34,197,94,0.4); color: #86efac; }
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output { border-color: rgba(227,30,36,0.4); color: #ff8080; }

/* Contact card (red gradient) — underline-style inputs per screenshot */
.sb-contact-card .wpcf7-form label { display: none; } /* placeholders serve as labels */
.sb-contact-card .wpcf7-form p { margin-bottom: 1rem; }
/* :not(.wpcf7-submit) matters here: CF7 gives the submit button the same
   wpcf7-form-control class as the text fields, so without excluding it
   these !important rules (meant for the underline-style text inputs) were
   also stripping the submit button's own padding/border-radius down to
   nothing — it was rendering as a tiny unstyled square instead of a pill
   button, since !important beats the later, more specific .wpcf7-submit
   rule below on the properties they both touch. */
.sb-contact-card .wpcf7-form input.wpcf7-form-control:not(.wpcf7-submit),
.sb-contact-card .wpcf7-form textarea.wpcf7-form-control {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.45) !important;
  border-radius: 0 !important;
  padding: 0.6rem 0 !important;
  color: #fff;
  font-size: 0.95rem;
}
.sb-contact-card .wpcf7-form input.wpcf7-form-control:not(.wpcf7-submit):focus,
.sb-contact-card .wpcf7-form textarea.wpcf7-form-control:focus {
  outline: none;
  border-bottom-color: #fff !important;
}
.sb-contact-card .wpcf7-form input.wpcf7-form-control::placeholder,
.sb-contact-card .wpcf7-form textarea.wpcf7-form-control::placeholder { color: rgba(255,255,255,0.65); font-size: 0.9rem; }
/* height, not just min-height: CF7's [textarea] shortcode renders
   rows="10" by default, which sets the browser's natural/intrinsic height
   for the element regardless of min-height (that only ever raises a floor,
   never lowers the rows-driven height) — this was leaving a huge empty gap
   under "Message Details". An explicit height overrides that regardless of
   the rows attribute. */
.sb-contact-card .wpcf7-form textarea.wpcf7-form-control { height: 5rem; resize: none; }
.sb-contact-card .wpcf7-form input.wpcf7-form-control.is-filled:not(.wpcf7-submit),
.sb-contact-card .wpcf7-form textarea.wpcf7-form-control.is-filled { border-bottom-color: #fff !important; }
.sb-contact-card .wpcf7-form input.wpcf7-submit {
  display: inline-flex; align-items: center; gap: 0.5rem; width: auto;
  padding: 0.75rem 2.5rem; border-radius: 9999px; font-weight: 600 !important;
  border: none !important; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem;
  background: #fff !important; color: var(--sb-red) !important; margin-top: 0.5rem;
}
.sb-contact-card .wpcf7-form input.wpcf7-submit:hover { background: #f0f0f0 !important; transform: scale(1.04); }
.sb-contact-card .wpcf7-response-output { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); }

/* Partner section — simple bullet dots */
.sb-partner-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  line-height: 1.5;
}
.sb-partner-bullet__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  margin-top: 0.45em;
}

/* Features heading: SUPERBULL / FEATURES large stacked */
.sb-features2-heading__logo { display: block; height: clamp(2.75rem, 5.5vw, 4.25rem); width: auto; margin-bottom: 0.5rem; }
.sb-features2-heading .line2 { display: block; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; line-height: 1; }

/* Licensing split layout */
.sb-licensing-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) { .sb-licensing-split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.sb-licensing-split__text { /* inherits grid child flow */ }
.sb-licensing-split__badge { display: flex; justify-content: center; align-items: center; }

/* Typographic BMM logo (matches screenshot: big red "bmm", big white "testlabs") */
.sb-bmm-logo { line-height: 0.85; }
.sb-bmm-logo__bmm {
  display: block;
  font-size: clamp(5rem, 10vw, 8.5rem);
  font-weight: 900;
  color: var(--sb-red);
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.sb-bmm-logo__testlabs {
  display: block;
  font-size: clamp(3.25rem, 6.5vw, 5.5rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

/* Legacy circular badge — hidden */
.sb-bmm-badge { display: none; }

/* Newsletter form: inline email + button row */
.sb-newsletter-form .wpcf7-form { display: flex; gap: 0.75rem; align-items: flex-start; }
.sb-newsletter-form .wpcf7-form p { margin: 0; flex: 1; display: flex; gap: 0.75rem; }
.sb-newsletter-form .wpcf7-form-control-wrap { flex: 1; min-width: 11rem; }
.sb-newsletter-form input.wpcf7-form-control { border-radius: 0.75rem; width: 100%; }
.sb-newsletter-form .wpcf7-submit { white-space: nowrap; padding: 0.75rem 1.5rem; }
.sb-newsletter-form .wpcf7-response-output { flex-basis: 100%; margin-top: 0.75rem; }
@media (max-width: 640px) { .sb-newsletter-form .wpcf7-form, .sb-newsletter-form .wpcf7-form p { flex-direction: column; } }

/* ========================================================================
 * Games Page — layout sections
 * ===================================================================== */

/* Hero eyebrow with dashes */
.sb-eyebrow--dashes::before { content: '— '; }
.sb-eyebrow--dashes::after  { content: ' —'; }

/* Toolbar (total count + search) */
.sb-games-toolbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sb-games-toolbar__count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sb-games-total-count {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.sb-games-search-wrap {
  position: relative;
  flex: 1;
  max-width: 22rem;
}
.sb-games-search {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--sb-border);
  border-radius: 0.5rem;
  color: #fff;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease;
}
.sb-games-search:focus { border-color: rgba(255,255,255,0.25); }
.sb-games-search::placeholder { color: var(--sb-text-faint); }
.sb-games-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sb-text-faint);
  font-size: 1rem;
  pointer-events: none;
}

/* Controls row: search + Sort By / Category dropdowns, all in one line */
.sb-games-controls-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.sb-games-controls-row .sb-games-search-wrap { max-width: none; flex: 1 1 16rem; }

/* Generic dropdown (Sort By / Category) */
.sb-dropdown { position: relative; }
.sb-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--sb-border);
  border-radius: 0.5rem;
  color: var(--sb-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.sb-dropdown__toggle:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }
.sb-dropdown.is-open .sb-dropdown__toggle { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); }
.sb-dropdown__toggle-label { color: var(--sb-text-faint); }
.sb-dropdown__value { color: #fff; }
.sb-dropdown__caret { font-size: 0.9rem; transition: transform 0.2s ease; }
.sb-dropdown.is-open .sb-dropdown__caret { transform: rotate(180deg); }
.sb-dropdown__menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.5rem;
  min-width: 100%;
  background: #1a1a1a;
  border: 1px solid var(--sb-border);
  border-radius: 0.75rem;
  overflow: hidden;
  z-index: 20;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: none;
}
.sb-dropdown.is-open .sb-dropdown__menu { display: block; }
.sb-dropdown__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  color: #d4d4d4;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.sb-dropdown__option:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sb-dropdown__check { font-size: 1rem; opacity: 0; color: var(--sb-red); }
.sb-dropdown__option.is-selected { color: #fff; }
.sb-dropdown__option.is-selected .sb-dropdown__check { opacity: 1; }

/* Card stats row (Category | RTP | Volatility) */
.sb-game-card__stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--sb-border);
  padding-top: 0.65rem;
  margin-top: 0.5rem;
}
.sb-game-card__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0.35rem;
  border-right: 1px solid var(--sb-border);
}
.sb-game-card__stat:last-child { border-right: none; }
.sb-game-card__stat-label {
  font-size: 0.58rem;
  color: var(--sb-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sb-game-card__stat-value {
  font-size: 0.72rem;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Load More button */
[data-sb-load-more] { transition: all 0.3s ease; }

/* Split layout */
.sb-games-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .sb-games-split { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .sb-games-split--reverse .sb-games-split__content { order: 2; }
  .sb-games-split--reverse .sb-games-split__visual { order: 1; }
}
.sb-games-split__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Studio section — character overflows and fades from thighs */
.sb-studio-visual {
  overflow: visible;
  align-items: flex-end;
}
.sb-studio-char-wrap {
  position: relative;
  width: 100%;
  max-width: 26rem;
  display: flex;
  align-items: flex-end;
}
.sb-studio-char-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(-10px 20px 40px rgba(0,0,0,0.7));
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 88%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 88%);
  transition: transform 0.5s ease;
}
.sb-studio-char-wrap:hover .sb-studio-char-img { transform: translateY(-4px) scale(1.01); }

/* Character / object PNG images in split sections (transparent bg) */
.sb-games-char-img {
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
  transition: transform 0.5s ease;
  max-height: 28rem;
  object-fit: contain;
}
.sb-games-char-img--md  { max-height: 22rem; }
.sb-games-char-img--lg  { max-height: 26rem; }
.sb-games-char-img--xl  { max-height: 32rem; }
.sb-games-split__visual:hover .sb-games-char-img { transform: translateY(-6px) scale(1.02); }

/* "What Makes SuperBull Different" accordion — a single shared image on the
   left crossfades to match whichever item is open on the right, instead of
   3 separate full-bleed sections each with their own always-visible image. */
.sb-games-diff-accordion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .sb-games-diff-accordion { grid-template-columns: 20rem minmax(0, 1fr); gap: 3.5rem; }
}
.sb-games-diff-accordion__visual { position: relative; text-align: center; min-height: 14rem; min-width: 0; }
.sb-games-diff-accordion__img {
  max-width: 100%;
  height: auto;
  max-height: 16rem;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sb-games-diff-accordion__img.is-active { position: relative; opacity: 1; }
.sb-games-diff-accordion__items { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.sb-games-diff-accordion__item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--sb-border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.sb-games-diff-accordion__item.is-open { border-color: rgba(227,30,36,0.4); }
.sb-games-diff-accordion__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
/* Explicit background-color here is required: WordPress core's default
   button styles (button:hover { background-color: #cc3366 }) otherwise win
   on this property, since a plain class selector has lower specificity
   than an element+pseudo-class one — the base rule above never contests
   it because it has no :hover in its own selector. Same fix already
   applied to .sb-gpage-faq__q on the individual game pages. */
.sb-games-diff-accordion__q:hover,
.sb-games-diff-accordion__q:focus-visible {
  background-color: rgba(227,30,36,0.08);
}
.sb-games-diff-accordion__q .sb-eyebrow { font-size: 0.7rem; }
.sb-games-diff-accordion__q .sb-gpage-chevron-btn { transition: transform 0.3s ease; }
.sb-games-diff-accordion__item.is-open .sb-games-diff-accordion__q .sb-gpage-chevron-btn { transform: rotate(180deg); }
.sb-games-diff-accordion__a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.sb-games-diff-accordion__a-inner { padding: 0 1.5rem 1.5rem; }
.sb-games-diff-accordion__a-inner p { color: var(--sb-text-muted); line-height: 1.75; margin-bottom: 0.75rem; }
.sb-games-diff-accordion__a-inner p:last-child { margin-bottom: 0; }
.sb-games-diff-accordion__item.is-open .sb-games-diff-accordion__a { max-height: 30rem; }

/* Featured games grid (2 cols on mobile, 4 on desktop) */
.sb-games-featured-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .sb-games-featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Integration — first bullet as subheader */
.sb-integration-lead {
  text-align: center;
  font-size: 1rem;
  color: var(--sb-text-muted);
  margin-bottom: 2rem;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

/* Integration — card-row bullet list */
.sb-games-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 3rem;
}
.sb-games-bullet-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--sb-border);
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.03);
  font-size: 0.9rem;
  color: var(--sb-text);
  line-height: 1.4;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.sb-games-bullet-card:first-child {
  background: rgba(227,30,36,0.06);
  border-color: rgba(227,30,36,0.25);
}
.sb-games-bullet-card:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
.sb-games-bullet-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sb-red);
}

/* Integration flip cards — front shows just the title, back reveals the
   description on hover/focus/tap (mobile: tap toggles via .is-flipped). */
.sb-games-integration-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 700px) {
  .sb-games-integration-blocks { grid-template-columns: 1fr 1fr; }
}
.sb-flip-card { perspective: 1600px; height: 14rem; }
.sb-flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  transform-style: preserve-3d;
}
.sb-flip-card:hover .sb-flip-card__inner,
.sb-flip-card.is-flipped .sb-flip-card__inner { transform: rotateY(180deg); }
.sb-flip-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 1px solid var(--sb-border);
  border-radius: 1rem;
  background: rgba(255,255,255,0.03);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sb-flip-card__face--front { display: flex; align-items: center; justify-content: center; text-align: center; }
/* Back faces scroll instead of clipping/overflowing when their copy is
   taller than the fixed card height — top-aligned (not centered) once
   scrollable, since centering an overflowing flex container clips the
   start of the content. Thin red-tinted scrollbar so it still reads as
   part of the card rather than a generic browser chrome element. */
.sb-flip-card__face--back {
  transform: rotateY(180deg);
  background: rgba(227,30,36,0.06);
  border-color: rgba(227,30,36,0.3);
  overflow-y: auto;
  justify-content: flex-start;
  scrollbar-width: thin;
  scrollbar-color: rgba(227,30,36,0.5) transparent;
}
.sb-flip-card__face--back::-webkit-scrollbar { width: 6px; }
.sb-flip-card__face--back::-webkit-scrollbar-track { background: transparent; }
.sb-flip-card__face--back::-webkit-scrollbar-thumb { background: rgba(227,30,36,0.5); border-radius: 3px; }
.sb-flip-card__face--back::-webkit-scrollbar-thumb:hover { background: rgba(227,30,36,0.75); }
.sb-flip-card__face--back p { color: var(--sb-text-muted); line-height: 1.75; font-size: 0.9rem; }
.sb-integration-block-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
}
.sb-flip-card__face--back .sb-integration-block-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}

/* Stand Out + Partner CTA — two-column section. Left column stacks all 3
   states as REAL content (each with its own image + text) — no invisible
   scroll runway, no sticky-pinned card. Instead, whichever state is
   currently centered in the viewport is highlighted (full opacity/scale);
   the others sit dimmed. Right CTA card is sticky against this real
   content. (A hide-2-show-1 sticky-card version was tried first: the state
   shown had to STAY pinned on screen while its own container scrolled past,
   which mathematically requires the container to be ~3x the card's height
   — and that gap between the card and its oversized container was exactly
   the dead space users kept seeing. Below the 900px breakpoint the
   highlight effect is skipped entirely — full opacity always — since a
   phone screen doesn't have room for a "currently centered" affordance to
   read as meaningful.) */
.sb-standout-section2 { background: var(--sb-bg); }
.sb-standout-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 900px) {
  .sb-standout-grid { grid-template-columns: 1.2fr 1fr; gap: 3.5rem; align-items: start; }
}

.sb-standout-states-col { display: flex; flex-direction: column; gap: 2rem; }
.sb-standout-state { border-radius: 1rem; overflow: hidden; }
@media (min-width: 900px) {
  .sb-standout-state { opacity: 0.45; transform: scale(0.98); transition: opacity 0.4s ease, transform 0.4s ease; }
  .sb-standout-state.is-active { opacity: 1; transform: scale(1); }
}
.sb-standout-state__img { width: 100%; height: 16rem; object-fit: cover; display: block; border-radius: 1rem 1rem 0 0; }
@media (min-width: 900px) { .sb-standout-state__img { height: 20rem; } }
.sb-standout-state__body {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--sb-border);
  border-top: 0;
  border-radius: 0 0 1rem 1rem;
  padding: 1.75rem;
}
.sb-standout-state__body h3 { font-size: 1.35rem; margin: 0.5rem 0 0.75rem; }
.sb-standout-state__body p { color: var(--sb-text-muted); line-height: 1.75; }

.sb-standout-cta-wrap { }
@media (min-width: 900px) {
  .sb-standout-cta-wrap { position: sticky; top: 6rem; align-self: start; }
}
.sb-standout-cta-card {
  border: 1px solid var(--sb-border);
  border-radius: 1rem;
  padding: 2.25rem;
  background: radial-gradient(ellipse at 30% 20%, rgba(227,30,36,0.15), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(227,30,36,0.1), transparent 55%), rgba(255,255,255,0.03);
}
.sb-standout-cta-card p { color: var(--sb-text-muted); line-height: 1.75; margin-bottom: 1.5rem; }
/* The logo wraps to its own line under "Why Partner With" (the full
   wordmark, incl. "GAMING", is too wide to stay inline) — block + auto
   margins centers it on that line instead of hugging the left edge. */
.sb-standout-cta-card__logo { height: 1.4em; width: auto; display: block; margin: 0.3rem auto 0; }

/* Demo section — full-width gradient bg */
.sb-demo-section {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: var(--sb-bg);
}
.sb-demo-section__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  filter: blur(2px);
  transform: scale(1.05);
}
.sb-demo-section .sb-heading-lg { color: #fff; }
.sb-demo-section .sb-lead { color: rgba(255,255,255,0.8); }

/* FAQ — light background variant */
.sb-faq-section--light {
  background: #f5f5f5;
}
.sb-faq-item--light {
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.sb-faq-item--light:first-child { border-top: 1px solid rgba(0,0,0,0.1); }
.sb-faq-item__q--light {
  color: #111;
}
.sb-faq-item__q--light .dashicons { color: #555; }

/* Utility add-ons */
.sb-mt-4 { margin-top: 2.5rem; }

/* ========================================================================
 * News Pages — Listing + Single Article
 * ===================================================================== */

/* ---------- Shared ---------- */
.sb-nc-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.8rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}
.sb-nc-badge--game-release { background: #e31e24; }
.sb-nc-badge--partnership  { background: #2563eb; }
.sb-nc-badge--exhibition   { background: #d97706; }
.sb-nc-badge--news         { background: #059669; }

.sb-news-date { font-size: 0.8rem; color: var(--sb-text-muted); }

/* ---------- All News: Hero ---------- */
.sb-news-listing-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
.sb-news-listing-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
}
.sb-news-listing-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.sb-news-listing-hero__body {
  position: relative;
  z-index: 1;
  text-align: center;
}
.sb-news-listing-hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------- All News: Intro ---------- */
.sb-eyebrow--accent { color: var(--sb-red); }

/* ---------- All News: Filter row ---------- */
.sb-news-filter-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.sb-news-search-wrap {
  position: relative;
  width: 220px;
}
.sb-news-search-input {
  width: 100%;
  padding: 0.65rem 2.5rem 0.65rem 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--sb-border);
  border-radius: 9999px;
  color: #fff;
  font-size: 0.875rem;
  outline: none;
}
.sb-news-search-input::placeholder { color: var(--sb-text-faint); }
.sb-news-search-input:focus { border-color: rgba(255,255,255,0.2); }
.sb-news-search-icon {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sb-text-muted);
  pointer-events: none;
  width: 16px;
  height: 16px;
}
.sb-news-filter-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sb-news-filter-pill {
  padding: 0.55rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid var(--sb-border);
  background: transparent;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.sb-news-filter-pill:hover { background: rgba(255,255,255,0.08); }
.sb-news-filter-pill.is-active { background: var(--sb-red); border-color: var(--sb-red); }

/* ---------- All News: Card grid ---------- */
.sb-nc-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 640px)  { .sb-nc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .sb-nc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sb-nc {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sb-border);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.sb-nc:hover { border-color: rgba(227,30,36,0.35); transform: translateY(-4px); }
.sb-nc__img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #111;
}
.sb-nc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.sb-nc:hover .sb-nc__img img { transform: scale(1.06); }
.sb-nc__badge-wrap { position: absolute; bottom: 0.75rem; left: 0.75rem; }
.sb-nc__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.sb-nc__date  { font-size: 0.75rem; color: var(--sb-text-faint); }
.sb-nc__title { font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.4; margin: 0; }
.sb-nc__excerpt { font-size: 0.875rem; color: var(--sb-text-muted); line-height: 1.6; margin: 0; }
.sb-nc[data-hidden="1"] { display: none; }

/* ---------- All News: More button ---------- */
.sb-news-more-wrap { text-align: center; padding-top: 1rem; }

/* ---------- Single Article: Hero ---------- */
.sb-article-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #000;
}
.sb-article-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.5;
}
.sb-article-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, #000 20%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.2) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 20%);
  pointer-events: none;
}
.sb-article-hero__body {
  position: relative;
  z-index: 1;
  padding-bottom: 3rem;
  padding-top: 2rem;
  width: 100%;
}
.sb-article-hero__title {
  font-size: clamp(1.75rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  max-width: 62rem;
  margin: 0;
}

/* ---------- Single Article: Meta + Body ---------- */
.sb-article-content { padding-top: 2.5rem; padding-bottom: 5rem; }
.sb-article-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.sb-news-prose {
  font-size: 1rem;
  line-height: 1.8;
  color: #c5c5c5;
  max-width: 52rem;
}
.sb-news-prose p { margin-bottom: 1.5rem; }
.sb-news-prose h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; color: #fff; }
.sb-news-prose h3 { font-size: 1.2rem; margin: 2rem 0 0.75rem; color: #fff; }
.sb-news-prose a { color: var(--sb-red); text-decoration: underline; }
.sb-news-prose ul, .sb-news-prose ol { margin: 1rem 0 1.5rem 1.25rem; color: #c5c5c5; }
.sb-news-prose li { margin-bottom: 0.5rem; line-height: 1.7; }
.sb-news-prose strong { color: #fff; }

/* ============================================================
   SINGLE GAME PAGE
   ============================================================ */

/* ── Boxed page layout (matches the React reference, which wraps its whole
   page — every section, including the hero — in one fixed w-[960px]
   container) ── --sb-bg is pure black, same as the page itself, so the
   boxed column and the outer margin read as one continuous black surface,
   matching the reference exactly (no charcoal/pure-black seam). */
.sb-gpage {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  /* No overflow clipping here on purpose: setting either overflow axis to
     anything but visible forces the OTHER axis to compute as auto too (per
     the CSS Overflow spec), and any non-visible overflow on an ancestor
     breaks position:sticky for descendants — which the games listing
     page's scroll-driven card relies on. Horizontal bleed is instead
     contained by each section/media element locally (they're already
     max-width:100% / their own overflow:hidden), so this box doesn't need
     to duplicate that clipping itself. */
  background: var(--sb-bg);
}
.sb-gpage .sb-section--black { background: var(--sb-bg); }

/* ── Shared helpers for game page ── */
.sb-gpage-section { padding: 5rem 0; }
.sb-gpage-h2 { margin-bottom: 1.5rem; }
.sb-gpage-text { font-size: 1rem; line-height: 1.8; color: #c5c5c5; margin-bottom: 0.75rem; }
.sb-heading-sm { font-size: 1.125rem; font-weight: 600; color: #fff; }

/* ── HERO ── */
.sb-ghero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 8rem 0 5rem;
}
.sb-ghero__bg {
  position: absolute; inset: 0;
}
.sb-ghero__bg-img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.25) blur(2px);
}
.sb-ghero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.2) 100%);
}
.sb-ghero__body {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.sb-ghero__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sb-red);
  font-weight: 700;
  margin-bottom: 1rem;
}
.sb-ghero__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.sb-ghero__desc {
  font-size: 1.05rem;
  color: #c5c5c5;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.sb-ghero__badges {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.sb-ghero__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  padding: 0.6rem 1.25rem;
  min-width: 6rem;
}
.sb-ghero__badge-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-red);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.sb-ghero__badge-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.sb-ghero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.sb-ghero__right {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.sb-ghero__boxart {
  max-height: 560px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 60px rgba(227,30,36,0.25));
}

/* ── btn-disabled ── */
.sb-btn--disabled {
  background: #333;
  color: #666;
  border-color: #444;
  cursor: not-allowed;
  border-radius: 9999px;
  padding: 1rem 2rem;
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
}

/* ── Two-col layout ── */
.sb-gpage-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
/* Demo Experience + Devices & Launch Readiness specifically: the default
   4rem column gap left a wide, empty-looking gutter between the text and
   its icon in these two (shorter, icon-only-on-one-side) sections — scoped
   to just these two rather than lowering the shared default, since other
   .sb-gpage-2col sections (e.g. Gameplay Overview) weren't flagged and
   still need the wider gap to balance their taller content. */
.sb-gpage-2col--tight { gap: 2rem; }
/* Gameplay Overview's accordion sits in its own grid row (a second, separate
   .sb-gpage-2col right below the icon+text row) rather than inside the text
   column — that way the icon centers against just the heading+paragraphs
   (a reasonable height), instead of the icon+paragraphs+3-pill-accordion
   combined (which is tall enough to push a centered icon far down the
   page). The empty first column keeps the accordion's column 2 lined up
   under the paragraph text above it. */
.sb-gpage-accordion-row { align-items: start; }
/* Fixed-height box so per-game icon graphics (raw uploads of very different
   native sizes — a small flower vs. a large tree) all occupy the same visual
   footprint and center against the text column, instead of rendering at
   whatever pixel size the source file happens to be and hugging the top. */
.sb-gpage-img-wrap { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.sb-gpage-icon-img { max-height: 300px; }
/* Devices & Launch Readiness compatibility icon reads a little small next to
   its text column at the shared 300px cap — bumped up specifically for this
   one rather than raising the shared .sb-gpage-icon-img cap, since that
   class is also used by the (correctly-sized) gameplay/demo icons. */
.sb-gpage-icon-img--devices { max-height: 340px; }
.sb-gpage-img { border-radius: 0.75rem; object-fit: cover; max-height: 420px; width: 100%; }
/* Demo Experience: icon graphic stacked directly above its Contact Us button
   (per reference design), both centered in the right-hand column. */
.sb-gpage-de-aside { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.sb-gpage-de-aside .sb-gpage-img-wrap { min-height: 0; }

/* ── Symbols row ── */
.sb-gpage-symbols { margin-top: 4rem; }
.sb-gpage-symbols__row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.sb-gpage-symbol {
  width: clamp(64px, 9vw, 100px);
  height: clamp(64px, 9vw, 100px);
  object-fit: contain;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0.4rem;
}

/* ── RTP ── */
.sb-gpage-rtp {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
}
.sb-gpage-rtp__number {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 900;
  color: var(--sb-red);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 40px rgba(227,30,36,0.4);
}

/* ── Demo experience strip ── */
.sb-gpage-demo-exp {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 6rem 0;
}
.sb-gpage-demo-exp__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.3) blur(1px);
}
.sb-gpage-demo-exp__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.75));
}
/* .sb-container defaults to shrink-to-content + margin:auto, which centers it
   inside this flex row instead of hugging the left edge — force full width so
   the heading/button below align naturally to the left like everywhere else. */
.sb-gpage-demo-exp__body { position: relative; z-index: 2; width: 100%; }

/* ── Banner CTA variant: boxed to the site's content width (not full-bleed),
   lighter direction-aware overlay so the artwork on the right stays clearly
   visible, plus a width-constrained left-aligned heading. ── */
.sb-gpage-demo-exp--banner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.sb-gpage-demo-exp--banner .sb-gpage-demo-exp__bg,
.sb-gpage-demo-exp--banner .sb-gpage-demo-exp__overlay { border-radius: 0; }
.sb-gpage-demo-exp--banner .sb-gpage-demo-exp__bg { filter: none; }
.sb-gpage-demo-exp--banner .sb-gpage-demo-exp__overlay {
  background: linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.62) 28%, rgba(0,0,0,0.32) 55%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0) 100%);
}
/* the outer section already supplies the side padding above, so the inner
   .sb-container (which would normally add its own 1.5rem again) shouldn't —
   the extra 3.5rem instead lines the heading up with the first "You Might
   Also Like" thumbnail below, which itself is offset right by the prev-arrow
   button (2.5rem) + gap (1rem) that sits before the card track. */
.sb-gpage-demo-exp--banner .sb-gpage-demo-exp__body { padding-left: 3.5rem; padding-right: 0; }
.sb-gpage-banner-cta__heading { max-width: 28rem; margin-bottom: 1.75rem; }
.sb-gpage-banner-cta__btn { margin-top: 0; }

/* ── Game features alternating ── */
.sb-gpage-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 5rem;
}
.sb-gpage-feature--flip { direction: rtl; }
.sb-gpage-feature--flip > * { direction: ltr; }
.sb-gpage-feature__img-wrap { border-radius: 0.75rem; overflow: hidden; }
.sb-gpage-feature__img { width: 100%; object-fit: cover; aspect-ratio: 16/9; border-radius: 0.75rem; }
.sb-gpage-feature__badge {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sb-red);
  border: 1px solid var(--sb-red);
  border-radius: 9999px;
  padding: 0.25rem 0.85rem;
  margin-bottom: 1rem;
}
.sb-gpage-feature__title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
}

/* ── CTA section ── */
.sb-gpage-cta-section {
  padding: 6rem 0;
  background: radial-gradient(ellipse at center, rgba(227,30,36,0.12) 0%, transparent 70%), #000;
}


/* ── FAQ accordion ── */
.sb-gpage-faq {
  max-width: 52rem;
  margin: 0 auto;
}
.sb-gpage-faq__item {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sb-gpage-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: transparent;
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  padding: 1.25rem 0.75rem;
  margin: 0 -0.75rem;
  cursor: pointer;
  white-space: normal;
  transition: background-color 0.2s, color 0.2s;
}
/* white-space:normal above overrides WordPress core's default button CSS
   (button { white-space: nowrap }), which was inherited into the question
   text span and silently forced it to a single unbroken line — invisible on
   desktop where there was room, but on mobile it pushed the whole page wider
   than the viewport. Flex children also default to min-width:auto, which
   independently would have stopped the (now-wrappable) text from shrinking. */
.sb-gpage-faq__q > span:first-child { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
/* Explicit background-color here is required: WordPress core's default button
   styles (button:hover { background-color: #cc3366 }) otherwise win on this
   property since our base rule above never contested it. */
.sb-gpage-faq__q:hover,
.sb-gpage-faq__q:focus-visible {
  background-color: rgba(227,30,36,0.08);
  color: var(--sb-red);
}
.sb-gpage-faq__chevron {
  width: 1.25rem; height: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--sb-red);
}
.sb-gpage-faq__item.is-open .sb-gpage-faq__chevron { transform: rotate(180deg); }
.sb-gpage-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
/* Fallback only — JS sets an inline max-height from the real scrollHeight so
   long answers (extra mobile line-wraps, or an answer with an image) never
   clip; this large value just covers the case JS hasn't run yet. */
.sb-gpage-faq__item.is-open .sb-gpage-faq__a { max-height: 2000px; }
.sb-gpage-faq__a p {
  color: #c5c5c5;
  line-height: 1.75;
  padding-bottom: 1.25rem;
}

/* ============================================================
 * Game page — section builder (game_sections flexible content)
 * ============================================================ */

/* ── Hero video ── */
/* The React reference wraps its entire page — including the hero video —
   inside one fixed w-[960px] container; the hero itself is full-bleed only
   within THAT box, not the browser viewport. Boxing it here (no side
   padding, matching the reference's own w-full-inside-960px math) instead
   of the previous edge-to-edge-of-the-browser treatment. */
/* Full-bleed breakout: .sb-gpage-hero is a child of the boxed, max-width:960px
   .sb-gpage, but the hero specifically should span the full browser width
   while every other section stays inside that box — width:100vw + these
   negative margins (calculated from each side's distance to the viewport
   edge, regardless of where this element's own box happens to sit) is the
   standard way to break just one element out of a centered container
   without touching the container itself. Only safe because .sb-gpage has
   no overflow-x clipping (see its own rule) to cut this off at 960px. */
.sb-gpage-hero {
  position: relative;
  height: 34rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  background: var(--sb-bg);
}
.sb-gpage-hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sb-gpage-hero__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--sb-bg) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0) 100%);
}

/* ── Game description / stats — its own plain section below the hero video ── */
/* grid-template-columns: 1fr auto used to let the "1fr" text column stretch
   to fill the entire container (up to 1280px on the original site), pinning
   the thumbnail to the outer right edge with a huge dead gap in between —
   the reference keeps the text block and thumbnail as one tight, centered
   pair instead, so the text column is capped to what its content actually
   needs and the whole row is centered as a unit. */
/* Capped to max-width (not centered as a unit) so the block stays flush
   with the container's left edge — matching the header logo — while still
   stopping the thumbnail from drifting far off to the right on wide
   viewports. align-items:stretch (grid default) makes the thumb column
   match the full height of the taller text column instead of sitting at
   its own shorter, aspect-ratio-driven height. */
.sb-gpage-desc {
  display: grid;
  grid-template-columns: minmax(0, 36rem) auto;
  gap: 3rem;
  align-items: stretch;
}
.sb-gpage-desc__back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--sb-text-muted); font-size: 0.85rem; margin-bottom: 1rem;
}
.sb-gpage-desc__back:hover { color: #fff; }
.sb-gpage-desc__title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 900;
  text-transform: capitalize;
  margin-bottom: 1.25rem;
  max-width: 32rem;
}
.sb-gpage-desc__buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.sb-gpage-desc__stats { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin-bottom: 0.5rem; }
.sb-gpage-desc__stats-col { display: flex; flex-direction: column; gap: 0.5rem; }
.sb-gpage-desc__stat { font-size: 0.875rem; }
.sb-gpage-desc__stat-k { color: var(--sb-red); font-weight: 700; margin-right: 0.35rem; }
.sb-gpage-desc__stat-v { color: #fff; font-weight: 700; }
.sb-gpage-desc__langs { margin-bottom: 1.5rem; }
.sb-gpage-desc__flags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.sb-gpage-desc__flag { width: 1.75rem; height: 1rem; object-fit: cover; border-radius: 0.15rem; }
.sb-gpage-desc__text { color: var(--sb-text-muted); line-height: 1.75; max-width: 34rem; font-size: 0.9rem; }
.sb-gpage-desc__thumb { width: 16rem; flex-shrink: 0; }
.sb-gpage-desc__thumb img { width: 100%; height: 100%; border-radius: 1.25rem; object-fit: cover; box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.5); }

/* ── Shared icon-graphic layout (Gameplay Overview / Demo Experience / Devices) ── */
.sb-gpage-icon-img { max-width: 100%; height: auto; }
.sb-gpage-2col--reverse { direction: rtl; }
.sb-gpage-2col--reverse > * { direction: ltr; }

/* ── Accordion (reuses .sb-gpage-faq for the toggle chrome; rendered inline inside
   the Gameplay Overview section, directly below its paragraphs — not a separate
   section — so it naturally matches that column's width) ──
   The right column here is only ~half the page, too narrow to fit a pill
   plus a comfortably-sized inline image side by side without cramping the
   pill's own text into wrapping. Reference behavior instead keeps the pill
   (and its answer text) full width, and breaks the per-item image OUT of
   that column via absolute positioning so it floats in the gutter to the
   left — overlapping into the gap between the two main columns — without
   shrinking the pill or the text. */
.sb-gpage-accordion { margin-top: 2rem; }
.sb-gpage-accordion .sb-gpage-faq__item { border-bottom: none; margin-bottom: 0.75rem; position: relative; }
.sb-gpage-accordion .sb-gpage-faq__q {
  width: 100%;
  background-color: rgba(255,255,255,0.03);
  border: 1px solid var(--sb-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
.sb-gpage-accordion .sb-gpage-faq__q:hover,
.sb-gpage-accordion .sb-gpage-faq__q:focus-visible { background-color: rgba(227,30,36,0.08); }
.sb-gpage-accordion__a .sb-gpage-accordion__body {
  padding: 1.5rem 0;
}
/* .sb-gpage-faq__a (the answer) needs overflow:hidden for its max-height
   collapse animation, which would clip anything positioned outside its own
   box — so the image/stat are rendered as siblings of it (children of the
   .is-open-toggled item instead), not inside it, and shown/hidden directly
   off that item's own open state. */
.sb-gpage-accordion__img,
.sb-gpage-accordion__stat {
  display: none;
  position: absolute;
  top: 4rem;
  right: 100%;
  margin-right: 1.5rem;
}
.sb-gpage-accordion__item.is-open .sb-gpage-accordion__img,
.sb-gpage-accordion__item.is-open .sb-gpage-accordion__stat {
  display: block;
}
.sb-gpage-accordion__img {
  width: 17rem;
  height: auto;
  border-radius: 0.5rem;
}
/* width:auto instead of a fixed rem value — a fixed 12rem box was narrower
   than "96.63%" actually renders at this font-size/weight, clipping the
   "%" at the right edge. Letting the box size to its own content avoids
   guessing a width that has to work for every game's RTP string (some are
   longer ranges like "96.48% - 96.79%"). top:50%/translateY centers it
   vertically in the gutter instead of pinning it near the top, and the
   larger font makes it read as the section's headline figure rather than
   a caption next to .sb-gpage-accordion__img. */
.sb-gpage-accordion__stat {
  width: auto;
  max-width: none;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
.sb-gpage-accordion__stat-text {
  display: block;
  font-size: 4.5rem; font-weight: 900; white-space: nowrap;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.4) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sb-gpage-accordion__body p { color: var(--sb-text-muted); line-height: 1.75; }

/* ── Chevron button (shared by accordion + FAQ) ── */
.sb-gpage-chevron-btn {
  width: 1.65rem; height: 1.65rem; border-radius: 50%; flex-shrink: 0;
  background: var(--sb-red);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.sb-gpage-chevron-btn .sb-gpage-faq__chevron { width: 0.7rem; height: 0.7rem; color: #fff; }
.sb-gpage-faq__item.is-open .sb-gpage-chevron-btn .sb-gpage-faq__chevron { transform: rotate(180deg); }

/* ── "You Might Also Like" carousel (reuses .sb-game-carousel / .sb-carousel-arrow / .sb-game-card-h2) ── */
.sb-gpage-ymal { display: flex; align-items: center; gap: 1rem; }
.sb-gpage-ymal .sb-game-carousel { flex: 1; min-width: 0; }
.sb-gpage-ymal__arrow { flex-shrink: 0; }
/* Card is roughly half its previous 280px footprint — the full-size card's
   description paragraph and full-width demo button don't read well at that
   width, so they're dropped here in favor of just image + title + stats,
   which is what a "thumbnail" in a reel of 8 other cards actually needs. */
.sb-gpage-ymal__card { flex: 0 0 140px; }
.sb-gpage-ymal__card .sb-game-card-h2__body { padding: 0.6rem; }
.sb-gpage-ymal__card .sb-game-card-h2__body h3 { font-size: 0.8rem; margin-bottom: 0; }
.sb-gpage-ymal__card .sb-game-card-h2__body > a p,
.sb-gpage-ymal__card .sb-game-card-h2__expand { display: none; }
.sb-gpage-ymal__card .sb-game-card-h2__stats { margin-top: 0.5rem; padding-top: 0.5rem; }
.sb-gpage-ymal__card .sb-game-card-h2__stats span { font-size: 0.5rem; }
.sb-gpage-ymal__card .sb-game-card-h2__stats strong { font-size: 0.65rem; }
.sb-gpage-ymal__card .sb-game-card-h2:hover .sb-game-card-h2__stats { opacity: 1; }

/* ── Feature carousel ── */
/* All slides render side-by-side in a flex row at all times (never
   display:none), and the track's transform slides between them — this is
   what makes the transition an actual slide instead of a hard cut, and it
   also gives every slide the same height automatically (flex stretches
   each to match the tallest one), so switching slides doesn't resize the
   card.
   overflow:hidden + border-radius live on the OUTER element, which is
   never transformed — putting them on the same element that gets the
   translateX was the actual bug: a transform moves an element's own box
   (and whatever clip region it defines) as one rigid unit, so if the clip
   boundary and the sliding content are the same element, the "window"
   slides along with the content and never actually reveals the next
   slide. The inner track only handles the flex row + the transform. */
/* padding-bottom gives the pagination dots room to scale up on :is-active
   (transform: scale(1.2)) without their growth being clipped by this
   element's own overflow:hidden — they sit right at its lower edge
   otherwise. */
.sb-gpage-carousel { position: relative; max-width: 56rem; margin: 0 auto; overflow: hidden; border-radius: 1rem; padding-bottom: 0.5rem; }
.sb-gpage-carousel__track {
  position: relative;
  display: flex;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.sb-gpage-carousel__slide {
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  gap: 2.5rem;
  align-items: flex-start;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--sb-border);
  /* Rounded independently of the wrapper's own border-radius+overflow clip
     — that clip only rounds the slide's corners for as long as the slide
     exactly fills the wrapper with nothing else below it; now that the dots
     row sits below the slide (inside the same wrapper, with padding of its
     own), the slide's bottom corners are exposed against that empty space
     before reaching the wrapper's edge, and need their own curve to still
     read as rounded. */
  border-radius: 1rem;
  padding: 2.5rem;
}
.sb-gpage-carousel__media { width: 11rem; flex-shrink: 0; border-radius: 0.75rem; overflow: hidden; }
.sb-gpage-carousel__media video, .sb-gpage-carousel__media img { width: 100%; height: auto; display: block; }
.sb-gpage-carousel__label { color: var(--sb-red); font-weight: 900; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.35rem; }
.sb-gpage-carousel__title { font-size: 1.5rem; font-weight: 900; text-transform: capitalize; margin-bottom: 0.6rem; }
.sb-gpage-carousel__desc { color: var(--sb-text-muted); line-height: 1.7; font-size: 0.9rem; }
.sb-gpage-carousel__dots { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.sb-gpage-carousel__dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: rgba(255,255,255,0.25); border: none; cursor: pointer; transition: background 0.2s, transform 0.2s; padding: 0; }
.sb-gpage-carousel__dot.is-active { background: var(--sb-red); transform: scale(1.2); }

/* ── Integration CTA variant (reuses .sb-gpage-demo-exp) ──
   Reference boxes this to the site's content width with a visible colored
   gradient card (dark teal → maroon), not a full-bleed strip crushed to
   black — the shared base overlay (up to 0.75 alpha) was almost entirely
   hiding the already-muted background image, so it needs its own much
   lighter overlay plus the same boxed/rounded treatment as the banner CTA. */
.sb-gpage-demo-exp--integration {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.sb-gpage-demo-exp--integration .sb-gpage-demo-exp__bg,
.sb-gpage-demo-exp--integration .sb-gpage-demo-exp__overlay { border-radius: 0; }
/* The source image itself is quite low-contrast/muted, so a light overlay
   alone still read as "basically black" — boost its own saturation and
   brightness so the teal/maroon gradient is unmistakably a background. */
.sb-gpage-demo-exp--integration .sb-gpage-demo-exp__bg {
  object-fit: cover;
  filter: saturate(1.8) brightness(1.35) contrast(1.05);
}
.sb-gpage-demo-exp--integration .sb-gpage-demo-exp__overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}
.sb-gpage-demo-exp--integration .sb-gpage-demo-exp__body { padding-left: 0; padding-right: 0; }

/* ── reveal animation ── */
.sb-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.55s ease, transform 0.55s ease; }
.sb-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Game page responsive ── */
@media (max-width: 900px) {
  .sb-ghero__body { grid-template-columns: 1fr; text-align: center; }
  .sb-ghero__badges { justify-content: center; }
  .sb-ghero__cta { justify-content: center; }
  .sb-ghero__right { display: none; }
  .sb-gpage-2col, .sb-gpage-2col--reverse { grid-template-columns: 1fr; direction: ltr; }
  .sb-gpage-rtp { grid-template-columns: 1fr; text-align: center; }
  .sb-gpage-rtp__number { font-size: 4rem; }
  .sb-gpage-feature { grid-template-columns: 1fr; gap: 2rem; direction: ltr !important; }

  .sb-gpage-desc { grid-template-columns: 1fr; text-align: center; }
  .sb-gpage-desc__buttons, .sb-gpage-desc__stats { justify-content: center; }
  .sb-gpage-desc__stats-col { align-items: center; }
  .sb-gpage-desc__flags { justify-content: center; }
  .sb-gpage-desc__text { margin: 0 auto; }
  .sb-gpage-desc__thumb { width: 12rem; margin: 1.5rem auto 0; order: -1; }
  .sb-gpage-hero { height: 24rem; }
  .sb-gpage-carousel__slide { flex-direction: column; text-align: center; padding: 1.5rem; }
  .sb-gpage-carousel__media { width: 9rem; }
  /* Narrow viewport: no room for the image to float in the left gutter
     (there is no left column at all here — .sb-gpage-2col has already
     stacked to one column) — so it drops back into normal flow, centered
     above its answer text. */
  .sb-gpage-accordion__body { text-align: center; }
  .sb-gpage-accordion__img,
  .sb-gpage-accordion__stat {
    position: static;
    width: 60%;
    max-width: 14rem;
    margin: 0 auto 1.25rem;
  }
  /* Some RTP values are a range ("96.48% - 96.79%") rather than a single
     percentage — too wide for the fixed desktop box at nowrap, which was
     pushing the page wider than the viewport. Let it size to its own
     content and wrap if it must. */
  .sb-gpage-accordion__stat {
    width: auto;
    max-width: 100%;
    text-align: center;
    /* the desktop rule's translateY(-50%) is a vertical-centering trick for
       the absolute-positioned gutter layout — under position:static here it
       would still shift the element (transform doesn't care about
       position), so it needs an explicit reset. */
    transform: none;
  }
  .sb-gpage-accordion__stat-text { white-space: normal; font-size: 2.25rem; }
  .sb-gpage-ymal__arrow { display: none; }
  /* arrows are hidden here, so the thumbnail track sits flush left again —
     the banner's extra offset (which exists to match the arrow's width)
     should drop out too. */
  .sb-gpage-demo-exp--banner .sb-gpage-demo-exp__body { padding-left: 0; }
}
@media (max-width: 600px) {
  .sb-ghero { padding: 6rem 0 3rem; }
  /* On phones, closing the demo popup is handled by the OS/gesture back
     action (JS pushes a history entry on open), so the on-screen X is
     redundant chrome over the game iframe — remove it there; desktop/tablet
     keeps it since there's no equivalent "back" gesture. */
  .sb-demo-modal__close { display: none; }
}

/* ---------- Utility ---------- */
.sb-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.sb-mb-1 { margin-bottom: 0.5rem; } .sb-mb-2 { margin-bottom: 1rem; } .sb-mb-3 { margin-bottom: 1.5rem; } .sb-mb-4 { margin-bottom: 2.5rem; }
.sb-text-center { text-align: center; }
.sb-prose p { color: #d4d4d4; line-height: 1.75; margin-bottom: 1.5rem; }
.sb-prose h2 { font-size: 1.875rem; margin-bottom: 1rem; margin-top: 2.5rem; }
.sb-prose ul { margin: 1rem 0 1.5rem 1.25rem; list-style: disc; color: #d4d4d4; }
.sb-prose ul li { margin-bottom: 0.5rem; }