/*
 * The game is mobile-first. Keep these final overrides separate so embedded
 * browsers with narrow visual viewports cannot inherit an older 320px floor.
 */
html,
body {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 720px) {
    .sd-preview-tools {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .sd-preview-tools span {
        grid-column: 1 / -1;
        margin: 0;
    }

    .sd-preview-tools button {
        width: 100%;
        min-height: 3rem;
    }

    .sd-topbar,
    .sd-main {
        width: calc(100% - 1.25rem);
        max-width: 44rem;
        box-sizing: border-box;
        padding-right: max(0px, calc(env(safe-area-inset-right) - 0.625rem));
        padding-left: max(0px, calc(env(safe-area-inset-left) - 0.625rem));
    }

    .sd-console {
        width: calc(100% + 1.25rem);
        max-width: none;
    }

    .sd-playfield,
    .sd-hud,
    .sd-status {
        max-width: 100%;
    }

    .sd-topbar {
        min-height: calc(4.4rem + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
    }

    .sd-status {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .sd-picker__sheet {
        max-height: calc(100svh - env(safe-area-inset-top) - 0.75rem);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sd-exit {
        font-size: 0.875rem;
    }

    .sd-heading h1 {
        max-width: 11em;
        font-size: clamp(2rem, 9vw, 2.45rem);
        line-height: 1.16;
        letter-spacing: -0.035em;
    }

    .sd-heading__lead {
        font-size: 1rem;
        line-height: 1.6;
    }

    .sd-result-ticket__main h2,
    .sd-result-school-switch strong,
    .sd-board h2,
    .sd-board li > span {
        font-family: var(--sd-font-body);
    }

    .sd-result-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .sd-result-actions button,
    .sd-result-actions a {
        width: 100%;
        min-height: 3rem;
        padding-inline: 0.65rem;
        font-size: 0.9375rem;
    }

    .sd-result-actions .sd-share {
        grid-column: 1 / -1;
    }

    .sd-result-ticket dt,
    .sd-result-ticket__stub span,
    .sd-result-ticket__stub i,
    .sd-share-note,
    .sd-board > p,
    .sd-school-list button small,
    .sd-school-list button i,
    .sd-picker__empty {
        font-size: 0.875rem;
    }
}

@media (max-width: 300px) {
    .sd-topbar,
    .sd-main {
        width: calc(100% - 0.75rem);
    }

    .sd-console {
        width: calc(100% + 0.75rem);
        margin-inline: -0.375rem;
    }

    .sd-hud {
        grid-template-columns: minmax(0, 1fr) 4.7rem 4.35rem;
    }

    .sd-station,
    .sd-counter,
    .sd-timer {
        padding-inline: 0.45rem;
    }

    .sd-station small,
    .sd-hud span {
        font-size: 0.75rem;
    }

    .sd-counter strong,
    .sd-timer strong {
        font-size: 1.3rem;
    }
}

@media (max-width: 380px) {
    .sd-heading h1 {
        font-size: 1.9rem;
    }

    .sd-heading__lead {
        font-size: 1rem;
    }
}