.mobile-only { display: none; }
.desktop-only { display: flex; }
.mobile-menu { display: none; }
.mobile-menu-overlay { display: none; }

@media (max-width: 992px) {
  /* Hide desktop header bits on mobile */
  .desktop-only { display: none !important; }
  .radio-section-inside,
  .social-links,
  .dropdown { display: none !important; }

  /* Show hamburger */
  .mobile-only { display: inline-flex !important; }
  .mobile-menu-btn {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.4); color: #fff; align-items: center; justify-content: center;
  }
  .mobile-menu-btn i { font-size: 18px; }

  /* Offcanvas menu */
  .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; z-index: 50000; }
  .mobile-menu-overlay.open { display: block; }

  .mobile-menu { position: fixed; top: 0; right: -340px; width: 320px; height: 100vh; background: #000; z-index: 50010;
    border-left: 1px solid rgba(255,255,255,0.1); transition: right .3s ease; display: flex; flex-direction: column; }
  .mobile-menu.open { right: 0; }

  .mm-header { display: flex; align-items: center; gap: 10px; padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .mm-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #ffc107; }
  .mm-user { display: flex; flex-direction: column; }
  .mm-nickname { color: #ffc107; font-weight: 400; line-height: 1.1; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
  .mm-nickname:hover { color: #ffc107; text-decoration: none; }
  /* credits moved below header */
  .mm-close { margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,0.2); color:#fff; width: 32px; height: 32px; border-radius: 8px; }

  .mm-list { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
  .mm-item { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); font-weight: 400; }
  .mm-item:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,0.08); }
  .mm-item i { width: 18px; color: #ffc107; }

  /* stats block */
  .mm-stats { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .mm-stat { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px; }
  .mm-stat i { color: #ffc107; }
  .mm-stat-label { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
  .mm-stat-value { color: #fff; margin-left: auto; font-weight: 400; }

  /* social icons */
  .mm-social { margin-top: auto; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 10px; }
  .mm-social a { width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; color: #ffc107; background: rgba(255,255,255,0.04); text-decoration: none; }
  .mm-social a:hover { background: rgba(255,255,255,0.08); color: #ffc107; }
}

/* Extra-narrow mobile hard overrides */
@media (min-width: 320px) and (max-width: 480px) {
  header.main-header .dropdown,
  header.main-header .radio-section-inside,
  header.main-header .social-links,
  header.main-header .btx,
  header.main-header .credits-count { display: none !important; }

  header.main-header .mobile-menu-btn { display: inline-flex !important; }
  header.main-header .mobile-only { display: inline-flex !important; }
  header.main-header .desktop-only { display: none !important; }
  header.main-header .logo { margin-left: 0 !important; }
  header:not(.main-header) { padding-left: 0 !important; }
  header:not(.main-header) .logo { margin-left: 0 !important; }
  header:not(.main-header) .logo img { height: 28px; }
}

/* Generic mobile adjustments (all pages) */
@media (max-width: 992px) {
  header:not(.main-header) { padding-left: 0 !important; }
  header:not(.main-header) .logo { margin-left: 0 !important; }
  header:not(.main-header) .logo img { height: 30px; }
}