/* ============================================================================
   FRENZY96 — Deep-Sea Redesign · HOME  (fz-home.css)
   ----------------------------------------------------------------------------
   Phase 1 — RESKIN ONLY. Restyles the existing Home markup (hero, trust ticker,
   category filters, game tiles, footer) to the deep-sea theme. No markup or
   wiring changes; branded PNG category buttons and dynamic carousel are kept.

   Loaded last → wins by source order. !important is used ONLY to beat rules in
   lobby-redesign.css / mobile-phase1.css that are themselves !important (the
   lobby was already an all-!important layer). Each such case is one property,
   matched one-to-one, and commented — not a pile-up.
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════════
   HERO carousel — cyan hairline, softer radius, bottom scrim for legibility
   (.hero base border/background/radius are NOT !important → clean override)
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  border-radius: 20px;
  border: 1px solid var(--fz-teal-line);
  background: var(--fz-teal-2);
  box-shadow: var(--fz-shadow-md);
}
/* 72% bottom→transparent scrim so pressed-in CTA text stays readable (handoff §7.1) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 55%);
  z-index: 1;
}
/* dots → cyan active */
.hero-dots .hero-dot.active,
.hero-dots .dot.active { background: var(--fz-cyan); box-shadow: 0 0 8px var(--fz-cyan-glow); }

/* ══════════════════════════════════════════════════════════════════════════
   TRUST TICKER (.bs-d-marquee below header) — mono caps, gold separators
   ══════════════════════════════════════════════════════════════════════════ */
.bs-d-marquee {
  background: linear-gradient(180deg, var(--fz-teal) 0%, var(--fz-teal-deep) 100%);
  border-top: 1px solid var(--fz-teal-line);
  border-bottom: 1px solid var(--fz-teal-line);
}
.bs-d-marquee-item {
  font-family: var(--fz-font-mono);
  font-size: var(--fz-text-2xs);
  font-weight: var(--fz-w-semibold);
  letter-spacing: var(--fz-track-eyebrow);
  text-transform: uppercase;
  color: var(--fz-text);
}
.bs-d-marquee-item .ico { color: var(--fz-cyan); }
.bs-d-marquee-item .pill {
  background: var(--fz-gold-soft);
  color: var(--fz-gold);
  border-radius: var(--fz-r-full);
}
.bs-d-marquee-sep { color: var(--fz-gold); }

/* Legacy static marquee (desktop only; hidden on mobile) — align if it shows */
.marquee-text {
  color: var(--fz-text);
  font-family: var(--fz-font-mono);
  letter-spacing: var(--fz-track-eyebrow);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   GAMES LOBBY — category filters + tiles
   The lobby-redesign.css layer set active = brand GREEN with !important.
   Handoff §7.2 makes the primary accent CYAN (solid, high-contrast — never a
   washed-out translucent blue). Shift active + hover accents green→cyan.
   These override !important rules of equal specificity, so they must be
   !important too — surgical, matched, and only on the accent colour props.
   ══════════════════════════════════════════════════════════════════════════ */
#sec-popular-games .cat-btn.stanley-game-btn.active,
#sec-popular-games .cat-btn.stanley-game-btn.active.active {
  background: linear-gradient(160deg, var(--fz-cyan-soft) 0%, rgba(7, 8, 13, 0.92) 100%) !important;
  border-color: var(--fz-cyan) !important;
  box-shadow: 0 4px 14px var(--fz-cyan-glow), inset 0 0 0 1px var(--fz-cyan-soft) !important;
}
#sec-popular-games .cat-btn.stanley-game-btn {
  border-color: var(--fz-teal-line) !important;
}

/* Real game tiles (.og-tile) — cyan hairline + hover glow (base is !important) */
.og-tile.og-tile { border-color: var(--fz-teal-line) !important; }
.og-tile.og-tile:hover {
  border-color: var(--fz-cyan) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--fz-cyan-glow) !important;
}

/* Section-title accent bar → cyan (overrides the green ::before) */
#sec-popular-games .section-title::before {
  background: linear-gradient(180deg, var(--fz-cyan-bright), var(--fz-cyan-deep)) !important;
}

/* Legacy .game-tile (non-og) — deep surface + cyan hover (not !important) */
.game-tile {
  border-radius: var(--fz-r-md);
  border: 1px solid var(--fz-line);
  background: var(--fz-grad-surface);
}
.game-tile:hover {
  border-color: var(--fz-cyan);
  box-shadow: var(--fz-glow-cyan);
}
/* Badges — HOT=red, NEW=cyan, LIVE=green */
.game-badge.hot,  .badge-hot  { background: var(--fz-red);   color: var(--fz-white); }
.game-badge.new,  .badge-new  { background: var(--fz-cyan);  color: var(--fz-on-cyan); }
.game-badge.live, .badge-live { background: var(--fz-green); color: var(--fz-on-green); }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER — teal hairlines, gold headings, muted copy
   (footer borders hard-code amber gold rgba → recolor to teal-line)
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   HOME TRANSPLANT additions (design prototype L180-394 + ambient L70-111)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Category tabs → design text chips (replaces stanley PNGs; approved ②).
   lobby-redesign.css locks these with !important → matched surgically. ────── */
#sec-popular-games .cat-btn.stanley-game-btn {
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  background: rgba(18, 42, 51, 0.6) !important;
  border: 1px solid var(--fz-line) !important;
  color: var(--fz-text-2) !important;          /* stanley: color transparent !important */
  font-family: var(--fz-font-body) !important;
  font-size: 13px !important;                  /* stanley: font-size 0 !important */
  font-weight: 800;
  cursor: pointer; white-space: nowrap;
  box-shadow: none !important;
  width: auto !important;                      /* stanley: width 100% !important */
  aspect-ratio: auto !important;               /* stanley: 1/1 !important → 1200px circle */
  height: auto !important; min-height: 38px;
  flex: 0 0 auto !important;
  overflow: visible !important;
}
/* Chip label from aria-label — works for BOTH the static markup and the CMS
   tab-rebuilder output (whose buttons carry only an <img> + aria-label). */
/* stanley-header kills ::after with content:none !important → matched override */
#sec-popular-games .cat-btn.stanley-game-btn::after {
  content: attr(aria-label) !important;
  display: inline !important;
  color: inherit; font: inherit;
}
#sec-popular-games .cat-btn.stanley-game-btn .cat-btn-txt { display: none; } /* avoid double label */
#sec-popular-games .cat-btn.stanley-game-btn img { display: none !important; } /* PNGs retired */
#sec-popular-games .cat-btn.stanley-game-btn.active,
#sec-popular-games .cat-btn.stanley-game-btn.active.active {
  background: linear-gradient(180deg, var(--fz-cyan-bright), var(--fz-cyan-deep)) !important;
  border-color: var(--fz-cyan) !important;
  color: var(--fz-on-cyan) !important;
  box-shadow: 0 0 14px rgba(41, 182, 232, 0.4) !important;
  /* stanley also sizes the .active variant (width 100% + aspect 1/1 at higher
     specificity) → giant 1200px circle. Neutralise at the same level. */
  width: auto !important;
  aspect-ratio: auto !important;
  height: auto !important;
  font-size: 13px !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  flex: 0 0 auto !important;
}
#sec-popular-games .cat-row.stanley-game-type-row {
  display: flex !important; gap: 8px !important; overflow-x: auto; padding-bottom: 2px;
  grid-template-columns: none !important;
}

/* ── Games grid → design auto-fill minmax(124px,1fr) (prototype L344).
   Locked by BOTH mobile-phase1 (!important cols) AND the inline CWV block
   (index.html L799: #sec-popular-games .games-grid[data-og] !important, and
   L828 CLS min-height reserved for the OLD 4-col layout → with more columns
   the reserved 920px turns into a giant empty block). Matched at the same
   specificity, later source. Phones keep production 3-col. ───────────────── */
@media (min-width: 700px) {
  .games-grid,
  #sec-popular-games .games-grid[data-og] {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)) !important;
    gap: 12px !important;
  }
  /* re-do the CLS reservation for the denser design grid (rows shrink) */
  #sec-popular-games .games-grid { min-height: 560px !important; }
}

/* ── FAQ accordion → design cards (keeps .faq-item/.faq-q/.faq-a + .open) ── */
.faq-item {
  background: linear-gradient(180deg, var(--fz-surface-2), var(--fz-surface));
  border: 1px solid var(--fz-line);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin-bottom: 8px;
}
.faq-q { font-family: var(--fz-font-body); font-size: 13px; font-weight: 700; color: var(--fz-white); }
.faq-q::after { color: var(--fz-text-3); }
.faq-item.open .faq-q::after { color: var(--fz-cyan); }
.faq-a { color: var(--fz-text-2); border-top: 1px solid var(--fz-line-faint); padding-top: 11px; line-height: 1.55; }

/* ── Hero design dots (bar style) ────────────────────────────────────────── */
#hero-dots { top: 14px; right: 16px; bottom: auto; left: auto; display: flex; gap: 6px; position: absolute; z-index: 3; }
#hero-dots .hero-dot {
  width: 8px; height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.25s; cursor: pointer;
}
#hero-dots .hero-dot.active { width: 18px; background: var(--fz-cyan); box-shadow: 0 0 8px var(--fz-cyan-glow); }

/* ── Ocean ambient layer (design L70-111) — decorative only, CSS animations,
   fixed behind content, pointer-events none; disabled for reduced-motion ─── */
.fz-ocean { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
@keyframes fzRays { 0%, 100% { transform: translateX(-6px) skewX(-12deg); opacity: .8; } 50% { transform: translateX(10px) skewX(-12deg); opacity: 1; } }
@keyframes fzBubble { 0% { transform: translateY(0) scale(.7); opacity: 0; } 12% { opacity: .85; } 85% { opacity: .5; } 100% { transform: translateY(-190px) translateX(10px) scale(1); opacity: 0; } }
@keyframes fzBubbleRise { 0% { transform: translateY(0) scale(.65); opacity: 0; } 6% { opacity: .55; } 50% { transform: translateY(-52vh) translateX(14px) scale(.9); } 94% { opacity: .35; } 100% { transform: translateY(-104vh) translateX(-8px) scale(1.15); opacity: 0; } }
@keyframes fzSharkCross { 0% { transform: translateX(-20vw); } 100% { transform: translateX(120vw); } }
@keyframes fzSharkBob { 0%, 100% { transform: translateY(0) rotate(.6deg); } 50% { transform: translateY(-10px) rotate(-1.2deg); } }
@keyframes fzSwim { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
@media (prefers-reduced-motion: reduce) { .fz-ocean * { animation: none !important; } }

/* ── VIP page transplant: keyframes (design L47-60) + rail + modal host ──── */
@keyframes fzCoinSpin { 0% { transform: rotateY(0deg); } 55% { transform: rotateY(360deg); } 100% { transform: rotateY(360deg); } }
@keyframes fzTwinkle { 0%, 100% { opacity: 0; transform: scale(0.35) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(25deg); } }
@keyframes fzTextShine { 0% { background-position: 250% 0; } 100% { background-position: -250% 0; } }
@keyframes fzCardSweep { 0% { transform: translateX(-160%) rotate(16deg); } 45%, 100% { transform: translateX(320%) rotate(16deg); } }
@keyframes fzBreathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }
.fz-vip-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.fz-vip-rail::-webkit-scrollbar { display: none; }
/* platfound .modal host gotcha (align-items flex-end → right-shifted content) */
#modal-vip .modal { align-items: stretch !important; }

/* ── Home VIP strip + minigames entry hover ─────────────────────────────── */
#fz-home-vip { display: none; }
#fz-minigames-card:hover { transform: translateY(-2px); border-color: var(--fz-gold) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 14px 32px rgba(0,0,0,0.5), 0 0 18px rgba(245,200,66,0.15) !important; }

#sc-footer-links { border-top: 1px solid var(--fz-teal-line); }
#sc-footer-links a { color: var(--fz-text-2); transition: color var(--fz-dur-fast) var(--fz-ease-out); }
#sc-footer-links a:hover { color: var(--fz-cyan); }
.footer-copy { color: var(--fz-text-3); border-top: 1px solid var(--fz-line-faint); }
.footer-copy p { color: var(--fz-text-3); }

/* ══════════════════════════════════════════════════════════════════════════
   PIXEL-CONVERGENCE PASS (2026-07-04) — side-by-side vs design screenshots
   ══════════════════════════════════════════════════════════════════════════ */

/* ① Page background = design shallow→deep gradient over ocean.jpg (pkg2 L67).
   Full-bleed & fixed so the side gutters show sea, not dead black. */
body {
  background:
    /* flat deep-sea wash to even out the photo's horizontal light/dark bands
       (bright open-water edges vs dark central reef) — kills the perceived
       vertical seam on wide viewports while keeping the ocean ambience.
       This lives entirely in body's fixed background: zero layout space. */
    /* Design screenshot: original design ramp over ocean.jpg (darker = the
       photo's own patches stay invisible; matches STANDALONE exactly) */
    linear-gradient(180deg, rgba(4,18,26,0.18) 0%, rgba(4,18,26,0.5) 42%,
                    rgba(3,11,17,0.78) 78%, rgba(2,8,13,0.9) 100%),
    url('../img/bg/ocean.jpg') center top / cover no-repeat fixed #041018 !important;
}
html { background: #041018 !important; } /* canvas fallback matches the deep end */

/* ⑤ Cap the hero on desktop so the VIP strip lands in the first viewport
   (slides are absolutely-positioned cover images — cropping is safe) */
@media (min-width: 980px) {
  /* stanley-header locks max-height:none !important on #hero-carousel → matched.
     Kill the aspect ratio too, else max-height shrinks the WIDTH with it —
     slides are absolutely-positioned cover images, so height-only is safe. */
  /* Mz spec: hero card = aspect 1600/600, buttons inside the art's lower
     edge, nothing may overflow the card. Wrap and card share the ratio. */
  .hero-wrap {
    aspect-ratio: 1000 / 600 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible;
  }
  #hero-carousel.hero, .hero-wrap .hero {
    aspect-ratio: 1000 / 600 !important;
    height: 100% !important;
    max-height: none !important;
    width: 100%;
  }
}

/* ④ Trust marquee → design thin pill strip (pkg2 L241-245): r999 hairline,
   translucent surface, mono 10px, gold separators. Position stays CMS-driven
   (site-content marquee.pos supports after_hero — flip in admin). */
.bs-d-marquee {
  max-width: 1104px;
  margin: 10px auto !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(18,42,51,0.5) !important;
  padding: 7px 0 !important;
  overflow: hidden;
}
.bs-d-marquee-item {
  font-size: 10px !important;
  color: var(--fz-text-2) !important;
  letter-spacing: 0.12em !important;
}
.bs-d-marquee-item .pill { background: none; padding: 0; }

/* ══ PARITY PASS #6/#7/#11 (2026-07-04) ═══════════════════════════════════
   NB: the old #3/#M1 column + header/APK breakout rules that lived here were
   removed — fz-home-shell.css is now the single layout authority (1080 column
   + 1048 header/APK band). Keeping them here only fought the shell. */
/* #6 hero dots active = design GOLD bar */
#hero-dots .hero-dot.active {
  background: var(--fz-gold) !important;
  box-shadow: 0 0 8px rgba(245, 200, 66, 0.55) !important;
}
/* #7 chips active = design Chip soft (translucent cyan + cyan text) */
#sec-popular-games .cat-btn.stanley-game-btn.active,
#sec-popular-games .cat-btn.stanley-game-btn.active.active {
  background: rgba(41, 182, 232, 0.12) !important;
  border-color: rgba(41, 182, 232, 0.45) !important;
  color: var(--fz-cyan) !important;
  box-shadow: none !important;
}
/* #11 provider name on game tiles (badge sits bottom-left; name follows) */
.og-tile { position: relative; }
.og-tile .og-name {
  position: absolute; bottom: 7px; left: 50px; right: 6px;
  font-size: 10px; font-weight: 700; color: var(--fz-text);
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left; pointer-events: none; text-transform: capitalize;
}
/* M1: hide the VIP chip on mobile (hero VIP strip covers it; design = 4 items) */
@media (max-width: 979px) { .topnav-vip-chip { display: none !important; } }

/* #5 Recently played → design Continue chips; section-title bars = design GOLD */
.section-title::before, #sec-popular-games .section-title::before {
  background: linear-gradient(180deg, #FFE082, #C08E1A) !important;
}
#lobby-quickplay .qp-head { margin: 18px 0 10px; }
#lobby-quickplay .qp-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 9px;
  background: linear-gradient(180deg, var(--fz-surface-2), var(--fz-surface));
  border: 1px solid var(--fz-line); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: pointer; flex-shrink: 0;
}
#lobby-quickplay .qp-tile:hover { border-color: var(--fz-cyan); }
#lobby-quickplay .qp-thumb {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; display: block;
  background-color: var(--fz-navy);
  background-size: 32px 32px !important; background-repeat: no-repeat; background-position: center;
}
#lobby-quickplay .qp-mid { display: flex; flex-direction: column; gap: 2px; text-align: left; }
#lobby-quickplay .qp-label { font-size: 12px; font-weight: 700; color: var(--fz-white); white-space: nowrap; text-transform: capitalize; }
#lobby-quickplay .qp-continue {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--fz-cyan); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* legacy qp CSS forces column — design chips are horizontal */
#lobby-quickplay .qp-tile { flex-direction: row !important; align-items: center !important; }
/* neutralise legacy 72px column tiles (lobby-redesign) — design chip geometry */
#lobby-quickplay .qp-tile {
  width: auto !important;
  padding: 9px 14px 9px 9px !important;
  background: linear-gradient(180deg, var(--fz-surface-2), var(--fz-surface)) !important;
  border: 1px solid var(--fz-line) !important;
  gap: 10px !important;
}
#lobby-quickplay .qp-thumb {
  width: 40px !important; height: 40px !important; border-radius: 9px !important;
  border: none !important;
  background-color: var(--fz-navy) !important;
}
#lobby-quickplay .qp-label { max-width: none !important; font-size: 12px !important; color: var(--fz-white) !important; }

/* ══ Home recheck ① (Mz): pure-image hero cards ═══════════════════════════
   When a CMS banner image is present the legacy text/deco layers must not
   stack on top, and the image must cover the card edge-to-edge (the base
   .hero-slide carries padding:20px which left a border of背景色). */
.hero-slide:has(> img.hero-bg-art) { padding: 0 !important; }
#hero-carousel .hero-slide > img.hero-bg-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* stanley locks object-position:center !important on #hero-carousel .hero-bg-art */
  object-fit: cover !important;
  object-position: center top !important; /* keep the banner headline under the 50vh crop */
}
.hero-slide:has(> img.hero-bg-art) .hero-eyebrow,
.hero-slide:has(> img.hero-bg-art) .hero-amount,
.hero-slide:has(> img.hero-bg-art) .hero-subtxt,
.hero-slide:has(> img.hero-bg-art) .hero-cta,
.hero-slide:has(> img.hero-bg-art) .hero-coin-shower { display: none !important; }


/* ══ Home fixes (Mz): column containment + legacy balance panel ═══════════ */
/* ② legacy BALANCE panel (lobby-hero.js) — design has no such block; render
   off only. Its data source & deposit/withdraw handlers stay untouched. */
#lobby-hero { display: none !important; }

/* ══ First-screen spec (Mz 2026-07-04) ════════════════════════════════════ */
/* ① header is the topmost visible element: sticky, and NOTHING may paint
   above it while scrolling (hero slides create stacking contexts via
   transform/opacity — keep header above them all) */
/* header is a BODY child now — sticky works for the whole page. The
   download banner sits above it (Mz spec) and scrolls away; the header
   then pins to the top. No body offset needed. */
header.top-nav {
  position: sticky !important;
  top: 0 !important;
  /* below every overlay: drawer-overlay=45, modal-backdrop=60, float-stack=60
     (was 400 → header painted OVER open modals). Above page content (0). */
  z-index: 40 !important;
  height: var(--fz-header-h, 64px) !important;
  min-height: 0 !important;
  align-items: center;
}
:root { --fz-header-h: 64px; }
body { padding-top: 0 !important; }
@media (max-width: 979px) { :root { --fz-header-h: 60px; } }
/* marquee sits under the hero — align it to the content column.
   MUST stay `relative`, NOT `static`: theme-d.css gives .bs-d-marquee::before/::after
   absolute top:0;bottom:0 edge-fade masks. With `static` their containing block
   escapes to .bs-container -> two 50px dark gradient bars stretch the FULL page
   height and read as a translucent plate around the whole home column (Mz 2026-07-12). */
.bs-d-marquee { position: relative !important; }

/* ① no column-level backdrop — content sits straight on the ocean (design).
   .bs-container carried a linear-gradient plate wider than the column. */
.bs-container { background: none !important; box-shadow: none !important; }
/* APK strip: one uniform full-bleed image (kill the seamed second layer) */
#apk-banner {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#apk-banner::before, #apk-banner::after { display: none !important; content: none !important; }
/* NB: the old "ONE HOME COLUMN" block (per-section 1016 max-width) that lived
   here was removed — fz-home-shell.css now owns the column via #fz-home-root
   (1080 col, 1048 content). Keeping it only duplicated/fought the shell. */

/* Download banner: cap height on wide screens (aspect 1081/130 made it grow
   to ~240px at 2000px). Fixed short strip, image fit-to-height & centered. */
/* design screenshot: banner keeps its native aspect (1081/130), full-bleed */
#apk-banner.apk-banner {
  aspect-ratio: 1081 / 130 !important;
  height: auto !important;
  min-height: 0 !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}