/* ==========================================================
   responsive.css — Ajustes para tablet e celular
   No mobile, a .tab-bar vira uma navegação inferior fixa,
   no estilo dos apps de streaming (ex.: Lazer Play).
   ========================================================== */

@media (max-width: 900px) {
  .app-topbar { flex-wrap: wrap; row-gap: 8px; }
  .search-wrap { order: 3; max-width: 100%; margin-left: 0; flex-basis: 100%; }
  .profile-pill { margin-left: auto; }

  .item-grid.poster-mode { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .item-grid.list-mode { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  .series-header { flex-direction: column; }
  .series-cover { width: 130px; }

  .next-episode-banner { left: 16px; right: 16px; max-width: none; bottom: 16px; }
}

/* ---------- Navegação inferior (celular) ---------- */

@media (max-width: 680px) {
  #screen-app { position: relative; }

  .tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    justify-content: space-around;
    gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(11, 15, 24, 0.94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    border-bottom: none;
    overflow-x: visible;
  }

  .tab-btn {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    background: none;
    border: none;
    border-radius: 12px;
    padding: 7px 2px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-faint);
    box-shadow: none;
  }

  .tab-btn:hover { transform: none; }

  .tab-btn .tab-icon { font-size: 18px; }

  .tab-btn.active {
    background: none;
    color: var(--blue-bright);
    box-shadow: none;
    animation: none;
  }

  .tab-btn.active .tab-icon {
    filter: drop-shadow(0 0 6px rgba(126, 200, 245, 0.65));
    animation: pop-in 0.25s var(--ease);
  }

  #content-area {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) {
  .app-topbar { padding: 10px 14px; gap: 10px; }
  .app-topbar .brand-text { display: none; }
  .app-topbar img.logo { height: 24px; }
  #content-area { padding: 14px; }

  .category-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .item-grid.poster-mode { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .item-grid.list-mode { grid-template-columns: repeat(2, 1fr); }

  .profile-grid { gap: 16px; }
  .profile-avatar { width: 74px; height: 74px; font-size: 26px; border-radius: 18px; }

  .login-card { padding: 22px 20px; }
  .apk-card { padding: 10px 14px; }
  .apk-card-icon { width: 34px; height: 34px; }

  .modal-box { padding: 18px; max-height: 88vh; border-radius: var(--radius); }
  .detail-header { flex-direction: column; }
  .detail-header img { width: 100%; max-width: 180px; }

  .player-topbar { padding: 10px 12px; gap: 8px; }
  .player-topbar #now-playing-title { font-size: 12px; }
  .player-topbar .icon-btn { width: 32px; height: 32px; font-size: 14px; }

  .shortcuts-hint { display: none; }
}

@media (max-width: 380px) {
  .item-grid.poster-mode { grid-template-columns: repeat(2, 1fr); }
  .tab-btn { font-size: 9px; }
  .tab-btn .tab-icon { font-size: 17px; }
  .apk-card-text small { display: none; }
}

/* Landscape em celular: prioriza o player, reduz UI ao redor */
@media (max-height: 420px) and (orientation: landscape) {
  .tab-bar { display: none; }
  #content-area { padding: 10px 10px 10px; }
}

/* Toques: sem hover, então elementos ficam sempre visíveis/confortáveis */
@media (hover: none) and (pointer: coarse) {
  .tab-btn, .category-card, .media-card, .icon-text-btn, .apk-card { -webkit-tap-highlight-color: transparent; }
  .media-card:active { transform: scale(0.98); }
  .apk-card:active { transform: scale(0.98); }
}