/* ===== Theme tokens ===== */
:root {
  --bg: #080a13;
  --bg-2: #101321;
  --panel: #171b2a;
  --panel-2: #202638;
  --panel-hover: #2a3248;
  --ink: #f5f7ff;
  --ink-dim: #a8b0c6;
  --gold: #f2ae36;
  --gold-2: #ffce5a;
  --accent: #315dff;
  --accent-2: #b84cff;
  --line: rgba(255,255,255,0.1);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
  --maxw: 1240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    linear-gradient(180deg, #080a13 0%, #101322 48%, #080a13 100%);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ===== Buttons ===== */
.btn {
  border: none;
  cursor: pointer;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 14px;
  transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: linear-gradient(135deg, var(--gold), #ffce5a); color: #2a1c00; }
.btn--primary:hover { filter: brightness(1.05); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,0.15); }
.btn--ghost:hover { background: rgba(255,255,255,0.06); }
.btn--deposit { background: var(--accent); color: #fff; padding: 8px 14px; }
.btn--deposit:hover { filter: brightness(1.1); }

/* ===== Top bar ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 10, 19, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.brand__mark { color: var(--gold); font-size: 20px; filter: drop-shadow(0 0 10px rgba(242,174,54,.45)); }
.brand__name { font-size: 18px; letter-spacing: 0.2px; }

.topnav { display: flex; gap: 6px; margin-left: 12px; }
.topnav__link {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--ink-dim);
  font-weight: 600;
  font-size: 14px;
}
.topnav__link:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.topnav__link.is-active { color: var(--ink); background: var(--panel-2); }

.topbar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.balance {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel);
  padding: 5px 5px 5px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.balance__amount { font-weight: 700; font-size: 14px; }

/* ===== Page ===== */
.page { max-width: var(--maxw); margin: 0 auto; padding: 20px; }

/* ===== Hero carousel ===== */
.page > .hero {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero__track { display: flex; transition: transform 0.5s cubic-bezier(.22,.61,.36,1); }
.slide {
  min-width: 100%;
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  padding: 0 56px;
  color: #fff;
}
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4,6,18,.72) 0%, rgba(4,6,18,.28) 48%, rgba(4,6,18,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.slide__content { position: relative; z-index: 2; max-width: 48%; }
.slide__tag {
  display: inline-flex; gap: 10px; align-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  opacity: 0.9; margin-bottom: 14px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}
.slide__tag span { font-weight: 600; opacity: 0.75; }
.slide__title { font-size: 42px; font-weight: 850; margin: 0 0 8px; line-height: 1.05; }
.slide__sub { font-size: 16px; opacity: 0.85; margin: 0 0 26px; }
.slide__deco {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0.9;
  background-size: cover; background-position: center;
}
.slide__glow {
  position: absolute; right: 0; top: 0;
  width: 42%; height: 100%;
  filter: blur(20px); z-index: 1; opacity: 0.32;
}

.hero__dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.35); cursor: pointer; border: none;
  transition: background 0.2s, width 0.2s;
}
.dot.is-active { background: var(--gold); width: 22px; border-radius: 6px; }

/* ===== Category nav ===== */
.cats {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  margin: 18px 0 8px;
  padding: 12px;
  border: 1px solid rgba(114, 136, 255, .12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(28, 38, 107, .58), rgba(10, 14, 48, .42)),
    rgba(7, 10, 33, .72);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .26);
}
.cat {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)), #141b48;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.cat:hover { background: #1b245d; transform: translateY(-2px); }
.cat.is-active { background: #231f19; border-color: rgba(242,174,54,.72); box-shadow: inset 0 0 0 1px rgba(242,174,54,.22); }
.cat__icon { font-size: 22px; }
.cat__label { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ===== Rows ===== */
#rows {
  margin-top: 18px;
  padding: 0;
}
.row {
  position: relative;
  isolation: isolate;
  margin-top: 22px;
  padding: 18px 20px 16px;
  border-radius: 8px;
  border: 1px solid rgba(114, 136, 255, .08);
  background: transparent;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}
.row::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(105deg, rgba(25, 36, 112, .9) 0%, rgba(19, 28, 88, .74) 52%, rgba(11, 16, 54, .2) 82%, rgba(8, 10, 32, 0) 100%),
    linear-gradient(180deg, rgba(35, 48, 139, .28), rgba(8, 10, 32, 0) 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,.45) 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,.45) 84%, transparent 100%);
  pointer-events: none;
}
#rows .row:first-child { margin-top: 0; }
.row__head {
  position: relative;
  z-index: 1;
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding-left: 12px;
}
.row__head::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), #e95d2a);
}
.row--new .row__head::before { background: linear-gradient(180deg, #7cf08a, var(--gold)); }
.row__title { font-size: 20px; font-weight: 850; margin: 0; }
.row__icon {
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.row__controls { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.row__all { color: var(--ink-dim); font-weight: 750; font-size: 13px; cursor: pointer; }
.row__all:hover { color: var(--ink); }
.row__nav {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.row__nav:hover { background: var(--panel-hover); }

.scroller {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 5 * 14px) / 6);
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge/IE */
}
.scroller::-webkit-scrollbar { height: 0; width: 0; display: none; }  /* Chrome/Safari */

/* ===== Game card ===== */
.card { cursor: pointer; min-width: 0; }
.card__art {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: #111522;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -40px 48px rgba(0,0,0,.22);
}
.card:hover .card__art { transform: translateY(-4px); border-color: rgba(242,174,54,.48); box-shadow: 0 18px 42px rgba(0,0,0,0.56); }
.card__name-on-art {
  font-weight: 800; font-size: 17px; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  padding: 12px; line-height: 1.15;
}
.card__badge {
  position: absolute; top: 8px; left: 8px;
  z-index: 3;
  background: var(--accent-2); color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: 0.6px;
  padding: 4px 7px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.card__badge--new { background: linear-gradient(135deg, #b8ff58, var(--gold)); color: #192000; }
.card__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  background: linear-gradient(180deg, rgba(6,8,18,.16), rgba(6,8,18,.72));
  backdrop-filter: blur(1.5px);
  opacity: 0; transition: opacity 0.15s;
}
.card:hover .card__play { opacity: 1; }
.card__play-btn {
  background: linear-gradient(135deg, var(--gold), #ffce5a);
  color: #2a1c00; font-weight: 800; border: none; cursor: pointer;
  padding: 9px 17px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 10px 24px rgba(0,0,0,.42);
}
.card__label {
  margin-top: 8px;
  min-height: 32px;
  font-size: 13px;
  line-height: 16px;
  color: var(--ink);
  font-weight: 650;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Provider pill cards */
.provider {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  height: 74px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 850; letter-spacing: 0.5px; color: var(--ink);
  font-size: 14px; cursor: pointer; text-align: center; padding: 0 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.provider:hover { background: var(--panel-hover); }

/* ===== Footer ===== */
.footer { border-top: 1px solid var(--line); margin-top: 50px; }
.footer__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 28px 20px;
  display: flex; align-items: center; gap: 16px;
}
.footer__note { color: var(--ink-dim); font-size: 13px; margin: 0 0 0 auto; }
.footer__note a { color: inherit; text-decoration: underline; }
.footer__note a:hover { color: var(--ink); }

/* ===== Support button ===== */
.support {
  position: fixed; left: 20px; bottom: 20px; z-index: 50;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, #fff, #dbe2ff); border: 1px solid rgba(255,255,255,.5); cursor: pointer;
  font-size: 23px; box-shadow: var(--shadow);
}

/* ===== External demo iframe ===== */
.demo-launch {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  grid-template-rows: 30px 50px 1fr;
  background: #01033a;
  color: var(--ink);
}
.demo-launch__brandbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 20px;
  background: #02043d;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.demo-launch__brand {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .8px;
}
.demo-launch__brand-icon {
  width: 22px;
  height: 22px;
  filter: invert(77%) sepia(62%) saturate(775%) hue-rotate(351deg) brightness(103%) contrast(94%);
}
.demo-launch__brand-text {
  font-size: 17px;
  line-height: 1;
}
.demo-launch__lang {
  position: absolute;
  right: max(20px, calc((100vw - 1170px) / 2));
  top: 5px;
  min-width: 30px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  background: #101858;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.demo-launch__nav {
  background: #17206a;
}
.demo-launch__inner {
  width: min(1170px, calc(100vw - 48px));
  height: 50px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.demo-launch__title {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.demo-launch__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.demo-launch__btn,
.demo-launch__close,
.demo-launch__money {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 850;
  font-size: 13px;
  transition: filter .15s ease, background .15s ease, transform .08s ease;
}
.demo-launch__btn:active,
.demo-launch__close:active,
.demo-launch__money:active {
  transform: translateY(1px);
}
.demo-launch__btn {
  height: 32px;
  padding: 0 12px;
}
.demo-launch__btn--ghost {
  min-width: 76px;
  background: #090f52;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.demo-launch__btn--join {
  min-width: 88px;
  background: #19a862;
  color: #fff;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}
.demo-launch__close {
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 1;
  background: #263075;
  color: #fff;
}
.demo-launch__btn:hover,
.demo-launch__close:hover,
.demo-launch__money:hover {
  filter: brightness(1.08);
}
.demo-launch__main {
  min-height: 0;
  overflow: auto;
  padding: 48px 16px 30px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(22,31,96,.42), transparent 62%),
    #01033a;
}
.demo-launch__table {
  width: min(1170px, calc(100vw - 48px));
  margin: 0 auto;
}
.demo-launch__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1170 / 810;
  overflow: hidden;
  background: #000;
  border-radius: 2px;
  box-shadow: 0 20px 56px rgba(0,0,0,.42);
}
.demo-launch__viewport iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.demo-launch__loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: #080a13;
  color: var(--ink-dim);
  font-weight: 800;
}
.demo-launch__loader.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.demo-launch__money {
  width: 100%;
  height: 28px;
  margin-top: 6px;
  background: #f7aa16;
  color: #101010;
  border: 0;
  font-size: 11px;
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .cats { grid-template-columns: repeat(4, 1fr); }
  .scroller { grid-auto-columns: calc((100% - 3 * 14px) / 4); }
  .slide__content { max-width: 70%; }
  .slide__title { font-size: 34px; }
  .topnav { display: none; }
}
@media (max-width: 640px) {
  .cats { grid-template-columns: repeat(3, 1fr); }
  .scroller { grid-auto-columns: calc((100% - 1 * 12px) / 2); gap: 12px; }
  .slide { padding: 0 24px; height: 240px; }
  .slide__content { max-width: 86%; }
  .slide__title { font-size: 26px; }
  .balance { display: none; }
  .row__controls { gap: 6px; }
  .row__all { display: none; }
  .demo-launch { grid-template-rows: 30px 54px 1fr; }
  .demo-launch__inner { width: calc(100vw - 24px); height: 54px; gap: 10px; }
  .demo-launch__title { font-size: 13px; }
  .demo-launch__actions { gap: 6px; }
  .demo-launch__btn { min-width: auto; padding: 0 9px; font-size: 12px; }
  .demo-launch__btn--ghost { display: none; }
  .demo-launch__main { padding: 18px 10px 22px; }
  .demo-launch__table { width: calc(100vw - 20px); }
  .demo-launch__viewport { aspect-ratio: 1170 / 810; }
  .demo-launch__lang { right: 12px; }
}

/* real category icons */
.cat__img { width: 26px; height: 26px; object-fit: contain; }

/* ===== Reference-style casino layout ===== */
:root {
  --bg: #02043d;
  --bg-2: #070a44;
  --panel: #101756;
  --panel-2: #17206a;
  --panel-hover: #222c7a;
  --gold: #f6ad18;
  --gold-2: #ffc043;
  --accent: #244bff;
  --maxw: 1170px;
}

html,
body {
  background: #02043d;
}

.topbar {
  background: #02043d;
  border-bottom: 0;
  backdrop-filter: none;
}

.topbar__logo-row {
  position: relative;
  height: 36px;
  display: grid;
  place-items: center;
  background: #02043d;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand--center {
  justify-content: center;
}

.brand__logo {
  width: 142px;
  height: 25px;
  object-fit: contain;
}

.topbar__lang {
  position: absolute;
  right: max(20px, calc((100vw - var(--maxw)) / 2));
  top: 8px;
  height: 20px;
  min-width: 30px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #111858;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.topbar__nav-row {
  height: 40px;
  background: #17206a;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.topbar__inner {
  max-width: var(--maxw);
  height: 40px;
  padding: 0;
  gap: 16px;
}

.topbar__nav-row .topbar__inner > .brand {
  display: none;
}

.topnav {
  height: 100%;
  align-items: center;
  gap: 14px;
  margin-left: 0;
  min-width: 0;
}

.topnav__link {
  position: relative;
  padding: 0;
  border-radius: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  line-height: 40px;
  white-space: nowrap;
}

.topnav__link:hover {
  background: transparent;
  color: var(--gold-2);
}

.topnav__link.is-active {
  background: transparent;
  color: #fff;
}

.topnav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
}

.topnav__link--accent { color: #ff6285; font-style: italic; }
.topnav__link--jet { color: #ffe46d; font-style: italic; }
.topnav__link--gold { color: #ffc043; }

.topbar__promo-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.18);
}

.topbar__promo-link {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.topbar__promo-link:hover {
  color: var(--gold-2);
}

.topbar__actions {
  gap: 8px;
  margin-left: 0;
}

.btn {
  border-radius: 6px;
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
}

.btn--ghost {
  background: #0a0f50;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
}

.btn--primary {
  background: #18a95f;
  color: #fff;
}

.page {
  max-width: var(--maxw);
  padding: 20px 0 52px;
}

.page > .hero {
  height: 228px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: #071247;
}

.hero__track,
.slide {
  height: 100%;
}

.slide {
  padding: 0 26px;
  background: linear-gradient(90deg, #071247, #082f55) !important;
}

.slide::before {
  background:
    linear-gradient(90deg, rgba(4,8,38,.92) 0%, rgba(5,16,53,.76) 39%, rgba(5,16,53,.15) 72%, rgba(5,16,53,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}

.slide__content {
  max-width: 40%;
}

.slide__tag {
  margin-bottom: 52px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-size: 11px;
  letter-spacing: 0;
}

.slide__tag span {
  margin-left: 12px;
  color: #fff;
  opacity: .9;
}

.slide__title {
  font-size: 25px;
  line-height: 1.05;
  margin-bottom: 4px;
}

.slide__sub {
  font-size: 13px;
  margin-bottom: 60px;
}

.slide .btn {
  min-width: 62px;
  height: 34px;
  background: var(--gold);
  color: #111;
}

.slide__visual {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .92;
}

.slide__provider {
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(4,8,38,.56);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.hero__dots {
  bottom: -16px;
}

.dot {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,.3);
}

.dot.is-active {
  width: 8px;
  background: var(--gold);
}

.cats {
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  margin: 30px 0 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cat {
  min-height: 62px;
  gap: 6px;
  padding: 9px 8px 8px;
  border-radius: 6px;
  background: #17205d;
  border: 1px solid rgba(255,255,255,.06);
}

.cat:hover {
  background: #202a73;
  transform: none;
}

.cat.is-active {
  background: #111852;
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(246,173,24,.18);
}

.cat__img {
  width: 25px;
  height: 25px;
  filter: brightness(0) invert(1);
  opacity: .92;
}

.cat.is-active .cat__img {
  filter: brightness(0) saturate(100%) invert(73%) sepia(76%) saturate(952%) hue-rotate(350deg) brightness(101%) contrast(93%);
}

.cat__label {
  font-size: 12px;
  line-height: 14px;
  font-weight: 850;
}

#rows {
  margin-top: 0;
}

.row {
  margin-top: 24px;
  padding: 20px 20px 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.row::before {
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(12, 18, 76, .96) 0%, rgba(12, 18, 76, .84) 60%, rgba(12, 18, 76, .16) 100%),
    linear-gradient(180deg, rgba(25, 34, 105, .65), rgba(6, 8, 48, .2) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0,0,0,.56) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0,0,0,.56) 90%, transparent 100%);
}

.row__head {
  margin-bottom: 18px;
  padding-left: 0;
}

.row__head::before {
  display: none;
}

.row__title {
  font-size: 18px;
}

.row__icon {
  min-width: 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: rgba(246,173,24,.13);
  color: var(--gold);
  font-size: 11px;
}

.row__all {
  color: #fff;
}

.row__nav {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #1a225e;
}

.scroller {
  grid-auto-flow: row;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-columns: unset;
  gap: 14px 10px;
  padding-bottom: 0;
}

.card__art {
  border-radius: 4px;
  border: 0;
  box-shadow: none;
}

.card:hover .card__art {
  transform: none;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,.26);
}

.card__label {
  margin-top: 7px;
  min-height: 16px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 550;
  color: #cdd5ff;
  -webkit-line-clamp: 1;
}

.card__badge {
  top: 4px;
  left: 4px;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 9px;
}

.support {
  display: none;
}

.footer .brand__mark,
.footer .brand__name {
  display: none;
}

.demo-launch__brand-icon {
  width: 142px;
  height: 25px;
  filter: none;
}

.demo-launch__brand-text {
  display: none;
}

@media (max-width: 1180px) {
  .topbar__inner,
  .page {
    width: calc(100vw - 32px);
    max-width: none;
  }

  .topbar__promo-links {
    display: none;
  }

  .cats {
    grid-template-columns: repeat(6, 1fr);
  }

  .scroller {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .topbar__nav-row,
  .topbar__inner {
    height: auto;
  }

  .topbar__inner {
    padding: 0 0 8px;
    flex-wrap: wrap;
  }

  .topnav {
    width: 100%;
    overflow-x: auto;
    gap: 12px;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar {
    display: none;
  }

  .topbar__actions {
    margin-left: auto;
  }

  .page {
    width: calc(100vw - 20px);
    padding-top: 14px;
  }

  .page > .hero {
    height: 220px;
  }

  .slide {
    padding: 0 18px;
  }

  .slide__content {
    max-width: 70%;
  }

  .slide__visual {
    width: 58%;
    opacity: .55;
  }

  .slide__title {
    font-size: 22px;
  }

  .cats {
    grid-template-columns: repeat(3, 1fr);
  }

  .scroller {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .row {
    padding: 16px 14px;
  }
}

/* Polished game shelves: a quiet blue-to-page fade gives the artwork room
   without changing the width or rhythm of the guest layout. */
#rows .row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 22px;
  padding: 22px 20px 18px;
  border: 1px solid rgba(105, 132, 255, .12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 23, 101, .88) 0%, rgba(7, 12, 68, .66) 47%, rgba(2, 4, 61, 0) 100%);
}

#rows .row::before {
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(80% 72% at 0% 0%, rgba(50, 81, 213, .22), transparent 68%),
    linear-gradient(180deg, rgba(20, 34, 121, .42), rgba(2, 4, 61, 0) 88%);
  -webkit-mask-image: none;
  mask-image: none;
}

#rows .row > * {
  position: relative;
  z-index: 1;
}

#rows .row__head {
  margin-bottom: 16px;
}

#rows .scroller {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: calc((100% - 36px) / 4);
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 1px 12px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(177, 194, 255, .35) transparent;
  touch-action: pan-x pan-y;
}

#rows .scroller::-webkit-scrollbar { height: 6px; }
#rows .scroller::-webkit-scrollbar-track { background: transparent; }
#rows .scroller::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(177, 194, 255, .28); }
#rows .scroller > * { scroll-snap-align: start; }

#rows .row--hot .scroller {
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
}

.card__meta {
  display: flex;
  align-items: start;
  gap: 6px;
  min-width: 0;
}

.card__meta .card__label {
  flex: 1 1 auto;
  min-width: 0;
}

.card__favourite {
  flex: 0 0 auto;
  margin-top: 5px;
  color: #d6ddff;
  font-size: 20px;
  line-height: 12px;
  opacity: .9;
  transition: color .18s ease, transform .18s ease;
}

.card:hover .card__favourite { color: var(--gold-2); transform: scale(1.08); }

@media (max-width: 900px) {
  #rows .scroller { grid-auto-columns: calc((100% - 24px) / 3); }
}

@media (max-width: 620px) {
  #rows .row { margin-top: 16px; padding: 16px 12px 14px; }
  #rows .scroller { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
  #rows .row--hot .scroller { grid-template-rows: repeat(2, auto); }
}