/* Mobile / touch layout fixes */

/* The engine's touch overlay is 100vh tall by default, which covers the
   Jump/Duck buttons and the settings form. Limit it to the game area. */
.offline .controller {
    height: 100%;
}

.game__inner,
.help__taps {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.help__taps {
    display: flex;
    gap: 8px;
}

.help__taps .help__tap {
    flex: 1;
}

.setting-item input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

/* Touch devices of any width (tablets too): show tap buttons, not key hints */
@media (pointer: coarse) {
    .help {
        display: none;
    }

    .help__tap {
        display: block;
        padding: 16px 19px;
    }
}

@media (max-width: 767px) {
    .settings-box {
        margin: 24px 10px;
        padding: 16px;
    }

    .help__taps {
        padding: 0 10px;
    }

    /* 16px stops iOS Safari from zooming in when an input is focused */
    .setting-item input {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Phones held sideways: drop the title so the game and buttons fit on screen */
@media (orientation: landscape) and (max-height: 500px) {
    .header {
        display: none;
    }

    .intro h1 {
        display: none;
    }

    body.color .game__inner {
        margin-top: 0;
        height: 240px;
    }

    .help__outer {
        margin-top: 0;
    }

    .help__tap {
        padding: 10px 19px;
    }
}