/* Responsive — Mobile-first adjustments */

@media (max-width: 1024px) {
    :root {
        --sidebar-width: 200px;
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: 240px;
    }

    /* Sidebar: off-screen on mobile */
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .main {
        padding: 12px;
    }

    /* All game layouts go vertical */
    .crash-container,
    .slots-container,
    .coinflip-container,
    .dice-container,
    .mines-container,
    .plinko-container,
    .roulette-container {
        flex-direction: column;
    }

    .crash-controls,
    .slots-controls,
    .coinflip-controls,
    .dice-controls,
    .mines-controls,
    .plinko-controls,
    .roulette-controls {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-top: 1px solid rgba(255,255,255,0.03);
    }

    .crash-area { min-height: 300px; }
    .crash-multiplier { font-size: 40px; }

    .slots-area { min-height: 300px; padding: 24px 12px; }

    .coinflip-area { min-height: 300px; padding: 24px 12px; }
    .coin-display { width: 120px; height: 120px; }
    .coin-front, .coin-back { font-size: 52px; }

    .dice-area { min-height: 300px; padding: 24px 12px; }
    .dice-rolled { font-size: 40px; }

    .mines-area { min-height: auto; padding: 16px; }
    .mines-grid { max-width: 360px; gap: 6px; }

    .plinko-area { min-height: 380px; }

    .roulette-area { min-height: 340px; padding: 24px 12px; }

    /* Balance */
    .balance-box {
        padding: 6px 12px;
        height: 36px;
    }

    .btn-deposit {
        padding: 0 14px;
        height: 36px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .slot-reel {
        width: 80px;
        height: 80px;
    }

    .slot-symbol {
        width: 80px;
        height: 80px;
        font-size: 38px;
    }

    .slots-machine {
        padding: 16px;
    }

    .slots-frame {
        gap: 6px;
    }

    @keyframes slotSpin {
        0% { transform: translateY(0); }
        100% { transform: translateY(-80px); }
    }

    .mine-cell {
        font-size: 22px;
    }

    .crash-multiplier {
        font-size: 32px;
    }
}