/* ============================================================================
   fz-polish.css — Deep-Sea UX polish pass (2026-07-12, P3 systematic refinement)
   Adds the two interaction states the deep-sea CSS was missing everywhere:
   keyboard focus rings and press feedback, plus the hover states the deposit
   quick-amounts lacked. Pure presentation — no structure/handlers/new tokens.
   Selectors below are VERIFIED against the live DOM (payment flow + home).
   Loads LAST so it wins these states without !important.
   ============================================================================ */

/* ── 1. Keyboard focus ring (a11y #9) ────────────────────────────────────────
   :focus-visible fires only for keyboard/AT navigation — mouse clicks never
   show it, so existing pointer visuals are untouched. Generic `button/a/input`
   inside the audited surfaces covers even the class-less wallet CTAs. */
:where(#fz-home-root, #modal-wallet, #modal-deposit, #modal-withdraw,
       #modal-profile, #modal-promo, #modal-vip, #modal-chat)
  :is(button, a, [role="button"], [tabindex="0"], input, select,
      .og-tile, .qp-tile):focus-visible,
.bnav-item:focus-visible,
header.top-nav :is(button, a, [role="button"]):focus-visible {
  outline: 2px solid var(--fz-cyan);
  outline-offset: 2px;
  border-radius: var(--fz-r-md, 8px);
}

/* ── 2. Press feedback (#6 / #10) ────────────────────────────────────────────
   Subtle fast scale on active, token easing. Only on verified elements that
   don't already run a hover-transform (nothing fights). */
:is(.bnav-item, .qp-tile,
    #modal-deposit.dep-v2 .dep-quick-amt) {
  transition: transform var(--fz-dur-fast) var(--fz-ease-out),
              border-color var(--fz-dur-fast) var(--fz-ease-out),
              color var(--fz-dur-fast) var(--fz-ease-out),
              background-color var(--fz-dur-fast) var(--fz-ease-out);
}
:is(.bnav-item, .qp-tile,
    #modal-deposit.dep-v2 .dep-quick-amt):active {
  transform: scale(0.96);
}
/* deposit CTA already lifts on hover — press settles it back + a hair in */
#modal-deposit.dep-v2 .dp-bo:not(.claimed):not(:disabled):active {
  transform: translateY(0) scale(0.99);
}

/* ── 3. Hover the deposit quick-amounts lacked (#6) ──────────────────────────
   Chips only had a selected (.on) state; give idle ones a hover so they read
   as clickable before selection. */
#modal-deposit.dep-v2 .dep-quick-amt:not(.on):hover {
  border-color: var(--fz-cyan);
  color: var(--fz-text);
}

/* ── 4. Respect reduced-motion (a11y) ────────────────────────────────────────
   Motion-averse users keep the focus ring + hovers but lose the scale. */
@media (prefers-reduced-motion: reduce) {
  :is(.bnav-item, .qp-tile, #modal-deposit.dep-v2 .dep-quick-amt,
      #modal-deposit.dep-v2 .dp-bo):active {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mz feedback (2026-07-15) — frenzy96_comments.docx
   ═══════════════════════════════════════════════════════════════════════════ */

/* #5/#9/#12 — remove the decorative vertical accent bars before section titles
   (POPULAR shows two: gold .section-title::before + green .qp-title::before). */
.section-title::before,
.section-title::after,
#sec-popular-games .section-title::before,
#lobby-quickplay .qp-title::before {
  display: none !important;
}

/* #8 — remove the glowing cyan pill/oval behind the active bottom-nav item.
   The active state stays legible via its cyan text/icon colour (separate rule). */
html body nav.bottom-nav .bnav-item.active:not(:nth-child(3))::before {
  display: none !important;
  content: none !important;
}

/* #17 — remove the gold accent bar before the Promotions page title. */
#modal-promo.pm-v2 .pm-head__title::before {
  display: none !important;
  content: none !important;
}

/* #18 — CLAIM NOW buttons smaller, matching the Mini-Games "Play" pill size. */
#modal-promo.pm-v2 .pm-claim {
  padding: 5px 12px !important;
  font-size: 11px !important;
}
#modal-promo.pm-v2 .pm-claim svg { width: 11px !important; height: 11px !important; }

/* #1 — nudge the logged-out Login/Register pills a little left off the edge. */
#topnav-auth-out { margin-right: 6px; }

/* #10 — OUR GAMES category chips: centre the row and give the chips equal width. */
#sec-popular-games .cat-row.stanley-game-type-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  grid-template-columns: none !important;
}
#sec-popular-games .cat-row.stanley-game-type-row .cat-btn {
  flex: 1 1 130px !important;
  max-width: 180px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* #11 — the category badge is index.html's inline `.og-tile::after` pseudo-element
   (there is no .og-badge child); fixed at the source: top:6px;left:6px, and
   .og-ratio moved to bottom-left so the two never stack. */

/* #14 — the Mini-Games back button was being stretched to 34x44 (oval) by its flex
   row; force equal width/height so border-radius:50% renders a true circle. */
#fz-mg-back {
  width: 34px !important;
  height: 34px !important;
  min-height: 0 !important;
  flex: 0 0 34px !important;
  align-self: center !important;
  border-radius: 50% !important;
}

/* #3 — mobile: the overlaid hero CTA button covers the banner artwork; hide it on
   mobile (desktop keeps it). Move the slide dots from top-right to bottom-centre so
   they no longer sit over the banner text. */
@media (max-width: 979px) {
  .hero-cta { display: none !important; }
  #hero-dots {
    top: auto !important;
    bottom: 10px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* ═══════════ Designer pass 2 (frenzy96_comments round 2, 2026-07-17) ═══════════ */

/* #6 — SectionTitle vertical accent bars removed SITE-WIDE (design final: Oswald
   caps text only). Round-1 already killed .section-title/.qp-title/.pm-head__title;
   this sweeps the stragglers: legacy main.css generic bars + legacy vip sections.
   (wallet-v2.js secTitle bar removed at source; attribute kill below covers any
   cached copy of the old JS.) */
.section-title-text::before,
h2[class*="section"]::before,
h3[class*="section"]::before,
.vip-section-title::before {
  display: none !important;
  content: none !important;
}
.section-title-text, h2[class*="section"], h3[class*="section"] { padding-left: 0 !important; }
#modal-wallet .wv span[style*="width:4px;height:18px"] { display: none !important; }

/* #10 — Mini-games entry card, phone text fit: tighter title/desc, drop the
   "6 games" counter so the copy never collides (banner-style redesign comes
   later when the designer ships art). */
@media (max-width: 639px) {
  #fz-minigames-card { padding: 12px 14px !important; gap: 10px !important; }
  #fz-minigames-card .fz-mg-title { font-size: 12px !important; line-height: 1.25 !important; }
  #fz-minigames-card .fz-mg-desc { font-size: 10px !important; line-height: 1.35 !important; }
  #fz-minigames-card .fz-mg-count { display: none !important; }
}

/* Mz 2026-07-17: remove the fixed Claim Bonus / Play Now overlay pair on PHONE —
   they cover the banner artwork copy. Desktop keeps them. (These are the static
   .hero-wrap overlay CTAs, distinct from the per-slide .hero-cta hidden above.) */
@media (max-width: 979px) {
  .hero-wrap .fz-hero-ctas { display: none !important; }
}

/* Mz 2026-07-17: hero CTA pair — equal width (group is already centred on the
   card; the width mismatch made it read off-centre). */
.hero-wrap .fz-hero-ctas button {
  min-width: 172px !important;
  padding: 0 16px !important;
}

/* Unified page BACK button (Mz 2026-07-17, 34px) — SUPERSEDED 2026-07-27 by the
   site-wide 32px spec in modal-close-unify.css. Frame/hover/hit-area rules removed
   here so the higher-specificity 34px !important no longer beats the new spec. */
/* back button + page title share one centreline, 12px apart */
#modal-wallet .wv-top { gap: 12px !important; align-items: center !important; }
#modal-promo .pm-head { gap: 12px !important; align-items: center !important; }