/* ============================================================
   P77APP.PRO — Responsive breakpoints (mobile-first)
   ============================================================ */

/* === MOBILE BASE (default, <768px) === */
.pc-head { display: none; }
.wap-head { display: flex; }
.body-welcome { flex-direction: column; text-align: center; }
.welcome-btn { flex-direction: column; }
.feature-row { flex-direction: column; }
.game-grid { grid-template-columns: 1fr 1fr; }

/* Hero chips would overflow narrow viewports — hide until there's room */
.hero-chip { display: none; }
.hero-frame { max-width: 240px; }

/* === TABLET: 768px+ === */
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .game-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-cards { grid-template-columns: repeat(3, 1fr); }
  .stats-strip { grid-template-columns: repeat(4, 1fr); }

  .feature-row { flex-direction: row; }
  .feature-row.reverse { flex-direction: row-reverse; }

  .welcome-btn { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 640px; }
  .welcome-btn a { width: auto; }
  .welcome-btn .btn-primary { flex-basis: 100%; }

  .page-hero h1 { font-size: var(--text-hero); }
}

/* === DESKTOP: 1024px+ === */
@media (min-width: 1024px) {
  .pc-head { display: flex; }
  .wap-head { display: none; }

  .body-welcome {
    flex-direction: row;
    align-items: center;
    text-align: left;
    justify-content: center;
    gap: var(--space-16);
    padding: var(--space-24) var(--space-8);
  }
  .welcome-btn { align-items: flex-start; justify-content: flex-start; }
  .hero-stats { justify-content: flex-start; }
  .hero-chip { display: flex; }
  .hero-frame { max-width: 320px; }

  /* Homepage hero only: 2-column grid — heading+details stacked on the left,
     image spanning both rows on the right (mobile keeps simple DOM-order stacking) */
  #content-home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "heading visual"
      "details visual";
    align-items: center;
  }
  #content-home .hero-heading { grid-area: heading; }
  #content-home .hero-visual { grid-area: visual; }
  #content-home .hero-details { grid-area: details; }

  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .game-grid { grid-template-columns: repeat(4, 1fr); }

  .feature-text h2 { font-size: var(--text-3xl); }
}

/* === LARGE DESKTOP: 1280px+ === */
@media (min-width: 1280px) {
  .section { padding: var(--space-24) 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}