/* ==========================================================================
   bdbajee.cyou — mobile-first visual layer
   File   : css/bdbajee-visuals-379bac.css
   Prefix : frame9baca-  (all classes and CSS variables)
   Canvas : 320-430px phones, centered app-canvas on wider screens
   Palette: #1E1E1E base / #FFB6C1 rose / #1E90FF blue / #ADD8E6 sky / #FF5722 flame
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --frame9baca-night: #1E1E1E;
  --frame9baca-deep: #141419;
  --frame9baca-panel: #26262D;
  --frame9baca-panel2: #2D2D36;
  --frame9baca-line: rgba(173, 216, 230, .16);
  --frame9baca-line2: rgba(255, 182, 193, .22);
  --frame9baca-rose: #FFB6C1;
  --frame9baca-blue: #1E90FF;
  --frame9baca-sky: #ADD8E6;
  --frame9baca-flame: #FF5722;
  --frame9baca-text: #EFEFF4;
  --frame9baca-dim: #B9C2C9;
  --frame9baca-r-s: 6px;
  --frame9baca-r-m: 12px;
  --frame9baca-r-l: 18px;
  --frame9baca-tap: 44px;
  --frame9baca-gap: 10px;
  --frame9baca-font: 'Hind Siliguri', 'Noto Sans Bengali', 'Nirmala UI', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }

body {
  background: var(--frame9baca-deep);
  background-image: radial-gradient(1200px 500px at 50% -160px, #23232c 0%, var(--frame9baca-deep) 62%);
  color: var(--frame9baca-text);
  font-family: var(--frame9baca-font);
  font-size: 15px;
  line-height: 1.65;
}

img { max-width: 100%; display: block; }

a { color: var(--frame9baca-sky); text-decoration: none; }
a:hover { color: var(--frame9baca-rose); }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  margin: 0;
  cursor: pointer;
}

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

/* the centered phone canvas */
.frame9baca-page {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--frame9baca-night);
  box-shadow: 0 0 0 1px rgba(173, 216, 230, .06), 0 0 60px rgba(0, 0, 0, .55);
}

.frame9baca-main {
  padding: 0 12px calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   Top bar — dual layer: brand row over a segmented action row
   ========================================================================== */
.frame9baca-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(180deg, #212129 0%, #1c1c23 100%);
  border-bottom: 1px solid var(--frame9baca-line);
  padding: 8px 12px calc(8px + env(safe-area-inset-top, 0px));
}

.frame9baca-brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
}

.frame9baca-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--frame9baca-tap);
  color: var(--frame9baca-text);
}

.frame9baca-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--frame9baca-line2);
  background: #0f0f13;
  object-fit: cover;
  flex: 0 0 auto;
}

.frame9baca-brandname {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .4px;
  line-height: 1.1;
  padding-bottom: 3px;
  border-bottom: 3px solid var(--frame9baca-flame);
}

.frame9baca-menubtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--frame9baca-tap);
  padding: 8px 13px;
  border: 1px solid var(--frame9baca-line);
  border-radius: var(--frame9baca-r-m);
  background: rgba(173, 216, 230, .07);
  color: var(--frame9baca-sky);
  font-weight: 600;
  font-size: 14px;
}

.frame9baca-menubtn svg { width: 20px; height: 20px; }

.frame9baca-menubtn:active { background: rgba(30, 144, 255, .22); }

/* segmented register / login pair */
.frame9baca-actionrow { margin-top: 9px; }

.frame9baca-seg {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  border: 1px solid var(--frame9baca-line2);
  border-radius: var(--frame9baca-r-m);
  overflow: hidden;
}

.frame9baca-segbtn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .3px;
  transition: filter .15s ease, transform .12s ease;
}

.frame9baca-segbtn:active { transform: scale(.975); filter: brightness(1.12); }

.frame9baca-segbtn svg { width: 18px; height: 18px; }

.frame9baca-segbtn--reg {
  background: linear-gradient(135deg, var(--frame9baca-flame) 0%, #ff7a45 100%);
  color: #fff;
}

.frame9baca-segbtn--log {
  background: rgba(30, 144, 255, .16);
  color: var(--frame9baca-sky);
  border-left: 1px solid var(--frame9baca-line2);
}

/* ==========================================================================
   Sectioned menu page (full-screen overlay)
   ========================================================================== */
.frame9baca-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(180deg, #1f1f27 0%, #17171d 100%);
  display: flex;
  flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 18px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.frame9baca-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.frame9baca-menuhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--frame9baca-tap);
}

.frame9baca-menuhead span {
  font-size: 17px;
  font-weight: 700;
  color: var(--frame9baca-rose);
}

.frame9baca-menuclose {
  width: var(--frame9baca-tap);
  height: var(--frame9baca-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--frame9baca-line);
  border-radius: 50%;
  background: rgba(173, 216, 230, .06);
}

.frame9baca-menuclose svg { width: 20px; height: 20px; }

.frame9baca-menucta {
  width: 100%;
  min-height: 48px;
  margin: 4px 0 14px;
  border: 0;
  border-radius: var(--frame9baca-r-m);
  background: linear-gradient(135deg, var(--frame9baca-flame) 0%, #ff8a50 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.frame9baca-menucta:active { filter: brightness(1.15); }

.frame9baca-msec { margin-bottom: 16px; }

.frame9baca-msectitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--frame9baca-sky);
  text-transform: uppercase;
}

.frame9baca-msectitle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--frame9baca-line);
}

.frame9baca-mlist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.frame9baca-mlink {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--frame9baca-tap);
  padding: 10px 12px;
  border: 1px solid var(--frame9baca-line);
  border-radius: var(--frame9baca-r-m);
  background: var(--frame9baca-panel);
  color: var(--frame9baca-text);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}

.frame9baca-mlink:active { border-color: var(--frame9baca-blue); }

.frame9baca-mlink--full { grid-column: 1 / -1; }

.frame9baca-mlink em {
  font-style: normal;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--frame9baca-blue);
  flex: 0 0 auto;
}

.frame9baca-mlink--hot em { background: var(--frame9baca-flame); }
.frame9baca-mlink--rose em { background: var(--frame9baca-rose); }
.frame9baca-mlink--sky em { background: var(--frame9baca-sky); }

/* ==========================================================================
   Hero carousel
   ========================================================================== */
.frame9baca-hero {
  position: relative;
  margin: 12px -12px 0;
  border-radius: 0 0 var(--frame9baca-r-l) var(--frame9baca-r-l);
  overflow: hidden;
  background: #0e0e12;
}

.frame9baca-stage {
  display: flex;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  touch-action: pan-y;
}

.frame9baca-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  border: 0;
  padding: 0;
  background: #0e0e12;
  text-align: left;
  display: block;
}

.frame9baca-slide img {
  width: 100%;
  aspect-ratio: 10 / 11;
  object-fit: cover;
}

@media (min-width:375px) {
  .frame9baca-slide img { aspect-ratio: 10 / 10; }
}

.frame9baca-slidecopy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 46px 16px 18px;
  background: linear-gradient(180deg, rgba(20, 20, 25, 0) 0%, rgba(20, 20, 25, .88) 58%, rgba(20, 20, 25, .97) 100%);
  display: block;
}

.frame9baca-slidecopy strong {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

.frame9baca-slidecopy small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--frame9baca-sky);
}

.frame9baca-slidego {
  display: inline-block;
  margin-top: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--frame9baca-flame);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.frame9baca-dots {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.frame9baca-dot {
  width: 22px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(237, 237, 242, .34);
  transition: background .2s ease, width .2s ease;
}

.frame9baca-dot--on {
  background: var(--frame9baca-flame);
  width: 30px;
}

/* ==========================================================================
   H1 intro block + fact strip
   ========================================================================== */
.frame9baca-intro { padding: 18px 2px 4px; }

.frame9baca-intro h1 {
  margin: 0 0 8px;
  font-size: 23px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
}

.frame9baca-intro h1 b {
  color: var(--frame9baca-rose);
  font-weight: 700;
}

.frame9baca-intro p {
  margin: 0 0 8px;
  color: var(--frame9baca-dim);
  font-size: 14.5px;
}

.frame9baca-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 4px;
}

.frame9baca-stat {
  border: 1px solid var(--frame9baca-line);
  border-left: 4px solid var(--frame9baca-blue);
  border-radius: var(--frame9baca-r-m);
  background: var(--frame9baca-panel);
  padding: 9px 11px;
}

.frame9baca-stat--rose { border-left-color: var(--frame9baca-rose); }
.frame9baca-stat--flame { border-left-color: var(--frame9baca-flame); }
.frame9baca-stat--sky { border-left-color: var(--frame9baca-sky); }

.frame9baca-stat b {
  display: block;
  font-size: 17px;
  color: #fff;
  line-height: 1.3;
}

.frame9baca-stat span { font-size: 12.5px; color: var(--frame9baca-dim); }

/* category quick chips */
.frame9baca-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 2px 4px;
  scrollbar-width: none;
}

.frame9baca-chips::-webkit-scrollbar { display: none; }

.frame9baca-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid var(--frame9baca-line);
  border-radius: 999px;
  background: var(--frame9baca-panel);
  color: var(--frame9baca-text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.frame9baca-chip em {
  font-style: normal;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--frame9baca-rose);
}

.frame9baca-chip--blue em { background: var(--frame9baca-blue); }
.frame9baca-chip--sky em { background: var(--frame9baca-sky); }
.frame9baca-chip--flame em { background: var(--frame9baca-flame); }
.frame9baca-chip--white em { background: #fff; }

.frame9baca-chip:active { border-color: var(--frame9baca-flame); }

/* ==========================================================================
   Game sections — heading with color tab, count pill, related links
   ========================================================================== */
.frame9baca-sec { margin-top: 22px; }

.frame9baca-sechead {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.frame9baca-sectab {
  flex: 0 0 5px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--frame9baca-rose);
}

.frame9baca-sectab--blue { background: var(--frame9baca-blue); }
.frame9baca-sectab--flame { background: var(--frame9baca-flame); }
.frame9baca-sectab--sky { background: var(--frame9baca-sky); }
.frame9baca-sectab--white { background: #f4f4f8; }

.frame9baca-secheadtxt { flex: 1; min-width: 0; }

.frame9baca-secheadtxt h2 {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.45;
  font-weight: 700;
  color: #fff;
}

.frame9baca-seccount {
  flex: 0 0 auto;
  margin-top: 3px;
  padding: 3px 9px;
  border: 1px solid var(--frame9baca-line2);
  border-radius: 999px;
  color: var(--frame9baca-rose);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.frame9baca-secintro {
  margin: 7px 0 0;
  color: var(--frame9baca-dim);
  font-size: 13.8px;
}

.frame9baca-related {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 9px;
  font-size: 13px;
}

.frame9baca-related span { color: var(--frame9baca-dim); }

.frame9baca-related a {
  color: var(--frame9baca-sky);
  font-weight: 600;
  border-bottom: 1px dashed rgba(173, 216, 230, .5);
  padding-bottom: 1px;
}

/* ==========================================================================
   Game grid + cards (small square cards, mixed with wide feature card)
   ========================================================================== */
.frame9baca-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 8px;
  margin-top: 12px;
}

.frame9baca-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 0;
  border: 1px solid var(--frame9baca-line);
  border-radius: var(--frame9baca-r-m);
  background: var(--frame9baca-panel);
  overflow: hidden;
  text-align: center;
  transition: border-color .15s ease, transform .12s ease;
}

.frame9baca-card:active {
  border-color: var(--frame9baca-flame);
  transform: translateY(1px);
}

.frame9baca-cardimgw {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #191920;
  overflow: hidden;
}

.frame9baca-cardimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame9baca-cardname {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
  padding: 0 5px 6px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--frame9baca-text);
}

/* wide feature card — horizontal layout, spans the whole row */
.frame9baca-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--frame9baca-r-l);
  border-color: var(--frame9baca-line2);
  background: linear-gradient(120deg, #2a2a33 0%, #24242c 60%, #262630 100%);
  text-align: left;
}

.frame9baca-card--wide .frame9baca-cardimgw {
  width: 96px;
  aspect-ratio: 1 / 1;
  border-radius: var(--frame9baca-r-m);
  flex: 0 0 auto;
  border: 1px solid var(--frame9baca-line);
}

.frame9baca-card--wide .frame9baca-cardname {
  min-height: 0;
  padding: 0;
  font-size: 16px;
  color: #fff;
}

.frame9baca-cardmeta {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--frame9baca-sky);
  font-weight: 500;
}

.frame9baca-cardgo {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--frame9baca-flame);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================================
   Content modules (steps, rtp, faq, use cases, site intro)
   ========================================================================== */
.frame9baca-panel {
  margin-top: 24px;
  border: 1px solid var(--frame9baca-line);
  border-radius: var(--frame9baca-r-l);
  background: var(--frame9baca-panel);
  padding: 16px 14px 14px;
}

.frame9baca-panel > h2 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  color: #fff;
}

.frame9baca-panel > h2::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--frame9baca-flame);
  transform: rotate(45deg);
}

.frame9baca-lead {
  margin: 0 0 12px;
  color: var(--frame9baca-dim);
  font-size: 14px;
}

.frame9baca-prose p {
  margin: 0 0 10px;
  color: var(--frame9baca-dim);
  font-size: 14px;
}

.frame9baca-prose p:last-child { margin-bottom: 0; }
.frame9baca-prose--spaced { margin-top: 12px; }

.frame9baca-prose strong { color: #fff; font-weight: 600; }

.frame9baca-prose a {
  color: var(--frame9baca-sky);
  font-weight: 600;
  border-bottom: 1px dashed rgba(173, 216, 230, .5);
}

/* steps */
.frame9baca-steps { margin: 4px 0 0; padding: 0; list-style: none; }

.frame9baca-step {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--frame9baca-line);
}

.frame9baca-step:last-child { border-bottom: 0; }

.frame9baca-stepnum {
  flex: 0 0 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(30, 144, 255, .18);
  border: 1px solid rgba(30, 144, 255, .45);
  color: var(--frame9baca-sky);
  font-weight: 700;
  font-size: 14px;
}

.frame9baca-stepbody { flex: 1; min-width: 0; }

.frame9baca-stepbody b {
  display: block;
  color: #fff;
  font-size: 15px;
  margin-bottom: 2px;
}

.frame9baca-stepbody p {
  margin: 0;
  color: var(--frame9baca-dim);
  font-size: 13.5px;
}

/* rtp cards */
.frame9baca-rtgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 4px;
}

.frame9baca-rtcard {
  border: 1px solid var(--frame9baca-line);
  border-radius: var(--frame9baca-r-m);
  background: var(--frame9baca-panel2);
  padding: 11px 12px;
}

.frame9baca-rtcard b {
  display: block;
  color: var(--frame9baca-rose);
  font-size: 14.5px;
  margin-bottom: 3px;
}

.frame9baca-rtcard p {
  margin: 0;
  color: var(--frame9baca-dim);
  font-size: 13.5px;
}

/* faq */
.frame9baca-faqitem {
  border: 1px solid var(--frame9baca-line);
  border-radius: var(--frame9baca-r-m);
  background: var(--frame9baca-panel2);
  margin-bottom: 8px;
  overflow: hidden;
}

.frame9baca-faqitem:last-child { margin-bottom: 0; }

.frame9baca-faqitem summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 11px 13px;
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
}

.frame9baca-faqitem summary::-webkit-details-marker { display: none; }

.frame9baca-faqitem summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--frame9baca-line2);
  color: var(--frame9baca-rose);
  font-weight: 700;
  line-height: 1;
}

.frame9baca-faqitem[open] summary::after { content: "−"; }

.frame9baca-faqbody {
  padding: 0 13px 12px;
  color: var(--frame9baca-dim);
  font-size: 13.5px;
}

.frame9baca-faqbody p { margin: 0 0 6px; }
.frame9baca-faqbody p:last-child { margin-bottom: 0; }

/* use-case cards */
.frame9baca-ucgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.frame9baca-ucard {
  border: 1px solid var(--frame9baca-line);
  border-left: 4px solid var(--frame9baca-blue);
  border-radius: var(--frame9baca-r-m);
  background: var(--frame9baca-panel2);
  padding: 11px 12px;
}

.frame9baca-ucard--rose { border-left-color: var(--frame9baca-rose); }
.frame9baca-ucard--flame { border-left-color: var(--frame9baca-flame); }
.frame9baca-ucard--sky { border-left-color: var(--frame9baca-sky); }

.frame9baca-uctag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 182, 193, .14);
  color: var(--frame9baca-rose);
  font-size: 11.5px;
  font-weight: 700;
}

.frame9baca-ucard p {
  margin: 0;
  color: var(--frame9baca-dim);
  font-size: 13.5px;
}

.frame9baca-ucard p a {
  color: var(--frame9baca-sky);
  font-weight: 600;
  border-bottom: 1px dashed rgba(173, 216, 230, .5);
}

/* ==========================================================================
   Extended footer — sectioned list: brand > directory > promos > disclaimer
   ========================================================================== */
.frame9baca-xfoot {
  margin: 26px -12px 0;
  border-top: 1px solid var(--frame9baca-line);
  background: #1b1b21;
  padding: 18px 14px 6px;
}

.frame9baca-xfsec { margin-bottom: 18px; }

.frame9baca-xftitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--frame9baca-sky);
}

.frame9baca-xftitle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--frame9baca-line);
}

.frame9baca-xfbrand p {
  margin: 0 0 8px;
  color: var(--frame9baca-dim);
  font-size: 13.5px;
}

.frame9baca-dirlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.frame9baca-dirlist a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 34px;
  padding: 6px 2px;
  border-bottom: 1px dashed var(--frame9baca-line);
  color: var(--frame9baca-text);
  font-size: 13.5px;
  font-weight: 600;
}

.frame9baca-dirlist a::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--frame9baca-blue);
  transform: rotate(45deg);
  position: relative;
  top: -1px;
}

.frame9baca-dirlist a i {
  font-style: normal;
  font-weight: 400;
  color: var(--frame9baca-dim);
  font-size: 12.5px;
}

.frame9baca-promolist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.frame9baca-promoitem {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 11px;
  border: 1px solid var(--frame9baca-line2);
  border-radius: var(--frame9baca-r-m);
  background: linear-gradient(120deg, rgba(255, 87, 34, .16) 0%, rgba(30, 144, 255, .10) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

.frame9baca-promoitem svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--frame9baca-flame);
}

.frame9baca-promoitem:active { filter: brightness(1.25); }

.frame9baca-promoitem--full { grid-column: 1 / -1; }

.frame9baca-xfnote {
  border: 1px dashed rgba(255, 182, 193, .35);
  border-radius: var(--frame9baca-r-m);
  background: rgba(255, 182, 193, .06);
  padding: 11px 12px;
  color: var(--frame9baca-dim);
  font-size: 12.5px;
  line-height: 1.6;
}

.frame9baca-xfnote b { color: var(--frame9baca-rose); }

/* copyright strip */
.frame9baca-foot {
  margin: 4px -12px 0;
  border-top: 1px solid var(--frame9baca-line);
  padding: 14px 16px 6px;
  text-align: center;
  color: #8e979e;
  font-size: 12.5px;
}

/* ==========================================================================
   Mobile bottom nav — brand accent band with sliding underline indicator
   ========================================================================== */
.frame9baca-bnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  max-width: 480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: linear-gradient(180deg, #23232b 0%, #191920 100%);
  border-top: 2px solid var(--frame9baca-flame);
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
}

.frame9baca-bnav-ind {
  position: absolute;
  top: -2px;
  left: 0;
  height: 3px;
  width: 0;
  border-radius: 0 0 4px 4px;
  background: var(--frame9baca-rose);
  transition: left .25s cubic-bezier(.22, .61, .36, 1), width .25s cubic-bezier(.22, .61, .36, 1);
}

.frame9baca-bnav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--frame9baca-dim);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.frame9baca-bnav-item svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.frame9baca-bnav-item:active { color: var(--frame9baca-sky); }

.frame9baca-bnav-item--on { color: var(--frame9baca-flame); }

.frame9baca-bnav-item--on svg {
  fill: currentColor;
  stroke: var(--frame9baca-night);
  stroke-width: 1.1;
}

/* ==========================================================================
   Breakpoint ladder
   ========================================================================== */

/* comfortable phones */
@media (min-width:375px) {
  .frame9baca-main { padding-left: 14px; padding-right: 14px; }
  .frame9baca-helpmast, .frame9baca-bonushero { margin-left: -14px; margin-right: -14px; padding-left: 18px; padding-right: 18px; }
  .frame9baca-checkgrid { gap: 10px; }
  .frame9baca-helpsection { padding-left: 16px; padding-right: 16px; }
  .frame9baca-hero { margin-left: -14px; margin-right: -14px; }
  .frame9baca-xfoot { margin-left: -14px; margin-right: -14px; }
  .frame9baca-foot { margin-left: -14px; margin-right: -14px; }
  .frame9baca-intro h1 { font-size: 25px; }
  .frame9baca-grid { gap: 12px 10px; }
  .frame9baca-cardname { font-size: 12.5px; }
}

/* large phones — game grid widens to 5 columns (literal 430 breakpoint) */
@media (min-width:430px) {
  .frame9baca-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .frame9baca-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .frame9baca-dirlist { grid-template-columns: 1fr 1fr; }
  .frame9baca-mlist { grid-template-columns: 1fr 1fr 1fr; }
  .frame9baca-intro h1 { font-size: 26px; }
  .frame9baca-card--wide .frame9baca-cardimgw { width: 108px; }
}

/* tablets and up — keep the centered phone canvas, breathe a little */
@media (min-width:768px) {
  body { font-size: 15.5px; }
  .frame9baca-page { border-radius: 0; }
  .frame9baca-hero { border-radius: 0 0 var(--frame9baca-r-l) var(--frame9baca-r-l); }
}

/* ---------- help pages: distinct editorial layouts ---------- */
.frame9baca-helpmast, .frame9baca-bonushero {
  margin: 12px -12px 0;
  padding: 24px 16px 20px;
  background: linear-gradient(145deg, #302530 0%, #1f202a 68%);
  border-bottom: 1px solid var(--frame9baca-line2);
}
.frame9baca-helpmast--rose { border-top: 4px solid var(--frame9baca-rose); }
.frame9baca-bonushero { border-top: 4px solid var(--frame9baca-flame); background: linear-gradient(145deg, #34271f 0%, #20212a 68%); }
.frame9baca-helpmast h1, .frame9baca-bonushero h1 { margin: 4px 0 9px; color: #fff; font-size: 25px; line-height: 1.3; }
.frame9baca-helpmast p, .frame9baca-bonushero p { margin: 0; color: var(--frame9baca-dim); font-size: 14.5px; }
.frame9baca-kicker, .frame9baca-bonusstamp { color: var(--frame9baca-sky) !important; font-size: 12px !important; font-weight: 700; letter-spacing: .4px; }
.frame9baca-bonusstamp { color: var(--frame9baca-rose) !important; }
.frame9baca-helpactions { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; margin-top: 16px; }
.frame9baca-helpaction, .frame9baca-helpcta button, .frame9baca-usecaseband button {
  min-height: 46px; border: 1px solid var(--frame9baca-line2); border-radius: var(--frame9baca-r-m); background: rgba(173,216,230,.1); color: #fff; padding: 9px 12px; font-weight: 700;
}
.frame9baca-helpaction--hot, .frame9baca-helpcta button { background: var(--frame9baca-flame); border-color: transparent; }
.frame9baca-helpaction--wide { width: 100%; margin-top: 14px; background: var(--frame9baca-blue); border-color: transparent; }
.frame9baca-route, .frame9baca-bonusrail { margin-top: 14px; padding: 12px; border-left: 4px solid var(--frame9baca-blue); background: var(--frame9baca-panel); border-radius: var(--frame9baca-r-m); }
.frame9baca-routehead { display:flex; justify-content:space-between; color: var(--frame9baca-sky); font-size: 13px; }
.frame9baca-routegrid, .frame9baca-bonusrail { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; list-style:none; margin: 10px 0 0; padding:0; }
.frame9baca-routegrid li, .frame9baca-bonusrail div { min-width:0; padding: 8px 5px; border-top: 1px solid var(--frame9baca-line); }
.frame9baca-routegrid i { display:block; color:var(--frame9baca-flame); font-style:normal; font-weight:700; }
.frame9baca-routegrid b, .frame9baca-routegrid span { display:block; font-size:11.5px; line-height:1.35; }
.frame9baca-routegrid span { color:var(--frame9baca-dim); margin-top:3px; }
.frame9baca-bonusrail { border-left-color: var(--frame9baca-flame); }
.frame9baca-bonusrail div { text-align:center; border-top:0; }
.frame9baca-bonusrail b { display:block; color:var(--frame9baca-flame); font-size:18px; }
.frame9baca-bonusrail span { display:block; font-size:11px; color:var(--frame9baca-dim); }
.frame9baca-helpsection { margin-top: 16px; padding: 16px 14px; border: 1px solid var(--frame9baca-line); border-radius: var(--frame9baca-r-l); background: var(--frame9baca-panel); }
.frame9baca-helpsection h2 { margin:0 0 7px; color:#fff; font-size:18px; line-height:1.45; }
.frame9baca-helpsection h2::before { content:""; display:inline-block; width:8px; height:8px; margin:0 8px 2px 0; border-radius:2px; background:var(--frame9baca-rose); transform:rotate(45deg); }
.frame9baca-helpsection p { color:var(--frame9baca-dim); font-size:14px; }
.frame9baca-helpsection > p { margin:0 0 11px; }
.frame9baca-answer { color: #fff !important; font-size:14.2px !important; }
.frame9baca-termgrid, .frame9baca-nextgrid, .frame9baca-checkgrid { display:grid; grid-template-columns:1fr; gap:8px; }
.frame9baca-termgrid article, .frame9baca-nextgrid article { padding:11px; background:var(--frame9baca-panel2); border:1px solid var(--frame9baca-line); border-radius:var(--frame9baca-r-m); }
.frame9baca-termgrid h3, .frame9baca-nextgrid h3 { margin:0 0 3px; color:var(--frame9baca-rose); font-size:15px; }
.frame9baca-termgrid p, .frame9baca-nextgrid p { margin:0 0 7px; font-size:13.5px; }
.frame9baca-nextgrid article > span { color:var(--frame9baca-flame); font-size:11px; font-weight:700; }
.frame9baca-nextgrid a { color:var(--frame9baca-sky); font-size:13px; font-weight:700; }
.frame9baca-inlinepromo { min-height:44px; margin-top:12px; padding:8px 13px; border:1px solid var(--frame9baca-line2); border-radius:999px; background:rgba(255,87,34,.14); color:#fff; font-weight:700; }
.frame9baca-inlinepromo--blue { background:rgba(30,144,255,.18); }
.frame9baca-comparetable { overflow:hidden; border:1px solid var(--frame9baca-line); border-radius:var(--frame9baca-r-m); margin:10px 0 12px; font-size:12px; }
.frame9baca-comparebar, .frame9baca-comparerow { display:grid; grid-template-columns:.8fr 1.35fr 1.15fr; gap:6px; padding:9px 8px; }
.frame9baca-comparebar { color:var(--frame9baca-rose); background:rgba(255,182,193,.08); font-weight:700; }
.frame9baca-comparerow { border-top:1px solid var(--frame9baca-line); color:var(--frame9baca-dim); }
.frame9baca-comparerow strong { color:#fff; }
.frame9baca-mistakelist { display:grid; grid-template-columns:1fr; gap:8px; }
.frame9baca-mistakelist > div { display:grid; grid-template-columns:30px 1fr; gap:9px; align-items:start; padding:10px; border-left:3px solid var(--frame9baca-flame); background:var(--frame9baca-panel2); border-radius:0 var(--frame9baca-r-m) var(--frame9baca-r-m) 0; }
.frame9baca-mistakelist > div:nth-child(even) { border-left-color:var(--frame9baca-blue); }
.frame9baca-mistakelist span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(255,87,34,.18); color:var(--frame9baca-flame); font-weight:700; }
.frame9baca-mistakelist p { margin:0; font-size:13.5px; }
.frame9baca-mistakelist b { color:#fff; }
.frame9baca-safetylist { margin:0; padding-left:19px; color:var(--frame9baca-dim); font-size:13.7px; }
.frame9baca-safetylist li { margin:7px 0; }
.frame9baca-safetylist b { color:var(--frame9baca-rose); }
.frame9baca-alert { display:flex; gap:9px; align-items:flex-start; margin-top:12px; padding:10px; border:1px dashed rgba(255,182,193,.4); border-radius:var(--frame9baca-r-m); color:var(--frame9baca-dim); font-size:13px; }
.frame9baca-alert b { color:var(--frame9baca-flame); white-space:nowrap; }
.frame9baca-takeaways ol { margin:0; padding-left:22px; color:var(--frame9baca-dim); font-size:13.7px; }
.frame9baca-takeaways li { padding:6px 0; border-bottom:1px dashed var(--frame9baca-line); }
.frame9baca-takeaways li:last-child { border-bottom:0; }
.frame9baca-takeaways b { color:#fff; }
.frame9baca-takeaways a, .frame9baca-finalnote a { color:var(--frame9baca-sky); font-weight:700; border-bottom:1px dashed rgba(173,216,230,.5); }
.frame9baca-helpcta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 0 0; padding:12px; border:1px solid var(--frame9baca-line2); border-radius:var(--frame9baca-r-m); color:var(--frame9baca-sky); font-weight:700; }
.frame9baca-bonushero + .frame9baca-bonusrail { margin-top:14px; }
.frame9baca-timeline { list-style:none; padding:0; margin:0; }
.frame9baca-timeline li { display:grid; grid-template-columns:34px 1fr; gap:10px; padding:11px 0; border-bottom:1px solid var(--frame9baca-line); }
.frame9baca-timeline li:last-child { border-bottom:0; }
.frame9baca-timeline i { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:rgba(255,87,34,.17); color:var(--frame9baca-flame); font-style:normal; font-weight:700; }
.frame9baca-timeline h3 { margin:0 0 2px; font-size:15px; color:#fff; }
.frame9baca-timeline p { margin:0; font-size:13.5px; }
.frame9baca-checkgrid { grid-template-columns:1fr 1fr; }
.frame9baca-checkgrid div { padding:10px; border:1px solid var(--frame9baca-line); border-radius:var(--frame9baca-r-m); background:var(--frame9baca-panel2); }
.frame9baca-checkgrid b, .frame9baca-checkgrid span { display:block; }
.frame9baca-checkgrid b { color:var(--frame9baca-rose); font-size:14px; }
.frame9baca-checkgrid span { color:var(--frame9baca-dim); font-size:12.5px; line-height:1.4; margin-top:3px; }
.frame9baca-usecaseband { display:grid; grid-template-columns:1fr; gap:9px; }
.frame9baca-usecaseband article { padding:12px; border-radius:var(--frame9baca-r-m); background:var(--frame9baca-panel2); border-top:3px solid var(--frame9baca-blue); }
.frame9baca-usecaseband article:nth-child(even) { border-top-color:var(--frame9baca-flame); }
.frame9baca-usecaseband b { color:#fff; }
.frame9baca-usecaseband p { margin:4px 0 9px; font-size:13.5px; }
.frame9baca-usecaseband button { min-height:40px; padding:6px 11px; background:rgba(30,144,255,.2); font-size:13px; }
.frame9baca-finalnote { border-color:var(--frame9baca-line2); }
.frame9baca-finalnote p { margin:0; }

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .frame9baca-stage { transition: none; }
  .frame9baca-bnav-ind { transition: none; }
  .frame9baca-menu { transition: none; }
  * { animation: none !important; }
}