/* Step 8: CS3BET button and mobile menu polish. */
.cs3bet-page .cs3bet-button,
.hero-menu__feature {
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base),
    box-shadow var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.cs3bet-page .cs3bet-button:active,
.hero-menu__feature:active {
  transform: translateY(0) scale(0.992);
}


@media (prefers-reduced-motion: reduce) {
  .cs3bet-page .cs3bet-button,
  .hero-menu__feature {
    transition: none !important;
  }
}

/* Step 9: Media / Lightbox / Gallery polish. */
.post-media,
.post-media-album {
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent) 4%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-muted) 88%, transparent), color-mix(in srgb, var(--surface-strong) 76%, transparent));
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.post-media__lightbox-trigger,
.post-media-album__tile {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .post-media:hover,
  .post-media-album:hover {
    border-color: color-mix(in srgb, var(--accent) 10%, var(--line));
  }

}

.post-media__lightbox-trigger:focus-visible,
.post-media-album__tile:focus-visible,
.post-media-album__nav:focus-visible,
.post-media-album__thumb:focus-visible,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible,
.lightbox__thumb:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.post-media-album__nav,
.lightbox__close,
.lightbox__nav,
.post-media-album__thumbs,
.lightbox__thumbs {
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
}

.post-media-album__nav,
.lightbox__close,
.lightbox__nav {
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.post-media-album__nav:active,
.lightbox__close:active,
.lightbox__nav:active,
.lightbox__thumb:active,
.post-media-album__thumb:active {
  transform: scale(0.96);
}

.post-media-album__nav:active,
.lightbox__nav:active {
  transform: translateY(-50%) scale(0.96);
}

.post-media-album__thumb,
.lightbox__thumb {
  border-radius: 10px;
}

.lightbox__backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(37, 99, 235, 0.16), transparent 34%),
    rgba(8, 12, 18, 0.9);
}

.lightbox__content {
  position: relative;
  display: grid;
  place-items: center;
}

.lightbox__content::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.24);
  border-top-color: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity var(--transition-fast);
  animation: cs3-lightbox-spin 840ms linear infinite;
}

.lightbox__content.is-loading::before {
  opacity: 1;
}

.lightbox__content img,
.lightbox__content video {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.lightbox__content.is-loading img,
.lightbox__content.is-loading video {
  opacity: 0.56;
  transform: scale(0.992);
}

.lightbox__thumbs {
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__thumb:hover,
.post-media-album__nav:hover:not(:disabled),
.post-media-album__thumb:hover {
  border-color: rgba(255, 255, 255, 0.34);
}

@keyframes cs3-lightbox-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (max-width: 640px) {
  .lightbox__dialog {
    padding:
      calc(14px + env(safe-area-inset-top))
      calc(10px + env(safe-area-inset-right))
      calc(82px + env(safe-area-inset-bottom))
      calc(10px + env(safe-area-inset-left));
  }

  .lightbox__close {
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    width: 44px;
    height: 44px;
  }

  .lightbox__nav {
    width: 44px;
    height: 44px;
  }

  .lightbox__nav--prev {
    left: calc(10px + env(safe-area-inset-left));
  }

  .lightbox__nav--next {
    right: calc(10px + env(safe-area-inset-right));
  }

  .lightbox__thumbs {
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
    scroll-padding-inline: 8px;
  }

  .post-media-album__nav {
    width: 42px;
    height: 42px;
  }

  .post-media-album__nav--prev {
    left: 8px;
  }

  .post-media-album__nav--next {
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__content::before {
    animation: none !important;
  }

  .lightbox__content img,
  .lightbox__content video {
    transition: none !important;
  }
}

/* Step 10: Final mobile consistency pass and lightbox layering fixes. */
body.is-lightbox-open :is(.hero, .hero-nav-shell, .mobile-dock, .scroll-top) {
  pointer-events: none;
}

@media (max-width: 860px) {
  .lightbox__dialog {
    min-height: 100svh;
  }

  .lightbox__close,
  .lightbox__nav,
  .lightbox__thumbs {
    z-index: 3;
  }
}

/* Step 13: Final visual QA pass — small stability guards only. */
:where(
  .hero,
  .hero__top,
  .hero-nav-shell,
  .app-shell,
  .main-shell,
  .page-grid,
  .feed-section,
  .post-card,
  .matches-main-stack,
  .tournaments-main-stack,
  .trends-page,
  .matches-page,
  .tournaments-page,
  .rankings-page,
  .cs3bet-page
) {
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 860px) {
  body {
    overflow-x: hidden;
  }

  .app-shell,
  .main-shell,
  .page-grid,
  .feed-section,
  .matches-main-stack,
  .tournaments-main-stack,
  .trends-page,
  .matches-page,
  .tournaments-page,
  .rankings-page,
  .cs3bet-page {
    max-width: 100%;
  }

  .search__input {
    font-size: 16px;
  }

  .hero-menu--mobile .hero-menu__panel,
  .post-menu,
  .reactions-popover {
    max-width: calc(100vw - 24px);
  }

  .scroll-top {
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 861px) and (max-width: 1300px) {
  .hero__actions {
    align-items: center !important;
    flex-shrink: 0;
  }

  .hero__search-toggle,
  .hero__contact-toggle {
    flex: 0 0 auto;
  }
}