/* ============================================
   TOTO123 — Responsive Breakpoints
   ============================================ */

/* Tablet */
@media (max-width: 992px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .characters-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile Landscape */
@media (max-width: 768px) {
  :root { --section-pad: 4rem 1.5rem; }

  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 15, 0.97);
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 100;
  }
  .nav-links.open a { font-size: 1.1rem; }
  .nav-hamburger { display: flex; }

  .hero h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  .page-hero { padding: 8rem 1.5rem 3rem; }
  .page-hero h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }

  .features-grid { grid-template-columns: 1fr; }
  .characters-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }

  .ss-card { flex: 0 0 260px; }
  .download-stores { flex-direction: column; align-items: center; }
  .store-btn { width: 100%; max-width: 320px; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* Mobile Portrait */
@media (max-width: 480px) {
  :root { --section-pad: 3rem 1rem; }

  .navbar { padding: 0.8rem 1rem; }
  .nav-logo { font-size: 1.2rem; letter-spacing: 2px; }
  .section-title { font-size: 1.5rem; }
  .section-header { margin-bottom: 2.5rem; }

  .hero-buttons { flex-direction: column; align-items: center; }
  .hero-buttons .btn { width: 100%; justify-content: center; }

  .feature-card { padding: 1.8rem 1.2rem; }
  .char-img { height: 220px; }
  .card-img { height: 160px; }

  .form-input, .form-textarea { font-size: 16px; } /* prevent iOS zoom */
  table { font-size: 0.8rem; }
  th, td { padding: 0.6rem 0.7rem; }
}

/* ============ LOGO RESPONSIVE ============ */
@media (max-width: 768px) {
  .logo-img { height: 32px; }
  .navbar.scrolled .logo-img { height: 28px; }
}
@media (max-width: 480px) {
  .logo-img { height: 28px; }
  .navbar.scrolled .logo-img { height: 24px; }
}