@media (pointer: coarse) {
    .dpad {
        display: grid;
    }
    .toggle-dpad-btn {
        display: none;
    }
}

@media (pointer: fine) and (hover: hover) {
    .game-container {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        gap: 20px 24px;
        max-width: 820px;
        padding: 24px 28px 20px;
        align-items: start;
        justify-items: start;
    }

    h1 {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
        font-size: 2.2rem;
    }

    .canvas-wrapper {
        grid-column: 1;
        grid-row: 2 / 7;
        max-width: 540px;
        align-self: start;
    }

    .score-row {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-start;
    }

    .mode-selector {
        grid-column: 2;
        grid-row: 3;
        justify-content: flex-start;
    }

    .color-section {
        grid-column: 2;
        grid-row: 4;
        justify-content: flex-start;
    }

    .btn-row {
        grid-column: 2;
        grid-row: 5;
        justify-content: flex-start;
    }

    .dpad {
        grid-column: 2;
        grid-row: 6;
        justify-self: start;
        display: none;
    }

    .hint {
        grid-column: 2;
        grid-row: 7;
        text-align: left;
        font-size: 0.75rem;
        margin-top: 4px;
    }
}

@media (max-width: 480px) {
    .game-container {
        padding: 10px 8px;
        gap: 10px;
        border-radius: 14px;
    }
    h1 {
        font-size: 1.4rem;
        letter-spacing: 2px;
    }
    .mode-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    .restart-btn,
    .pause-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .dpad-btn {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
    .dpad {
        grid-template-columns: 44px 44px 44px;
        grid-template-rows: 44px 44px 44px;
        gap: 4px;
    }
    .score-box {
        padding: 4px 10px;
        min-width: 60px;
    }
    .hint {
        font-size: 0.65rem;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    body {
        padding: 3px;
        align-items: flex-start;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .game-container {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto auto auto auto auto;
        gap: 3px 10px;
        max-width: 100%;
        padding: 6px 10px;
        border-radius: 12px;
    }

    h1 {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 1rem;
        letter-spacing: 2px;
        margin: 0;
    }

    .canvas-wrapper {
        grid-column: 1;
        grid-row: 2 / 8;
        align-self: start;
        box-shadow: 0 0 0 2px var(--border);
        border-radius: 6px;
    }

    .score-row {
        grid-column: 2;
        grid-row: 2;
        gap: 5px;
    }

    .score-box {
        padding: 2px 7px;
        min-width: 46px;
        border-radius: 7px;
    }

    .score-label {
        font-size: 0.55rem;
    }

    .score-value {
        font-size: 0.95rem;
    }

    .mode-selector {
        grid-column: 2;
        grid-row: 3;
        gap: 4px;
    }

    .mode-btn {
        padding: 3px 9px;
        font-size: 0.68rem;
        border-radius: 14px;
        letter-spacing: 0;
    }

    .color-section {
        grid-column: 2;
        grid-row: 4;
        gap: 5px;
    }

    .color-label {
        font-size: 0.6rem;
    }

    .swatch {
        width: 20px;
        height: 20px;
    }

    .color-swatches {
        gap: 5px;
    }

    .btn-row {
        grid-column: 2;
        grid-row: 5;
        gap: 5px;
    }

    .restart-btn,
    .pause-btn {
        padding: 5px 12px;
        font-size: 0.75rem;
        border-radius: 18px;
        letter-spacing: 1px;
    }

    .dpad {
        grid-column: 2;
        grid-row: 6;
        grid-template-columns: 34px 34px 34px;
        grid-template-rows: 34px 34px 34px;
        gap: 2px;
        justify-self: start;
    }

    .dpad-btn {
        font-size: 0.9rem;
        border-radius: 7px;
        width: 34px;
        height: 34px;
    }

    .hint {
        grid-column: 1 / -1;
        grid-row: 7;
        font-size: 0.55rem;
        margin-top: 1px;
    }
}

@media (min-height: 521px) and (max-height: 700px) and (orientation: landscape) and (pointer: coarse) {
    .game-container {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        gap: 5px 16px;
        max-width: 100%;
        padding: 8px 14px;
    }

    h1 {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 1.2rem;
    }

    .canvas-wrapper {
        grid-column: 1;
        grid-row: 2 / 7;
        align-self: start;
    }

    .score-row { grid-column: 2; grid-row: 2; gap: 8px; }
    .mode-selector { grid-column: 2; grid-row: 3; }
    .color-section { grid-column: 2; grid-row: 4; }
    .btn-row { grid-column: 2; grid-row: 5; }
    .dpad {
        grid-column: 2;
        grid-row: 6;
        grid-template-columns: 40px 40px 40px;
        grid-template-rows: 40px 40px 40px;
        gap: 3px;
    }
    .dpad-btn { font-size: 1.1rem; border-radius: 9px; }
    .hint { grid-column: 1 / -1; grid-row: 7; }
}