/* =================================================================
   DAILY EQUATION: MOBILE GAME BOARD & PADDING
   ================================================================= */
/* Expand mobile grid container to fill available width safely */
.eq-page-scope #game-content-area .grid {
    width: 100% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 4px !important;
}

/* Force cells to dynamically scale as perfect squares */
.eq-page-scope #game-content-area .grid>div {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    font-size: 1.25rem !important;
}

/* Add breathing room above the keyboard */
.eq-page-scope #keyboard-container {
    margin-top: 1.5rem !important;
}

/* Scale mobile keyboard touch targets */
.eq-page-scope #keyboard-container .key {
    height: 60px !important;
    min-height: 60px !important;
}

/* =================================================================
   DAILY EQUATION: DESKTOP GAME BOARD & KEYBOARD SCALING
   ================================================================= */
@media (min-width: 768px) {

    /* Scale up the game wrapper width */
    .eq-page-scope .md-game-flex-wrapper>.relative.max-w-sm {
        max-width: 460px !important;
    }

    /* Scale up grid cells */
    .eq-page-scope #game-content-area .grid:not(#puzzle-grid)>div {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Increase grid gap and add vertical separation */
    .eq-page-scope #game-content-area .grid:not(#puzzle-grid) {
        gap: 0.65rem !important;
        margin-bottom: 2rem !important;
    }

    /* Scale up keyboard keys */
    .eq-page-scope #keyboard-container .key {
        width: 4.5rem !important;
        height: 3.25rem !important;
        font-size: 1.5rem !important;
    }

    /* Scale up wide keys */
    .eq-page-scope #keyboard-container .key[data-key="ENTER"],
    .eq-page-scope #keyboard-container .key[data-key="Delete"] {
        width: 8rem !important;
    }

    /* Scale keyboard row gaps */
    .eq-page-scope #keyboard-container .flex {
        gap: 0.65rem !important;
    }

    /* Increase vertical spacing between board, hint buttons, and keyboard */
    .eq-page-scope .eq-grid-toolbar {
        margin-top: 1rem !important;
        margin-bottom: 1.5rem !important;
        position: relative !important;
        z-index: 10;
        transform: translateY(1.15rem) !important;
    }

    .eq-page-scope #keyboard-container {
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 500px !important;
    }
}