/* ============================================================================
   FRENZY96 — FINAL HOME LAYOUT SHELL  (fz-home-shell.css)   [home-shell-rebuild]
   ----------------------------------------------------------------------------
   Loaded LAST. The ONLY layout authority for the home content column.
   Every selector is prefixed with #fz-home-root so it can't touch anything
   outside the shell, and the id+id specificity beats mobile-phase1's
   id-named section paddings. No per-section patches anywhere else.
   Full-bleed lives OUTSIDE the shell (header / #apk-banner / announcement
   bar / footer-copy / body ocean) — untouched.
   ============================================================================ */

/* ── neutralise the legacy outer wrapper (conservative, per Mz) ───────────── */
.bs-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ── the ONE column ───────────────────────────────────────────────────────── */
#fz-home-root {
  display: block;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 16px;
  box-sizing: border-box;
  background: none;
}

/* Every direct child shares the column edge — kill legacy per-section width,
   margin, padding and background that main.css / mobile-phase1.css imposed.
   (id#fz-home-root + child selector out-specifies their id-named rules.) */
#fz-home-root > *,
#fz-home-root > .section,
#fz-home-root > #sec-popular-games,
#fz-home-root > #sec-promo,
#fz-home-root > #sec-dashboard,
#fz-home-root > #hot-promo-strip,
#fz-home-root > #sc-footer-banners,
#fz-home-root > #sc-footer-seo,
#fz-home-root > #sc-footer-links,
#fz-home-root > #lobby-quickplay,
#fz-home-root > #lobby-hero {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: none;
  box-sizing: border-box;
}

/* hero card fills the column edge-to-edge (its wrap had a 14px inset) */
#fz-home-root .hero-wrap { padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }

/* nested .section wrappers inside a section (e.g. grid's inner section) */
#fz-home-root .section .section,
#fz-home-root #sec-popular-games .section {
  max-width: none !important; width: auto !important;
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}

/* games grid flush with the column (do NOT touch .og-tile internals) */
#fz-home-root #sec-popular-games .games-grid {
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  width: 100% !important;
}

/* legacy static marquee + hidden trust strip that live at the top of the
   shell — keep them full-width within the column, no stray gutters */
#fz-home-root > .marquee,
#fz-home-root > #bs-trust-strip { margin-left: 0 !important; margin-right: 0 !important; }

/* footer-copy is inside the shell; it has no background so it never trips the
   >1200px-plate assertion. Centre it in the column like everything else. */
#fz-home-root > .footer-copy { max-width: none !important; width: auto !important; margin-inline: 0 !important; }

/* ── header content collapses into the same 1080 column as #fz-home-root ───
   The band (header.top-nav) keeps its full-bleed sticky background; only the
   INNER content is width-capped and centered, so logo-left == hero-left and
   avatar-right == hero-right. Header keeps NO horizontal padding (the inner
   owns the 16px gutter) to avoid a double gutter. Hooks untouched. */
@media (min-width: 980px) {
  header.top-nav { padding-left: 0 !important; padding-right: 0 !important; }
  header.top-nav .top-nav-inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: 16px;
    box-sizing: border-box;
  }
  /* legacy .brand-wrap carries margin-left:8px → logo would sit 8px right of
     the column edge; zero it so logo-left == hero-left exactly */
  header.top-nav .top-nav-inner .brand-wrap { margin-left: 0 !important; }
}
/* mobile (<980): inner is transparent to layout — header keeps its own
   behaviour, no column cap (design mobile header is edge-to-edge). */
@media (max-width: 979px) {
  header.top-nav .top-nav-inner { display: contents; }
}

/* ── header BAND + APK banner collapse to the hero-card width ──────────────
   Mz: no full-bleed black bars — header background, APK banner and hero card
   share the exact same left/right edge. The hero card sits inside the 1080
   column's 16px padding, so its usable width = 1080 - 32 = 1048; the bands
   match that: width calc(100% - 32px) capped 1048, centered. Beats
   stanley-header/topnav-3section width:100%!important by loading last + id
   specificity. Sticky preserved; hooks untouched. */
/* Design screenshot (Mz 2026-07-05): header band + APK banner are FULL-BLEED
   edge to edge; only the content inside the header caps to the column. */
@media (min-width: 980px) {
  header.top-nav,
  header.top-nav.top-nav,
  #apk-banner,
  #apk-banner.apk-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }
  /* header content back to the 1080 column */
  header.top-nav .top-nav-inner {
    max-width: 1080px !important;
    padding-inline: 16px !important;
    width: 100%;
    margin-inline: auto;
  }
}
/* <980 mobile: bands go full-width again (no column cap) */
@media (max-width: 979px) {
  header.top-nav, #apk-banner {
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    border-radius: 0 !important;
  }
}

/* ── tablet gap fix (768–979): topnav-3section reveals the desktop nav at
   >=768, but the 6 nav items + INVITE + chip + bell + balance + Deposit +
   avatar only fit from ~1080. Hide the inline nav below 980 (matches the
   header-band breakpoint) so 768–979 uses a compact hamburger header —
   right group no longer overflows. */
@media (max-width: 979px) {
  header.top-nav .top-nav-extra { display: none !important; }
  header.top-nav .hamburger,
  header.top-nav #btn-open-drawer { display: inline-flex !important; }
}

/* ── Phase 3 parity: home section titles = design Oswald 22/700/uppercase/
   0.88px/white (production was Inter 14 gold). Scoped to the shell. ─────── */
#fz-home-root .section-title span,
#fz-home-root .section-title {
  font-family: 'Oswald', 'Anton', 'Arial Narrow', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.88px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}
/* eager-load Oswald so the titles render condensed at first paint (no Inter
   flash) — a zero-size hidden probe forces the download */
#fz-home-root::after {
  content: "\00a0"; position: absolute; width: 0; height: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
  font-family: 'Oswald'; font-weight: 700;
}

/* ══ FIRST-SCREEN TEXTURE PASS (2026-07-05, design-source markup) ══════════════
   #4 Header: design is flex gap:14px with logo → nav(gap 2px) left-aligned,
   right group pushed to the far edge (not a centered nav with a big logo gap). */
@media (min-width: 980px) {
  header.top-nav .top-nav-inner {
    justify-content: flex-start !important;
    gap: 14px !important;
  }
  header.top-nav .top-nav-inner .top-nav-extra {
    margin: 0 !important;
    justify-content: flex-start !important;
    gap: 2px !important;              /* design nav item gap */
    flex: 0 0 auto !important;
  }
  /* right cluster hugs the right edge */
  header.top-nav .top-nav-inner > .flex.items-center.gap-2 {
    margin-left: auto !important;
  }
}
/* #5 hero card radius = design 16px (was 20) */
#fz-home-root #hero-carousel.hero,
#fz-home-root .hero-wrap .hero { border-radius: 16px !important; }

/* #3 LICENSED ticker: thin card inside the column (design rgba(6,20,28,.6)
   surface + hairline + r10, not an isolated black band / not a pill) */
#fz-home-root .bs-d-marquee {
  background: rgba(6, 20, 28, 0.6) !important;
  border: 1px solid rgba(96, 206, 238, 0.14) !important;
  border-radius: 10px !important;
  max-width: none !important;
  margin: 12px 0 0 !important;
  padding: 8px 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* #4b logo = design size (height 30, max-width 118, NO min-width) so nav sits
   right next to it — production inline min-width:150 was forcing the gap */
@media (min-width: 980px) {
  header.top-nav .top-nav-inner .brand-wrap { min-width: 0 !important; margin: 0 !important; gap: 0 !important; }
  header.top-nav .top-nav-inner .brand-wrap img.brand-logo {
    min-width: 0 !important;
    max-width: 118px !important;
    height: 30px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-PAGE DESIGN SKIN (2026-07-05 · Mz "整页照设计重建")
   Values copied verbatim from the design source (.dc.html home L191-407 +
   rendered STANDALONE component measurements). No invention.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marquee = design pill (L246): r999 + rgba(18,42,51,.5) + hairline +
   mono 10px/600 .12em uppercase. (Supersedes the earlier r10 card note —
   Mz's full-design pass wins.) */
#fz-home-root .bs-d-marquee {
  border-radius: 999px !important;
  background: rgba(18, 42, 51, 0.5) !important;
  border: 1px solid var(--fz-line) !important;
  padding: 7px 0 !important;
  margin: 14px 0 0 !important;
  box-shadow: none !important;
}
#fz-home-root .bs-d-marquee-item,
#fz-home-root .bs-d-marquee .marquee-text {
  font-family: var(--fz-font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--fz-text-2) !important;
}

/* ── FAQ = design cards (L367-380): surface gradient + hairline + r12 ────── */
#fz-home-root .faq-item {
  background: linear-gradient(180deg, var(--fz-surface-2), var(--fz-surface)) !important;
  border: 1px solid var(--fz-line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
  margin-top: 8px !important;
  padding: 0 !important;
}
#fz-home-root .faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px !important;
  font-size: 13px !important; font-weight: 700 !important; color: var(--fz-white) !important;
  cursor: pointer;
}
#fz-home-root .faq-q::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--fz-text-3); border-bottom: 2px solid var(--fz-text-3);
  transform: rotate(45deg); transition: transform .2s; margin-top: -4px;
}
#fz-home-root .faq-item.open .faq-q::after { transform: rotate(225deg); margin-top: 4px; }
#fz-home-root .faq-a {
  padding: 0 15px 13px !important;
  font-size: 13px !important; line-height: 1.55 !important; color: var(--fz-text-2) !important;
  border-top: 1px solid var(--fz-line-faint) !important;
  padding-top: 11px !important;
}

/* ── Footer links = design (L383-405): neutral hairline top, gold eyebrow
   10px/800 tracked, 12px text-2 links ─────────────────────────────────── */
#fz-home-root #sc-footer-links {
  border-top: 1px solid var(--fz-line) !important;
  padding-top: 22px !important;
  margin-top: 34px !important;
  gap: 16px !important;
}
#fz-home-root #sc-footer-links > div > div:first-child {
  font-size: 10px !important; font-weight: 800 !important;
  letter-spacing: var(--fz-track-eyebrow) !important;
  text-transform: uppercase; color: var(--fz-gold) !important;
  margin-bottom: 7px !important;
}
#fz-home-root #sc-footer-links a {
  font-size: 12px !important; color: var(--fz-text-2) !important;
}
#fz-home-root #sc-footer-links ul { line-height: 2.1 !important; font-size: 12px !important; }

/* ── Game tile = rendered GameTile spec: label bar with bottom scrim
   (absolute inset-x 0 bottom 0, pad 18/8/6, 11px/600), badge r4 9px/800.
   .og-tile internals: presentation only — handlers/data-* untouched. ───── */
#fz-home-root .og-tile { border-radius: 12px !important; }
/* The label strip is off since 2026-08-05: every provider card carries its own wordmark, so
   this printed the name a second time, and its scrim covered the bottom 27% of the art.
   Hidden, not removed — the node still carries the name for anything that reads text, while
   the tile's own title/aria-label (index.html, tile markup) keep it announced to screen
   readers either way. */
#fz-home-root .og-tile .og-name {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  background: none !important;
}
#fz-home-root .og-tile .og-badge,
#fz-home-root .og-tile [class*="badge"] {
  border-radius: 4px !important;
  font-size: 9px !important; font-weight: 800 !important; letter-spacing: 0.5px !important;
  padding: 2px 6px !important;
  bottom: 6px !important; left: 6px !important; top: auto !important;
  z-index: 2;
}

/* ── right group = design screenshot: no 40% chip; DEPOSIT uppercase ─────── */
@media (min-width: 980px) {
  #topnav-vip-chip { display: none !important; }   /* data/logic kept */
  #fz-topnav-deposit { text-transform: uppercase !important; letter-spacing: 0.04em; }
  /* avatar = cyan initials disc (design "SH"); svg icon hidden, initials
     injected by app bridge into data-initials */
  #topnav-avatar { position: relative; }
  #topnav-avatar svg { display: none !important; }
  #topnav-avatar::after {
    content: attr(data-initials);
    font-size: 12px; font-weight: 800; color: var(--fz-cyan);
    letter-spacing: 0.02em;
  }
}

/* ───── CLS reservation (2026-07-12): the category pill row and the mini-games
   card are JS-populated after data fetch; without reserved space they grow from
   ~0/64px to their final height and shift everything below (measured 0.078 +
   0.047 layout-shift on mobile). Heights measured per breakpoint on live
   content — min-height so richer content can still grow. ───── */
#fz-home-root #sec-popular-games .cat-row { min-height: 144px; }
#fz-home-root #fz-minigames-card { min-height: 154px; box-sizing: border-box; }
@media (min-width: 480px) {
  #fz-home-root #sec-popular-games .cat-row { min-height: 100px; }
  #fz-home-root #fz-minigames-card { min-height: 101px; }
}
@media (min-width: 768px) {
  #fz-home-root #sec-popular-games .cat-row { min-height: 79px; }
  #fz-home-root #fz-minigames-card { min-height: 72px; }
}