/* G&C REV10W FIX1 — cross-app PWA safe-click guard.
 * Mobile-only geometry protection for display cutouts, rounded corners,
 * iOS home indicators and Android gesture areas. Desktop layout is untouched.
 */
:root{
  --gc-safe-top:env(safe-area-inset-top,0px);
  --gc-safe-right:env(safe-area-inset-right,0px);
  --gc-safe-bottom:env(safe-area-inset-bottom,0px);
  --gc-safe-left:env(safe-area-inset-left,0px);
}

@supports(height:100dvh){
  html,body{min-height:100dvh}
}

@media(max-width:900px){
  /* Keep every floating app dock inside side cutouts in portrait and landscape.
   * Fixed left/right + auto width avoids the iPhone landscape notch and curved
   * Android edges without consuming extra room on narrow portrait phones.
   */
  .gcAppBottomNav,
  #gcAdminUnifiedNav.gcAdminFloatingNav,
  .gcAwardsBottomNav,
  .gcGoldSimpleNav{
    left:max(8px,var(--gc-safe-left))!important;
    right:max(8px,var(--gc-safe-right))!important;
    width:auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transform:none!important;
  }
  .gcAppBottomNav,
  #gcAdminUnifiedNav.gcAdminFloatingNav,
  .gcAwardsBottomNav{max-width:620px!important}
  .gcGoldSimpleNav{max-width:560px!important}

  /* Existing spacer-based routes already clear the dock. Make their minimum
   * reserve explicit so a tall home-indicator inset cannot reduce the final
   * clickable content area on compact devices. */
  .gcAppBottomNavSpacer,
  .gcAwardsNavSpacer{
    min-height:calc(100px + var(--gc-safe-bottom))!important;
    pointer-events:none!important;
  }

  /* These legacy Admin surfaces opted into viewport-fit=cover but did not
   * offset their first controls from the status bar / Dynamic Island. */
  body[data-gc-page="admin_donations"],
  body[data-gc-page="admin_experience"],
  body[data-gc-page="admin_member_awards"]{
    padding-top:max(14px,calc(var(--gc-safe-top) + 8px))!important;
  }

  /* Keep transient Admin feedback above the unified floating navigation so it
   * never obscures or intercepts a nav button. */
  body[data-gc-page="admin_donations"] .gcDonAdminToast,
  body[data-gc-page="admin_experience"] .gcExperienceAdminToast,
  body[data-gc-page="admin_member_awards"] .toast{
    bottom:calc(108px + var(--gc-safe-bottom))!important;
  }

  /* Donation confirmation is a full-screen interaction: preserve both the
   * top cutout and bottom gesture/home-indicator click zones. */
  body[data-gc-page="admin_donations"] .gcDonConfirm{
    padding-top:max(18px,calc(var(--gc-safe-top) + 12px))!important;
    padding-right:max(18px,calc(var(--gc-safe-right) + 12px))!important;
    padding-bottom:max(18px,calc(var(--gc-safe-bottom) + 12px))!important;
    padding-left:max(18px,calc(var(--gc-safe-left) + 12px))!important;
  }
}

/* Landscape handsets need side-safe padding even when the viewport is wide
 * enough to miss some portrait-only breakpoints. */
@media(orientation:landscape) and (max-height:650px) and (pointer:coarse){
  .gcAppBottomNav,
  #gcAdminUnifiedNav.gcAdminFloatingNav,
  .gcAwardsBottomNav,
  .gcGoldSimpleNav{
    left:max(8px,var(--gc-safe-left))!important;
    right:max(8px,var(--gc-safe-right))!important;
    width:auto!important;
    transform:none!important;
  }
}

/* REV10W FIX1 — safe interactive overlays and transient feedback.
 * These rules are deliberately mobile/coarse-pointer only. They preserve the
 * existing visual treatment while ensuring close buttons, form actions and
 * feedback never land underneath a notch, Dynamic Island or gesture area. */
@media (max-width:900px), (pointer:coarse){
  .gcDonationModal,
  .gcTsModal,
  .gcQaModal,
  .gcMerchantModalBackdrop,
  .gcSettingsReferralModal,
  .gcSettingsConfirmModal,
  .gcProfileBadgeDialog,
  .adminReviewModal,
  .adminMetacriticModal,
  .gcAdminApplicationModal,
  .adminModal,
  .gcAdminProgressionBackdrop,
  .gcAdminAnnouncementConfirmBackdrop,
  .adminChangeModal,
  .adminMemberDetailModal,
  .gcAdminBadgeBackdrop,
  .gcAdminRankBackdrop,
  .gcAdminEventConfirmBackdrop,
  .gcTrendingPlayersModal,
  .gcExperienceAdminConfirm{
    padding-top:max(14px,calc(var(--gc-safe-top) + 8px))!important;
    padding-right:max(14px,calc(var(--gc-safe-right) + 8px))!important;
    padding-bottom:max(14px,calc(var(--gc-safe-bottom) + 8px))!important;
    padding-left:max(14px,calc(var(--gc-safe-left) + 8px))!important;
  }

  .gcDonationPanel,
  .gcMerchantModal,
  .gcSettingsReferralPanel,
  .gcSettingsConfirmPanel,
  .gcProfileBadgeDialogPanel,
  .adminReviewModalPanel,
  .adminMetacriticModalPanel,
  .gcAdminApplicationModalPanel,
  .adminDialog,
  .gcAdminProgressionModal,
  .gcAdminAnnouncementConfirmDialog,
  .adminChangePanel,
  .adminMemberDetailPanel,
  .gcAdminBadgeModal,
  .gcAdminRankModal,
  .gcAdminEventConfirmDialog,
  .gcTrendingPlayersDialog,
  .gcExperienceAdminConfirmPanel{
    max-height:calc(100dvh - var(--gc-safe-top) - var(--gc-safe-bottom) - 28px)!important;
  }

  .adminReviewModalPanel,
  .gcSettingsReferralPanel,
  .gcSettingsConfirmPanel,
  .gcAdminApplicationModalPanel,
  .gcAdminAnnouncementConfirmDialog,
  .gcAdminEventConfirmDialog{
    overflow:auto;
    overscroll-behavior:contain;
  }

  /* The shared game picker is a bottom sheet reused across member and Admin
   * surfaces. Its final buttons/list rows must sit above the home indicator. */
  .gamePickerSheet{
    padding-bottom:calc(18px + var(--gc-safe-bottom))!important;
    max-height:calc(82dvh - var(--gc-safe-bottom))!important;
  }

  /* Closed Beta intentionally becomes a full-screen sheet on phones. Keep the
   * full-screen feel, but make its actual card occupy only the safe viewport. */
  .gcBetaModal{
    padding-top:var(--gc-safe-top)!important;
    padding-right:var(--gc-safe-right)!important;
    padding-bottom:var(--gc-safe-bottom)!important;
    padding-left:var(--gc-safe-left)!important;
  }
  .gcBetaModalCard{
    height:calc(100dvh - var(--gc-safe-top) - var(--gc-safe-bottom))!important;
    max-height:calc(100dvh - var(--gc-safe-top) - var(--gc-safe-bottom))!important;
  }

  /* Push Centre/Admin use absolute panels with 3vh edges. On Dynamic-Island
   * iPhones that can be less than the unsafe top inset, so clamp both ends. */
  .gcPushAdminPanel{
    top:max(3vh,calc(var(--gc-safe-top) + 8px))!important;
    max-height:calc(100dvh - var(--gc-safe-top) - var(--gc-safe-bottom) - 16px)!important;
  }
  .gcPushPanel{
    top:max(3vh,calc(var(--gc-safe-top) + 8px))!important;
    bottom:max(3vh,calc(var(--gc-safe-bottom) + 8px))!important;
  }

  /* Livestream moderation is a bottom sheet. Its panel already protects its
   * own bottom padding; protect the outer sheet from side cutouts as well. */
  .gcEventModSheet{
    padding-right:max(12px,calc(var(--gc-safe-right) + 8px))!important;
    padding-left:max(12px,calc(var(--gc-safe-left) + 8px))!important;
    padding-bottom:max(12px,calc(var(--gc-safe-bottom) + 8px))!important;
  }

  /* Generic legacy toasts should at minimum clear the OS gesture zone. */
  .toast{
    bottom:max(24px,calc(var(--gc-safe-bottom) + 14px));
  }

  /* Routes with the member dock need transient feedback above the dock, not
   * on top of Home/Games/Profile/Members/Admin tap targets. */
  body[data-gc-page="home"] .toast,
  body[data-gc-page="games"] .toast,
  body[data-gc-page="browsegames"] .toast,
  body[data-gc-page="game"] .toast,
  body[data-gc-page="game_reviews"] .toast,
  body[data-gc-page="profile"] .toast,
  body[data-gc-page="members"] .toast,
  body[data-gc-page="vault"] .toast,
  body[data-gc-page="marketplace"] .toast,
  body.gcUnifiedAdminShell .toast,
  .gcDonationToast,
  .gcVaultToast{
    bottom:calc(108px + var(--gc-safe-bottom))!important;
  }

  /* Existing profile Marketplace gate notice was hard-coded 92px from the
   * viewport edge; preserve its position above the dock plus the safe inset. */
  body[data-gc-page="profile"] [id="gcMarketplaceGateNotice"]{
    bottom:calc(96px + var(--gc-safe-bottom))!important;
  }
}


/* FIX123 — app-wide mobile/PWA top-layer safe-area authority.
 * Native <dialog> elements live in the browser top layer, so page-level safe
 * padding does not protect them from iOS/Android status-bar and display-cutout
 * zones. Constrain every open native dialog to the genuinely clickable visual
 * viewport while preserving its own centring and desktop geometry. */
@media (max-width:900px), (pointer:coarse){
  dialog[open]{
    top:max(10px,calc(var(--gc-safe-top) + 8px))!important;
    right:max(8px,var(--gc-safe-right))!important;
    bottom:max(10px,calc(var(--gc-safe-bottom) + 8px))!important;
    left:max(8px,var(--gc-safe-left))!important;
    max-width:calc(100dvw - var(--gc-safe-left) - var(--gc-safe-right) - 16px)!important;
    max-height:calc(100dvh - var(--gc-safe-top) - var(--gc-safe-bottom) - 20px)!important;
    margin:auto!important;
  }
}


/* FIX125 — Notification Centre vs canonical floating-nav authority.
 * The app dock intentionally sits at an extremely high z-index, so it can
 * otherwise cover the final controls inside the Notification Centre sheet.
 * Notification Centre is modal: hide every app dock while it is open rather
 * than making members scroll controls underneath an unrelated navigation layer. */
@media (max-width:900px), (pointer:coarse){
  html body.gcPushOpen .gcAppBottomNav,
  html body.gcPushOpen #gcAdminUnifiedNav.gcAdminFloatingNav,
  html body.gcPushOpen .gcAwardsBottomNav,
  html body.gcPushOpen .gcGoldSimpleNav,
  html body.gcPushOpen .gcGoldBottomNav{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  html body.gcPushOpen .gcPushPanel{
    bottom:max(8px,calc(var(--gc-safe-bottom) + 8px))!important;
    max-height:calc(100dvh - var(--gc-safe-top) - var(--gc-safe-bottom) - 18px)!important;
  }
  html body.gcPushOpen .gcPushContent{
    padding-bottom:max(22px,calc(var(--gc-safe-bottom) + 18px))!important;
    scroll-padding-bottom:max(24px,calc(var(--gc-safe-bottom) + 20px));
  }
}