/* 3STAR88 - .s3-* operator game floor.
   Cold, flat, one accent. 4px radii, 1px hairlines, no gradients outside the hero scrim and the
   wheel. Spacing runs on a 6px step (6/12/18/24/36/48), which is deliberately not the 8px step
   most shells use. The floor is ONE centred column at every width.

   House style for this sheet:
     - every repeated radius and type size is a token in :root (--tk-rad*, --tk-fs*); a rule
       names the token, never the number, so a shape change is one edit;
     - box properties are written one edge at a time (padding-block / padding-inline,
       margin-block / margin-inline, border-*-width / -style / -color), so a modifier can reset
       a single edge without restating the other three and without a shorthand quietly wiping a
       value set above it;
     - flow offsets use the logical names (inset-block-start, inset-inline-start) so the chrome
       reads the same way the text does;
     - gap is always row-gap plus column-gap, because several blocks wrap and the two axes stop
       being equal once they do.

   Static stylesheet: the build does NOT regenerate it. */

:root {
  --pg: #0c1113;
  --pn: #161a20;
  --ch: #1c2025;
  --hl: #2a313b;
  --ac: #00aeef;
  --ad: #0784b4;
  --ink: #fff;
  --mut: #8c98a6;
  --ok: #37d67a;
  --w: 1180px;
  --bar: 56px;
  --s1: 6px;
  --s2: 12px;
  --s3: 18px;
  --s4: 24px;
  --s5: 36px;
  --s6: 48px;

  /* token layer */
  --tk-rad1: 2px;
  --tk-rad2: 3px;
  --tk-rad3: 4px;
  --tk-fs1: 9px;
  --tk-fs2: 10px;
  --tk-fs3: 11px;
  --tk-fs4: 12px;
  --tk-fs5: 13px;
  --tk-fs6: 14px;
  --tk-fs7: 15px;
  --tk-fs8: 16px;
  --tk-fs9: 17px;
  --tk-fs10: 19px;
  --tk-fs11: 21px;
}

* {box-sizing: border-box;}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin-block: 0;
  margin-inline: 0;
  background: var(--pg);
  color: var(--ink);
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 15px;
  line-height: 1.65;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  padding-block-end: calc(var(--bar) + 54px);
}

img {
  display: block;
  max-width: 100%;
  min-width: 0;
  height: auto;
}

a {color: inherit; text-decoration: none;}

h1, h2, h3, h4 {
  margin-block: 0;
  margin-inline: 0;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.w {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.s3-off {display: none !important;}

/* ---------------------------------------------------------------- buttons */
.s3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--s1);
  column-gap: var(--s1);
  min-height: 38px;
  padding-block: 0;
  padding-inline: var(--s3);
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: var(--tk-rad3);
  font-size: var(--tk-fs5);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition-property: background, border-color;
  transition-duration: .15s, .15s;
  transition-timing-function: linear, linear;
  transition-delay: 0s, 0s;
}

.s3-btn.p {background: var(--ac); color: #04181f;}
.s3-btn.p:hover {background: #2bc0f5;}
.s3-btn.q {background: #39414d; color: var(--ink);}
.s3-btn.q:hover {background: #46505e;}
.s3-btn.o {border-color: var(--hl); color: var(--ink); background: none;}
.s3-btn.o:hover {border-color: var(--ac); color: var(--ac);}
.s3-btn.g {background: none; border-color: var(--ac); color: var(--ac);}
.s3-btn.lg {min-height: 46px; padding-block: 0; padding-inline: var(--s4); font-size: var(--tk-fs6);}
.s3-btn.w {width: 100%;}

/* ---------------------------------------------------------------- header */
.s3-head {position: relative; z-index: 40;}

.s3-top {background: var(--pg); border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--hl);}

.s3-top .w {
  display: flex;
  align-items: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  min-height: 62px;
}

.s3-logo {flex: 0 0 auto; min-width: 0;}
.s3-logo svg {width: 92px; height: 40px; display: block;}

.s3-burger {
  display: none;
  width: 44px;
  height: 44px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  background: none;
  color: var(--ink);
  font-size: var(--tk-fs9);
  cursor: pointer;
}

.s3-auth {
  margin-inline-start: auto;
  display: flex;
  row-gap: var(--s2);
  column-gap: var(--s2);
  min-width: 0;
}

.s3-chrome {background: var(--ch); border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--hl);}

.s3-chrome .w {
  display: flex;
  align-items: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  min-height: 44px;
}

.s3-verts {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s4);
  column-gap: var(--s4);
  min-width: 0;
}

.s3-verts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--tk-fs4);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #c3ccd6;
  padding-block: var(--s2);
  padding-inline: 0;
  border-block-end-width: 2px;
  border-block-end-style: solid;
  border-block-end-color: transparent;
}

.s3-verts a:hover {color: var(--ac); border-block-end-color: var(--ac);}

.s3-meta {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  font-size: var(--tk-fs3);
  color: var(--mut);
  min-width: 0;
}

.clk {font-variant-numeric: tabular-nums; white-space: nowrap;}

.s3-lang {display: flex; row-gap: 2px; column-gap: 2px;}

.s3-lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 3px;
  padding-inline: 9px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad2);
  font-size: var(--tk-fs3);
  color: var(--mut);
}

.s3-lang a.on {background: var(--ac); border-color: var(--ac); color: #04181f;}

.s3-tick {
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--pn);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--hl);
  padding-block: var(--s1);
  padding-inline: 0;
}

.s3-tick span {
  display: inline-block;
  padding-inline-start: 100%;
  white-space: nowrap;
  font-size: var(--tk-fs4);
  color: #a7b2bd;
  animation: m8scroll 46s linear infinite;
}

@keyframes m8scroll { to {transform: translateX(-100%);} }

/* ---------------------------------------------------------------- hero */
.s3-hero {position: relative; margin-block-end: var(--s5);}

.s3-hero > img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.s3-hero .ov {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(8,12,14,.94) 0%, rgba(8,12,14,.72) 46%, rgba(8,12,14,0) 78%);
}

.s3-hero .eb {
  display: inline-block;
  margin-block-end: var(--s2);
  padding-block: 5px;
  padding-inline: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--ac);
  border-radius: var(--tk-rad2);
  font-size: var(--tk-fs4);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac);
}

.s3-hero strong {
  display: block;
  max-width: 18ch;
  font-size: clamp(25px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.s3-hero .nums {
  display: flex;
  row-gap: var(--s5);
  column-gap: var(--s5);
  margin-block: var(--s4);
  margin-inline: 0;
}

.s3-hero .nums b {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--ac);
}

/* The hero carries the page's main offer, so its button is sized to the headline rather than
   to the sitewide .lg step. Scoped to .s3-hero: every other .lg button is unchanged. */
.s3-hero .s3-btn {
  min-height: 56px;
  padding-block: 0;
  padding-inline: var(--s5);
  font-size: var(--tk-fs8);
  letter-spacing: 0.04em;
}

.s3-hero .nums small {
  font-size: var(--tk-fs4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
}

/* ---------------------------------------------------------------- floor */
.s3-floor {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--s3);
  display: flex;
  flex-direction: column;
  row-gap: var(--s6);
  column-gap: var(--s6);
}

.s3-sh {
  display: flex;
  align-items: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  margin-block-end: var(--s3);
  padding-block-end: var(--s2);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--hl);
}

.s3-sh h2 {font-size: var(--tk-fs9); letter-spacing: 0;}

.s3-sh > a {
  margin-inline-start: auto;
  font-size: var(--tk-fs4);
  color: var(--ac);
  white-space: nowrap;
}

/* --- recommended, vertical tabs --- */
.s3-tabs {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s1);
  column-gap: var(--s1);
  margin-inline-start: auto;
}

.s3-tabs button {
  padding-block: 5px;
  padding-inline: 11px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad2);
  background: none;
  color: var(--mut);
  font-size: var(--tk-fs4);
  font-family: inherit;
  cursor: pointer;
}

.s3-tabs button.on {background: var(--ac); border-color: var(--ac); color: #04181f; font-weight: 700;}

.s3-rec .bd {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  row-gap: var(--s4);
  column-gap: var(--s4);
  align-items: start;
}

.s3-feat {
  position: relative;
  display: block;
  min-width: 0;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  overflow-x: hidden;
  overflow-y: hidden;
}

.s3-feat img {width: 100%; aspect-ratio: 3 / 4; object-fit: cover;}

.s3-feat .ov {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  padding-block-start: var(--s4);
  padding-inline-end: var(--s3);
  padding-block-end: var(--s3);
  padding-inline-start: var(--s3);
  background: linear-gradient(0deg, rgba(8,12,14,.95), rgba(8,12,14,0));
}

.s3-feat .ov b {display: block; font-size: var(--tk-fs7);}
.s3-feat .ov small {font-size: var(--tk-fs3); color: var(--mut);}

.s3-rec .panes {min-width: 0;}

.s3-rec .pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
}

.s3-rec .sq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: var(--s1);
  column-gap: var(--s1);
  min-width: 0;
  min-height: 106px;
  padding-block: var(--s2);
  padding-inline: var(--s2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  background: var(--pn);
  text-align: center;
}

.s3-rec .sq:hover {border-color: var(--ac);}

.s3-rec .sq .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 38px;
  padding-block: 4px;
  padding-inline: 8px;
  border-radius: var(--tk-rad2);
  background: #fff;
}

.s3-rec .sq .ic img {max-height: 28px; width: auto; min-width: 0; object-fit: contain;}
.s3-rec .sq .ic.t {font-size: var(--tk-fs7); font-weight: 800; color: var(--ac);}
.s3-rec .sq > span:last-child {font-size: var(--tk-fs3); color: var(--mut);}

.s3-rec .dots {display: flex; justify-content: center; row-gap: var(--s1); column-gap: var(--s1); margin-block-start: var(--s3);}
.s3-rec .dots i {width: 6px; height: 6px; border-radius: 50%; background: var(--hl);}
.s3-rec .dots i.on {width: 20px; border-radius: var(--tk-rad2); background: var(--ac);}

/* --- game cards --- */
.s3-picks .gr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
}

.s3-game {display: block; min-width: 0;}

.s3-game .th {
  position: relative;
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  overflow-x: hidden;
  overflow-y: hidden;
}

.s3-game .th img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover;}
.s3-game:hover .th {border-color: var(--ac);}

.s3-tag {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-start: 5px;
  padding-block: 2px;
  padding-inline: 6px;
  border-radius: var(--tk-rad1);
  font-size: var(--tk-fs1);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #04181f;
  background: var(--ac);
}

.s3-tag.new {background: var(--ok);}

.s3-game b {display: block; margin-block-start: var(--s1); font-size: var(--tk-fs4); font-weight: 600;}

.s3-game small {
  display: flex;
  justify-content: space-between;
  row-gap: var(--s1);
  column-gap: var(--s1);
  font-size: var(--tk-fs2);
  color: var(--mut);
}

.s3-game small i {font-style: normal; color: var(--ad);}

/* --- live dealer rail --- */
.s3-live .rail {
  display: flex;
  row-gap: var(--s2);
  column-gap: var(--s2);
  overflow-x: auto;
  padding-block-end: var(--s2);
  scroll-snap-type: x mandatory;
}

.s3-live .it {flex: 0 0 212px; min-width: 0; scroll-snap-align: start;}

.s3-live .im {
  position: relative;
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  overflow-x: hidden;
  overflow-y: hidden;
}

.s3-live .im img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 32%;}

.s3-live .pl {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  margin-block: auto;
  margin-inline: auto;
  width: 38px;
  height: 38px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255,255,255,.85);
  border-radius: 50%;
  opacity: 0;
  transition-property: opacity;
  transition-duration: .15s;
  transition-timing-function: linear;
  transition-delay: 0s;
}

.s3-live .pl::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  margin-block: auto;
  margin-inline: auto;
  width: 0;
  height: 0;
  border-inline-start-width: 11px;
  border-inline-start-style: solid;
  border-inline-start-color: #fff;
  border-block-start-width: 7px;
  border-block-start-style: solid;
  border-block-start-color: transparent;
  border-block-end-width: 7px;
  border-block-end-style: solid;
  border-block-end-color: transparent;
  transform: translateX(2px);
}

.s3-live .it:hover .pl {opacity: 1;}

.s3-live .nm {
  display: flex;
  align-items: center;
  row-gap: var(--s1);
  column-gap: var(--s1);
  margin-block-start: var(--s1);
  font-size: var(--tk-fs4);
  font-weight: 600;
}

.s3-live .nm em {
  padding-block: 1px;
  padding-inline: 5px;
  border-radius: var(--tk-rad1);
  font-size: var(--tk-fs1);
  font-style: normal;
  font-weight: 800;
  color: #04181f;
  background: var(--ac);
}

.s3-live .nm em.new {background: var(--ok);}
.s3-live small {font-size: var(--tk-fs2); color: var(--mut);}

/* --- jackpot --- */
.s3-jp {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--s1);
  column-gap: var(--s1);
  padding-block: var(--s5);
  padding-inline: var(--s3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  background: radial-gradient(ellipse at 50% 0%, rgba(0,174,239,.14), transparent 68%), var(--pn);
  text-align: center;
}

.s3-jp .k {
  font-size: var(--tk-fs3);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac);
}

.s3-jp b {
  font-size: clamp(30px, 6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.s3-jp b i {font-style: normal;}
.s3-jp .s {font-size: var(--tk-fs4); color: var(--mut);}
.s3-jp .s3-btn {margin-block-start: var(--s3);}

/* --- paired boards --- */
.s3-boards .bd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s4);
  column-gap: var(--s4);
}

.s3-board {
  min-width: 0;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  background: var(--pn);
  overflow-x: hidden;
  overflow-y: hidden;
}

.s3-board .h {
  display: flex;
  align-items: center;
  row-gap: var(--s2);
  column-gap: var(--s2);
  padding-block: var(--s2);
  padding-inline: var(--s3);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--hl);
  background: var(--ch);
  font-size: var(--tk-fs4);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.s3-board .live {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  row-gap: 4px;
  column-gap: 4px;
  font-size: var(--tk-fs2);
  color: var(--ok);
}

.s3-board .live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation: m8pulse 1.7s ease-in-out infinite;
}

@keyframes m8pulse { 50% {opacity: .25;} }

.s3-board table {width: 100%; border-collapse: collapse; font-size: var(--tk-fs4);}
.s3-board td {padding-block: var(--s1); padding-inline: var(--s3); border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: rgba(42,49,59,.6);}
.s3-board td.a {text-align: right; font-variant-numeric: tabular-nums; color: var(--ac);}
.s3-board.wd td.a {color: var(--ok);}
.s3-board td.p {text-align: right; width: 34%; color: var(--mut);}

/* --- app block --- */
.s3-app .bd {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  row-gap: var(--s5);
  column-gap: var(--s5);
  align-items: center;
  justify-items: center;
  padding-block: var(--s5);
  padding-inline: var(--s3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  background: var(--pn);
}

.s3-app .qr {display: block; text-align: center; min-width: 0; color: inherit;}

.s3-app .qr img {
  display: block;
  width: 104px;
  height: 104px;
  margin-block-start: 0;
  margin-inline-end: auto;
  margin-block-end: var(--s2);
  margin-inline-start: auto;
  padding-block: 5px;
  padding-inline: 5px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--ac);
  border-radius: var(--tk-rad3);
  background: #fff;
}

.s3-app .qr b {display: block; font-size: var(--tk-fs5);}
.s3-app .qr small {font-size: var(--tk-fs3); color: var(--mut);}

.s3-app .ph {
  min-width: 0;
  width: 182px;
  padding-block: 9px;
  padding-inline: 7px;
  border-width: 2px;
  border-style: solid;
  border-color: #39414d;
  border-radius: 22px;
  background: #05090b;
}

.s3-app .ph img {width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px;}

.s3-app .fts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
  margin-block-start: var(--s4);
}

.s3-app .ft {
  min-width: 0;
  padding-block: var(--s3);
  padding-inline: var(--s3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  text-align: center;
}

.s3-app .ft .i {display: block; font-size: var(--tk-fs11); margin-block-end: var(--s1);}
.s3-app .ft b {display: block; font-size: var(--tk-fs5);}
.s3-app .ft small {font-size: var(--tk-fs3); color: var(--mut);}

/* --- provider wall --- */
.s3-wall .gr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
}

.s3-prov {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 62px;
  padding-block: var(--s2);
  padding-inline: var(--s2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  background: var(--pn);
}

.s3-prov:hover .lg {box-shadow: 0 0 0 2px var(--ac);}

.s3-prov:hover {border-color: var(--ac);}

/* ONE treatment for every mark: a white chip, the logo in its own colour, no silhouetting.
   Three treatments at once (lifted / bare / solid badge) read as three different walls. */
.s3-prov .lg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding-block: 6px;
  padding-inline: 10px;
  border-radius: var(--tk-rad2);
  background: #fff;
}

.s3-prov .lg img {max-height: 26px; width: auto; min-width: 0; object-fit: contain;}
.s3-prov .lg.t {font-size: var(--tk-fs4); color: var(--mut);}

/* --- testimonials --- */
.s3-testi .gr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
}

.s3-testi .bx {
  margin-block: 0;
  margin-inline: 0;
  min-width: 0;
  padding-block: var(--s3);
  padding-inline: var(--s3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  background: var(--pn);
}

.s3-testi .av {font-size: var(--tk-fs11);}
.s3-testi figcaption b {display: block; font-size: var(--tk-fs5);}
.s3-testi figcaption small {font-size: var(--tk-fs3); color: var(--mut);}
.s3-testi .st {display: block; margin-block: var(--s1); margin-inline: 0; font-size: var(--tk-fs3); color: var(--ac); letter-spacing: 1px;}
.s3-testi blockquote {margin-block: 0; margin-inline: 0; font-size: var(--tk-fs4); line-height: 1.6; color: #c3ccd6;}

/* ---------------------------------------------------------------- article */
.s3-content {
  width: 100%;
  max-width: 900px;
  margin-block-start: var(--s6);
  margin-inline-end: auto;
  margin-block-end: 0;
  margin-inline-start: auto;
  padding-inline: var(--s3);
}

.s3-content h1 {
  font-size: clamp(23px, 3.4vw, 34px);
  font-weight: 800;
  margin-block-end: var(--s3);
}

.s3-content .lead {font-size: var(--tk-fs8); line-height: 1.7; color: #c3ccd6;}

.s3-content h2 {
  margin-block-start: var(--s6);
  margin-inline-end: 0;
  margin-block-end: var(--s2);
  margin-inline-start: 0;
  padding-inline-start: var(--s2);
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--ac);
  font-size: var(--tk-fs10);
}

.s3-content h3 {margin-block-start: var(--s4); margin-inline-end: 0; margin-block-end: var(--s1); margin-inline-start: 0; font-size: var(--tk-fs7);}
.s3-content p {margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--s3); margin-inline-start: 0; color: #c3ccd6;}
.s3-content a {color: var(--ac); text-decoration: underline; text-underline-offset: 2px;}
.s3-content ul, .s3-content ol {margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--s3); margin-inline-start: 0; padding-inline-start: var(--s4); color: #c3ccd6;}
.s3-content li {margin-block-end: var(--s1);}

.s3-ph {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  row-gap: var(--s5);
  column-gap: var(--s5);
  align-items: center;
  margin-block-end: var(--s5);
}

.s3-ph img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--tk-rad3);}

.s3-ph .eb {
  display: inline-block;
  margin-block-end: var(--s2);
  font-size: var(--tk-fs3);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac);
}

.s3-ph .act, .s3-content .act {display: flex; flex-wrap: wrap; row-gap: var(--s2); column-gap: var(--s2); margin-block-start: var(--s4);}
.s3-content .act.utl {margin-block-end: var(--s5);}

.s3-kpis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
  margin-block: var(--s5);
  margin-inline: 0;
}

.s3-kpis > div {
  min-width: 0;
  padding-block: var(--s3);
  padding-inline: var(--s3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  background: var(--pn);
}

.s3-kpis b {display: block; font-size: 23px; font-weight: 800; color: var(--ac);}
.s3-kpis span {font-size: var(--tk-fs3); color: var(--mut);}

.s3-steps {counter-reset: m8s; margin-block: var(--s4); margin-inline: 0; padding-block: 0; padding-inline: 0; list-style-type: none; list-style-position: outside; list-style-image: none;}

.s3-steps li {
  position: relative;
  counter-increment: m8s;
  margin-block-end: var(--s3);
  padding-inline-start: var(--s6);
  color: #c3ccd6;
}

.s3-steps li::before {
  content: counter(m8s);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 1px;
  border-style: solid;
  border-color: var(--ac);
  border-radius: var(--tk-rad3);
  font-size: var(--tk-fs4);
  font-weight: 800;
  color: var(--ac);
}

.s3-tw {overflow-x: auto; margin-block: var(--s4); margin-inline: 0;}

.s3-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tk-fs5);
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
}

.s3-tbl th {
  padding-block: var(--s2);
  padding-inline: var(--s3);
  background: var(--ch);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--hl);
  text-align: left;
  font-size: var(--tk-fs3);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ac);
}

.s3-tbl td {padding-block: var(--s2); padding-inline: var(--s3); border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--hl); color: #c3ccd6;}
.s3-tbl tbody tr:nth-child(odd) {background: rgba(22,26,32,.6);}

.s3-faq {margin-block: var(--s4); margin-inline: 0;}

.s3-faq details {
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  margin-block-end: var(--s1);
  background: var(--pn);
}

.s3-faq summary {
  padding-block: var(--s2);
  padding-inline: var(--s3);
  font-size: var(--tk-fs6);
  font-weight: 600;
  cursor: pointer;
}

.s3-faq p {margin-block: 0; margin-inline: 0; padding-block-start: 0; padding-inline-end: var(--s3); padding-block-end: var(--s3); padding-inline-start: var(--s3); font-size: var(--tk-fs5);}

.s3-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  margin-block-start: var(--s6);
  margin-inline-end: 0;
  margin-block-end: var(--s4);
  margin-inline-start: 0;
  padding-block: var(--s4);
  padding-inline: var(--s4);
  border-width: 1px;
  border-style: solid;
  border-color: var(--ac);
  border-radius: var(--tk-rad3);
  background: rgba(0,174,239,.07);
}

.s3-band b {flex: 1 1 260px; min-width: 0; font-size: var(--tk-fs7); font-weight: 600;}

/* ---------------------------------------------------------------- chrome overlays */
.s3-util {
  position: fixed;
  inset-inline-start: 0;
  inset-block-start: 46%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  column-gap: 2px;
}

.s3-util a {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2px;
  column-gap: 2px;
  width: 58px;
  padding-block: var(--s2);
  padding-inline: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-inline-start-width: medium;
  border-inline-start-style: none;
  border-inline-start-color: currentcolor;
  border-radius: 0 4px 4px 0;
  background: var(--ch);
  font-size: var(--tk-fs1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mut);
}

.s3-util a:hover {color: var(--ac); border-color: var(--ac);}
.s3-util .i {font-size: var(--tk-fs8); color: var(--ac);}

.s3-spin {
  position: fixed;
  inset-inline-end: var(--s3);
  inset-block-end: calc(var(--bar) + 66px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--s1);
  column-gap: var(--s1);
}

.s3-spin .wh {
  position: relative;
  width: 76px;
  height: 76px;
  border-width: 3px;
  border-style: solid;
  border-color: var(--ac);
  border-radius: 50%;
  background: conic-gradient(#12303b 0 45deg, #0e2531 45deg 90deg, #12303b 90deg 135deg,
    #0e2531 135deg 180deg, #12303b 180deg 225deg, #0e2531 225deg 270deg,
    #12303b 270deg 315deg, #0e2531 315deg 360deg);
  transition-property: transform;
  transition-duration: 4s;
  transition-timing-function: cubic-bezier(.17,.67,.2,1);
  transition-delay: 0s;
}

.s3-spin .wh ul {display: none;}

.s3-spin .pin {
  position: absolute;
  inset-block-start: -9px;
  inset-inline-start: 50%;
  width: 0;
  height: 0;
  border-inline-start-width: 6px;
  border-inline-start-style: solid;
  border-inline-start-color: transparent;
  border-inline-end-width: 6px;
  border-inline-end-style: solid;
  border-inline-end-color: transparent;
  border-block-start-width: 10px;
  border-block-start-style: solid;
  border-block-start-color: var(--ac);
  transform: translateX(-50%);
}

.s3-spin .s3-btn {min-height: 28px; padding-block: 0; padding-inline: var(--s2); font-size: var(--tk-fs2);}

/* Retire the floating extras once the footer is on screen. A fixed element passing over content
   while you scroll is what a fixed element does; one still sitting on top of a trust mark when
   the page has STOPPED is covered content, and that is a defect. At 320 the spin badge covered
   godaddy 90% and the util rail covered gamcare 41% and gamstop 52% at scroll-end.
   The sticky register bar and the bottom nav deliberately stay: they are the CTA. */
.s3-atfoot .s3-util,
.s3-atfoot .s3-spin {display: none;}

/* ---------------------------------------------------------------- popup */
.s3-pop {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding-block: var(--s3);
  padding-inline: var(--s3);
  background: rgba(4,8,10,.84);
}

.s3-pop.on {display: flex;}

.s3-pop .bx {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: 92vh;
  overflow: hidden auto;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 6px;
  background: var(--pn);
}

.s3-pop .x {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  background: rgba(12,17,19,.85);
  color: var(--ink);
  font-size: var(--tk-fs10);
  line-height: 1;
  cursor: pointer;
}

.s3-pop .ix {
  display: flex;
  row-gap: 2px;
  column-gap: 2px;
  /* The close button is absolutely positioned over this row's top-right. padding-right only
     adds trailing scroll space, so the box still extended under the X and clipped the last tab
     on a 320px screen. margin-right ends the box itself before the button. */
  margin-right: 46px;
  padding: var(--s2) 0 0 var(--s2);
  overflow-x: auto;
  scrollbar-width: none;;
}

.s3-pop .ix button {
  flex: 0 0 auto;
  padding-block: 5px;
  padding-inline: 9px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad2);
  background: none;
  color: var(--mut);
  font-size: var(--tk-fs3);
  font-family: inherit;
  cursor: pointer;
}

.s3-pop .ix button.on {background: var(--ac); border-color: var(--ac); color: #04181f;}
.s3-pop .ix i {display: none;}
.s3-pop .pane {padding-block: var(--s2); padding-inline: var(--s2);}
.s3-pop .pane > span {display: block;}
.s3-pop .pane img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tk-rad3);}
.s3-pop .cap {display: block; padding-block-start: var(--s3); padding-inline-end: var(--s1); padding-block-end: 0; padding-inline-start: var(--s1); text-align: center;}
.s3-pop .cap b {display: block; font-size: 18px; font-weight: 800; color: var(--ac);}
.s3-pop .cap span {display: block; margin-block-start: var(--s1); margin-inline-end: 0; margin-block-end: var(--s3); margin-inline-start: 0; font-size: var(--tk-fs5); color: #c3ccd6;}

.s3-pop .pg {
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  padding-block-start: var(--s3);
  padding-inline-end: 0;
  padding-block-end: var(--s1);
  padding-inline-start: 0;
}

.s3-pop .pg button {
  width: 32px;
  height: 32px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--tk-rad3);
  background: none;
  color: var(--ink);
  font-size: var(--tk-fs7);
  cursor: pointer;
}

.s3-pop .pg .n {font-size: var(--tk-fs4); color: var(--mut); font-variant-numeric: tabular-nums;}

/* ---------------------------------------------------------------- footer */
.s3-foot {margin-block-start: var(--s6); border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--hl); background: #0a0e10;}

.s3-foot .r1, .s3-foot .r2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  row-gap: var(--s5);
  column-gap: var(--s5);
  padding-block: var(--s5);
}

.s3-foot .r2 {border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--hl); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
.s3-foot .c {min-width: 0;}

.s3-foot h4 {
  margin-block-end: var(--s2);
  font-size: var(--tk-fs4);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ac);
}

.s3-foot .c > a {display: block; font-size: var(--tk-fs4); color: var(--mut); margin-block-end: var(--s1);}
.s3-foot .c > a:hover {color: var(--ink);}
.s3-foot .brand svg {width: 86px; height: 36px; margin-block-end: var(--s2);}
.s3-foot .brand p {margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--s3); margin-inline-start: 0; font-size: var(--tk-fs4); line-height: 1.7; color: var(--mut);}

.s3-foot .lic {
  display: inline-flex;
  flex-direction: column;
  padding-block: var(--s1);
  padding-inline: var(--s2);
  border-radius: var(--tk-rad2);
  background: #0f7a3d;
  font-size: var(--tk-fs9);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.s3-foot .lic i {font-size: 8px; font-style: normal; font-weight: 400; letter-spacing: 0.04em;}

.s3-foot .pay, .s3-foot .bd, .s3-foot .soc {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s2);
  column-gap: var(--s2);
  align-items: center;
  min-width: 0;
}

.s3-foot .pay span, .s3-foot .bd span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  padding-block: 4px;
  padding-inline: 7px;
  border-radius: var(--tk-rad2);
  background: #fff;
}

.s3-foot .pay img, .s3-foot .bd img {
  max-height: 18px;
  width: auto;
  min-width: 0;
  object-fit: contain;
}

.s3-foot .soc a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 50%;
}

.s3-foot .soc svg {width: 15px; height: 15px; fill: var(--mut);}
.s3-foot .soc a:hover {border-color: var(--ac);}
.s3-foot .soc a:hover svg {fill: var(--ac);}

.s3-foot .legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--s2);
  column-gap: var(--s2);
  padding-block: var(--s3);
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--hl);
  font-size: var(--tk-fs3);
  color: var(--mut);
}

.s3-foot .age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-width: 1px;
  border-style: solid;
  border-color: #d4524a;
  border-radius: 50%;
  font-size: var(--tk-fs2);
  font-weight: 800;
  color: #d4524a;
}

.s3-foot .cp {margin-inline-start: auto;}

/* ---------------------------------------------------------------- fixed bars */
.s3-scta {
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: var(--bar);
  z-index: 35;
  display: none;
  padding-block: var(--s1);
  padding-inline: var(--s3);
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--hl);
  background: rgba(12,17,19,.96);
}

.s3-nav {
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  z-index: 36;
  display: none;
  padding-block-start: 9px;
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--hl);
  background: var(--ch);
}

.s3-nav a {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1px;
  column-gap: 1px;
  min-width: 0;
  min-height: 44px;
  padding-block-end: 5px;
  font-size: var(--tk-fs1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mut);
}

.s3-nav .i {font-size: var(--tk-fs7);}

.s3-nav .coin .i {
  position: absolute;
  inset-block-start: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-width: 3px;
  border-style: solid;
  border-color: var(--ch);
  border-radius: 50%;
  background: var(--ac);
  color: #04181f;
  font-size: var(--tk-fs11);
}

.s3-nav .coin {color: var(--ac); padding-block-start: 25px;}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .s3-rec .bd {grid-template-columns: 220px minmax(0, 1fr);}
  .s3-picks .gr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .s3-wall .gr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .s3-testi .gr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .s3-foot .r1 {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .s3-foot .r2 {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
}

@media (max-width: 860px) {
  .s3-burger {display: block;}
  .s3-verts {
    display: none;
    width: 100%;
    flex-direction: column;
    row-gap: 0;
    column-gap: 0;
  }
  .s3-head.open .s3-verts {display: flex;}
  .s3-head.open .s3-chrome .w {flex-wrap: wrap; padding-block-end: var(--s2);}
  .s3-verts a {width: 100%; padding-block: var(--s2); padding-inline: 0; border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--hl);}
  .s3-meta {margin-inline-start: auto;}
  .clk {display: none;}
  .s3-auth .s3-btn.q {display: none;}
  .s3-hero > img {aspect-ratio: 4 / 3;}
  .s3-hero .ov {background: linear-gradient(0deg, rgba(8,12,14,.96) 22%, rgba(8,12,14,.42) 100%); align-items: flex-end;}
  .s3-hero .ov .w {padding-block-end: var(--s4);}
  .s3-hero .nums {row-gap: var(--s4); column-gap: var(--s4); margin-block: var(--s3); margin-inline: 0;}
  /* The desktop step would crowd a 375px screen; hold the phone at its old size. */
  .s3-hero .nums b {font-size: 26px;}
  .s3-hero .s3-btn {min-height: 46px; padding-block: 0; padding-inline: var(--s4); font-size: var(--tk-fs6);}
  .s3-rec .bd {grid-template-columns: minmax(0, 1fr);}
  .s3-feat img {aspect-ratio: 16 / 9;}
  .s3-boards .bd {grid-template-columns: minmax(0, 1fr);}
  .s3-app .bd {grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); column-gap: var(--s4);}
  .s3-app .fts {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .s3-ph {grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); column-gap: var(--s4);}
  .s3-kpis {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .s3-scta {display: block;}
  .s3-nav {display: flex;}
  .s3-util {inset-block-start: auto; inset-block-end: calc(var(--bar) + 66px);}
  .s3-util a:nth-child(n+2) {display: none;}
  .s3-spin {inset-inline-end: var(--s2); inset-block-end: calc(var(--bar) + 150px);}
  .s3-spin .wh {width: 58px; height: 58px;}
  .s3-foot .cp {margin-inline-start: 0; width: 100%;}
}

@media (max-width: 520px) {
  .s3-picks .gr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .s3-wall .gr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .s3-testi .gr {grid-template-columns: minmax(0, 1fr);}
  .s3-rec .pane {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .s3-foot .r1, .s3-foot .r2 {grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); column-gap: var(--s4);}
  .s3-floor {row-gap: var(--s5); column-gap: var(--s5);}
  .s3-live .it {flex-basis: 170px;}
}

@media (prefers-reduced-motion: reduce) {
  .s3-tick span {animation: none; padding-inline-start: 0;}
  .s3-board .live::before {animation: none;}
  .s3-spin .wh {transition-property: none; transition-duration: 0s; transition-timing-function: ease; transition-delay: 0s;}
  * {scroll-behavior: auto !important;}
}