/*
 * Shared mobile containment rules.
 *
 * Most pages predate the shared component build and carry page-local Tailwind
 * output. This file supplies the small set of responsive utilities and
 * safeguards that must behave consistently across every locale and page.
 */

@media (max-width: 640px) {
    body {
        overflow-wrap: anywhere;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex > *,
    .inline-flex > *,
    .grid > * {
        min-width: 0;
    }

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

    h1,
    h2,
    h3,
    p,
    li,
    a,
    button,
    label,
    span {
        overflow-wrap: anywhere;
    }

    a[href^="mailto:"],
    a[href^="http"],
    .font-mono {
        word-break: break-word;
    }

    #categoryFilters,
    #itemTypeButtons {
        max-width: 100%;
        flex-wrap: wrap;
    }

    #categoryFilters > button,
    #itemTypeButtons > button {
        max-width: 100%;
        white-space: normal;
    }

    .answer-stage > .flex {
        flex-wrap: wrap;
    }
}

@media (max-width: 360px) {
    .p-8,
    .p-6 {
        padding: 1.25rem;
    }

    .px-8 {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .text-5xl {
        font-size: 2.25rem;
        line-height: 1.05;
    }

    .text-4xl {
        font-size: 2rem;
        line-height: 1.1;
    }

    main .justify-between {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    #resultGrid .grid-cols-2,
    #resultGrid .grid-cols-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    #diceGrid.grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}