/*
  ZorX mobile/tablet refinement layer.
  Desktop is intentionally untouched: every rule is gated at 1024px or below.
*/

@media (max-width: 1024px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background-size: 64px 64px, 64px 64px, auto, auto, auto !important;
    overscroll-behavior-x: none;
  }

  body::before,
  body::after,
  .hero-grid-lines,
  .hero-bg::before,
  .hero-bg::after {
    opacity: .55;
    animation: none !important;
    transform: none !important;
  }

  #heroCanvas {
    display: none !important;
  }

  img,
  svg,
  canvas,
  video {
    max-width: 100%;
  }

  .container,
  .wrap,
  .main,
  .content {
    min-width: 0;
  }

  .topbar,
  .nav,
  .side,
  .top,
  .mobile-drawer,
  .auth-modal,
  .modal,
  .modal-card,
  .edit-card,
  .controls,
  .preview-shell,
  .tool-card,
  .card,
  .metric,
  section {
    box-shadow: none !important;
  }

  .topbar,
  .nav,
  .side,
  .top,
  .mobile-drawer,
  .mobile-drawer-backdrop,
  .auth-overlay,
  .zx-verify-overlay,
  .so-zoom-controls,
  .zoom-controls {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .tool-card,
  .game-card,
  .team-card,
  .store-card,
  .home-team-card,
  .creator-card,
  .plan-card,
  .pay-method,
  .panel,
  .card,
  .metric,
  section {
    transition-duration: .14s !important;
  }

  .scroll,
  .table-wrap,
  .overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    max-width: 100%;
  }

  th,
  td {
    overflow-wrap: anywhere;
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }

  button,
  [role="button"],
  input,
  select,
  textarea,
  .btn,
  .topbar-link,
  .nav a,
  .logout,
  .cap-btn,
  .mobile-tab-btn,
  .saved-team-action,
  .copy-btn {
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .section-head {
    gap: 12px !important;
  }

  .section-title,
  .store-hero-title,
  .sub-hero h1,
  .hero h1,
  .hero-copy h1 {
    overflow-wrap: anywhere;
  }

  .topbar {
    gap: 10px !important;
    padding: 10px 14px !important;
  }

  .topbar img,
  .topbar-logo img,
  .topbar-brand img {
    max-height: 32px;
  }

  .topbar-links,
  .topbar-actions,
  .topbar .right {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .topbar-link,
  .cap-btn {
    padding-inline: 11px !important;
    letter-spacing: .04em !important;
  }

  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .site-footer-nav {
    gap: 8px 12px;
  }

  .auth-overlay,
  .modal {
    padding: 12px !important;
  }

  .auth-modal,
  .profile-modal,
  .modal-card,
  .edit-card {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 14px !important;
  }

  .modal-body,
  #authModal .modal-body {
    padding: 18px !important;
  }

  .grid,
  .trust-grid,
  .contact-grid,
  .plans,
  .pay-methods,
  .tools-grid,
  .maker-grid,
  .dashboard-grid,
  .split {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .wrap {
    width: min(100% - 24px, 1440px) !important;
  }

  .hero {
    padding-top: 92px !important;
    padding-bottom: 44px !important;
  }

  .hero-inner,
  .hero-copy,
  .hero-actions,
  .section-head,
  .panel-head,
  .saved-teams-head,
  .player-slot-header,
  .rowform {
    min-width: 0;
  }

  .hero-actions,
  .tool-actions,
  .edit-actions,
  .card .actions,
  .rowform {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .hero-actions .btn,
  .tool-actions .btn,
  .edit-actions button,
  .card .actions a,
  .card .actions button,
  .rowform button,
  .rowform input,
  .rowform select {
    width: 100%;
  }

  .tool-card,
  .plan-card,
  .pay-card,
  .card,
  .panel,
  .metric,
  section {
    border-radius: 12px !important;
  }

  .tool-card {
    min-height: 0 !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .tool-card h2,
  .section-title {
    letter-spacing: .02em !important;
  }

  .tool-card p,
  .section-desc,
  .sub-hero p,
  .elite-note,
  .form-sub,
  .store-hero-sub {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .game-grid,
  .field-grid,
  .form-two-col,
  .edit-grid {
    grid-template-columns: 1fr !important;
  }

  .game-card {
    padding: 14px 12px !important;
  }

  .game-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 7px !important;
  }

  .card,
  .panel,
  .metric,
  .trust-card,
  .contact-card,
  .plan-card,
  .pay-card,
  .form-panel {
    padding: 14px !important;
  }

  .saved-team-row,
  .player-slot {
    padding: 12px !important;
  }

  .saved-team-row,
  .players-header,
  .player-slot-header,
  .share-row {
    flex-wrap: wrap;
  }

  .saved-team-actions {
    width: 100%;
  }

  .saved-team-action {
    flex: 1 1 0;
    text-align: center;
  }

  .controls {
    padding: 10px !important;
  }

  .control-section {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  .zoom-controls,
  .so-zoom-controls {
    right: 8px !important;
    bottom: 8px !important;
    transform: scale(.92);
    transform-origin: bottom right;
  }

  .notif-panel {
    position: fixed !important;
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .wrap {
    width: min(100% - 18px, 1440px) !important;
  }

  .topbar-link,
  .cap-btn,
  .btn,
  .btn-submit,
  .mobile-tab-btn {
    font-size: 11px !important;
  }

  .hero-tag,
  .eyebrow,
  .section-tag,
  .tool-kicker,
  .plan-tag,
  .feature-pill {
    letter-spacing: .12em !important;
  }

  .hero-stats,
  .store-card-footer,
  .panel-head {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .creator-card {
    min-height: 118px !important;
    padding: 14px !important;
  }

  .hero-studio-visual {
    min-height: min(520px, 72vh) !important;
  }

  .hero-studio-visual .creator-card {
    width: min(86%, 380px) !important;
    min-height: min(430px, 62vh) !important;
    padding: 18px !important;
  }

  .creator-card-title {
    font-size: clamp(23px, 10vw, 36px) !important;
  }

  .elite-plans,
  .pay-methods,
  .preset-row {
    grid-template-columns: 1fr !important;
  }

  .canvas-size-toggle {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .canvas-size-toggle .cs-tab {
    min-width: 132px !important;
  }
}

@media (max-width: 390px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .topbar {
    padding-inline: 10px !important;
  }

  .topbar-link,
  .cap-btn,
  .btn,
  .btn-submit {
    padding-inline: 9px !important;
  }

  .hero h1,
  .hero-copy h1,
  .sub-hero h1 {
    font-size: clamp(34px, 15vw, 52px) !important;
  }

  .hero-copy h1 {
    font-family: 'Anton', var(--display), Impact, sans-serif !important;
    font-size: clamp(42px, 12.4vw, 62px) !important;
    line-height: .92 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  .section-title,
  .store-hero-title {
    font-size: clamp(32px, 13vw, 46px) !important;
  }

  .card,
  .panel,
  .metric,
  .tool-card,
  .plan-card,
  .pay-card,
  .form-panel {
    padding: 12px !important;
  }

  .maker-mobile-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  .maker-mobile-bar .btn:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .topbar img,
  .topbar-logo img,
  .topbar-brand img,
  .logo img {
    max-height: 28px !important;
  }

  .topbar-link,
  .cap-btn,
  .btn,
  .btn-submit,
  .saved-team-action {
    letter-spacing: .02em !important;
  }

  .hero {
    padding-top: 84px !important;
  }

  .tool-title-row,
  .saved-team-row {
    align-items: flex-start !important;
  }

  .elite-badge,
  .badge,
  .feature-pill {
    white-space: normal !important;
  }
}

@media (max-width: 1024px) {
  .home-team-track,
  .zx-verify-logo,
  .zx-verify-bar::after,
  .progress-fill::after,
  .preview-logo,
  #wheelPanel::before,
  #wheelPanel::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

@media (max-width: 640px) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .topbar,
  .nav,
  .side,
  .top,
  .mobile-drawer,
  .mobile-drawer-backdrop,
  .auth-overlay,
  .zx-verify-overlay,
  .so-zoom-controls,
  .zoom-controls {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  .hero-bg,
  .hero-grid-lines {
    background-attachment: scroll !important;
  }

  .hero-studio-visual {
    min-height: 330px !important;
    height: 330px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    perspective: none !important;
  }

  .creator-carousel {
    width: min(100%, 360px) !important;
    height: 310px !important;
    min-height: 310px !important;
    transform-style: flat !important;
  }

  .creator-carousel::before {
    inset: 8% 9% !important;
    opacity: .45 !important;
  }

  .hero-studio-visual .creator-card {
    width: min(64%, 230px) !important;
    min-height: 258px !important;
    height: 258px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    animation: mobileCreatorCardFlow 9s ease-in-out infinite !important;
    filter: none !important;
    will-change: transform, opacity !important;
  }

  .hero-studio-visual .creator-card:nth-child(1) {
    animation-delay: 0s !important;
  }

  .hero-studio-visual .creator-card:nth-child(2) {
    animation-delay: -3s !important;
  }

  .hero-studio-visual .creator-card:nth-child(3) {
    animation-delay: -6s !important;
  }

  .hero-studio-visual .creator-card:nth-child(n+4) {
    display: none !important;
  }

  @keyframes mobileCreatorCardFlow {
    0%,
    26% {
      opacity: 1;
      z-index: 5;
      transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg);
    }

    33%,
    59% {
      opacity: .46;
      z-index: 3;
      transform: translate3d(-84%, -50%, 0) scale(.78) rotateZ(-5deg);
    }

    66%,
    92% {
      opacity: .46;
      z-index: 3;
      transform: translate3d(-16%, -50%, 0) scale(.78) rotateZ(5deg);
    }

    100% {
      opacity: 1;
      z-index: 5;
      transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg);
    }
  }

  .hero-studio-visual .creator-card-title {
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  .hero-studio-visual .creator-card-kicker {
    font-size: 9px !important;
    padding: 4px 7px !important;
  }

  .hero-studio-visual .creator-preview {
    min-height: 126px !important;
    margin: 12px 0 !important;
    border-radius: 12px !important;
  }

  .hero-studio-visual .creator-tags {
    gap: 6px !important;
  }

  .hero-studio-visual .creator-tags span {
    font-size: 9px !important;
    padding: 5px 7px !important;
  }

  .hero-studio-visual .creator-card-foot {
    font-size: 10px !important;
  }

  /* [2026-06-03] Esports orgs (.org-track/.org-card*/.org-stat*) + .games-grid
     responsive rules removed — those sections were deleted in the creator-platform
     repositioning. The .game-card* rules below are KEPT (used by the Team Builder
     game-selector at /features/zorx-teams/). See audit 2026-06-03-002. */

  .game-card {
    aspect-ratio: 1 / 1.24 !important;
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .game-card-img {
    opacity: .64 !important;
  }

  .game-title-box {
    font-size: 9px !important;
    padding: 7px 9px !important;
  }

  .game-meta {
    gap: 6px !important;
    font-size: 7px !important;
    letter-spacing: .08em !important;
  }

  .game-meta b {
    font-size: 9px !important;
  }

  #about.cta {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  #about .about-cta-grid {
    gap: 26px !important;
  }

  #about .about-text-content {
    align-items: flex-start !important;
    text-align: left !important;
  }

  #about .section-tag {
    margin-bottom: 12px !important;
    font-size: 9px !important;
  }

  #about .section-title {
    font-size: clamp(34px, 12vw, 46px) !important;
    line-height: .92 !important;
    margin-bottom: 14px !important;
  }

  #about .section-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  #about .about-visual {
    width: min(100%, 280px) !important;
    margin: 0 auto !important;
  }

  #about .about-card {
    max-width: 280px !important;
    box-shadow: 0 22px 56px rgba(0, 0, 0, .62), inset 0 0 48px rgba(170, 255, 20, .08) !important;
  }

  #about .about-card::before {
    inset: 12px !important;
  }

  #about .about-card::after {
    inset: 22px !important;
  }

  #about .about-logo-3d img,
  #about .about-card img {
    width: 124px !important;
  }

  #about .about-card-ring {
    width: 150px !important;
    height: 150px !important;
  }

  #about .about-card-ring-b {
    width: 220px !important;
    height: 220px !important;
  }

  #about .about-card-glow {
    width: 180px !important;
    height: 180px !important;
  }

  #about .about-card-tag {
    bottom: 20px !important;
    font-size: 10px !important;
    letter-spacing: .16em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creator-card:not(.hero-studio-visual .creator-card) {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

}

/* ============================================================
   APP-LIKE MOBILE POLISH (2026-06-02)
   Token-driven refinements layered on top of the existing
   mobile rules above. Uses the shared scale from zorx-ui.css
   so mobile spacing/type feel deliberately compact and
   app-like rather than a shrunken desktop. All gated <=1024px
   to honor the "desktop untouched" boundary.
   ============================================================ */
@media (max-width: 768px) {
  /* Tighter, app-like section rhythm */
  .section,
  .zx-section,
  section {
    padding-block: clamp(var(--sp-8, 40px), 9vw, var(--sp-10, 64px));
  }

  /* Compact premium hero on phones */
  .hero {
    min-height: auto !important;
    padding-top: 104px !important;
    padding-bottom: var(--sp-9, 48px) !important;
  }

  .hero-actions .btn,
  .hero-actions .btn-lg {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Card grids collapse to a single comfortable column */
  .tools-grid,
  .featured-teams {
    gap: var(--sp-3, 12px) !important;
  }
}

/* Smoother, more premium slide-in drawer */
@media (max-width: 1024px) {
  .mobile-drawer {
    transition: transform var(--dur-med, .26s) var(--ease, cubic-bezier(.22,.61,.36,1)) !important;
  }

  .mobile-drawer-links a {
    min-height: 48px;
    border-radius: var(--r-sm, 8px);
  }
}