/* bull99casino.com - the gateway.
   Navy chrome and navy sections, a sky-blue active tab, one full-bleed hero lockup carrying three
   feature marks and a single gold action, a notice strip, then reference tables. Wider measure
   and fewer, larger blocks throughout: this one is read, not browsed.
   Namespace: .b9-

   Conventions in here:
     - The corner radii, the fixed widths and heights, the line heights, the font stacks and
       the durations used more than once are named once in :root as --g-* 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 {
  --navy: #1c1a17;
  --navy2: #100f0c;
  --navy3: #2a2721;
  --sky: #c9a227;
  --sky2: #e3c76a;
  --gold: #b3412b;
  --text: #efe7d6;
  --mute: #a89c86;
  --line: #3a352b;
  --rad: 8px;
  --mx: 1180px;

  /* named values used more than once */
  --g-rad1: 6px;
  --g-rad2: 7px;
  --g-sz1: 100%;
  --g-sz2: 44px;
  --g-sz3: 38px;
  --g-sz4: 34px;
  --g-sz5: 22px;
  --g-sz6: 28px;
  --g-sz7: 32px;
  --g-sz8: 33px;
  --g-sz9: 380px;
  --g-sz10: 54px;
  --g-sz11: 9px;
}

*{box-sizing: border-box;}
html{overflow-x: clip;}
body{
  margin-block: 0px;
  margin-inline: 0px;
  background: var(--navy2);
  color: var(--text);
  font: 16.5px/1.74 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,
       "PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-text-size-adjust: 100%;
}
img{max-width: var(--g-sz1); height: auto; min-width: 0px;}
a{color: inherit; text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
h1,h2,h3{line-height: 1.28; margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: .5em; margin-inline-start: 0px;}
h1{font-size: clamp(27px,4.6vw,46px); font-weight: 800; letter-spacing: -.015em;}
h2{font-size: clamp(22px,3vw,32px); font-weight: 800; color: var(--sky);}
h3{font-size: 19px;}
p{margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 1.05em; margin-inline-start: 0px;}
main{display: block;}
table{border-collapse: collapse;}

.b9-hide{display: none !important;}
.b9-off{display: none !important;}

/* ---------------------------------------------------------------- buttons */
.b9-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: 8px;
  column-gap: 8px;
  padding-block: 12px;
  padding-inline: 22px;
  border-radius: var(--rad);
  font-weight: 700;
  font-size: 15px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
  min-height: 48px;
  text-align: center;
}
.b9-btn.g,.b9-btn.p{
  background: linear-gradient(180deg,#e0c25c,var(--gold));
  color: #221b06;
  box-shadow: 0 6px 20px rgba(240,180,41,.26);
}
.b9-btn.o{background: transparent; border-color: var(--sky); color: var(--sky);}
.b9-btn.lg{padding-block: 15px; padding-inline: 30px; font-size: 16.5px; min-height: var(--g-sz10);}

/* ---------------------------------------------------------------- chrome */
.b9-head{background: var(--navy2); position: static; border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--line);}
.b9-head .bar{
  max-width: var(--mx);
  margin-block: 0px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  row-gap: 12px;
  column-gap: 12px;
  padding-block: 13px;
  padding-inline: 16px;
  flex-wrap: wrap;
  row-gap: 10px;
}
.b9-logo{display: flex; align-items: center; row-gap: 10px; column-gap: 10px; font-weight: 800; min-width: 0px;}
.b9-logo svg{flex-grow: 0; flex-shrink: 0; flex-basis: auto; width: var(--g-sz3); height: var(--g-sz3);}
.b9-logo .wm{display: flex; flex-direction: column; line-height: 1.08; min-width: 0px;}
.b9-logo .wm b{font-size: 23px; color: var(--sky); white-space: nowrap; letter-spacing: .01em;}
.b9-logo .wm small{
  font-size: 9px;
  color: var(--mute);
  letter-spacing: .12em;
  min-width: 0px;
  overflow-wrap: anywhere;
}
@media(max-width:420px){.b9-logo .wm small{font-size: 8px; letter-spacing: .05em;}}
.b9-burger{
  width: var(--g-sz2);
  height: var(--g-sz2);
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--g-rad2);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}
.b9-acct{display: flex; row-gap: 8px; column-gap: 8px; align-items: center; margin-inline-start: auto;}
.b9-lang{display: flex; row-gap: 5px; column-gap: 5px;}
.b9-lang a{
  white-space: nowrap;
  font-size: 12px;
  padding-block: 7px;
  padding-inline: 11px;
  border-radius: var(--g-rad1);
  min-height: var(--g-sz2);
  min-width: 44px;
  display: grid;
  align-items: center;
  justify-items: center;
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--mute);
  min-height: var(--g-sz4);
  display: inline-flex;
  align-items: center;
}
.b9-lang a.on{background: var(--sky); color: #0d0c0a; border-color: var(--sky); font-weight: 700;}

/* the nav bar, with a sky-blue active tab */
.b9-menu{background: var(--navy); display: flex; justify-content: center; flex-wrap: wrap;}
.b9-menu .it{position: relative;}
.b9-menu .it>a{
  display: block;
  padding-block: 14px;
  padding-inline: 18px;
  font-size: 14.5px;
  color: var(--text);
  white-space: nowrap;
}
.b9-menu .it:hover>a,.b9-menu .it:focus-within>a{
  background: var(--sky);
  color: #0d0c0a;
  font-weight: 700;
}
.b9-menu .pan{
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0px;
  z-index: 30;
  min-width: 280px;
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0px 0px 8px 8px;
  padding-block: 12px;
  padding-inline: 12px;
  row-gap: 9px;
  column-gap: 9px;
  flex-wrap: wrap;
  box-shadow: 0 16px 34px rgba(3,12,26,.5);
}
.b9-menu .it:hover .pan,.b9-menu .it:focus-within .pan{display: flex;}
.b9-menu .pan .dark{
  background: #efe7d6;
  border-radius: var(--g-rad2);
  padding-block: 8px;
  padding-inline: 11px;
  height: var(--g-sz2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
.b9-menu .pan .dark img{max-height: var(--g-sz5); width: auto; min-width: 0px; object-fit: contain;}

.b9-tick{background: var(--navy3); border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--line);}
.b9-tick p{
  max-width: var(--mx);
  margin-block: 0px;
  margin-inline: auto;
  padding-block: 9px;
  padding-inline: 16px;
  font-size: 13.5px;
  color: var(--sky2);
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- hero lockup */
.b9-hero{
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--navy);
}
.b9-hero img{position: absolute; inset-block: 0px; inset-inline: 0px; width: var(--g-sz1); height: var(--g-sz1); object-fit: cover; opacity: .46;}
/* At phone width the hero box is taller than it is wide, so object-fit:cover keeps a narrow
   vertical slice of a 16:9 source. Centred, this one lands on the roulette wheel and an empty
   chair and crops the player out of frame entirely. Anchor the crop to where she actually is. */
.b9-hero img[src$="hero-casino-floor.jpg"]{object-position: 68% center;}
.b9-hero .tx{
  position: relative;
  z-index: 1;
  max-width: var(--mx);
  margin-block: 0px;
  margin-inline: auto;
  padding-block: 46px;
  padding-inline: 16px;
  width: var(--g-sz1);
}
.b9-hero .eb{
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: 10px;
  font-weight: 700;
}
.b9-hero h1{
  color: #fff;
  margin-block-end: .4em;
  max-width: 17ch;
  text-shadow: 0 3px 22px rgba(0,0,0,.45);
}
.b9-hero .lead{color: var(--text); font-size: 16px; max-width: 54ch; margin-block-end: 18px;}
.b9-hero .act{display: flex; row-gap: 11px; column-gap: 11px; flex-wrap: wrap;}

/* the three feature marks inside the lockup */
.b9-feat{list-style-type: none; list-style-position: outside; list-style-image: none; padding-block: 0px; padding-inline: 0px; margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 20px; margin-inline-start: 0px; display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 10px;}
.b9-feat li{
  display: flex;
  flex-direction: column;
  row-gap: 1px;
  column-gap: 1px;
  background: rgba(6,25,52,.62);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(52,171,240,.4);
  border-radius: var(--rad);
  padding-block: 11px;
  padding-inline: 15px;
  min-width: 0px;
}
.b9-feat i{font-style: normal; font-size: 17px; color: var(--sky); margin-block-end: 2px;}
.b9-feat b{font-size: 13.5px; color: #fff;}
.b9-feat em{font-style: normal; font-size: 12px; color: var(--mute);}

/* the notice strip */
.b9-notice{background: var(--navy3); border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--line);}
.b9-notice p{
  max-width: var(--mx);
  margin-block: 0px;
  margin-inline: auto;
  padding-block: 12px;
  padding-inline: 16px;
  font-size: 13.5px;
  color: var(--sky2);
}

.b9-trust{max-width: var(--mx); margin-block: 24px; margin-inline: auto; padding-block: 0px; padding-inline: 16px; display: flex; flex-wrap: wrap; row-gap: 9px; column-gap: 9px;}
.b9-trust span{
  display: flex;
  align-items: center;
  row-gap: 7px;
  column-gap: 7px;
  font-size: 13px;
  color: var(--mute);
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-block: 9px;
  padding-inline: 14px;
}
.b9-trust i{color: var(--sky); font-style: normal;}

/* ---------------------------------------------------------------- category tiles */
.b9-cats{
  max-width: var(--mx);
  margin-block-start: 0px;
  margin-inline-end: auto;
  margin-block-end: 30px;
  margin-inline-start: auto;
  padding-block: 0px;
  padding-inline: 16px;
  display: grid;
  row-gap: 12px;
  column-gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media(min-width:760px){.b9-cats{grid-template-columns: 1fr 1fr 1fr;}}
.b9-cats .tile{
  position: relative;
  border-radius: var(--rad);
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-width: 0px;
}
.b9-cats .tile img{display: block; width: var(--g-sz1); aspect-ratio: 3/2; object-fit: cover;}
.b9-cats .cap{
  position: absolute;
  inset-block-start: auto;
  inset-inline-end: 0px;
  inset-block-end: 0px;
  inset-inline-start: 0px;
  padding-block: 11px;
  padding-inline: 13px;
  background: linear-gradient(180deg,rgba(11,47,102,0),rgba(6,20,42,.95) 55%);
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  column-gap: 2px;
  min-width: 0px;
}
.b9-cats .cap b{font-size: 15px; color: var(--sky);}
.b9-cats .cap em{font-style: normal; font-size: 12px; color: var(--mute); line-height: 1.4;}

/* ---------------------------------------------------------------- reference tables */
.b9-dev,.b9-stack,.b9-wall,.b9-apk,.b9-live,.b9-esp,.b9-pool{
  max-width: var(--mx);
  margin-block-start: 0px;
  margin-inline-end: auto;
  margin-block-end: 32px;
  margin-inline-start: auto;
  padding-block: 0px;
  padding-inline: 16px;
}
.b9-dev p,.b9-stack p{color: var(--mute); max-width: 70ch;}
.b9-tw{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
}
.b9-tbl{width: var(--g-sz1); font-size: 14.5px; background: var(--navy); font-variant-numeric: tabular-nums;}
.b9-tbl th{
  background: var(--navy2);
  color: var(--sky);
  text-align: left;
  padding-block: 11px;
  padding-inline: 15px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--line);
}
.b9-tbl td{padding-block: 11px; padding-inline: 15px; border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--line); color: var(--mute);}
.b9-tbl td b{color: var(--text);}
.b9-tbl .amt{text-align: right; font-weight: 700; color: var(--gold);}
.b9-stack .b9-btn{margin-block-start: 15px;}

/* provider wall */
.b9-wall .logos{display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 10px; margin-block-end: 12px;}
/* ONE chip treatment sitewide: a pale plate, so white-artwork badges cannot vanish into it. */
.b9-wall .dark{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background: #efe7d6;
  border-width: 1px;
  border-style: solid;
  border-color: #d8cdb6;
  border-radius: var(--g-rad2);
  padding-block: 10px;
  padding-inline: 15px;
  height: 56px;
}
.b9-wall .dark img{max-height: var(--g-sz6); width: auto; min-width: 0px; object-fit: contain;}
.b9-wall .sub{font-size: 14px; color: var(--mute); margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 8px; margin-inline-start: 0px;}
.b9-wall .chips{display: flex; flex-wrap: wrap; row-gap: 7px; column-gap: 7px;}
.b9-wall .chip{
  font-size: 12.5px;
  color: var(--mute);
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--g-rad1);
  padding-block: 7px;
  padding-inline: 12px;
}

/* game strip on the pages where showing them is the point */
.b9-games{display: grid; row-gap: 11px; column-gap: 11px; grid-template-columns: 1fr 1fr; margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 24px; margin-inline-start: 0px;}
@media(min-width:620px){.b9-games{grid-template-columns: 1fr 1fr 1fr;}}
.gc{
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--navy);
  min-width: 0px;
}
.gc img{display: block; width: var(--g-sz1); aspect-ratio: 1/1; object-fit: cover;}
.gc .mt{padding-block: 8px; padding-inline: 11px; display: flex; flex-direction: column; row-gap: 1px; column-gap: 1px; min-width: 0px;}
.gc .mt b{font-size: 13px; white-space: nowrap; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; display: block;}
.gc .mt em{font-style: normal; font-size: 11.5px; color: var(--sky);}

.b9-esp .tx .eb{
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-block-end: 6px;
}
.b9-esp .mk{list-style-type: none; list-style-position: outside; list-style-image: none; padding-block: 0px; padding-inline: 0px; margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 16px; margin-inline-start: 0px; display: flex; flex-wrap: wrap; row-gap: 7px; column-gap: 7px;}
.b9-esp .mk li{
  font-size: 13px;
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--g-rad1);
  padding-block: 7px;
  padding-inline: 12px;
  color: var(--mute);
}
.b9-esp .ti{display: flex; flex-wrap: wrap; row-gap: 9px; column-gap: 9px; margin-block-end: 10px;}
.b9-esp .t{
  font-size: 13px;
  font-weight: 700;
  color: var(--sky);
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--g-rad2);
  padding-block: 11px;
  padding-inline: 14px;
}
.b9-esp .bk{flex-grow: 1; flex-shrink: 1; flex-basis: 100%; font-size: 13px; color: var(--mute);}
.b9-pool{
  text-align: center;
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-block: 26px;
  padding-inline: 16px;
  max-width: calc(var(--mx) - 32px);
}
.b9-pool .jp{display: flex; align-items: baseline; justify-content: center; row-gap: 10px; column-gap: 10px; margin-block-end: 8px;}
.b9-pool .jp span{font-size: 14px; color: var(--mute); letter-spacing: .1em;}
.b9-pool .jp b{
  font-size: clamp(30px,6vw,48px);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- page body */
.b9-content{max-width: 820px; margin-block: 0px; margin-inline: auto; padding-block-start: 0px; padding-inline-end: 16px; padding-block-end: 32px; padding-inline-start: 16px;}
.b9-content h2{margin-block-start: 1.7em;}
.b9-content a{color: var(--sky); text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; text-underline-offset: 3px;}
.b9-kpis{
  display: grid;
  row-gap: 11px;
  column-gap: 11px;
  grid-template-columns: 1fr 1fr;
  margin-block-start: 0px;
  margin-inline-end: 0px;
  margin-block-end: 26px;
  margin-inline-start: 0px;
  padding-block: 0px;
  padding-inline: 0px;
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}
@media(min-width:640px){.b9-kpis{grid-template-columns: 1fr 1fr 1fr 1fr;}}
.b9-kpis li{
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-block: 15px;
  padding-inline: 15px;
}
.b9-kpis b{display: block; font-size: 22px; color: var(--gold); font-variant-numeric: tabular-nums;}
.b9-kpis span{font-size: 12.5px; color: var(--mute);}
.b9-steps{list-style-type: none; list-style-position: outside; list-style-image: none; counter-reset: s; padding-block: 0px; padding-inline: 0px; margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 26px; margin-inline-start: 0px;}
.b9-steps li{counter-increment: s; position: relative; padding-block-start: 0px; padding-inline-end: 0px; padding-block-end: 16px; padding-inline-start: 48px;}
.b9-steps li::before{
  content: counter(s);
  position: absolute;
  inset-inline-start: 0px;
  inset-block-start: 0px;
  width: var(--g-sz8);
  height: var(--g-sz8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--g-rad2);
  background: var(--sky);
  color: #0d0c0a;
  font-weight: 800;
  font-size: 15px;
}
.b9-steps b{display: block; color: #fff; margin-block-end: 2px;}
.b9-content .b9-tw{margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 26px; margin-inline-start: 0px;}
.b9-faq{margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 26px; margin-inline-start: 0px;}
.b9-faq details{
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-block: 13px;
  padding-inline: 16px;
  margin-block-end: 10px;
}
.b9-faq summary{cursor: pointer; font-weight: 700; color: #fff; min-height: var(--g-sz6);}
.b9-band{
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--sky);
  border-radius: var(--rad);
  padding-block: 22px;
  padding-inline: 22px;
  margin-block-start: 0px;
  margin-inline-end: 0px;
  margin-block-end: 26px;
  margin-inline-start: 0px;
  text-align: center;
}
.b9-band b{display: block; font-size: 19px; color: var(--gold); margin-block-end: 6px;}
.b9-band p{color: var(--mute); font-size: 14.5px; margin-block-end: 0px;}

/* APK block */
.b9-apk{display: grid; row-gap: 18px; column-gap: 18px; grid-template-columns: 1fr; align-items: center;}
@media(min-width:820px){.b9-apk{grid-template-columns: 260px minmax(0,1fr);}}
.b9-apk img{border-radius: var(--rad); border-width: 1px; border-style: solid; border-color: var(--line); width: var(--g-sz1);}
.b9-apk .tx p{color: var(--mute);}
.b9-apk .meta{display: flex; flex-wrap: wrap; row-gap: 7px; column-gap: 7px; margin-block-end: 14px;}
.b9-apk .meta span{
  font-size: 12.5px;
  color: var(--mute);
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--g-rad1);
  padding-block: 7px;
  padding-inline: 12px;
}

/* ---------------------------------------------------------------- footer */
.b9-foot{background: #0a0908; border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--line); padding-block-start: 32px; padding-inline-end: 0px; padding-block-end: 96px; padding-inline-start: 0px; margin-block-start: 14px;}
.b9-foot .cols{
  max-width: var(--mx);
  margin-block: 0px;
  margin-inline: auto;
  padding-block: 0px;
  padding-inline: 16px;
  display: grid;
  row-gap: 26px;
  column-gap: 26px;
  grid-template-columns: 1fr;
}
@media(min-width:760px){.b9-foot .cols{grid-template-columns: 2fr 1fr 1fr;}}
.b9-foot .w b{
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky);
  display: block;
  margin-block-start: 0px;
  margin-inline-end: 0px;
  margin-block-end: 10px;
  margin-inline-start: 0px;
}
.b9-foot ul{list-style-type: none; list-style-position: outside; list-style-image: none; padding-block: 0px; padding-inline: 0px; margin-block: 0px; margin-inline: 0px;}
.b9-foot li{margin-block-end: 7px; font-size: 14px; color: var(--mute);}
.b9-foot .ab{font-size: 13.5px; color: var(--mute); max-width: 58ch;}
.b9-foot .b9-logo{margin-block-end: 12px;}
.b9-foot .b9-logo svg{width: var(--g-sz7); height: var(--g-sz7);}
.b9-foot .pay,.b9-foot .trust{display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; margin-block-start: 12px;}
.b9-foot .pay span,.b9-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background: #efe7d6;
  border-radius: var(--g-rad2);
  padding-block: 7px;
  padding-inline: 10px;
  height: 40px;
}
.b9-foot .pay img,.b9-foot .trust img{max-height: var(--g-sz5); width: auto; min-width: 0px; object-fit: contain;}
.b9-foot .soc{display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; margin-block-start: 12px;}
.b9-foot .lic,.b9-foot .rg{font-size: 12.5px; color: var(--mute); margin-block-start: 12px; margin-inline-end: 0px; margin-block-end: 0px; margin-inline-start: 0px;}
.b9-foot .cr{
  max-width: var(--mx);
  margin-block-start: 18px;
  margin-inline-end: auto;
  margin-block-end: 0px;
  margin-inline-start: auto;
  padding-block-start: 14px;
  padding-inline-end: 16px;
  padding-block-end: 0px;
  padding-inline-start: 16px;
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--line);
  font-size: 12.5px;
  color: var(--mute);
}
.coin{
  display: inline-flex;
  align-items: center;
  row-gap: 6px;
  column-gap: 6px;
  font-size: 13.5px;
  color: var(--sky);
  min-height: var(--g-sz2);
}

/* bottom bar + sticky CTA */
.b9-bar{
  position: fixed;
  inset-block-start: auto;
  inset-inline-end: 0px;
  inset-block-end: 0px;
  inset-inline-start: 0px;
  z-index: 40;
  background: var(--navy);
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--line);
  display: flex;
  padding-block-end: env(safe-area-inset-bottom);
}
.b9-bar a{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2px;
  column-gap: 2px;
  padding-block: 8px;
  padding-inline: 4px;
  font-size: 10.5px;
  color: var(--mute);
  min-height: var(--g-sz10);
  justify-content: center;
  text-align: center;
}
.b9-bar .i{font-style: normal; font-size: 17px; color: var(--sky);}
@media(min-width:1000px){.b9-bar{display: none;}.b9-foot{padding-block-end: 32px;}}
.b9-scta{position: fixed; inset-block-start: auto; inset-inline-end: 14px; inset-block-end: 64px; inset-inline-start: auto; z-index: 41;}
@media(min-width:1000px){.b9-scta{inset-block-start: auto; inset-inline-end: 20px; inset-block-end: 20px; inset-inline-start: auto;}}

/* ---------------------------------------------------------------- entry modal */
.b9-pop{
  position: fixed;
  inset-block: 0px;
  inset-inline: 0px;
  z-index: 60;
  background: rgba(3,10,22,.84);
  display: none;
  align-items: center;
  justify-content: center;
  padding-block: 16px;
  padding-inline: 16px;
}
.b9-pop.on{display: flex;}
.b9-pop .bx{
  position: relative;
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--sky);
  border-radius: 14px;
  max-width: var(--g-sz9);
  width: var(--g-sz1);
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
.b9-pop .x{
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: var(--g-sz4);
  height: var(--g-sz4);
  border-radius: 50%;
  background: var(--navy2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--text);
  z-index: 2;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.b9-pop .hd{padding-block-start: 17px; padding-inline-end: 18px; padding-block-end: 0px; padding-inline-start: 18px;}
.b9-pop .panes{overflow-y: auto;}
.b9-pop .pane{padding-block: 18px; padding-inline: 18px;}
.b9-pop .eb{
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-block-end: 6px;
}
.b9-pop .big{
  display: block;
  font-size: 27px;
  color: var(--gold);
  font-weight: 800;
  margin-block-end: 7px;
  font-variant-numeric: tabular-nums;
}
.b9-pop p{font-size: 14.5px; color: var(--mute); margin-block-end: 15px;}
.b9-pop .pg{
  display: flex;
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
  padding-block: 12px;
  padding-inline: 16px;
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--line);
  background: var(--navy2);
}
.b9-pop .pv,.b9-pop .nx{
  width: var(--g-sz3);
  height: var(--g-sz3);
  border-radius: var(--g-rad2);
  background: var(--navy);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
}
.b9-pop .ct{font-size: 12.5px; color: var(--mute); margin-inline-start: auto; font-variant-numeric: tabular-nums;}
.b9-pop .dots{display: flex; row-gap: 5px; column-gap: 5px;}
.b9-pop .dot{
  width: var(--g-sz11);
  height: var(--g-sz11);
  border-radius: 50%;
  background: var(--line);
  border-width: 0px;
  border-style: none;
  border-color: currentcolor;
  padding-block: 0px;
  padding-inline: 0px;
  cursor: pointer;
}
.b9-pop .dot.on{background: var(--sky);}

/* ---------------------------------------------------------------- phones */
@media(max-width:999px){
  .b9-burger{display: flex;}
  .b9-menu{overflow-x: auto; scrollbar-width: none; justify-content: flex-start;}
  .b9-menu::-webkit-scrollbar{display: none;}
  .b9-menu .pan{display: none !important;}
  .b9-acct{
    order: 3;
    width: var(--g-sz1);
    margin-inline-start: 0px;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 8px;
    min-width: 0px;
  }
  .b9-acct .b9-btn{flex-grow: 1; flex-shrink: 1; flex-basis: auto; max-width: 190px; min-width: 0px;}
  .b9-lang{min-width: 0px; flex-wrap: wrap;}
  .b9-hero{min-height: var(--g-sz9);}
}
@media(max-width:400px){
  .b9-acct{justify-content: flex-start; row-gap: 8px; column-gap: 8px;}
  .b9-lang{flex-grow: 1; flex-shrink: 1; flex-basis: 100%; order: -1;}
  .b9-acct .b9-btn{flex-grow: 1; flex-shrink: 1; flex-basis: calc(50% - 4px); max-width: none;}
  .b9-lang a{padding-block: 6px; padding-inline: 9px; font-size: 11.5px;}
  .b9-feat li{flex-grow: 1; flex-shrink: 1; flex-basis: 100%;}
}