/* ============================= */
/* RESPONSIVIDADE */
/* ============================= */

/* BOTÃO HAMBÚRGUER */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    z-index: 1100;
}

/* OVERLAY */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease;
}

.mobile-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ============================= */
/* TABLET (≤992px) */
/* ============================= */
@media (max-width: 992px) {
    .premium-layout {
        display: block;
    }

    .game-container {
        display: block;
    }

    /* Sidebar empilhada abaixo do main */
    .premium-sidebar {
        position: static;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 15px;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        gap: 15px;
        overflow: visible;
    }

    /* Todos os cards visíveis */
    .hints-card,
    .info-card {
        display: block;
    }

    /* Actions-card permanece visível, mas não entra em drawer ainda */
    .actions-card {
        display: block;
    }

    /* Botão hambúrguer não aparece aqui (opcional) */
    .mobile-menu-toggle {
        display: none;
    }
}

/* ============================= */
/* MOBILE REAL (≤768px) */
/* ============================= */
@media (max-width: 768px) {
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .header-controls {
        width: auto;
    }

    /* GAME FULL WIDTH */
    .game-main {
        width: 100%;
    }

    .game-card {
        margin: 0 auto;
    }

    .game-stats {
        flex-wrap: wrap;
        justify-content: center;
        display: flex;
        gap: 20px;
        background: var(--card);
        padding: 15px 15px;
        border-radius: 12px;
    }

    /* SIDEBAR vira drawer apenas para actions-card */
    .premium-sidebar {
        position: relative;
        padding: 0;
    }

    .actions-card {
        position: fixed;
        top: 0;
        right: -100%;
        width: 82%;
        max-width: 340px;
        height: 100vh;
        background: var(--card-bg, #fff);
        z-index: 999;
        overflow-y: auto;
        padding: 20px;
        box-shadow: -10px 0 30px rgba(0,0,0,0.15);
        transition: 0.35s ease;
    }

    .actions-card.open {
        right: 0;
    }

    .result-btn {
    padding: 14px 8px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

    /* Outros cards continuam abaixo do main */
    .hints-card,
    .info-card {
        display: block;
        position: static;
        width: 100%;
        max-width: 100%;
        padding: 15px;
        margin-top: 10px;
    }

    /* OVERLAY */
    .mobile-overlay {
        display: block;
    }
}
