/* ==========================================
   BACKGROUND
========================================== */

.trash-page{

    min-height:100vh;

    background:url('../img/sampah/pilah-sampah.png');

    background-size:cover;
    background-position:center;
}

.trash-overlay{

    min-height:100vh;

    background:rgba(0,0,0,.20);

    display:flex;

    justify-content:center;
    align-items:center;

    padding:20px;
}

/* ==========================================
   GLASS
========================================== */

.glass-box{

    width:100%;

    max-width:1100px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.25);

    border-radius:30px;

    padding:30px;
}

/* ==========================================
   HEADER
========================================== */

.game-container{

    text-align:center;
}

.game-container h2{

    color:#fff;

    font-size:42px;

    text-shadow:0 4px 10px rgba(0,0,0,.6);
}

.score-box{

    display:inline-block;

    margin:15px 0;

    background:#fff;

    color:#fbc02d;

    font-size:28px;

    font-weight:bold;

    padding:10px 25px;

    border-radius:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.game-desc{

    color:#fff;

    margin-bottom:25px;

    text-shadow:0 4px 10px rgba(0,0,0,.5);
}

/* ==========================================
   SAMPAH
========================================== */

.trash-area{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:30px;
}

.trash-item{

    width:90px;

    cursor:grab;

    transition:.3s;
}

.trash-item:hover{

    transform:scale(1.1);
}

/* ==========================================
   TONG
========================================== */

.bin-area{

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;
}

.bin{

    width:220px;

    background:rgba(255,255,255,.9);

    border-radius:20px;

    padding:20px;

    text-align:center;

    transition:.3s;
}

.bin:hover{

    transform:translateY(-5px);
}

.bin img{

    width:120px;
}

.bin span{

    display:block;

    margin-top:10px;

    font-size:20px;

    font-weight:bold;
}

/* ==========================================
   SUCCESS
========================================== */

.success-box{

    background:rgba(255,255,255,.95);

    padding:30px;

    border-radius:20px;

    max-width:450px;

    margin:30px auto;
}

.btn-next{

    display:inline-block;

    margin-top:15px;

    padding:12px 25px;

    background:#4CAF50;

    color:#fff;

    text-decoration:none;

    border-radius:10px;
}
.notif-salah{

    display:none;

    position:fixed;

    top:20px;
    left:50%;

    transform:translateX(-50%);

    background:#f44336;

    color:#fff;

    padding:12px 25px;

    border-radius:12px;

    font-weight:bold;

    box-shadow:
        0 5px 15px rgba(0,0,0,.3);

    z-index:9999;

    animation:shake .4s;
}

@keyframes shake{

    0%{transform:translateX(-50%) translateX(0);}
    25%{transform:translateX(-50%) translateX(-5px);}
    50%{transform:translateX(-50%) translateX(5px);}
    75%{transform:translateX(-50%) translateX(-5px);}
    100%{transform:translateX(-50%) translateX(0);}
}

/* untuk halaman hp */
.selected-trash{
    transform:scale(1.2);
    border:3px solid #4CAF50;
    border-radius:10px;
    box-shadow:0 0 15px rgba(76,175,80,.8);
}

/* ==========================================
   LEVEL 2 MOBILE
========================================== */

@media(max-width:768px){

    .glass-box{

        width:96%;

        padding:15px;

        border-radius:20px;
          overflow:hidden;
    }

    .game-container h2{

        font-size:18px;

        margin-bottom:10px;
    }

    .score-box{

        font-size:16px;

        padding:8px 15px;

        margin:10px 0;
    }

    .game-desc{

        font-size:12px;

        line-height:1.4;

        margin-bottom:15px;
    }

    /* SAMPAH */

    .trash-area{

        display:grid;

        grid-template-columns:
            repeat(3,1fr);

        gap:10px;

        margin-bottom:20px;
    }

    .trash-item{

        width:50px;

        margin:auto;
    }

    /* TONG */

     .bin-area{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:6px;
        width:100%;
    }

     .bin{
        width:100% !important;
        min-width:0 !important;

        padding:6px;
        border-radius:12px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    .bin img{
        width:55px !important;
        max-width:100%;
        height:auto;
    }

    .bin span{
        font-size:10px;
        margin-top:4px;
        font-weight:bold;
    }

    /* SUCCESS */

    .success-box{

        width:95%;

        padding:15px;
    }

    .btn-next{

        width:100%;

        text-align:center;
    }

}