/* R24 official floor: deep violet casino, magenta/gold neon trim. Namespaced .r4-

   How this sheet is written:
     - The gaps and insets, the line heights, the letter-spacings, the font weights and the
       shadows used more than once are named once in :root as --q-* and called by name
       everywhere else;
     - box properties are written in logical names (block-start, inline-end) so a modifier
       resets the one edge it means to;
     - every border is split into width, style and colour;
     - gap is row-gap plus column-gap;
     - overflow is overflow-x plus overflow-y;
     - a transition is spelled out as property, duration, timing and delay;
     - an animation names all eight of its parts. */

:root {
  --vio: #140433;
  --vio-2: #1d0646;
  --vio-3: #2a0a63;
  --vio-4: #3a0f82;
  --mag: #ff2fb0;
  --mag-2: #c7148a;
  --pur: #8a3cf0;
  --pur-2: #6322c4;
  --gold: #ffc83d;
  --gold-2: #e0a008;
  --ink: #f4ebff;
  --mut: #b398d9;
  --line: rgba(173,124,255,.28);
  --dep: #2fd39b;
  --wd: #ff7a9c;
  --font: Arial,"Helvetica Neue",Helvetica,"Noto Sans SC",sans-serif;

  /* named values used more than once */
  --q-sp1: 1px;
  --q-sp2: 2px;
  --q-sp3: 3px;
  --q-sp4: 4px;
  --q-sp5: 5px;
  --q-sp6: 6px;
  --q-sp7: 7px;
  --q-sp8: 8px;
  --q-sp9: 9px;
  --q-sp10: 10px;
  --q-sp11: 11px;
  --q-sp12: 12px;
  --q-sp13: 13px;
  --q-sp14: 14px;
  --q-sp15: 15px;
  --q-sp16: 16px;
  --q-sp17: 18px;
  --q-sp18: 20px;
  --q-sp19: 22px;
  --q-sp20: 26px;
  --q-lh1: 1;
  --q-lh2: 1.2;
  --q-tr1: .02em;
  --q-tr2: .06em;
  --q-wt1: 800;
  --q-wt2: 700;
  --q-wt3: 900;
}
*{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; overflow-x: clip; max-width: 100%;}
body{
  margin-block: 0;
  margin-inline: 0;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  padding-block-end: var(--q-sp8);
  background: radial-gradient(1200px 520px at 50% -40px,#3a0b7a 0%,var(--vio-2) 46%,var(--vio) 100%) no-repeat,var(--vio);
}
a{color: var(--mag); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
img{max-width: 100%; height: auto; display: block;}
h1,h2,h3,h4{margin-block: 0; margin-inline: 0; line-height: 1.25;}
table{border-collapse: collapse; width: 100%;}

/* ---------- header ---------- */
.r4-head{
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: linear-gradient(180deg,#2b0a63,#19053d);
  border-block-end-width: 0.0625rem;
  border-block-end-style: solid;
  border-block-end-color: var(--line);
  box-shadow: 0 0.25rem 1.125rem rgba(0,0,0,.45);
}
.r4-head .row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  row-gap: var(--q-sp10);
  column-gap: var(--q-sp10);
  padding-block: var(--q-sp8);
  padding-inline: var(--q-sp14);
  max-width: 91.25rem;
  margin-block: 0;
  margin-inline: auto;
}
/* Controls are kept at the 44px tap target on every width, including the language chips. */
.r4-burger{
  justify-self: start;
  background: linear-gradient(180deg,var(--pur),var(--pur-2));
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  color: #fff;
  font-size: 1.0625rem;
  line-height: var(--q-lh1);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-block: 0;
  padding-inline: var(--q-sp12);
  border-radius: 0.5625rem;
  cursor: pointer;
}
.r4-logo{display: flex; align-items: center; row-gap: var(--q-sp9); column-gap: var(--q-sp9); justify-self: center;}
.r4-logo svg{width: 2.25rem; height: 2.25rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.r4-logo .wm{display: flex; flex-direction: column; line-height: var(--q-lh1);}
.r4-logo .wm b{
  font-family: "Arial Black",Arial,sans-serif;
  font-size: 1.4375rem;
  letter-spacing: .01em;
  white-space: nowrap;
  background: linear-gradient(92deg,#ff5ac8,#ffc83d 62%,#ff8ad6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.r4-logo .wm small{font-size: 0.53125rem; letter-spacing: .34em; color: var(--mut); font-weight: var(--q-wt2); margin-block-start: var(--q-sp4); white-space: nowrap;}
.r4-tools{justify-self: end; display: flex; align-items: center; row-gap: var(--q-sp7); column-gap: var(--q-sp7);}
.r4-lang{display: flex; row-gap: var(--q-sp3); column-gap: var(--q-sp3);}
.r4-lang a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: var(--q-wt2);
  color: var(--mut);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0.4375rem;
  min-width: 2.5rem;
  min-height: 2.75rem;
  padding-block: 0;
  padding-inline: var(--q-sp7);
  line-height: var(--q-lh1);
  white-space: nowrap;
}
.r4-lang a.on{color: #190233; background: linear-gradient(180deg,var(--gold),var(--gold-2)); border-color: transparent;}
.r4-tick{
  background: linear-gradient(90deg,var(--gold-2),var(--gold) 45%,#fff0b8);
  color: #2a0b02;
  overflow-x: hidden;
  overflow-y: hidden;
  font-weight: var(--q-wt1);
  font-size: 0.78125rem;
  padding-block: var(--q-sp5);
  padding-inline: 0;
  white-space: nowrap;
}
.r4-tick span{display: inline-block; padding-inline-start: 100%; animation-name: kyroll; animation-duration: 34s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running;}
@keyframes kyroll{to{transform: translateX(-100%);}}
@media (prefers-reduced-motion:reduce){.r4-tick span{animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; padding-inline-start: var(--q-sp14); white-space: normal;}}
.r4-drawer{display: none; background: #1d0646; border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line); padding-block-start: var(--q-sp6); padding-inline-end: var(--q-sp10); padding-block-end: var(--q-sp10); padding-inline-start: var(--q-sp10);}
.r4-drawer a{display: block; color: var(--ink); font-weight: var(--q-wt2); font-size: 0.875rem; padding-block: var(--q-sp10); padding-inline: var(--q-sp6); border-block-end-width: 0.0625rem; border-block-end-style: solid; border-block-end-color: var(--line);}
.r4-open .r4-drawer{display: block;}

/* ---------- stage grid ---------- */
.r4-stage{
  display: grid;
  grid-template-columns: 18.25rem minmax(0,1fr) 19.75rem;
  row-gap: var(--q-sp14);
  column-gap: var(--q-sp14);
  align-items: start;
  max-width: 91.25rem;
  margin-block: 0;
  margin-inline: auto;
  padding-block: var(--q-sp14);
  padding-inline: var(--q-sp14);
}
.r4-col{display: grid; row-gap: var(--q-sp12); column-gap: var(--q-sp12); min-width: 0;}
.r4-card{
  background: linear-gradient(180deg,rgba(72,22,140,.72),rgba(28,7,66,.86));
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0.8125rem;
  padding-block: var(--q-sp11);
  padding-inline: var(--q-sp11);
  min-width: 0;
}
.r4-card>.h{display: flex; align-items: center; justify-content: space-between; row-gap: var(--q-sp8); column-gap: var(--q-sp8); margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp9); margin-inline-start: 0;}
.r4-card>.h b{font-size: 0.8125rem; letter-spacing: .07em; text-transform: uppercase; color: var(--gold);}
.r4-card>.h .live{font-size: 0.625rem; font-weight: var(--q-wt1); color: #fff; background: var(--mag-2); border-radius: 1.25rem; padding-block: var(--q-sp3); padding-inline: var(--q-sp8);}

/* promo banner */
.r4-promo{position: relative; border-radius: 0.8125rem; overflow-x: hidden; overflow-y: hidden; border-width: 0.0625rem; border-style: solid; border-color: var(--line);}
.r4-promo img{width: 100%; aspect-ratio: 16/9; object-fit: cover;}
.r4-promo .ov{
  position: absolute;
  inset-block-start: auto;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  padding-block: var(--q-sp12);
  padding-inline: var(--q-sp13);
  background: linear-gradient(180deg,rgba(14,2,36,0),rgba(14,2,36,.88) 58%);
}
.r4-promo .ov strong{display: block; font-size: 1.0625rem; line-height: var(--q-lh2); color: #fff; text-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.6);}
.r4-promo .ov em{display: block; font-style: normal; font-size: 0.71875rem; color: var(--gold); margin-block-start: var(--q-sp4); margin-inline-end: 0; margin-block-end: var(--q-sp9); margin-inline-start: 0; font-weight: var(--q-wt2);}

/* live transaction feed */
.r4-txn table{font-size: 0.75rem;}
.r4-txn th{
  text-align: left;
  font-size: 0.625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-block-end: var(--q-sp6);
  padding-inline-start: 0;
  font-weight: var(--q-wt1);
}
.r4-txn td{padding-block: var(--q-sp5); padding-inline: 0; border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: rgba(173,124,255,.16); color: #e4d6ff; font-variant-numeric: tabular-nums;}
.r4-txn td.d{color: var(--dep); font-weight: var(--q-wt2);}
.r4-txn td.w{color: var(--wd); font-weight: var(--q-wt2);}
.r4-txn td.a{text-align: right; font-weight: var(--q-wt1); color: #fff;}

/* referral card */
.r4-ref .pct{display: flex; align-items: baseline; row-gap: var(--q-sp7); column-gap: var(--q-sp7); margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp8); margin-inline-start: 0;}
.r4-ref .pct b{font-size: 1.875rem; line-height: var(--q-lh1); color: var(--gold); font-family: "Arial Black",Arial,sans-serif;}
.r4-ref .pct span{font-size: 0.71875rem; color: var(--mut); font-weight: var(--q-wt2); text-transform: uppercase; letter-spacing: .05em;}
.r4-ref img{width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 0.5625rem; margin-block-end: var(--q-sp9);}
.r4-ref .btns{display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--q-sp7); column-gap: var(--q-sp7);}

/* side strips */
.r4-strip{
  display: flex;
  flex-direction: column;
  row-gap: var(--q-sp2);
  column-gap: var(--q-sp2);
  background: linear-gradient(100deg,#0d8ecf,#2bb9f5);
  color: #fff;
  font-weight: var(--q-wt1);
  font-size: 0.8125rem;
  border-radius: 0.6875rem;
  padding-block: var(--q-sp11);
  padding-inline: var(--q-sp13);
}
.r4-strip small{font-weight: 600; font-size: 0.6875rem; opacity: .9;}
.r4-strip.app{background: linear-gradient(100deg,var(--mag-2),var(--pur));}

/* ---------- centre: categories, providers, games ---------- */
.r4-cats{display: flex; row-gap: var(--q-sp8); column-gap: var(--q-sp8); overflow-x: auto; padding-block-start: var(--q-sp2); padding-inline-end: var(--q-sp2); padding-block-end: var(--q-sp6); padding-inline-start: var(--q-sp2); scrollbar-width: none;}
.r4-cats::-webkit-scrollbar{display: none;}
.r4-cats a{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 4.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--q-sp5);
  column-gap: var(--q-sp5);
  background: linear-gradient(180deg,rgba(94,33,178,.6),rgba(26,6,60,.8));
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0.6875rem;
  padding-block: var(--q-sp9);
  padding-inline: var(--q-sp4);
  color: var(--ink);
  font-size: 0.65625rem;
  font-weight: var(--q-wt1);
  text-align: center;
  letter-spacing: var(--q-tr1);
  text-transform: uppercase;
}
.r4-cats a .i{font-size: 1.3125rem; line-height: var(--q-lh1);}
.r4-cats a.on{border-color: var(--gold); box-shadow: 0 0 0 0.0625rem var(--gold) inset,0 0.375rem 1rem rgba(255,200,61,.18);}
.r4-sh{display: flex; align-items: center; justify-content: space-between; row-gap: var(--q-sp10); column-gap: var(--q-sp10); margin-block-start: var(--q-sp16); margin-inline-end: 0; margin-block-end: var(--q-sp9); margin-inline-start: 0;}
.r4-sh h2{font-size: 0.9375rem; letter-spacing: var(--q-tr2); text-transform: uppercase; color: #fff;}
.r4-sh h2:before{
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 0.875rem;
  border-radius: 0.1875rem;
  margin-inline-end: var(--q-sp8);
  vertical-align: -0.125rem;
  background: linear-gradient(180deg,var(--mag),var(--gold));
}
.r4-sh a{display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0; padding-inline: var(--q-sp4); font-size: 0.71875rem; font-weight: var(--q-wt1); color: var(--gold);}
.r4-provs{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(--q-sp9); column-gap: var(--q-sp9);}
.r4-prov{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--q-sp6);
  column-gap: var(--q-sp6);
  min-width: 0;
  background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0.6875rem;
  padding-block: var(--q-sp10);
  padding-inline: var(--q-sp6);
  color: var(--mut);
  font-size: 0.625rem;
  font-weight: var(--q-wt2);
  text-align: center;
}
.r4-prov .lg{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.125rem;
  background: #fff;
  border-radius: 0.4375rem;
  padding-block: var(--q-sp4);
  padding-inline: var(--q-sp4);
}
.r4-prov .lg.dark{background: #17032f; border-width: 0.0625rem; border-style: solid; border-color: var(--line);}
.r4-prov .lg img{max-height: 1.625rem; width: auto; object-fit: contain;}
.r4-prov .lg.t{background: none; color: var(--ink); font-size: 0.6875rem; font-weight: var(--q-wt1);}
.r4-prov span{width: 100%; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap;}
.r4-games{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--q-sp10); column-gap: var(--q-sp10);}
.r4-game{
  position: relative;
  display: block;
  min-width: 0;
  border-radius: 0.6875rem;
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  background: #1b0643;
}
.r4-game img{width: 100%; aspect-ratio: 1/1; object-fit: cover;}
.r4-game .m{padding-block-start: var(--q-sp7); padding-inline-end: var(--q-sp8); padding-block-end: var(--q-sp8); padding-inline-start: var(--q-sp8); background: linear-gradient(180deg,rgba(26,6,60,.2),#1b0643);}
.r4-game .m b{display: block; font-size: 0.71875rem; color: #fff; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap;}
.r4-game .m small{
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--q-sp6);
  column-gap: var(--q-sp6);
  margin-block-start: var(--q-sp3);
  font-size: 0.59375rem;
  color: var(--mut);
  font-weight: var(--q-wt2);
}
.r4-game .m small i{font-style: normal; color: #190233; background: var(--gold); border-radius: 0.25rem; padding-block: var(--q-sp1); padding-inline: var(--q-sp5); font-weight: var(--q-wt3);}
.r4-tag{
  position: absolute;
  inset-block-start: 0.4375rem;
  inset-inline-start: 0.4375rem;
  font-size: 0.5625rem;
  font-weight: var(--q-wt3);
  letter-spacing: var(--q-tr2);
  color: #fff;
  background: var(--mag-2);
  border-radius: 0.3125rem;
  padding-block: var(--q-sp2);
  padding-inline: var(--q-sp6);
}
.r4-row{display: flex; flex-wrap: wrap; row-gap: var(--q-sp8); column-gap: var(--q-sp8); align-items: center;}
.r4-chip{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.125rem;
  min-width: 3.875rem;
  background: #fff;
  border-radius: 0.5rem;
  padding-block: var(--q-sp5);
  padding-inline: var(--q-sp9);
}
.r4-chip img{max-height: 1.375rem; width: auto; object-fit: contain;}
.r4-chip.t{background: rgba(255,255,255,.08); border-width: 0.0625rem; border-style: solid; border-color: var(--line); color: var(--ink); font-size: 0.6875rem; font-weight: var(--q-wt1);}

/* ---------- right: wallet panel ---------- */
.r4-wallet .two{display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--q-sp8); column-gap: var(--q-sp8); margin-block-end: var(--q-sp11);}
.r4-bal{background: rgba(10,2,28,.5); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: 0.6875rem; padding-block: var(--q-sp11); padding-inline: var(--q-sp12);}
.r4-bal .k{font-size: 0.6875rem; color: var(--mut); font-weight: var(--q-wt2); text-transform: uppercase; letter-spacing: var(--q-tr2);}
.r4-bal .v{font-size: 1.6875rem; font-family: "Arial Black",Arial,sans-serif; color: var(--gold); line-height: 1.15; margin-block-start: var(--q-sp2); margin-inline-end: 0; margin-block-end: var(--q-sp7); margin-inline-start: 0;}
.r4-bal .meta{font-size: 0.71875rem; color: var(--mut); line-height: 1.7;}
.r4-bal .meta b{color: #fff;}
.r4-wallet .stack{display: grid; row-gap: var(--q-sp7); column-gap: var(--q-sp7); margin-block-start: var(--q-sp11);}
.r4-tips{position: relative; border-radius: 0.8125rem; overflow-x: hidden; overflow-y: hidden; border-width: 0.0625rem; border-style: solid; border-color: var(--line);}
.r4-tips img{width: 100%; aspect-ratio: 16/9; object-fit: cover;}
.r4-tips .ov{
  position: absolute;
  inset-block-start: auto;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  padding-block: var(--q-sp10);
  padding-inline: var(--q-sp12);
  text-align: center;
  background: linear-gradient(180deg,rgba(14,2,36,0),rgba(14,2,36,.9) 60%);
}
.r4-tips .ov b{display: block; font-size: 0.875rem; color: #fff; margin-block-end: var(--q-sp7);}
.r4-floor dl{margin-block: 0; margin-inline: 0; display: grid; row-gap: var(--q-sp1); column-gap: var(--q-sp1); background: rgba(173,124,255,.16); border-radius: 0.5625rem; overflow-x: hidden; overflow-y: hidden;}
.r4-floor dl>div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  row-gap: var(--q-sp10);
  column-gap: var(--q-sp10);
  padding-block: var(--q-sp8);
  padding-inline: var(--q-sp10);
  background: rgba(12,2,32,.55);
}
.r4-floor dt{font-size: 0.71875rem; color: var(--mut); margin-block: 0; margin-inline: 0;}
.r4-floor dd{margin-block: 0; margin-inline: 0; font-size: 0.8125rem; font-weight: var(--q-wt1); color: var(--gold); font-variant-numeric: tabular-nums;}
.r4-save li{color: #ddcdff; font-size: 0.75rem; margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp6); margin-inline-start: 0; line-height: 1.5;}
.r4-save ul{margin-block: 0; margin-inline: 0; padding-inline-start: 1.0625rem;}

/* ---------- buttons ---------- */
.r4-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--q-sp6);
  column-gap: var(--q-sp6);
  border-radius: 0.625rem;
  padding-block: var(--q-sp11);
  padding-inline: var(--q-sp14);
  font-weight: var(--q-wt1);
  font-size: 0.8125rem;
  line-height: var(--q-lh1);
  color: #fff;
  text-align: center;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  cursor: pointer;
}
.r4-btn.p{background: linear-gradient(180deg,#ff50c0,var(--mag-2)); box-shadow: 0 0.375rem 1rem rgba(199,20,138,.34);}
.r4-btn.g{background: linear-gradient(180deg,var(--gold),var(--gold-2)); color: #2a0b02;}
.r4-btn.o{background: rgba(255,255,255,.07); border-width: 0.0625rem; border-style: solid; border-color: var(--line); color: var(--ink);}
.r4-btn.lg{padding-block: var(--q-sp14); padding-inline: var(--q-sp19); font-size: 0.9375rem; border-radius: 0.75rem;}
.r4-btn.w{width: 100%;}
.r4-pill{
  display: inline-flex;
  align-items: center;
  border-radius: 1.25rem;
  padding-block: var(--q-sp8);
  padding-inline: var(--q-sp16);
  font-weight: var(--q-wt1);
  font-size: 0.78125rem;
  color: #2a0b02;
  background: linear-gradient(180deg,var(--gold),var(--gold-2));
}

/* ---------- article / inner pages ---------- */
.r4-content{max-width: 70rem; margin-block: 0; margin-inline: auto; padding-block-start: var(--q-sp18); padding-inline-end: var(--q-sp16); padding-block-end: 2.125rem; padding-inline-start: var(--q-sp16);}
.r4-content h1{font-size: 1.875rem; letter-spacing: -.01em; color: #fff;}
.r4-content h2{font-size: 1.3125rem; margin-block-start: var(--q-sp20); margin-inline-end: 0; margin-block-end: var(--q-sp9); margin-inline-start: 0; color: #fff;}
.r4-content h2:before{
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 1.0625rem;
  border-radius: 0.1875rem;
  margin-inline-end: var(--q-sp9);
  vertical-align: -0.125rem;
  background: linear-gradient(180deg,var(--mag),var(--gold));
}
.r4-content p{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp13); margin-inline-start: 0; color: #e0d2f7;}
.r4-content ul{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp14); margin-inline-start: 0; padding-inline-start: var(--q-sp18); color: #e0d2f7;}
.r4-content li{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp6); margin-inline-start: 0;}
.r4-content .lead{font-size: 1.03125rem; color: #f0e6ff;}
.r4-ph{display: grid; grid-template-columns: minmax(0,1fr) 20.75rem; row-gap: var(--q-sp19); column-gap: var(--q-sp19); align-items: center; margin-block-end: var(--q-sp8);}
.r4-ph .eb{
  display: inline-block;
  font-size: 0.65625rem;
  font-weight: var(--q-wt3);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: 1.25rem;
  padding-block: var(--q-sp5);
  padding-inline: var(--q-sp11);
  margin-block-end: var(--q-sp11);
}
.r4-ph .act{display: flex; flex-wrap: wrap; row-gap: var(--q-sp9); column-gap: var(--q-sp9); margin-block-start: var(--q-sp15);}
.r4-ph>img{width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0.875rem; border-width: 0.0625rem; border-style: solid; border-color: var(--line);}
.r4-kpis{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--q-sp10); column-gap: var(--q-sp10); margin-block-start: var(--q-sp17); margin-inline-end: 0; margin-block-end: var(--q-sp6); margin-inline-start: 0;}
.r4-kpis>div{
  background: linear-gradient(180deg,rgba(94,33,178,.5),rgba(26,6,60,.72));
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0.75rem;
  padding-block: var(--q-sp13);
  padding-inline: var(--q-sp12);
  min-width: 0;
}
.r4-kpis b{display: block; font-size: 1.3125rem; color: var(--gold); font-family: "Arial Black",Arial,sans-serif; line-height: var(--q-lh2);}
.r4-kpis span{display: block; font-size: 0.71875rem; color: var(--mut); margin-block-start: var(--q-sp3);}
.r4-steps{counter-reset: ky; margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp16); margin-inline-start: 0; padding-block: 0; padding-inline: 0; list-style-type: none; list-style-position: outside; list-style-image: none;}
.r4-steps li{
  counter-increment: ky;
  position: relative;
  padding-block-start: var(--q-sp11);
  padding-inline-end: var(--q-sp12);
  padding-block-end: var(--q-sp11);
  padding-inline-start: 2.875rem;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-block-end: var(--q-sp8);
  margin-inline-start: 0;
  color: #e0d2f7;
  background: rgba(255,255,255,.04);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0.6875rem;
}
.r4-steps li:before{
  content: counter(ky);
  position: absolute;
  inset-inline-start: 0.75rem;
  inset-block-start: 0.625rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  align-items: center;
  justify-items: center;
  font-weight: var(--q-wt3);
  font-size: 0.75rem;
  color: #2a0b02;
  background: linear-gradient(180deg,var(--gold),var(--gold-2));
}
.r4-tw{overflow-x: auto; margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp16); margin-inline-start: 0;}
.r4-tbl{font-size: 0.84375rem; min-width: 27.5rem;}
.r4-tbl th{
  text-align: left;
  padding-block: var(--q-sp10);
  padding-inline: var(--q-sp12);
  background: linear-gradient(180deg,var(--pur),var(--pur-2));
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.r4-tbl td{padding-block: var(--q-sp10); padding-inline: var(--q-sp12); border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line); color: #e0d2f7;}
.r4-tbl tr:nth-child(even) td{background: rgba(255,255,255,.035);}
.r4-faq{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp17); margin-inline-start: 0;}
.r4-faq details{border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: 0.6875rem; padding-block: 0; padding-inline: 0; margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp8); margin-inline-start: 0; background: rgba(255,255,255,.04);}
.r4-faq summary{cursor: pointer; padding-block: var(--q-sp12); padding-inline: var(--q-sp14); font-weight: var(--q-wt1); color: #fff; font-size: 0.875rem; list-style-type: none; list-style-position: outside; list-style-image: none;}
.r4-faq summary::-webkit-details-marker{display: none;}
.r4-faq summary:after{content: "+"; float: right; color: var(--gold); font-weight: var(--q-wt3);}
.r4-faq details[open] summary:after{content: "\2013";}
.r4-faq p{margin-block: 0; margin-inline: 0; padding-block-start: 0; padding-inline-end: var(--q-sp14); padding-block-end: var(--q-sp13); padding-inline-start: var(--q-sp14); color: #ddcdff; font-size: 0.84375rem;}
.r4-band{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--q-sp14);
  column-gap: var(--q-sp14);
  margin-block-start: var(--q-sp19);
  margin-inline-end: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  padding-block: var(--q-sp17);
  padding-inline: var(--q-sp18);
  border-radius: 0.875rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  background: linear-gradient(100deg,rgba(199,20,138,.4),rgba(138,60,240,.32));
}
.r4-band b{font-size: 1.0625rem; color: #fff; max-width: 46ch;}

/* ---------- footer ---------- */
.r4-foot{background: linear-gradient(180deg,#160436,#0c0220); border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line); margin-block-start: var(--q-sp19);}
.r4-foot .w{max-width: 91.25rem; margin-block: 0; margin-inline: auto; padding-block-start: var(--q-sp20); padding-inline-end: var(--q-sp16); padding-block-end: var(--q-sp19); padding-inline-start: var(--q-sp16);}
.r4-foot .cols{display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; row-gap: var(--q-sp19); column-gap: var(--q-sp19);}
.r4-foot h4{font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--q-sp11); margin-inline-start: 0;}
.r4-foot a{display: flex; align-items: center; min-height: 2.75rem; color: #cdb8ec; font-size: 0.8125rem; margin-block: 0; margin-inline: 0;}
.r4-foot p{color: var(--mut); font-size: 0.8125rem;}
.r4-foot .soc{display: flex; row-gap: var(--q-sp9); column-gap: var(--q-sp9); margin-block-start: var(--q-sp13);}
.r4-foot .soc a{
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5625rem;
  background: rgba(255,255,255,.07);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  display: grid;
  align-items: center;
  justify-items: center;
  margin-block: 0;
  margin-inline: 0;
}
.r4-foot .soc svg{width: 1rem; height: 1rem; fill: #e2d2ff;}
.r4-foot .pay,.r4-foot .trust{display: flex; flex-wrap: wrap; row-gap: var(--q-sp8); column-gap: var(--q-sp8); align-items: center; margin-block-start: var(--q-sp17);}
.r4-foot .pay span,.r4-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.875rem;
  background: #fff;
  border-radius: 0.4375rem;
  padding-block: var(--q-sp4);
  padding-inline: var(--q-sp8);
}
.r4-foot .pay img,.r4-foot .trust img{max-height: 1.25rem; width: auto; object-fit: contain;}
.r4-foot .legal{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: var(--q-sp10);
  column-gap: var(--q-sp10);
  margin-block-start: var(--q-sp18);
  padding-block-start: var(--q-sp15);
  border-block-start-width: 0.0625rem;
  border-block-start-style: solid;
  border-block-start-color: var(--line);
  color: var(--mut);
  font-size: 0.75rem;
}
.r4-foot .age{
  display: inline-grid;
  align-items: center;
  justify-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--mag-2);
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--q-wt3);
  margin-inline-end: var(--q-sp7);
  vertical-align: -0.375rem;
}

/* ---------- bottom app nav + sticky cta ---------- */
.r4-nav{display: none;}
.r4-scta{display: none;}

/* ---------- entry popup ---------- */
.r4-pop{
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: 90;
  background: rgba(6,1,16,.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding-block: var(--q-sp16);
  padding-inline: var(--q-sp16);
}
.r4-pop.on{display: flex;}
.r4-pop .bx{
  position: relative;
  width: min(47.5rem,100%);
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 1rem;
  padding-block: var(--q-sp16);
  padding-inline: var(--q-sp16);
  display: grid;
  grid-template-columns: 12.5rem minmax(0,1fr);
  row-gap: var(--q-sp14);
  column-gap: var(--q-sp14);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  background: linear-gradient(180deg,#2d0a68,#17042f);
}
.r4-pop .tb{display: flex; flex-direction: column; row-gap: var(--q-sp7); column-gap: var(--q-sp7);}
.r4-pop .tb button{
  text-align: left;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  background: rgba(255,255,255,.05);
  color: #d9c6f7;
  padding-block: var(--q-sp11);
  padding-inline: var(--q-sp12);
  font-style: normal;
  font-variant: normal;
  font-weight: var(--q-wt1);
  font-stretch: normal;
  font-size: 0.78125rem;
  line-height: normal;
  font-family: var(--font);
  border-radius: 0.5625rem;
  cursor: pointer;
}
.r4-pop .tb button.on{background: linear-gradient(180deg,var(--mag),var(--mag-2)); color: #fff; border-color: transparent;}
.r4-pop .im img{width: 100%; height: auto; max-height: 52vh; object-fit: contain; border-radius: 0.6875rem; background: #10022a;}
.r4-pop .cap{text-align: center; margin-block-start: var(--q-sp11);}
.r4-pop .cap b{display: block; font-size: 1.125rem; color: #fff;}
.r4-pop .cap span{display: block; font-size: 0.78125rem; color: var(--mut); margin-block-start: var(--q-sp5); margin-inline-end: 0; margin-block-end: var(--q-sp11); margin-inline-start: 0;}
.r4-pop .x{
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.625rem;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  background: rgba(0,0,0,.4);
  color: #fff;
  font-size: 1.0625rem;
  line-height: var(--q-lh1);
  cursor: pointer;
  z-index: 2;
}
/* must beat `.r4-pop .cap` (0,2,0); a bare .r4-hide is (0,1,0) and loses */
.r4-hide{display: none;}
.r4-pop .cap.r4-hide,.r4-pop .pane>.r4-hide{display: none;}

/* ---------- responsive ---------- */
@media(max-width:1340px){
  .r4-stage{grid-template-columns: 16rem minmax(0,1fr) 18rem;}
  .r4-games{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
  .r4-provs{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
}
@media(max-width:1100px){
  .r4-stage{grid-template-columns: minmax(0,1fr) 18.75rem;}
  .r4-col.l{grid-column: 1/-1; grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .r4-col.l .r4-promo{grid-column: 1/-1;}
  .r4-ph{grid-template-columns: minmax(0,1fr) 16.5rem; row-gap: var(--q-sp16); column-gap: var(--q-sp16);}
  .r4-kpis{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
}
@media(max-width:860px){
  body{padding-block-end: 7.25rem;}
  .r4-stage{grid-template-columns: minmax(0,1fr); padding-block: var(--q-sp12); padding-inline: var(--q-sp12);}
  .r4-col.l{grid-template-columns: minmax(0,1fr);}
  .r4-content{padding-block-start: var(--q-sp17); padding-inline-end: var(--q-sp14); padding-block-end: 1.875rem; padding-inline-start: var(--q-sp14);}
  .r4-content h1{font-size: 1.5625rem;}
  .r4-content h2{font-size: 1.1875rem;}
  .r4-ph{grid-template-columns: minmax(0,1fr); row-gap: var(--q-sp14); column-gap: var(--q-sp14);}
  .r4-ph>img{order: -1; aspect-ratio: 16/10;}
  .r4-games{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
  .r4-provs{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
  .r4-foot .cols{grid-template-columns: 1fr 1fr;}
  .r4-band{padding-block: var(--q-sp16); padding-inline: var(--q-sp16);}
  .r4-band b{font-size: 0.9375rem;}
  .r4-pop .bx{grid-template-columns: minmax(0,1fr);}
  .r4-pop .tb{flex-direction: row; overflow-x: auto;}
  .r4-pop .tb button{flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
  .r4-nav{
    display: grid;
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    z-index: 60;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: 3.5rem;
    background: linear-gradient(180deg,#30096e,#190337);
    border-block-start-width: 0.0625rem;
    border-block-start-style: solid;
    border-block-start-color: var(--line);
  }
  .r4-nav a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: var(--q-sp2);
    column-gap: var(--q-sp2);
    color: #e2d2ff;
    font-size: 0.625rem;
    font-weight: var(--q-wt1);
    letter-spacing: var(--q-tr1);
    text-transform: uppercase;
  }
  .r4-nav a .i{font-size: 1.125rem; line-height: var(--q-lh1);}
  .r4-nav a.on{color: var(--gold);}
  .r4-scta{
    display: block;
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 3.5rem;
    z-index: 59;
    padding-block: var(--q-sp8);
    padding-inline: var(--q-sp10);
    background: rgba(16,3,40,.95);
    border-block-start-width: 0.0625rem;
    border-block-start-style: solid;
    border-block-start-color: var(--line);
  }
  .r4-scta a{display: flex; width: 100%; justify-content: center; font-size: 0.9375rem; padding-block: var(--q-sp12); padding-inline: var(--q-sp12); border-radius: 0.6875rem;}
}
@media(max-width:560px){
  .r4-head .row{padding-block: var(--q-sp7); padding-inline: var(--q-sp10); row-gap: var(--q-sp6); column-gap: var(--q-sp6);}
  .r4-logo .wm b{font-size: 1.1875rem;}
  .r4-logo svg{width: 1.875rem; height: 1.875rem;}
  .r4-lang a{min-width: 2.375rem; padding-block: 0; padding-inline: var(--q-sp5); font-size: 0.6875rem;}
  .r4-games{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .r4-provs{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .r4-foot .cols{grid-template-columns: 1fr;}
  .r4-content h1{font-size: 1.375rem;}
  .r4-kpis{row-gap: var(--q-sp8); column-gap: var(--q-sp8);}
  .r4-kpis b{font-size: 1.1875rem;}
}
/* Small phones. Nothing in the head row can give way: the burger is 44px, the wordmark's strapline
   is nowrap with a wide letter-spacing and the language pills hold a min-width, so at 320 the row
   measured 337px and dragged the document sideways. Tighten the strapline and the pills. */
@media(max-width:400px){
  .r4-head .row{row-gap: var(--q-sp4); column-gap: var(--q-sp4);}
  .r4-logo{row-gap: var(--q-sp6); column-gap: var(--q-sp6);}
  .r4-logo .wm b{font-size: 1.125rem;}
  .r4-logo .wm small{font-size: 0.5rem; letter-spacing: .2em;}
  .r4-lang a{min-width: 2rem; padding-block: 0; padding-inline: var(--q-sp4);}
}