/* ============================================================
   WYDBR – Mobile Fixes
   Breakpoints: ≤767px (phone/tablet), ≤480px (phone small)
   ============================================================ */

/* ── 1. Header ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .header {
    height: 3.75rem;
    padding: 0 1rem;
  }
  .nav { display: none !important; }
  .mobile-menu-btn { display: flex !important; }
  .header-actions .btn-wydbr { display: none !important; }
  .header-actions { gap: 0.5rem; }
}

/* ── 2. Hero / Main layout ──────────────────────────────────── */
@media (max-width: 767px) {
  /* Hide desktop character image */
  .hero-right { display: none !important; }

  /* Hero content takes full width */
  .hero-left {
    width: 100% !important;
    padding: 5rem 1rem 1.5rem !important;
    box-sizing: border-box;
  }

  /* Remove desktop right padding from main-content (sidebar area) */
  .main-content { padding-right: 0 !important; }

  /* Hide sidebar completely */
  .sidebar { display: none !important; }

  /* Hide social-card floating panel */
  .social-card { display: none !important; }
}

/* ── 3. Sword / WYDBR logo container ───────────────────────── */
@media (max-width: 767px) {
  .sword-container {
    width: 100% !important;
    height: auto !important;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
  }
  .status-left {
    max-width: 220px !important;
    height: auto !important;
  }
}

/* ── 4. Mural de Recados ────────────────────────────────────── */
@media (max-width: 767px) {
  .mural-wrap {
    margin-top: 6px !important;
    padding: 10px 12px 4px !important;
  }
  .mural-item-title {
    font-size: 11px !important;
    white-space: normal !important;
  }
  .mural-excerpt { display: none !important; }
  .mural-date-day { font-size: 14px !important; }
}

/* ── 5. Download button ─────────────────────────────────────── */
@media (max-width: 767px) {
  a.btn-wydbr.btn-large[href*="download"] {
    margin-bottom: 24px !important;
    min-height: 48px;
    font-size: 14px !important;
  }
}

/* ── 6. Activities / Calendar ───────────────────────────────── */
@media (max-width: 767px) {
  .act-outer {
    padding: 4.5rem 0 2rem 0 !important;
    min-height: auto !important;
  }
  .act-wrap {
    padding: 12px 10px !important;
  }
  .act-title {
    font-size: 1.5rem !important;
  }
  .act-nav-bar {
    padding: 6px 8px !important;
    gap: 4px;
  }
  .act-nav-btn {
    padding: 6px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    min-height: 40px;
  }
  .act-month-label {
    font-size: 13px !important;
    text-align: center;
  }

  /* Scrollable table wrapper on small screens */
  .act-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .act-table {
    min-width: 500px;
  }
  .act-table thead th {
    padding: 6px 2px !important;
    font-size: 9px !important;
    letter-spacing: 0.3px !important;
  }
  .act-table tbody td {
    padding: 4px 4px !important;
    height: 60px !important;
    min-height: 60px !important;
  }
  .cal-day-num {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }
  .cal-ev-link {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  /* Calendar modal */
  .cal-modal-box {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    max-height: 88vh !important;
    border-radius: 10px !important;
  }
  .cal-modal-title {
    font-size: 1rem !important;
    margin-right: 28px !important;
  }
}

@media (max-width: 480px) {
  /* Ultra compact: table scrolls, reduce header row */
  .act-table thead th {
    font-size: 8px !important;
    padding: 4px 1px !important;
    letter-spacing: 0 !important;
  }
  .act-table tbody td {
    height: 48px !important;
    min-height: 48px !important;
    padding: 3px 2px !important;
  }
  .act-nav-btn span.act-arrow ~ text,
  .act-nav-btn { font-size: 9px !important; padding: 5px 8px !important; }
}

/* ── 7. Events page ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .events-page {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 5.5rem 1rem 2rem !important;
    gap: 1rem !important;
  }
  .events-title {
    font-size: 1.8rem !important;
    text-align: center;
    margin-bottom: 1rem !important;
  }
  .events-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100%;
  }
  .event-card {
    min-height: 180px !important;
    height: 180px !important;
  }
  .event-card:hover .event-description--btn {
    max-height: 100px !important;
  }
}

/* ── 8. Pack / BRCoins page ─────────────────────────────────── */
@media (max-width: 767px) {
  .pack-left { display: none !important; }
  .pack-right {
    width: 100% !important;
    padding: 5rem 1rem 2rem !important;
    box-sizing: border-box;
  }
  .pack-image-container {
    height: 10rem !important;
  }
  .pack-name {
    font-size: 1.5rem !important;
  }
  .pack-description {
    font-size: 0.875rem !important;
  }
  .pack-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .pack-pagination {
    justify-content: center !important;
  }
}

/* ── 9. FAQ / mega-menu ─────────────────────────────────────── */
@media (max-width: 767px) {
  .faq-section,
  .faq-container {
    padding: 5rem 1rem 2rem !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .faq-title { font-size: 1.75rem !important; }
  .faq-question { font-size: 13px !important; padding: 14px 12px !important; }
  .faq-answer { font-size: 12px !important; padding: 10px 12px !important; }
}

/* ── 10. Drawer / FAQ drawer ────────────────────────────────── */
@media (max-width: 767px) {
  .drawer {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    top: 3.75rem !important;
    height: calc(100vh - 3.75rem) !important;
  }
}

/* ── 11. Pages (legal, tutorial, guides) ────────────────────── */
@media (max-width: 767px) {
  .page-section {
    padding: 5rem 0.75rem 2rem !important;
    min-height: auto !important;
  }
  .page-content-wrapper {
    padding: 16px 12px !important;
    border-radius: 6px !important;
  }
  .page-title { font-size: 1.75rem !important; }
}

/* ── 12. Footer ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 1rem !important;
    text-align: center !important;
  }
  .footer-left,
  .footer-right { font-size: 10px !important; }
  .footer-links { gap: 0.75rem !important; }
}

/* ── 13. Touch targets & general readability ────────────────── */
@media (max-width: 767px) {
  .btn-wydbr {
    min-height: 44px;
    touch-action: manipulation;
  }
  a, button { touch-action: manipulation; }
}

/* ── 16. Mobile menu — "Área do Jogador" always visible ─────── */
/*
 * Solution: mobile-menu-actions is now in the HTML ABOVE mobile-nav.
 * Order: header → actions (button) → nav (scrollable).
 * The button appears right below the WYDBR header, always on screen.
 */
@media (max-width: 767px) {
  /* Compact menu container */
  .mobile-menu-content {
    height: calc(var(--real-vh, 1vh) * 100 - 24px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  @supports (height: 100dvh) {
    .mobile-menu-content {
      height: calc(100dvh - 24px) !important;
    }
  }

  /* Compact header */
  .mobile-menu-header {
    min-height: 50px !important;
    padding: 8px 16px !important;
    flex-shrink: 0 !important;
  }
  .mobile-menu-logo {
    font-size: 19px !important;
  }

  /* Actions block — now at top, below header, above nav */
  .mobile-menu-actions {
    flex-shrink: 0 !important;
    padding: 10px 16px !important;
    gap: 8px !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
  }

  /* "Área do Jogador" button — full width, clear touch target */
  .mobile-menu-actions .btn-wydbr {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Nav scrolls the remaining space */
  .mobile-nav {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 12px 16px !important;
    gap: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Compact nav items */
  .mobile-nav-item {
    padding: 12px 14px !important;
    margin-bottom: 2px !important;
    min-height: 44px !important;
  }
  .mobile-nav-item span {
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
  }
}

/* ── 14. Modal (event/calendar) on mobile ───────────────────── */
@media (max-width: 767px) {
  .modal {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    height: 88vh !important;
    max-height: 88vh !important;
    left: 0.75rem !important;
    top: 50% !important;
    margin-left: 0 !important;
    margin-top: -44vh !important;
    border-radius: 10px !important;
  }
}

/* ── 15. Online players badge ───────────────────────────────── */
@media (max-width: 767px) {
  #playersOnlineBox {
    margin-bottom: 4px !important;
  }
  #playersOnlineText {
    font-size: 11px !important;
  }
}