/* ============================================================
   form 888 australia - mobile base styles
   file: css/mobile-18aa12-layers.css
   palette: #808080 #E9ECEF #8B008B #141414 #BAFFC9 #FFB3BA
   heading voice: humanist serif / body: clear sans
   ============================================================ */

:root{
  --shell8aa12-bg:#141414;
  --shell8aa12-ink:#E9ECEF;
  --shell8aa12-muted:#808080;
  --shell8aa12-brand:#8B008B;
  --shell8aa12-mint:#BAFFC9;
  --shell8aa12-blush:#FFB3BA;
  --shell8aa12-line:rgba(233,236,239,.14);
  --shell8aa12-line-strong:rgba(233,236,239,.26);
  --shell8aa12-panel:rgba(233,236,239,.045);
  --shell8aa12-panel-strong:rgba(233,236,239,.09);
  --shell8aa12-brand-soft:rgba(139,0,139,.32);
  --shell8aa12-header-h:56px;
  --shell8aa12-tabbar-h:64px;
  --shell8aa12-radius-lg:18px;
  --shell8aa12-radius-md:12px;
  --shell8aa12-radius-sm:8px;
  --shell8aa12-font-head:Georgia,"Palatino Linotype","Book Antiqua","Times New Roman",serif;
  --shell8aa12-font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{
  background:var(--shell8aa12-bg);
  color:var(--shell8aa12-ink);
  font-family:var(--shell8aa12-font-body);
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;border:0;display:block;}
a{color:var(--shell8aa12-mint);text-decoration:none;}
a:hover,a:focus-visible{text-decoration:underline;}
button{font-family:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3{
  font-family:var(--shell8aa12-font-head);
  font-weight:600;
  line-height:1.25;
  margin:0 0 10px;
  letter-spacing:.2px;
}
p{margin:0 0 12px;}
:focus-visible{outline:2px solid var(--shell8aa12-mint);outline-offset:2px;border-radius:4px;}
.shell8aa12-visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- fixed functional header ---------- */
.shell8aa12-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--shell8aa12-header-h);
  background:var(--shell8aa12-bg);
  border-bottom:1px solid var(--shell8aa12-line);
  display:flex;align-items:center;gap:10px;
  padding:0 12px;
  transition:box-shadow .25s ease,border-color .25s ease;
}
.shell8aa12-header.shell8aa12-scrolled{
  border-bottom-color:var(--shell8aa12-line-strong);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.shell8aa12-brand{
  display:flex;align-items:center;gap:8px;
  min-width:0;flex:1 1 auto;
}
.shell8aa12-brand img{width:32px;height:32px;border-radius:8px;flex:0 0 auto;}
.shell8aa12-brand-name{
  font-family:var(--shell8aa12-font-head);
  font-size:17px;font-weight:700;color:var(--shell8aa12-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* segmented action pair: filled segment + outlined segment joined */
.shell8aa12-cta-pair{
  display:flex;flex:0 0 auto;
  border-radius:999px;overflow:hidden;
  border:1px solid var(--shell8aa12-brand);
}
.shell8aa12-cta{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  border:0;font-size:12px;font-weight:700;letter-spacing:.4px;
  min-height:34px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:filter .2s ease,background .2s ease,color .2s ease;
}
.shell8aa12-cta-join{
  background:var(--shell8aa12-mint);color:var(--shell8aa12-bg);
  border-radius:999px 0 0 999px;
}
.shell8aa12-cta-enter{
  background:var(--shell8aa12-bg);color:var(--shell8aa12-blush);
  border-radius:0 999px 999px 0;
}
.shell8aa12-cta:hover,.shell8aa12-cta:focus-visible{filter:brightness(1.12);text-decoration:none;}
.shell8aa12-burger{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  flex:0 0 auto;width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--shell8aa12-panel);
  border:1px solid var(--shell8aa12-line);
  border-radius:var(--shell8aa12-radius-sm);
  color:var(--shell8aa12-ink);
}
.shell8aa12-burger svg{width:20px;height:20px;}
.shell8aa12-burger[aria-expanded="true"]{
  background:var(--shell8aa12-brand-soft);
  border-color:var(--shell8aa12-brand);
}

/* ---------- stacked overlay menu ---------- */
.shell8aa12-menu{
  position:fixed;inset:0;z-index:80;
  background:var(--shell8aa12-bg);
  padding:calc(var(--shell8aa12-header-h) + 12px) 16px 24px;
  overflow-y:auto;
  transform:translateY(-102%);
  transition:transform .32s ease;
  visibility:hidden;
}
.shell8aa12-menu.shell8aa12-open{transform:translateY(0);visibility:visible;}
.shell8aa12-menu-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.shell8aa12-menu-title{
  font-family:var(--shell8aa12-font-head);
  font-size:20px;color:var(--shell8aa12-ink);margin:0;
}
.shell8aa12-menu-close{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  width:38px;height:38px;border-radius:var(--shell8aa12-radius-sm);
  background:var(--shell8aa12-panel);border:1px solid var(--shell8aa12-line);
  color:var(--shell8aa12-ink);
  display:inline-flex;align-items:center;justify-content:center;
}
.shell8aa12-menu-close svg{width:18px;height:18px;}
.shell8aa12-menu-list li{
  opacity:0;transform:translateX(-14px);
  transition:opacity .28s ease,transform .28s ease;
}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li{
  opacity:1;transform:none;
}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li:nth-child(1){transition-delay:.05s;}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li:nth-child(2){transition-delay:.08s;}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li:nth-child(3){transition-delay:.11s;}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li:nth-child(4){transition-delay:.14s;}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li:nth-child(5){transition-delay:.17s;}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li:nth-child(6){transition-delay:.20s;}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li:nth-child(7){transition-delay:.23s;}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li:nth-child(8){transition-delay:.26s;}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li:nth-child(9){transition-delay:.29s;}
.shell8aa12-menu.shell8aa12-open .shell8aa12-menu-list li:nth-child(10){transition-delay:.32s;}
.shell8aa12-menu-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:50px;padding:10px 12px;
  border-bottom:1px solid var(--shell8aa12-line);
  color:var(--shell8aa12-ink);font-size:15px;
  border-radius:var(--shell8aa12-radius-sm) var(--shell8aa12-radius-sm) 0 0;
}
.shell8aa12-menu-link:hover,.shell8aa12-menu-link:focus-visible{
  background:var(--shell8aa12-panel);text-decoration:none;
}
.shell8aa12-menu-link em{
  font-style:normal;font-size:11px;color:var(--shell8aa12-muted);
}
.shell8aa12-menu-cta-row{display:flex;gap:10px;margin-top:18px;}
.shell8aa12-menu-cta-row .shell8aa12-cta{flex:1 1 50%;min-height:44px;font-size:13px;}
.shell8aa12-menu-cta-row .shell8aa12-cta-join{border:1px solid var(--shell8aa12-brand);}

/* ---------- main column ---------- */
.shell8aa12-main{
  padding-top:var(--shell8aa12-header-h);
  /* room for the fixed bottom band so content is never covered */
  padding-bottom:calc(var(--shell8aa12-tabbar-h) + 30px + env(safe-area-inset-bottom,0px));
}
.shell8aa12-wrap{padding:0 14px;}
.shell8aa12-section{padding:22px 0 6px;}
.shell8aa12-rule{
  height:1px;border:0;margin:6px 0 18px;
  background:linear-gradient(90deg,var(--shell8aa12-brand),rgba(139,0,139,0));
}

/* ---------- hero carousel ---------- */
.shell8aa12-hero{padding:12px 0 4px;}
.shell8aa12-viewport{
  overflow:hidden;border-radius:var(--shell8aa12-radius-lg);
  border:1px solid var(--shell8aa12-line);
  background:var(--shell8aa12-panel);
}
.shell8aa12-track{
  display:flex;width:100%;
  transition:transform .5s ease;
}
.shell8aa12-slide{
  flex:0 0 100%;display:block;padding:0;border:0;background:var(--shell8aa12-bg);
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
.shell8aa12-slide img{
  width:100%;height:auto;aspect-ratio:20/9;object-fit:cover;
  border-radius:var(--shell8aa12-radius-lg);
}
.shell8aa12-dots{
  display:flex;justify-content:center;gap:8px;margin-top:10px;
}
.shell8aa12-dot{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  width:26px;height:8px;border-radius:999px;padding:0;
  background:var(--shell8aa12-panel-strong);
  border:1px solid var(--shell8aa12-line);
  transition:background .25s ease,border-color .25s ease;
}
.shell8aa12-dot[aria-current="true"]{
  background:var(--shell8aa12-mint);border-color:var(--shell8aa12-mint);
}

/* ---------- page heading block ---------- */
.shell8aa12-page-head{padding-top:18px;}
.shell8aa12-title{
  font-size:24px;letter-spacing:.2px;
}
.shell8aa12-lede{color:var(--shell8aa12-ink);}

/* ---------- game sections ---------- */
.shell8aa12-cat-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:4px;
}
.shell8aa12-cat-tag{
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--shell8aa12-blush);white-space:nowrap;
}
.shell8aa12-section h2{font-size:20px;}
.shell8aa12-cat-note{font-size:13px;color:var(--shell8aa12-muted);margin-bottom:14px;}
.shell8aa12-cat-note a{color:var(--shell8aa12-mint);}
/* outlined tile cards, 4 columns at 320px */
.shell8aa12-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.shell8aa12-tile{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:100%;padding:8px 6px 9px;
  background:var(--shell8aa12-panel);
  border:1px solid var(--shell8aa12-line);
  border-radius:var(--shell8aa12-radius-md);
  transition:border-color .2s ease,background .2s ease,transform .18s ease;
}
.shell8aa12-tile:hover,.shell8aa12-tile:focus-visible{
  border-color:var(--shell8aa12-mint);
  background:var(--shell8aa12-panel-strong);
}
.shell8aa12-tile:active{transform:scale(.97);}
.shell8aa12-tile-art{
  width:100%;border-radius:var(--shell8aa12-radius-sm);overflow:hidden;
  border:1px solid var(--shell8aa12-line);
  background:var(--shell8aa12-bg);
}
.shell8aa12-tile-art img{width:100%;height:auto;}
.shell8aa12-tile-label{
  font-size:11px;line-height:1.3;color:var(--shell8aa12-ink);
  text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:29px;word-break:break-word;
}

/* ---------- feature / module blocks ---------- */
.shell8aa12-module{
  background:var(--shell8aa12-panel);
  border:1px solid var(--shell8aa12-line);
  border-radius:var(--shell8aa12-radius-lg) var(--shell8aa12-radius-lg)
              var(--shell8aa12-radius-md) var(--shell8aa12-radius-md);
  padding:16px 14px 8px;margin:18px 0;
}
.shell8aa12-module > h2{font-size:19px;}
.shell8aa12-feat-list li{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;border-bottom:1px dashed var(--shell8aa12-line);
}
.shell8aa12-feat-list li:last-child{border-bottom:0;}
.shell8aa12-feat-key{
  flex:0 0 auto;width:8px;height:8px;margin-top:8px;border-radius:2px;
  background:var(--shell8aa12-mint);
  transform:rotate(45deg);
}
.shell8aa12-feat-list strong{color:var(--shell8aa12-mint);font-weight:700;}
.shell8aa12-facts{font-size:14px;}
.shell8aa12-facts dt{
  font-family:var(--shell8aa12-font-head);font-weight:700;
  color:var(--shell8aa12-ink);margin-top:12px;
}
.shell8aa12-facts dd{margin:2px 0 0;color:var(--shell8aa12-muted);font-size:13px;}
.shell8aa12-steps{counter-reset:shell8aa12step;}
.shell8aa12-steps li{
  counter-increment:shell8aa12step;
  position:relative;padding:10px 0 10px 40px;
  border-bottom:1px solid var(--shell8aa12-line);
}
.shell8aa12-steps li:last-child{border-bottom:0;}
.shell8aa12-steps li::before{
  content:counter(shell8aa12step);
  position:absolute;left:0;top:12px;
  width:26px;height:26px;border-radius:50% 50% 50% 6px;
  background:var(--shell8aa12-brand-soft);
  border:1px solid var(--shell8aa12-brand);
  color:var(--shell8aa12-mint);
  font-family:var(--shell8aa12-font-head);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.shell8aa12-steps strong{color:var(--shell8aa12-mint);}
.shell8aa12-checklist li{
  position:relative;padding:8px 0 8px 26px;
  border-bottom:1px dashed var(--shell8aa12-line);
  font-size:14px;
}
.shell8aa12-checklist li:last-child{border-bottom:0;}
.shell8aa12-checklist li::before{
  content:"";position:absolute;left:2px;top:14px;
  width:10px;height:6px;border-left:2px solid var(--shell8aa12-mint);
  border-bottom:2px solid var(--shell8aa12-mint);
  transform:rotate(-45deg);
}
.shell8aa12-qa h3{font-size:15px;color:var(--shell8aa12-mint);margin:14px 0 4px;}
.shell8aa12-qa p{font-size:14px;color:var(--shell8aa12-ink);}

/* ---------- extended footer (sectioned list) ---------- */
.shell8aa12-xfooter{
  margin-top:24px;padding:22px 0 8px;
  border-top:1px solid var(--shell8aa12-line-strong);
}
.shell8aa12-xfooter-block{margin-bottom:20px;}
.shell8aa12-xfooter-block h2{font-size:17px;}
.shell8aa12-xfooter-brandline{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.shell8aa12-xfooter-brandline img{width:34px;height:34px;border-radius:9px;}
.shell8aa12-xfooter-brandline span{
  font-family:var(--shell8aa12-font-head);font-size:18px;font-weight:700;
}
.shell8aa12-xfooter p{font-size:13px;color:var(--shell8aa12-muted);}
.shell8aa12-xfooter-label{
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--shell8aa12-blush);margin:0 0 10px;
}
.shell8aa12-promo-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.shell8aa12-promo-btn{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:8px 10px;font-size:12px;font-weight:700;letter-spacing:.3px;
  border-radius:var(--shell8aa12-radius-sm);
  background:var(--shell8aa12-panel-strong);
  border:1px solid var(--shell8aa12-line-strong);
  color:var(--shell8aa12-ink);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.shell8aa12-promo-btn:hover,.shell8aa12-promo-btn:focus-visible{
  border-color:var(--shell8aa12-mint);color:var(--shell8aa12-mint);text-decoration:none;
}
.shell8aa12-promo-btn-primary{
  background:var(--shell8aa12-mint);color:var(--shell8aa12-bg);
  border-color:var(--shell8aa12-mint);
}
.shell8aa12-promo-btn-primary:hover,.shell8aa12-promo-btn-primary:focus-visible{
  color:var(--shell8aa12-bg);filter:brightness(1.08);
}
.shell8aa12-dir-list li{border-bottom:1px solid var(--shell8aa12-line);}
.shell8aa12-dir-list a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:44px;font-size:14px;color:var(--shell8aa12-ink);
  padding:6px 4px;
}
.shell8aa12-dir-list a:hover,.shell8aa12-dir-list a:focus-visible{
  color:var(--shell8aa12-mint);text-decoration:none;
}
.shell8aa12-dir-list em{font-style:normal;font-size:11px;color:var(--shell8aa12-muted);}
.shell8aa12-disclaimer{
  font-size:12px;line-height:1.55;color:var(--shell8aa12-muted);
  border:1px dashed var(--shell8aa12-line-strong);
  border-radius:var(--shell8aa12-radius-md);
  padding:12px;margin-top:6px;
}
.shell8aa12-disclaimer strong{color:var(--shell8aa12-blush);font-weight:700;}

/* ---------- common footer ---------- */
.shell8aa12-cfooter{
  padding:14px 0 6px;text-align:center;
  font-size:12px;color:var(--shell8aa12-muted);
}
.shell8aa12-cfooter p{margin:0 0 4px;}

/* ---------- fixed bottom brand band (5 roles) ---------- */
.shell8aa12-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  height:calc(var(--shell8aa12-tabbar-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--shell8aa12-bg);
  border-top:2px solid var(--shell8aa12-brand);
  box-shadow:0 -6px 16px rgba(0,0,0,.4);
}
.shell8aa12-tabbar-list{
  display:flex;height:var(--shell8aa12-tabbar-h);
}
.shell8aa12-tabbar a,
.shell8aa12-tabbar button.shell8aa12-tabbar-link{
  -webkit-appearance:none;appearance:none;cursor:pointer;background:none;border:0;
  flex:1 1 20%;min-width:0;font-size:10px;letter-spacing:.3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--shell8aa12-muted);
  padding:4px 2px;
}
.shell8aa12-tabbar a:hover,.shell8aa12-tabbar a:focus-visible,
.shell8aa12-tabbar button.shell8aa12-tabbar-link:hover,
.shell8aa12-tabbar button.shell8aa12-tabbar-link:focus-visible{text-decoration:none;}
/* icon sits in a container tile; active state = icon fill change */
.shell8aa12-tab-icon{
  width:34px;height:26px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--shell8aa12-panel);
  border:1px solid var(--shell8aa12-line);
  color:var(--shell8aa12-muted);
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.shell8aa12-tab-icon svg{width:17px;height:17px;}
.shell8aa12-tabbar a:hover .shell8aa12-tab-icon{
  border-color:var(--shell8aa12-line-strong);color:var(--shell8aa12-ink);
}
.shell8aa12-tabbar a.shell8aa12-active{color:var(--shell8aa12-mint);}
.shell8aa12-tabbar a.shell8aa12-active .shell8aa12-tab-icon{
  background:var(--shell8aa12-brand-soft);
  border-color:var(--shell8aa12-brand);
  color:var(--shell8aa12-mint);
  transform:translateY(-2px);
}
.shell8aa12-tabbar a.shell8aa12-active .shell8aa12-tab-icon svg{
  transform:scale(1.06);
}

/* ---------- short-distance reveal (only when JS is present) ---------- */
html.shell8aa12-js .shell8aa12-reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease;
}
html.shell8aa12-js .shell8aa12-reveal.shell8aa12-in{
  opacity:1;transform:translateY(0);
}

/* ---------- responsive ladder ---------- */
/* small phones: keep 4 columns but tighten gaps */
@media (max-width:359px){
  .shell8aa12-grid{gap:8px;}
  .shell8aa12-brand-name{font-size:15px;}
  .shell8aa12-cta{padding:0 10px;font-size:11px;}
}
/* 360-430px: breathe a little */
@media (min-width:360px){
  .shell8aa12-wrap{padding:0 16px;}
  .shell8aa12-grid{gap:12px;}
  .shell8aa12-title{font-size:26px;}
}
/* 430px and up: fifth tile column appears */
@media (min-width:430px){
  .shell8aa12-grid{grid-template-columns:repeat(5,1fr);gap:14px;}
  .shell8aa12-title{font-size:28px;}
  .shell8aa12-promo-cols{grid-template-columns:repeat(3,1fr);}
}
/* keep the canvas honest if a desktop wanders in */
@media (min-width:768px){
  .shell8aa12-wrap{max-width:560px;margin:0 auto;}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .shell8aa12-track{transition:none;}
  .shell8aa12-menu{transition:none;}
  html.shell8aa12-js .shell8aa12-reveal{transition:none;opacity:1;transform:none;}
  .shell8aa12-tile,.shell8aa12-tab-icon{transition:none;}
}

/* ---------- landscape phones ---------- */
@media (max-height:430px) and (orientation:landscape){
  .shell8aa12-menu-list li{min-height:42px;}
  .shell8aa12-menu{padding-top:calc(var(--shell8aa12-header-h) + 6px);}
}