@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    body {
        min-height: 100vh;
    }

    /* NÃO mexer no layout original do container */
    .container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Título */
    .container h1 {
        max-width: 100%;
        font-size: clamp(1.5rem, 7vw, 2.5rem);
        overflow-wrap: break-word;
    }

    #title {
        max-width: 95vw;
        font-size: clamp(40px, 12vw, 80px);
        overflow-wrap: break-word;
    }

    #chance {
        max-width: 95vw;
        font-size: 1rem;
        overflow-wrap: break-word;
    }

    /* Botão principal */
    #rollBtn {
        max-width: 90vw;
    }

    /* Moedas */
    #coinDisplay {
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
    }

    /* Luck */
    .luck-box {
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
    }

    /* INVENTÁRIO
       Mantém o posicionamento original,
       apenas adapta o tamanho */
    #inventoryMenu {
        max-width: 100vw;
        box-sizing: border-box;
    }

    #inventory-card {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        box-sizing: border-box;
    }

    /* SHOP */
    #shop {
        max-width: 100vw;
        box-sizing: border-box;
    }

    .shopItem {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Evita textos gigantes estourando a tela */
    button,
    input,
    .shopItem,
    .inventory-item {
        max-width: 100%;
    }

    /* Rodapés */
    #spiderFooter,
    #versionFooter {
        max-width: 100vw;
    }
}