/* modal.css — shared modal chrome for 1gambling.online games.
 *
 * Stab 67: created as a verbatim port of 7X3 game.css :945-1350.
 * Stab 69: refactored to chrome-only. Form-specific rules
 * (.gam-form*, .gam-pw*, .gam-google*, .gam-dob*) extracted into
 * shared/auth/auth.css. Bumped to ?v=modal-1.1.0.
 * Stab 83: bumped to ?v=modal-1.2.0. .gam-modal-close repositioned to
 * match apex's .lobby-ov-close — top/right both 12px, 32×32, simpler
 * background, sits in the top-right of the form panel itself (not
 * over the header). .gam-modal-title gains padding-right so a long
 * title doesn't run under the X.
 *
 * What lives here now (chrome only):
 *   .gam-modal-ov         — overlay fixed shell + open transition
 *   .gam-modal-backdrop   — blurred radial-gradient backdrop
 *   .gam-modal-card       — sheet/floating card with mobile-first @media
 *   .gam-modal-close      — close × button
 *   .gam-modal-header     — title + banner header block
 *   .gam-modal-title      — gold-gradient title text
 *   .gam-modal-banner     — contextual one-liner above the title
 *   .gam-modal-tabs       — tab strip
 *   .gam-modal-tab(.active) — individual tab pill
 *   .gam-modal-body       — scrollable body container
 *
 * What moved to auth.css: every form / input / pw-eye / google / dob
 * selector. Consumers that need both must import both stylesheets.
 *
 * Independent versioning: import as ?v=modal-1.2.0. Bump only on
 * intentional API/visual changes.
 */

/* CSS custom properties — defensive declaration so the modal renders
 * correctly when imported into a game whose own :root doesn't define
 * the 7X3 luxury palette. Values are 1:1 with 7X3 game.css :14-56. */
:root {
  --gam-cyan-soft:  #8fcdff;
  --gam-gold:       #c98f1f;
  --gam-gold-lt:    #f0c252;
  --gam-gold-glow:  #ffe39a;
  --gam-cream:      #fff5d8;
}

/* ── Overlay shell ─────────────────────────────────────────────────── */
.gam-modal-ov {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  /* Mobile-first: edge-to-edge top sheet. The card itself touches
     the very top of the viewport (only the iPhone notch is
     respected via env(safe-area-inset-top)), so the panel reads
     as "dropped from the top edge" instead of "floating modal
     window centered somewhere on the screen". Side padding is 0
     so the card spans the full width. */
  padding: env(safe-area-inset-top, 0) 0 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.gam-modal-ov.open { opacity: 1; pointer-events: auto; }

.gam-modal-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(95, 183, 255, 0.18) 0%, transparent 70%),
    rgba(2, 6, 15, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
          backdrop-filter: blur(8px) saturate(1.1);
}

.gam-modal-card {
  position: relative;
  /* MOBILE: edge-to-edge top sheet. width 100%, no max-width
     constraint, only bottom corners rounded, no top border (sheet
     is "attached" to the very top edge of the viewport). The
     desktop @media block below restores the centered floating
     modal look on tablets/desktops. */
  width: 100%; max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* dvh shrinks when the on-screen keyboard appears, so the
     sheet naturally re-fits. vh fallback for older browsers. */
  max-height: 100vh;
  max-height: 100dvh;
  padding: 0;
  overflow: hidden;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgba(240, 194, 82, 0.65);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  background:
    /* asymmetric gold flourish — top-LEFT bloom */
    radial-gradient(ellipse 55% 35% at 8% 8%, rgba(255, 227, 154, 0.25) 0%, transparent 65%),
    radial-gradient(ellipse 35% 25% at 92% 92%, rgba(95, 183, 255, 0.22) 0%, transparent 65%),
    linear-gradient(180deg, rgba(20, 42, 100, 0.94) 0%, rgba(5, 13, 36, 0.96) 100%);
  /* No top shadow (sheet starts at the top edge); a strong drop
     shadow under the bottom-rounded edge so the sheet visibly
     hangs above the game underneath. */
  box-shadow:
    inset 0 -1px 0 rgba(255, 245, 216, 0.22),
    inset 0 0 0 1px rgba(255, 227, 154, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.55),
    0 0 30px -4px rgba(95, 183, 255, 0.30);
  /* Slide DOWN from above. */
  transform: translateY(-40px);
  transition: transform 0.28s cubic-bezier(.18,.9,.25,1);
}
.gam-modal-ov.open .gam-modal-card { transform: translateY(0); }

@media (min-width: 600px) {
  /* Tablet / desktop: centered floating modal with all four
     rounded corners, max-width 460px, breathing room around. */
  .gam-modal-ov { align-items: center; padding: 24px; }
  .gam-modal-card {
    width: 100%; max-width: 460px;
    margin: 0 auto;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    border: 1px solid rgba(240, 194, 82, 0.65);
    border-radius: 18px;
    box-shadow:
      inset 0 1px 0 rgba(255, 245, 216, 0.22),
      inset 0 0 0 1px rgba(255, 227, 154, 0.10),
      0 0 30px -4px rgba(95, 183, 255, 0.30),
      0 8px 26px rgba(0, 0, 0, 0.55);
  }
}

/* Stab 83: aligned with apex's .lobby-ov-close (main-domain/index.html
   :413-427). Sits in the top-right corner of the form panel itself,
   not over the header. Simpler background, slightly larger hit area. */
.gam-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(240, 194, 82, 0.55);
  color: var(--gam-cream);
  font-size: 20px; line-height: 1;
  cursor: pointer; outline: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.gam-modal-close:hover  { border-color: var(--gam-gold-lt); color: var(--gam-gold-glow); }
.gam-modal-close:active { transform: translateY(1px); }

.gam-modal-header {
  text-align: left;
  padding: 14px 16px 6px;
  flex-shrink: 0;
}
.gam-modal-title {
  font-size: 22px; font-weight: 900; letter-spacing: 0.06em;
  background: linear-gradient(180deg, var(--gam-cream) 0%, var(--gam-gold-lt) 60%, var(--gam-gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(240, 194, 82, 0.35));
  /* Stab 83: reserve space for the .gam-modal-close so long titles
     don't run under the X (mirrors apex .lobby-ov-title:padding-right). */
  padding-right: 36px;
}
.gam-modal-banner {
  display: none;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse 100% 80% at 0% 0%, rgba(255, 227, 154, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, rgba(31, 78, 168, 0.20) 0%, rgba(12, 26, 60, 0.45) 100%);
  border: 1px solid rgba(240, 194, 82, 0.45);
  color: var(--gam-cream);
  font-size: 13px; line-height: 1.4;
}

.gam-modal-tabs {
  display: flex; gap: 6px;
  padding: 3px; margin: 0 16px 10px;
  border-radius: 10px;
  background: rgba(2, 6, 15, 0.45);
  border: 1px solid rgba(240, 194, 82, 0.30);
  flex-shrink: 0;
}
.gam-modal-tab {
  flex: 1; padding: 7px 0;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gam-cyan-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer; outline: none;
  font-family: inherit;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  -webkit-tap-highlight-color: transparent;
}
.gam-modal-tab.active {
  color: var(--gam-cream);
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(95, 183, 255, 0.30) 0%, transparent 70%),
    linear-gradient(180deg, rgba(31, 78, 168, 0.55) 0%, rgba(12, 26, 60, 0.75) 100%);
  border-color: rgba(255, 227, 154, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 216, 0.22),
    0 0 10px rgba(255, 227, 154, 0.25);
}

.gam-modal-body {
  display: block;
  padding: 0 16px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}

/* Stab LF-2: .gam-modal-icon-footer / .gam-modal-icon-link /
   .gam-modal-icon-sep block (Stab 105) deleted. The shared
   legal-footer module (legal-footer.css) replaces these styles
   wherever the footer was mounted (shared/auth + shared/deposits). */