/* ============================================================
   JigPic Solitaire — responsive layouts
   ============================================================ */

/* ---------------- Large desktop ---------------- */
@media (min-width: 1600px) {
    :root {
        --hud-h: 64px;
    }

    .card {
        --card-w: 86px;
        --card-h: 122px;
    }
}

/* ---------------- Desktop (default) ---------------- */

/* ---------------- Tablet portrait ----------------
   Picture panel collapses onto the top of the game. */
@media (max-width: 900px) {
    :root {
        --hud-h: 48px;
    }

    .game-main {
        flex-direction: column;
    }

    .board {
        order: 2;
        width: 100%;
        padding-bottom: 30px;
    }

    .picture-panel {
        order: 1;
        width: 100%;
        border-left: none;
        border-bottom: 1px solid var(--panel-line);
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
    }

    .pp-head {
        flex: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        max-width: 26%;
    }

    .pp-title b {
        font-size: 0.85rem;
    }

    .pp-grid-wrap {
        flex: 1;
        max-height: 96px;
    }

    .pp-grid {
        width: auto;
        height: 88px;
        max-width: 180px;
    }

    .piece {
        border-radius: 3px;
    }

    .pp-bar-wrap {
        flex: none;
        width: 30%;
        min-width: 110px;
    }

    .pp-meta {
        display: none;
    }

    .foundation-total {
        display: none;
    }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 768px) {
    .mobile-controls {
        display: flex;
    }

    .hud-center {
        gap: 8px;
    }

    .hud-stat {
        min-width: 0;
    }

    .hud-stat b {
        font-size: 0.82rem;
    }

    .hud-stat span {
        font-size: 0.5rem;
    }

    .hud-level b {
        font-size: 0.9rem;
    }

    .hud-left .icon-btn {
        width: 38px;
        height: 38px;
    }

    .hud-right {
        gap: 5px;
    }

    .hud-right .icon-btn {
        width: 38px;
        height: 38px;
    }

    /* Bigger buttons for the modal lists */
    .modal-buttons .btn {
        padding: 14px;
        font-size: 1rem;
    }

    .board {
        padding: 8px 8px 24px;
    }

    /* howto stacks into one column */
    .howto-row {
        grid-template-columns: 1fr;
    }

    .level-grid {
        grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
        gap: 8px;
    }

    .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }
}

/* ---------------- Small mobile ---------------- */
@media (max-width: 420px) {
    .hud-center .combo-stat {
        display: none;
    }

    .logo-art {
        width: 76px;
        height: 76px;
    }

    .menu-inner {
        gap: 18px;
    }

    .pp-grid-wrap {
        max-height: 76px;
    }

    .pp-grid {
        height: 72px;
    }

    .picture-panel {
        padding: 6px 10px;
        gap: 8px;
    }

    .pp-head {
        max-width: 24%;
    }

    .pp-title b {
        font-size: 0.75rem;
    }

    .pp-bar-wrap {
        min-width: 90px;
    }

    .level-grid {
        grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    }
}

/* ---------------- Landscape phones ---------------- */
@media (max-height: 480px) and (orientation: landscape) {
    .picture-panel {
        width: clamp(220px, 26vw, 300px);
    }

    .pp-grid-wrap {
        max-height: 70px;
    }

    .board-scroll-hint {
        display: none;
    }

    .menu-inner {
        gap: 12px;
    }

    .logo-art {
        margin-bottom: 4px;
    }
}

/* ---------------- Reassure no horizontal overflow ---------------- */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}