/* Slot Stats: the demo, member sign-in and member search pages.
   Colours and type follow the Hazard theme (style.css): purple #6B39BD, nocturne #171724, Heebo. */
:root {
  --ss-purple: #6B39BD;
  --ss-purple-dark: #55299f;
  --ss-night: #171724;
  --ss-night-2: #23233a;
  --ss-ink: #171724;
  --ss-mute: #6c6c7a;
  --ss-line: #E8E8E9;
  --ss-paper: #f6f5fa;
  --ss-gold: #f5b83f;
  --ss-win: #1f8a5b;
  --ss-loss: #d2412f;
}

/* the money readout: like a slot machine's credit meter */
.ss-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 24px 0; }
.ss-meter { background: var(--ss-night); border: 1px solid #2f2f4a; border-radius: 12px; padding: 12px 16px 14px; }
.ss-meter span { display: block; font-size: 13px; color: #b9b8cc; }
.ss-meter strong { display: block; font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--ss-gold);
  font-variant-numeric: tabular-nums; }
.ss-meter.good strong { color: #6fe0a6; }
.ss-meter.bad strong { color: #ff8f80; }

/* game tiles: no game artwork is used, so each game gets its own reel strip */
.ss-tile-art { aspect-ratio: 1 / 1; border-radius: 14px; display: grid; place-items: center; position: relative;
  overflow: hidden; color: #fff; }
.ss-tile-art .reels { display: flex; gap: 6px; }
.ss-tile-art .reels b { width: 30%; min-width: 34px; aspect-ratio: 3 / 4; background: rgba(255,255,255,.95);
  border-radius: 8px; display: grid; place-items: center; font-size: clamp(20px, 3.2vw, 34px); color: var(--ss-purple);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.08); }
.ss-tile-art .maker { position: absolute; left: 10px; bottom: 8px; font-size: 12px; opacity: .9; }

.ss-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.ss-game { background: #fff; border: 1px solid var(--ss-line); border-radius: 16px; padding: 12px; text-align: left;
  cursor: pointer; color: inherit; transition: border-color .15s, transform .15s; display: block; width: 100%; font: inherit; }
.ss-game:hover, .ss-game:focus-visible { border-color: var(--ss-purple); transform: translateY(-2px); }
.ss-game h3 { font-size: 18px; margin: 12px 4px 2px; line-height: 1.25; color: var(--ss-ink); }
.ss-game .sub { font-size: 13px; color: var(--ss-mute); margin: 0 4px; }
.ss-game .figs { display: flex; justify-content: space-between; margin: 10px 4px 2px; font-size: 13px; color: var(--ss-mute); }
.ss-game .figs b { display: block; font-size: 18px; color: var(--ss-ink); }
.ss-game.locked { opacity: .75; }
.ss-game.locked .ss-tile-art::after { content: "\f023  Members"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900;
  position: absolute; inset: auto 10px 10px auto; background: rgba(23,23,36,.8); padding: 4px 10px; border-radius: 99px; font-size: 12px; }

/* top 5 board */
.ss-top { background: var(--ss-night); border-radius: 20px; padding: 24px; color: #fff; }
.ss-top h3 { color: #fff; margin-bottom: 4px; }
.ss-top p.lede { color: #b9b8cc; font-size: 14px; }
.ss-top ol { list-style: none; padding: 0; margin: 12px 0 0; counter-reset: r; }
.ss-top li { counter-increment: r; border-top: 1px solid #2f2f4a; }
.ss-top li a { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; color: #fff; }
.ss-top li a::before { content: counter(r); width: 30px; height: 30px; border-radius: 50%; background: var(--ss-purple);
  display: grid; place-items: center; font-weight: 700; }
.ss-top .g { font-weight: 700; line-height: 1.2; }
.ss-top .m { display: block; font-size: 12px; color: #b9b8cc; font-weight: 400; }
.ss-top .pct { font-size: 22px; font-weight: 700; color: var(--ss-gold); text-align: right; }
.ss-top .pct small { display: block; font-size: 11px; color: #b9b8cc; font-weight: 400; }

/* filters */
.ss-filters { background: #fff; border: 1px solid var(--ss-line); border-radius: 16px; padding: 18px;
  display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 12px; align-items: end; }
.ss-filters label { display: grid; gap: 6px; font-size: 13px; color: var(--ss-mute); margin: 0; }
.ss-filters input, .ss-filters select { height: 46px; border: 1px solid var(--ss-line); border-radius: 10px; padding: 0 12px;
  font: inherit; color: var(--ss-ink); background: var(--ss-paper); width: 100%; min-width: 0; }
.ss-filters input:focus, .ss-filters select:focus { outline: 2px solid var(--ss-purple); outline-offset: 1px; }
@media (max-width: 991px) { .ss-filters { grid-template-columns: 1fr 1fr; } .ss-filters .q { grid-column: 1 / -1; } }
.ss-sort { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0; font-size: 14px; color: var(--ss-mute); }
.ss-sort button { border: 1px solid var(--ss-line); background: #fff; border-radius: 99px; padding: 6px 14px; font: inherit; color: var(--ss-ink); cursor: pointer; }
.ss-sort button[aria-pressed="true"] { background: var(--ss-purple); border-color: var(--ss-purple); color: #fff; }

/* game detail */
.ss-detail { background: #fff; border: 1px solid var(--ss-line); border-radius: 20px; padding: 28px; margin-top: 30px; scroll-margin-top: 110px; }
.ss-detail-head { display: grid; grid-template-columns: 140px 1fr auto; gap: 24px; align-items: center; }
@media (max-width: 767px) { .ss-detail-head { grid-template-columns: 90px 1fr; } .ss-detail-head .close-x { grid-column: 1 / -1; } .ss-detail { padding: 18px; } }
.ss-detail h2 { margin: 0; }
.ss-detail .family a { color: var(--ss-purple); }
.ss-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.ss-chips button { border: 1px solid var(--ss-line); background: var(--ss-paper); border-radius: 99px; padding: 5px 12px;
  font-size: 13px; cursor: pointer; color: var(--ss-ink); }
.ss-chips button[aria-pressed="true"] { background: var(--ss-night); color: #fff; border-color: var(--ss-night); }
.ss-detail h4 { margin: 30px 0 12px; }
.ss-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 991px) { .ss-two { grid-template-columns: 1fr; } }
.ss-chart { position: relative; height: 280px; }

.ss-wins { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ss-win { border: 1px solid var(--ss-line); border-left: 4px solid var(--ss-purple); border-radius: 12px; padding: 12px 14px; background: #fff; }
.ss-win b { display: block; font-size: 24px; line-height: 1.1; color: var(--ss-ink); }
.ss-win .x { color: var(--ss-purple); font-weight: 700; font-size: 14px; }
.ss-win p { font-size: 13px; color: var(--ss-mute); margin: 6px 0 0; line-height: 1.45; }

.ss-table-wrap { overflow-x: auto; border: 1px solid var(--ss-line); border-radius: 12px; }
.ss-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ss-table th, .ss-table td { padding: 10px 12px; border-bottom: 1px solid var(--ss-line); text-align: right; white-space: nowrap; }
.ss-table th:first-child, .ss-table td:first-child { text-align: left; white-space: normal; min-width: 130px; }
.ss-table th { font-size: 12px; color: var(--ss-mute); font-weight: 700; background: var(--ss-paper); cursor: pointer; user-select: none; }
.ss-table tr:last-child td { border-bottom: 0; }
.ss-table td { font-variant-numeric: tabular-nums; color: var(--ss-ink); }
.ss-pos { color: var(--ss-win) !important; } .ss-neg { color: var(--ss-loss) !important; }

.ss-empty { padding: 28px; border: 1px dashed var(--ss-line); border-radius: 14px; text-align: center; color: var(--ss-mute); background: #fff; }
.ss-loading { color: var(--ss-mute); padding: 30px 0; }
.ss-note { font-size: 13px; color: var(--ss-mute); }
.ss-lock { background: linear-gradient(135deg, var(--ss-purple), #3b1f78); color: #fff; border-radius: 20px; padding: 28px; }
.ss-lock h3 { color: #fff; }
.ss-lock .btn { margin-top: 8px; }

/* sign-in card */
.ss-signin { max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid var(--ss-line); border-radius: 20px; padding: 32px; }
.ss-signin label { display: block; font-size: 14px; color: var(--ss-mute); margin: 14px 0 6px; }
.ss-signin input { width: 100%; height: 50px; border: 1px solid var(--ss-line); border-radius: 10px; padding: 0 14px; font: inherit; background: var(--ss-paper); }
.ss-signin .btn { width: 100%; margin-top: 22px; }
.ss-signin .msg { min-height: 22px; margin-top: 12px; font-size: 14px; color: var(--ss-loss); }

.ss-userbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; font-size: 14px; color: var(--ss-mute); }
.ss-userbar a { color: var(--ss-purple); }

.ss-steps { counter-reset: s; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.ss-steps li { counter-increment: s; background: var(--ss-night-2); border-radius: 16px; padding: 20px; color: #d9d8e8; }
.ss-steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ss-purple); color: #fff; font-weight: 700; margin-bottom: 10px; }
.ss-steps li b { display: block; color: #fff; font-size: 17px; margin-bottom: 4px; }

/* home page */
.ss-tagline { font-size: 22px; font-weight: 700; color: #f5b83f; margin-top: 18px; }
.ss-icon svg { width: 60px; height: 60px; display: block; margin: 0 auto; }
.ss-legal { margin-top: 24px; color: #9a99ad; }
.ss-mini { width: 60px; flex: 0 0 60px; }
.ss-mini .ss-tile-art { border-radius: 10px; }
.ss-mini .ss-tile-art .reels { gap: 2px; }
.ss-mini .ss-tile-art .reels b { min-width: 14px; border-radius: 3px; font-size: 11px; }

/* a photo of a casino slot floor that fades in behind the hero */
.ss-hero-bg { position: relative; overflow: hidden; isolation: isolate; }
.ss-hero-bg::before { content: ""; position: absolute; inset: -12px; z-index: -2;
  background: url("../images/slot-row-hero.jpg") center / cover no-repeat; filter: blur(3px) saturate(1.1);
  opacity: 0; animation: ss-fade-in 1.6s ease-out .2s forwards; }
.ss-hero-bg::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(23,23,36,.96) 0%, rgba(23,23,36,.88) 45%, rgba(23,23,36,.55) 100%); }
@keyframes ss-fade-in { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ss-hero-bg::before { animation: none; opacity: .55; } }
.ss-games[data-ss="popular"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .ss-games[data-ss="popular"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ss-games[data-ss="popular"] { grid-template-columns: 1fr; } }

/* Game pictures (images/games/<game-name>.jpg) sit over the reel tile when present */
.ss-tile-art { position: relative; overflow: hidden; }
.ss-game-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-game { position: relative; text-decoration: none; color: inherit; }
.ss-badge { position: absolute; top: 12px; right: 12px; z-index: 2; background: #1f8a5b; color: #fff; font-weight: 700;
  font-size: 13px; padding: 3px 10px; border-radius: 999px; }
.ss-game.locked .ss-tile-art::after { z-index: 1; }

/* ---------- Game breakdowns as cards (no tables) ---------- */
.ss-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 8px; }
.ss-card { background: #fff; border: 1px solid var(--ss-line); border-radius: 16px; padding: 16px 16px 14px;
  box-shadow: 0 6px 18px rgba(20, 16, 40, .05); transition: transform .15s ease, box-shadow .15s ease; }
.ss-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 16, 40, .09); }
.ss-card .ss-extra, .ss-cards .ss-extra { display: none; }
.ss-cards.ss-all .ss-extra { display: block; }
.ss-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ss-ink);
  background: #f2eefb; border-radius: 999px; padding: 5px 14px; margin-bottom: 12px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-pill.coin { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; font-size: 16px; color: #5a3d00;
  background: radial-gradient(circle at 35% 30%, #ffe9a3, #f2c14e 55%, #c9952a); box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), 0 3px 8px rgba(160,110,20,.35); }
.ss-pill.chip { color: #fff; background: #6B39BD; box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); border: 2px dashed rgba(255,255,255,.55); }
.ss-pill.place { background: #eef6f2; color: #1f6b4a; }
.ss-pill.date { background: #f3f4f7; color: var(--ss-ink); font-weight: 600; }
.ss-gauge { position: relative; height: 10px; border-radius: 999px; background: #eceef3; overflow: visible; margin: 2px 0 10px; }
.ss-gauge i { display: block; height: 100%; border-radius: 999px; background: #9aa0ad; }
.ss-gauge.up i { background: linear-gradient(90deg, #39b37c, #1f8a5b); }
.ss-gauge.mid i { background: linear-gradient(90deg, #f6c453, #e09a1f); }
.ss-gauge.down i { background: linear-gradient(90deg, #f08a76, #d2412f); }
.ss-gauge .even { position: absolute; left: 66.67%; top: -4px; bottom: -4px; width: 2px; background: var(--ss-ink); opacity: .55; border-radius: 2px; }
.ss-card-fig { margin: 0; font-size: 14px; color: var(--ss-mute); }
.ss-card-fig b { font-size: 22px; color: var(--ss-ink); margin-right: 4px; }
.ss-card-fig b.up { color: #1f8a5b; } .ss-card-fig b.down { color: #d2412f; } .ss-card-fig b.mid { color: #b9770e; }
.ss-card-sub { margin: 4px 0 0; font-size: 13px; color: var(--ss-mute); line-height: 1.5; }
.ss-bonus .ss-x { display: inline-block; font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 8px;
  background: linear-gradient(135deg, #6B39BD, #d23f8c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ss-showmore { display: block; margin: 6px auto 18px; border: 1px solid var(--ss-line); background: #fff; border-radius: 999px;
  padding: 8px 20px; font-weight: 600; cursor: pointer; }

/* Members-only rows: blurred placeholders with no real data in them */
.ss-locked-wrap { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
  margin: 4px 0 10px; user-select: none; -webkit-user-select: none; }
.ss-ghost { filter: blur(5px) grayscale(1); opacity: .45; pointer-events: none; }
.ss-locked-cta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px; font-weight: 600; color: var(--ss-ink); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.75)); border-radius: 16px; }
.ss-locked-cta a { margin: 0 4px; text-decoration: underline; }
@media print { .ss-locked-wrap, .ss-ghost { display: none !important; } }

/* Month by month: a strip of reel-style columns */
.ss-months { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x mandatory; }
.ss-month { flex: 0 0 76px; scroll-snap-align: start; text-align: center; background: #fff; border: 1px solid var(--ss-line);
  border-radius: 16px; padding: 10px 8px; }
.ss-month .pct { display: block; font-weight: 800; font-size: 15px; color: var(--ss-ink); }
.ss-month.up .pct { color: #1f8a5b; } .ss-month.down .pct { color: #d2412f; } .ss-month.mid .pct { color: #b9770e; }
.ss-month .col { position: relative; height: 120px; margin: 8px auto; width: 34px; border-radius: 10px; background: #f0f1f5; overflow: hidden; }
.ss-month .col i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 10px; background: #9aa0ad; }
.ss-month.up .col i { background: linear-gradient(0deg, #1f8a5b, #39b37c); }
.ss-month.mid .col i { background: linear-gradient(0deg, #e09a1f, #f6c453); }
.ss-month.down .col i { background: linear-gradient(0deg, #d2412f, #f08a76); }
.ss-month .col .even { position: absolute; left: -2px; right: -2px; height: 0; border-top: 2px dashed rgba(20,16,40,.55); }
.ss-month .m { display: block; font-weight: 700; font-size: 13px; color: var(--ss-ink); }
.ss-month .n { display: block; font-size: 11px; color: var(--ss-mute); }
.ss-locked-cta .fa-lock { margin-right: 8px; }
.ss-ghost { opacity: .6; }

.ss-win.ss-jp { border-left-color: #e0a21f; }
.ss-jp-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #5a3d00; background: linear-gradient(135deg, #ffe9a3, #f2c14e); border-radius: 999px; padding: 3px 10px; margin-bottom: 6px; }

/* Demo page hero: shorter, with the slot floor showing through */
.ss-hero-demo { padding-top: 56px; padding-bottom: 56px; }
.ss-hero-demo::before { filter: blur(1.5px) saturate(1.2); }
.ss-hero-demo.ss-hero-bg::before { animation-name: ss-fade-in-demo; }
@keyframes ss-fade-in-demo { to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .ss-hero-demo.ss-hero-bg::before { opacity: .9; } }
.ss-hero-demo::after { background: linear-gradient(90deg, rgba(23,23,36,.88) 0%, rgba(23,23,36,.62) 50%, rgba(23,23,36,.25) 100%); }
.ss-hero-demo h1 { font-size: clamp(34px, 4vw, 52px); }
.ss-steps.ss-glass { grid-template-columns: 1fr; gap: 10px; margin: 0; }
.ss-glass li { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: start; padding: 14px 16px;
  font-size: 14px; line-height: 1.45; color: #eceaf6; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.ss-glass li::before { grid-row: span 2; margin: 2px 0 0; }
.ss-glass li b { font-size: 16px; margin: 0 0 2px; }

/* Members-only headline tiles, months and Top 5 rows (placeholders only, nothing real on the page) */
.ss-meter-locked { position: relative; display: block; opacity: .55; user-select: none; -webkit-user-select: none; text-decoration: none; }
.ss-meter-locked strong { filter: blur(7px); color: #8d8ca3 !important; }
.ss-meter-locked .fa-lock { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #b9b8cc; }
.ss-meter-locked:hover { opacity: .8; }
.ss-months-locked { position: relative; display: flex; gap: 10px; user-select: none; -webkit-user-select: none; }
.ss-ghost-month { filter: blur(4px) grayscale(1); opacity: .5; pointer-events: none; }
.ss-months-locked .ss-locked-cta { position: absolute; inset: 0; min-width: 260px; font-size: 14px; line-height: 1.5; }
.ss-top-ghost { filter: blur(5px); opacity: .45; pointer-events: none; user-select: none; -webkit-user-select: none; }
.ss-top-cta { margin: 14px 0 0; font-size: 14px; color: #d9d8e8; }
.ss-top-cta a { color: var(--ss-gold); text-decoration: underline; }
@media print { .ss-meter-locked, .ss-months-locked, .ss-top-ghost { display: none !important; } }

/* Sign-up page */
.ss-plan-perks { list-style: none; padding: 0; margin: 18px auto 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ss-plan-perks li { background: #f2eefb; color: var(--ss-ink); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; }
.ss-plan-perks li::before { content: "\2713  "; color: var(--ss-purple); font-weight: 800; }
.ss-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 991px) { .ss-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ss-plans { grid-template-columns: 1fr; } }
.ss-plan { position: relative; display: flex; flex-direction: column; text-align: center; background: #fff; border: 1px solid var(--ss-line);
  border-radius: 20px; padding: 30px 22px 24px; box-shadow: 0 8px 24px rgba(20,16,40,.06); }
.ss-plan.featured { border: 2px solid var(--ss-purple); box-shadow: 0 14px 34px rgba(107,57,189,.22); transform: translateY(-6px); }
.ss-plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--ss-purple); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.ss-plan h3 { font-size: 20px; margin: 0 0 10px; }
.ss-plan-price { margin: 0; } .ss-plan-price b { font-size: 40px; color: var(--ss-ink); line-height: 1; } .ss-plan-price span { color: var(--ss-mute); font-size: 13px; }
.ss-plan-per { margin: 6px 0 0; color: var(--ss-mute); font-size: 14px; }
.ss-plan-save { margin: 10px 0 20px; color: #1f8a5b; font-weight: 700; font-size: 14px; }
.ss-plan-btn { margin-top: auto; }
.ss-plan-soon { margin: 12px 0 0; font-size: 13px; color: var(--ss-mute); }
.ss-paid { background: #eef8f2; border: 1px solid #bfe5cf; border-radius: 16px; padding: 18px 22px; margin-bottom: 26px; }

.ss-age { display: flex; gap: 10px; align-items: flex-start; justify-content: center; max-width: 640px; margin: 0 auto 34px;
  font-size: 15px; color: var(--ss-ink); cursor: pointer; }
.ss-age input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ss-purple); flex: 0 0 auto; }
.ss-plan-btn.disabled { opacity: .6; pointer-events: none; }

/* Signed-in header: one "My account" button with a small menu */
.ss-acct { position: relative; display: inline-block; }
.ss-acct-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.ss-acct-caret { font-size: 11px; transition: transform .15s ease; }
.ss-acct-btn[aria-expanded="true"] .ss-acct-caret { transform: rotate(180deg); }
.ss-acct-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 1000; min-width: 230px; background: #fff;
  border: 1px solid var(--ss-line); border-radius: 16px; padding: 8px; box-shadow: 0 18px 40px rgba(20,16,40,.16); text-align: left; }
.ss-acct-menu[hidden] { display: none; }
.ss-acct-who { margin: 4px 10px 8px; font-size: 12px; color: var(--ss-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-acct-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ss-ink);
  font-size: 15px; font-weight: 600; text-decoration: none; }
.ss-acct-menu a:hover, .ss-acct-menu a:focus { background: #f2eefb; color: var(--ss-purple); }
.ss-acct-menu a i { width: 16px; text-align: center; color: var(--ss-purple); }
.ss-acct-menu a[hidden] { display: none; }
/* keep the menu items on one line on desktop */
@media (min-width: 1200px) { .rd-navbar-static .rd-nav-link { white-space: nowrap; } }

/* Home page: a shorter hero, the floating slot art kept but smaller */
.ss-hero-home { padding-top: 70px; padding-bottom: 100px; }
.ss-hero-home h1 { font-size: clamp(34px, 4.2vw, 56px); }
.ss-hero-home .image-parallax { zoom: .72; }
@media (max-width: 767px) { .ss-hero-home .image-parallax { display: none; } .ss-hero-home { padding-top: 40px; padding-bottom: 50px; } }
/* Heating up: four tiles in a row */
.ss-games[data-ss="rising"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .ss-games[data-ss="rising"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ss-games[data-ss="rising"] { grid-template-columns: 1fr 1fr; } }

/* Footer: weekly email sign-up */
.ss-footer-note { margin: -6px 0 14px; font-size: 14px; color: var(--ss-mute); }
.ss-footer-msg { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; color: var(--ss-mute); }
.ss-footer-msg.good { color: #1f8a5b; font-weight: 600; }
.ss-footer-msg.bad { color: #d2412f; }

/* Contact page */
.ss-contact-form { width: 100%; min-height: 820px; border: 0; }
.ss-contact-list { list-style: none; padding: 0; margin: 18px 0 0; }
.ss-contact-list li { padding: 10px 0; border-top: 1px solid var(--ss-line); }

/* Sign-up acknowledgment */
.ss-ack { max-width: 860px; margin: 0 auto 34px; background: #fff; border: 1px solid var(--ss-line); border-radius: 18px;
  padding: 22px 26px; box-shadow: 0 8px 24px rgba(20,16,40,.05); }
.ss-ack h2 { margin: 0 0 12px; }
.ss-ack ul { margin: 0 0 16px; padding-left: 20px; }
.ss-ack li { margin: 6px 0; color: var(--ss-ink); font-size: 15px; line-height: 1.5; }
.ss-ack .ss-age { justify-content: flex-start; max-width: none; margin: 0; padding-top: 14px; border-top: 1px solid var(--ss-line); font-weight: 600; }
.ss-ack.ss-ack-flag { border-color: #d2412f; box-shadow: 0 0 0 3px rgba(210,65,47,.15); }
/* Privacy Policy & Disclaimers page */
.ss-legal-page { max-width: 920px; }
.ss-legal-date { color: var(--ss-mute); margin-top: -6px; }
.ss-legal-promise { background: #f2eefb; border-radius: 18px; padding: 22px 26px; margin: 24px 0 34px; }
.ss-legal-promise ul { margin: 10px 0 0; padding-left: 20px; }
.ss-legal-promise li { margin: 6px 0; }
.ss-legal-page dd ul { padding-left: 20px; margin: 8px 0; }
.ss-legal-page dd li { margin: 4px 0; }
.ss-help-line { background: #eef8f2; border-radius: 12px; padding: 12px 16px; }
.ss-legal-note { color: var(--ss-mute); font-size: 14px; margin-top: 30px; }
.ss-ack ul, .ss-legal-promise ul, .ss-legal-page dd ul { list-style: disc; }
.ss-ack li::marker, .ss-legal-promise li::marker, .ss-legal-page dd li::marker { color: var(--ss-purple); }
.ss-legal-page dd, .ss-legal-page dd p, .ss-legal-page dd li, .ss-legal-promise li { color: #3d3d4a; }
.ss-legal-page dd b, .ss-legal-promise b { color: var(--ss-ink); }
.ss-ack li, .ss-legal-promise li, .ss-legal-page dd li { display: list-item; list-style: disc outside; }
.ss-ack ul, .ss-legal-promise ul, .ss-legal-page dd ul { padding-left: 22px !important; }

/* About page: compact banner, same style as the demo page */
.ss-hero-about { padding-top: 56px; padding-bottom: 56px; }
.ss-hero-about h1 { font-size: clamp(32px, 3.8vw, 48px); margin-bottom: 14px; }
.ss-hero-about p { font-size: 18px; color: #eceaf6; max-width: 640px; }
.ss-about-art { max-width: 260px; height: auto; }
.ss-about-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ss-about-list li { padding: 12px 16px; border-left: 4px solid #6B39BD; background: #f6f5fa; border-radius: 0 10px 10px 0; }
@media (max-width: 767px) { .ss-hero-about { padding-top: 36px; padding-bottom: 36px; } }

/* Member search: start view, slim list rows, paging */
.ss-search-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 14px; }
.ss-search-head h1 { margin: 0; }
.ss-search-head .ss-userbar { margin: 0; flex: 1 1 auto; justify-content: flex-end; gap: 4px 16px; font-size: 13px; }
.ss-start-title { margin: 28px 0 4px; }
.ss-start .row .ss-start-title { margin-top: 0; }
.ss-start-sub { font-size: 14px; color: var(--ss-mute); margin: 0 0 14px; }
.ss-games.ss-rising { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ss-games.ss-rising .ss-game h3 { font-size: 15px; }
@media (max-width: 991px) { .ss-games.ss-rising { grid-template-columns: repeat(2, 1fr); } }
.ss-start-all { text-align: center; margin: 22px 0 6px; }
.ss-list { display: grid; gap: 8px; margin-top: 12px; }
.ss-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) 90px 90px 90px 18px; gap: 14px; align-items: center; width: 100%;
  padding: 8px 14px 8px 8px; background: #fff; border: 1px solid var(--ss-line); border-radius: 14px; text-align: left; font: inherit; color: var(--ss-ink);
  cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ss-row:hover, .ss-row:focus-visible { border-color: var(--ss-purple); box-shadow: 0 6px 18px rgba(107,57,189,.12); outline: none; }
.ss-row .ss-mini { width: 60px; }
.ss-row .ss-mini .maker { display: none; }
.ss-row-name { min-width: 0; }
.ss-row-name b { display: block; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-row-name small, .ss-row-fig small { display: block; font-size: 12px; color: var(--ss-mute); }
.ss-row-fig { text-align: right; }
.ss-row-fig b { font-size: 16px; }
.ss-row-fig b.up { color: #1f8a5b; } .ss-row-fig b.down { color: #d2412f; }
.ss-row-go { color: var(--ss-mute); font-size: 13px; }
@media (max-width: 767px) {
  .ss-row { grid-template-columns: 52px minmax(0, 1fr) 70px 70px; gap: 10px; }
  .ss-row .ss-mini { width: 52px; }
  .ss-row-bon, .ss-row-go { display: none; }
}
.ss-view { display: inline-flex; gap: 6px; margin-left: auto; }
.ss-clear { border-color: transparent !important; color: var(--ss-purple) !important; background: transparent !important; }
.ss-showing { font-size: 14px; color: var(--ss-mute); margin: -6px 0 0; }
.ss-pager { margin-top: 14px; }
.ss-browse .ss-games { margin-top: 12px; }
.ss-start { margin-top: 24px; }
@media (max-width: 767px) { .ss-row-name b { white-space: normal; font-size: 15px; } .ss-view { margin-left: 0; } }

/* FAQ: questions open and close */
.ss-faq > * { max-width: 860px; }
.ss-faq-lede { color: var(--ss-mute); margin-bottom: 8px; }
.ss-faq-group { margin: 34px 0 12px; color: var(--ss-purple); }
.ss-faq details { border: 1px solid var(--ss-line); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.ss-faq summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 700; color: var(--ss-ink); position: relative; }
.ss-faq summary::-webkit-details-marker { display: none; }
.ss-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ss-purple); font-weight: 400; }
.ss-faq details[open] summary::after { content: "\2212"; }
.ss-faq details[open] { border-color: var(--ss-purple); }
.ss-faq details p { padding: 0 18px; margin: 0 0 14px; color: var(--ss-ink); line-height: 1.6; }
.ss-faq summary:focus-visible { outline: 2px solid var(--ss-purple); outline-offset: 2px; border-radius: 12px; }

/* Plans & pricing: free vs member */
.ss-compare { max-width: 820px; margin: 0 auto 34px; }
.ss-compare h2 { margin-bottom: 14px; }
.ss-compare-table { border: 1px solid var(--ss-line); border-radius: 16px; overflow: hidden; background: #fff; }
.ss-cmp-row { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--ss-line); font-size: 14px; align-items: center; }
.ss-cmp-row:first-child { border-top: 0; }
.ss-cmp-row > span:first-child { font-weight: 600; color: var(--ss-ink); }
.ss-cmp-row > span:nth-child(2) { color: var(--ss-mute); }
.ss-compare-table .ss-cmp-row > span:nth-child(3) { background: #f2eefb; margin: -12px -18px -12px 0; padding: 12px 18px; align-self: stretch; display: block; color: var(--ss-ink); }
.ss-compare-table .ss-cmp-row > span:nth-child(3) b { color: var(--ss-purple); }
.ss-cmp-head { background: #f6f5fa; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.ss-compare-table .ss-cmp-head > span:nth-child(3) { background: var(--ss-purple); color: #fff; }
.ss-cmp-row .fa-check { color: #1f8a5b; } .ss-cmp-row .fa-xmark { color: #b3b3bf; }
@media (max-width: 575px) { .ss-cmp-row { grid-template-columns: 1fr 1fr; } .ss-cmp-row > span:first-child { grid-column: 1 / -1; } .ss-compare-table .ss-cmp-row > span:nth-child(3) { margin: 0; border-radius: 8px; padding: 6px 10px; } .ss-cmp-head > span:first-child { display: none; } }

/* Banners: one faded-photo look on every page, lined up with the logo and the page content */
.ss-hero-bg { width: calc(100% - 40px); max-width: 1280px; margin: 20px auto 0; border-radius: 22px; }
.ss-hero-bg > .container { max-width: none; padding-left: clamp(20px, 4vw, 52px); padding-right: clamp(20px, 4vw, 52px); }
.ss-hero-bg::before { filter: blur(1.5px) saturate(1.2); animation-name: ss-fade-in-demo; }
.ss-hero-bg::after { background: linear-gradient(90deg, rgba(23,23,36,.88) 0%, rgba(23,23,36,.62) 50%, rgba(23,23,36,.25) 100%); }
@media (prefers-reduced-motion: reduce) { .ss-hero-bg::before { opacity: .9; } }
.ss-hero-page { padding-top: 38px; padding-bottom: 38px; }
.ss-hero-page h1 { font-size: clamp(30px, 3.4vw, 44px); margin: 0; color: #fff; }
.ss-hero-page p { margin: 10px 0 0; color: #eceaf6; font-size: 17px; max-width: 760px; }
.ss-hero-page a { color: #fff; text-decoration: underline; }
.ss-hero-page .ss-userbar { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-start; font-size: 14px; color: #d9d7ea; margin: 10px 0 0; max-width: none; }
.ss-hero-page .ss-userbar b { color: #fff; }
.ss-hero-page + .section { padding-top: 40px; }
@media (max-width: 575px) { .ss-hero-bg { width: calc(100% - 24px); border-radius: 16px; margin-top: 12px; } .ss-hero-page { padding-top: 28px; padding-bottom: 28px; } }

/* The app: "Get the app" bar on phones */
.ss-appbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1000; display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px; background: #171724; color: #fff; border-radius: 16px; box-shadow: 0 12px 34px rgba(0,0,0,.35);
  animation: ss-appbar-in .35s ease-out; max-width: 560px; margin: 0 auto; }
@keyframes ss-appbar-in { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ss-appbar { animation: none; } }
.ss-appbar img { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 44px; }
.ss-appbar-txt { flex: 1 1 auto; font-size: 13px; line-height: 1.35; color: #d9d7ea; }
.ss-appbar-txt b { display: block; color: #fff; font-size: 15px; }
.ss-appbar-txt span b { display: inline; font-size: 13px; }
.ss-appbar-go { border: 0; border-radius: 999px; padding: 9px 18px; background: #6B39BD; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ss-appbar-x { border: 0; background: transparent; color: #b9b8cc; font-size: 26px; line-height: 1; padding: 4px 8px; cursor: pointer; }
/* Inside the installed app: a little room at the bottom for the phone's home bar */
.ss-in-app body { padding-bottom: env(safe-area-inset-bottom); }