/* CABAL PIECE — mobile + iPhone (14 Pro Max 430x932) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(0, 240, 255, 0.55);
  border-radius: 10px;
  background: rgba(3, 8, 20, 0.85);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
  cursor: pointer;
  z-index: 130;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #e8fbff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 90;
}

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .legacy-header {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .header-inner {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 4px;
  }
  .brand-wrapper { margin-left: 0 !important; }
  .header-logo-img { height: 52px; }
  .main-nav {
    position: fixed;
    top: calc(62px + env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 14px;
    background: rgba(4, 10, 24, 0.96);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    z-index: 120;
  }
  body.nav-open .main-nav { display: flex !important; }
  body.nav-open .nav-backdrop { display: block; }
  .main-nav .nav-link,
  .main-nav > .nav-link {
    display: none;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 14px;
    font-size: 1rem;
  }
  body.nav-open .main-nav .nav-link,
  body.nav-open .main-nav > .nav-link { display: flex !important; }
  .header-session,
  .header-actions {
    width: 100%;
    margin: 8px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(0, 240, 255, 0.22);
    border-left: none;
    justify-content: stretch;
    flex-wrap: wrap;
  }
  .header-session .btn-shimmer,
  .header-actions .btn-shimmer,
  .header-sair-btn,
  .header-user-btn {
    flex: 1 1 120px;
    min-height: 48px;
  }
}

@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .container { padding: 0 16px; }
  .hero-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding: calc(88px + env(safe-area-inset-top, 0px)) 0 calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .hero-bg-img {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    animation: none !important;
    background-position: 58% 12% !important;
    background-size: cover !important;
  }
  .hero-logo-large { width: min(300px, 72vw); margin-bottom: 1rem; }
  .hero-main-title { font-size: clamp(1.5rem, 6.4vw, 2.15rem) !important; }
  .hero-btn-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 4px;
  }
  .hero-btn-group .btn-shimmer,
  .btn-shimmer {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
  }
  input, select, textarea { font-size: 16px !important; }
  .signup-promo-card { flex-direction: column; text-align: center; gap: 16px; }
  .stats-grid,
  .diff-grid,
  .vip-v2-grid,
  .package-grid,
  .download-grid,
  .donate-grid,
  .rank-cards,
  .feature-grid {
    grid-template-columns: 1fr !important;
  }
  .account-live-grid { grid-template-columns: 1fr !important; }
  .account-hub-hero,
  .account-characters-heading { flex-direction: column; align-items: flex-start; }
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .glass-panel, .package-card { margin-left: 0; margin-right: 0; }
  .modal, .modal-box, .auth-modal, .panel-modal {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin: 12px auto;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  .header-logo-img { height: 44px; }
  .section-padding { padding: 2.2rem 0; }
  .ticker-track { font-size: 0.72rem; gap: 1.5rem; }
  .package-card, .vip-card, .rank-card-v2 { padding: 1rem; }
  .hero-btn-group .btn-shimmer { font-size: 0.95rem; padding: 14px 16px; }
  .carousel-wrapper {
    touch-action: pan-y;
    overflow: hidden;
  }
  .carousel-nav-btn {
    width: 52px !important;
    height: 52px !important;
    opacity: 0.95;
  }
  .mobile-h-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    gap: 14px !important;
    padding: 10px 4px 20px;
    touch-action: pan-x pan-y;
    grid-template-columns: none !important;
  }
  .mobile-h-scroll > * {
    flex: 0 0 min(84vw, 360px) !important;
    width: min(84vw, 360px) !important;
    max-width: min(84vw, 360px) !important;
    scroll-snap-align: center;
    grid-column: auto !important;
    margin: 0 !important;
  }
}

/* iPhone 14 Pro Max — 430 x 932 @3x */
@media only screen and (min-device-width: 428px) and (max-device-width: 430px) and (min-device-height: 926px) and (max-device-height: 932px) and (-webkit-min-device-pixel-ratio: 3) {
  .legacy-header { min-height: 64px; }
  .header-logo-img { height: 48px; }
  .hero-logo-large { width: 318px; }
  .hero-main-title { font-size: 2.05rem !important; letter-spacing: 0.02em; }
  .hero-bg-img { background-position: 60% 10% !important; }
  .hero-btn-group { max-width: 380px; margin: 0 auto; }
  .container { padding-left: 20px; padding-right: 20px; }
  .nav-toggle { width: 48px; height: 48px; }
}

@media (hover: none) {
  .glass-panel:hover, .package-card:hover {
    transform: none !important;
  }
}