html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

iframe {
    border: 0;
}

.button,
button,
input,
select,
textarea {
    max-width: 100%;
}

.quick-card,
.panel,
.card,
.download-card,
.reward-card,
.drop-card,
.rank-card,
.account-card {
    min-width: 0;
}

@media (max-width: 620px) {
    body {
        background-attachment: scroll, scroll, scroll, scroll;
    }

    .nav-links {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-links a,
    .button,
    button {
        white-space: normal;
        text-align: center;
    }

    .footer-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    table,
    .ranking-table {
        max-width: none;
    }

    .modal-backdrop {
        align-items: flex-end;
        padding: 10px;
    }

    .account-modal {
        max-height: calc(100vh - 20px);
    }

    .modal-head,
    .modal-body {
        padding: 16px;
    }

    .modal-actions,
    .puzzle-row {
        grid-template-columns: 1fr;
    }

    .modal-actions {
        display: grid;
    }
}