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

/*=========================================================
LAYOUT ENGINE
=========================================================*/

html,
body{

    width:100%;

    height:100%;

    overflow:hidden;

}

body{

    display:flex;

    flex-direction:column;

}

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

#gameContainer{

    display:grid;

    grid-template-rows:

        auto
        minmax(0,1fr)
        auto;

    width:100%;

    height:100dvh;

    overflow:hidden;

}

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

.topHeader{

    flex-shrink:0;

}

/*=========================================================
MAIN
=========================================================*/

.mainLayout{

    display:grid;

    grid-template-columns:

        minmax(0,1fr)
        380px;

    gap:20px;

    padding:18px;

    overflow:hidden;

    min-height:0;

}

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

.boardSection{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:0;

    min-height:0;

}

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

.boardCard{

    width:100%;

    max-width:720px;

    aspect-ratio:1;

    min-width:280px;

    min-height:280px;

}

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

.rightPanel{

    display:flex;

    flex-direction:column;

    gap:15px;

    overflow:hidden;

    min-height:0;

}

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

.commandPanel{

    flex:0 0 auto;

}

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

.programPanel{

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:0;

}

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

#programArea{

    flex:1;

    overflow-y:auto;

    min-height:140px;

}

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

.buttonPanel{

    flex:0 0 auto;

}

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

.infoPanel{

    flex:0 0 auto;

}

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

.bottomFooter{

    flex-shrink:0;

}
/*=========================================================
RESPONSIVE ENGINE
=========================================================*/

/*==============================
DESKTOP BESAR
==============================*/

@media (min-width:1600px){

.mainLayout{

    grid-template-columns:

    minmax(700px,1fr)

    460px;

}

.boardCard{

    max-width:900px;

}

}


/*==============================
DESKTOP
==============================*/

@media (max-width:1599px){

.mainLayout{

    grid-template-columns:

    minmax(450px,1fr)

    380px;

}

}


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

@media (max-width:1366px){

.mainLayout{

    gap:15px;

    padding:15px;

}

.boardCard{

    max-width:620px;

}

.commandCard{

    min-height:85px;

}

}


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

@media (max-width:1024px){

.mainLayout{

    grid-template-columns:1fr;

    grid-template-rows:

    auto

    auto;

    overflow:auto;

}

.boardCard{

    width:min(90vw,620px);

    margin:auto;

}

.rightPanel{

    width:100%;

}

.commandGrid{

    grid-template-columns:

    repeat(6,1fr);

}

.buttonPanel{

    grid-template-columns:

    repeat(4,1fr);

}

}


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

@media (max-width:900px){

.mainLayout{

    padding:12px;

}

.commandGrid{

    grid-template-columns:

    repeat(4,1fr);

}

.buttonPanel{

    grid-template-columns:

    repeat(2,1fr);

}

}


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

@media (max-width:768px){

body{

    overflow:hidden;

}

.mainLayout{

    padding:10px;

    gap:12px;

}

.boardCard{

    width:min(96vw,500px);

}

.commandGrid{

    grid-template-columns:

    repeat(3,1fr);

}

}


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

@media (max-width:480px){

.mainLayout{

    padding:8px;

}

.boardCard{

    width:98vw;

    min-width:260px;

}

.commandGrid{

    grid-template-columns:

    repeat(2,1fr);

}

.buttonPanel{

    grid-template-columns:1fr;

}

.infoPanel{

    display:none;

}

.bottomFooter{

    grid-template-columns:1fr;

}

}


/*==============================
LAYAR PENDEK
(Notebook / Proyektor)
==============================*/

@media (max-height:700px){

.topHeader{

    height:70px;

}

.bottomFooter{

    height:55px;

}

.mainLayout{

    padding:10px;

}

.commandCard{

    min-height:72px;

}

.programPanel{

    min-height:160px;

}

}


/*==============================
LAYAR SANGAT PENDEK
==============================*/

@media (max-height:600px){

.topHeader{

    height:60px;

}

.bottomFooter{

    display:none;

}

.mainLayout{

    padding:8px;

}

.commandCard{

    min-height:65px;

}

}
/*=========================================================
SMART BOARD ENGINE
Menghitung ukuran papan secara otomatis
=========================================================*/

:root{

    --header-height:85px;

    --footer-height:70px;

    --layout-gap:20px;

    --board-max:720px;

}

/*=========================================================
AREA TENGAH
=========================================================*/

.mainLayout{

    height:

    calc(

    100dvh

    - var(--header-height)

    - var(--footer-height)

    );

}

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

.boardSection{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

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

.boardCard{

    width:

    min(

        95vw,

        calc(

            100dvh

            - var(--header-height)

            - var(--footer-height)

            - 50px

        ),

        var(--board-max)

    );

    aspect-ratio:1;

}

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

#gameBoard{

    width:100%;

    height:100%;

}

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

#robot{

    width:18%;

    aspect-ratio:1;

}

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

.rightPanel{

    height:100%;

    display:flex;

    flex-direction:column;

}

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

.programPanel{

    flex:1;

    min-height:0;

}

#programArea{

    flex:1;

    overflow-y:auto;

}

/*=========================================================
JIKA TINGGI LAYAR KECIL
=========================================================*/

@media (max-height:720px){

:root{

    --header-height:70px;

    --footer-height:55px;

}

.boardCard{

    width:

    min(

        90vw,

        calc(

            100dvh

            - 145px

        )

    );

}

}

/*=========================================================
NOTEBOOK 1366x768
=========================================================*/

@media (max-height:768px){

.boardCard{

    max-width:560px;

}

.commandCard{

    min-height:75px;

}

}

/*=========================================================
PROJECTOR
=========================================================*/

@media (max-height:650px){

.boardCard{

    max-width:480px;

}

.programPanel{

    min-height:150px;

}

}

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

@media (min-width:1900px){

.boardCard{

    max-width:850px;

}

}
/*=========================================================
ADAPTIVE LAYOUT ENGINE
=========================================================*/

/*=========================================================
TRANSISI LAYOUT
=========================================================*/

.mainLayout,
.boardCard,
.rightPanel,
.commandPanel,
.programPanel,
.buttonPanel{

    transition:

        all .35s ease;

}

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

.mainLayout{

    align-items:stretch;

}

.boardSection{

    order:1;

}

.rightPanel{

    order:2;

}

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

@media (max-width:1024px) and (orientation:portrait){

.mainLayout{

    grid-template-columns:1fr;

    grid-template-rows:

        auto
        auto;

}

.boardSection{

    order:1;

}

.rightPanel{

    order:2;

    width:100%;

}

.boardCard{

    margin:auto;

}

}

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

@media (max-width:1024px) and (orientation:landscape){

.mainLayout{

    grid-template-columns:

        minmax(0,1fr)

        340px;

}

.boardCard{

    max-width:520px;

}

}

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

@media (max-width:768px) and (orientation:portrait){

.mainLayout{

    display:flex;

    flex-direction:column;

    overflow:auto;

}

.boardSection{

    width:100%;

}

.boardCard{

    width:min(

        94vw,

        calc(100dvh - 260px)

    );

}

.rightPanel{

    width:100%;

    margin-top:15px;

}

.commandPanel{

    order:1;

}

.programPanel{

    order:2;

}

.buttonPanel{

    order:3;

}

.infoPanel{

    order:4;

}

}

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

@media (max-width:900px) and (orientation:landscape){

.mainLayout{

    grid-template-columns:

        minmax(0,1fr)

        300px;

}

.boardCard{

    width:

    min(

        65vw,

        calc(100dvh - 140px)

    );

}

.commandGrid{

    grid-template-columns:

        repeat(2,1fr);

}

}

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

@media (min-width:1920px){

.mainLayout{

    grid-template-columns:

        minmax(900px,1fr)

        520px;

}

.boardCard{

    max-width:900px;

}

}

/*=========================================================
ULTRAWIDE MONITOR
=========================================================*/

@media (min-width:2400px){

.mainLayout{

    max-width:2200px;

    margin:auto;

}

}

/*=========================================================
BOARD TETAP PERSEGI
=========================================================*/

.boardCard{

    aspect-ratio:1/1;

}

/*=========================================================
RIGHT PANEL SCROLL
=========================================================*/

.rightPanel{

    overflow:hidden;

}

.programPanel{

    overflow:hidden;

}

#programArea{

    overflow-y:auto;

    overflow-x:hidden;

}

/*=========================================================
FOOTER TETAP
=========================================================*/

.bottomFooter{

    position:relative;

    z-index:5;

}
/*=========================================================
LAYOUT OPTIMIZER
Coding Adventure SDIT AL-KAHFI
=========================================================*/

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

:root{

    --header-height:clamp(60px,8vh,85px);

    --footer-height:clamp(55px,7vh,70px);

    --panel-width:clamp(300px,28vw,420px);

    --board-size:clamp(280px,70vh,720px);

}

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

.topHeader{

    min-height:var(--header-height);

}

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

.bottomFooter{

    min-height:var(--footer-height);

}

/*=========================================================
MAIN
=========================================================*/

.mainLayout{

    width:100%;

    height:100%;

    max-width:1920px;

    margin:auto;

}

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

.boardCard{

    width:min(

        95vw,

        var(--board-size)

    );

    max-width:720px;

    max-height:720px;

}

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

#gameBoard{

    width:100%;

    height:100%;

}

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

.tile{

    border-radius:

    clamp(

        8px,

        1vw,

        18px

    );

}

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

.commandCard{

    min-height:

    clamp(

        72px,

        10vh,

        100px

    );

}

.commandCard img{

    width:

    clamp(

        28px,

        3vw,

        48px

    );

}

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

.btn{

    min-height:

    clamp(

        46px,

        6vh,

        56px

    );

    font-size:

    clamp(

        .9rem,

        1vw,

        1rem

    );

}

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

.statusCard{

    min-width:

    clamp(

        70px,

        8vw,

        110px

    );

}

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

.infoPanel{

    gap:

    clamp(

        8px,

        1vh,

        14px

    );

}

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

#programArea{

    scroll-behavior:smooth;

    overscroll-behavior:contain;

}

/*=========================================================
NO HORIZONTAL SCROLL
=========================================================*/

html,

body,

#gameContainer,

.mainLayout{

    overflow-x:hidden;

}

/*=========================================================
TOUCH DEVICE
=========================================================*/

@media (pointer:coarse){

button,

.commandCard,

.programItem{

    min-width:48px;

    min-height:48px;

}

}

/*=========================================================
MOUSE DEVICE
=========================================================*/

@media (pointer:fine){

.commandCard:hover{

    cursor:pointer;

}

}

/*=========================================================
SAFE AREA (iPhone)
=========================================================*/

body{

    padding-left:env(safe-area-inset-left);

    padding-right:env(safe-area-inset-right);

    padding-top:env(safe-area-inset-top);

    padding-bottom:env(safe-area-inset-bottom);

}

/*=========================================================
LANDSCAPE PHONE
=========================================================*/

@media (max-height:500px){

.mainLayout{

    gap:8px;

}

.commandCard{

    min-height:60px;

}

.bottomFooter{

    display:none;

}

}

/*=========================================================
ULTRA HD TV
=========================================================*/

@media (min-width:2560px){

html{

    font-size:20px;

}

.boardCard{

    max-width:1000px;

}

}
/*=========================================================
LAYOUT FINAL ENGINE
Coding Adventure SDIT AL-KAHFI
Version 2.0
=========================================================*/


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

.boardCard,
#gameBoard,
.tile,
#robot,
.rightPanel,
.programPanel{

    contain:layout paint style;

}


/*=========================================================
CONTENT VISIBILITY
=========================================================*/

.rightPanel{

    content-visibility:auto;

    contain-intrinsic-size:800px;

}


/*=========================================================
SMOOTH RESIZE
=========================================================*/

.mainLayout,
.boardCard,
.rightPanel,
.commandPanel,
.programPanel,
.buttonPanel,
.infoPanel{

    transition:

    width .30s ease,

    height .30s ease,

    max-width .30s ease,

    max-height .30s ease,

    gap .30s ease,

    padding .30s ease;

}


/*=========================================================
GRID GAP
=========================================================*/

.mainLayout{

    gap:

    clamp(

        10px,

        1.2vw,

        20px

    );

}


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

.rightPanel{

    width:100%;

    max-width:var(--panel-width);

}


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

.boardSection{

    display:flex;

    justify-content:center;

    align-items:center;

}


/*=========================================================
UTILITY
=========================================================*/

.row{

    display:flex;

    flex-direction:row;

}

.column{

    display:flex;

    flex-direction:column;

}

.fill{

    width:100%;

    height:100%;

}

.grow{

    flex:1;

}

.shrink{

    flex-shrink:0;

}

.wrap{

    flex-wrap:wrap;

}

.noWrap{

    flex-wrap:nowrap;

}

.spaceBetween{

    justify-content:space-between;

}

.alignCenter{

    align-items:center;

}


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

:fullscreen #gameContainer{

    width:100vw;

    height:100vh;

}

:fullscreen .boardCard{

    max-width:900px;

}

:fullscreen .rightPanel{

    max-width:460px;

}


/* Chrome */

:-webkit-full-screen #gameContainer{

    width:100vw;

    height:100vh;

}


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

@media print{

.mainLayout{

    display:block;

}

.rightPanel,

.bottomFooter,

.topHeader{

    display:none;

}

.boardCard{

    margin:auto;

}

}


/*=========================================================
WINDOW RESIZE
=========================================================*/

@media (prefers-reduced-motion:no-preference){

.mainLayout{

    transition:

    all .35s ease;

}

}


/*=========================================================
NO OVERFLOW
=========================================================*/

html,

body,

#gameContainer{

    overflow:hidden;

}


/*=========================================================
SMALL HEIGHT FIX
=========================================================*/

@media (max-height:650px){

.topHeader{

    min-height:60px;

}

.bottomFooter{

    min-height:50px;

}

.boardCard{

    width:

    min(

        80vh,

        520px

    );

}

}


/*=========================================================
VERY LARGE SCREEN
=========================================================*/

@media (min-width:3000px){

html{

    font-size:24px;

}

.boardCard{

    max-width:1100px;

}

.rightPanel{

    max-width:520px;

}

}


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