/* ==========================================================================
   KUBUS.LOL — RESPONSIVE MEDIA QUERIES
   Mobile, Tablet & Ultra-Wide screen adaptations
   ========================================================================== */

@media (max-width: 768px) {
  .top-nav {
    padding: 12px 16px;
  }

  .music-player-bar {
    max-width: 260px;
    height: 46px;
    padding: 4px 10px 4px 6px;
    gap: 6px;
  }

  .mute-toggle-btn {
    width: 34px;
    height: 34px;
  }

  .visualizer-container {
    width: 36px;
    height: 26px;
  }

  .volume-control-wrap,
  .player-divider,
  .track-time {
    display: none;
  }

  .track-center-deck {
    max-width: 105px;
    min-width: 70px;
  }

  .action-btn span:not(.action-icon) {
    display: none;
  }

  .action-btn {
    padding: 8px;
    width: 42px;
    height: 42px;
    justify-content: center;
  }

  .main-wrapper {
    padding: 76px 14px 20px;
  }

  .profile-card {
    max-width: 100%;
  }

  .card-inner {
    padding: 20px 16px 18px;
    gap: 16px;
  }

  .username-text {
    font-size: 1.85rem;
  }

  .socials-grid {
    grid-template-columns: 1fr;
  }

  .bg-drawer {
    right: 12px;
    top: 66px;
    width: calc(100vw - 24px);
  }
}

@media (max-width: 420px) {
  .music-player-bar {
    max-width: 190px;
  }

  .track-center-deck {
    max-width: 75px;
  }

  .badges-row {
    gap: 5px;
  }

  .custom-badge {
    font-size: 0.68rem;
    padding: 3px 8px;
  }
}