/* VR7 mobile casino: near-black column, turquoise only — no gold anywhere.
   One layout at every width. Namespaced .r7-

   How this sheet is written:
     - The gaps and insets, the corner radii, the type sizes and the fixed widths and
       heights used more than once are named once in :root as --n-* and called by name
       everywhere else;
     - box properties keep their physical names, one edge per declaration;
     - 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 {
  --ink: #070b0b;
  --ink-2: #0d1515;
  --ink-3: #152020;
  --ink-4: #1d2c2b;
  --red: #03b9a4;
  --red-2: #027365;
  --gold: #7dfdeb;
  --gold-2: #04d9c0;
  --gold-3: #026e62;
  --txt: #e9fffb;
  --mut: #8aa8a4;
  --line: rgba(125,253,235,.2);
  --line-2: rgba(255,255,255,.07);
  --ok: #3fcf8e;
  --col: 540px;
  --bar: 62px;
  --font: Arial,"Helvetica Neue",Helvetica,"Noto Sans SC",sans-serif;

  /* named values used more than once */
  --n-sp1: 1px;
  --n-sp2: 2px;
  --n-sp3: 3px;
  --n-sp4: 4px;
  --n-sp5: 5px;
  --n-sp6: 6px;
  --n-sp7: 7px;
  --n-sp8: 8px;
  --n-sp9: 9px;
  --n-sp10: 10px;
  --n-sp11: 11px;
  --n-sp12: 12px;
  --n-sp13: 13px;
  --n-sp14: 14px;
  --n-sp15: 15px;
  --n-sp16: 16px;
  --n-sp17: 17px;
  --n-sp18: 18px;
  --n-sp19: 20px;
  --n-sp20: 22px;
  --n-sp21: 26px;
  --n-rad1: 2px;
  --n-rad2: 3px;
  --n-rad3: 5px;
  --n-rad4: 7px;
  --n-rad5: 10px;
  --n-rad6: 11px;
  --n-rad7: 13px;
  --n-fs1: 8.5px;
  --n-fs2: 9px;
  --n-fs3: 10px;
  --n-fs4: 10.5px;
  --n-fs5: 11px;
  --n-fs6: 11.5px;
  --n-fs7: 12px;
  --n-fs8: 12.5px;
  --n-fs9: 13px;
  --n-fs10: 13.5px;
  --n-fs11: 14px;
  --n-fs12: 16px;
  --n-fs13: 17px;
  --n-fs14: 18px;
  --n-fs15: 19px;
  --n-fs16: 20px;
  --n-fs17: 21px;
  --n-sz1: 100%;
  --n-sz2: 36px;
  --n-sz3: 34px;
  --n-sz4: 38px;
  --n-sz5: 48px;
  --n-sz6: 25px;
  --n-sz7: 30px;
  --n-sz8: 40px;
  --n-sz9: 44px;
  --n-sz10: 4px;
  --n-sz11: 8px;
}
*{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; overflow-x: clip; max-width: var(--n-sz1);}
body{
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  color: var(--txt);
  font-family: var(--font);
  line-height: 1.6;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: calc(var(--bar) + 18px);
  padding-left: 0px;
  background: radial-gradient(900px 480px at 50% -60px,#0a2320 0%,var(--ink-2) 45%,var(--ink) 100%) no-repeat,
    var(--ink);
}
a{color: var(--gold); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
img{max-width: var(--n-sz1); height: auto; display: block;}
h1,h2,h3,h4{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1.28;}
table{border-collapse: collapse; width: var(--n-sz1);}

/* The whole site is one phone-width column, on a monitor as much as on a handset. */
.r7-shell{
  width: min(var(--col),100%);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  background: var(--ink-2);
  min-height: 100vh;
  box-shadow: 0 0 0 1px var(--line-2),0 24px 70px rgba(0,0,0,.5);
}

/* ---------- buttons ---------- */
.r7-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--n-sp7);
  column-gap: var(--n-sp7);
  min-height: var(--n-sz9);
  padding-top: 0px;
  padding-right: var(--n-sp17);
  padding-bottom: 0px;
  padding-left: var(--n-sp17);
  border-radius: var(--n-rad6);
  font-weight: 800;
  font-size: var(--n-fs11);
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  text-align: center;
  line-height: 1.2;
}
.r7-btn.p{background: linear-gradient(180deg,var(--red),var(--red-2)); color: #fff;}
.r7-btn.g{background: linear-gradient(180deg,var(--gold),var(--gold-2)); color: #02211d;}
.r7-btn.o{background: var(--ink-3); color: var(--txt); border-color: var(--line);}
.r7-btn.w{width: var(--n-sz1);}

/* ---------- header ---------- */
.r7-head{position: sticky; top: 0px; z-index: 40; background: var(--ink);}
.r7-head .util{
  display: flex;
  align-items: center;
  row-gap: var(--n-sp9);
  column-gap: var(--n-sp9);
  padding-top: var(--n-sp7);
  padding-right: var(--n-sp13);
  padding-bottom: var(--n-sp7);
  padding-left: var(--n-sp13);
  font-size: var(--n-fs5);
  color: var(--mut);
  background: #070d0d;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--line-2);
}
.r7-head .util .dom{font-weight: 800; color: var(--gold);}
.r7-head .util .tag{flex-grow: 1; flex-shrink: 1; flex-basis: 0%; min-width: 0px; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap;}
.r7-head .lang{display: flex; row-gap: var(--n-sp3); column-gap: var(--n-sp3); flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.r7-head .lang a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: var(--n-sz9);
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  color: var(--mut);
  font-size: var(--n-fs4);
  font-weight: 700;
  padding-top: 0px;
  padding-right: var(--n-sp5);
  padding-bottom: 0px;
  padding-left: var(--n-sp5);
  white-space: nowrap;
}
.r7-head .lang a.on{background: var(--gold); color: #02211d; border-color: transparent;}
.r7-head .bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--n-sp10);
  column-gap: var(--n-sp10);
  padding-top: var(--n-sp10);
  padding-right: var(--n-sp13);
  padding-bottom: var(--n-sp10);
  padding-left: var(--n-sp13);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
}
.r7-logo{display: flex; align-items: center; row-gap: var(--n-sp8); column-gap: var(--n-sp8); min-width: 0px;}
.r7-logo svg{width: var(--n-sz3); height: var(--n-sz3); flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.r7-logo b{
  font-family: "Arial Black",Arial,sans-serif;
  font-size: var(--n-fs17);
  letter-spacing: .01em;
  white-space: nowrap;
  background: linear-gradient(180deg,#d6fff8,var(--gold) 55%,var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.r7-head .acts{display: flex; row-gap: var(--n-sp7); column-gap: var(--n-sp7); flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.r7-head .acts .r7-btn{min-height: var(--n-sz4); padding-top: 0px; padding-right: var(--n-sp13); padding-bottom: 0px; padding-left: var(--n-sp13); font-size: var(--n-fs8); border-radius: 9px;}

/* ---------- promo carousel ---------- */
.r7-car{position: relative; margin-top: var(--n-sp12); margin-right: var(--n-sp13); margin-bottom: 0px; margin-left: var(--n-sp13);}
.r7-car .track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  row-gap: var(--n-sp10);
  column-gap: var(--n-sp10);
  scrollbar-width: none;
  border-radius: var(--n-rad7);
}
.r7-car .track::-webkit-scrollbar{display: none;}
.r7-car .sl{
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
  scroll-snap-align: center;
  border-radius: var(--n-rad7);
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.r7-car .sl img{width: var(--n-sz1); aspect-ratio: 16/9; object-fit: cover;}
.r7-car .cap{
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  row-gap: var(--n-sp5);
  column-gap: var(--n-sp5);
  justify-items: start;
  padding-top: var(--n-sp12);
  padding-right: var(--n-sp13);
  padding-bottom: var(--n-sp12);
  padding-left: var(--n-sp13);
  background: linear-gradient(180deg,rgba(5,9,9,0),rgba(5,9,9,.93));
}
.r7-car .cap b{font-size: var(--n-fs12); line-height: 1.25;}
.r7-car .cap span{font-size: var(--n-fs7); color: var(--mut);}
.r7-car .cap .r7-btn{min-height: var(--n-sz2); padding-top: 0px; padding-right: var(--n-sp14); padding-bottom: 0px; padding-left: var(--n-sp14); font-size: var(--n-fs8); margin-top: var(--n-sp3);}
.r7-car .dots{display: flex; justify-content: center; row-gap: var(--n-sp6); column-gap: var(--n-sp6); padding-top: var(--n-sp9); padding-right: 0px; padding-bottom: 0px; padding-left: 0px;}
.r7-car .dots button{
  width: var(--n-sz11);
  height: var(--n-sz11);
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  border-width: 0px;
  border-style: none;
  border-color: currentcolor;
  border-radius: 50%;
  cursor: pointer;
  background: var(--ink-4);
}
.r7-car .dots button.on{background: var(--gold); width: 19px; border-radius: var(--n-rad3);}

/* ---------- flip-digit jackpot ---------- */
.r7-jp{
  margin-top: var(--n-sp13);
  margin-right: var(--n-sp13);
  margin-bottom: var(--n-sp13);
  margin-left: var(--n-sp13);
  padding-top: var(--n-sp15);
  padding-right: var(--n-sp13);
  padding-bottom: var(--n-sp15);
  padding-left: var(--n-sp13);
  border-radius: var(--n-rad7);
  text-align: center;
  background: linear-gradient(180deg,var(--ink-3),var(--ink));
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.r7-jp .dg{display: flex; justify-content: center; align-items: center; row-gap: var(--n-sp4); column-gap: var(--n-sp4); flex-wrap: wrap;}
.r7-jp .dg b{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: var(--n-sz8);
  border-radius: var(--n-rad4);
  font-family: "Arial Black",Arial,sans-serif;
  font-size: 24px;
  color: var(--gold);
  background: linear-gradient(180deg,#060a0a,#132020);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  box-shadow: inset 0 -1px 0 rgba(125,253,235,.14);
}
.r7-jp .dg i{font-style: normal; color: var(--gold-2); font-weight: 900; font-size: var(--n-fs16); padding-top: 0px; padding-right: var(--n-sp1); padding-bottom: 0px; padding-left: var(--n-sp1);}
.r7-jp .lb{
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--n-sp9);
  column-gap: var(--n-sp9);
  margin-top: var(--n-sp9);
  font-size: var(--n-fs7);
  color: var(--mut);
}
.r7-jp .lb em{font-style: normal; font-weight: 900; color: var(--gold); letter-spacing: .1em;}

/* ---------- category chips ---------- */
.r7-chips{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(--n-sp7); column-gap: var(--n-sp7); padding-top: 0px; padding-right: var(--n-sp13); padding-bottom: 0px; padding-left: var(--n-sp13); margin-top: var(--n-sp13); margin-right: 0px; margin-bottom: var(--n-sp13); margin-left: 0px;}
.r7-chips a{
  display: grid;
  justify-items: center;
  row-gap: var(--n-sp5);
  column-gap: var(--n-sp5);
  padding-top: var(--n-sp9);
  padding-right: var(--n-sp2);
  padding-bottom: var(--n-sp9);
  padding-left: var(--n-sp2);
  border-radius: var(--n-rad6);
  background: var(--ink-3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  font-size: var(--n-fs3);
  font-weight: 800;
  color: var(--txt);
  text-align: center;
  line-height: 1.2;
  min-height: 62px;
  align-content: center;
}
.r7-chips a span{font-size: var(--n-fs16); line-height: 1;}

/* ---------- benefit cards ---------- */
.r7-bens{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: var(--n-sp10); column-gap: var(--n-sp10); padding-top: 0px; padding-right: var(--n-sp13); padding-bottom: 0px; padding-left: var(--n-sp13); margin-top: var(--n-sp16); margin-right: 0px; margin-bottom: var(--n-sp16); margin-left: 0px;}
.r7-bens .bn{
  display: grid;
  row-gap: var(--n-sp6);
  column-gap: var(--n-sp6);
  align-content: start;
  padding-top: var(--n-sp13);
  padding-right: var(--n-sp13);
  padding-bottom: var(--n-sp13);
  padding-left: var(--n-sp13);
  border-radius: var(--n-rad7);
  background: var(--ink-3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
}
.r7-bens .i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--n-sz2);
  height: var(--n-sz2);
  border-radius: var(--n-rad5);
  font-size: var(--n-fs14);
  background: linear-gradient(180deg,var(--red),var(--red-2));
}
.r7-bens b{font-size: var(--n-fs10); color: var(--gold);}
.r7-bens p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--n-fs7); color: var(--mut); line-height: 1.5;}

/* ---------- sections and game grids ---------- */
.r7-sec{margin-top: var(--n-sp19); margin-right: 0px; margin-bottom: var(--n-sp19); margin-left: 0px; padding-top: 0px; padding-right: var(--n-sp13); padding-bottom: 0px; padding-left: var(--n-sp13);}
.r7-sec .sh{display: flex; align-items: center; justify-content: space-between; row-gap: var(--n-sp10); column-gap: var(--n-sp10); margin-bottom: var(--n-sp10);}
.r7-sec .sh h2{font-size: 15.5px; color: var(--txt); padding-left: var(--n-sp11); position: relative;}
.r7-sec .sh h2::before{
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--n-sz10);
  height: 16px;
  border-radius: var(--n-rad1);
  background: linear-gradient(180deg,var(--gold),var(--gold-2));
}
.r7-sec .sh a{font-size: var(--n-fs7); font-weight: 700; color: var(--mut);}
.gg{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--n-sp9); column-gap: var(--n-sp9);}
.gc{
  position: relative;
  display: grid;
  row-gap: 0px;
  column-gap: 0px;
  border-radius: var(--n-rad6);
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--ink-3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
}
.gc img{width: var(--n-sz1); aspect-ratio: 1/1; object-fit: cover;}
.gc b{
  display: block;
  padding-top: var(--n-sp7);
  padding-right: var(--n-sp8);
  padding-bottom: var(--n-sp9);
  padding-left: var(--n-sp8);
  font-size: var(--n-fs5);
  font-weight: 700;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gc em{
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-style: normal;
  font-size: var(--n-fs1);
  font-weight: 900;
  letter-spacing: .07em;
  padding-top: var(--n-sp3);
  padding-right: var(--n-sp6);
  padding-bottom: var(--n-sp3);
  padding-left: var(--n-sp6);
  border-radius: var(--n-rad3);
  background: var(--red);
  color: #fff;
}

/* ---------- featured room ---------- */
.r7-feat{border-radius: var(--n-rad7); overflow-x: hidden; overflow-y: hidden; background: var(--ink-3); border-width: 1px; border-style: solid; border-color: var(--line);}
.r7-feat>img{width: var(--n-sz1); aspect-ratio: 16/9; object-fit: cover;}
.r7-feat .bd{display: grid; row-gap: var(--n-sp9); column-gap: var(--n-sp9); padding-top: var(--n-sp13); padding-right: var(--n-sp13); padding-bottom: var(--n-sp13); padding-left: var(--n-sp13);}
.r7-feat .bd>b{font-size: var(--n-fs12); color: var(--gold);}
.r7-feat .bd>span{font-size: var(--n-fs8); color: var(--mut); margin-top: -5px;}
.r7-feat .tip{
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--gold-2);
  padding-top: var(--n-sp9);
  padding-right: 0px;
  padding-bottom: var(--n-sp9);
  padding-left: var(--n-sp11);
  background: rgba(125,253,235,.05);
  border-radius: 0px 9px 9px 0px;
}
.r7-feat .tip strong{
  display: block;
  font-size: var(--n-fs5);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: var(--n-sp5);
}
.r7-feat .tip ul{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: var(--n-sp18); display: grid; row-gap: var(--n-sp5); column-gap: var(--n-sp5);}
.r7-feat .tip li{font-size: var(--n-fs7); color: var(--mut); font-style: italic; line-height: 1.5;}

/* ---------- promo cards ---------- */
.r7-promos{display: grid; row-gap: var(--n-sp11); column-gap: var(--n-sp11);}
.r7-promos .pc{
  display: grid;
  grid-template-columns: 104px minmax(0,1fr);
  row-gap: 0px;
  column-gap: 0px;
  border-radius: var(--n-rad7);
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--ink-3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
}
.r7-promos .pc img{width: var(--n-sz1); height: var(--n-sz1); min-height: 150px; object-fit: cover;}
.r7-promos .bd{display: grid; row-gap: var(--n-sp6); column-gap: var(--n-sp6); align-content: start; padding-top: var(--n-sp12); padding-right: var(--n-sp12); padding-bottom: var(--n-sp12); padding-left: var(--n-sp12);}
.r7-promos .tp{display: flex; align-items: center; row-gap: var(--n-sp8); column-gap: var(--n-sp8);}
.r7-promos .tp em{
  font-style: normal;
  font-size: var(--n-fs2);
  font-weight: 900;
  letter-spacing: .08em;
  padding-top: var(--n-sp3);
  padding-right: var(--n-sp7);
  padding-bottom: var(--n-sp3);
  padding-left: var(--n-sp7);
  border-radius: var(--n-rad3);
  background: var(--red);
  color: #fff;
}
.r7-promos .tp b{font-family: "Arial Black",Arial,sans-serif; font-size: var(--n-fs17); color: var(--gold);}
.r7-promos .bd strong{font-size: var(--n-fs10);}
.r7-promos .bd p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--n-fs6); color: var(--mut); line-height: 1.5;}
.r7-promos .mt{height: 6px; border-radius: var(--n-rad2); background: var(--ink); overflow-x: hidden; overflow-y: hidden;}
.r7-promos .mt i{
  display: block;
  height: var(--n-sz1);
  border-radius: var(--n-rad2);
  background: linear-gradient(90deg,var(--gold-2),var(--gold));
}
.r7-promos .bd small{font-size: var(--n-fs4); color: var(--mut);}
.r7-promos .r7-btn{min-height: var(--n-sz4); font-size: var(--n-fs8);}

/* ---------- winners ---------- */
.r7-wins{display: grid; row-gap: var(--n-sp8); column-gap: var(--n-sp8);}
.r7-wins .wc{
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  row-gap: var(--n-sp10);
  column-gap: var(--n-sp10);
  padding-top: var(--n-sp10);
  padding-right: var(--n-sp12);
  padding-bottom: var(--n-sp10);
  padding-left: var(--n-sp12);
  border-radius: var(--n-rad6);
  background: var(--ink-3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
}
.r7-wins .av{
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--n-sz4);
  height: var(--n-sz4);
  border-radius: 50%;
  font-size: var(--n-fs15);
  background: var(--ink-4);
}
.r7-wins .wc b{display: block; font-size: var(--n-fs8);}
.r7-wins .wc small{display: block; font-size: var(--n-fs4); color: var(--mut);}
.r7-wins .amt{text-align: right;}
.r7-wins .amt b{color: var(--ok); font-family: "Arial Black",Arial,sans-serif; font-size: var(--n-fs11);}

/* ---------- written content ---------- */
.r7-content{padding-top: var(--n-sp18); padding-right: var(--n-sp13); padding-bottom: var(--n-sp21); padding-left: var(--n-sp13);}
.r7-content h1{font-size: 23px; margin-bottom: var(--n-sp9);}
.r7-content h2{font-size: var(--n-fs13); color: var(--gold); margin-top: var(--n-sp20); margin-right: 0px; margin-bottom: var(--n-sp8); margin-left: 0px;}
.r7-content p{margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp12); margin-left: 0px;}
.r7-content .lead{font-size: 14.5px; color: #b9d6d2; margin-bottom: var(--n-sp15);}
.r7-content ul{margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp14); margin-left: 0px; padding-left: var(--n-sp19); display: grid; row-gap: var(--n-sp6); column-gap: var(--n-sp6); color: #b9d6d2;}
.r7-ph{display: grid; row-gap: var(--n-sp9); column-gap: var(--n-sp9); margin-bottom: var(--n-sp18);}
.r7-ph img{width: var(--n-sz1); aspect-ratio: 16/9; object-fit: cover; border-radius: var(--n-rad7); border-width: 1px; border-style: solid; border-color: var(--line-2);}
.r7-ph .eb{font-size: var(--n-fs3); font-weight: 900; letter-spacing: .17em; text-transform: uppercase; color: var(--gold-2);}
.r7-ph .act,.r7-content .act{display: flex; flex-wrap: wrap; row-gap: var(--n-sp9); column-gap: var(--n-sp9); margin-top: var(--n-sp3);}
.r7-content .act{margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp18); margin-left: 0px;}
.r7-kpis{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: var(--n-sp9); column-gap: var(--n-sp9); margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp18); margin-left: 0px;}
.r7-kpis>div{min-width:0;
  display: grid;
  row-gap: var(--n-sp2);
  column-gap: var(--n-sp2);
  padding-top: var(--n-sp12);
  padding-right: var(--n-sp12);
  padding-bottom: var(--n-sp12);
  padding-left: var(--n-sp12);
  border-radius: var(--n-rad6);
  background: var(--ink-3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
}
.r7-kpis b{font-family: "Arial Black",Arial,sans-serif; font-size: var(--n-fs15); color: var(--gold);}
.r7-kpis span{font-size: var(--n-fs5); color: var(--mut); line-height: 1.35;}
.r7-steps{counter-reset: s; list-style-type: none; list-style-position: outside; list-style-image: none; margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp18); margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: grid; row-gap: var(--n-sp8); column-gap: var(--n-sp8);}
.r7-steps li{
  counter-increment: s;
  position: relative;
  padding-top: var(--n-sp11);
  padding-right: var(--n-sp13);
  padding-bottom: var(--n-sp11);
  padding-left: 46px;
  border-radius: var(--n-rad6);
  background: var(--ink-3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  font-size: var(--n-fs9);
}
.r7-steps li::before{
  content: counter(s);
  position: absolute;
  left: 12px;
  top: 10px;
  width: var(--n-sz6);
  height: var(--n-sz6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 900;
  font-size: var(--n-fs8);
  background: linear-gradient(180deg,var(--gold),var(--gold-2));
  color: #02211d;
}
.r7-tw{overflow-x: auto; border-radius: var(--n-rad6); border-width: 1px; border-style: solid; border-color: var(--line-2); margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp18); margin-left: 0px;}
.r7-tbl{font-size: var(--n-fs8); min-width: 380px; background: var(--ink-3);}
.r7-tbl th{
  background: var(--ink);
  color: var(--gold);
  text-align: left;
  padding-top: var(--n-sp9);
  padding-right: var(--n-sp11);
  padding-bottom: var(--n-sp9);
  padding-left: var(--n-sp11);
  font-size: var(--n-fs5);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.r7-tbl td{padding-top: var(--n-sp9); padding-right: var(--n-sp11); padding-bottom: var(--n-sp9); padding-left: var(--n-sp11); border-top-width: 1px; border-top-style: solid; border-top-color: var(--line-2); color: #b9d6d2;}
.r7-faq{display: grid; row-gap: var(--n-sp8); column-gap: var(--n-sp8); margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp18); margin-left: 0px;}
.r7-faq details{border-radius: var(--n-rad6); border-width: 1px; border-style: solid; border-color: var(--line-2); background: var(--ink-3);}
.r7-faq summary{cursor: pointer; padding-top: var(--n-sp12); padding-right: var(--n-sp14); padding-bottom: var(--n-sp12); padding-left: var(--n-sp14); font-weight: 800; font-size: var(--n-fs10); color: var(--gold);}
.r7-faq p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: var(--n-sp14); padding-bottom: var(--n-sp13); padding-left: var(--n-sp14); font-size: var(--n-fs9); color: #b9d6d2;}
.r7-band{
  display: grid;
  row-gap: var(--n-sp11);
  column-gap: var(--n-sp11);
  margin-top: var(--n-sp20);
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: var(--n-sp17);
  padding-right: var(--n-sp17);
  padding-bottom: var(--n-sp17);
  padding-left: var(--n-sp17);
  border-radius: var(--n-rad7);
  background: linear-gradient(140deg,var(--red-2),#013530);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.r7-band b{font-size: 15px; line-height: 1.4;}

/* ---------- footer ---------- */
.r7-foot{
  display: grid;
  row-gap: var(--n-sp15);
  column-gap: var(--n-sp15);
  padding-top: var(--n-sp20);
  padding-right: var(--n-sp13);
  padding-bottom: var(--n-sp21);
  padding-left: var(--n-sp13);
  background: var(--ink);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line);
}
.r7-foot .brand{display: grid; row-gap: var(--n-sp9); column-gap: var(--n-sp9);}
.r7-foot p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--n-fs7); color: var(--mut); line-height: 1.6;}
.r7-foot .links{display: flex; flex-wrap: wrap; row-gap: var(--n-sp7); column-gap: var(--n-sp7);}
.r7-foot .links a{
  font-size: var(--n-fs7);
  color: var(--txt);
  padding-top: var(--n-sp8);
  padding-right: var(--n-sp11);
  padding-bottom: var(--n-sp8);
  padding-left: var(--n-sp11);
  border-radius: 8px;
  background: var(--ink-3);
  min-height: var(--n-sz2);
  display: inline-flex;
  align-items: center;
}
.r7-foot .pay,.r7-foot .trust{display: flex; flex-wrap: wrap; row-gap: var(--n-sp7); column-gap: var(--n-sp7);}
.r7-foot .pay span,.r7-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding-top: 0px;
  padding-right: var(--n-sp10);
  padding-bottom: 0px;
  padding-left: var(--n-sp10);
  border-radius: var(--n-rad4);
  background: #eafffb;
}
.r7-foot .pay img{max-height: 18px; width: auto; object-fit: contain;}
.r7-foot .trust img{max-height: 20px; width: auto; object-fit: contain;}
.r7-foot .legal{
  display: flex;
  align-items: flex-start;
  row-gap: var(--n-sp10);
  column-gap: var(--n-sp10);
  padding-top: var(--n-sp13);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line-2);
}
.r7-foot .age{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: var(--n-sz7);
  height: var(--n-sz7);
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: var(--gold-2);
  color: var(--gold);
  font-weight: 900;
  font-size: var(--n-fs5);
}
.r7-foot small{font-size: var(--n-fs5); color: var(--mut);}

/* ---------- fixed furniture ---------- */
.r7-bar{
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: min(var(--col),100%);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  height: var(--bar);
  padding-top: var(--n-sp8);
  background: linear-gradient(180deg,#101a1a,#060a0a);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line);
}
.r7-bar a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: var(--n-sp2);
  column-gap: var(--n-sp2);
  color: var(--mut);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  position: relative;
}
.r7-bar a .i{font-size: var(--n-fs13); line-height: 1;}
/* The centre slot lifts into a coin that overhangs the bar's top edge. */
.r7-bar a.mid{color: var(--gold); justify-content: flex-end; padding-bottom: var(--n-sp7);}
.r7-bar a.mid .i{
  position: absolute;
  top: -20px;
  width: var(--n-sz5);
  height: var(--n-sz5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 25px;
  color: #fff;
  background: linear-gradient(180deg,var(--red),var(--red-2));
  border-width: 3px;
  border-style: solid;
  border-color: #0a1111;
  box-shadow: 0 4px 12px rgba(3,185,164,.4);
}
.r7-side{position: fixed; right: 9px; bottom: calc(var(--bar) + 16px); z-index: 55; display: grid; row-gap: var(--n-sp9); column-gap: var(--n-sp9);}
.r7-side a{
  display: grid;
  justify-items: center;
  row-gap: var(--n-sp1);
  column-gap: var(--n-sp1);
  width: 54px;
  padding-top: var(--n-sp8);
  padding-right: var(--n-sp2);
  padding-bottom: var(--n-sp8);
  padding-left: var(--n-sp2);
  border-radius: var(--n-rad7);
  background: rgba(13,21,21,.94);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--txt);
}
.r7-side a span{font-size: var(--n-fs14); line-height: 1;}
.r7-side a em{font-style: normal; font-size: var(--n-fs1); font-weight: 800; letter-spacing: .04em; color: var(--mut);}

@media(min-width:1024px){
  /* Still the phone column, just floated on the ink field with the rail beside it rather than over. */
  .r7-shell{margin-top: var(--n-sp18); margin-right: auto; margin-bottom: 0px; margin-left: auto; border-radius: 18px; min-height: 0px; overflow-x: hidden; overflow-y: hidden;}
  body{padding-bottom: calc(var(--bar) + 36px);}
  .r7-side{right: calc(50% - var(--col)/2 - 72px);}
}
@media(max-width:400px){
  .r7-chips{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
  .r7-bens{grid-template-columns: minmax(0,1fr);}
  .gg{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  /* Stack the promo card below ~400px. Keeping the side thumbnail squeezed it to 86x222, a 2.6:1
     sliver once the body text set the row height, and the house limit is 2.2:1. Stacked, the art
     gets a proper 16:9 crop and the card reads as a card. */
  .r7-promos .pc{grid-template-columns: minmax(0,1fr);}
  .r7-promos .pc img{height: auto; min-height: 0px; aspect-ratio: 16/9;}
  .r7-head .acts .r7-btn{padding-top: 0px; padding-right: var(--n-sp10); padding-bottom: 0px; padding-left: var(--n-sp10); font-size: var(--n-fs6);}
  .r7-logo b{font-size: var(--n-fs15);}
  .r7-jp .dg b{min-width: 24px; height: var(--n-sz2); font-size: var(--n-fs16);}
  .r7-content h1{font-size: var(--n-fs17);}
  .r7-side a{width: var(--n-sz5);}
}
@media(prefers-reduced-motion:reduce){
  .r7-car .track{scroll-behavior: auto;}
}

/* ---------- entry offer bottom sheet ---------- */
.r7-sheet{
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(4,8,8,.8);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.r7-sheet.on{display: flex;}
.r7-sheet .bx{
  position: relative;
  width: min(var(--col),100%);
  max-height: 88vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 20px 20px 0px 0px;
  background: var(--ink-2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-bottom-width: 0px;
  border-bottom-style: none;
  border-bottom-color: currentcolor;
}
.r7-sheet .bx::before{
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--n-sz8);
  height: var(--n-sz10);
  border-radius: var(--n-rad1);
  background: var(--ink-4);
}
.r7-sheet .x{
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 3;
  width: var(--n-sz3);
  height: var(--n-sz3);
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  background: rgba(7,11,11,.9);
  color: var(--txt);
  font-size: var(--n-fs15);
  line-height: 1;
  cursor: pointer;
}
.r7-sheet img{width: var(--n-sz1); aspect-ratio: 16/9; object-fit: cover; border-radius: 19px 19px 0px 0px; margin-top: var(--n-sp16);}
.r7-sheet .bd{display: grid; row-gap: var(--n-sp9); column-gap: var(--n-sp9); padding-top: var(--n-sp15); padding-right: var(--n-sp15); padding-bottom: var(--n-sp19); padding-left: var(--n-sp15);}
.r7-sheet .bd em{
  justify-self: start;
  font-style: normal;
  font-size: var(--n-fs2);
  font-weight: 900;
  letter-spacing: .08em;
  padding-top: var(--n-sp3);
  padding-right: var(--n-sp8);
  padding-bottom: var(--n-sp3);
  padding-left: var(--n-sp8);
  border-radius: var(--n-rad3);
  background: var(--red);
  color: #fff;
}
.r7-sheet .bd b{font-size: var(--n-fs14); color: var(--gold);}
.r7-sheet .bd p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--n-fs9); color: var(--mut); line-height: 1.55;}
.r7-sheet .later{
  min-height: 42px;
  border-width: 0px;
  border-style: none;
  border-color: currentcolor;
  background: none;
  color: var(--mut);
  font-style: normal;
  font-variant: normal;
  font-weight: 700;
  font-stretch: normal;
  font-size: var(--n-fs9);
  line-height: normal;
  font-family: var(--font);
  cursor: pointer;
  border-radius: var(--n-rad5);
}

/* === image focal points === */
/* The part of the picture that must survive the crop is pinned to the same
   point of the box. */
img[src$="/assets/img/game-dragon-tiger.jpg"]{object-position: 20.1% 61.3%;}
img[src$="/assets/img/game-speed-baccarat.jpg"]{object-position: 46.3% 37.1%;}
img[src$="/assets/img/promo-welcome.jpg"]{object-position: 40.8% 32.7%;}
/* === end image focal points === */