/* PRIMEVAL — Mobile responsive shim
   Aplica ajustes sobre o template tibiacom legacy (que era 760px fixed).
   Nao refaz layout; apenas evita zoom-out forcado, scroll horizontal e
   imagens estourando no celular. Desktop nao e afetado.
*/
html, body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

@media (max-width: 768px) {
    /* Container principal: nao deixa estourar */
    body, body > div, body > table, .BodyContent, #Content {
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    /* Imagens grandes (banner, headers) - evita scroll horizontal */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Excecao: imagens decorativas pequenas (icones, sprites) mantem tamanho */
    img[width][height], .HelperDivIndicator img, .OutfitIcon img, img[src*='items/'] {
        max-width: none !important;
        height: auto;
    }

    /* Tabelas: overflow horizontal scroll quando precisar */
    table.Table1, table.Table2, table.Table3, table.TableContent, .myaac-table, .TableContainer {
        max-width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduz paddings exagerados */
    .Tableshadow, .TableContentContainer {
        padding: 4px !important;
    }

    /* Top players panel (sidebar) - se virar full-width */
    .RankingTable, .Sidebar {
        width: 100% !important;
    }

    /* News content */
    .NewsHeadline, .NewsTickerEntry, .NewsTickerEntryHeadline {
        font-size: 14px;
        line-height: 1.4;
        word-wrap: break-word;
    }

    /* Forms (login, account create) */
    input[type="text"], input[type="password"], input[type="email"], select, textarea {
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* >=16px evita zoom no iOS ao focar */
    }

    /* Buttons - mais clicaveis no toque */
    .NewButton, .ButtonContainer, button, input[type="submit"] {
        min-height: 36px;
    }

    /* Body padding fora do container fixo */
    body {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Mobile pequeno (telefone vertical) */
@media (max-width: 480px) {
    .Tableshadow, .TableContentContainer {
        padding: 2px !important;
    }
    /* Submenu items - empilha vertical */
    .SubmenuItem, .Submenuitem {
        display: block;
        width: 100% !important;
    }
}