/* ==========================================================================
   RESPONSIVE CSS - TIBIA CHESS ENGINE
   ========================================================================== */

@media screen and (max-width: 640px) {
    .app-container {
        flex-direction: column;
        padding: 12px;
        gap: 16px;
    }

    .sidebar-panel {
        width: 100%;
        max-width: 320px;
        height: 480px;
        max-height: 80vh;
    }

    .history-container {
        height: 110px;
        max-height: 110px;
    }

    .history-list {
        height: 75px;
        max-height: 75px;
    }
}


@media screen and (min-width: 1024px) {
    :root {
        /* Optional scaled mode for high-dpi screens while retaining pixel crispness */
        --board-scale: 1;
    }
}