/* ============================================================
   kc222.click  --  chrome-responsive-5af324.css
   Mobile-first Bengali (bn-BD) game portal canvas.
   Palette: #1C2833 ink | #800080 grape | #D8BFD8 blush
   Design tone: humanist title + clear body, mixed corner radius,
   compact square game cards, question-driven rhythm,
   state-only motion, solid primary + outlined secondary CTA.
   ============================================================ */

:root{
  /* palette */
  --mobileaf324-ink:#1C2833;
  --mobileaf324-ink-deep:#10171F;
  --mobileaf324-ink-soft:#243340;
  --mobileaf324-ink-card:#2A3A48;
  --mobileaf324-ink-line:#3B4C5E;
  --mobileaf324-grape:#800080;
  --mobileaf324-grape-bright:#9A2DA0;
  --mobileaf324-grape-deep:#5C0060;
  --mobileaf324-blush:#D8BFD8;
  --mobileaf324-blush-deep:#B89DC4;
  --mobileaf324-cream:#F4ECF4;
  --mobileaf324-muted:#9FAEC0;
  --mobileaf324-faint:#6E7E90;
  --mobileaf324-gold:#D4AF5F;
  --mobileaf324-rose:#E58FAE;
  --mobileaf324-mint:#7FD1B9;

  /* typography */
  --mobileaf324-font-title:"Noto Serif Bengali","Hind Siliguri","Kalpurush",Georgia,"Times New Roman",serif;
  --mobileaf324-font-body:"Noto Sans Bengali","Hind Siliguri","Kalpurush",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* radii (mixed density) */
  --mobileaf324-radius-xl:24px;
  --mobileaf324-radius-lg:16px;
  --mobileaf324-radius-md:11px;
  --mobileaf324-radius-sm:7px;
  --mobileaf324-radius-pill:999px;

  /* layout */
  --mobileaf324-gap:12px;
  --mobileaf324-gap-sm:8px;
  --mobileaf324-gap-lg:20px;
  --mobileaf324-canvas-max:480px;
  --mobileaf324-header-h:60px;
  --mobileaf324-bottomnav-h:66px;
  --mobileaf324-safe-bottom:env(safe-area-inset-bottom,0px);
  --mobileaf324-safe-top:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;
  padding:0;
  background:var(--mobileaf324-ink-deep);
  color:var(--mobileaf324-blush);
  font-family:var(--mobileaf324-font-body);
  font-size:15px;
  line-height:1.65;
  min-height:100vh;
  display:flex;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-image:
    radial-gradient(circle at 12% -10%, rgba(128,0,128,.18), transparent 45%),
    radial-gradient(circle at 110% 8%, rgba(216,191,216,.08), transparent 40%);
}

/* phone canvas centered on widescreen */
.mobileaf324-canvas{
  position:relative;
  width:100%;
  max-width:var(--mobileaf324-canvas-max);
  min-height:100vh;
  background:var(--mobileaf324-ink);
  color:var(--mobileaf324-blush);
  padding-bottom:calc(var(--mobileaf324-bottomnav-h) + var(--mobileaf324-safe-bottom) + 22px);
  overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.55);
}
@media (min-width: 430px){
  /* 430px mobile canvas breakpoint -- switch density */
  .mobileaf324-canvas{
    border-left:1px solid var(--mobileaf324-ink-line);
    border-right:1px solid var(--mobileaf324-ink-line);
  }
}

img{max-width:100%;display:block;}
a{color:var(--mobileaf324-blush-deep);text-decoration:none;}
button{font-family:inherit;}

/* ---------- Accessibility ---------- */
.mobileaf324-skip{
  position:absolute;
  left:-999px;
  top:8px;
  background:var(--mobileaf324-grape);
  color:#fff;
  padding:8px 14px;
  border-radius:var(--mobileaf324-radius-sm);
  z-index:200;
}
.mobileaf324-skip:focus{left:8px;}

:focus-visible{
  outline:2px solid var(--mobileaf324-blush);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Header ---------- */
.mobileaf324-header{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--mobileaf324-canvas-max);
  height:calc(var(--mobileaf324-header-h) + var(--mobileaf324-safe-top));
  padding-top:var(--mobileaf324-safe-top);
  background:linear-gradient(180deg, rgba(28,40,51,.97), rgba(28,40,51,.88));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--mobileaf324-ink-line);
  z-index:90;
}
.mobileaf324-header-row{
  height:var(--mobileaf324-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
}
/* asymmetric brand block -- logo + name only */
.mobileaf324-brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.mobileaf324-brand-logo{
  width:38px;
  height:38px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--mobileaf324-grape);
  box-shadow:0 2px 10px rgba(128,0,128,.45);
  flex-shrink:0;
}
.mobileaf324-brand-name{
  font-family:var(--mobileaf324-font-title);
  font-weight:700;
  font-size:21px;
  letter-spacing:.4px;
  color:var(--mobileaf324-cream);
  line-height:1;
  white-space:nowrap;
}
.mobileaf324-brand-name b{color:var(--mobileaf324-blush-deep);}

/* action area */
.mobileaf324-actions{
  display:flex;
  align-items:center;
  gap:7px;
}
.mobileaf324-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  padding:0 14px;
  border-radius:var(--mobileaf324-radius-pill);
  font-family:var(--mobileaf324-font-body);
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
  border:1px solid transparent;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  white-space:nowrap;
}
.mobileaf324-btn:active{transform:translateY(1px);}
.mobileaf324-btn--primary{
  background:linear-gradient(135deg, var(--mobileaf324-grape), var(--mobileaf324-grape-bright));
  color:#fff;
  box-shadow:0 4px 14px rgba(128,0,128,.4);
}
.mobileaf324-btn--primary:hover{background:linear-gradient(135deg, var(--mobileaf324-grape-bright), var(--mobileaf324-grape));}
.mobileaf324-btn--ghost{
  background:transparent;
  color:var(--mobileaf324-blush);
  border-color:var(--mobileaf324-ink-line);
}
.mobileaf324-btn--ghost:hover{border-color:var(--mobileaf324-blush-deep);color:var(--mobileaf324-cream);}
.mobileaf324-btn--block{width:100%;padding:14px;font-size:15px;}
.mobileaf324-btn--lg{min-height:48px;padding:0 22px;font-size:15px;}

.mobileaf324-iconbtn{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  cursor:pointer;
  color:var(--mobileaf324-blush);
  transition:background-color .18s ease, color .18s ease;
}
.mobileaf324-iconbtn:hover{background:var(--mobileaf324-ink-soft);color:var(--mobileaf324-cream);}
.mobileaf324-iconbtn svg{width:20px;height:20px;display:block;}

/* ---------- Slide-up routing panel ---------- */
.mobileaf324-overlay{
  position:fixed;
  inset:0;
  background:rgba(8,12,18,.6);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:95;
}
.mobileaf324-overlay.is-open{opacity:1;visibility:visible;}

.mobileaf324-panel{
  position:fixed;
  left:50%;
  transform:translate(-50%, 100%);
  bottom:0;
  width:100%;
  max-width:var(--mobileaf324-canvas-max);
  background:linear-gradient(180deg, var(--mobileaf324-ink-soft), var(--mobileaf324-ink));
  border-top:1px solid var(--mobileaf324-grape);
  border-radius:var(--mobileaf324-radius-xl) var(--mobileaf324-radius-xl) 0 0;
  padding:18px 16px calc(20px + var(--mobileaf324-safe-bottom));
  z-index:96;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
  max-height:78vh;
  overflow-y:auto;
}
.mobileaf324-panel.is-open{transform:translate(-50%, 0);}
.mobileaf324-panel-grip{
  width:44px;
  height:5px;
  border-radius:var(--mobileaf324-radius-pill);
  background:var(--mobileaf324-ink-line);
  margin:0 auto 14px;
}
.mobileaf324-panel-title{
  font-family:var(--mobileaf324-font-title);
  font-size:18px;
  font-weight:700;
  color:var(--mobileaf324-cream);
  margin:0 0 12px;
}
.mobileaf324-panel-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:9px;
}
.mobileaf324-panel-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:13px 6px;
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  border-radius:var(--mobileaf324-radius-md);
  color:var(--mobileaf324-blush);
  text-align:center;
  font-size:12px;
  font-weight:500;
  min-height:78px;
  transition:background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.mobileaf324-panel-item:hover{
  background:var(--mobileaf324-ink-soft);
  border-color:var(--mobileaf324-grape);
  color:var(--mobileaf324-cream);
}
.mobileaf324-panel-item:active{transform:scale(.97);}
.mobileaf324-panel-item svg{width:22px;height:22px;color:var(--mobileaf324-blush-deep);}
.mobileaf324-panel-item span{line-height:1.25;}

/* ---------- Main ---------- */
.mobileaf324-main{
  padding-top:calc(var(--mobileaf324-header-h) + var(--mobileaf324-safe-top) + 6px);
}
.mobileaf324-section{
  padding:18px 14px 6px;
}
.mobileaf324-section--tight{padding:10px 14px;}
.mobileaf324-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--mobileaf324-blush-deep);
  margin:0 0 6px;
}
.mobileaf324-h1{
  font-family:var(--mobileaf324-font-title);
  font-size:26px;
  line-height:1.22;
  font-weight:700;
  color:var(--mobileaf324-cream);
  margin:0 0 10px;
  letter-spacing:.2px;
}
.mobileaf324-h2{
  font-family:var(--mobileaf324-font-title);
  font-size:21px;
  line-height:1.25;
  font-weight:700;
  color:var(--mobileaf324-cream);
  margin:0 0 10px;
}
.mobileaf324-h3{
  font-family:var(--mobileaf324-font-title);
  font-size:17px;
  font-weight:700;
  color:var(--mobileaf324-blush);
  margin:0 0 6px;
}
.mobileaf324-lede{
  font-size:14.5px;
  color:var(--mobileaf324-blush);
  margin:0 0 14px;
  line-height:1.7;
}
.mobileaf324-para{
  margin:0 0 12px;
  color:var(--mobileaf324-blush);
  font-size:14.5px;
  line-height:1.72;
}
.mobileaf324-para a{
  color:var(--mobileaf324-rose);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:rgba(229,143,174,.5);
}
.mobileaf324-para a:hover{color:var(--mobileaf324-cream);}
.mobileaf324-muted{color:var(--mobileaf324-muted);}
.mobileaf324-strong{color:var(--mobileaf324-cream);font-weight:600;}

/* ---------- Hero / carousel ---------- */
.mobileaf324-hero{
  margin:14px 0 4px;
  padding:0 14px;
}
.mobileaf324-carousel{
  position:relative;
  border-radius:var(--mobileaf324-radius-xl);
  overflow:hidden;
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.mobileaf324-carousel-track{
  display:flex;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.mobileaf324-slide{
  flex:0 0 100%;
  position:relative;
  display:block;
}
.mobileaf324-slide img{
  width:100%;
  height:188px;
  object-fit:cover;
}
.mobileaf324-slide-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(16,23,31,0) 35%, rgba(16,23,31,.88) 100%);
}
.mobileaf324-slide-caption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  color:var(--mobileaf324-cream);
}
.mobileaf324-slide-title{
  font-family:var(--mobileaf324-font-title);
  font-size:17px;
  font-weight:700;
  margin:0 0 3px;
  line-height:1.2;
}
.mobileaf324-slide-sub{
  font-size:12px;
  margin:0;
  color:var(--mobileaf324-blush);
}
.mobileaf324-carousel-dots{
  position:absolute;
  bottom:8px;
  right:12px;
  display:flex;
  gap:5px;
}
.mobileaf324-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(216,191,216,.45);
  border:none;
  padding:0;
  cursor:pointer;
}
.mobileaf324-dot.is-active{background:var(--mobileaf324-grape-bright);transform:scale(1.18);}

/* hero quick actions under carousel */
.mobileaf324-hero-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
}

/* ---------- Section heading bar ---------- */
.mobileaf324-section-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin:0 0 12px;
  padding-bottom:9px;
  border-bottom:1px dashed var(--mobileaf324-ink-line);
}
.mobileaf324-section-bar .mobileaf324-h2{margin:0;}
.mobileaf324-section-tag{
  font-size:11px;
  font-weight:600;
  color:var(--mobileaf324-blush-deep);
  background:rgba(128,0,128,.16);
  padding:3px 9px;
  border-radius:var(--mobileaf324-radius-pill);
  border:1px solid rgba(128,0,128,.35);
  white-space:nowrap;
}
.mobileaf324-section-more{
  font-size:12px;
  color:var(--mobileaf324-rose);
  font-weight:600;
}

/* ---------- Game grid (compact square cards) ---------- */
.mobileaf324-games{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:9px 8px;
}
@media (min-width: 390px){
  .mobileaf324-games{grid-template-columns:repeat(5, 1fr);}
}
.mobileaf324-game{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  cursor:pointer;
  background:transparent;
  border:none;
  padding:0;
  color:inherit;
  font-family:inherit;
}
.mobileaf324-game-thumb{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--mobileaf324-radius-md);
  overflow:hidden;
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  transition:border-color .18s ease, transform .14s ease, box-shadow .18s ease;
}
.mobileaf324-game:hover .mobileaf324-game-thumb{
  border-color:var(--mobileaf324-grape);
  box-shadow:0 6px 16px rgba(128,0,128,.28);
}
.mobileaf324-game:active .mobileaf324-game-thumb{transform:scale(.96);}
.mobileaf324-game-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.mobileaf324-game-badge{
  position:absolute;
  top:4px;
  left:4px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.3px;
  padding:2px 5px;
  border-radius:5px;
  background:var(--mobileaf324-grape);
  color:#fff;
}
.mobileaf324-game-badge--hot{background:linear-gradient(135deg,#B0153C,#E58FAE);}
.mobileaf324-game-badge--new{background:linear-gradient(135deg,#1F7A5F,var(--mobileaf324-mint));color:#0F2A22;}
.mobileaf324-game-name{
  margin-top:5px;
  font-size:11px;
  font-weight:500;
  line-height:1.28;
  color:var(--mobileaf324-blush);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:28px;
  padding:0 1px;
}
.mobileaf324-game:hover .mobileaf324-game-name{color:var(--mobileaf324-cream);}

/* ---------- Category strip ---------- */
.mobileaf324-catstrip{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:4px 14px 10px;
  margin:0 -14px 4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.mobileaf324-catstrip::-webkit-scrollbar{display:none;}
.mobileaf324-chip{
  flex-shrink:0;
  padding:8px 14px;
  border-radius:var(--mobileaf324-radius-pill);
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  color:var(--mobileaf324-blush);
  font-size:12.5px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.mobileaf324-chip.is-active,
.mobileaf324-chip:hover{
  background:linear-gradient(135deg, var(--mobileaf324-grape), var(--mobileaf324-grape-bright));
  color:#fff;
  border-color:transparent;
}

/* ---------- Card surfaces ---------- */
.mobileaf324-card{
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  border-radius:var(--mobileaf324-radius-lg);
  padding:16px;
}
.mobileaf324-card--accent{
  border-color:rgba(128,0,128,.5);
  background:linear-gradient(160deg, rgba(128,0,128,.16), var(--mobileaf324-ink-card) 60%);
}
.mobileaf324-card--soft{
  background:var(--mobileaf324-ink-soft);
  border-color:var(--mobileaf324-ink-line);
}

/* ---------- Module: question list ---------- */
.mobileaf324-qalist{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobileaf324-qa{
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  border-left:3px solid var(--mobileaf324-grape);
  border-radius:var(--mobileaf324-radius-md);
  padding:12px 14px;
}
.mobileaf324-qa h3{
  margin:0 0 6px;
  font-family:var(--mobileaf324-font-title);
  font-size:15px;
  color:var(--mobileaf324-cream);
}
.mobileaf324-qa p{
  margin:0;
  font-size:13.5px;
  color:var(--mobileaf324-blush);
  line-height:1.68;
}
.mobileaf324-qa a{color:var(--mobileaf324-rose);}

/* ---------- Module: feature grid ---------- */
.mobileaf324-feats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
.mobileaf324-feat{
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  border-radius:var(--mobileaf324-radius-md);
  padding:14px 12px;
  text-align:left;
}
.mobileaf324-feat-ico{
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(128,0,128,.18);
  color:var(--mobileaf324-blush-deep);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}
.mobileaf324-feat-ico svg{width:18px;height:18px;}
.mobileaf324-feat h3{
  margin:0 0 4px;
  font-family:var(--mobileaf324-font-title);
  font-size:14px;
  color:var(--mobileaf324-cream);
}
.mobileaf324-feat p{
  margin:0;
  font-size:12.5px;
  color:var(--mobileaf324-muted);
  line-height:1.55;
}

/* ---------- Module: steps ---------- */
.mobileaf324-steps{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  counter-reset:stepcount;
}
.mobileaf324-steps li{
  position:relative;
  padding:12px 14px 12px 46px;
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  border-radius:var(--mobileaf324-radius-md);
  counter-increment:stepcount;
  font-size:13.5px;
  color:var(--mobileaf324-blush);
  line-height:1.62;
}
.mobileaf324-steps li::before{
  content:counter(stepcount);
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--mobileaf324-grape), var(--mobileaf324-grape-bright));
  color:#fff;
  font-weight:700;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mobileaf324-steps li strong{color:var(--mobileaf324-cream);}

/* ---------- Module: comparison table ---------- */
.mobileaf324-compare{
  border:1px solid var(--mobileaf324-ink-line);
  border-radius:var(--mobileaf324-radius-md);
  overflow:hidden;
}
.mobileaf324-compare-row{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  align-items:center;
  gap:6px;
  padding:11px 12px;
  border-bottom:1px solid var(--mobileaf324-ink-line);
  font-size:12.5px;
}
.mobileaf324-compare-row:last-child{border-bottom:none;}
.mobileaf324-compare-row--head{
  background:var(--mobileaf324-ink-soft);
  font-weight:700;
  color:var(--mobileaf324-cream);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.mobileaf324-compare-row span:first-child{color:var(--mobileaf324-blush);font-weight:600;}
.mobileaf324-compare-row span:nth-child(2),
.mobileaf324-compare-row span:nth-child(3){color:var(--mobileaf324-muted);text-align:center;}
.mobileaf324-pip{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--mobileaf324-grape);
  margin-right:5px;
  vertical-align:middle;
}
.mobileaf324-pip--good{background:var(--mobileaf324-mint);}
.mobileaf324-pip--warn{background:var(--mobileaf324-gold);}

/* ---------- Payment method grid ---------- */
.mobileaf324-pay{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:9px;
}
.mobileaf324-pay-item{
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  border-radius:var(--mobileaf324-radius-md);
  padding:11px 8px;
  text-align:center;
}
.mobileaf324-pay-item .mobileaf324-pay-ico{
  width:32px;
  height:32px;
  margin:0 auto 6px;
  border-radius:8px;
  background:rgba(216,191,216,.12);
  color:var(--mobileaf324-blush-deep);
  display:flex;
  align-items:center;
  justify-content:center;
}
.mobileaf324-pay-item .mobileaf324-pay-ico svg{width:18px;height:18px;}
.mobileaf324-pay-item h4{
  margin:0 0 2px;
  font-size:12.5px;
  color:var(--mobileaf324-cream);
  font-weight:600;
}
.mobileaf324-pay-item p{
  margin:0;
  font-size:10.5px;
  color:var(--mobileaf324-muted);
  line-height:1.4;
}

/* ---------- CTA band ---------- */
.mobileaf324-cta{
  background:linear-gradient(135deg, rgba(128,0,128,.28), rgba(216,191,216,.08));
  border:1px solid rgba(128,0,128,.55);
  border-radius:var(--mobileaf324-radius-xl);
  padding:20px 18px;
  text-align:center;
  margin:6px 0;
}
.mobileaf324-cta h2{
  margin:0 0 6px;
  font-family:var(--mobileaf324-font-title);
  font-size:20px;
  color:var(--mobileaf324-cream);
}
.mobileaf324-cta p{
  margin:0 0 14px;
  font-size:13.5px;
  color:var(--mobileaf324-blush);
  line-height:1.62;
}
.mobileaf324-cta-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}

/* ---------- Inline game spotlight ---------- */
.mobileaf324-spot{
  display:flex;
  gap:12px;
  align-items:center;
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  border-radius:var(--mobileaf324-radius-lg);
  padding:12px;
  margin:0 0 10px;
}
.mobileaf324-spot-img{
  width:74px;
  height:74px;
  border-radius:var(--mobileaf324-radius-md);
  object-fit:cover;
  flex-shrink:0;
  border:1px solid var(--mobileaf324-ink-line);
}
.mobileaf324-spot-body{min-width:0;flex:1;}
.mobileaf324-spot-body h3{
  margin:0 0 3px;
  font-family:var(--mobileaf324-font-title);
  font-size:15px;
  color:var(--mobileaf324-cream);
}
.mobileaf324-spot-body p{
  margin:0;
  font-size:12.5px;
  color:var(--mobileaf324-muted);
  line-height:1.55;
}

/* ---------- Extended footer ---------- */
.mobileaf324-ext{
  margin-top:18px;
  padding:20px 14px 8px;
  background:linear-gradient(180deg, var(--mobileaf324-ink-soft), var(--mobileaf324-ink));
  border-top:1px solid var(--mobileaf324-ink-line);
}
.mobileaf324-ext-brand{
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin-bottom:16px;
}
.mobileaf324-ext-brand img{
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid var(--mobileaf324-grape);
}
.mobileaf324-ext-brand p{
  margin:0;
  font-size:12.5px;
  color:var(--mobileaf324-muted);
  line-height:1.6;
}
.mobileaf324-ext-h{
  font-family:var(--mobileaf324-font-title);
  font-size:13px;
  font-weight:700;
  color:var(--mobileaf324-cream);
  margin:0 0 10px;
  letter-spacing:.3px;
}
.mobileaf324-ext-promos{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  margin-bottom:18px;
}
.mobileaf324-ext-promo{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 11px;
  border-radius:var(--mobileaf324-radius-md);
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  color:var(--mobileaf324-blush);
  font-size:12px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.mobileaf324-ext-promo:hover{
  border-color:var(--mobileaf324-grape);
  color:var(--mobileaf324-cream);
}
.mobileaf324-ext-promo svg{
  width:16px;
  height:16px;
  color:var(--mobileaf324-blush-deep);
  flex-shrink:0;
}
.mobileaf324-ext-dir{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 14px;
  margin-bottom:18px;
  padding-top:6px;
  border-top:1px dashed var(--mobileaf324-ink-line);
}
.mobileaf324-ext-dir a{
  font-size:12.5px;
  color:var(--mobileaf324-blush);
  padding:5px 0;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.mobileaf324-ext-dir a::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--mobileaf324-grape-bright);
  flex-shrink:0;
}
.mobileaf324-ext-dir a:hover{color:var(--mobileaf324-cream);}
.mobileaf324-ext-disclaim{
  font-size:11.5px;
  color:var(--mobileaf324-faint);
  line-height:1.62;
  padding:12px;
  background:rgba(16,23,31,.55);
  border-radius:var(--mobileaf324-radius-md);
  border-left:3px solid var(--mobileaf324-gold);
}

/* ---------- Copyright ---------- */
.mobileaf324-copyright{
  padding:14px 14px 4px;
  text-align:center;
  font-size:11.5px;
  color:var(--mobileaf324-faint);
  line-height:1.6;
}
.mobileaf324-copyright span{display:block;margin-bottom:2px;}

/* ---------- Mobile bottom nav ---------- */
.mobileaf324-bottomnav{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  max-width:var(--mobileaf324-canvas-max);
  height:calc(var(--mobileaf324-bottomnav-h) + var(--mobileaf324-safe-bottom));
  padding-bottom:var(--mobileaf324-safe-bottom);
  background:linear-gradient(180deg, rgba(28,40,51,.96), rgba(16,23,31,.99));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--mobileaf324-ink-line);
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  align-items:center;
  z-index:88;
}
.mobileaf324-navitem{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  height:var(--mobileaf324-bottomnav-h);
  color:var(--mobileaf324-muted);
  background:transparent;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:10px;
  font-weight:600;
  padding:0 2px;
  position:relative;
  transition:color .18s ease, transform .14s ease;
}
.mobileaf324-navitem svg{
  width:22px;
  height:22px;
  color:var(--mobileaf324-blush-deep);
  transition:transform .18s ease, color .18s ease;
}
.mobileaf324-navitem span{line-height:1;}
.mobileaf324-navitem:hover{color:var(--mobileaf324-cream);}
.mobileaf324-navitem:hover svg{transform:translateY(-2px);color:var(--mobileaf324-grape-bright);}
.mobileaf324-navitem.is-active{color:var(--mobileaf324-cream);}
.mobileaf324-navitem.is-active svg{
  color:var(--mobileaf324-grape-bright);
  transform:translateY(-3px);
}
.mobileaf324-navitem.is-active::after{
  content:"";
  position:absolute;
  bottom:4px;
  width:18px;
  height:3px;
  border-radius:var(--mobileaf324-radius-pill);
  background:var(--mobileaf324-grape-bright);
}
.mobileaf324-navitem--promokind span{color:var(--mobileaf324-rose);}
.mobileaf324-navitem--promokind svg{color:var(--mobileaf324-rose);}

/* ---------- Pill / tag inline ---------- */
.mobileaf324-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:var(--mobileaf324-radius-pill);
  background:rgba(216,191,216,.12);
  color:var(--mobileaf324-blush-deep);
  font-size:11.5px;
  font-weight:600;
  border:1px solid rgba(216,191,216,.25);
}
.mobileaf324-pill--grape{
  background:rgba(128,0,128,.18);
  color:var(--mobileaf324-blush);
  border-color:rgba(128,0,128,.4);
}

/* ---------- List utilities ---------- */
.mobileaf324-list{
  margin:0 0 12px;
  padding-left:18px;
}
.mobileaf324-list li{
  margin-bottom:6px;
  font-size:13.5px;
  color:var(--mobileaf324-blush);
  line-height:1.65;
}
.mobileaf324-list a{color:var(--mobileaf324-rose);}

/* ---------- Divider ---------- */
.mobileaf324-divider{
  height:1px;
  background:var(--mobileaf324-ink-line);
  margin:16px 0;
  border:none;
}

/* ---------- Notice ---------- */
.mobileaf324-notice{
  display:flex;
  gap:10px;
  padding:12px 13px;
  background:rgba(212,175,95,.1);
  border:1px solid rgba(212,175,95,.4);
  border-left:3px solid var(--mobileaf324-gold);
  border-radius:var(--mobileaf324-radius-md);
  font-size:12.5px;
  color:var(--mobileaf324-blush);
  line-height:1.6;
  margin:0 0 14px;
}
.mobileaf324-notice svg{
  width:18px;
  height:18px;
  color:var(--mobileaf324-gold);
  flex-shrink:0;
  margin-top:1px;
}

/* ---------- Two-col inline link grid (compact horizontal) ---------- */
.mobileaf324-linkrow{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:7px;
  margin:6px 0 12px;
}
.mobileaf324-linkrow a{
  padding:9px 11px;
  background:var(--mobileaf324-ink-card);
  border:1px solid var(--mobileaf324-ink-line);
  border-radius:var(--mobileaf324-radius-md);
  font-size:12.5px;
  color:var(--mobileaf324-blush);
  display:flex;
  align-items:center;
  gap:6px;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.mobileaf324-linkrow a::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mobileaf324-grape-bright);
  flex-shrink:0;
}
.mobileaf324-linkrow a:hover{
  color:var(--mobileaf324-cream);
  border-color:var(--mobileaf324-grape);
}

/* ---------- Visually hidden helper ---------- */
.mobileaf324-vh{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
  .mobileaf324-carousel-track{transition:none !important;}
}

/* ---------- Wide-screen guard for canvas ---------- */
@media (min-width: 481px){
  body{background:var(--mobileaf324-ink-deep);}
  .mobileaf324-canvas{
    margin-top:0;
    border-radius:0;
  }
}