/* ============================================================
   Responsive Styles
   Mobile and tablet optimizations
   ============================================================ */

/* ========== Tablet and Below (768px) ========== */
@media (max-width: 768px) {
    body {
        padding: var(--spacing-sm);
    }

    h1 {
        font-size: var(--font-size-md);
    }

    #gameCanvas {
        width: 100%;
        max-width: var(--canvas-width);
        height: auto;
    }

    #info,
    #log {
        min-width: auto;
        width: 100%;
    }
}

/* ========== Mobile (600px) ========== */
@media (max-width: 600px) {
    body {
        padding: var(--spacing-xs);
    }

    h1 {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-xs);
    }

    #info {
        padding: var(--spacing-sm);
    }

    button {
        width: 100%;
        margin-left: 0 !important;
        margin-top: var(--spacing-xs);
    }

    .stat {
        font-size: var(--font-size-xs);
    }
}

/* ========== Landscape Mode ========== */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    #gameCanvas {
        max-height: 90vh;
    }

    .game-wrapper {
        flex-direction: row;
    }
}