/* ==========================================
   LEVEL 1 - HEMAT ENERGI
========================================== */

.energy-page{

    min-height:100vh;

    background:url('../img/energi/kelas.png');

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

.energy-overlay{

    min-height:100vh;

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

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;
}

/* ==========================================
   CONTAINER
========================================== */

.game-container{

    width:100%;

    text-align:center;
}

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

.game-container h2{

    color:#fff;

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;

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

.score-box{

    display:inline-block;

    background:linear-gradient(
        180deg,
        #FFF9C4,
        #FFFFFF
    );

    padding:12px 30px;

    border-radius:50px;

    color:#F9A825;

    font-size:32px;

    font-weight:900;

    border:3px solid #FFD54F;

    margin-bottom:10px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.25);
}

.game-desc{

    color:#fff;

    font-size:18px;

    margin-bottom:30px;

    text-shadow:
        0 4px 10px rgba(0,0,0,.6);
}
/* Lampu */
.img-lampu{

    width:90px;
    height:90px;
}

/* AC */
.img-ac{

    width:130px;
    height:90px;
}

/* Kipas */
.img-kipas{

    width:110px;
    height:110px;
}

/* Laptop */
.img-laptop{

    width:120px;
    height:90px;
}
/* ==========================================
   AREA GAMBAR
========================================== */

.img-box{

    height:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:10px;
}

.img-box img{

    display:block;

    object-fit:contain;
}
/* ==========================================
   PERANGKAT
========================================== */

.energy-area{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;
}

.energy-item{

    width:160px;

    min-height:180px;

    background:white;

    backdrop-filter:blur(5px);

    border-radius:20px;

    padding:20px;

    text-align:center;

    cursor:pointer;

    transition:.3s;

    box-shadow:
        0 8px 20px rgba(0,0,0,.25);
}

.energy-item:hover{

    transform:
        translateY(-5px)
        scale(1.03);
}



.energy-item span{

    display:block;

    margin-top:10px;

    font-size:18px;

    font-weight:bold;
}

/* ==========================================
   STATUS
========================================== */

.status{

    display:inline-block;

    margin-top:10px;

    padding:5px 15px;

    border-radius:30px;

    background:#4CAF50;

    color:#fff;

    font-size:12px;

    font-weight:bold;
}

.energy-item.off{

    opacity:.65;
}

.energy-item.off .status{

    background:#f44336;
}

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

.success-box{

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

    padding:30px;

    border-radius:20px;

    max-width:450px;

    margin:30px auto;

    box-shadow:
        0 10px 30px rgba(0,0,0,.3);
}

.success-box h3{

    color:#2E7D32;

    margin-bottom:10px;
}

.btn-next{

    display:inline-block;

    margin-top:15px;

    padding:12px 25px;

    background:#4CAF50;

    color:white;

    text-decoration:none;

    border-radius:10px;

    font-weight:bold;
}

.btn-next:hover{

    background:#2E7D32;
}

.game-glass{

    max-width:900px;

    margin:0 auto;

    padding:30px;

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

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

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

    border-radius:30px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);
}

/* ==========================================
   LEVEL ENERGI MOBILE
========================================== */

@media(max-width:768px){

    .energy-overlay{

        padding:20px 10px 100px;
    }

    .game-container h2{

        font-size:20px;

        margin-bottom:8px;
    }

    .score-box{

        font-size:18px;

        margin-bottom:8px;
    }

    .game-desc{

        font-size:13px;

        line-height:1.4;

        padding:0 10px;

        margin-bottom:20px;
    }

    .energy-area{

        display:grid;

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

        gap:15px;

        max-width:320px;

        margin:20px auto;
    }

    .energy-item{

    width:120px;

    min-height:220px;

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

    border-radius:20px;

    padding:20px;

    text-align:center;

    cursor:pointer;

    transition:.3s;

    box-shadow:
        0 8px 20px rgba(0,0,0,.25);
}

  

    .energy-item span{

        font-size:16px;

        margin-top:8px;
    }

    .status{

        margin-top:8px;

        font-size:11px;

        padding:4px 10px;
    }

    .success-box{

        width:90%;

        padding:20px;
    }

    .btn-next{

        width:100%;

        text-align:center;
    }
      .img-box{

        height:90px;
    }

    .img-lampu{

        width:70px;
        height:70px;
    }

    .img-ac{

        width:100px;
        height:70px;
    }

    .img-kipas{

        width:85px;
        height:85px;
    }

    .img-laptop{

        width:90px;
        height:70px;
    }
     .game-glass{

        padding:20px;

        border-radius:20px;

        width:95%;
    }

}