/* =============================================
   VIP YONO GAMES — Responsive (Mobile-First)
   ============================================= */

/* --- Global overflow guard (applied first) --- */
html, body { overflow-x: hidden !important; }
img, video, iframe, table { max-width: 100%; }

/* --- Base: Mobile (< 480px) already handled by fluid sizing --- */

/* --- Small Mobile (max 479px) --- */
@media (max-width: 479px) {
  .hero { min-height: auto; padding: 70px 0 50px; }
  .hero h1 { font-size: 28px; }
  .hero-banner-wrap { border-radius: 10px; margin-bottom: 20px; }
  .hero-banner-img { max-height: 180px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid var(--border-color); }
  .stat-item { padding: 20px 14px; }
  .stat-number { font-size: 28px; }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .bonus-banner { flex-direction: column; text-align: center; padding: 28px 20px; }
  .trust-badges { flex-direction: column; }
  .trust-badge { min-width: auto; }
  .prose-section { padding: 24px 18px; }
  .contact-form { padding: 24px 18px; }
  .filter-bar { gap: 6px; }
  .filter-tab { padding: 7px 14px; font-size: 13px; }
  .section { padding: 50px 0; }
  .section-title { font-size: 24px; }
  .page-hero { padding: 40px 0 30px; }
}

/* --- Mobile (480px - 767px) --- */
@media (max-width: 767px) {
  /* Nav */
  .nav-menu { display: none; }
  .hamburger { display: flex; }
  .mobile-nav { display: flex; }

  /* Hero */
  .hero { min-height: auto; padding: 80px 0 60px; }
  .coin { display: none; }
  .coin:nth-child(1),
  .coin:nth-child(4) { display: block; opacity: 0.3; }
  .hero-desc { font-size: 15px; }
  .hero-trust { gap: 14px; }

  /* Banner image */
  .hero-banner-wrap { border-radius: 12px; margin-bottom: 28px; }
  .hero-banner-img { max-height: 220px; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-top: 1px solid var(--border-color); }

  /* Games grid */
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* Categories */
  .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-card { padding: 24px 16px; }
  .category-icon { font-size: 36px; }

  /* Steps */
  .steps-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; }

  /* Bonus banner */
  .bonus-banner { flex-direction: column; text-align: center; padding: 30px 24px; }

  /* Section */
  .section { padding: 60px 0; }

  /* Back to top */
  #back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 18px; }

  /* Breadcrumb */
  .breadcrumb { font-size: 12px; }
}

/* --- Tablet (768px - 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Nav */
  .nav-menu { gap: 2px; }
  .nav-link { font-size: 13px; padding: 7px 10px; }

  /* Hero */
  .hero { padding: 90px 0 80px; }
  .hero-banner-img { max-height: 320px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(4, 1fr); }

  /* Games grid */
  .games-grid { grid-template-columns: repeat(3, 1fr); }

  /* Categories */
  .categories-grid { grid-template-columns: repeat(3, 1fr); }

  /* Steps */
  .steps-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --- Small Tablet (768px - 899px) --- */
@media (min-width: 768px) and (max-width: 899px) {
  .nav-menu { display: none; }
  .hamburger { display: flex; }
  .mobile-nav { display: flex; }
  .games-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
  .hamburger { display: none !important; }
  .mobile-nav { display: none !important; }
  .nav-overlay { display: none !important; }
}

/* --- Large Desktop (1280px+) --- */
@media (min-width: 1280px) {
  .games-grid { grid-template-columns: repeat(5, 1fr); }
  .categories-grid { grid-template-columns: repeat(5, 1fr); }
}

/* --- Wide Screen (1440px+) --- */
@media (min-width: 1440px) {
  :root { --container-width: 1380px; }
  .hero h1 { font-size: 72px; }
}

/* --- Print (basic) --- */
@media print {
  #header, .ticker-bar, #back-to-top, footer, .hero-actions, .btn-download { display: none; }
  body { background: white; color: black; }
  .game-card { border: 1px solid #ccc; break-inside: avoid; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-content > * { opacity: 1; transform: none; }
  .coin { animation: none; }
  .ticker-content { animation: none; }
  .btn-primary { animation: none; }
}

/* --- High Contrast --- */
@media (prefers-color-scheme: light) {
  /* Site is designed for dark mode; light mode users see intended dark theme */
}

/* --- Touch Device Optimizations --- */
@media (hover: none) and (pointer: coarse) {
  .game-card:hover {
    transform: none;
    animation: none;
  }
  .btn:hover { transform: none; }
  .category-card:hover { transform: none; }
  .nav-link:hover { background: none; }
}

/* --- Landscape Mobile --- */
@media (max-width: 767px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 50px 0 40px; }
  .hero h1 { font-size: 30px; }
  .coin { display: none; }
}

/* --- Container padding on mobile --- */
@media (max-width: 479px) {
  .container { padding: 0 14px; }
}

/* --- Filter bar scroll on mobile --- */
@media (max-width: 639px) {
  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-tab { flex-shrink: 0; }
}

/* --- Game card compact on very small screens --- */
@media (max-width: 360px) {
  .games-grid { grid-template-columns: 1fr; }
  .game-card-title { font-size: 16px; }
  .meta-value { font-size: 13px; }
}