/* =======================================
   CAPYBARA MINING
   RESPONSIVE CSS
======================================= */

@media (max-width:480px){

    .container{
    
        padding:15px;
    
    }
    
    .profile-card{
    
        padding:16px;
    
    }
    
    .profile-top{
    
        flex-direction:column;
    
        align-items:flex-start;
    
        gap:15px;
    
    }
    
    .avatar{
    
        width:72px;
    
        height:72px;
    
    }
    
    .profile-info h2{
    
        font-size:22px;
    
    }
    
    .profile-info p{
    
        font-size:14px;
    
    }
    
    .stats-row{
    
        grid-template-columns:repeat(2,1fr);
    
        gap:10px;
    
    }
    
    .stats-item{
    
        padding:14px;
    
    }
    
    .stats-item h2{
    
        font-size:22px;
    
    }
    
    .mining-card{
    
        padding:20px;
    
    }
    
    .mining-circle{
    
        width:240px;
    
        height:240px;
    
    }
    
    .timer{
    
        font-size:42px;
    
    }
    
    .start-btn{
    
        width:100%;
    
        font-size:18px;
    
    }
    
    .menu-grid{
    
        grid-template-columns:repeat(2,1fr);
    
    }
    
    .statistics-grid{
    
        grid-template-columns:1fr;
    
    }
    
    .bottom-nav{
    
        max-width:100%;
    
    }
    
    .nav-item{
    
        font-size:12px;
    
    }
    
    .nav-item div{
    
        font-size:22px;
    
    }
    
    }
    
    /* ============================== */
    
    @media (max-width:360px){
    
    .container{
    
        padding:12px;
    
    }
    
    .timer{
    
        font-size:34px;
    
    }
    
    .mining-circle{
    
        width:210px;
    
        height:210px;
    
    }
    
    .profile-info h2{
    
        font-size:20px;
    
    }
    
    .start-btn{
    
        padding:16px;
    
    }
    
    .menu-card{
    
        padding:14px;
    
    }
    
    }
    
    /* ============================== */
    
    @media (min-width:768px){
    
    .container{
    
        max-width:520px;
    
        margin:auto;
    
    }
    
    }
    
    /* ============================== */
    
    @media (min-width:1024px){
    
    .container{
    
        max-width:600px;
    
    }
    
    }