/* =====================================================
   CODING ADVENTURE SDIT AL-KAHFI
   style.css
   ===================================================== */

/* ---------- RESET ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:"Nunito",sans-serif;

    background:#87CEEB;

}

/* ---------- WARNA ---------- */

:root{

    --biru:#3498db;
    --hijau:#2ecc71;
    --kuning:#f1c40f;
    --oranye:#f39c12;
    --merah:#e74c3c;
    --putih:#ffffff;
    --abu:#ecf0f1;
    --gelap:#34495e;

}

/* ---------- SPLASH ---------- */

#splash{

    position:fixed;

    inset:0;

    background:linear-gradient(
    180deg,
    #8fd3ff,
    #c9f6ff,
    #b7f7b7);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999;

}

.logo{

    text-align:center;

}

.logo img{

    width:220px;

    animation:robotFloat 2s infinite ease-in-out;

}

.logo h1{

    margin-top:15px;

    font-size:48px;

    color:#2c3e50;

    font-weight:900;

}

.logo h2{

    margin-top:8px;

    color:#555;

    font-size:28px;

}

#startButton{

    margin-top:30px;

    background:var(--hijau);

    color:white;

    border:none;

    padding:18px 40px;

    border-radius:15px;

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

#startButton:hover{

    transform:scale(1.05);

    background:#27ae60;

}

/* ---------- GAME ---------- */

#game{

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

    background:

    linear-gradient(
    to bottom,
    #9fe8ff 0%,
    #ddfbff 55%,
    #8fe18f 100%);

}

/* ---------- HEADER ---------- */

header{

    background:white;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

    padding:15px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

header h1{

    color:var(--gelap);

    font-size:34px;

}

.player{

    display:flex;

    gap:10px;

}

.player input{

    padding:10px 14px;

    border-radius:10px;

    border:2px solid #ddd;

    font-size:18px;

    width:170px;

}

.player input:focus{

    outline:none;

    border-color:var(--biru);

}

/* ---------- STATUS ---------- */

.status{

    margin:12px;

    display:flex;

    justify-content:center;

    gap:20px;

}

.levelBox,
.timerBox,
.starBox{

    background:white;

    min-width:170px;

    text-align:center;

    border-radius:15px;

    padding:15px;

    font-size:22px;

    font-weight:bold;

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

}

.levelBox{

    color:var(--biru);

}

.timerBox{

    color:var(--merah);

}

.starBox{

    color:var(--oranye);

}

/* ---------- ARENA ---------- */

#arena{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:10px;

}

/* ---------- GRID ---------- */

#grid{

    width:min(70vw,520px);

    aspect-ratio:1;

    background:white;

    border-radius:20px;

    padding:10px;

    display:grid;

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

    grid-template-rows:repeat(4,1fr);

    gap:8px;

    box-shadow:0 10px 20px rgba(0,0,0,.2);

}

/* ---------- SETIAP KOTAK ---------- */

.cell{

    border-radius:12px;

    background:#dff6ff;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    transition:.3s;

    overflow:hidden;

}

.cell:hover{

    transform:scale(1.03);

}

/* ---------- START ---------- */

.start{

    background:#ffeaa7;

    border:4px solid #f39c12;

}

/* ---------- FINISH ---------- */

.finish{

    background:#fff3bf;

    border:4px solid #e67e22;

}

/* ---------- ROBOT ---------- */

.robot{

    width:85%;

    height:85%;

    object-fit:contain;

    animation:robotFloat 1.5s infinite ease-in-out;

}

/* ---------- RINTANGAN ---------- */

.water{

    background:#5dade2;

}

.tree{

    background:#82e0aa;

}

.rock{

    background:#b2bec3;

}

.water img,
.tree img,
.rock img{

    width:70%;

}

/* ---------- ANIMASI ---------- */

@keyframes robotFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

@keyframes pop{

0%{

transform:scale(.5);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

.fadeIn{

animation:pop .4s;

}

/* PROGRAM ITEM */

.commandItem{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFD54F;

    border-radius:12px;

    font-size:28px;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 4px 8px rgba(0,0,0,.15);

}

.commandItem:hover{

    transform:scale(1.08);

    background:#FFCA28;

}
/* =====================================================
   COMMAND PANEL
===================================================== */

.commandPanel{

    background:white;

    margin:10px;

    padding:18px;

    border-radius:20px;

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

}

.commandPanel h2{

    text-align:center;

    color:var(--gelap);

    margin-bottom:15px;

}

.cards{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

/* =====================================================
   COMMAND CARD
===================================================== */

.card{

    width:110px;

    height:110px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    background:linear-gradient(
    180deg,
    #ffd54f,
    #ffb300);

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

    transition:.25s;

    font-size:40px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.card p{

    margin-top:6px;

    font-size:16px;

    font-weight:bold;

}

.card:hover{

    transform:

    translateY(-8px)

    scale(1.05);

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

}

.card:active{

    transform:scale(.92);

}

/* =====================================================
   PROGRAM PANEL
===================================================== */

.programPanel{

    background:white;

    margin:10px;

    padding:20px;

    border-radius:20px;

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

}

.programPanel h2{

    text-align:center;

    margin-bottom:15px;

    color:var(--gelap);

}

/* =====================================================
   PROGRAM AREA
===================================================== */

#programArea{

    min-height:85px;

    border:3px dashed var(--biru);

    border-radius:15px;

    background:#eef8ff;

    padding:12px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    font-size:22px;

}

/* =====================================================
   BUTTONS
===================================================== */

.programButton{

    margin-top:15px;

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

}

.programButton button{

    padding:14px 26px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:18px;

    font-weight:bold;

    color:white;

    transition:.25s;

}

#runProgram{

    background:#2ecc71;

}

#undoProgram{

    background:#f39c12;

}

#clearProgram{

    background:#e74c3c;

}

.programButton button:hover{

    transform:translateY(-3px);

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

}

/* =====================================================
   MESSAGE BOX
===================================================== */

#message{

    margin:10px;

    min-height:50px;

    background:white;

    border-radius:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:bold;

    color:#2c3e50;

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

}

/* =====================================================
   MODAL
===================================================== */

#winModal,
#loseModal{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal{

    width:420px;

    max-width:90%;

    background:white;

    border-radius:25px;

    padding:35px;

    text-align:center;

    animation:pop .4s;

}

.modal h1{

    font-size:38px;

    margin-bottom:20px;

}

.modal p{

    font-size:22px;

    margin-bottom:20px;

}

.modal button{

    padding:15px 35px;

    background:var(--hijau);

    color:white;

    border:none;

    border-radius:15px;

    cursor:pointer;

    font-size:20px;

    font-weight:bold;

}

.modal button:hover{

    transform:scale(1.05);

}

/* =====================================================
   GLOW
===================================================== */

.glow{

    animation:glow .8s infinite alternate;

}

@keyframes glow{

from{

box-shadow:

0 0 10px gold,

0 0 20px gold;

}

to{

box-shadow:

0 0 20px orange,

0 0 35px orange;

}

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

header{

flex-direction:column;

gap:15px;

}

.status{

flex-wrap:wrap;

}

.cards{

gap:12px;

}

.card{

width:95px;

height:95px;

font-size:34px;

}

#grid{

width:min(90vw,480px);

}

}

@media(max-width:768px){

.player{

flex-direction:column;

}

.player input{

width:100%;

}

.status{

gap:10px;

}

.levelBox,
.timerBox,
.starBox{

min-width:120px;

font-size:18px;

}

.card{

width:85px;

height:85px;

font-size:28px;

}

.card p{

font-size:14px;

}

.programButton{

flex-direction:column;

}

.programButton button{

width:100%;

}

#message{

font-size:18px;

}

}

@media(max-width:500px){

.logo img{

width:150px;

}

.logo h1{

font-size:28px;

}

.logo h2{

font-size:18px;

}

header h1{

font-size:24px;

}

#grid{

gap:5px;

padding:5px;

}

.card{

width:70px;

height:70px;

font-size:22px;

}

.card p{

display:none;

}

.modal h1{

font-size:28px;

}

.modal p{

font-size:18px;

}

}
/* PROGRAM ITEM */

.commandItem{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFD54F;

    border-radius:12px;

    font-size:28px;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 4px 8px rgba(0,0,0,.15);

}

.commandItem:hover{

    transform:scale(1.08);

    background:#FFCA28;

}
/*=====================================================
 CONFETTI
=====================================================*/

.confetti{

position:fixed;

width:12px;

height:12px;

animation:fall 3s linear forwards;

z-index:99999;

}

@keyframes fall{

0%{

transform:translateY(0) rotate(0deg);

opacity:1;

}

100%{

transform:translateY(110vh) rotate(720deg);

opacity:0;

}

}

/*=====================================================
 HINT BUTTON
=====================================================*/

#hintButton{

background:#3498db;

color:white;

padding:14px 22px;

border:none;

border-radius:12px;

cursor:pointer;

font-weight:bold;

font-size:18px;

transition:.3s;

}

#hintButton:hover{

transform:scale(1.05);

background:#2980b9;

}
/*=====================================================

ROBOT ANIMATION

=====================================================*/

.robot{

width:90%;

height:90%;

transition:.25s;

transform-origin:center;

z-index:20;

position:relative;

}

/*-------------------------------*/

.robot-idle{

animation:robotIdle 1.4s ease-in-out infinite;

}

@keyframes robotIdle{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

/*-------------------------------*/

.robot-walk{

animation:robotWalk .25s infinite;

}

@keyframes robotWalk{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

100%{

transform:translateY(0);

}

}

/*-------------------------------*/

.robot-win{

animation:robotWin .6s infinite;

}

@keyframes robotWin{

0%{

transform:scale(1);

}

50%{

transform:scale(1.2) rotate(10deg);

}

100%{

transform:scale(1);

}

}

/*-------------------------------*/

.robot-lose{

animation:robotLose .25s infinite;

}

@keyframes robotLose{

0%{

transform:translateX(0);

}

25%{

transform:translateX(-5px);

}

50%{

transform:translateX(5px);

}

75%{

transform:translateX(-5px);

}

100%{

transform:translateX(0);

}

}

/*-------------------------------*/

.robot-glow{

filter:drop-shadow(0 0 12px gold);

}

/*-------------------------------*/

.robot-shake{

animation:robotShake .4s;

}

@keyframes robotShake{

0%{

transform:rotate(0deg);

}

25%{

transform:rotate(-8deg);

}

50%{

transform:rotate(8deg);

}

75%{

transform:rotate(-8deg);

}

100%{

transform:rotate(0deg);

}