/* CS3NEWS visual step 4: loading, empty and system-state polish */
@keyframes cs3-system-state-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cs3-system-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cs3-system-pulse {
  0%,
100% {
    opacity: 0.68;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.empty-state,
.matches-empty,
.rankings-empty,
.tournaments-empty {
  border: 1px dashed var(--system-state-border);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--system-state-bg) 96%, transparent), var(--system-state-bg)),
    radial-gradient(circle at top center, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%);
  box-shadow: var(--elevation-1);
  animation: cs3-system-state-in var(--transition-slow) both;
}

.empty-state,
.matches-empty,
.rankings-empty,
.tournaments-empty {
  color: var(--text-soft);
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 30px 22px;
}

.empty-state::before,
.rankings-empty::before,
.tournaments-empty::before {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--system-state-accent-border);
  border-radius: var(--radius-pill);
  background: var(--system-state-accent-bg);
  color: var(--accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 72%, transparent);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.empty-state::before {
  content: "⌕";
}

.empty-state h2,
.empty-state p {
  max-width: 520px;
}

.empty-state h2 {
  margin-bottom: 0;
}

.matches-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 30px 22px;
}

.matches-empty__icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin: 0;
  border: 1px solid var(--system-state-accent-border);
  border-radius: var(--radius-pill);
  background: var(--system-state-accent-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 72%, transparent);
  font-size: 1.28rem;
}

.matches-empty__title {
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.18;
}

.matches-empty__text {
  max-width: 460px;
  margin: 0;
  color: var(--text-soft);
}

.rankings-empty,
.tournaments-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 18px;
  text-align: center;
  line-height: 1.45;
}

.rankings-empty::before {
  content: "↻";
}

.tournaments-empty::before {
  content: "◌";
}

.matches-tournament-filter__empty,
.matches-side-card__empty,
.sidebar-matches-card__empty,
.popular-card__empty,
.mobile-trend-card__empty,
.vrs-card__empty,
.matches-tournaments-card__tier-empty {
  border-color: var(--system-state-border);
  background: color-mix(in srgb, var(--system-state-bg) 72%, transparent);
  color: color-mix(in srgb, var(--text-soft) 88%, var(--text));
}

.matches-tournament-filter__empty {
  display: grid;
  place-items: center;
  min-height: 42px;
  margin: 8px 10px 10px;
  padding: 8px 10px;
  border: 1px dashed var(--system-state-border);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 760;
}

.load-more {
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.load-more__status {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

.load-more[data-load-more-state="idle"] .load-more__status {
  background: color-mix(in srgb, var(--surface-muted) 50%, transparent);
}

.load-more[data-load-more-state="loading"] .load-more__status {
  border-color: var(--system-state-accent-border);
  background: var(--system-state-accent-bg);
  color: color-mix(in srgb, var(--text) 88%, var(--accent));
  box-shadow: var(--elevation-1);
}

.load-more[data-load-more-state="loading"] .load-more__status::before {
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  background: transparent;
  box-shadow: none;
  animation: cs3-system-spin 720ms linear infinite;
}

.load-more[data-load-more-state="error"] .load-more__status {
  border-color: color-mix(in srgb, var(--system-state-error) 28%, var(--line));
  background: var(--system-state-error-bg);
  color: color-mix(in srgb, var(--system-state-error) 88%, var(--text));
  box-shadow: var(--elevation-1);
}

.load-more[data-load-more-state="error"] .load-more__status::before {
  background: var(--system-state-error);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--system-state-error) 13%, transparent);
  animation: cs3-system-pulse 920ms ease-in-out infinite;
}

.load-more--end span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--system-state-success) 20%, var(--line));
  border-radius: var(--radius-pill);
  background: var(--system-state-success-bg);
  color: color-mix(in srgb, var(--system-state-success) 76%, var(--text));
  font-weight: 780;
}

.load-more--end span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.matches-show-more,
.tournament-section__more {
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.matches-show-more.is-loading {
  gap: 8px;
  border-color: var(--system-state-accent-border);
  background: var(--system-state-accent-bg);
  color: color-mix(in srgb, var(--text) 88%, var(--accent));
  opacity: 1;
}

.matches-show-more.is-loading::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  border-radius: var(--radius-pill);
  animation: cs3-system-spin 720ms linear infinite;
}

.matches-show-more.is-loading span {
  opacity: 0.78;
}

.trends-page.is-loading {
  filter: saturate(0.92);
}

@media (max-width: 720px) {
  .empty-state,
.matches-empty,
.rankings-empty,
.tournaments-empty {
    padding: 22px 14px;
  }

  .empty-state::before,
.rankings-empty::before,
.tournaments-empty::before,
.matches-empty__icon {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .empty-state,
.matches-empty,
.rankings-empty,
.tournaments-empty,
.load-more[data-load-more-state="loading"] .load-more__status::before,
.load-more[data-load-more-state="error"] .load-more__status::before,
.matches-show-more.is-loading::before {
    animation: none !important;
  }
}

/* CS3NEWS visual step 5 correction: subtle product module polish */
.matches-toolbar,
.tournaments-toolbar {
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.matches-filter,
.matches-tournament-filter__summary,
.sidebar-matches-card__filter {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.matches-filter:focus-visible,
.matches-tournament-filter__summary:focus-visible,
.sidebar-matches-card__filter:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
}

.matches-filter:active,
.matches-tournament-filter__summary:active,
.sidebar-matches-card__filter:active {
  transform: scale(0.975);
}

.sidebar-matches-card__filter:hover:not(.is-active) {
  background: var(--surface-hover);
  color: var(--text);
}

.match-feed-card,
.tournament-card {
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.match-feed-card__status {
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast);
}

.match-feed-card__logo,
.match-feed-card__logo--fallback,
.match-feed-card__competition-logo,
.matches-tournament-item__logo,
.tournament-card__logo,
.tournament-card__team {
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.match-feed-card__competition-copy span:first-child,
.match-feed-card__team-name,
.tournament-card__title,
.tournament-card__facts strong,
.matches-tournament-item__copy span:first-child {
  transition: color var(--transition-fast);
}

.match-feed-card__bookmark {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.match-feed-card__bookmark:hover,
.match-feed-card__bookmark:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.match-feed-card__bookmark:active {
  transform: scale(0.94);
}

.matches-tournament-item {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.matches-tournament-item:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.matches-tournament-item:active {
  transform: scale(0.99);
}

.tournament-card__arrow {
  transition: color var(--transition-fast);
}

/* CS3NEWS visual step 6: mobile product quality polish */
@media (max-width: 860px) {
  :root {
    --mobile-safe-inline: max(8px, env(safe-area-inset-left), env(safe-area-inset-right));
    --mobile-safe-bottom: max(12px, env(safe-area-inset-bottom));
    --mobile-tap-surface: color-mix(in srgb, var(--accent) 6%, transparent);
  }

  .app-shell,
.main-shell,
.page-grid,
.feed-section,
.sidebar,
.matches-page,
.tournaments-page,
.rankings-page,
.post-card,
.match-feed-card,
.tournament-card {
    min-width: 0;
  }

  .theme-toggle,
.hero__search-toggle,
.hero__contact-toggle,
.hero__origin,
.hero-mobile-nav__item,
.hero-mobile-more__summary,
.hero-mobile-more__item,
.hero-menu__toggle,
.hero-menu__item,
.hero-menu__feature,
.matches-filter,
.matches-priority-filter__item,
.matches-tournament-filter__summary,
.matches-date-filter__summary,
.tournaments-filter,
.rankings-region,
.post-card__menu-trigger,
.reaction-pill,
.expand-button,
.sidebar-matches-card__filter,
.sidebar-matches-card__all-link,
.match-feed-card__bookmark {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .theme-toggle,
.hero__search-toggle,
.hero__contact-toggle,
.hero__origin,
.hero-mobile-nav__item,
.hero-mobile-more__summary,
.hero-mobile-more__item,
.hero-menu__toggle,
.hero-menu__item,
.matches-filter,
.matches-priority-filter__item,
.matches-tournament-filter__summary,
.matches-date-filter__summary,
.tournaments-filter,
.rankings-region {
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast),
      transform var(--transition-fast);
  }

  .theme-toggle:active,
.hero__search-toggle:active,
.hero__contact-toggle:active,
.hero__origin:active,
.hero-menu__toggle:active {
    transform: scale(0.97);
  }

  .hero-mobile-nav__item:active,
.hero-mobile-more__summary:active,
.hero-mobile-more__item:active,
.hero-menu__item:active,
.matches-filter:active,
.matches-priority-filter__item:active,
.matches-tournament-filter__summary:active,
.matches-date-filter__summary:active,
.tournaments-filter:active,
.rankings-region:active,
.sidebar-matches-card__filter:active {
    background: var(--mobile-tap-surface);
    transform: translateY(1px) scale(0.985);
  }

  .hero-mobile-more__panel,
.hero-menu__panel {
    max-height: min(420px, calc(100dvh - 92px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .hero-mobile-more__panel {
    transform-origin: top right;
    animation: cs3-mobile-popover-in var(--transition-base) both;
    will-change: transform, opacity;
  }

  .hero-mobile-more__chevron {
    transition: transform var(--transition-fast);
  }

  .hero.is-search-open .search {
    transform-origin: top center;
    animation: cs3-mobile-search-in var(--transition-base) both;
    will-change: transform, opacity;
  }

  .hero.is-search-open .search__input {
    font-size: 16px;
  }

  .matches-toolbar,
.matches-filters,
.matches-toolbar__tools,
.matches-active-summary,
.matches-active-summary__chips,
.page-tournaments .tournaments-toolbar,
.page-tournaments .tournaments-filters,
.page-tournaments .tournaments-toolbar__tools,
.rankings-regions,
.trends-page__periods,
.mobile-trend-card__rail {
    overscroll-behavior-x: contain;
    scroll-padding-inline: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .matches-filter,
.matches-priority-filter__item,
.matches-tournament-filter__summary,
.matches-date-filter__summary,
.tournaments-filter,
.rankings-region,
.trends-page__period {
    scroll-snap-align: start;
  }

  .match-feed-card,
.tournament-card,
.post-card,
.trends-list__item {
    scroll-margin-top: 58px;
  }
}

@media (max-width: 640px) {
  .page-home .app-shell {
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
  }



  .hero-menu__panel {
    right: max(0px, env(safe-area-inset-right));
    width: min(296px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }

  .hero-mobile-more__panel {
    right: max(0px, env(safe-area-inset-right));
    max-width: calc(100vw - 18px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  .lightbox {
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .lightbox__close,
.lightbox__nav {
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .lightbox__close {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }

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

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

  .lightbox__thumbs {
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
    -webkit-overflow-scrolling: touch;
  }

  .reaction-toast {
    max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

@media (hover: none) and (pointer: coarse) {
  .post-card__menu-trigger:active,
.reaction-pill:active,
.expand-button:active,
.sidebar-matches-card__all-link:active,
.match-feed-card__bookmark:active {
    background: var(--mobile-tap-surface, color-mix(in srgb, var(--accent) 6%, transparent));
    transform: scale(0.98);
  }

  .match-feed-card[data-match-link]:active,
.tournament-card:active,
.sidebar-match-featured[data-match-link]:active,
.sidebar-match-row[data-match-link]:active,
.trends-list__item:active {
    background: color-mix(in srgb, var(--accent) 3.5%, var(--surface));
  }
}

@keyframes cs3-mobile-popover-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cs3-mobile-search-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mobile-more__panel,
.hero.is-search-open .search {
    animation: none !important;
  }

  .theme-toggle,
.hero__search-toggle,
.hero__contact-toggle,
.hero__origin,
.hero-mobile-nav__item,
.hero-mobile-more__summary,
.hero-mobile-more__item,
.hero-menu__toggle,
.hero-menu__item,
.matches-filter,
.matches-priority-filter__item,
.matches-tournament-filter__summary,
.matches-date-filter__summary,
.tournaments-filter,
.rankings-region {
    transition-duration: 1ms !important;
  }
}

/* Mobile utility page shell. */
@media (max-width: 640px) {
  body:is(.page-trends, .page-matches, .page-tournaments, .page-rankings) .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-top: calc(50px + env(safe-area-inset-top)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    box-sizing: border-box;
  }

  body:is(.page-trends, .page-matches, .page-tournaments, .page-rankings) .main-shell {
    margin-top: 8px !important;
  }

  body:is(.page-trends, .page-matches, .page-tournaments, .page-rankings) .page-grid,
body:is(.page-trends, .page-matches, .page-tournaments, .page-rankings) .feed-section,
body:is(.page-trends, .page-matches, .page-tournaments, .page-rankings) .matches-main-stack,
body:is(.page-trends, .page-matches, .page-tournaments, .page-rankings) .tournaments-main-stack {
    width: 100% !important;
    max-width: 100% !important;
  }

  body:is(.page-trends, .page-matches, .page-tournaments, .page-rankings) :is(.trends-page, .matches-page, .tournaments-page, .rankings-page) {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
  }

  body:is(.page-trends, .page-matches, .page-tournaments, .page-rankings) :is(.trends-page__header, .matches-hero, .tournaments-hero, .rankings-hero) {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }

  body:is(.page-trends, .page-matches, .page-tournaments, .page-rankings) :is(.trends-page__toolbar, .matches-toolbar, .tournaments-toolbar, .rankings-toolbar) {
    border-radius: 0 !important;
  }
}