/* ═══════════════════════════════════════════════════════════
   CIFRATURN — MOBILE IMPROVEMENTS PATCH v2.0
   Fixes: XP cortado, nome a fazer wrap, modal compacto,
   espaçamentos, tipografia, pódio, tabela ranking.
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. RANKING — TABELA (lb-row)
   Fix: XP cortado | Nome com wrap feio
───────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Grid da linha: rank | player | xp */
    .lb-row {
        grid-template-columns: 44px 1fr auto !important;
        padding: 12px 14px !important;
        gap: 0 10px !important;
        align-items: center !important;
    }

    /* XP nunca trunca */
    .lb-xp {
        white-space: nowrap !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        color: var(--laranja) !important;
        flex-shrink: 0 !important;
    }

    /* Nome numa linha só, overflow ellipsis */
    .lb-name {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 160px !important;
    }

    /* Avatar um pouco menor */
    .lb-avatar {
        width: 36px !important;
        height: 36px !important;
        margin-right: 10px !important;
        flex-shrink: 0 !important;
    }

    /* Esconder tag/coins nas linhas da tabela */
    .lb-tag,
    .lb-coins {
        display: none !important;
    }

    /* Rank */
    .lb-rank {
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    /* Linha "você" — borda mais visível */
    .lb-row.is-me {
        border-left-width: 5px !important;
        background: rgba(212, 175, 55, 0.07) !important;
    }

    /* Badge ADMIN — menor */
    .lb-row .admin-badge,
    .lb-name .admin-badge {
        font-size: 9px !important;
        padding: 2px 7px !important;
        flex-shrink: 0 !important;
    }

    /* Badge PREMIUM inline */
    .lb-player-info .badge-premium {
        font-size: 9px !important;
        padding: 2px 7px !important;
    }

    /* Subtítulo "PREMIUM" debaixo do nome */
    .lb-player-info {
        min-width: 0 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 480px) {
    .lb-row {
        grid-template-columns: 36px 1fr auto !important;
        padding: 10px 12px !important;
    }

    .lb-name {
        font-size: 12px !important;
        max-width: 120px !important;
    }

    .lb-xp {
        font-size: 12px !important;
    }

    /* Esconder badge premium no ranking pequeno */
    .lb-player-info .badge-premium {
        display: none !important;
    }
}



/* ─────────────────────────────────────────────
   3. MODAL PERFIL PÚBLICO
   Fix: hero mais compacto | stats legíveis
───────────────────────────────────────────────── */
@media (max-width: 480px) {

    #modal-public-profile-box {
        border-radius: 18px !important;
    }

    .pp-hero {
        padding: 28px 16px 20px !important;
    }

    .pp-avatar-row {
        gap: 14px !important;
    }

    /* Avatar do modal público */
    #pp-avatar-ring {
        width: 72px !important;
        height: 72px !important;
        flex-shrink: 0 !important;
    }

    /* Nome */
    #pp-name {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    /* Stats 2x2 */
    .pp-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px 10px !important;
        margin-top: 18px !important;
        padding-top: 16px !important;
    }

    .pp-stat-val {
        font-size: 18px !important;
    }

    .pp-stat-label {
        font-size: 8px !important;
        letter-spacing: 0.6px !important;
    }

    /* Corpo inferior do modal */
    #modal-public-profile-box>div:last-child {
        padding: 16px !important;
    }

    /* Cards borda/conquistas */
    #modal-public-profile-box .section-inner-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}


/* ─────────────────────────────────────────────
   4. HERO DO PERFIL (perfil.html)
   Fix: stats grid mais legível em ecrãs pequenos
───────────────────────────────────────────────── */
@media (max-width: 480px) {

    .profile-stats-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 16px !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    .pstat {
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
        align-items: center !important;
    }

    .pstat-val {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    .pstat-label {
        font-size: 9px !important;
        letter-spacing: 0.6px !important;
    }

    /* Tag row centrada */
    .profile-tag-row {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .profile-name {
        font-size: 20px !important;
        text-align: center !important;
    }
}


/* ─────────────────────────────────────────────
   5. BOTTOM NAV
   Fix: espaçamento e hit-targets maiores
───────────────────────────────────────────────── */
@media (max-width: 768px) {

    .bottom-nav {
        padding: 6px 0 max(10px, env(safe-area-inset-bottom)) !important;
    }

    .bnav-btn {
        padding: 6px 8px !important;
        min-width: 48px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
        gap: 2px !important;
    }

    .bnav-btn i {
        font-size: 19px !important;
    }

    /* Highlight activo mais suave */
    .bnav-btn.active {
        background: rgba(212, 175, 55, 0.12) !important;
        color: var(--laranja) !important;
    }
}


/* ─────────────────────────────────────────────
   6. LOJA — CARDS
   Fix: cards a 2 colunas sem estouro
───────────────────────────────────────────────── */
@media (max-width: 480px) {

    .store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .card-preview {
        padding: 14px 10px 8px !important;
        min-height: 76px !important;
    }

    .card-body {
        padding: 0 10px 8px !important;
    }

    .card-name {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .card-desc {
        font-size: 11px !important;
        /* limitar a 2 linhas */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .card-footer {
        padding: 8px 10px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .btn-buy,
    .btn-equip-store {
        padding: 7px 10px !important;
        font-size: 11px !important;
        width: 100% !important;
    }

    .card-price {
        font-size: 12px !important;
    }
}


/* ─────────────────────────────────────────────
   7. SECTION CARDS — GERAL
   Fix: padding mais justo em mobile
───────────────────────────────────────────────── */
@media (max-width: 480px) {

    .section-card {
        padding: 14px 14px !important;
        border-radius: 14px !important;
    }

    .section-card-title {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    /* Earn grid: 1 coluna */
    .earn-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .earn-card {
        padding: 12px !important;
    }

    .earn-icon {
        font-size: 22px !important;
    }
}


/* ─────────────────────────────────────────────
   8. HEADER MOBILE
   Fix: logo + moedas + ações sem apertar
───────────────────────────────────────────────── */
@media (max-width: 380px) {

    /* Estilos já cobertos pelo media query de 768px abaixo, mas ajustados para ecrãs minúsculos */
    .logo h1 {
        font-size: 18px !important;
    }
}

/* ─────────────────────────────────────────────
   8.5 HEADER MOBILE (GERAL)
   Fix: logo esquerda, avatar direita, busca compacta
───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header-container {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        padding: 8px 12px !important;
        align-items: center !important;
        gap: 6px 12px !important;
    }

    .logo-area {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }

    .user-area {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
    }

    .search-area {
        grid-column: 1 / span 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
    }

    .search-box {
        height: 40px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .search-box input {
        height: 100% !important;
        padding-left: 14px !important;
        font-size: 14px !important;
        color: white !important;
    }

    .search-btn {
        width: 40px !important;
        height: 100% !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }
}


/* ─────────────────────────────────────────────
   9. TABS BAR
   Fix: sem scrollbar visível, tabs mais compactas
───────────────────────────────────────────────── */
@media (max-width: 480px) {

    .profile-tabs-bar {
        padding: 0 6px !important;
    }

    .ptab {
        padding: 11px 11px !important;
        font-size: 11px !important;
        gap: 0 !important;
    }

    /* Esconder ícones nas tabs em ecrãs muito pequenos */
    .ptab i {
        display: none !important;
    }
}


/* ─────────────────────────────────────────────
   10. ANTI-OVERFLOW GLOBAL
   Garantia final contra scroll horizontal
───────────────────────────────────────────────── */
html,
body {
    overflow-x: hidden !important;
}

@media (max-width: 768px) {

    main,
    .tab-panel,
    .section-card,
    .profile-hero,
    .profile-hero-inner {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Deals: scroll interno, não a página toda */
    .deals-wrap {
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .deals-wrap::-webkit-scrollbar {
        display: none;
    }
}


/* ─────────────────────────────────────────────
   11. PESQUISA PREMIUM
───────────────────────────────────────────────── */
.search-results {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    margin-top: 12px !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    z-index: 10000 !important;
    padding: 8px 0 !important;
}

.search-category {
    padding: 16px 20px 8px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.search-result-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 12px 20px !important;
    gap: 16px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(0,0,0,0.03) !important;
}

.search-result-item:hover {
    background: rgba(241, 245, 249, 0.8) !important;
    transform: translateX(4px) !important;
}

.res-thumb {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.res-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.res-init {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.result-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.result-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 2px !important;
}

.title-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

.type-badge {
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.badge-titulo { background: #f0fdf4 !important; color: #166534 !important; border: 1px solid #dcfce7 !important; }
.badge-artista { background: #fffbeb !important; color: #92400e !important; border: 1px solid #fef3c7 !important; }

.result-artist {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.res-arrow {
    color: #cbd5e1 !important;
    font-size: 12px !important;
    opacity: 0 !important;
    transition: all 0.2s !important;
}

.search-result-item:hover .res-arrow {
    opacity: 1 !important;
    transform: translateX(4px) !important;
}


/* ANTI-CHEATER MSG */
.swal2-title {
    font-size: 20px !important;
}