@view-transition {
  navigation: auto;
}

:root {
  --jvgrid-site-nav-accent: #0066cc;
  --jvgrid-site-nav-muted: #888;
  --jvgrid-site-nav-bar-bg: #fff;
  --jvgrid-site-nav-bar-border: #d8d8d8;
  --jvgrid-z-chrome-nav: 10;
  --jvgrid-z-chrome-banner: 20;
  --jvgrid-z-overlay-backdrop: 1000;
  --jvgrid-z-overlay: 1001;
  --jvgrid-page-pad-x: clamp(0.75rem, 2.5vw, 2rem);
  --jvgrid-play-area-max: 42rem;
}

body[data-jvgrid-nav='play'] {
  --jvgrid-play-area-max: 54rem;
}

dialog[open] {
  z-index: var(--jvgrid-z-overlay);
}

dialog[open]::backdrop {
  z-index: var(--jvgrid-z-overlay-backdrop);
}

.jvgrid-auth-dialog[open] {
  z-index: var(--jvgrid-z-overlay);
}

.jvgrid-auth-dialog::backdrop {
  z-index: var(--jvgrid-z-overlay-backdrop);
}

/* Chrome sits below overlays; hide it while a modal is open so the dimmed backdrop reads clearly. */
html:has(dialog[open]) #jvgrid-site-nav-mobile,
html:has(dialog[open]) #jvgrid-site-nav-desktop,
html:has(dialog[open]) #jvgrid-move-banner,
html:has(#game-over-backdrop:not([hidden])) #jvgrid-site-nav-mobile,
html:has(#game-over-backdrop:not([hidden])) #jvgrid-site-nav-desktop,
html:has(#game-over-backdrop:not([hidden])) #jvgrid-move-banner {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 639px) {
  body.jvgrid-has-bottom-nav {
    padding-bottom: var(--jvgrid-site-nav-inset, 0px);
  }
}

@media (min-width: 640px) {
  body.jvgrid-has-desktop-top-nav {
    padding-top: calc(var(--jvgrid-site-nav-top-inset, 0px) + 24px);
  }
}

.jvgrid-site-nav {
  font-family: 'Montserrat', sans-serif;
}

/* —— Mobile bottom tab bar —— */
#jvgrid-site-nav-mobile {
  display: none;
}

@media (max-width: 639px) {
  #jvgrid-site-nav-mobile {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--jvgrid-z-chrome-nav);
    box-sizing: border-box;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    margin: 0;
    padding: 0.25rem 0.15rem;
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
    background: var(--jvgrid-site-nav-bar-bg);
    border-top: 1px solid var(--jvgrid-site-nav-bar-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  }

  #jvgrid-site-nav-mobile.jvgrid-site-nav--enter {
    animation: jvgrid-site-nav-pop 0.35s ease-out;
  }

  #jvgrid-site-nav-mobile a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 48px;
    padding: 0.2rem 0.1rem;
    text-decoration: none;
    color: var(--jvgrid-site-nav-muted);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.1;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
  }

  #jvgrid-site-nav-mobile a .jvgrid-site-nav-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.5rem;
    border-radius: 999px;
    transition: background-color 0.15s ease;
  }

  #jvgrid-site-nav-mobile a svg {
    width: 1.15rem;
    height: 1.15rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #jvgrid-site-nav-mobile a[aria-current='page'] {
    color: var(--jvgrid-site-nav-accent);
    font-weight: 700;
  }

  #jvgrid-site-nav-mobile a[aria-current='page'] .jvgrid-site-nav-icon-wrap {
    background: rgba(0, 102, 204, 0.12);
  }

  #jvgrid-site-nav-mobile .jvgrid-site-nav-label-short {
    display: none;
  }

  @media (max-width: 339px) {
    #jvgrid-site-nav-mobile .jvgrid-site-nav-label-full {
      display: none;
    }
    #jvgrid-site-nav-mobile .jvgrid-site-nav-label-short {
      display: inline;
    }
  }
}

/* —— Desktop top nav —— */
#jvgrid-site-nav-desktop {
  display: none;
}

@media (min-width: 640px) {
  #jvgrid-site-nav-mobile {
    display: none !important;
  }

  #jvgrid-site-nav-desktop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--jvgrid-z-chrome-nav);
    box-sizing: border-box;
    background: var(--jvgrid-site-nav-bar-bg);
    border-bottom: 1px solid var(--jvgrid-site-nav-bar-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }

  #jvgrid-site-nav-desktop.jvgrid-site-nav--enter {
    animation: jvgrid-site-nav-pop 0.35s ease-out;
  }

  #jvgrid-site-nav-desktop .jvgrid-site-nav-desktop-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(var(--jvgrid-play-area-max), calc(100vw - 2 * var(--jvgrid-page-pad-x)));
    max-width: none;
    margin-inline: auto;
    padding: 0.55rem 0;
    box-sizing: border-box;
  }

  #jvgrid-site-nav-desktop .jvgrid-site-nav-wordmark {
    flex: 0 0 auto;
    text-decoration: none;
    color: #111;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  #jvgrid-site-nav-desktop .jvgrid-site-nav-wordmark:hover {
    color: var(--jvgrid-site-nav-accent);
  }

  #jvgrid-site-nav-desktop .jvgrid-site-nav-desktop-tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
  }

  #jvgrid-site-nav-desktop .jvgrid-site-nav-desktop-tabs a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    text-decoration: none;
    color: var(--jvgrid-site-nav-muted);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    transition: color 0.15s ease;
  }

  #jvgrid-site-nav-desktop .jvgrid-site-nav-desktop-tabs a svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #jvgrid-site-nav-desktop .jvgrid-site-nav-desktop-tabs a:hover {
    color: #333;
  }

  #jvgrid-site-nav-desktop .jvgrid-site-nav-desktop-tabs a[aria-current='page'] {
    color: var(--jvgrid-site-nav-accent);
    font-weight: 700;
  }

  #jvgrid-site-nav-desktop .jvgrid-site-nav-desktop-tabs a[aria-current='page']::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(0, 102, 204, 0.1);
    pointer-events: none;
    z-index: -1;
    view-transition-name: jvgrid-site-nav-indicator;
  }
}

@keyframes jvgrid-site-nav-pop {
  from {
    transform: scale(0.96);
    opacity: 0.85;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #jvgrid-site-nav-mobile.jvgrid-site-nav--enter,
  #jvgrid-site-nav-desktop.jvgrid-site-nav--enter {
    animation: none;
  }
}