/* ==========================================================================
   Mega888 Official, homepage stylesheet
   Phone-width column centred on a full-bleed background, letterboxed on
   desktop. Navigation is a burger drawer at every width.
   ========================================================================== */

:root{
  /* surfaces */
  --navy-900:#050a18;
  --navy-800:#070c1f;
  --navy-700:#0b1330;
  --navy-600:#0f1b42;
  --navy-500:#142457;

  /* accents */
  --blue:#24a9ff;
  --blue-lt:#6fd3ff;
  --purple:#a33cff;
  --magenta:#ff3ba7;
  --gold:#f5c542;

  /* text */
  --ink:#eef4ff;
  --ink-soft:#b3c2e0;
  --ink-mute:#8496bb;

  --line:rgba(120,160,255,.18);
  --line-str:rgba(120,160,255,.32);

  --radius:14px;
  --radius-sm:10px;
  --tap:48px;

  /* the phone column */
  --shell:480px;
  --gutter:16px;

  --grad-blue:linear-gradient(135deg,#1d7fe0 0%,#24a9ff 50%,#4fd2ff 100%);
  --grad-purple:linear-gradient(135deg,#7a2bd6 0%,#a33cff 55%,#ff3ba7 100%);
  --grad-gold:linear-gradient(135deg,#b8860b 0%,#f5c542 48%,#ffe9a3 100%);
  --grad-green:linear-gradient(135deg,#0e9f4f 0%,#22c55e 55%,#5ee38f 100%);
  --grad-win:linear-gradient(135deg,#0050b3 0%,#0078d4 55%,#2ea8ff 100%);

  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* full-bleed backdrop, visible as the letterbox either side of the column */
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:#081233 url("/assets/img/bg-diagonal.webp") center top / cover no-repeat fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* the phone column itself */
.m8-shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  min-height:100vh;
  background:rgba(7,12,31,.955);
  box-shadow:0 0 0 1px rgba(120,160,255,.14), 0 0 60px rgba(0,0,0,.55);
  overflow:hidden;              /* keeps rounded/clipped children tidy */
}

img{max-width:100%;height:auto;display:block}
a{color:var(--blue-lt);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{line-height:1.25;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(1.5rem,5.6vw,1.95rem)}
h2{font-size:clamp(1.25rem,4.4vw,1.5rem)}
h3{font-size:1.05rem;font-weight:700}
p{margin:0 0 1rem}

:where(a,button,summary,details):focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}

.m8-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.m8-skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--gold);color:#1a1200;padding:.7rem 1.1rem;font-weight:700;
}
.m8-skip:focus{left:8px;top:8px}

.m8-wrap{width:100%;padding-inline:var(--gutter)}
.m8-wrap--narrow{}   /* column is already narrow; kept so markup stays stable */

/* ==========================================================================
   01 HEADER
   Header art is 2172x724 (3:1). Full column width would be a 160px tall bar,
   so the bar is height capped and the art cropped vertically with object-fit.
   ========================================================================== */

.m8-header{
  position:sticky;top:0;z-index:90;
  background:var(--navy-900);
  border-bottom:1px solid var(--line);
}

.m8-header__bar{
  position:relative;
  height:66px;
  display:flex;align-items:center;
}

.m8-header__brand{display:block;width:100%;height:100%;line-height:0}
.m8-header__brand img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}

.m8-menu-btn{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:96px;height:46px;
  padding:0;border:0;background:none;cursor:pointer;line-height:0;
  transition:transform .12s ease;
}
.m8-menu-btn img{width:100%;height:100%;object-fit:contain}
.m8-menu-btn:active{transform:translateY(-50%) scale(.95)}

/* ==========================================================================
   BURGER DRAWER
   Fixed to the viewport, but the panel is pinned to the right edge of the
   centred column so the phone illusion holds on a wide screen.
   ========================================================================== */

/* The closed panel is parked off the column's right edge. On a wide screen
   that lands inside the letterbox, which is still on screen, so the drawer
   must actually be hidden rather than merely pushed aside. visibility is
   delayed by the slide duration on close so the animation still plays, and
   applied instantly on open. pointer-events and inert (set in JS) keep the
   closed drawer out of reach of the mouse and the tab order. */
.m8-drawer{
  position:fixed;inset:0;z-index:200;
  visibility:hidden;
  pointer-events:none;
  transition:visibility 0s linear .3s;
}
.m8-drawer.is-open{
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}

.m8-drawer__backdrop{
  position:absolute;inset:0;
  background:rgba(2,5,16,.74);
  opacity:0;transition:opacity .26s ease;
}
.m8-drawer.is-open .m8-drawer__backdrop{opacity:1}

/* Pinned to the viewport's left edge, not the column's. On desktop that puts
   the panel out in the letterbox beside the column; on a phone the letterbox
   is zero wide, so this resolves to the screen edge either way. */
.m8-drawer__panel{
  position:absolute;top:0;bottom:0;
  left:0;
  width:min(82vw, 340px);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--navy-700) 0%,var(--navy-900) 100%);
  border-right:1px solid var(--line-str);
  box-shadow:18px 0 44px rgba(0,0,0,.5);
  transform:translateX(-105%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;
}
.m8-drawer.is-open .m8-drawer__panel{transform:translateX(0)}

.m8-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:var(--navy-900);
}
.m8-drawer__title{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:var(--gold);
}
.m8-drawer__close{
  width:44px;height:44px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(120,160,255,.08);
  border:1px solid var(--line-str);border-radius:10px;
  color:var(--ink);cursor:pointer;
}
.m8-drawer__close:hover{background:rgba(120,160,255,.16)}

.m8-drawer__list{list-style:none;margin:0;padding:6px 0;flex:1 0 auto}
.m8-drawer__list a{
  display:flex;align-items:center;
  min-height:var(--tap);
  padding:.6rem 16px;
  color:var(--ink);font-weight:600;font-size:.98rem;
  border-bottom:1px solid var(--line);
  text-decoration:none;
}
.m8-drawer__list a:hover{background:rgba(120,160,255,.09);text-decoration:none}
.m8-drawer__sub a{
  padding-left:34px;font-weight:500;font-size:.92rem;color:var(--ink-soft);
}
.m8-drawer__sub a::before{
  content:"";width:6px;height:6px;margin-right:10px;margin-left:-16px;
  border-right:2px solid var(--blue-lt);border-bottom:2px solid var(--blue-lt);
  transform:rotate(-45deg);flex:0 0 auto;
}
.m8-drawer__foot{
  margin:0;padding:16px;
  font-size:.76rem;color:var(--ink-mute);
  border-top:1px solid var(--line);
}

body.m8-locked{overflow:hidden}

/* ==========================================================================
   02 HERO, over the stage artwork
   ========================================================================== */

.m8-hero{
  position:relative;
  padding:30px 0 34px;
  text-align:center;
  background:url("/assets/img/bg-stage.webp") center bottom / cover no-repeat;
  border-bottom:1px solid var(--line);
}
.m8-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,10,24,.72) 0%,rgba(5,10,24,.55) 45%,rgba(7,12,31,.93) 100%);
}
.m8-hero > *{position:relative}

.m8-eyebrow{
  display:inline-block;margin:0 0 .7rem;
  font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
  border:1px solid rgba(245,197,66,.45);
  border-radius:999px;padding:.3rem .85rem;
  background:rgba(8,12,30,.55);
}

.m8-hero h1{
  margin:0 0 .6rem;
  text-shadow:0 2px 18px rgba(0,0,0,.75);
  background:linear-gradient(180deg,#ffffff 0%,#bcdcff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.m8-hero__lead{
  margin:0 auto 1.4rem;
  color:#d4e2ff;font-size:.96rem;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}

.m8-cta-row{display:grid;gap:11px}

/* ---- buttons ---- */
.m8-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--tap);
  padding:.8rem 1.1rem;
  border-radius:var(--radius-sm);
  font-weight:700;font-size:.98rem;line-height:1.2;
  color:#04122b;
  background:var(--grad-blue);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 18px rgba(36,169,255,.26);
  text-decoration:none;text-align:center;
  transition:transform .12s ease,filter .12s ease;
}
.m8-btn:hover{text-decoration:none;filter:brightness(1.07)}
.m8-btn:active{transform:translateY(1px)}
.m8-btn__ico{display:inline-flex;flex:0 0 auto}

.m8-btn--android{background:var(--grad-green);color:#03230f;box-shadow:0 6px 18px rgba(34,197,94,.28)}
.m8-btn--ios{background:var(--grad-purple);color:#fff;box-shadow:0 6px 18px rgba(163,60,255,.28)}
.m8-btn--pc{background:var(--grad-win);color:#fff;box-shadow:0 6px 18px rgba(0,120,212,.3)}
.m8-btn--gold{background:var(--grad-gold);color:#241a00;box-shadow:0 6px 18px rgba(245,197,66,.25)}
.m8-btn--ghost{background:rgba(120,160,255,.06);color:var(--ink);border:1px solid var(--line-str);box-shadow:none}
.m8-btn--ghost:hover{background:rgba(120,160,255,.13);filter:none}
.m8-btn--sm{width:100%;font-size:.94rem;padding:.7rem 1rem}

/* ---- section header row ----------------------------------------------
   PlayStation and Nintendo both put the section name on the left and the
   way deeper on the right of the same line, rather than a button at the
   foot of the section. It saves a whole row of vertical space per section
   and it puts the exit where the eye already is. */
.m8-sechead{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:.7rem;
}
.m8-sechead h2{margin:0;flex:1}
.m8-sechead > a{
  flex:0 0 auto;
  font-size:.86rem;font-weight:700;text-decoration:none;
  color:var(--blue-lt);white-space:nowrap;
}
.m8-sechead > a::after{content:" \203A";font-weight:400}
.m8-sechead > a:hover{text-decoration:underline}

/* ---- platform rows ---------------------------------------------------
   Three device buttons said nothing about the platforms. A row per
   platform carries the icon, the name and the one detail that decides it,
   which is what the download hub would have told you on the next page. */
.m8-plat{
  list-style:none;margin:1rem 0 0;padding:0;
  display:grid;gap:10px;
}
.m8-plat a{
  display:flex;align-items:center;gap:.85rem;
  padding:.85rem 1rem;
  background:var(--navy-700);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-sm);
  text-decoration:none;color:var(--ink);
  transition:filter .14s ease,transform .12s ease;
}
.m8-plat a:hover{filter:brightness(1.07)}
.m8-plat a:active{transform:translateY(1px)}
/* one colour per platform, matching the .m8-btn--android/ios/pc buttons */
.m8-plat .m8-plat__link--android{background:var(--grad-green);color:#03230f;box-shadow:0 6px 18px rgba(34,197,94,.28)}
.m8-plat .m8-plat__link--ios{background:var(--grad-purple);color:#fff;box-shadow:0 6px 18px rgba(163,60,255,.28)}
.m8-plat .m8-plat__link--pc{background:var(--grad-win);color:#fff;box-shadow:0 6px 18px rgba(0,120,212,.3)}
.m8-plat a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.m8-plat__ico{
  flex:0 0 auto;display:grid;place-items:center;
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.22);
}
.m8-plat__txt{flex:1;display:flex;flex-direction:column;line-height:1.25}
.m8-plat__txt b{font-size:.96rem;font-weight:700}
.m8-plat__txt small{font-size:.78rem;color:inherit;opacity:.85;margin-top:.12rem}
.m8-plat__go{flex:0 0 auto;font-size:1.3rem;color:inherit;opacity:.85;line-height:1}

/* ---- brand homepage density -----------------------------------------
   The homepage is a hub, not an article. Sections carry a heading, one
   line and a way through. These are the pieces that job needs. */

/* the money section gets a frame so it reads as an offer, not a paragraph */
.m8-offerbox{
  border:1px solid rgba(245,197,66,.34);
  border-radius:var(--radius-lg);
  padding:1.4rem 1.25rem 1.25rem;
  background:linear-gradient(165deg,rgba(245,197,66,.09),rgba(255,255,255,.02));
}
.m8-offerbox h2{margin-top:0}
.m8-offerbox p:last-child{margin-bottom:0}

/* game tiles become the navigation, so the whole tile is the target */
.m8-tile--link{
  display:block;text-decoration:none;color:inherit;
  border-radius:var(--radius-sm);
  transition:transform .16s ease;
}
.m8-tile--link:hover{transform:translateY(-3px)}
.m8-tile--link:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.m8-tile--link h3{color:var(--ink)}

/* four short routes, no prose. two columns so it reads as a menu. */
.m8-quick{
  list-style:none;margin:.9rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;
}
.m8-quick a{
  display:block;padding:.85rem 1rem;
  background:var(--navy-700);
  font-size:.92rem;font-weight:600;text-decoration:none;color:var(--ink);
  transition:background .14s ease;
}
.m8-quick a:hover{background:var(--navy-600)}
@media(max-width:380px){ .m8-quick{grid-template-columns:1fr} }

/* ---- hero artwork ----------------------------------------------------
   Sits between the lead copy and the play CTA. width/height are set on the
   element so the box is reserved before the file lands and nothing shifts. */
.m8-hero__art{
  display:block;
  width:100%;
  height:auto;
  margin:1.15rem 0 1.25rem;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
}

/* Section artwork, e.g. the MegaH5 browser illustration. Transparent WebP. */
.m8-sec__art{
  display:block;
  width:100%;
  height:auto;
  margin:1rem 0 1.15rem;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.4));
}

/* ---- primary play CTA -------------------------------------------------
   The hero offers two different intents: open the lobby now, or download the
   app for a device. The play action leads, the three device buttons follow,
   so the row below reads as the alternative rather than as four equal choices. */
.m8-cta-lead{margin:0 0 .2rem}
.m8-btn--play{
  width:100%;
  font-size:1.06rem;
  padding:.95rem 1.1rem;
  background:var(--grad-gold);
  color:#241a00;
  box-shadow:0 8px 24px rgba(245,197,66,.3);
}
.m8-btn--play .m8-btn__ico{margin-right:.1rem}
.m8-cta-note{
  margin:.5rem 0 0;
  text-align:center;
  font-size:.82rem;
  color:var(--ink-mute);
}
/* hairline with a label, cheaper than a heading for a one-word divider */
.m8-cta-or{
  display:flex;align-items:center;gap:.7rem;
  margin:1rem 0 .85rem;
  color:var(--ink-soft);font-size:.8rem;
}
.m8-cta-or::before,.m8-cta-or::after{
  content:"";flex:1;height:1px;background:var(--line);
}
.m8-cta-or span{white-space:nowrap}

@media (prefers-reduced-motion: no-preference){
  .m8-btn--play{animation:m8PlayPulse 3.4s ease-in-out infinite}
}
@keyframes m8PlayPulse{
  0%,100%{box-shadow:0 8px 24px rgba(245,197,66,.3)}
  50%{box-shadow:0 8px 30px rgba(245,197,66,.46)}
}

.m8-hero__more{margin:1rem 0 0}
.m8-hero__more a{font-weight:600;border-bottom:1px solid rgba(111,211,255,.45)}

/* ---- product info strip ---- */
.m8-strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin:1.5rem 0 0;
  background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-align:left;
}
.m8-strip > div{background:rgba(11,19,48,.92);padding:.7rem .8rem}
.m8-strip dt{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);font-weight:700}
.m8-strip dd{margin:.15rem 0 0;font-weight:700;font-size:.88rem;color:var(--ink)}

/* Technical strings: package names, filenames, credentials.
   Must wrap rather than force the column wider. */
.m8-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
code.m8-mono{
  background:rgba(120,160,255,.1);
  border:1px solid var(--line);
  border-radius:5px;padding:.08em .35em;
  color:var(--blue-lt);
}

/* placeholder token */
.m8-ph{
  color:var(--gold)!important;font-weight:700;
  background:rgba(245,197,66,.1);
  border:1px dashed rgba(245,197,66,.5);
  border-radius:6px;padding:.05em .4em;
  font-size:.86em;display:inline-block;word-break:break-word;
}
.m8-ph--hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74em}

.m8-trust{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem .5rem;
  margin:1.2rem 0 0;padding:0;
}
.m8-trust li{
  font-size:.75rem;color:#cfdcf6;
  border:1px solid var(--line-str);border-radius:999px;
  padding:.28rem .7rem;background:rgba(8,12,30,.6);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.m8-sec{padding:34px 0;border-bottom:1px solid var(--line)}
.m8-sec--alt{background:rgba(11,19,48,.78)}
.m8-sec__intro{color:var(--ink-soft);margin-bottom:1.4rem;font-size:.95rem}
.m8-sec__after{margin:1.4rem 0 0}

/* ---- device cards ---- */
.m8-cards{display:grid;gap:14px}

.m8-card{
  position:relative;
  background:linear-gradient(180deg,var(--navy-600) 0%,var(--navy-700) 100%);
  border:1px solid var(--line-str);
  border-radius:var(--radius);
  padding:18px 16px;
  display:flex;flex-direction:column;
}
.m8-card::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--grad-blue);
}
.m8-card:nth-child(2)::before{background:var(--grad-purple)}
.m8-card:nth-child(3)::before{background:var(--grad-gold)}
.m8-card h3{margin-top:.25rem}
.m8-card p{color:var(--ink-soft);font-size:.92rem}
.m8-card .m8-btn{margin-top:auto}

/* ---- spec lists ---- */
.m8-spec{margin:0 0 1.1rem;padding:0;border-top:1px solid var(--line)}
.m8-spec > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  padding:.5rem 0;border-bottom:1px solid var(--line);
}
.m8-spec dt{color:var(--ink-mute);font-size:.82rem;flex:0 0 auto}
.m8-spec dd{margin:0;font-weight:700;font-size:.86rem;text-align:right}
.m8-spec--promo{margin-bottom:1.3rem;border-top:0}

/* ---- panels ---- */
.m8-panel{
  background:linear-gradient(180deg,var(--navy-600) 0%,var(--navy-700) 100%);
  border:1px solid var(--line-str);border-radius:var(--radius);
  padding:18px 16px;
}
.m8-panel--verify{border-color:rgba(245,197,66,.36)}
.m8-panel__h{font-size:.98rem;margin:0 0 .9rem}
.m8-panel__lead{color:var(--ink-soft);font-size:.92rem;margin:0 0 1rem}
.m8-panel__grid{display:grid;margin:0 0 1.1rem}
.m8-panel__grid > div{padding:.6rem 0;border-bottom:1px solid var(--line)}
.m8-panel__grid dt{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);font-weight:700}
.m8-panel__grid dd{margin:.2rem 0 0;font-weight:700;font-size:.93rem;overflow-wrap:anywhere}
.m8-panel .m8-btn{width:100%}

/* ---- test credentials ---- */
.m8-cred{
  display:grid;gap:1px;margin:0 0 1.2rem;
  background:var(--line);border:1px solid var(--line-str);
  border-radius:var(--radius);overflow:hidden;
}
.m8-cred > div{background:var(--navy-600);padding:.75rem .85rem}
.m8-cred dt{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);font-weight:700}
.m8-cred dd{
  margin:.3rem 0 0;font-weight:700;font-size:1rem;color:var(--gold);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.m8-copy{
  flex:0 0 auto;
  min-height:32px;padding:.25rem .7rem;
  font:700 .74rem/1 var(--font);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);background:rgba(120,160,255,.1);
  border:1px solid var(--line-str);border-radius:8px;cursor:pointer;
}
.m8-copy:hover{background:rgba(120,160,255,.2)}
.m8-copy.is-done{background:rgba(70,200,120,.18);border-color:rgba(70,200,120,.5);color:#8ff0b5}

.m8-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem;padding:0}
.m8-chips li{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;font-weight:700;
  color:var(--blue-lt);background:rgba(36,169,255,.1);
  border:1px solid rgba(36,169,255,.3);border-radius:8px;padding:.3rem .6rem;
}


.m8-note{font-size:.86rem;color:var(--ink-mute);margin-bottom:1.1rem}


/* ---- game categories ----
   The supplied button art is a finished object with its own rounded frame and
   gloss, so the tile carries no border or fill of its own. A box drawn around
   a button reads as two borders. */
.m8-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 12px}
.m8-tile img{
  width:100%;height:auto;
  margin-bottom:.6rem;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.45));
}
.m8-tile h3{font-size:.94rem;margin-bottom:.25rem}
.m8-tile p{margin:0;font-size:.82rem;color:var(--ink-soft);line-height:1.45}

/* ---- steps: a numbered rail, not a stack of boxes ----
   Cards are dropped here on purpose. Elevation communicated nothing; the
   sequence is the hierarchy, so a connecting rail carries it instead. */
.m8-flow{
  list-style:none;margin:0;padding:0 0 0 38px;
  counter-reset:flow;position:relative;
}
.m8-flow::before{
  content:"";position:absolute;left:14px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,
    rgba(36,169,255,.55) 0%,
    rgba(163,60,255,.4) 55%,
    rgba(120,160,255,.12) 100%);
}
.m8-flow > li{position:relative;padding:0 0 1.35rem}
.m8-flow > li:last-child{padding-bottom:0}
.m8-flow > li::before{
  counter-increment:flow;content:counter(flow);
  position:absolute;left:-38px;top:1px;
  width:29px;height:29px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;
  color:var(--blue-lt);
  background:var(--navy-800);
  border:1px solid rgba(36,169,255,.45);
  box-shadow:0 0 0 4px var(--navy-800);
}
.m8-flow h3{margin:.25rem 0 .3rem;font-size:1rem}
.m8-flow p{margin:0;color:var(--ink-soft);font-size:.9rem}

/* ---- help: left-rule entries, no boxes ----
   Deliberately a different family from the steps above so the two sections
   do not read as the same component twice. */
.m8-issues{display:grid;gap:1.35rem}
.m8-issues > article{
  padding-left:14px;
  border-left:2px solid rgba(120,160,255,.3);
  transition:border-color .16s ease;
}
.m8-issues > article:hover{border-left-color:var(--blue)}
.m8-issues h3{margin:0 0 .35rem;font-size:1rem}
.m8-issues p{margin:0 0 .6rem;color:var(--ink-soft);font-size:.9rem}
.m8-issues a{
  display:inline-flex;align-items:center;gap:.4rem;min-height:32px;
  font-weight:700;font-size:.89rem;
}
.m8-issues a::after{
  content:"";width:6px;height:6px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .16s ease;
}
.m8-issues a:hover{text-decoration:none}
.m8-issues a:hover::after{transform:rotate(-45deg) translate(2px,2px)}

/* ---- FAQ: separated rows, zero hairlines ----
   A hairline under all ten rows was the single worst thing on the page. */
.m8-faq{display:grid;gap:7px}
.m8-faq details{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(120,160,255,.15);
  border-radius:var(--radius-sm);
  transition:background .16s ease,border-color .16s ease;
}
.m8-faq details:hover{background:rgba(255,255,255,.06);border-color:var(--line-str)}
.m8-faq details[open]{
  background:rgba(36,169,255,.07);
  border-color:rgba(36,169,255,.34);
}
.m8-faq summary{
  cursor:pointer;list-style:none;
  padding:.8rem 2.4rem .8rem .9rem;
  font-weight:700;font-size:.94rem;position:relative;
  min-height:var(--tap);display:flex;align-items:center;
}
.m8-faq summary::-webkit-details-marker{display:none}
.m8-faq summary::after{
  content:"";position:absolute;right:.95rem;top:50%;
  width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--blue-lt);border-bottom:2px solid var(--blue-lt);
  transform:rotate(45deg);transition:transform .2s ease;
}
.m8-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.m8-faq details[open] summary{color:var(--blue-lt)}
.m8-faq p{margin:0;padding:0 .95rem .95rem;color:var(--ink-soft);font-size:.91rem}

/* ---- checklist: two columns, no bullets ---- */
.m8-check{
  list-style:none;margin:0 0 1.2rem;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem .9rem;
}
.m8-check li{
  position:relative;padding-left:1.35rem;
  font-size:.88rem;color:var(--ink-soft);line-height:1.4;
}
.m8-check li::before{
  content:"";position:absolute;left:0;top:.35em;
  width:9px;height:5px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
}

/* ---- responsible gaming: a quiet compliance band, deliberately low key ---- */
.m8-sec--rg{background:var(--navy-900);padding:28px 0}
.m8-sec--rg h2{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.1rem;margin-bottom:.8rem;
}
.m8-sec--rg p{color:var(--ink-mute);font-size:.86rem;line-height:1.6}
.m8-sec--rg p:last-child{margin-bottom:0}
.m8-age{
  flex:0 0 auto;
  background:#d32f4a;color:#fff;font-weight:800;font-size:.72rem;
  border-radius:50%;width:30px;height:30px;line-height:30px;
  text-align:center;letter-spacing:-.02em;
}

/* ---- final CTA: the page's closing beat, so it gets the most presence ---- */
.m8-final{
  padding:44px 0 48px;text-align:center;position:relative;
  background:url("/assets/img/bg-stage.webp") center 30% / cover no-repeat;
  border-bottom:1px solid var(--line);
}
.m8-final::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 90% at 50% 40%,rgba(36,169,255,.16) 0%,transparent 70%),
    linear-gradient(180deg,rgba(7,12,31,.88) 0%,rgba(5,10,24,.6) 45%,rgba(5,10,24,.95) 100%);
}
.m8-final > *{position:relative}
.m8-final h2{
  font-size:clamp(1.4rem,5vw,1.7rem);
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.m8-final p{color:#d4e2ff;margin-bottom:1.4rem;font-size:.95rem;text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* ---- footer ---- */
.m8-footer{background:var(--navy-900);padding:30px 0 26px;font-size:.9rem}
.m8-footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 14px}
.m8-footer__h{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .5rem;font-weight:800;
}
.m8-footer ul{list-style:none;margin:0;padding:0}
.m8-footer li a{display:inline-flex;align-items:center;min-height:34px;color:var(--ink-soft)}
.m8-footer li a:hover{color:var(--ink)}
.m8-footer__legal{
  margin:24px 0 .8rem;padding-top:16px;border-top:1px solid var(--line);
  color:var(--ink-mute);font-size:.78rem;line-height:1.6;
}
.m8-footer__copy{margin:0;color:var(--ink-mute);font-size:.78rem}

/* ==========================================================================
   NARROW PHONES
   ========================================================================== */

@media (max-width:359px){
  :root{--gutter:13px}
  .m8-strip{grid-template-columns:1fr}
  .m8-tiles{grid-template-columns:1fr}
  .m8-check{grid-template-columns:1fr}
}

/* ==========================================================================
   SCROLL REVEAL
   Why this exists: the page is one long single column, so sections settle as
   they enter to read as a sequence rather than one continuous wall.
   CSS scroll-driven animation only. No scroll listeners, no JS.
   Gated twice: unsupported browsers and reduced-motion users get static,
   fully visible content.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m8-sec > .m8-wrap > *,
    .m8-final > .m8-wrap > * {
      animation: m8-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes m8-rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ==========================================================================
   SUBPAGE COMPONENTS
   Added for /about/. Informational pages are calmer than the homepage:
   the hero drops the stage artwork and relies on a plain gradient, so
   readability leads and the visual emphasis stays on cards, the verification
   panel and the closing CTA.
   ========================================================================== */

/* toned-down hero for interior pages */
.m8-hero--page{
  background:linear-gradient(180deg,var(--navy-700) 0%,var(--navy-800) 100%);
  padding:22px 0 30px;
  text-align:left;
}
.m8-hero--page::before{content:none}
.m8-hero--page h1{
  text-shadow:none;
  font-size:clamp(1.55rem,6vw,2rem);
  margin-bottom:.5rem;
}
.m8-hero--page .m8-hero__lead{
  margin:0;max-width:52ch;
  color:var(--ink-soft);text-shadow:none;
}

/* breadcrumb */
.m8-crumb{margin:0 0 .9rem}
.m8-crumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
  font-size:.78rem;color:var(--ink-mute);
}
.m8-crumb li{display:flex;align-items:center;gap:.3rem}
.m8-crumb li + li::before{
  content:"";width:5px;height:5px;flex:0 0 auto;
  border-right:1.5px solid var(--ink-mute);border-bottom:1.5px solid var(--ink-mute);
  transform:rotate(-45deg);
}
.m8-crumb a{color:var(--ink-soft)}
.m8-crumb [aria-current="page"]{color:var(--ink-mute)}

/* the card accent cycles past three so a six-card grid stays varied */
.m8-card:nth-child(4)::before{background:var(--grad-blue)}
.m8-card:nth-child(5)::before{background:var(--grad-gold)}
.m8-card:nth-child(6)::before{background:var(--grad-purple)}

/* "Information we do not guess": quiet and factual, not defensive */
.m8-principle{
  border-left:3px solid var(--gold);
  background:rgba(245,197,66,.05);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:16px 16px 4px;
}
.m8-principle p{color:var(--ink-soft);font-size:.93rem}
.m8-principle p:first-child{color:var(--ink);font-weight:700}

/* two ghost buttons that share a row when there is space */
.m8-btnpair{display:grid;gap:12px;margin-top:1.2rem}

/* Responsible gaming heading: the 18+ badge is a sibling of the h2, never a
   child of it, so the heading's accessible name stays "Responsible Gaming"
   instead of "18+Responsible Gaming". */
.m8-rghead{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.m8-rghead h2{margin:0;font-size:1.1rem}
@media (min-width:420px){
  .m8-btnpair{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   LEGAL / DOCUMENT PAGES
   Privacy and Terms read as documents, not marketing pages: closer heading
   rhythm, no card chrome, quieter type. The 480px column already gives a
   65-character line, which is inside the ideal 45 to 75 range, so no separate
   reading width is needed.
   ========================================================================== */

.m8-doc h2{
  font-size:1.05rem;
  margin:1.9rem 0 .55rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
}
.m8-doc h2:first-of-type{margin-top:.4rem;padding-top:0;border-top:0}
.m8-doc p{font-size:.93rem;color:var(--ink-soft)}
.m8-doc .m8-check{margin-bottom:1rem}

.m8-updated{
  display:inline-block;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--ink-mute);
  border:1px solid var(--line);border-radius:999px;
  padding:.3rem .8rem;margin-bottom:1.4rem;
}

/* plain link list, used where a card grid would be too heavy */
.m8-linklist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.m8-linklist a{
  display:flex;align-items:center;gap:.5rem;
  min-height:var(--tap);
  padding:.6rem .9rem;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(120,160,255,.15);
  border-radius:var(--radius-sm);
  color:var(--ink);font-weight:600;font-size:.93rem;
  transition:background .16s ease,border-color .16s ease;
}
.m8-linklist a:hover{background:rgba(255,255,255,.06);border-color:var(--line-str);text-decoration:none}
.m8-linklist a::after{
  content:"";margin-left:auto;width:6px;height:6px;
  border-right:2px solid var(--blue-lt);border-bottom:2px solid var(--blue-lt);
  transform:rotate(-45deg);
}

/* warning-tinted checklist for the problem-gambling signs */
.m8-check--warn li::before{border-color:#ff8ecb}

/* ==========================================================================
   DOWNLOAD CLUSTER
   Slightly more product-focused than the trust pages: a platform badge on each
   card and a clear state for information that is not yet confirmed.
   ========================================================================== */

.m8-badge{
  display:inline-block;margin:0 0 .6rem;
  font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-lt);
  background:rgba(36,169,255,.12);
  border:1px solid rgba(36,169,255,.32);
  border-radius:999px;padding:.26rem .7rem;
}
.m8-badge--ios{color:#cf9bff;background:rgba(163,60,255,.12);border-color:rgba(163,60,255,.32)}
.m8-badge--pc{color:var(--ink-soft);background:rgba(120,160,255,.1);border-color:var(--line-str)}

/* an honest "not confirmed yet" state, distinct from a normal panel so it
   never reads as a finished spec */
.m8-alert{
  margin-top:1.2rem;
  background:rgba(245,197,66,.06);
  border:1px solid rgba(245,197,66,.3);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 16px 18px;
}
.m8-alert h3{margin:0 0 .5rem;font-size:1rem;color:var(--gold)}
.m8-alert p{margin:0 0 .8rem;font-size:.9rem;color:var(--ink-soft)}
.m8-alert .m8-btn{width:100%;margin-top:.2rem}

.m8-panel .m8-badge{margin-bottom:.9rem}

/* device -> action rows on the download hub */
.m8-linklist--split a::after{margin-left:.6rem}
.m8-linklist--split strong{flex:0 0 auto;font-weight:700}
.m8-linklist--split span{
  margin-left:auto;color:var(--ink-mute);font-size:.84rem;
  text-align:right;line-height:1.3;
}
@media (max-width:399px){
  .m8-linklist--split a{flex-wrap:wrap;padding-block:.55rem}
  .m8-linklist--split span{margin-left:0;flex-basis:100%;text-align:left}
  .m8-linklist--split a::after{position:absolute;right:.9rem;top:50%;margin:0}
  .m8-linklist--split a{position:relative;padding-right:2rem}
}

/* two-column can / cannot comparison */
.m8-twocol{display:grid;gap:18px}
.m8-twocol__col h3{
  font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 .7rem;font-weight:800;
}
.m8-twocol__col:first-child h3{color:var(--blue-lt)}
.m8-twocol__col:last-child h3{color:#ff8ecb}
.m8-twocol .m8-check{grid-template-columns:1fr;margin-bottom:0}
@media (min-width:430px){
  .m8-twocol{grid-template-columns:repeat(2,1fr);gap:16px}
}

/* negative list: a cross, never a tick, so "not for" cannot read as approval */
.m8-check--no li::before{
  content:"\00d7";
  border:0;transform:none;
  width:auto;height:auto;top:0;
  color:#ff8ecb;font-weight:800;font-size:1.1em;line-height:1.35;
}

/* credential rows: label, value and button on separate lines so the value and
   the button can never read as one string */
.m8-cred--stack dd{
  flex-direction:column;align-items:flex-start;gap:.55rem;
}
.m8-cred--stack .m8-mono{font-size:1.05rem;letter-spacing:.01em}
.m8-cred--stack .m8-copy{align-self:flex-start}
@media (min-width:430px){
  .m8-cred--stack dd{flex-direction:row;align-items:center;justify-content:space-between}
  .m8-cred--stack .m8-copy{align-self:auto}
}
.m8-flow .m8-check{margin:.5rem 0 0}

/* ==========================================================================
   COMPARISON TABLE
   A real <table> for semantics and screen readers. Below 560px each row
   becomes a card and every cell carries its own label, so nothing is lost
   and the page never scrolls sideways.
   ========================================================================== */

.m8-tablewrap{margin:0 0 1rem}
.m8-table{width:100%;border-collapse:collapse;font-size:.88rem}
.m8-table caption{text-align:left}
.m8-table th,.m8-table td{text-align:left;padding:.65rem .7rem;vertical-align:top}
.m8-table thead th{
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:800;
  border-bottom:1px solid var(--line-str);
}
.m8-table tbody th{color:var(--ink);font-weight:700}
.m8-table tbody td{color:var(--ink-soft)}
.m8-table tbody tr{border-bottom:1px solid var(--line)}
.m8-table tbody tr:last-child{border-bottom:0}

/* The column is never wider than 480px, so the card layout is unconditional.
   Keying this to the viewport produced a real 4-column table crushed into
   448px with a 96px column. Rows are cards at every width instead. */
.m8-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.m8-table,.m8-table tbody,.m8-table tr,.m8-table th,.m8-table td{display:block;width:100%}
.m8-table tbody tr{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(120,160,255,.15);
  border-radius:var(--radius-sm);
  padding:.6rem .2rem;margin-bottom:10px;
}
.m8-table tbody th{
  font-size:.98rem;padding-bottom:.4rem;
  border-bottom:1px solid var(--line);margin-bottom:.35rem;
}
.m8-table tbody td{padding:.3rem .7rem}
.m8-table tbody td::before{
  content:attr(data-label);
  display:block;
  font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:800;margin-bottom:.1rem;
}
.m8-table tbody tr:last-child{margin-bottom:0}

/* ==========================================================================
   PARTNER OFFERS
   Rendered from data/offers.json by build-offers.py. Fields without a verified
   value are omitted upstream, so nothing here has to cope with blanks.
   ========================================================================== */

.m8-offers{display:grid;gap:14px}
.m8-offer{
  position:relative;
  background:linear-gradient(180deg,var(--navy-600) 0%,var(--navy-700) 100%);
  border:1px solid rgba(245,197,66,.3);
  border-radius:var(--radius);
  padding:18px 16px;
}
.m8-offer::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--grad-gold);
}
.m8-offer__logo{
  max-height:38px;width:auto;margin:.3rem 0 .7rem;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.m8-offer h3{margin:.2rem 0 .2rem;font-size:1.05rem}
.m8-offer__promo{
  margin:0 0 .9rem;font-size:.88rem;color:var(--gold);font-weight:700;
}
.m8-offer .m8-spec{border-top:1px solid var(--line)}
.m8-offer .m8-btn{width:100%}

/* In-page anchors must clear the sticky header, otherwise a jump to #verify
   lands with the heading hidden underneath it. */
[id]{scroll-margin-top:84px}

/* a long value plus its copy button: stack them so the two never collide */
.m8-copyrow{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.m8-copyrow .m8-mono{display:block;width:100%}

/* ---- /games/ category headers --------------------------------------------
   Each lobby category leads with the supplied button artwork. The image is the
   section marker, so it sits above the heading rather than beside it. */
.m8-gamehead{display:block;width:100%;max-width:340px;height:auto;margin:0 0 14px;
  border-radius:12px}
.m8-sec--alt .m8-gamehead{margin-bottom:12px}
.m8-eyebrow + .m8-check{margin-top:.55rem}