/* modal-close-unify.css — v2 2026-07-27 (Mz final spec)
   ONE spec for every modal close (X) and subpage back button across the deep-sea redesign.
   32×32 true circle · sea-glass gradient + blur · inline 16px SVG glyph (NO Tabler font —
   production font is a subset, glyphs go missing) · hover rotates the X 90° into a cross ·
   44px hit area via ::after inset:-6px (never by inflating the button box — that is exactly
   what deformed .pl-x/.pm-sx into ovals: global button padding + flex stretch).
   Loaded LAST so it wins; `html body` prefix + the #modal-auth double-id beat older !important
   rules (fz-auth, promotions-v2, …). Text-× glyphs remaining in markup are sized by font-size. */

html body .pl-x,
html body .pf3-close,
html body #modal-profile .pf3-back,
html body .wv-x,
html body .wv-back,
html body #dp-back,
html body #dp-sx,
html body #wd-x,
html body .pm-sx,
html body #modal-promo .pm-back,
html body #pm-back,
html body .pf3-return-row > button[data-close="modal-profile"],
html body #modal-vip [data-close="modal-vip"],
html body #modal-invite [data-close="modal-invite"],
html body .nf-back,
html body .nf-sh-x,
html body .lc-head__back,
html body .cmp-back,
html body #hs-back,
html body .hs-sh-x,
html body .mb-back,
html body #ls-close,
html body #ls-back,
html body #modal-auth#modal-auth .auth-v3 .auth-v3-close,
html body .payment-close-x,
html body #fpw-close,
html body .sw-close,
html body #modal-lucky .ld-close,
html body #modal-scratch .sc3-close,
html body #modal-egg .ge3-close,
html body #modal-checkin .ck3-close,
html body #modal-daily .dm3-close,
html body #modal-daily .dm3-back,
html body #fz-mg-back,
html body .bh-x,
html body .pi-sh-x,
html body .ba-sh-x {
  /* anti-deform guards: every axis pinned, no inherited padding, no line-box inflation */
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  /* sea-glass default */
  background: linear-gradient(180deg, rgba(14, 44, 58, .72), rgba(5, 16, 24, .85)) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(150, 225, 250, .28) !important;
  color: rgba(200, 235, 250, .85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 14px rgba(0, 0, 0, .45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 16px !important;              /* sizes any text-× glyph that remains */
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease,
              transform .18s ease !important;
}

/* glyph: inline SVG 16px */
html body .pl-x svg,
html body .pf3-close svg,
html body #modal-profile .pf3-back svg,
html body .wv-x svg,
html body .wv-back svg,
html body #dp-back svg,
html body #dp-sx svg,
html body #wd-x svg,
html body .pm-sx svg,
html body #modal-promo .pm-back svg,
html body #pm-back svg,
html body .pf3-return-row > button[data-close="modal-profile"] svg,
html body #modal-vip [data-close="modal-vip"] svg,
html body #modal-invite [data-close="modal-invite"] svg,
html body .nf-back svg,
html body .nf-sh-x svg,
html body .lc-head__back svg,
html body .cmp-back svg,
html body #hs-back svg,
html body .hs-sh-x svg,
html body .mb-back svg,
html body #ls-close svg,
html body #ls-back svg,
html body #modal-auth#modal-auth .auth-v3 .auth-v3-close svg,
html body .payment-close-x svg,
html body #fpw-close svg,
html body .sw-close svg,
html body #modal-lucky .ld-close svg,
html body #modal-scratch .sc3-close svg,
html body #modal-egg .ge3-close svg,
html body #modal-checkin .ck3-close svg,
html body #modal-daily .dm3-close svg,
html body #modal-daily .dm3-back svg,
html body #fz-mg-back svg,
html body .bh-x svg,
html body .pi-sh-x svg,
html body .ba-sh-x svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}

/* hover: cyan ring + glow, X rotates into a cross */
html body .pl-x:hover,
html body .pf3-close:hover,
html body #modal-profile .pf3-back:hover,
html body .wv-x:hover,
html body .wv-back:hover,
html body #dp-back:hover,
html body #dp-sx:hover,
html body #wd-x:hover,
html body .pm-sx:hover,
html body #modal-promo .pm-back:hover,
html body #pm-back:hover,
html body .pf3-return-row > button[data-close="modal-profile"]:hover,
html body #modal-vip [data-close="modal-vip"]:hover,
html body #modal-invite [data-close="modal-invite"]:hover,
html body .nf-back:hover,
html body .nf-sh-x:hover,
html body .lc-head__back:hover,
html body .cmp-back:hover,
html body #hs-back:hover,
html body .hs-sh-x:hover,
html body .mb-back:hover,
html body #ls-close:hover,
html body #ls-back:hover,
html body #modal-auth#modal-auth .auth-v3 .auth-v3-close:hover,
html body .payment-close-x:hover,
html body #fpw-close:hover,
html body .sw-close:hover,
html body #modal-lucky .ld-close:hover,
html body #modal-scratch .sc3-close:hover,
html body #modal-egg .ge3-close:hover,
html body #modal-checkin .ck3-close:hover,
html body #modal-daily .dm3-close:hover,
html body #modal-daily .dm3-back:hover,
html body #fz-mg-back:hover,
html body .bh-x:hover,
html body .pi-sh-x:hover,
html body .ba-sh-x:hover {
  border-color: var(--fz-cyan, #29B6E8) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 16px rgba(41, 182, 232, .45) !important;
  transform: rotate(90deg) !important;
}

/* back buttons (chevron glyph) keep their orientation — rotating a chevron is wrong */
html body #modal-profile .pf3-back:hover,
html body .wv-back:hover,
html body #dp-back:hover,
html body #modal-promo .pm-back:hover,
html body #pm-back:hover,
html body .pf3-return-row > button[data-close="modal-profile"]:hover,
html body #modal-vip [data-close="modal-vip"]:hover,
html body .nf-back:hover,
html body .lc-head__back:hover,
html body .cmp-back:hover,
html body #hs-back:hover,
html body .mb-back:hover,
html body #ls-back:hover,
html body #fz-mg-back:hover,
html body #modal-daily .dm3-back:hover {
  transform: none !important;
}

/* active: press-in */
html body .pl-x:active,
html body .pf3-close:active,
html body .wv-x:active,
html body #dp-sx:active,
html body #wd-x:active,
html body .pm-sx:active,
html body #modal-invite [data-close="modal-invite"]:active,
html body .nf-sh-x:active,
html body .hs-sh-x:active,
html body #ls-close:active,
html body #modal-auth#modal-auth .auth-v3 .auth-v3-close:active,
html body .payment-close-x:active,
html body #fpw-close:active,
html body .sw-close:active,
html body #modal-lucky .ld-close:active,
html body #modal-scratch .sc3-close:active,
html body #modal-egg .ge3-close:active,
html body #modal-checkin .ck3-close:active,
html body #modal-daily .dm3-close:active,
html body .bh-x:active,
html body .pi-sh-x:active,
html body .ba-sh-x:active {
  transform: rotate(90deg) scale(.92) !important;
}

/* keyboard reachability */
html body .pl-x:focus-visible,
html body .pf3-close:focus-visible,
html body #modal-profile .pf3-back:focus-visible,
html body .wv-x:focus-visible,
html body .wv-back:focus-visible,
html body #dp-back:focus-visible,
html body #dp-sx:focus-visible,
html body #wd-x:focus-visible,
html body .pm-sx:focus-visible,
html body #modal-promo .pm-back:focus-visible,
html body #pm-back:focus-visible,
html body .pf3-return-row > button[data-close="modal-profile"]:focus-visible,
html body #modal-vip [data-close="modal-vip"]:focus-visible,
html body #modal-invite [data-close="modal-invite"]:focus-visible,
html body .nf-back:focus-visible,
html body .nf-sh-x:focus-visible,
html body .lc-head__back:focus-visible,
html body .cmp-back:focus-visible,
html body #hs-back:focus-visible,
html body .hs-sh-x:focus-visible,
html body .mb-back:focus-visible,
html body #ls-close:focus-visible,
html body #ls-back:focus-visible,
html body #modal-auth#modal-auth .auth-v3 .auth-v3-close:focus-visible,
html body .payment-close-x:focus-visible,
html body #fpw-close:focus-visible,
html body .sw-close:focus-visible,
html body #modal-lucky .ld-close:focus-visible,
html body #modal-scratch .sc3-close:focus-visible,
html body #modal-egg .ge3-close:focus-visible,
html body #modal-checkin .ck3-close:focus-visible,
html body #modal-daily .dm3-close:focus-visible,
html body #modal-daily .dm3-back:focus-visible,
html body #fz-mg-back:focus-visible,
html body .bh-x:focus-visible,
html body .pi-sh-x:focus-visible,
html body .ba-sh-x:focus-visible {
  outline: 2px solid var(--fz-cyan, #29B6E8) !important;
  outline-offset: 2px !important;
}

/* ≥44px hit area = visual 32px + ::after inset -6px (NEVER inflate the button box).
   Static flex-row members get position:relative as the ::after context; the absolute ones
   (pf3-close / pm-sx / invite / ls-close / auth-v3-close / payment-close-x / fpw-close /
   sw-close) already have their own positioning — do NOT force relative on them. */
html body .pl-x, html body #modal-profile .pf3-back, html body .wv-x, html body .wv-back,
html body #dp-back, html body #dp-sx, html body #wd-x, html body #modal-promo .pm-back,
html body #pm-back,
html body .pf3-return-row > button[data-close="modal-profile"],
html body #modal-vip [data-close="modal-vip"], html body .nf-back, html body .nf-sh-x,
html body .lc-head__back, html body .cmp-back, html body #hs-back, html body .hs-sh-x,
html body .mb-back, html body #ls-back, html body #fz-mg-back, html body .bh-x,
html body .pi-sh-x, html body .ba-sh-x {
  position: relative !important;
}
html body .pl-x::after,
html body .pf3-close::after,
html body #modal-profile .pf3-back::after,
html body .wv-x::after,
html body .wv-back::after,
html body #dp-back::after,
html body #dp-sx::after,
html body #wd-x::after,
html body .pm-sx::after,
html body #modal-promo .pm-back::after,
html body #pm-back::after,
html body .pf3-return-row > button[data-close="modal-profile"]::after,
html body #modal-vip [data-close="modal-vip"]::after,
html body #modal-invite [data-close="modal-invite"]::after,
html body .nf-back::after,
html body .nf-sh-x::after,
html body .lc-head__back::after,
html body .cmp-back::after,
html body #hs-back::after,
html body .hs-sh-x::after,
html body .mb-back::after,
html body #ls-close::after,
html body #ls-back::after,
html body #modal-auth#modal-auth .auth-v3 .auth-v3-close::after,
html body .payment-close-x::after,
html body #fpw-close::after,
html body .sw-close::after,
html body #modal-lucky .ld-close::after,
html body #modal-scratch .sc3-close::after,
html body #modal-egg .ge3-close::after,
html body #modal-checkin .ck3-close::after,
html body #modal-daily .dm3-close::after,
html body #modal-daily .dm3-back::after,
html body #fz-mg-back::after,
html body .bh-x::after,
html body .pi-sh-x::after,
html body .ba-sh-x::after {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

/* absolutely-positioned members: uniform inner top-right 14/14 */
html body .pf3-close,
html body .pm-sx,
html body #modal-invite [data-close="modal-invite"],
html body #ls-close,
html body #modal-auth#modal-auth .auth-v3 .auth-v3-close,
html body .payment-close-x,
html body #fpw-close,
html body .sw-close,
html body #modal-lucky .ld-close,
html body #modal-scratch .sc3-close,
html body #modal-egg .ge3-close,
html body #modal-checkin .ck3-close,
html body #modal-daily .dm3-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}