/* mybet88official.com - the operator floor.
   Royal indigo ground, gold for money. The organising idea is the live transactions ledger:
   three columns on desktop with the hero and the ledger on the left, the shelves in the middle
   and the account panel on the right.
   Namespace: .m7-

   House style for this sheet:
     - the type scale is a set of tokens in :root (--cc-fs*) and a rule names the token rather
       than the number;
     - padding and margin are written per physical edge and borders as width / style / colour,
       so nothing is reset by accident through a shorthand;
     - flex is flex-grow / flex-shrink / flex-basis and flex-flow is split into flex-direction
       plus flex-wrap;
     - gap is row-gap plus column-gap, overflow is overflow-x plus overflow-y, and transition is
       property / duration / timing-function / delay.

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

:root {
  --ink: #07231f;
  /* page ground: deep indigo, almost black */
  --ink2:#0b3029;
  /* raised panel */
  --pan: #092a24;
  /* inset panel */
  --line: #1b4a40;
  --gold: #e8b542;
  /* money, CTAs, the wordmark */
  --gold2: #b88a2a;
  --text: #e6f2ee;
  --mute: #8fb3a9;
  --win: #36d399;
  /* deposits in */
  --out: #ffb648;
  /* withdrawals out */
  --rad: 14px;
  --mx: 1320px;

  /* token layer */
  --cc-fs1: 10.5px;
  --cc-fs2: 11px;
  --cc-fs3: 11.5px;
  --cc-fs4: 12px;
  --cc-fs5: 12.5px;
  --cc-fs6: 13px;
  --cc-fs7: 13.5px;
  --cc-fs8: 14px;
  --cc-fs9: 14.5px;
  --cc-fs10: 15px;
  --cc-fs11: 17px;
  --cc-fs12: 18px;
}

*{box-sizing: border-box;}
html{overflow-x: clip;}   /* body-only overflow-x fools Chromium but not iOS */
body{
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  background: var(--ink);
  color: var(--text);
  font: 16px/1.65 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,
       "PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-text-size-adjust: 100%;
}
img{max-width: 100%; height: auto; min-width: 0;}   /* height:auto or injected attrs beat aspect-ratio */
a{color: inherit; text-decoration: none;}
h1,h2,h3{line-height: 1.25; margin-top: 0; margin-right: 0; margin-bottom: .5em; margin-left: 0;}
h1{font-size: clamp(25px,4.1vw,42px); letter-spacing: -.01em;}
h2{font-size: clamp(20px,2.7vw,29px);}
h3{font-size: var(--cc-fs12);}
p{margin-top: 0; margin-right: 0; margin-bottom: 1em; margin-left: 0;}
main{display: block;}
table{border-collapse: collapse;}

/* A hide utility has to beat every rule it switches off, or the panel it is meant to
   switch off stays visible and the modal shows every offer at once. */
.m7-hide{display: none !important;}
.m7-off{display: none !important;}

/* ---------------------------------------------------------------- buttons */
.m7-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: 7px;
  column-gap: 7px;
  padding-top: 11px;
  padding-right: 18px;
  padding-bottom: 11px;
  padding-left: 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: var(--cc-fs8);
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
  min-height: 44px;
  text-align: center;
}
.m7-btn.p,.m7-btn.g{
  background: linear-gradient(180deg,var(--gold),var(--gold2));
  color: #1e1a05;
  box-shadow: 0 6px 18px rgba(255,215,0,.22);
}
.m7-btn.o{background: transparent; border-color: var(--gold); color: var(--gold);}
.m7-btn.lg{padding-top: 14px; padding-right: 24px; padding-bottom: 14px; padding-left: 24px; font-size: 16px; min-height: 50px;}

/* ---------------------------------------------------------------- chrome */
.m7-head{
  position: static;
  background: linear-gradient(180deg,#0b3029,#07231f);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
}
.m7-head .bar{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  row-gap: 12px;
  column-gap: 12px;
  padding-top: 10px;
  padding-right: 16px;
  padding-bottom: 10px;
  padding-left: 16px;
  flex-wrap: wrap;
  row-gap: 10px;
}
/* The whole lockup must NOT be nowrap. The subtitle is 22 characters at .13em tracking, which
   is wider than a 375 viewport, and a nowrap ancestor made it push the document 155px sideways
   from inside the footer -- where nothing measured "wider than the viewport", because the
   element itself was not oversized, only unbreakable. */
.m7-logo{display: flex; align-items: center; row-gap: 9px; column-gap: 9px; font-weight: 800; min-width: 0;}
/* The inline mark carries a viewBox but no width/height, so as a flex item with width:auto it
   takes its max-content and fills the column -- in the footer it measured 343px and pushed the
   wordmark to x=368 on a 375 viewport. An SVG in a flex cell always needs an explicit box. */
.m7-logo svg{flex-grow: 0; flex-shrink: 0; flex-basis: auto; width: 34px; height: 34px;}
.m7-foot .m7-logo svg{width: 30px; height: 30px;}
.m7-logo .wm{display: flex; flex-direction: column; line-height: 1.05; min-width: 0;}
.m7-logo .wm b{
  font-size: 21px;
  color: var(--gold);
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(255,215,0,.35);
}
.m7-logo .wm small{
  font-size: 9.5px;
  color: var(--mute);
  letter-spacing: .11em;
  min-width: 0;
  overflow-wrap: anywhere;
}
@media(max-width:420px){.m7-logo .wm small{font-size: 8.5px; letter-spacing: .06em;}}
.m7-burger{
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: var(--cc-fs11);
  cursor: pointer;
}
.m7-acct{display: flex; row-gap: 8px; column-gap: 8px; align-items: center; margin-left: auto;}
.m7-lang{display: flex; row-gap: 5px; column-gap: 5px;}
.m7-lang a{
  white-space: nowrap;
  font-size: var(--cc-fs4);
  padding-top: 7px;
  padding-right: 10px;
  padding-bottom: 7px;
  padding-left: 10px;
  border-radius: 999px;
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--mute);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.m7-lang a.on{background: var(--gold); color: #1e1a05; border-color: var(--gold); font-weight: 700;}

/* category bar, with the studio panel that drops from each item */
.m7-menu{background: var(--ink2); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--line); position: relative;}
.m7-menu{max-width: none; display: flex; justify-content: center;}
.m7-menu .it{position: relative; display: inline-block;}
.m7-menu .it>a{
  display: block;
  padding-top: 12px;
  padding-right: 15px;
  padding-bottom: 12px;
  padding-left: 15px;
  font-size: var(--cc-fs8);
  color: var(--mute);
  white-space: nowrap;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}
.m7-menu .it:hover>a,.m7-menu .it:focus-within>a{color: var(--gold); border-bottom-color: var(--gold);}
.m7-menu .pan{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 280px;
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0 0 12px 12px;
  padding-top: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
  row-gap: 9px;
  column-gap: 9px;
  flex-wrap: wrap;
}
.m7-menu .it:hover .pan,.m7-menu .it:focus-within .pan{display: flex;}
.m7-menu .pan .dark{
  background: #eaf6f2;
  border-radius: 8px;
  padding-top: 8px;
  padding-right: 11px;
  padding-bottom: 8px;
  padding-left: 11px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
.m7-menu .pan .dark img{max-height: 22px; width: auto; min-width: 0; object-fit: contain;}

.m7-tick{background: #051a17; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--line); overflow-x: hidden; overflow-y: hidden;}
.m7-tick p{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 7px;
  padding-right: 16px;
  padding-bottom: 7px;
  padding-left: 16px;
  font-size: var(--cc-fs6);
  color: var(--mute);
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- the floor */
.m7-floor{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  display: grid;
  row-gap: 16px;
  column-gap: 16px;
  grid-template-columns: 1fr;
}
.m7-floor .col{display: flex; flex-direction: column; row-gap: 16px; column-gap: 16px; min-width: 0;}
/* phone order: the account panel (register button) first, in the thumb zone */
.m7-floor .col.r{order: 1;}
.m7-floor .col.l{order: 2;}
.m7-floor .col.m{order: 3;}
@media(min-width:1040px){
  .m7-floor{grid-template-columns: 300px minmax(0,1fr) 268px; align-items: start;}
  .m7-floor .col.l{order: 1;}
  .m7-floor .col.m{order: 2;}
  .m7-floor .col.r{order: 3; position: sticky; top: 12px;}
}

/* The hero sits in a ~300px column, so an absolutely positioned caption over a fixed-aspect
   image clips whatever does not fit -- and what it clipped was the H1 and the eyebrow, the two
   things that must never be cut. Stack instead: the picture keeps its aspect, the words sit
   under it in normal flow and the box grows to hold them. */
.m7-hero{
  position: relative;
  border-radius: var(--rad);
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  background: var(--ink2);
  display: flex;
  flex-direction: column;
}
.m7-hero img{display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.m7-hero .tx{position: static; padding-top: 14px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; background: var(--ink2);}
.m7-hero .eb{
  display: inline-block;
  font-size: var(--cc-fs2);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.m7-hero h1{font-size: clamp(20px,2.4vw,26px); margin-bottom: .4em;}
.m7-hero .lead{font-size: var(--cc-fs7); color: var(--mute); margin-bottom: 12px;}
.m7-hero .act{display: flex; row-gap: 9px; column-gap: 9px; flex-wrap: wrap;}

/* the live transactions ledger - this brand's signature */
.m7-ledger{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  overflow-x: hidden;
  overflow-y: hidden;
}
.m7-ledger .hd{
  display: flex;
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
  padding-top: 10px;
  padding-right: 13px;
  padding-bottom: 10px;
  padding-left: 13px;
  background: var(--pan);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
  font-size: var(--cc-fs6);
}
.m7-ledger .hd em{
  font-style: normal;
  color: #ff6b6b;
  font-size: var(--cc-fs2);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: auto;
}
.m7-ledger .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 0 0 rgba(255,107,107,.7);
  animation: c9pulse 2s infinite;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}
@keyframes c9pulse{70%{box-shadow: 0 0 0 7px rgba(255,107,107,0);}
                   100%{box-shadow: 0 0 0 0 rgba(255,107,107,0);}}
@media(prefers-reduced-motion:reduce){.m7-ledger .dot{animation: none;}}
.m7-ledger table{width: 100%; font-size: var(--cc-fs5); font-variant-numeric: tabular-nums;}
.m7-ledger th{
  background: var(--pan);
  color: var(--mute);
  font-weight: 600;
  padding-top: 7px;
  padding-right: 10px;
  padding-bottom: 7px;
  padding-left: 10px;
  text-align: left;
  font-size: var(--cc-fs1);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.m7-ledger td{padding-top: 7px; padding-right: 10px; padding-bottom: 7px; padding-left: 10px; border-top-width: 1px; border-top-style: solid; border-top-color: rgba(35,45,110,.6);}
.m7-ledger .ph{color: var(--mute);}
.m7-ledger .am{text-align: right; font-weight: 700;}
.m7-ledger .am.in{color: var(--win);}
.m7-ledger .am.out{color: var(--out);}

.m7-ref{
  background: linear-gradient(145deg,#0f3a32,#0a2b25);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}
.m7-ref b{display: block; color: var(--gold); font-size: var(--cc-fs10); margin-bottom: 6px;}
.m7-ref p{font-size: var(--cc-fs6); color: var(--mute); margin-bottom: 11px;}

.m7-acct-panel{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-top: 14px;
  padding-right: 14px;
  padding-bottom: 14px;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  row-gap: 11px;
  column-gap: 11px;
}
.m7-acct-panel .btns{display: grid; grid-template-columns: 1fr 1fr; row-gap: 8px; column-gap: 8px;}
.m7-acct-panel .btns .m7-btn{padding-top: 11px; padding-right: 6px; padding-bottom: 11px; padding-left: 6px; font-size: var(--cc-fs6);}
.m7-acct-panel .bal{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  row-gap: 8px;
  column-gap: 8px;
  padding-top: 10px;
  padding-right: 12px;
  padding-bottom: 10px;
  padding-left: 12px;
  background: var(--pan);
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.m7-acct-panel .bal span{font-size: var(--cc-fs4); color: var(--mute);}
.m7-acct-panel .bal b{font-size: 19px; color: var(--gold); font-variant-numeric: tabular-nums;}
.m7-acct-panel .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: 8px;
  column-gap: 8px;
  padding-top: 11px;
  padding-right: 12px;
  padding-bottom: 11px;
  padding-left: 12px;
  border-radius: 10px;
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-height: 44px;
}
.m7-acct-panel .row b{font-size: var(--cc-fs7);}
.m7-acct-panel .row em{font-style: normal; font-size: var(--cc-fs4); color: var(--mute);}
.m7-acct-panel .note{font-size: var(--cc-fs4); color: var(--mute); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}
.m7-acct-panel .chan{display: grid; grid-template-columns: 1fr 1fr; row-gap: 8px; column-gap: 8px;}
.m7-acct-panel .ch{
  display: flex;
  flex-direction: column;
  row-gap: 1px;
  column-gap: 1px;
  padding-top: 9px;
  padding-right: 10px;
  padding-bottom: 9px;
  padding-left: 10px;
  border-radius: 10px;
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-height: 44px;
  justify-content: center;
  min-width: 0;
}
.m7-acct-panel .ch b{font-size: var(--cc-fs5);}
.m7-acct-panel .ch em{font-style: normal; font-size: var(--cc-fs1); color: var(--mute);}
.m7-acct-panel .ch.tg b{color: #4aa8e8;}
.m7-acct-panel .ch.wa b{color: #4ad07d;}

.m7-trust{display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 8px;}
.m7-trust span{
  display: flex;
  align-items: center;
  row-gap: 6px;
  column-gap: 6px;
  font-size: var(--cc-fs5);
  color: var(--mute);
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 999px;
  padding-top: 7px;
  padding-right: 12px;
  padding-bottom: 7px;
  padding-left: 12px;
}
.m7-trust i{color: var(--gold); font-style: normal;}

/* ---------------------------------------------------------------- shelf */
.m7-shelf{background: var(--ink2); border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--rad); padding-top: 14px; padding-right: 14px; padding-bottom: 14px; padding-left: 14px;}
.m7-shelf .hd{display: flex; align-items: baseline; row-gap: 10px; column-gap: 10px; margin-bottom: 11px;}
.m7-shelf .hd h2{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: var(--cc-fs12);}
.m7-shelf .lnk{margin-left: auto; font-size: var(--cc-fs5); color: var(--gold);}
.m7-shelf .tabs{display: flex; row-gap: 6px; column-gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px;}
.m7-shelf .tabs::-webkit-scrollbar{display: none;}
.m7-shelf .tb{
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--mute);
  padding-top: 9px;
  padding-right: 14px;
  padding-bottom: 9px;
  padding-left: 14px;
  border-radius: 999px;
  font-size: var(--cc-fs6);
  white-space: nowrap;
  min-height: 40px;
  cursor: pointer;
}
.m7-shelf .tb.on{background: var(--gold); border-color: var(--gold); color: #1e1a05; font-weight: 700;}
.m7-games{display: grid; row-gap: 10px; column-gap: 10px; grid-template-columns: 1fr 1fr;}
@media(min-width:560px){.m7-games{grid-template-columns: 1fr 1fr 1fr;}}
.gc{
  display: block;
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 11px;
  overflow-x: hidden;
  overflow-y: hidden;
  min-width: 0;
}
.gc img{display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover;}
.gc .mt{padding-top: 7px; padding-right: 9px; padding-bottom: 7px; padding-left: 9px; display: flex; flex-direction: column; row-gap: 1px; column-gap: 1px; min-width: 0;}
.gc .mt b{font-size: var(--cc-fs5); white-space: nowrap; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; display: block;}
.gc .mt em{font-style: normal; font-size: var(--cc-fs2); color: var(--gold2);}

/* category tiles */
.m7-cats{display: grid; row-gap: 10px; column-gap: 10px; grid-template-columns: 1fr 1fr;}
@media(min-width:720px){.m7-cats{grid-template-columns: 1fr 1fr 1fr;}}
.m7-cats .tile{
  position: relative;
  border-radius: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-width: 0;
}
.m7-cats .tile img{display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;}
.m7-cats .cap{
  position: absolute;
  inset: auto 0 0 0;
  padding-top: 9px;
  padding-right: 11px;
  padding-bottom: 9px;
  padding-left: 11px;
  background: linear-gradient(180deg,rgba(7,11,36,0),rgba(7,11,36,.95) 55%);
  display: flex;
  flex-direction: column;
  row-gap: 1px;
  column-gap: 1px;
  min-width: 0;
}
.m7-cats .cap b{font-size: var(--cc-fs7); color: var(--gold);}
.m7-cats .cap em{font-style: normal; font-size: var(--cc-fs3); color: var(--mute); line-height: 1.35;}

/* ---------------------------------------------------------------- registers */
.m7-poker,.m7-live,.m7-esp,.m7-pool,.m7-wall,.m7-apk{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 22px;
  margin-left: auto;
  padding-top: 0;
  padding-right: 16px;
  padding-bottom: 0;
  padding-left: 16px;
}
.m7-poker .hd h2{margin-bottom: .3em;}
.m7-poker .hd p,.m7-live p{color: var(--mute); font-size: var(--cc-fs8); max-width: 66ch;}
.m7-tw{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--rad);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.m7-tbl,.m7-poker table{
  width: 100%;
  background: var(--ink2);
  font-size: var(--cc-fs8);
  font-variant-numeric: tabular-nums;
}
.m7-poker table{border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--rad); overflow-x: hidden; overflow-y: hidden;}
.m7-tbl th,.m7-poker th{
  background: var(--pan);
  color: var(--mute);
  text-align: left;
  padding-top: 10px;
  padding-right: 13px;
  padding-bottom: 10px;
  padding-left: 13px;
  font-size: var(--cc-fs3);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.m7-tbl td,.m7-poker td{padding-top: 10px; padding-right: 13px; padding-bottom: 10px; padding-left: 13px; border-top-width: 1px; border-top-style: solid; border-top-color: rgba(35,45,110,.6);}
.m7-tbl .amt{text-align: right; color: var(--gold); font-weight: 700;}
.m7-live .m7-btn,.m7-poker .m7-btn{margin-top: 13px;}

/* provider wall */
.m7-wall .logos{display: flex; flex-wrap: wrap; row-gap: 9px; column-gap: 9px; margin-bottom: 12px;}
/* ONE chip treatment sitewide (feedback_one_chip_per_site): pale plate, so a dark-ink or
   thin-stroke wordmark cannot wash out against the indigo ground. */
.m7-wall .dark{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background: #eaf6f2;
  border-width: 1px;
  border-style: solid;
  border-color: #cfe4dc;
  border-radius: 10px;
  padding-top: 10px;
  padding-right: 14px;
  padding-bottom: 10px;
  padding-left: 14px;
  height: 54px;
}
.m7-wall .dark img{max-height: 26px; width: auto; min-width: 0; object-fit: contain;}
/* Playtech ships a stacked lockup - the wordmark sits above a small tagline - so a flat 26px
   cap draws its letters about a third smaller than the single-line marks beside it. Size this
   one by its wordmark instead. 32px is the chip's content box (54 - 20 padding - 2 border), so
   it still cannot overflow. */
.m7-wall .dark img[src$="playtech.png"]{max-height: 32px;}
.m7-wall .sub{font-size: var(--cc-fs6); color: var(--mute); margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0;}
.m7-wall .chips{display: flex; flex-wrap: wrap; row-gap: 7px; column-gap: 7px;}
.m7-wall .chip{
  font-size: var(--cc-fs4);
  color: var(--mute);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 999px;
  padding-top: 6px;
  padding-right: 11px;
  padding-bottom: 6px;
  padding-left: 11px;
}

/* esports board */
.m7-esp{display: grid; row-gap: 16px; column-gap: 16px; grid-template-columns: 1fr; align-items: center;}
@media(min-width:900px){.m7-esp{grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);}}
.m7-esp .tx .eb{
  display: inline-block;
  font-size: var(--cc-fs2);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.m7-esp .tx p{color: var(--mute); font-size: var(--cc-fs9);}
.m7-esp .mk{list-style: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 15px; margin-left: 0; display: flex; flex-wrap: wrap; row-gap: 7px; column-gap: 7px;}
.m7-esp .mk li{
  font-size: var(--cc-fs5);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 999px;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  padding-left: 12px;
  color: var(--mute);
}
.m7-esp .ti{display: flex; flex-wrap: wrap; row-gap: 9px; column-gap: 9px; align-content: start;}
.m7-esp .t{
  font-size: var(--cc-fs6);
  font-weight: 700;
  color: var(--gold);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: 10px;
  padding-top: 11px;
  padding-right: 14px;
  padding-bottom: 11px;
  padding-left: 14px;
}
.m7-esp .bk{flex-grow: 1; flex-shrink: 1; flex-basis: 100%; font-size: var(--cc-fs5); color: var(--mute); margin-top: 4px;}

/* jackpot pool */
.m7-pool{
  text-align: center;
  background: linear-gradient(145deg,#0f3a32,#092a24);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: var(--rad);
  padding-top: 22px;
  padding-right: 16px;
  padding-bottom: 22px;
  padding-left: 16px;
  max-width: calc(var(--mx) - 32px);
}
.m7-pool .jp{display: flex; align-items: baseline; justify-content: center; row-gap: 9px; column-gap: 9px; margin-bottom: 9px;}
.m7-pool .jp span{font-size: var(--cc-fs8); color: var(--mute); letter-spacing: .1em;}
.m7-pool .jp b{
  font-size: clamp(28px,5.5vw,46px);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(255,215,0,.3);
}
.m7-pool p{color: var(--mute); font-size: var(--cc-fs7); max-width: 62ch; margin-top: 0; margin-right: auto; margin-bottom: 13px; margin-left: auto;}

/* APK block */
.m7-apk{display: grid; row-gap: 16px; column-gap: 16px; grid-template-columns: 1fr; align-items: center;}
@media(min-width:820px){.m7-apk{grid-template-columns: 270px minmax(0,1fr);}}
.m7-apk img{border-radius: var(--rad); border-width: 1px; border-style: solid; border-color: var(--line); width: 100%;}
.m7-apk .tx p{color: var(--mute); font-size: var(--cc-fs9);}
.m7-apk .meta{display: flex; flex-wrap: wrap; row-gap: 7px; column-gap: 7px; margin-bottom: 13px;}
.m7-apk .meta span{
  font-size: var(--cc-fs4);
  color: var(--mute);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 999px;
  padding-top: 6px;
  padding-right: 11px;
  padding-bottom: 6px;
  padding-left: 11px;
}

/* ---------------------------------------------------------------- page body */
.m7-content{max-width: 860px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 0; padding-right: 16px; padding-bottom: 26px; padding-left: 16px;}
.m7-content h2{margin-top: 1.5em;}
.m7-content a{color: var(--gold); text-decoration: underline; text-underline-offset: 2px;}
.m7-kpis{
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 20px;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  list-style: none;
}
@media(min-width:640px){.m7-kpis{grid-template-columns: 1fr 1fr 1fr 1fr;}}
.m7-kpis li{background: var(--ink2); border-width: 1px; border-style: solid; border-color: var(--line); border-radius: 12px; padding-top: 13px; padding-right: 13px; padding-bottom: 13px; padding-left: 13px;}
.m7-kpis b{display: block; font-size: 20px; color: var(--gold); font-variant-numeric: tabular-nums;}
.m7-kpis span{font-size: var(--cc-fs4); color: var(--mute);}
.m7-steps{list-style: none; counter-reset: s; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 22px; margin-left: 0;}
.m7-steps li{counter-increment: s; position: relative; padding-top: 0; padding-right: 0; padding-bottom: 14px; padding-left: 44px;}
.m7-steps li::before{
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: #1e1a05;
  font-weight: 800;
  font-size: var(--cc-fs8);
}
.m7-steps b{display: block; margin-bottom: 2px;}
.m7-content .m7-tw{margin-top: 0; margin-right: 0; margin-bottom: 22px; margin-left: 0;}
.m7-faq{margin-top: 0; margin-right: 0; margin-bottom: 22px; margin-left: 0;}
.m7-faq details{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 11px;
  padding-top: 12px;
  padding-right: 15px;
  padding-bottom: 12px;
  padding-left: 15px;
  margin-bottom: 9px;
}
.m7-faq summary{cursor: pointer; font-weight: 700; min-height: 28px;}
.m7-band{
  background: linear-gradient(145deg,#0f3a32,#092a24);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: var(--rad);
  padding-top: 19px;
  padding-right: 19px;
  padding-bottom: 19px;
  padding-left: 19px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 22px;
  margin-left: 0;
  text-align: center;
}
.m7-band b{display: block; font-size: var(--cc-fs12); color: var(--gold); margin-bottom: 6px;}
.m7-band p{color: var(--mute); font-size: var(--cc-fs8);}

/* ---------------------------------------------------------------- footer */
.m7-foot{background: #050818; border-top-width: 1px; border-top-style: solid; border-top-color: var(--line); padding-top: 26px; padding-right: 0; padding-bottom: 96px; padding-left: 0; margin-top: 26px;}
.m7-foot .cols{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 0;
  padding-right: 16px;
  padding-bottom: 0;
  padding-left: 16px;
  display: grid;
  row-gap: 22px;
  column-gap: 22px;
  grid-template-columns: 1fr;
}
@media(min-width:760px){.m7-foot .cols{grid-template-columns: 2fr 1fr 1fr;}}
.m7-foot .w h4,.m7-foot .w b{
  font-size: var(--cc-fs4);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 9px;
  margin-left: 0;
}
.m7-foot ul{list-style: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}
.m7-foot li{margin-bottom: 6px; font-size: var(--cc-fs7); color: var(--mute);}
.m7-foot .ab{font-size: var(--cc-fs6); color: var(--mute); max-width: 56ch;}
.m7-foot .m7-logo{margin-bottom: 10px;}
.m7-foot .pay,.m7-foot .trust{display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; margin-top: 11px;}
.m7-foot .pay span,.m7-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background: #eaf6f2;
  border-width: 1px;
  border-style: solid;
  border-color: #cfe4dc;
  border-radius: 8px;
  padding-top: 7px;
  padding-right: 10px;
  padding-bottom: 7px;
  padding-left: 10px;
  height: 40px;
}
.m7-foot .pay img,.m7-foot .trust img{max-height: 22px; width: auto; min-width: 0; object-fit: contain;}
.m7-foot .soc{display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; margin-top: 11px;}
.m7-foot .lic,.m7-foot .rg{font-size: var(--cc-fs5); color: var(--mute); margin-top: 11px; margin-right: 0; margin-bottom: 0; margin-left: 0;}
.m7-foot .cr{
  max-width: var(--mx);
  margin-top: 16px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 13px;
  padding-right: 16px;
  padding-bottom: 0;
  padding-left: 16px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line);
  font-size: var(--cc-fs4);
  color: var(--mute);
}
.coin{
  display: inline-flex;
  align-items: center;
  row-gap: 6px;
  column-gap: 6px;
  font-size: var(--cc-fs6);
  color: var(--gold);
  min-height: 44px;
}

/* bottom app bar + sticky CTA */
.m7-bar{
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--pan);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.m7-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-top: 8px;
  padding-right: 4px;
  padding-bottom: 8px;
  padding-left: 4px;
  font-size: var(--cc-fs1);
  color: var(--mute);
  min-height: 54px;
  justify-content: center;
  text-align: center;
}
.m7-bar .i{font-style: normal; font-size: var(--cc-fs11); color: var(--gold);}
@media(min-width:1040px){.m7-bar{display: none;}.m7-foot{padding-bottom: 26px;}}
.m7-scta{position: fixed; inset: auto 14px 64px auto; z-index: 41;}
@media(min-width:1040px){.m7-scta{inset: auto 20px 20px auto;}}

/* ---------------------------------------------------------------- entry modal */
.m7-pop{
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3,5,18,.84);
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
}
.m7-pop.on{display: flex;}
.m7-pop .bx{
  position: relative;
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: 16px;
  max-width: 380px;
  width: 100%;
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
/* .bx is overflow:hidden for its corners, so the close control lives INSIDE it */
.m7-pop .x{
  position: absolute;
  top: 9px;
  right: 9px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--text);
  z-index: 2;
  cursor: pointer;
  font-size: var(--cc-fs10);
  line-height: 1;
}
.m7-pop .hd{padding-top: 16px; padding-right: 18px; padding-bottom: 0; padding-left: 18px;}
.m7-pop .panes{overflow-y: auto;}
.m7-pop .pane{padding-top: 18px; padding-right: 18px; padding-bottom: 18px; padding-left: 18px;}
.m7-pop .eb{
  display: inline-block;
  font-size: var(--cc-fs1);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.m7-pop .big{
  display: block;
  font-size: 26px;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 7px;
  font-variant-numeric: tabular-nums;
}
.m7-pop p{font-size: var(--cc-fs8); color: var(--mute); margin-bottom: 15px;}
.m7-pop .pg{
  display: flex;
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
  padding-top: 11px;
  padding-right: 16px;
  padding-bottom: 11px;
  padding-left: 16px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line);
  background: var(--pan);
}
.m7-pop .pv,.m7-pop .nx{
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--text);
  cursor: pointer;
  font-size: var(--cc-fs10);
}
.m7-pop .ct{font-size: var(--cc-fs4); color: var(--mute); margin-left: auto; font-variant-numeric: tabular-nums;}
.m7-pop .dots{display: flex; row-gap: 5px; column-gap: 5px;}
.m7-pop .dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  cursor: pointer;
}
.m7-pop .dot.on{background: var(--gold);}

/* ---------------------------------------------------------------- phones */
@media(max-width:1039px){
  .m7-burger{display: flex;}
  .m7-menu{overflow-x: auto; scrollbar-width: none; justify-content: flex-start;}
  .m7-menu::-webkit-scrollbar{display: none;}
  .m7-menu .pan{display: none !important;}   /* no hover on touch; the bar scrolls instead */
  .m7-acct{
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 8px;
    min-width: 0;
  }
  .m7-acct .m7-btn{flex-grow: 1; flex-shrink: 1; flex-basis: auto; max-width: 190px; min-width: 0;}
  .m7-lang{min-width: 0; flex-wrap: wrap;}
}
@media(max-width:400px){
  /* At 320 the three language chips plus Login and Register overflow a single row by 19px.
     Give the chips their own line; the two buttons then split the width underneath. */
  .m7-acct{justify-content: flex-start; row-gap: 8px; column-gap: 8px;}
  .m7-lang{flex-grow: 1; flex-shrink: 1; flex-basis: 100%; order: -1;}
  .m7-acct .m7-btn{flex-grow: 1; flex-shrink: 1; flex-basis: calc(50% - 4px); max-width: none;}
  .m7-lang a{padding-top: 6px; padding-right: 9px; padding-bottom: 6px; padding-left: 9px; font-size: var(--cc-fs3);}
  .m7-floor{padding-top: 12px; padding-right: 12px; padding-bottom: 12px; padding-left: 12px;}
  .m7-games{row-gap: 8px; column-gap: 8px;}
  .m7-ledger table{font-size: var(--cc-fs3);}
  .m7-ledger td,.m7-ledger th{padding-top: 6px; padding-right: 8px; padding-bottom: 6px; padding-left: 8px;}
}