/* mbi8asia.com - .ma-* shell.
   Night mode: a black desk, amber neon and full-bleed bands stacked down the page. Nothing here
   is a column layout; every section is a strip with its own heading, which is what separates this
   shell its own character. Hand-written; the generator never touches this file. */

:root{
  --ink:#f4f1ec;
  --ink2:#9a938a;
  --bg:#0b0b0d;          /* the desk */
  --panel:#141417;       /* strips that need to lift off it */
  --edge:#242429;
  --am:#ffb020;          /* amber */
  --am2:#ff7a00;         /* hot end of the gradient */
  --hot:#ff5a1f;         /* the louder CTA, same wheel */
  --win:#3ddc84;
  --rad:6px;             /* square-ish rather than pill-shaped */
  --w:1240px;
}

*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.7 "Inter","Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  padding-bottom:104px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;font-weight:800;letter-spacing:-.015em}
p{margin:0 0 1.1em}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
.ma-w{max-width:var(--w);margin:0 auto;padding:0 22px}

/* ---------------------------------------------------------------- header + rail */
.ma-bar{position:sticky;top:0;z-index:40;background:rgba(11,11,13,.92);
  border-bottom:1px solid var(--edge);backdrop-filter:blur(8px)}
.ma-bar .in{max-width:var(--w);margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:16px}
/* all three parts of the mark share one line box: a baseline-aligned sub-label reads as a second
   line to the layout audit, and wraps for real on a narrow header */
.ma-mark{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:1px;min-height:44px;
  font:900 27px/1 "Inter",system-ui,sans-serif;letter-spacing:-.05em;white-space:nowrap}
.ma-mark span{color:var(--ink)}
.ma-mark span+b+span{color:var(--ink2)}
.ma-mark b{color:var(--am);font-weight:900}
.ma-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.ma-lang{display:flex;gap:2px}
.ma-lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--rad);
  font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap}
.ma-lang a.on{color:var(--bg);background:var(--am)}

.ma-b{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  border-radius:var(--rad);font-weight:800;font-size:15px;white-space:nowrap}
.ma-b.g{border:1px solid var(--edge);color:var(--ink)}
.ma-b.a{background:linear-gradient(180deg,var(--am),var(--am2));color:#1a0e00;
  box-shadow:0 0 0 1px rgba(255,176,32,.35),0 8px 24px rgba(255,122,0,.25)}
.ma-b.lg{min-height:54px;padding:0 28px;font-size:16px}

/* horizontal section rail: this site's whole navigation */
.ma-rail{background:var(--panel);border-bottom:1px solid var(--edge);overflow-x:auto;
  scrollbar-width:none}
.ma-rail::-webkit-scrollbar{display:none}
.ma-rail>div{max-width:var(--w);margin:0 auto;padding:0 22px;display:flex;gap:4px;width:max-content;
  min-width:100%}
.ma-rail a{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 14px;min-height:50px;
  font-size:13.5px;font-weight:700;color:var(--ink2);border-bottom:2px solid transparent;
  white-space:nowrap}
.ma-rail a svg{width:18px;height:18px}
.ma-rail a.on{color:var(--am);border-bottom-color:var(--am)}

/* ---------------------------------------------------------------- hero */
.ma-hero{position:relative;padding:26px 0 30px;
  background:radial-gradient(1100px 420px at 50% -40%,rgba(255,122,0,.22),transparent 70%)}
.ma-hero .slides{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;scrollbar-width:none}
.ma-hero .slides::-webkit-scrollbar{display:none}
.ma-hero .cap{margin-top:14px;max-width:62ch}
.ma-hero h1{font-size:clamp(27px,4.4vw,44px);margin:0 0 10px}
.ma-hero p{color:var(--ink2);margin:0 0 18px}
.ma-hero .go{display:flex;flex-wrap:wrap;gap:11px}

.ma-bn{position:relative;display:block;border-radius:var(--rad);overflow:hidden;
  border:1px solid var(--edge);background:#000;aspect-ratio:16/9}
.ma-bn.w{flex:0 0 min(560px,86%);scroll-snap-align:start;aspect-ratio:16/8}
.ma-bn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.ma-bn .tx{position:absolute;inset:0;padding:16px 18px;display:flex;flex-direction:column;
  justify-content:center;gap:3px;
  background:linear-gradient(90deg,#000 34%,rgba(0,0,0,.6) 62%,rgba(0,0,0,0) 88%)}
.ma-bn .tx i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--am)}
.ma-bn .tx b{font-weight:900;font-size:clamp(30px,5.4vw,46px);line-height:1;font-family:inherit;letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff,var(--am));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.ma-bn .tx>span{font-size:14px;font-weight:700}
.ma-bn .tx em{margin-top:9px;align-self:flex-start;font-style:normal;font-size:12px;font-weight:800;
  color:var(--bg);background:var(--hot);padding:7px 14px;border-radius:var(--rad)}
.ma-bns{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}

/* ---------------------------------------------------------------- strips */
.ma-sec{padding:30px 0;border-top:1px solid var(--edge)}
.ma-h2{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.ma-h2 h2{margin:0;font-size:20px}
.ma-h2 h2::before{content:"";display:inline-block;width:4px;height:18px;margin-right:11px;
  background:var(--am);vertical-align:-2px;border-radius:2px}
.ma-h2 a{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;
  font-size:13px;font-weight:800;color:var(--am)}

/* jackpot strip */
.ma-jp{padding:26px 0;background:linear-gradient(180deg,#1b1206,#0b0b0d);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.ma-jp h2{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--am);margin-bottom:14px}
.ma-jp .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ma-jp .rows div{border:1px solid var(--edge);border-radius:var(--rad);padding:14px 16px;
  background:rgba(0,0,0,.4)}
.ma-jp .rows span{display:block;font-size:12px;color:var(--ink2)}
.ma-jp .rows b{display:block;font-weight:900;font-size:clamp(20px,2.7vw,30px);line-height:1.15;font-family:inherit;margin-top:5px;
  color:var(--am);letter-spacing:-.02em}
.ma-jp p{margin:14px 0 0;font-size:13px;color:var(--ink2)}

/* tabs + game wall */
.ma-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.ma-tabs::-webkit-scrollbar{display:none}
.ma-tabs button{flex:0 0 auto;min-height:42px;padding:0 17px;cursor:pointer;border-radius:var(--rad);
  border:1px solid var(--edge);background:var(--panel);color:var(--ink2);font-weight:700;font-size:13.5px;line-height:1;font-family:inherit}
.ma-tabs button.on{background:var(--am);border-color:var(--am);color:#1a0e00}

.ma-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.ma-t{display:block;border:1px solid var(--edge);border-radius:var(--rad);overflow:hidden;
  background:var(--panel)}
.ma-t .pic{position:relative;display:block;aspect-ratio:1/1;background:#000}
.ma-t .pic img{width:100%;height:100%;object-fit:cover}
.ma-t .meta{display:block;padding:10px 11px 12px}
.ma-t .meta b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-t .meta small{display:block;font-size:11.5px;color:var(--ink2);margin-top:2px}
.ma-t .pin{position:absolute;top:0;left:0;padding:4px 9px;font-size:10px;font-weight:800;
  letter-spacing:.07em;background:var(--hot);color:#fff}
.ma-t .pin.new{background:var(--win);color:#06250f}
.ma-t .vol{position:absolute;right:7px;bottom:7px;padding:3px 8px;border-radius:var(--rad);
  font-size:10.5px;font-weight:800;background:rgba(0,0,0,.72);border:1px solid var(--edge)}
.ma-t .vol.v1{color:var(--win)}
.ma-t .vol.v2{color:var(--am)}
.ma-t .vol.v3{color:var(--hot)}
.ma-off{display:none}
.ma-fold-btn{display:block;margin:18px auto 0;min-height:48px;padding:0 30px;cursor:pointer;
  border-radius:var(--rad);border:1px solid var(--am);background:transparent;color:var(--am);
  font-weight:800;font-size:14px;line-height:1;font-family:inherit}

/* live tables */
.ma-lts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.ma-lt{display:block;border:1px solid var(--edge);border-radius:var(--rad);overflow:hidden;
  background:var(--panel)}
.ma-lt .pic{position:relative;display:block;aspect-ratio:4/3;background:#000}
.ma-lt .pic img{width:100%;height:100%;object-fit:cover}
.ma-lt .meta{display:block;padding:11px 12px 13px}
.ma-lt .meta b{display:block;font-size:14px}
.ma-lt .meta small{display:block;font-size:12px;color:var(--ink2);margin-top:3px;line-height:1.45}
.sc{display:grid;place-items:center;padding:7px 10px;border-radius:var(--rad);
  background:rgba(255,255,255,.06);border:1px solid var(--edge)}
.ma-lt .sc{position:absolute;left:9px;bottom:9px;max-width:64%;background:rgba(0,0,0,.66)}
.sc img{max-height:19px;width:auto}
.sc.tx{font-size:11.5px;font-weight:800;color:var(--ink2)}
/* near-black artwork on transparency needs lifting to white on this background */
.lift{filter:brightness(0) invert(1);opacity:.92}
.ma-studios{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:11px}
.ma-studios .sc{height:58px}

/* tables */
.ma-tw{overflow-x:auto;border:1px solid var(--edge);border-radius:var(--rad)}
.ma-tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.ma-tbl th,.ma-tbl td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--edge)}
.ma-tbl th{background:var(--panel);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink2)}
.ma-tbl tr:last-child td{border-bottom:0}
.ma-tbl .pz{color:var(--am);font-weight:800;white-space:nowrap}

/* vip ladder */
.ma-vip{list-style:none;counter-reset:v;margin:0;padding:0;display:grid;gap:9px}
.ma-vip li{counter-increment:v;display:grid;grid-template-columns:30px 1fr auto;gap:14px;
  align-items:center;border:1px solid var(--edge);border-radius:var(--rad);padding:13px 16px;
  background:var(--panel)}
.ma-vip li::before{content:counter(v);display:grid;place-items:center;width:26px;height:26px;
  border-radius:var(--rad);background:rgba(255,176,32,.14);color:var(--am);font-weight:800;font-size:13px}
.ma-vip li b{font-size:15px}
.ma-vip li span{grid-column:2;font-size:13px;color:var(--ink2)}
.ma-vip li em{grid-row:1/span 2;font-style:normal;font-weight:900;font-size:19px;color:var(--am)}

/* number band */
.ma-num{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ma-num div{border-left:3px solid var(--am);padding:4px 0 4px 15px}
.ma-num b{display:block;font-weight:900;font-size:23px;line-height:1.15;font-family:inherit;letter-spacing:-.02em}
.ma-num span{display:block;font-size:12.5px;color:var(--ink2);margin-top:4px}

/* inner page top band */
.ma-top{position:relative;padding:34px 0 36px;isolation:isolate;border-bottom:1px solid var(--edge)}
.ma-top::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--bg);
  background-size:cover;background-position:center;opacity:.34}
.ma-top::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,11,13,.62),var(--bg))}
.ma-crumb{margin:0 0 14px;font-size:13px;color:var(--ink2)}
.ma-crumb a{color:var(--am);font-weight:700;display:inline-flex;align-items:center;min-height:44px;
  margin:-14px 0}
.ma-top .kk{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--am);margin-bottom:9px}
.ma-top h1{font-size:clamp(26px,4vw,40px);margin:0 0 10px;max-width:22ch}
.ma-top .ld{color:var(--ink2);max-width:62ch;margin:0 0 18px}
.ma-top .go{display:flex;flex-wrap:wrap;gap:11px}

/* article */
.ma-art h2{font-size:21px;margin:30px 0 11px}
.ma-art h2:first-child{margin-top:0}
.ma-art p{max-width:74ch;color:#cdc6bd}
.ma-art a{color:var(--am);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.ma-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:10px}
.ma-steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:13px;
  border:1px solid var(--edge);border-radius:var(--rad);padding:13px 15px;background:var(--panel)}
.ma-steps li::before{content:counter(s);display:grid;place-items:center;width:26px;height:26px;
  border-radius:var(--rad);background:var(--am);color:#1a0e00;font-weight:800;font-size:13px}
.ma-steps b{display:block;font-size:14.5px}
.ma-steps span{grid-column:2;font-size:13.5px;color:var(--ink2)}

.ma-faq details{border:1px solid var(--edge);border-radius:var(--rad);margin-bottom:9px;
  background:var(--panel)}
.ma-faq summary{cursor:pointer;padding:14px 16px;font-weight:700;list-style:none;min-height:44px;
  display:flex;align-items:center;gap:12px}
.ma-faq summary::-webkit-details-marker{display:none}
.ma-faq summary::after{content:"+";margin-left:auto;color:var(--am);font-weight:900;font-size:20px}
.ma-faq details[open] summary::after{content:"\2212"}
.ma-faq p{margin:0;padding:0 16px 15px;color:var(--ink2);max-width:74ch}

/* ---------------------------------------------------------------- footer */
.ma-foot{border-top:1px solid var(--edge);background:#08080a;padding:36px 0 28px;margin-top:8px}
.ma-fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
.ma-fcols p{font-size:13.5px;color:var(--ink2);margin:13px 0 0;max-width:42ch}
.ma-fcols h4{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.ma-fcols a{display:flex;align-items:center;min-height:44px;font-size:14px}
.ma-soc{display:flex;gap:9px;margin-top:15px}
.ma-soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--rad);
  border:1px solid var(--edge);font-weight:800;color:var(--ink2)}
.ma-pay{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--edge)}
.ma-pay img{height:30px;width:auto;padding:5px 10px;border-radius:var(--rad);
  background:rgba(255,255,255,.06);border:1px solid var(--edge)}
.ma-cert{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:18px;opacity:.6}
.ma-cert img{height:26px;width:auto;filter:grayscale(1) brightness(1.7)}
.ma-fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--edge);font-size:12.5px;color:var(--ink2)}
.ma-fine i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--ink2);font-style:normal;font-size:11px;font-weight:800;margin-right:10px;
  vertical-align:middle}

/* ---------------------------------------------------------------- dock + grab bar */
.ma-dock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#08080a;
  border-top:1px solid var(--edge);display:grid;grid-template-columns:repeat(5,1fr);
  align-items:center;padding:6px max(10px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom))}
.ma-dock a{display:grid;justify-items:center;gap:3px;min-height:44px;padding:6px 2px;
  font-size:11px;font-weight:700;color:var(--ink2)}
.ma-dock a svg{width:21px;height:21px}
.ma-dock a.on{color:var(--am)}
.ma-dock a.hot{background:linear-gradient(180deg,var(--am),var(--am2));color:#1a0e00;
  border-radius:var(--rad);padding:12px 8px;font-size:13px;font-weight:800;align-content:center;
  box-shadow:0 0 18px rgba(255,122,0,.4)}

.ma-grab{display:none;position:fixed;left:12px;right:12px;z-index:49;
  bottom:calc(66px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--am),var(--am2));color:#1a0e00;border-radius:var(--rad);
  padding:11px 18px;text-align:center;box-shadow:0 8px 26px rgba(255,122,0,.42)}
.ma-grab b{display:block;font-size:15px;font-weight:900}
.ma-grab span{display:block;font-size:11.5px;font-weight:700;opacity:.86}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .ma-num{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ma-fcols{grid-template-columns:1fr 1fr}
  .ma-jp .rows{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  body{padding-bottom:142px}
  .ma-w{padding:0 14px}
  .ma-bar .in{gap:10px;padding:9px 14px}
  .ma-bar .ma-b.g{display:none}          /* sign in lives in the dock on a phone */
  .ma-lang a{padding:0 8px;font-size:12.5px}
  .ma-mark{font-size:23px}
  
  .ma-rail>div{padding:0 14px}
  .ma-rail a{padding:0 11px;font-size:12.5px}
  .ma-hero{padding:18px 0 24px}
  .ma-bn.w{flex-basis:88%}
  .ma-sec{padding:24px 0}
  .ma-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .ma-lts{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .ma-studios{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ma-bns{grid-template-columns:minmax(0,1fr)}
  .ma-num{gap:11px}
  .ma-num b{font-size:20px}
  .ma-vip li{grid-template-columns:26px 1fr auto;padding:11px 13px}
  .ma-grab{display:block}
  .ma-art h2{font-size:19px}
  .ma-top{padding:24px 0 28px}
}
@media (max-width:380px){
  .ma-mark{font-size:21px}
  .ma-b{padding:0 14px;font-size:14px}
  .ma-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ma-studios{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Small phones. The bar carries the wordmark, three language pills and the Join button, every one
   of them nowrap, so at 320 the row measured 327px and dragged the document sideways. Give the
   pills and the button back their spare padding instead of wrapping or hiding anything. */
@media (max-width:400px){
  .ma-bar .in{gap:8px}
  .ma-right{gap:6px}
  .ma-lang a{padding:0 5px}
  .ma-bar .ma-b{padding:0 10px}
}

/* Chinese labels are wider: stop the chrome wrapping its own text */
html[lang="zh-MY"] .ma-rail a,html[lang="zh-MY"] .ma-b,html[lang="zh-MY"] .ma-dock a,
html[lang="zh-MY"] .ma-lang a{white-space:nowrap}
html[lang="zh-MY"] .ma-dock a{font-size:10.5px}

/* === 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/bn-referral.jpg"]{object-position:75.3% 28.9%}
img[src$="/assets/img/bn-welcome.jpg"]{object-position:76.5% 26.4%}
img[src$="/assets/img/dealers/dealer-1.jpg"]{object-position:49.7% 37.0%}
img[src$="/assets/img/dealers/dealer-4.jpg"]{object-position:41.9% 27.4%}
img[src$="/assets/img/dealers/dealer-5.jpg"]{object-position:51.2% 36.6%}
img[src$="/assets/img/dealers/dealer-6.jpg"]{object-position:46.7% 26.5%}
/* === end image focal points === */