/* ============================================================
   SLOTCASINO — CASINO GAMES REFERENCE DESIGN SYSTEM
   Reference page: /casino-games/
   Scope: .casino-reference-layout only
   ============================================================ */


/* ============================================================
   PAGE FOUNDATION
   ============================================================ */

body.casino-reference-layout {
  --sc-ref-bg: #090511;
  --sc-ref-panel: rgba(28,13,46,.62);
  --sc-ref-panel-strong: rgba(26,11,43,.94);
  --sc-ref-border: rgba(143,70,255,.28);
  --sc-ref-border-strong: rgba(143,70,255,.48);

  --sc-ref-gold: #ffc857;
  --sc-ref-gold-light: #ffe19a;

  --sc-ref-text: #f8f5ff;
  --sc-ref-muted: #cbc4db;

  max-width: 100%;
  overflow-x: clip;
  background: var(--sc-ref-bg);
}


/* Images / video safety */

body.casino-reference-layout main img,
body.casino-reference-layout main video,
body.casino-reference-layout main iframe {
  max-width: 100%;
}


/* ============================================================
   HERO
   Same visual hierarchy as /casino-games/
   ============================================================ */

body.casino-reference-layout
:is(
  .page-hero,
  .live-hero,
  .recom-hero
) {
  width: 100%;

  padding:
    clamp(2.4rem, 6vw, 4.8rem)
    1rem
    clamp(2rem, 5vw, 3.4rem);

  margin:
    0 auto
    clamp(1.5rem, 4vw, 3rem);

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(143,70,255,.19),
      transparent 67%
    );
}


body.casino-reference-layout
:is(
  .page-hero,
  .live-hero,
  .recom-hero
) h1 {
  width: min(950px, 100%);

  margin:
    0 auto 1rem;

  color:
    var(--sc-ref-gold-light);

  font-size:
    clamp(2rem, 4.5vw, 3.65rem);

  line-height:
    1.08;

  letter-spacing:
    -.025em;

  text-align:
    center;

  text-wrap:
    balance;
}


body.casino-reference-layout
:is(
  .page-hero,
  .live-hero,
  .recom-hero
) > p,

body.casino-reference-layout
:is(
  .page-hero,
  .live-hero,
  .recom-hero
) .container > p {

  width:
    min(760px, 100%);

  margin:
    0 auto 1rem;

  color:
    var(--sc-ref-muted);

  font-size:
    clamp(.98rem, 1.4vw, 1.1rem);

  line-height:
    1.72;

  text-align:
    center;
}


/* Hero pills */

body.casino-reference-layout
.hero-meta-pills {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    .55rem;

  margin:
    1rem auto 0;
}


body.casino-reference-layout
.meta-pill {
  padding:
    .38rem .78rem;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.05);

  color:
    var(--sc-ref-text);

  font-size:
    .76rem;
}


/* ============================================================
   MAIN CONTENT WIDTH
   ============================================================ */

body.casino-reference-layout
main {
  min-width: 0;
}


body.casino-reference-layout
main.container,

body.casino-reference-layout
main.seo-article > .container {

  width:
    min(1100px, calc(100% - 32px));

  max-width:
    1100px;

  margin-left:
    auto;

  margin-right:
    auto;
}


/* ============================================================
   PRIMARY DOCX / CONTENT PANEL
   ============================================================ */

body.casino-reference-layout
:is(
  [data-qa-content],
  .live-casino-docx-content,
  .table-games-content-update,
  .roulette-content-update,
  .blackjack-content-update,
  .content-section,
  .casino-learning-guide,
  .about-card,
  .legal-card,
  .rg-card
) {

  width:
    min(1050px, calc(100% - 32px));

  max-width:
    1050px;

  margin:
    2.5rem auto 4rem;

  padding:
    clamp(1.5rem, 4vw, 3rem);

  border:
    1px solid var(--sc-ref-border);

  border-radius:
    22px;

  background:
    linear-gradient(
      180deg,
      rgba(28,13,46,.67),
      rgba(11,6,19,.48)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}


/* Existing SEO-card pages */

body.casino-reference-layout
.seo-card {
  width: 100%;

  margin:
    0 0 1.4rem;

  padding:
    clamp(1.3rem, 3vw, 2.2rem);

  border:
    1px solid var(--sc-ref-border);

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      rgba(28,13,46,.67),
      rgba(11,6,19,.48)
    );
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

body.casino-reference-layout
:is(
  [data-qa-content],
  .live-casino-docx-content,
  .table-games-content-update,
  .roulette-content-update,
  .blackjack-content-update,
  .content-section,
  .casino-learning-guide,
  .about-card,
  .legal-card,
  .rg-card,
  .seo-card,
  .article-deep-dive
) p,

body.casino-reference-layout
:is(
  [data-qa-content],
  .live-casino-docx-content,
  .table-games-content-update,
  .roulette-content-update,
  .blackjack-content-update,
  .content-section,
  .casino-learning-guide,
  .about-card,
  .legal-card,
  .rg-card,
  .seo-card,
  .article-deep-dive
) li {

  color:
    var(--sc-ref-muted);

  font-size:
    clamp(1rem, 1.2vw, 1.065rem);

  line-height:
    1.8;
}


body.casino-reference-layout
:is(
  [data-qa-content],
  .live-casino-docx-content,
  .table-games-content-update,
  .roulette-content-update,
  .blackjack-content-update,
  .content-section,
  .casino-learning-guide,
  .about-card,
  .legal-card,
  .rg-card,
  .seo-card,
  .article-deep-dive
) p {

  margin:
    0 0 1.25rem;
}


/* H2 */

body.casino-reference-layout
:is(
  [data-qa-content],
  .live-casino-docx-content,
  .table-games-content-update,
  .roulette-content-update,
  .blackjack-content-update,
  .content-section,
  .casino-learning-guide,
  .about-card,
  .legal-card,
  .rg-card,
  .seo-card,
  .article-deep-dive
) h2 {

  margin:
    3rem 0 1rem;

  padding-left:
    13px;

  border-left:
    4px solid var(--sc-ref-gold);

  color:
    var(--sc-ref-gold-light);

  font-size:
    clamp(1.5rem, 2.7vw, 2.1rem);

  line-height:
    1.18;

  letter-spacing:
    -.015em;

  text-wrap:
    balance;
}


/* First heading does not need huge top gap */

body.casino-reference-layout
:is(
  [data-qa-content],
  .live-casino-docx-content,
  .table-games-content-update,
  .roulette-content-update,
  .blackjack-content-update,
  .content-section,
  .casino-learning-guide,
  .about-card,
  .legal-card,
  .rg-card,
  .seo-card,
  .article-deep-dive
) > h2:first-child {

  margin-top:
    0;
}


/* H3 */

body.casino-reference-layout
:is(
  [data-qa-content],
  .live-casino-docx-content,
  .table-games-content-update,
  .roulette-content-update,
  .blackjack-content-update,
  .content-section,
  .casino-learning-guide,
  .about-card,
  .legal-card,
  .rg-card,
  .seo-card,
  .article-deep-dive
) h3 {

  margin:
    2rem 0 .75rem;

  color:
    #fff;

  font-size:
    clamp(1.15rem, 2vw, 1.45rem);

  line-height:
    1.3;
}


/* H4 */

body.casino-reference-layout
main h4 {
  margin:
    1.5rem 0 .65rem;

  color:
    #f5d26b;

  font-size:
    1.05rem;
}


/* Lists */

body.casino-reference-layout
main ul,

body.casino-reference-layout
main ol {

  padding-left:
    1.45rem;

  margin:
    .8rem 0 1.4rem;
}


body.casino-reference-layout
main li {
  margin-bottom:
    .48rem;
}


/* Links */

body.casino-reference-layout
main a:not(.btn):not(.contextual-pathway__button) {

  text-decoration-thickness:
    1px;

  text-underline-offset:
    3px;
}


/* ============================================================
   TABLES
   ============================================================ */

body.casino-reference-layout
.table-container,

body.casino-reference-layout
.guide-table-wrap {

  width:
    100%;

  margin:
    1.5rem 0;

  overflow-x:
    auto;

  border:
    1px solid var(--sc-ref-border);

  border-radius:
    12px;

  background:
    rgba(13,5,23,.74);
}


body.casino-reference-layout
main table {

  width:
    100%;

  border-collapse:
    collapse;
}


body.casino-reference-layout
main th {

  padding:
    .85rem .9rem;

  color:
    var(--sc-ref-gold-light);

  background:
    rgba(143,70,255,.18);

  border-bottom:
    1px solid rgba(143,70,255,.32);

  font-size:
    .9rem;

  text-align:
    left;
}


body.casino-reference-layout
main td {

  padding:
    .8rem .9rem;

  color:
    var(--sc-ref-muted);

  border-bottom:
    1px solid rgba(255,255,255,.07);

  vertical-align:
    top;
}


/* ============================================================
   CARD / GRID PAGES
   Top Casinos / Safety / Support
   ============================================================ */

body.casino-reference-layout
:is(
  .casino-card,
  .bento-item,
  .safety-card,
  .support-card,
  .feature-card,
  .pay-card,
  .faq-item
) {

  border:
    1px solid var(--sc-ref-border) !important;

  border-radius:
    16px !important;

  background:
    linear-gradient(
      180deg,
      rgba(35,15,56,.9),
      rgba(17,7,29,.93)
    ) !important;

  box-shadow:
    0 12px 32px rgba(0,0,0,.18);
}


/* ============================================================
   FAQ — SAME PURPLE/GOLD STYLE
   Handles multiple markup formats used across site.
   ============================================================ */

body.casino-reference-layout
:is(
  .guide-faq,
  .faq-accordion,
  .faq-section
) {

  width:
    min(1050px, calc(100% - 32px));

  max-width:
    1050px;

  margin:
    2.5rem auto;

  padding:
    clamp(1.15rem, 3vw, 2.2rem);

  border:
    1px solid rgba(143,70,255,.36);

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(28,13,46,.98),
      rgba(17,8,30,.98)
    );
}


/* Native DETAILS accordions */

body.casino-reference-layout
:is(
  .guide-faq,
  .faq-accordion,
  .faq-section
) details {

  margin:
    0 0 .75rem;

  overflow:
    hidden;

  border:
    1px solid rgba(143,70,255,.38);

  border-radius:
    11px;

  background:
    rgba(35,17,57,.82);
}


body.casino-reference-layout
:is(
  .guide-faq,
  .faq-accordion,
  .faq-section
) summary {

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  min-height:
    60px;

  padding:
    1rem 3.4rem 1rem 1.1rem;

  cursor:
    pointer;

  list-style:
    none;

  color:
    #fff;

  font-weight:
    750;

  line-height:
    1.4;
}


body.casino-reference-layout
:is(
  .guide-faq,
  .faq-accordion,
  .faq-section
) summary::-webkit-details-marker {

  display:
    none;
}


body.casino-reference-layout
:is(
  .guide-faq,
  .faq-accordion,
  .faq-section
) summary::after {

  content:
    "+";

  position:
    absolute;

  top:
    50%;

  right:
    1rem;

  transform:
    translateY(-50%);

  color:
    var(--sc-ref-gold);

  font-size:
    1.35rem;

  font-weight:
    900;
}


body.casino-reference-layout
:is(
  .guide-faq,
  .faq-accordion,
  .faq-section
) details[open] summary::after {

  content:
    "−";
}


/* Existing DIV/BUTTON accordions */

body.casino-reference-layout
.accordion {

  display:
    grid;

  gap:
    .75rem;
}


body.casino-reference-layout
.accordion-item {

  overflow:
    hidden;

  border:
    1px solid rgba(143,70,255,.38) !important;

  border-radius:
    11px !important;

  background:
    rgba(35,17,57,.82) !important;
}


body.casino-reference-layout
.accordion-header {

  position:
    relative;

  width:
    100%;

  min-height:
    60px;

  padding:
    1rem 3.4rem 1rem 1.1rem !important;

  border:
    0 !important;

  background:
    transparent !important;

  color:
    #fff !important;

  text-align:
    left;

  font:
    inherit;

  font-weight:
    750;

  cursor:
    pointer;
}


body.casino-reference-layout
.accordion-header::after {

  content:
    "+";

  position:
    absolute;

  top:
    50%;

  right:
    1rem;

  transform:
    translateY(-50%);

  color:
    var(--sc-ref-gold);

  font-size:
    1.35rem;

  font-weight:
    900;
}


body.casino-reference-layout
.accordion-header[aria-expanded="true"]::after,

body.casino-reference-layout
.accordion-item.active
.accordion-header::after,

body.casino-reference-layout
.accordion-item.open
.accordion-header::after {

  content:
    "−";
}


body.casino-reference-layout
.accordion-body {

  padding:
    0 1.1rem 1.1rem;

  color:
    var(--sc-ref-muted);
}


/* ============================================================
   SPONSORED CTA
   Keep component functional, normalize width/spacing.
   ============================================================ */

body.casino-reference-layout
section.contextual-pathway {

  width:
    min(1050px, calc(100% - 32px)) !important;

  max-width:
    1050px !important;

  margin:
    3rem auto !important;

  border-radius:
    18px !important;

  overflow:
    hidden;
}


body.casino-reference-layout
.contextual-pathway__card {

  padding:
    clamp(1.2rem, 3vw, 2.2rem) !important;
}


body.casino-reference-layout
.contextual-pathway__cta {

  display:
    grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(220px,300px) !important;

  gap:
    1.5rem !important;

  align-items:
    center !important;
}


/* ============================================================
   SLOTSLAUNCH CATALOGUE
   Desktop = 4 columns
   Tablet = 3 columns
   Mobile = 3 columns
   Same hierarchy as Casino Games reference.
   ============================================================ */

body.casino-reference-layout
#slotslaunch-games {

  width:
    min(1180px, calc(100% - 24px)) !important;

  max-width:
    1180px !important;

  margin:
    1.5rem auto 3rem !important;

  padding:
    clamp(1rem, 2.5vw, 2rem) !important;

  border-radius:
    20px !important;

  overflow:
    hidden !important;
}


/* Heading */

body.casino-reference-layout
#slotslaunch-games
.slc-heading {

  width:
    min(820px,100%) !important;

  max-width:
    820px !important;

  margin:
    0 auto 1.5rem !important;

  text-align:
    center !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-badge {

  margin-bottom:
    .75rem !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-heading h2 {

  margin:
    0 auto .65rem !important;

  color:
    var(--sc-ref-gold-light) !important;

  font-size:
    clamp(1.7rem,3vw,2.6rem) !important;

  line-height:
    1.12 !important;

  text-align:
    center !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-heading p {

  margin:
    0 auto !important;

  text-align:
    center !important;
}


/* Toolbar */

body.casino-reference-layout
#slotslaunch-games
.slc-toolbar {

  grid-template-columns:
    minmax(180px,.75fr)
    minmax(240px,2fr) !important;

  gap:
    .75rem !important;

  padding:
    .8rem !important;
}


/* Grid */

body.casino-reference-layout
#slotslaunch-games
.slc-grid {

  display:
    grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:
    10px !important;

  width:
    100% !important;

  min-height:
    0 !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-grid[aria-busy="true"] {

  min-height:
    0 !important;
}


/* Cards */

body.casino-reference-layout
#slotslaunch-games
.slc-game-card {

  display:
    flex !important;

  flex-direction:
    column !important;

  min-width:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  border-radius:
    10px !important;

  overflow:
    hidden !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-game-image {

  width:
    100% !important;

  aspect-ratio:
    16 / 10 !important;

  height:
    auto !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-game-image img {

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-game-body {

  display:
    flex !important;

  flex-direction:
    column !important;

  flex:
    1 1 auto !important;

  min-width:
    0 !important;

  min-height:
    145px !important;

  padding:
    .55rem .6rem .62rem !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-provider {

  margin:
    0 0 .2rem !important;

  font-size:
    .52rem !important;

  line-height:
    1.1 !important;

  white-space:
    nowrap !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-game-body h3 {

  display:
    -webkit-box !important;

  min-height:
    2.35em !important;

  margin:
    .18rem 0 .3rem !important;

  overflow:
    hidden !important;

  color:
    #fff !important;

  font-size:
    .79rem !important;

  line-height:
    1.17 !important;

  -webkit-line-clamp:
    2 !important;

  -webkit-box-orient:
    vertical !important;

  overflow-wrap:
    anywhere !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-facts {

  font-size:
    .55rem !important;

  line-height:
    1.15 !important;
}


body.casino-reference-layout
#slotslaunch-games
.slc-card-actions {

  gap:
    .34rem !important;

  margin-top:
    auto !important;
}


body.casino-reference-layout
#slotslaunch-games
:is(
  .slc-play,
  .slc-real-money
) {

  min-height:
    32px !important;

  padding:
    .35rem .25rem !important;

  border-radius:
    6px !important;

  font-size:
    .58rem !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 980px) {

  body.casino-reference-layout
  #slotslaunch-games
  .slc-grid {

    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }


  body.casino-reference-layout
  .contextual-pathway__cta {

    grid-template-columns:
      1fr !important;
  }

}


/* ============================================================
   MOBILE
   Replicates Casino Games desktop structure at smaller scale.
   ============================================================ */

@media (max-width: 740px) {

  body.casino-reference-layout {

    overflow-x:
      clip !important;
  }


  /* HERO */

  body.casino-reference-layout
  :is(
    .page-hero,
    .live-hero,
    .recom-hero
  ) {

    padding:
      2rem .8rem 1.65rem !important;

    margin-bottom:
      1rem !important;
  }


  body.casino-reference-layout
  :is(
    .page-hero,
    .live-hero,
    .recom-hero
  ) h1 {

    width:
      100% !important;

    font-size:
      clamp(1.65rem,7vw,2.25rem) !important;

    line-height:
      1.1 !important;
  }


  body.casino-reference-layout
  :is(
    .page-hero,
    .live-hero,
    .recom-hero
  ) > p,

  body.casino-reference-layout
  :is(
    .page-hero,
    .live-hero,
    .recom-hero
  ) .container > p {

    font-size:
      .9rem !important;

    line-height:
      1.6 !important;
  }


  /* MAIN CONTENT */

  body.casino-reference-layout
  main.container,

  body.casino-reference-layout
  main.seo-article > .container {

    width:
      calc(100% - 14px) !important;
  }


  body.casino-reference-layout
  :is(
    [data-qa-content],
    .live-casino-docx-content,
    .table-games-content-update,
    .roulette-content-update,
    .blackjack-content-update,
    .content-section,
    .casino-learning-guide,
    .about-card,
    .legal-card,
    .rg-card
  ) {

    width:
      calc(100% - 14px) !important;

    margin:
      1.2rem auto 2.4rem !important;

    padding:
      .95rem .85rem !important;

    border-radius:
      13px !important;
  }


  body.casino-reference-layout
  .seo-card {

    padding:
      1rem .9rem !important;

    border-radius:
      13px !important;
  }


  body.casino-reference-layout
  :is(
    [data-qa-content],
    .live-casino-docx-content,
    .table-games-content-update,
    .roulette-content-update,
    .blackjack-content-update,
    .content-section,
    .casino-learning-guide,
    .about-card,
    .legal-card,
    .rg-card,
    .seo-card,
    .article-deep-dive
  ) h2 {

    margin:
      1.9rem 0 .75rem !important;

    padding-left:
      9px !important;

    border-left-width:
      3px !important;

    font-size:
      1.3rem !important;

    line-height:
      1.2 !important;
  }


  body.casino-reference-layout
  :is(
    [data-qa-content],
    .live-casino-docx-content,
    .table-games-content-update,
    .roulette-content-update,
    .blackjack-content-update,
    .content-section,
    .casino-learning-guide,
    .about-card,
    .legal-card,
    .rg-card,
    .seo-card,
    .article-deep-dive
  ) h3 {

    margin-top:
      1.4rem !important;

    font-size:
      1.05rem !important;
  }


  body.casino-reference-layout
  :is(
    [data-qa-content],
    .live-casino-docx-content,
    .table-games-content-update,
    .roulette-content-update,
    .blackjack-content-update,
    .content-section,
    .casino-learning-guide,
    .about-card,
    .legal-card,
    .rg-card,
    .seo-card,
    .article-deep-dive
  ) p,

  body.casino-reference-layout
  :is(
    [data-qa-content],
    .live-casino-docx-content,
    .table-games-content-update,
    .roulette-content-update,
    .blackjack-content-update,
    .content-section,
    .casino-learning-guide,
    .about-card,
    .legal-card,
    .rg-card,
    .seo-card,
    .article-deep-dive
  ) li {

    font-size:
      .92rem !important;

    line-height:
      1.66 !important;
  }


  /* FAQ */

  body.casino-reference-layout
  :is(
    .guide-faq,
    .faq-accordion,
    .faq-section
  ) {

    width:
      calc(100% - 14px) !important;

    padding:
      .85rem !important;

    border-radius:
      13px !important;
  }


  body.casino-reference-layout
  :is(
    .guide-faq,
    .faq-accordion,
    .faq-section
  ) summary,

  body.casino-reference-layout
  .accordion-header {

    min-height:
      54px !important;

    padding:
      .85rem 2.75rem .85rem .8rem !important;

    font-size:
      .84rem !important;
  }


  /* CTA */

  body.casino-reference-layout
  section.contextual-pathway {

    width:
      calc(100% - 14px) !important;

    margin:
      2rem auto !important;

    border-radius:
      13px !important;
  }


  body.casino-reference-layout
  .contextual-pathway__cta {

    display:
      block !important;
  }


  body.casino-reference-layout
  .contextual-pathway__button-wrap {

    width:
      100% !important;

    margin-top:
      1rem !important;
  }


  body.casino-reference-layout
  .contextual-pathway__button {

    width:
      100% !important;
  }


  /* ======================================================
     MOBILE SLOTSLAUNCH
     Same desktop hierarchy — shrunk, not rearranged.
     ====================================================== */

  body.casino-reference-layout
  #slotslaunch-games {

    width:
      calc(100% - 6px) !important;

    max-width:
      none !important;

    margin:
      .6rem auto 1.5rem !important;

    padding:
      .45rem !important;

    border-radius:
      10px !important;
  }


  /* Badge -> title -> description, exactly as desktop */

  body.casino-reference-layout
  #slotslaunch-games
  .slc-heading {

    display:
      block !important;

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 auto .65rem !important;

    padding:
      .5rem .35rem !important;

    text-align:
      center !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-badge {

    display:
      inline-flex !important;

    width:
      auto !important;

    min-height:
      20px !important;

    margin:
      0 auto .32rem !important;

    padding:
      .2rem .45rem !important;

    font-size:
      .4rem !important;

    line-height:
      1 !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-heading h2 {

    width:
      100% !important;

    margin:
      0 auto .3rem !important;

    padding:
      0 !important;

    border:
      0 !important;

    font-size:
      .82rem !important;

    line-height:
      1.05 !important;

    text-align:
      center !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-heading p {

    width:
      min(300px,94%) !important;

    margin:
      0 auto !important;

    font-size:
      .46rem !important;

    line-height:
      1.3 !important;

    text-align:
      center !important;
  }


  /* Provider + search stay side-by-side */

  body.casino-reference-layout
  #slotslaunch-games
  .slc-toolbar {

    display:
      grid !important;

    grid-template-columns:
      minmax(0,.8fr)
      minmax(0,1.2fr) !important;

    gap:
      .28rem !important;

    width:
      100% !important;

    padding:
      .38rem !important;

    border-radius:
      8px !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-toolbar label > span {

    font-size:
      .38rem !important;

    line-height:
      1 !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  :is(
    .slc-provider-select,
    .slc-search
  ) {

    min-height:
      27px !important;

    height:
      27px !important;

    padding:
      .2rem .28rem !important;

    border-radius:
      5px !important;

    font-size:
      .46rem !important;
  }


  /* Horizontal category row */

  body.casino-reference-layout
  #slotslaunch-games
  .slc-category-filters {

    display:
      flex !important;

    flex-wrap:
      nowrap !important;

    justify-content:
      flex-start !important;

    gap:
      .2rem !important;

    width:
      100% !important;

    margin:
      .3rem 0 !important;

    padding-bottom:
      .15rem !important;

    overflow-x:
      auto !important;

    scrollbar-width:
      none !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-category-filters::-webkit-scrollbar {

    display:
      none !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-category-filters button {

    flex:
      0 0 auto !important;

    min-height:
      21px !important;

    padding:
      .18rem .34rem !important;

    font-size:
      .37rem !important;

    line-height:
      1 !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-status {

    min-height:
      0 !important;

    margin:
      .25rem 0 !important;

    font-size:
      .4rem !important;
  }


  /* Requested THREE games per row */

  body.casino-reference-layout
  #slotslaunch-games
  .slc-grid,

  body.casino-reference-layout
  #slotslaunch-games
  .slc-grid[aria-busy="true"] {

    display:
      grid !important;

    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;

    gap:
      4px !important;

    width:
      100% !important;

    min-height:
      0 !important;

    padding:
      0 !important;
  }


  /* Undo shared 1-column 420px card mode */

  body.casino-reference-layout
  #slotslaunch-games
  .slc-game-card {

    display:
      flex !important;

    flex-direction:
      column !important;

    grid-template-columns:
      none !important;

    grid-template-rows:
      none !important;

    width:
      100% !important;

    min-width:
      0 !important;

    height:
      100% !important;

    border-radius:
      6px !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-game-image {

    width:
      100% !important;

    height:
      auto !important;

    aspect-ratio:
      16 / 10 !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-game-body {

    min-width:
      0 !important;

    min-height:
      88px !important;

    padding:
      .24rem !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-provider {

    margin-bottom:
      .08rem !important;

    font-size:
      .29rem !important;

    line-height:
      1 !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-game-body h3 {

    min-height:
      2.25em !important;

    margin:
      .08rem 0 .13rem !important;

    font-size:
      .42rem !important;

    line-height:
      1.12 !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-facts {

    font-size:
      .29rem !important;

    line-height:
      1 !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-card-actions {

    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      .14rem !important;

    margin-top:
      auto !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  :is(
    .slc-play,
    .slc-real-money
  ) {

    width:
      100% !important;

    min-height:
      21px !important;

    height:
      21px !important;

    padding:
      .1rem .03rem !important;

    border-radius:
      4px !important;

    font-size:
      .29rem !important;

    line-height:
      1 !important;
  }

}


/* ============================================================
   VERY SMALL MOBILE
   Still 3 cards per row.
   ============================================================ */

@media (max-width: 390px) {

  body.casino-reference-layout
  #slotslaunch-games
  .slc-grid {

    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;

    gap:
      3px !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  .slc-game-body h3 {

    font-size:
      .39rem !important;
  }


  body.casino-reference-layout
  #slotslaunch-games
  :is(
    .slc-play,
    .slc-real-money
  ) {

    font-size:
      .26rem !important;
  }

}