@media (max-width: 1300px) {
    .game-wrapper {
        width: 100%;
        height: auto;
    }

    .game-canvas {
        width: 100%;
        height: auto;
        max-height: calc(99dvh - 98px);
    }
}

@media (max-width: 750px) {
    .start-button {
        padding: 12px 16px;
        font-size: 20px;
    }

    .restart-button {
        padding: 12px 16px;
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    .controls-title {
        font-size: 26px;
    }

    .start.text {
        font-size: 20px;
    }

    .controls-display p {
        font-size: 18px;
    }
}

@media (max-height: 580px) {
    h1 {
        display: none;
    }
}

@media (max-height: 480px) {
    .game-canvas {
        max-width: 99dvw;
        max-height: 99dvh;
        aspect-ratio: 16 / 9;
    }

    .start-button {
        padding: 6px 10px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .start-button {
        padding: 6px 10px;
        font-size: 18px;
    }
}

@media (max-width: 420px) {
    h1 {
        font-size: 32px;
    }

    .menu-buttons {
        gap: 8px;
    }
}

@media (max-width: 350px) {
    .start-button {
        padding: 6px 8px;
        font-size: 16px;
    }
}

@media (pointer: coarse) {
    .mobile-move-buttons {
        display: block;
    }
}

@media (pointer: coarse) and (orientation: portrait) {
    .turn-info {
        display: flex;
    }
}

@media (pointer: fine) {
    .mobile-move-buttons {
        display: none;
    }
}