/* =============================================================
   Mobile Polish v344 — camada final de celular e tablet
   Carregada por último (wp_head prioridade 99) para vencer
   empates de cascata sem editar os arquivos originais.
   Tudo aqui vive dentro de @media: o computador não muda nada.
   ============================================================= */

/* ---------- 1. Leitura dos cartões de jogos no celular ----------
   A camada antiga (mobile-experience) reduzia títulos a 10px e
   detalhes a 8px. Aqui sobem os pisos de leitura sem alterar a
   grade de 3 colunas que já funciona. */
@media (max-width: 768px) {
    .bs-game-card-title,
    .game-card-title {
        font-size: 11px !important;
        line-height: 1.35 !important;
        -webkit-line-clamp: 2 !important;
    }
    .bs-game-card-details span,
    .game-card-detail {
        font-size: 9.5px !important;
    }
    .bs-game-card-details span i,
    .game-card-detail i {
        font-size: 9px !important;
    }
    .bs-cover-badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
    }
    /* Botão de download com área de toque confortável */
    .bs-dl-btn,
    .card-dl-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Telas bem estreitas: 2 colunas em vez de 3 para manter leitura.
   O :not() iguala a especificidade da camada antiga (420px). */
@media (max-width: 380px) {
    .bs-games-grid:not(.bs-premium-grid),
    .games-grid:not(.bs-premium-grid) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* A camada antiga derrubava o título para 9px abaixo de 420px */
@media (max-width: 420px) {
    .bs-game-card-title,
    .game-card-title {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }
}

/* ---------- 2. Conta do membro: pisos de leitura ----------
   Navegação, links e rótulos estavam entre 8 e 11px. */
@media (max-width: 768px) {
    .mc182 .mc-tabs .mc182-redeem { font-size: 12px !important; }
    .mc182 .mc-tab .mc-tab-badge { font-size: 10px !important; }
    .mc182-content-head > span { font-size: 10.5px !important; }
    .mc182 .member-section-label > span { font-size: 10px !important; }
    .mc182 .member-section-label h2 { font-size: 13px !important; }

    .mc182 .mc-card-head a,
    .mc182 .mc-sig-link,
    .mc182 .mc-card-head-link {
        font-size: 12px !important;
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }

    .mc182 .mc-feed-body .title { font-size: 12.5px !important; }
    .mc182 .mc-feed-time { font-size: 10px !important; max-width: 90px; }

    .mc182 .mc-trophy .name { font-size: 12px !important; }
    .mc182 .mc-trophy .desc { font-size: 10.5px !important; }
    .mc182 .mc-trophy-tier-label { font-size: 9.5px !important; }

    .mc182 .mc-form-group label { font-size: 12.5px !important; }
    .mc182 .mc-invite p { font-size: 12px !important; }
    .mc182 .mc-invite-pill { font-size: 11px !important; }
    .mc182 .mc-completion-text p { font-size: 12px !important; }
    .mc182 .mc-streak-body > span { font-size: 11px !important; }
    .mc182 .mc-rank-link,
    .mc182 .mc-rank-top { font-size: 11px !important; }
}

/* ---------- 3. Campos de formulário: sem zoom automático ----------
   iOS dá zoom sozinho quando o campo tem menos de 16px. */
@media (max-width: 768px) {
    .mc182 .mc-card-body input:not([type=checkbox]):not([type=radio]),
    .mc182 .mc-card-body select,
    .mc182 .mc-card-body textarea,
    .mc182 .mc-share-link input,
    body #bs-support-all .bshall-find input,
    .bs-avp-sheet input,
    .bs-avp-sheet select,
    .bs-avp-sheet textarea {
        font-size: 16px !important;
    }
}

/* ---------- 4. Alvos de toque confortáveis (mínimo ~40px) ---------- */
@media (max-width: 768px) {
    /* Avisos Oficiais: fechar painel e folha de composição */
    .bs-avp-close,
    .bs-avp-sheetclose {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    .bs-avp-filter {
        min-height: 40px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    /* Modal de troféu */
    .mc280-close {
        width: 44px !important;
        height: 44px !important;
    }
    /* "Marcar todas como lidas" no sino de notificações */
    header.bs-header button[onclick="markAllRead()"] {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* ---------- 5. Desempenho: efeitos mais leves no celular ----------
   Desfoques empilhados e animações infinitas custam caro em
   aparelhos modestos; reduzimos sem apagar a identidade visual. */
@media (max-width: 900px) {
    header.bs-header .bs-header-main,
    header.bs-header.scrolled .bs-header-main {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
    /* Fundo do menu aberto: desfoque mais barato */
    header.bs-header .bs-nav-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(6, 10, 18, 0.72) !important;
    }
}

/* Respeito a quem pede menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
    header.bs-header *,
    header.bs-header *::before,
    header.bs-header *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- 6. Proteções contra estouro de largura ---------- */
@media (max-width: 768px) {
    /* Slider legado tinha largura fixa de 500px */
    #slider ul li {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Nomes longos de jogos/membros não empurram a tela */
    .bsp-card-body h3,
    .bs-game-card-title,
    .game-card-title,
    .mc182 .mc-feed-body .title,
    .pfpub .pf-name,
    .mc182-identity-name {
        overflow-wrap: anywhere;
    }
}

/* ---------- 7. Menu aberto: respiro na área segura do aparelho ---------- */
@media (max-width: 900px) {
    header.bs-header .bs-navbar {
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
}