/* ============================================================
   BRAZIL FORCE — RESPONSIVO MOBILE
   Overrides compartilhados para iPhone (Safari iOS) e Android.
   Carregado APÓS o CSS específico de cada página, em todas as
   páginas da aplicação. Não toca em desktop (>=1081px).
   ============================================================ */

/* ---------- Base universal ---------- */
html {
  -webkit-text-size-adjust: 100%; /* impede iOS de inflar texto em landscape */
}
body {
  overflow-x: hidden;
  /* Honra notch / dynamic island do iPhone */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
img, video, iframe { max-width: 100%; }

/* Inputs: font-size >= 16px no iOS evita zoom automático ao focar */
@media (max-width: 1080px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ============================================================
   BREAKPOINT: tablet pequeno / phablet (até 1080px)
   ============================================================ */
@media (max-width: 1080px) {
  /* Container universal */
  .container,
  .nav-inner,
  .auth-nav {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Hero side aside escondido em tablet (já existe em index.css) */
  .hero-aside { display: none; }

  /* Grids principais que viram 1 coluna nesse range */
  .about-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .discord-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}

/* ============================================================
   BREAKPOINT: tablet portrait / mobile grande (até 820px)
   ============================================================ */
@media (max-width: 820px) {
  /* Section padding mais compacto */
  section {
    padding: 64px 0 !important;
    min-height: auto !important;
  }
  .hero { padding: 90px 0 48px !important; }

  /* Section heads */
  .section-head { margin-bottom: 40px !important; }

  /* Tipografia reduz */
  .hero h1 {
    font-size: clamp(34px, 9vw, 56px) !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
  }
  .section-title { font-size: clamp(26px, 6.5vw, 40px) !important; }

  /* Penalties / regras */
  .penalties-grid { grid-template-columns: 1fr !important; }

  /* Roster (membros) */
  .roster-grid { grid-template-columns: 1fr !important; }

  /* Eventos / guias / events grids */
  .events-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .char-grid { grid-template-columns: 1fr !important; }
  .guides-preview-grid { grid-template-columns: 1fr !important; }

  /* Nav padding */
  .nav-inner,
  .auth-nav { padding: 0 18px !important; }
  .auth-nav { padding: 14px 18px !important; }

  /* Conquistas carrossel responsivo */
  .carousel-stage { height: 460px !important; }
  .slide { height: 420px !important; width: min(720px, 86vw) !important; margin-left: calc(min(720px, 86vw) / -2) !important; }
  .slide .meta h3 { font-size: 17px !important; }
  .carousel-head { gap: 14px !important; }

  /* Filters chip strip rola horizontal */
  .filters {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex: 0 0 auto; }
  .filters .chip[style*="margin-left:auto"] { margin-left: 0 !important; }

  /* Hero-row em coluna */
  .hero-row { flex-direction: column; align-items: stretch !important; gap: 14px !important; }
  .hero-row > div:first-child { width: 100%; }
  .hero-row .btn { align-self: flex-start; }

  /* Identity card (perfil) */
  .id-card {
    grid-template-columns: 80px 1fr !important;
    gap: 14px !important;
    padding: 18px !important;
  }
  .id-avatar { width: 80px !important; height: 80px !important; }
  .id-info h2 { font-size: 22px !important; }
  .id-rank {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin-top: 4px;
  }

  /* Perfil tabs scroll */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: 0 0 auto; padding: 12px 16px !important; }

  /* Char card actions */
  .char-actions { flex-direction: row; flex-wrap: wrap; }
  .char-actions .btn { flex: 1 1 calc(50% - 4px); }

  /* Modal padding */
  .modal-backdrop,
  .holo-modal-backdrop { padding: 12px !important; }
  .modal-head,
  .modal-body,
  .modal-foot,
  .holo-modal-head,
  .holo-modal-body,
  .holo-modal-foot { padding-left: 20px !important; padding-right: 20px !important; }
  .modal-head h3 { font-size: 17px !important; }
  .modal { max-height: 92vh !important; }
  .modal-foot { justify-content: stretch !important; }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; text-align: center; }

  /* Footer (index) */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column; gap: 8px !important; text-align: center; }

  /* Hero CTA buttons stack */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; width: 100%; }

  /* CTA final */
  .cta-buttons .btn { width: 100%; justify-content: center; }
  .cta-buttons { flex-direction: column; }

  /* Gallery preview (index) */
  .gallery-preview {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 180px !important;
  }
  .gallery-card.is-hero {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }
}

/* ============================================================
   BREAKPOINT: mobile padrão (até 600px) — iPhone 12/13/14/15,
   Android comum
   ============================================================ */
@media (max-width: 600px) {
  .container,
  .nav-inner,
  .auth-nav { padding-left: 16px !important; padding-right: 16px !important; }
  .auth-nav { padding: 12px 16px !important; }

  /* Nav: brand subtítulo somem, logo menor */
  .brand img,
  .auth-brand img,
  .brand-mark { width: 28px !important; height: 28px !important; }
  .brand .txt,
  .auth-brand .txt,
  .brand-text { font-size: 11px !important; letter-spacing: 1.6px !important; }
  .brand .txt small,
  .auth-brand .txt small,
  .brand-text small { display: none !important; }

  .nav-back,
  .auth-nav .back {
    font-size: 10px !important;
    padding: 8px 12px !important;
    letter-spacing: 1.4px !important;
  }

  /* Hero compactado */
  .hero { padding: 72px 0 36px !important; }
  .ach-hero { padding: 60px 0 30px !important; }

  /* Eyebrow */
  .eyebrow {
    font-size: 9px !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap;
  }
  .eyebrow::before { width: 18px !important; }

  /* Tipografia mobile */
  .hero h1,
  .ach-hero h1 {
    font-size: clamp(28px, 9.5vw, 44px) !important;
    margin-bottom: 12px !important;
  }
  .section-title { font-size: clamp(22px, 7vw, 32px) !important; }
  .hero-sub { font-size: 14px !important; }
  .hero-desc, .hero p { font-size: 14px !important; line-height: 1.5 !important; }
  .section-desc { font-size: 14px !important; }
  .ach-hero p { font-size: 14px !important; }

  /* Cards reduzidos */
  .card { padding: 20px 16px !important; }
  .info-card { padding: 16px !important; }
  .panel,
  .member { padding: 16px !important; }
  .penalty { padding: 20px !important; }
  .rule { padding: 18px !important; gap: 14px !important; }
  .rule-num { font-size: 26px !important; min-width: 42px !important; }
  .rule-text { font-size: 14px !important; }

  /* Botões um pouco mais compactos mas com touch target ok (44px h) */
  .btn {
    padding: 12px 22px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    min-height: 44px;
  }
  .btn-sm { padding: 9px 14px !important; min-height: 36px; }

  /* Member roster */
  .member-top { gap: 12px !important; }
  .member-avatar { width: 54px !important; height: 54px !important; }
  .member-id .name { font-size: 14px !important; }
  .member-id .class { font-size: 10px !important; }

  /* Eventos */
  .event {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .event-date {
    border-right: none !important;
    border-bottom: 1px dashed var(--line);
    padding: 0 0 12px !important;
    text-align: left !important;
    display: flex !important;
    gap: 16px;
    align-items: center;
  }
  .ev-head { padding: 18px 18px 12px !important; }
  .ev-leader { padding: 8px 18px !important; flex-wrap: wrap; }
  .ev-leader-name { font-size: 11px !important; }
  .ev-actions { padding: 12px 18px !important; }
  .ev-actions .btn { flex: 1 1 auto; justify-content: center; }
  .ev-progress .prog-cell { padding: 8px 4px !important; }
  .ev-progress .prog-cell .lbl { font-size: 8px !important; letter-spacing: 1.2px !important; }
  .ev-progress .prog-cell .val { font-size: 12px !important; }
  .ev-title { font-size: 17px !important; }
  .ev-meta { font-size: 10px !important; gap: 8px !important; }

  /* Filters chip */
  .chip { padding: 8px 14px !important; font-size: 10px !important; letter-spacing: 1.5px !important; }

  /* Gallery preview */
  .gallery-preview {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 170px !important;
    gap: 10px !important;
  }
  .gallery-card.is-hero {
    grid-column: auto !important;
    grid-row: span 2 !important;
  }
  .gallery-card-meta { font-size: 11px !important; bottom: 10px !important; left: 12px !important; right: 12px !important; }
  .gallery-card-tag { font-size: 9px !important; }
  .gallery-card.is-hero .gallery-card-title { font-size: 18px !important; }

  /* Conquistas carrossel */
  .carousel-stage {
    height: 360px !important;
    margin: 0 -16px !important;
    padding: 0 16px !important;
  }
  .slide {
    width: min(440px, 88vw) !important;
    margin-left: calc(min(440px, 88vw) / -2) !important;
    height: 320px !important;
    margin-top: -160px !important;
  }
  .slide .meta { left: 16px !important; right: 16px !important; bottom: 16px !important; }
  .slide .meta h3 { font-size: 14px !important; }
  .slide .meta p { font-size: 11px !important; }
  .ctrl { width: 42px !important; height: 42px !important; }
  .ctrl-counter { font-size: 11px !important; min-width: 50px !important; }
  .thumb { width: 52px !important; height: 32px !important; }
  .kbd-hint { font-size: 9px !important; letter-spacing: 1.2px !important; }
  .cta-banner { padding: 28px 18px !important; margin: 40px 0 60px !important; }
  .cta-banner h3 { font-size: 22px !important; }

  /* Footer */
  footer { padding: 40px 0 24px !important; }
  .footer-grid { gap: 20px !important; margin-bottom: 28px !important; }
  .footer-col h4 { font-size: 11px !important; margin-bottom: 12px !important; }
  .footer-bottom { font-size: 10px !important; }

  /* Modal mais agressivo */
  .modal {
    max-width: 100% !important;
    max-height: 96vh !important;
  }
  .modal-head { padding-top: 18px !important; padding-bottom: 14px !important; }
  .modal-body { padding-top: 18px !important; padding-bottom: 18px !important; }
  .modal-foot { padding-top: 14px !important; padding-bottom: 16px !important; }

  /* Auth (login/register) */
  .card.scan,
  .auth-main .card { padding: 32px 22px !important; max-width: 100% !important; }
  .auth-main { padding: 24px 16px !important; }
  .card h1 { font-size: 24px !important; }
  .card .lead { font-size: 14px !important; margin-bottom: 24px !important; }
  .field-row { grid-template-columns: 1fr !important; }
  .role-pick { grid-template-columns: 1fr !important; }
  .faction-pick { grid-template-columns: 1fr !important; }
  .class-pick { grid-template-columns: repeat(3, 1fr) !important; }

  /* Discord stats grid */
  .discord-stats { grid-template-columns: 1fr !important; }

  /* Avatar uploader (perfil) */
  .avatar-upload { flex-direction: column; align-items: stretch; text-align: center; }
  .avatar-preview { margin: 0 auto; }
  .upload-actions { justify-content: center; }

  /* CTA inner */
  .cta-inner h2 { font-size: clamp(28px, 9vw, 44px) !important; }
  .cta-inner p { font-size: 15px !important; margin-bottom: 28px !important; }

  /* Rules grid */
  .rules-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .section-head-sub { margin-top: 48px !important; padding-top: 32px !important; }

  /* Toasts (admin) */
  .holo-toast { width: 100% !important; }
  .holo-toast-stack { top: 12px !important; right: 12px !important; left: 12px !important; }

  /* Search row do admin */
  .search-row { flex-direction: column; align-items: stretch !important; gap: 8px !important; }
  .search-row input,
  .search-row select { width: 100%; }

  /* Admin tables: scroll horizontal — solução simples e robusta */
  .card > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  /* Conquest modal */
  #conquestModal .conq-inner { padding: 20px 16px !important; }
  #conquestModal h3 { font-size: 18px !important; }

  /* Guias news scroll fica menos alto */
  .news-scroll { max-height: 60vh !important; }
  .news-feed { padding: 16px !important; }
  .news-side { padding: 12px !important; }
  .news-terminal-head { font-size: 9px !important; gap: 10px !important; }
  .news-terminal-head .news-stardate { display: none; }
  .guide-post { padding: 14px 4px !important; }
  .guide-post .body h4 { font-size: 14px !important; }
  .guide-post .body p { font-size: 12px !important; }
  .guide-post .stamp { font-size: 10px !important; }
  .guide-post:hover { padding-left: 4px !important; }

  /* Guia preview cards */
  .guide-preview { padding: 18px !important; min-height: auto !important; }
  .guide-preview .guide-title { font-size: 15px !important; }
  .guide-preview .guide-summary { font-size: 13px !important; }

  /* Hero aside já some, mas garantir */
  .hero-aside { display: none !important; }

  /* Form actions (perfil) viram coluna */
  .form-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .form-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   BREAKPOINT: phones pequenos (iPhone SE, até 380px)
   ============================================================ */
@media (max-width: 380px) {
  .container,
  .nav-inner,
  .auth-nav { padding-left: 12px !important; padding-right: 12px !important; }

  .nav { padding: 10px 0 !important; }
  .brand .txt,
  .auth-brand .txt,
  .brand-text { font-size: 10px !important; letter-spacing: 1.4px !important; }
  .nav-back,
  .auth-nav .back {
    padding: 6px 10px !important;
    font-size: 9px !important;
  }

  .hero h1,
  .ach-hero h1 { font-size: clamp(24px, 9vw, 34px) !important; }
  .section-title { font-size: clamp(20px, 7vw, 28px) !important; }

  .btn {
    padding: 11px 18px !important;
    font-size: 11px !important;
    letter-spacing: 1.6px !important;
  }

  .class-pick { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   ORIENTAÇÃO LANDSCAPE no celular — corrige hero
   ============================================================ */
@media (max-width: 920px) and (orientation: landscape) {
  .hero { padding: 60px 0 32px !important; min-height: auto !important; }
  .hero-video { opacity: 0.4; }
}

/* ============================================================
   Mobile nav menu para páginas que NÃO são index.html
   (perfil, eventos, conquistas, guias, admin etc).
   Essas páginas usam .nav-back simples — em mobile, garantir
   que ainda caibam lado a lado e o link de voltar não quebre.
   ============================================================ */
@media (max-width: 480px) {
  .nav-inner { gap: 10px !important; }
  /* Garante que brand-text não force overflow */
  .brand .txt,
  .auth-brand .txt { min-width: 0; }
}

/* ============================================================
   Touch-friendly: aumenta áreas clicáveis pequenas
   ============================================================ */
@media (max-width: 820px) {
  .modal-close,
  .holo-modal .close,
  .modal-close-btn,
  .hero-discord-close {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .ctrl { min-width: 44px; min-height: 44px; }
  .channel { min-height: 36px; }
  .tab { min-height: 44px; }
}

/* ============================================================
   iOS Safari fix: 100vh inclui address bar — usa svh quando
   suportado pra evitar conteúdo cortado em hero full-height
   ============================================================ */
@supports (height: 100svh) {
  @media (max-width: 1080px) {
    .hero { min-height: auto; }
    section { min-height: auto !important; }
  }
}