/* Slotlair-inspired (warm dark + gold) */
:root{
  --bg: #0f0d0b;
  --bg2: #151210;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.76);
  --muted2: rgba(255,255,255,.58);
  --gold: #f0bd2a;
  --gold2: #d18a06;
  --red: #b41212;
  --shadow: 0 18px 60px rgba(0,0,0,.62);
  --radius: 14px;
  --radius2: 18px;
  --max: 1180px;
}

*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  /* Crisp on Windows: prefer system UI fonts for body text */
  font: 15.5px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(240,189,42,.10), transparent 62%),
    radial-gradient(900px 520px at 80% 16%, rgba(180,18,18,.12), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2) 65%, var(--bg));
}

.srOnly{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.noise{
  position:fixed; inset:0;
  pointer-events:none;
  /* Too much grain makes text feel softer */
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: normal;
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding: 0 18px}
.skip-link{
  position:absolute; left:-999px; top:0;
  background:#000; color:#fff; padding:10px 12px; border-radius:10px;
}
.skip-link:focus{left:16px; top:16px; z-index:9999}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(7px);
  background: linear-gradient(180deg, rgba(18,15,13,.86), rgba(18,15,13,.62));
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.headerRow{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.brandLogo{
  width:auto; height:28px;
  filter: drop-shadow(0 0 18px rgba(240,189,42,.18));
}
.brandName{font-weight:850; letter-spacing:.12px}
.nav{
  display:none;
  gap: 12px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--muted);
}
.nav a:hover{color:var(--text); background: rgba(255,255,255,.06)}
.nav a[aria-current="page"]{
  color: var(--text);
  background: rgba(240,189,42,.10);
  border: 1px solid rgba(240,189,42,.18);
}
.headerCtas{display:flex; gap:10px; align-items:center}

.search{
  display:none;
  flex: 1 1 auto;
  max-width: 520px;
}
.searchInput{
  width:100%;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  padding: 0 12px 0 12px;
  outline: none;
}
.searchInput::placeholder{color: rgba(255,255,255,.45)}
.searchInput:focus{
  border-color: rgba(240,189,42,.28);
  box-shadow: 0 0 0 4px rgba(240,189,42,.08);
}

/* Forms (login) */
.formRow{display:grid; gap: 8px; margin-top: 12px}
.formRow label{font-size: 12px; font-weight: 850; color: rgba(255,255,255,.86)}
.formInput{
  width:100%;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  padding: 0 12px;
  outline: none;
}
.formInput::placeholder{color: rgba(255,255,255,.45)}
.formInput:focus{
  border-color: rgba(240,189,42,.28);
  box-shadow: 0 0 0 4px rgba(240,189,42,.08);
}
.formActions{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 14px}
.authNote{margin-top: 10px; color: var(--muted2)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--text);
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .06px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 22px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -8px 12px rgba(0,0,0,.16) inset;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .2s ease;
  will-change: transform;
}
.btn:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(160px 70px at 18% 10%, rgba(255,255,255,.14), transparent 72%),
    radial-gradient(160px 70px at 78% 0%, rgba(255,255,255,.08), transparent 72%);
  opacity: .28;
  pointer-events:none;
}
.btn > *{position:relative}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.09);
}
.btn:active{transform: translateY(0)}
.btnPrimary{
  /* Keep “primary” aligned with Roobet-like gold system */
  border-color: rgba(255,200,66,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(18,15,13,.92), rgba(18,15,13,.96));
  color: rgba(255,235,175,.96);
  box-shadow:
    0 14px 44px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,200,66,.12) inset,
    0 -14px 20px rgba(0,0,0,.20) inset,
    0 2px 0 rgba(255,255,255,.08) inset;
}
.btnPrimary:hover{
  border-color: rgba(255,220,120,.60);
  color: rgba(255,245,205,.98);
}
.btnSmall{padding:8px 10px; border-radius: 12px; font-size: 13px}
.btnGhost{
  background: transparent;
  border-color: rgba(255,255,255,.10);
  color: var(--muted);
}
.btnGhost:hover{color:var(--text)}

/* “Roobet-style” cushion buttons */
.btnGold{
  border-color: rgba(255,200,66,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #f8de7e 0%, #f0bd2a 30%, #d18a06 100%);
  color: rgba(18,12,2,.96);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    0 10px 26px rgba(240,189,42,.08),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 -12px 16px rgba(0,0,0,.20) inset,
    0 2px 0 rgba(255,255,255,.20) inset;
}
.btnGold:before{
  opacity:.60;
  background:
    radial-gradient(180px 70px at 22% 12%, rgba(255,255,255,.38), transparent 72%),
    radial-gradient(180px 70px at 74% 0%, rgba(255,255,255,.20), transparent 72%);
}
.btnGold:hover{
  border-color: rgba(255,220,120,.68);
  box-shadow:
    0 12px 34px rgba(240,189,42,.10),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 -12px 16px rgba(0,0,0,.18) inset,
    0 2px 0 rgba(255,255,255,.22) inset;
}

.btnOutlineGold{
  border-color: rgba(255,200,66,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(18,15,13,.92), rgba(18,15,13,.96));
  color: rgba(255,220,120,.95);
  text-shadow: none;
  box-shadow:
    0 14px 44px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,200,66,.12) inset,
    0 -14px 20px rgba(0,0,0,.20) inset,
    0 2px 0 rgba(255,255,255,.08) inset;
}
.btnOutlineGold:hover{
  border-color: rgba(255,220,120,.60);
  color: rgba(255,235,175,.98);
}

.btnSlate{
  border-color: rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(32,26,20,.92), rgba(18,15,13,.96));
  box-shadow:
    0 16px 55px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 -12px 18px rgba(0,0,0,.26) inset,
    0 2px 0 rgba(255,255,255,.10) inset;
}
.btnSlate:hover{
  border-color: rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(40,32,24,.92), rgba(18,15,13,.96));
}

.hero{
  position:relative;
  padding: 44px 0 18px;
  isolation: isolate;
}
.heroBg{
  position:absolute;
  inset: 0 0 auto 0;
  height: 430px;
  background-image:
    linear-gradient(90deg, rgba(180,18,18,.84) 0%, rgba(180,18,18,.84) 52%, rgba(15,13,11,.00) 78%),
    linear-gradient(180deg, rgba(12,10,8,.45), rgba(15,13,11,.92) 78%),
    url("../images/bg.png");
  background-size: auto, auto, cover;
  background-position: 0 0, 0 0, right 35%;
  background-repeat: no-repeat;
  filter: saturate(1.02) contrast(1.06);
  opacity: .96;
  z-index: -1;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,1) 68%, rgba(0,0,0,0));
}
.heroBg:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 260px at 24% 35%, rgba(240,189,42,.18), transparent 70%),
    radial-gradient(700px 260px at 76% 30%, rgba(255,255,255,.08), transparent 70%);
  opacity: .65;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: stretch;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-weight: 650;
  letter-spacing: .18px;
}
.kickerDot{
  width: 10px; height: 10px; border-radius: 99px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(240,189,42,.85));
  box-shadow: 0 0 25px rgba(240,189,42,.20);
}
.hero h1{
  margin: 14px 0 10px;
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(26px, 3.0vw, 40px);
  line-height: 1.10;
  letter-spacing: -0.5px;
}
.stage{
  border-radius: 26px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(15,13,11,.72), rgba(15,13,11,.42));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.46);
  backdrop-filter: blur(6px);
}
.lead{
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 62ch;
}
.heroActions{display:flex; gap:12px; flex-wrap:wrap; margin: 12px 0 0}

.panel{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: var(--shadow);
}
.panelGlow{
  position:relative;
  overflow:hidden;
}
.panelGlow:before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(600px 240px at 25% 10%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(520px 240px at 78% 22%, rgba(34,211,238,.20), transparent 60%);
  pointer-events:none;
}
.panelInner{position:relative; padding: 18px}
.facts{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.fact{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.fact dt{font-size: 12px; color: var(--muted2); letter-spacing:.2px}
.fact dd{margin: 6px 0 0; font-weight: 850}
.star{
  display:inline-flex; align-items:center; gap:8px;
}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.2px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.badgeNeon{
  color: rgba(255,255,255,.92);
  border-color: rgba(240,189,42,.32);
  background: rgba(240,189,42,.10);
  box-shadow: 0 0 0 1px rgba(240,189,42,.08) inset;
}
.rating{
  display:flex; align-items:baseline; gap:10px;
  margin-top: 10px;
}
.rating strong{
  font-size: 34px;
  letter-spacing: -0.6px;
}
.muted{color: var(--muted)}
.tiny{font-size: 12px; color: var(--muted2)}

.section{padding: 34px 0}
.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.sectionHeadNarrow{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.sectionHead h2{
  margin:0;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.sectionHead p{margin:0}
.textLink{
  color: var(--muted);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.textLink:hover{color: var(--text); border-color: rgba(255,255,255,.16)}

.chips{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin: 10px 0 0;
}
.chip{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-weight: 750;
  font-size: 13px;
}
.chip:hover{color: var(--text); border-color: rgba(255,255,255,.16)}
.chip[aria-current="true"]{
  color: rgba(255,255,255,.92);
  border-color: rgba(240,189,42,.30);
  background: rgba(240,189,42,.10);
}

/* Sticky quick-jump row (Home) */
.subnavRow{
  display:flex;
  gap: 10px;
  padding: 10px 0 12px;
  align-items:center;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(255,255,255,.10);
}
.subnavRow::-webkit-scrollbar{height:6px}
.subnavRow::-webkit-scrollbar-thumb{background: rgba(255,255,255,.10); border-radius:999px}
.chipSmall{padding: 7px 10px; font-size: 12px; font-weight: 800; letter-spacing:.16px}

/* Roobet-like stats row */
.statGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
.statCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  padding: 16px 14px;
  text-align:center;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}
.statIcon{
  width: 44px; height: 44px;
  margin: 0 auto 10px;
  display:grid; place-items:center;
  border-radius: 16px;
  color: rgba(240,189,42,.92);
  background:
    radial-gradient(120px 60px at 30% 10%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,200,66,.18);
  box-shadow: 0 0 0 1px rgba(255,200,66,.10) inset;
}
.statIcon svg{width:22px; height:22px}
.statValue{
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.4px;
  font-size: 22px;
  color: rgba(255,255,255,.92);
}
.statLabel{margin-top: 2px; color: var(--muted2); font-size: 12px}

.carousel{
  position:relative;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  overflow:hidden;
}

/* Slot grid (no scroll) */
.slotGrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.slotCard{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 44px rgba(0,0,0,.40);
  transition: transform .16s ease, border-color .16s ease, box-shadow .2s ease;
}
.slotCard:hover{
  transform: translateY(-1px);
  border-color: rgba(255,200,66,.24);
  box-shadow: 0 18px 60px rgba(0,0,0,.48);
}
.slotCover{
  display:block;
  padding: 0;
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
  /* match real cover ratio 180×236 */
  aspect-ratio: 180 / 236;
}
.slotCover img{
  display:block;
  width:100%;
  height: 100%;
  /* show the whole cover (no crop) */
  object-fit: contain;
  object-position: center;
  transform: none;
  transition: filter .20s ease;
  filter: saturate(1.02) contrast(1.04);
  border-radius: 0;
}
.slotCard:hover .slotCover img{
  filter: saturate(1.08) contrast(1.08);
}
.slotInfo{
  padding: 12px 12px 14px;
}
.slotName{
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.2px;
  line-height: 1.2;
  min-height: 34px; /* keeps card heights aligned */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slotProvider{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted2);
}
.slotPlay{
  margin-top: 10px;
  width: 100%;
}

@media (max-width: 900px){
  .slotGrid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}

@media (max-width: 520px){
  .slotGrid{grid-template-columns: 1fr}
}
.tabs{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin: 10px 0 12px;
}
.tab{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 850;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.tab:hover{color: var(--text); border-color: rgba(255,255,255,.18)}
.tab.isActive{
  color: rgba(18,12,2,.96);
  border-color: rgba(255,200,66,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #f7d66a 0%, #f0bd2a 32%, #d18a06 100%);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 18px 60px rgba(240,189,42,.10), 0 -10px 18px rgba(0,0,0,.22) inset;
}
.centerCta{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}

/* Center “lobby stage” like Roobet */
.lobbyStage{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,15,13,.88), rgba(18,15,13,.64));
  box-shadow: 0 22px 75px rgba(0,0,0,.50);
  padding: 18px 18px 16px;
  backdrop-filter: blur(6px);
  max-width: 980px;
  margin: 0 auto;
}
.lobbyHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.lobbyHead h2{
  margin:0;
  font-size: 20px;
  letter-spacing: -0.25px;
}
.lobbyHead p{margin: 4px 0 0; max-width: 68ch}

/* Simple prose blocks for About / Terms */
.prose{max-width: 74ch}
.prose h2{
  margin: 18px 0 8px;
  font-size: 16px;
  letter-spacing: -0.2px;
}
.prose p{margin: 0 0 10px}
.prose .list{margin: 8px 0 12px}

.gameGrid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.gameTile{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 40px rgba(0,0,0,.32);
  min-height: 250px;
  display:flex;
  flex-direction:column;
}
.gameCover{
  display:block;
  height: 188px;
  padding: 12px 12px 10px;
  text-decoration:none;
  position:relative;
  background:
    radial-gradient(120px 90px at 18% 28%, rgba(240,189,42,.22), transparent 65%),
    radial-gradient(160px 120px at 78% 38%, rgba(180,18,18,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.gameCover:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(18,15,13,.92));
}
.gameCover > *{position:relative; z-index:1}
.gameTitleBig{
  margin-top: 86px;
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.35px;
  font-size: 16px;
  text-transform: none;
}
.gameProviderSmall{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}
.gameBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(255,200,66,.40);
  background: rgba(240,189,42,.10);
  color: rgba(255,255,255,.92);
  text-transform: uppercase;
}
.gameBadge.isHot{
  border-color: rgba(180,18,18,.55);
  background: rgba(180,18,18,.14);
}
.gameBadge.isNew{
  border-color: rgba(240,189,42,.40);
  background: rgba(240,189,42,.10);
}
.gameBadge.isPick{
  border-color: rgba(240,189,42,.55);
  background: rgba(240,189,42,.14);
}
.gameBadge.isLive{
  border-color: rgba(52,211,153,.35);
  background: rgba(52,211,153,.10);
}
.gameMetaRow{
  padding: 10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.gameName{
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.90);
}
.gameMeta{
  font-size: 12px;
  color: var(--muted2);
}

/* Subtle per-tile “art” variations */
.gameTile.artA .gameCover{background:
  radial-gradient(120px 90px at 20% 22%, rgba(240,189,42,.22), transparent 68%),
  radial-gradient(170px 120px at 72% 35%, rgba(180,18,18,.14), transparent 72%),
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.gameTile.artB .gameCover{background:
  radial-gradient(160px 120px at 26% 30%, rgba(180,18,18,.18), transparent 72%),
  radial-gradient(180px 130px at 78% 34%, rgba(240,189,42,.18), transparent 72%),
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.gameTile.artC .gameCover{background:
  radial-gradient(180px 130px at 65% 30%, rgba(240,189,42,.16), transparent 72%),
  radial-gradient(160px 120px at 20% 60%, rgba(180,18,18,.14), transparent 72%),
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.gameTile.artD .gameCover{background:
  radial-gradient(200px 140px at 40% 30%, rgba(180,18,18,.16), transparent 72%),
  radial-gradient(160px 120px at 76% 40%, rgba(240,189,42,.16), transparent 72%),
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.gameTile.artE .gameCover{background:
  radial-gradient(180px 120px at 30% 40%, rgba(240,189,42,.18), transparent 72%),
  radial-gradient(180px 120px at 78% 22%, rgba(180,18,18,.12), transparent 72%),
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.gameTile.artF .gameCover{background:
  radial-gradient(160px 120px at 30% 20%, rgba(180,18,18,.14), transparent 72%),
  radial-gradient(200px 140px at 75% 38%, rgba(240,189,42,.14), transparent 72%),
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

/* Bonus cards like Roobet promo row */
.bonusGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
.bonusCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(720px 240px at 20% 10%, rgba(240,189,42,.14), transparent 62%),
    radial-gradient(680px 240px at 85% 20%, rgba(180,18,18,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding: 14px;
  box-shadow: 0 26px 90px rgba(0,0,0,.42);
}
.bonusMedia{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  aspect-ratio: 664 / 312;
  margin: -14px -14px 12px;
}
.bonusImg{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) contrast(1.06);
}
.bonusCode{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(240,189,42,.24);
  background: rgba(240,189,42,.10);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: .2px;
}
.bonusTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.bonusCap{
  font-weight: 900;
  color: rgba(255,255,255,.86);
  font-size: 12px;
}
.bonusCard h3{
  margin: 0 0 6px;
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  letter-spacing: -0.25px;
}
.bonusActions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

/* Payments (table like Roobet) */
.payWrap{
  margin-top: 10px;
}
.payMatrixWrap{
  margin-top: 10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.payMatrixWrap{
  border-radius: 18px;
  box-shadow: 0 26px 90px rgba(0,0,0,.35);
}
.payMatrixWrap::-webkit-scrollbar{height:8px}
.payMatrixWrap::-webkit-scrollbar-thumb{background: rgba(255,255,255,.14); border-radius:999px}
.payMatrixWrap::-webkit-scrollbar-track{background: rgba(255,255,255,.05); border-radius:999px}
.payMatrix{
  width:100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(720px 240px at 18% 10%, rgba(240,189,42,.10), transparent 62%),
    radial-gradient(680px 240px at 82% 20%, rgba(180,18,18,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
}
.payMatrix thead th{
  text-align:left;
  font-size: 12px;
  letter-spacing: .18px;
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
  background: rgba(0,0,0,.30);
  border-bottom: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
}
.payMatrix tbody td{
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  vertical-align: middle;
  white-space: nowrap;
}
.payMatrix tbody tr:nth-child(odd) td{background: rgba(0,0,0,.14)}
.payMatrix tbody tr:last-child td{border-bottom:0}
.payMatrix tbody tr:hover td{background: rgba(255,255,255,.06)}
.pmMethod{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 260px;
}
.pmLogo{
  width: 56px;
  height: 40px;
  border-radius: 12px;
  background:
    radial-gradient(90px 50px at 30% 20%, rgba(255,255,255,.92), rgba(255,255,255,.78)),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(235,235,235,.92));
  display:grid;
  place-items:center;
  border: 1px solid rgba(0,0,0,.32);
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.18) inset;
  flex: 0 0 auto;
}
.pmLogoWide{width: 68px}
.pmLogo img{
  width: 44px;
  height: 22px;
  object-fit: contain;
  filter:
    saturate(1.12)
    contrast(1.18)
    drop-shadow(0 1px 0 rgba(0,0,0,.58))
    drop-shadow(0 0 8px rgba(0,0,0,.18));
}
.pmLogoWide img{width: 54px}
.pmMeta{display:grid; gap: 2px}
.pmName{
  font-weight: 900;
  letter-spacing: -0.2px;
  color: rgba(255,255,255,.92);
}
.pmSub{
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.pmAction{text-align:right}
.paySwipe{
  display:none;
  margin: 0 0 8px;
  color: rgba(255,255,255,.72);
}
.payTiles{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(760px 240px at 18% 0%, rgba(240,189,42,.10), transparent 62%),
    radial-gradient(720px 240px at 82% 10%, rgba(52,211,153,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.payTilesHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.payTilesTitle{
  font-weight: 900;
  letter-spacing: -0.2px;
  color: rgba(255,255,255,.90);
}
.payTilesGrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.payTile{
  position:relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,8,20,.38);
  overflow:hidden;
  padding: 12px 10px;
  text-align:center;
  box-shadow: 0 18px 70px rgba(0,0,0,.26);
}
.payTile:before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(140px 90px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
  opacity: .75;
}
.payTile > *{position:relative}
.payTileTag{
  position:absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  letter-spacing: .16px;
  font-weight: 900;
  color: rgba(255,255,255,.78);
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.payTileIcon{
  width: 62px;
  height: 32px;
  object-fit: contain;
  margin-top: 18px;
  opacity: .92;
  filter: saturate(1.10) contrast(1.15);
}
.payTileName{
  margin-top: 10px;
  font-weight: 850;
  color: rgba(255,255,255,.90);
  font-size: 12px;
  letter-spacing: .1px;
}
.payTable{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(720px 240px at 18% 10%, rgba(240,189,42,.10), transparent 62%),
    radial-gradient(680px 240px at 82% 20%, rgba(180,18,18,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}
.payTable thead th{
  text-align:left;
  font-size: 12px;
  letter-spacing: .18px;
  color: rgba(240,189,42,.86);
  padding: 12px 12px;
  background: rgba(0,0,0,.16);
  border-bottom: 1px solid rgba(240,189,42,.20);
}
.payTable thead th:first-child{text-align:left}
.payTable tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  vertical-align: middle;
}
.payTable tbody tr:last-child td{border-bottom:0}
.payTable tbody tr:hover td{
  background: rgba(255,255,255,.03);
}
.payMethod{
  font-weight: 850;
}
.payMethodValue{
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content:flex-start;
}
.payIcon{
  height: 18px;
  width: 34px;         /* keep logos “icon-sized” */
  object-fit: contain; /* harmless for svg, ok for future png/webp */
  opacity: .82;
  filter: saturate(1.05) contrast(1.10);
}
.payName{
  display:inline-block;
  min-width: 10ch;
}

/* Review facts table */
.factsTableWrap{max-width: 980px; margin: 0 auto;}
.factsTable{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.factsTable th,
.factsTable td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
.factsTable th{
  text-align:left;
  width: 34%;
  color: rgba(255,255,255,.88);
  font-weight: 850;
}
.factsTable td{color: rgba(255,255,255,.84)}
.factsTable tr:last-child th,
.factsTable tr:last-child td{border-bottom:0}
.factsGroup th{
  padding: 12px 12px;
  background: rgba(0,0,0,.16);
  color: rgba(240,189,42,.86);
  letter-spacing:.18px;
  font-size: 12px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(240,189,42,.20);
}

@media (max-width: 720px){
  .factsTable th{width:auto}
}

@media (max-width: 720px){
  .paySwipe{display:block}
  .payTilesHead{flex-direction:column; align-items:flex-start}
  .payTilesGrid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .payTable thead{display:none}
  .payTable, .payTable tbody, .payTable tr, .payTable td{display:block; width:100%}
  .payTable tr{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .payTable tbody td{
    border:0;
    padding: 6px 0;
    display:flex;
    justify-content:space-between;
    gap: 14px;
  }
  .payTable tbody td:before{
    content: attr(data-label);
    color: var(--muted2);
    font-size: 12px;
    font-weight: 800;
  }
  .payMethodValue{margin-left:auto; justify-content:flex-end}
  .payName{min-width: auto}
}

/* Reviews (Roobet-like cards) */
.reviewGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.reviewCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  padding: 14px;
  box-shadow: 0 26px 90px rgba(0,0,0,.40);
}
.reviewStars{
  color: rgba(240,189,42,.95);
  letter-spacing: 1px;
  font-size: 14px;
}
.reviewQuote{
  margin: 10px 0 12px;
  color: rgba(255,255,255,.86);
  line-height: 1.55;
}
.reviewMeta{
  display:flex;
  align-items:baseline;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.reviewBullets{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
}
.reviewBullets li{
  position:relative;
  padding-left: 18px;
}
.reviewBullets li:before{
  content:"";
  position:absolute;
  left:0;
  top: 1px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background-color: rgba(52,211,153,.92);
  background-image:
    linear-gradient(rgba(18,12,2,.96), rgba(18,12,2,.96)),
    linear-gradient(rgba(18,12,2,.96), rgba(18,12,2,.96));
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 8px 2px, 2px 8px;
}
.reviewBullets li.isMinus:before{
  background-color: rgba(251,113,133,.28);
  background-image: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8px 2px;
  border: 1px solid rgba(251,113,133,.32);
}

/* Steps / registration (striped cards) */
.stepsStage{
  position:relative;
  overflow:hidden;
}
.stepsStage:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(720px 260px at 18% 10%, rgba(240,189,42,.10), transparent 60%),
    radial-gradient(720px 260px at 82% 20%, rgba(180,18,18,.10), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,0) 10px 22px);
  opacity: .55;
  pointer-events:none;
}
.stepsStage > *{position:relative}
.stepsGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.stepCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  padding: 14px;
  box-shadow: 0 18px 70px rgba(0,0,0,.42);
}
.stepTop{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}
.stepNum{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  color: rgba(18,12,2,.96);
  background:
    radial-gradient(120px 60px at 30% 10%, rgba(255,255,255,.22), transparent 70%),
    linear-gradient(180deg, #f7d66a 0%, #f0bd2a 32%, #d18a06 100%);
  border: 1px solid rgba(255,200,66,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 26px rgba(240,189,42,.08);
}
.stepLine{
  height: 10px;
  flex: 1 1 auto;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(240,189,42,.55), rgba(180,18,18,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,.20) inset;
}
.stepCard h3{
  margin: 0 0 6px;
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: -0.2px;
}
.stepCard p{margin:0}

/* Install app (PWA) */
.installStage{
  position:relative;
  overflow:hidden;
}
.installStage:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(720px 260px at 18% 10%, rgba(52,211,153,.10), transparent 60%),
    radial-gradient(720px 260px at 82% 20%, rgba(240,189,42,.10), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,0) 10px 22px);
  opacity: .45;
  pointer-events:none;
}
.installStage > *{position:relative}
.installGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  margin-top: 12px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.installHero{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(240,189,42,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding: 14px;
  box-shadow: 0 18px 70px rgba(0,0,0,.42);
  position:relative;
  overflow:hidden;
}
.installHero:before{
  content:"";
  position:absolute;
  inset: 0;
  background: rgba(7,8,20,.58);
  backdrop-filter: blur(10px);
  pointer-events:none;
}
.installHero:after{
  content:"";
  position:absolute;
  inset: 0;
  opacity: .22;
  background:
    linear-gradient(90deg, rgba(7,8,20,.86), rgba(7,8,20,.22), rgba(7,8,20,.86)),
    url("./../images/app/install-bg.webp");
  background-size: cover;
  background-position: center;
  pointer-events:none;
}
.installHero > *{position:relative}
.installTitle{
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin: 0;
}
.installTitle,
.installLead,
.installNote{
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 12px 34px rgba(0,0,0,.35);
}
.installLead{margin: 8px 0 0; color: rgba(255,255,255,.90)}
.installBtns{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px}
.installNote{margin-top: 10px; color: var(--muted2)}
.installCols{
  display:grid;
  gap: 14px;
}
.installCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03));
  padding: 14px;
  box-shadow: 0 18px 70px rgba(0,0,0,.42);
}
.installCard h3{
  margin: 0 0 10px;
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: -0.2px;
  font-size: 15px;
}
.installSteps{
  margin: 0;
  padding-left: 18px;
  display:grid;
  gap: 8px;
  color: rgba(255,255,255,.86);
}
.installSteps li{color: rgba(255,255,255,.86)}
.installSteps li span{color: var(--muted)}

@media (max-width: 920px){
  .installGrid{grid-template-columns: 1fr}
}

.splitStage{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
.splitCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03));
  padding: 14px;
}

.track{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 14px;
  padding: 14px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 14px;
  scrollbar-width: thin;
}
.track:focus{outline: none}
.track > *{scroll-snap-align: start}

.cBtn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,8,20,.55);
  backdrop-filter: blur(10px);
  color: var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.cBtn:hover{background: rgba(7,8,20,.70)}
.cBtn[disabled]{opacity:.35; cursor:not-allowed}
.cPrev{left:10px}
.cNext{right:10px}

.card{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 206px;
}
.thumb{
  height: 122px;
  background:
    radial-gradient(120px 90px at 20% 25%, rgba(34,211,238,.38), transparent 65%),
    radial-gradient(140px 110px at 70% 30%, rgba(124,58,237,.40), transparent 65%),
    radial-gradient(160px 120px at 55% 95%, rgba(251,113,133,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.10);
  position:relative;
}
.thumb:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 45%, rgba(7,8,20,.65));
}
.thumbLabel{
  position:absolute; left:10px; top:10px; z-index:1;
}
.cardBody{padding: 12px 12px 12px}
.titleRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.card h3{
  margin:0;
  font-size: 14px;
  letter-spacing:.1px;
  line-height: 1.2;
}
.provider{font-size: 12px; color: var(--muted2); margin-top: 6px}
.cardFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  margin-top: 10px;
}

.promoGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}
.promo{
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 260px at 15% 10%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(600px 240px at 80% 25%, rgba(34,211,238,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}
.promo h2{margin:0 0 6px; font-size: 18px}
.promo ul{margin: 10px 0 0; padding-left: 18px; color: var(--muted)}
.promoAside{
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.list li{margin: 10px 0}
.pillOk{color: rgba(255,255,255,.90); border-color: rgba(52,211,153,.28); background: rgba(52,211,153,.10)}
.pillBad{color: rgba(255,255,255,.90); border-color: rgba(251,113,133,.28); background: rgba(251,113,133,.10)}

.faq{
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.qa{
  border-top: 1px solid rgba(255,255,255,.08);
}
.qa:first-child{border-top:0}
.q{
  width:100%;
  text-align:left;
  padding: 14px 14px;
  background: transparent;
  border:0;
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  cursor:pointer;
  font-weight: 800;
}
.q span{color: var(--muted)}
.a{
  padding: 0 14px 14px;
  color: var(--muted);
  display:none;
}
.qa[data-open="true"] .a{display:block}
.chev{
  width: 26px; height: 26px;
  border-radius: 999px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 34px 0 26px;
  margin-top: 28px;
  color: var(--muted);
}

/* Footer (Roobet-like) */
.footerShell{max-width: var(--max); margin: 0 auto; padding: 0 18px}
.footerTop{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.footerBrand p{margin:10px 0 0; color: var(--muted)}
.footerTitle{
  font-weight: 900;
  letter-spacing: .2px;
  margin: 6px 0 10px;
  color: rgba(255,255,255,.90);
}
.footerLinks{
  display:grid;
  gap: 10px;
}
.footer a{color: var(--muted); text-decoration:none}
.footer a:hover{color: var(--text)}
.socialRow{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap:wrap;
}
.socialLink{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.82);
}
.socialLink:hover{
  border-color: rgba(240,189,42,.22);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.socialLink svg{width:18px; height:18px}

.footerPayments{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  align-items:center;
  justify-content:center;
}
.footerPay{
  opacity: .85;
  filter: saturate(1.05) contrast(1.08);
}
.footerPay img{
  height: 18px;
  width: auto;
  display:block;
}
.footerBottom{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align:center;
  color: var(--muted2);
  font-size: 12px;
}

@media (max-width: 900px){
  .footerTop{grid-template-columns: 1fr; gap: 16px}
  .footerPayments{justify-content:flex-start}
}

@media (max-width: 900px){
  .heroGrid{grid-template-columns: 1fr; }
  .promoGrid{grid-template-columns: 1fr}
  .facts{grid-template-columns: 1fr 1fr}
  .statGrid{grid-template-columns: 1fr 1fr}
  .gameGrid{grid-template-columns: 1fr 1fr}
  .bonusGrid{grid-template-columns: 1fr}
  .stepsGrid{grid-template-columns: 1fr}
  .reviewGrid{grid-template-columns: 1fr}
  .grid2{grid-template-columns: 1fr}
  .splitStage{grid-template-columns: 1fr}
}

@media (max-width: 1180px) and (min-width: 901px){
  .gameGrid{grid-template-columns: repeat(3, 1fr)}
  .gameTile{min-height: 240px}
  .gameCover{height: 176px}
}
@media (min-width: 960px){
  .nav{display:flex}
  .search{display:block}
}
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
}