/* ==========================================================
   XGN targeted mobile fixes
   Keeps the existing visual design; fixes visibility/overflow.
   ========================================================== */

.xgn-mobile-nav-tools {
  display: none;
}

@media (max-width: 820px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  body.xgn-menu-open {
    overflow: hidden;
    touch-action: none;
  }

  .xgn-header {
    z-index: 1000;
  }

  .xgn-header__inner {
    min-width: 0;
  }

  .xgn-brand {
    min-width: 0;
  }

  .xgn-brand__text {
    min-width: 0;
  }

  .xgn-menu-toggle {
    position: relative;
    z-index: 1002;
    display: block;
    min-width: 44px;
    min-height: 44px;
    margin-inline-start: auto;
    cursor: pointer;
  }

  .xgn-menu-toggle span {
    transition: transform .18s ease, opacity .18s ease;
    transform-origin: center;
  }

  .xgn-menu-open .xgn-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .xgn-menu-open .xgn-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  .xgn-menu-open .xgn-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .xgn-nav {
    z-index: 1001;
    top: 72px;
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
  }

  .xgn-nav > a {
    flex: 0 0 auto;
  }

  /* Desktop controls are hidden by the existing layout at this breakpoint.
     Re-introduce them inside the mobile menu instead of losing them entirely. */
  .xgn-mobile-nav-tools {
    display: grid;
    gap: 9px;
    margin-top: 10px;
    padding: 14px 4px 4px;
    border-top: 1px solid rgba(255,255,255,.13);
  }

  .xgn-mobile-nav-tools__language {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.025);
  }

  .xgn-mobile-nav-tools__language > span {
    color: #8f8b84;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .xgn-mobile-nav-tools .xgn-language-switcher {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .xgn-mobile-nav-tools .xgn-language-switcher a {
    padding: 6px 2px !important;
    border: 0 !important;
    font-size: 10px;
  }

  .xgn-mobile-nav-action {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 13px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #f5f2ea !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase;
  }

  .xgn-mobile-nav-action::after {
    display: none !important;
  }

  .xgn-mobile-nav-action--primary {
    justify-content: center;
    background: #f5f2ea !important;
    color: #080808 !important;
    border-color: #f5f2ea !important;
  }

  /* Prevent long content, IDs, emails, team names and URLs from forcing
     sections outside the viewport. */
  .xgn-body main,
  .xgn-body section,
  .xgn-body article,
  .xgn-body div,
  .xgn-body form,
  .xgn-body fieldset {
    min-width: 0;
  }

  .xgn-body img,
  .xgn-body video,
  .xgn-body iframe {
    max-width: 100%;
  }

  .xgn-body input,
  .xgn-body select,
  .xgn-body textarea,
  .xgn-body button {
    max-width: 100%;
  }

  .xgn-body code,
  .xgn-body pre,
  .xgn-body dd,
  .xgn-body p,
  .xgn-body li,
  .xgn-body strong {
    overflow-wrap: anywhere;
  }

  /* Horizontal data is still accessible instead of being clipped. */
  .xgn-standings-scroll,
  .xgn-event-section-nav .xgn-tourney-shell,
  .xgn-hof-profile-nav .xgn-hof-v2-shell,
  .xgn-player-nav .xgn-player-shell {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  /* On-screen fixed registration action must not sit underneath phone UI. */
  .xgn-event-register-rail {
    z-index: 950;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

@media (max-width: 560px) {
  .xgn-container,
  .xgn-tourney-shell,
  .xgn-editorial-shell,
  .xgn-account-shell,
  .xgn-creator-shell {
    width: min(calc(100% - 28px), 1320px);
  }

  .xgn-brand__mark {
    width: 38px;
    height: 38px;
  }

  .xgn-nav {
    left: 10px;
    right: 10px;
  }

  .xgn-mobile-nav-tools__language {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .xgn-mobile-nav-tools .xgn-language-switcher a:last-child {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  .xgn-footer__links {
    grid-template-columns: 1fr;
  }

  .xgn-footer__headline span,
  .xgn-footer__headline strong {
    overflow-wrap: anywhere;
  }

  /* Give fixed event CTA enough breathing room on event pages. */
  .xgn-event-register-rail {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xgn-menu-toggle span {
    transition: none;
  }
}