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

/*=========================================================
ROOT
=========================================================*/

:root{

    /*========== WARNA ==========*/

    --primary:#2E8B57;

    --primary-dark:#1F6F46;

    --secondary:#FFD54F;

    --danger:#E53935;

    --warning:#FB8C00;

    --info:#29B6F6;

    --success:#43A047;

    --white:#FFFFFF;

    --black:#222222;

    --gray:#EAEAEA;

    --border:#D6D6D6;

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

    /*========== FONT ==========*/

    --font:
    "Poppins",
    Arial,
    sans-serif;

    /*========== RADIUS ==========*/

    --radius:18px;

    /*========== TRANSITION ==========*/

    --transition:.30s;

}


/*=========================================================
RESET
=========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font);

    background:

    linear-gradient(

    135deg,

    #C8E6C9,

    #E8F5E9

    );

    color:var(--black);

    overflow:hidden;

    width:100%;

    height:100dvh;

}


/*=========================================================
DEFAULT
=========================================================*/

img{

    display:block;

    max-width:100%;

}

button{

    cursor:pointer;

    border:none;

    outline:none;

    font-family:inherit;

}

input,
select{

    outline:none;

    font-family:inherit;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}
/*=========================================================
LOADING SCREEN
=========================================================*/

#loadingScreen{

    position:fixed;

    inset:0;

    background:linear-gradient(135deg,#2E8B57,#43A047);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:.5s;

}

.loadingCard{

    background:#ffffff;

    width:min(90vw,420px);

    border-radius:25px;

    padding:40px;

    text-align:center;

    box-shadow:var(--shadow);

}

.loadingLogo{

    width:120px;

    margin:auto;

    margin-bottom:20px;

}

.loadingCard h1{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:8px;

}

.loadingCard p{

    color:#666;

    margin-bottom:25px;

}

/*=========================================================
LOADER
=========================================================*/

.loader{

    width:70px;

    height:70px;

    border-radius:50%;

    border:8px solid #ddd;

    border-top:8px solid var(--primary);

    margin:auto;

    animation:loadingSpin 1s linear infinite;

}

@keyframes loadingSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================================
SPLASH SCREEN
=========================================================*/

#splashScreen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(

    135deg,

    #B2DFDB,

    #C8E6C9

    );

    z-index:9000;

}

.splashBox{

    width:min(92vw,500px);

    background:#fff;

    border-radius:28px;

    text-align:center;

    padding:40px;

    box-shadow:var(--shadow);

}

.logo{

    width:140px;

    margin:auto;

    margin-bottom:25px;

}

.splashBox h1{

    font-size:2.3rem;

    color:var(--primary);

    margin-bottom:10px;

}

.splashBox h2{

    font-size:1.4rem;

    color:#444;

    margin-bottom:15px;

}

.splashBox p{

    color:#666;

    line-height:1.6;

    margin-bottom:30px;

}

/*=========================================================
BUTTON START
=========================================================*/

#btnStart{

    width:100%;

    max-width:320px;

    height:58px;

    border-radius:18px;

    background:var(--primary);

    color:#fff;

    font-size:1.15rem;

    font-weight:700;

    transition:.3s;

}

#btnStart:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

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

}

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

.topHeader{

    height:85px;

    background:#ffffff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

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

    border-bottom:1px solid var(--border);

}

.headerLeft{

    display:flex;

    align-items:center;

    gap:15px;

}

.headerLogo{

    width:60px;

}

.headerLeft h2{

    color:var(--primary);

    font-size:1.5rem;

}

.headerLeft p{

    color:#777;

    font-size:.9rem;

}

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

.headerCenter{

    display:flex;

    gap:15px;

}

.statusCard{

    width:95px;

    height:70px;

    border-radius:18px;

    background:#F7F7F7;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.statusCard:hover{

    transform:translateY(-4px);

    background:#ffffff;

    box-shadow:var(--shadow);

}

.statusCard p{

    font-size:.75rem;

    color:#777;

}

.statusCard h3{

    font-size:1.25rem;

    color:var(--primary);

}

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

.headerRight{

    display:flex;

    gap:12px;

}

.headerRight button{

    width:52px;

    height:52px;

    border-radius:15px;

    background:#F2F2F2;

    font-size:1.35rem;

    transition:.25s;

}

.headerRight button:hover{

    background:var(--primary);

    color:#fff;

    transform:scale(1.08);

}
/*=========================================================
MAIN LAYOUT
=========================================================*/

#gameContainer{

    width:100%;

    height:100dvh;

    display:grid;

    grid-template-rows:85px 1fr 70px;

    overflow:hidden;

}

/*=========================================================
GAME LAYOUT
=========================================================*/

.mainLayout{

    display:grid;

    grid-template-columns:
    minmax(320px,1fr)
    380px;

    gap:20px;

    padding:20px;

    overflow:hidden;

}

/*=========================================================
LEFT PANEL
=========================================================*/

.boardSection{

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

/*=========================================================
BOARD CARD
=========================================================*/

.boardCard{

    position:relative;

    width:min(92vw,700px);

    aspect-ratio:1;

    background:#ffffff;

    border-radius:24px;

    padding:18px;

    box-shadow:var(--shadow);

    display:flex;

    justify-content:center;

    align-items:center;

}

/*=========================================================
GAME BOARD
=========================================================*/

#gameBoard{

    width:100%;

    height:100%;

    display:grid;

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

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

    gap:8px;

}

/*=========================================================
TILE
=========================================================*/

.tile{

    position:relative;

    border-radius:18px;

    background-image:

    url("../assets/img/grass.png");

    background-size:cover;

    background-position:center;

    transition:.25s;

    overflow:hidden;

    user-select:none;

}

.tile:hover{

    transform:scale(1.03);

    box-shadow:

    0 6px 16px rgba(0,0,0,.20);

}

/*=========================================================
OBSTACLE
=========================================================*/

.tile img{

    width:75%;

    height:75%;

    object-fit:contain;

    position:absolute;

    inset:0;

    margin:auto;

    pointer-events:none;

}

/*=========================================================
START
=========================================================*/

.tile.start{

    outline:4px solid #43A047;

}

/*=========================================================
FINISH
=========================================================*/

.tile.finish{

    outline:4px solid #FFB300;

}

/*=========================================================
TREE
=========================================================*/

.tile.tree{

    background-image:

    url("../assets/img/tree.png");

    background-size:70%;

    background-repeat:no-repeat;

    background-position:center;

}

/*=========================================================
ROCK
=========================================================*/

.tile.rock{

    background-image:

    url("../assets/img/rock.png");

    background-size:65%;

    background-repeat:no-repeat;

    background-position:center;

}

/*=========================================================
WATER
=========================================================*/

.tile.water{

    background-image:

    url("../assets/img/water.png");

    background-size:cover;

}

/*=========================================================
FINISH FLAG
=========================================================*/

.tile.goal{

    background-image:

    url("../assets/img/finish.png");

    background-size:70%;

    background-repeat:no-repeat;

    background-position:center;

}

/*=========================================================
GRID ANIMATION
=========================================================*/

.tile{

    animation:fadeBoard .35s ease;

}

@keyframes fadeBoard{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

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

#robot{

    position:absolute;

    width:16%;

    aspect-ratio:1;

    z-index:999;

    transition:

    left .30s linear,

    top .30s linear,

    transform .25s ease;

    pointer-events:none;

}

#robot img{

    width:100%;

    height:100%;

    object-fit:contain;

    filter:

    drop-shadow(

    0 8px 10px rgba(0,0,0,.30)

    );

}

#robot:hover{

    transform:scale(1.08);

}
/*=========================================================
RIGHT PANEL
=========================================================*/

.rightPanel{

    display:flex;

    flex-direction:column;

    gap:18px;

    height:100%;

    overflow:hidden;

}

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

.panel{

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

    backdrop-filter:blur(10px);

    border-radius:20px;

    padding:18px;

    box-shadow:var(--shadow);

}

.panelTitle{

    margin-bottom:15px;

}

.panelTitle h2{

    font-size:1.2rem;

    color:var(--primary);

    margin-bottom:4px;

}

.panelTitle p{

    color:#666;

    font-size:.9rem;

}

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

.commandPanel{

    flex:0 0 auto;

}

/*=========================================================
COMMAND GRID
=========================================================*/

.commandGrid{

    display:grid;

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

    gap:12px;

}

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

.commandCard{

    background:#ffffff;

    border:2px solid #EAEAEA;

    border-radius:18px;

    padding:15px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:8px;

    transition:.25s;

    min-height:95px;

}

.commandCard img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.commandCard span{

    font-size:.9rem;

    font-weight:600;

}

.commandCard:hover{

    transform:translateY(-4px);

    border-color:var(--primary);

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

}

.commandCard:active{

    transform:scale(.96);

}

.commandCard.stop{

    background:#FFE5E5;

}

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

.programPanel{

    flex:1;

    display:flex;

    flex-direction:column;

}

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

#programArea{

    flex:1;

    min-height:180px;

    background:#F8F8F8;

    border:2px dashed #CFCFCF;

    border-radius:18px;

    padding:15px;

    overflow-y:auto;

    display:flex;

    flex-wrap:wrap;

    align-content:flex-start;

    gap:10px;

}

/*=========================================================
PLACEHOLDER
=========================================================*/

.programPlaceholder{

    width:100%;

    color:#888;

    text-align:center;

    margin-top:40px;

    font-size:1rem;

}

/*=========================================================
PROGRAM ITEM
=========================================================*/

.programItem{

    width:60px;

    height:60px;

    border-radius:15px;

    background:#ffffff;

    border:2px solid #DDD;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

}

.programItem img{

    width:32px;

    height:32px;

}

.programItem:hover{

    transform:scale(1.08);

    border-color:var(--primary);

}

/*=========================================================
BUTTON PANEL
=========================================================*/

.buttonPanel{

    display:grid;

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

    gap:12px;

}

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

.btn{

    height:52px;

    border-radius:16px;

    font-size:1rem;

    font-weight:700;

    color:#fff;

    transition:.25s;

}

.btn:hover{

    transform:translateY(-3px);

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

}

.btn:active{

    transform:scale(.97);

}

.success{

    background:var(--success);

}

.warning{

    background:var(--warning);

}

.danger{

    background:var(--danger);

}

.info{

    background:var(--info);

}

.secondary{

    background:#757575;

}

/*=========================================================
INFO PANEL
=========================================================*/

.infoPanel{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.infoPanel h3{

    color:var(--primary);

    margin-bottom:10px;

}

.infoItem{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 14px;

    background:#F7F7F7;

    border-radius:12px;

}

.infoItem span{

    color:#666;

}

.infoItem strong{

    color:var(--primary);

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

.bottomFooter{

    height:70px;

    background:#ffffff;

    display:grid;

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

    gap:15px;

    padding:10px 20px;

    border-top:1px solid var(--border);

    box-shadow:0 -3px 12px rgba(0,0,0,.08);

}

.footerCard{

    background:#F8F8F8;

    border-radius:14px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.footerCard span{

    font-size:.75rem;

    color:#777;

}

.footerCard strong{

    color:var(--primary);

    font-size:1rem;

    margin-top:3px;

}

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

.modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(6px);

    z-index:9999;

}

.modal.show{

    display:flex;

}

.modalContent{

    width:min(92vw,420px);

    background:#ffffff;

    border-radius:24px;

    padding:30px;

    text-align:center;

    box-shadow:var(--shadow);

    animation:popup .35s ease;

}

.modalContent.success{

    border-top:8px solid var(--success);

}

.modalContent.danger{

    border-top:8px solid var(--danger);

}

.modalImage{

    width:130px;

    margin:auto;

    margin-bottom:15px;

}

.modalContent h1{

    color:var(--primary);

    margin-bottom:10px;

}

.modalContent p{

    color:#666;

    line-height:1.6;

}

.starResult{

    font-size:2rem;

    margin:20px 0;

}

.modalButton{

    width:100%;

    height:52px;

    border-radius:16px;

    background:var(--primary);

    color:#ffffff;

    font-size:1rem;

    font-weight:700;

    transition:.25s;

}

.modalButton:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

/*=========================================================
SETTING PANEL
=========================================================*/

#settingPanel{

    position:fixed;

    right:-420px;

    top:0;

    width:400px;

    max-width:92vw;

    height:100dvh;

    background:#ffffff;

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

    transition:.35s;

    z-index:9998;

    display:flex;

    flex-direction:column;

}

#settingPanel.show{

    right:0;

}

.settingHeader{

    height:70px;

    background:var(--primary);

    color:#ffffff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

}

.settingHeader button{

    width:40px;

    height:40px;

    border-radius:10px;

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

    color:#ffffff;

    font-size:1.1rem;

}

.settingBody{

    flex:1;

    overflow-y:auto;

    padding:20px;

}

.settingBody label{

    display:block;

    margin-top:18px;

    margin-bottom:8px;

    font-weight:600;

    color:#444;

}

.settingBody select,

.settingBody input[type="range"]{

    width:100%;

}

.settingBody select{

    height:46px;

    border:2px solid #ddd;

    border-radius:12px;

    padding:0 10px;

    background:#fff;

}

.settingBody input[type="checkbox"]{

    transform:scale(1.25);

    margin-top:5px;

}

#saveSetting{

    margin-top:30px;

    width:100%;

}

/*=========================================================
TOAST
=========================================================*/

#toast{

    position:fixed;

    left:50%;

    bottom:25px;

    transform:translateX(-50%) translateY(100px);

    min-width:260px;

    background:var(--primary);

    color:#ffffff;

    padding:15px 25px;

    border-radius:14px;

    text-align:center;

    transition:.35s;

    z-index:10000;

}

#toast.show{

    transform:translateX(-50%) translateY(0);

}

/*=========================================================
OVERLAY
=========================================================*/

#overlay{

    position:fixed;

    inset:0;

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

    display:none;

    z-index:9997;

}

#overlay.show{

    display:block;

}

/*=========================================================
VERSION
=========================================================*/

#version{

    position:fixed;

    bottom:8px;

    right:15px;

    font-size:.75rem;

    color:#888;

    z-index:100;

}
/*=========================================================
RESPONSIVE ENGINE
Coding Adventure v2.0
=========================================================*/

/*=========================================================
DESKTOP BESAR (1600px ke atas)
=========================================================*/

@media (min-width:1600px){

.mainLayout{

    grid-template-columns:

    minmax(700px,1fr)

    460px;

}

.boardCard{

    width:min(70vw,900px);

}

.commandCard{

    min-height:110px;

}

.statusCard{

    width:110px;

}

}


/*=========================================================
LAPTOP (1200px - 1599px)
=========================================================*/

@media (max-width:1599px){

.mainLayout{

    grid-template-columns:

    minmax(500px,1fr)

    380px;

}

.boardCard{

    width:min(90vw,720px);

}

}


/*=========================================================
LAPTOP KECIL
=========================================================*/

@media (max-width:1280px){

.mainLayout{

    gap:15px;

}

.topHeader{

    padding:0 15px;

}

.statusCard{

    width:82px;

}

.commandGrid{

    gap:10px;

}

}


/*=========================================================
TABLET
=========================================================*/

@media (max-width:1024px){

#gameContainer{

    grid-template-rows:

    auto

    1fr

    auto;

}

.mainLayout{

    grid-template-columns:1fr;

    grid-template-rows:

    auto

    auto;

    overflow:auto;

    padding:15px;

}

.boardSection{

    width:100%;

}

.boardCard{

    width:min(95vw,620px);

    margin:auto;

}

.rightPanel{

    width:100%;

}

.commandGrid{

    grid-template-columns:

    repeat(6,1fr);

}

.buttonPanel{

    grid-template-columns:

    repeat(4,1fr);

}

.bottomFooter{

    grid-template-columns:

    repeat(2,1fr);

}

}


/*=========================================================
HP LANDSCAPE
=========================================================*/

@media (max-width:900px){

.topHeader{

    flex-wrap:wrap;

    height:auto;

    padding:10px;

    gap:10px;

}

.headerCenter{

    width:100%;

    justify-content:center;

}

.statusCard{

    flex:1;

    max-width:90px;

}

}


/*=========================================================
HP
=========================================================*/

@media (max-width:768px){

body{

    overflow:auto;

}

.mainLayout{

    padding:10px;

    gap:12px;

}

.boardCard{

    width:min(96vw,500px);

    padding:10px;

}

#gameBoard{

    gap:4px;

}

.tile{

    border-radius:10px;

}

.commandGrid{

    grid-template-columns:

    repeat(3,1fr);

}

.commandCard{

    min-height:85px;

    padding:10px;

}

.commandCard img{

    width:34px;

}

.commandCard span{

    font-size:.8rem;

}

.buttonPanel{

    grid-template-columns:

    repeat(2,1fr);

}

.bottomFooter{

    height:auto;

    grid-template-columns:1fr;

    gap:8px;

}

.footerCard{

    height:55px;

}

.modalContent{

    width:95vw;

    padding:20px;

}

.settingPanel{

    width:100%;

}

}


/*=========================================================
HP KECIL
=========================================================*/

@media (max-width:480px){

.loadingCard{

    padding:25px;

}

.splashBox{

    padding:25px;

}

.logo{

    width:95px;

}

.splashBox h1{

    font-size:1.6rem;

}

.splashBox h2{

    font-size:1rem;

}

.headerLogo{

    width:45px;

}

.headerLeft h2{

    font-size:1rem;

}

.headerLeft p{

    display:none;

}

.statusCard{

    height:58px;

}

.statusCard h3{

    font-size:1rem;

}

.boardCard{

    width:98vw;

}

.commandGrid{

    grid-template-columns:

    repeat(2,1fr);

}

.programPanel{

    min-height:220px;

}

.infoPanel{

    display:none;

}

}


/*=========================================================
SMART TV
=========================================================*/

@media (min-width:1920px){

html{

    font-size:18px;

}

.boardCard{

    width:min(900px,70vw);

}

.commandCard{

    min-height:120px;

}

}
/*=========================================================
MICRO ANIMATION ENGINE
Coding Adventure SDIT AL-KAHFI
=========================================================*/

/*=========================================================
ROBOT
=========================================================*/

#robot{

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

    transform-origin:center;

}

@keyframes robotIdle{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

/*=========================================================
ROBOT BERJALAN
=========================================================*/

#robot.walk{

    animation:robotWalk .28s infinite alternate;

}

@keyframes robotWalk{

    from{

        transform:translateY(-2px);

    }

    to{

        transform:translateY(2px);

    }

}

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

.tile.goal{

    animation:goalGlow 1.5s infinite;

}

@keyframes goalGlow{

    0%{

        box-shadow:0 0 0 rgba(255,193,7,0);

    }

    50%{

        box-shadow:0 0 25px rgba(255,193,7,.8);

    }

    100%{

        box-shadow:0 0 0 rgba(255,193,7,0);

    }

}

/*=========================================================
AIR BERGERAK
=========================================================*/

.tile.water{

    animation:waterMove 3s linear infinite;

}

@keyframes waterMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:120px 0;

    }

}

/*=========================================================
POHON BERGOYANG
=========================================================*/

.tile.tree{

    animation:treeMove 2.5s ease-in-out infinite;

    transform-origin:bottom center;

}

@keyframes treeMove{

    0%{

        transform:rotate(0deg);

    }

    25%{

        transform:rotate(2deg);

    }

    50%{

        transform:rotate(0deg);

    }

    75%{

        transform:rotate(-2deg);

    }

    100%{

        transform:rotate(0deg);

    }

}

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

.btn{

    position:relative;

    overflow:hidden;

}

.btn::after{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

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

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    transition:.45s;

}

.btn:active::after{

    width:260px;

    height:260px;

}

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

.commandCard{

    position:relative;

}

.commandCard:hover{

    animation:cardFloat .45s ease;

}

@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(-4px);

    }

}

/*=========================================================
PROGRAM ITEM
=========================================================*/

.programItem{

    animation:addProgram .25s ease;

}

@keyframes addProgram{

    from{

        transform:scale(.5);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

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

.modal.show .modalContent{

    animation:popupScale .35s ease;

}

@keyframes popupScale{

    0%{

        transform:scale(.75);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/*=========================================================
TOAST
=========================================================*/

#toast.show{

    animation:toastBounce .45s ease;

}

@keyframes toastBounce{

    0%{

        transform:translate(-50%,120px);

    }

    70%{

        transform:translate(-50%,-8px);

    }

    100%{

        transform:translate(-50%,0);

    }

}

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

.statusCard:hover{

    animation:statusJump .35s ease;

}

@keyframes statusJump{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(-4px);

    }

}

/*=========================================================
BOARD
=========================================================*/

.boardCard{

    animation:boardAppear .5s ease;

}

@keyframes boardAppear{

    from{

        transform:scale(.95);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/*=========================================================
LOADING
=========================================================*/

.loadingCard{

    animation:loadingPulse 1.4s infinite;

}

@keyframes loadingPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

/*=========================================================
REDUCE MOTION
=========================================================*/

@media (prefers-reduced-motion: reduce){

*{

    animation:none !important;

    transition:none !important;

}

}
/*=========================================================
UTILITY CLASS
Coding Adventure SDIT AL-KAHFI
Version 2.0
=========================================================*/

/*=========================================================
DISPLAY
=========================================================*/

.hidden{

    display:none !important;

}

.show{

    display:block !important;

}

.flex{

    display:flex !important;

}

.grid{

    display:grid !important;

}

/*=========================================================
ALIGN
=========================================================*/

.center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.text-center{

    text-align:center;

}

/*=========================================================
CURSOR
=========================================================*/

.pointer{

    cursor:pointer;

}

.notAllowed{

    cursor:not-allowed;

}

/*=========================================================
DISABLED
=========================================================*/

.disabled{

    opacity:.5;

    pointer-events:none;

    filter:grayscale(.8);

}

/*=========================================================
SHADOW
=========================================================*/

.shadow{

    box-shadow:var(--shadow);

}

.round{

    border-radius:var(--radius);

}

/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:8px;

    height:8px;

}

::-webkit-scrollbar-track{

    background:#ECECEC;

    border-radius:20px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/* Firefox */

*{

    scrollbar-width:thin;

    scrollbar-color:var(--primary) #ECECEC;

}

/*=========================================================
SELECTION
=========================================================*/

::selection{

    background:var(--primary);

    color:#ffffff;

}

/*=========================================================
FOCUS
=========================================================*/

button:focus-visible,

input:focus-visible,

select:focus-visible{

    outline:3px solid #2196F3;

    outline-offset:3px;

}

/*=========================================================
IMAGE
=========================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

/*=========================================================
PERFORMANCE
=========================================================*/

#robot,

.tile,

.commandCard,

.programItem,

.btn,

.modalContent{

    will-change:transform;

}

/*=========================================================
GPU ACCELERATION
=========================================================*/

.boardCard,

.commandCard,

.btn{

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*=========================================================
CONTAINMENT
=========================================================*/

.boardSection,

.rightPanel{

    contain:layout paint;

}

/*=========================================================
FULLSCREEN
=========================================================*/

:fullscreen{

    background:#E8F5E9;

}

:-webkit-full-screen{

    background:#E8F5E9;

}

/*=========================================================
PRINT
=========================================================*/

@media print{

header,

footer,

.rightPanel,

#settingPanel,

#toast,

.modal{

    display:none !important;

}

body{

    background:#ffffff;

}

}

/*=========================================================
RETINA DISPLAY
=========================================================*/

@media

(-webkit-min-device-pixel-ratio:2),

(min-resolution:192dpi){

.commandCard img,

#robot img{

    image-rendering:auto;

}

}

/*=========================================================
HIGH CONTRAST
=========================================================*/

@media (prefers-contrast:more){

.panel{

    border:2px solid #000;

}

.btn{

    border:2px solid #000;

}

}

/*=========================================================
DARK MODE (Future Ready)
=========================================================*/

body.dark{

    background:#1F1F1F;

    color:#ffffff;

}

body.dark .panel{

    background:#2A2A2A;

}

body.dark .statusCard{

    background:#3A3A3A;

}

body.dark .footerCard{

    background:#333333;

}

/*=========================================================
END OF FILE
=========================================================*/