/* variables */
:root{
    --primClr: #3F9CE6;
    --secClr: #005CEF;
    --accClr: #D69523;

    --primfntClr: #1B1464;
    --secfntClr: #00D1F0;
}



/*============================ common style============================*/
@font-face {
    font-family: 'LuckiestGuys';
    src: url(./font/LuckiestGuy-Regular.ttf);
}

.d-none{
    display: none !important;
}

.menuBtn{
    cursor: pointer;
    background-color: var(--primClr);
    color: var(--primfntClr);
    border: none;
    padding: 15px 50px;
    border-radius: 10px;
    font-family: 'LuckiestGuys';
    width: 250px;
    border: 1px solid transparent;
}

.menuBtn:hover {
    background-color: var(--secClr);
    color: var(--secfntClr);
    border: 1px solid var(--accClr);
}

.gameBtn{
    cursor: pointer;
    width: 40px;
    height: 40px;
    border: none;
    background-color: white;
}

.gameBtn:hover{
    background-color: var(--accClr);
}

/*============================ page ============================*/
body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'LuckiestGuys';
    margin: 0;
    height: 100vh;
    width: 100vw;
    color: var(--primfntClr);
}

h1{
    font-size: 50px;
    margin: 0;
    margin-bottom: 100px;
    text-align: center;
}

#gameWindow {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(./img/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


#startScreen,
#pauseScreen{
    width: min(1100px,100%);
    height: min(600px,100%);
    background-image: url('./img/06_Menu/Menubackground.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    border-radius: 20px;
}


#gameScreen{
    position: relative;
    width: min(1100px,100%);
    height: min(600px,100%);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    background-color: black;
    border-radius: 20px;
}


/*============================ game screen  ============================*/

#gameCanvas{
    border-radius: 20px;
    max-width: 100%;
    max-height: 100%;
}

#gameBtnGroupMenu{
    position: absolute;
    right: center;
    top: 20px;
    display: flex;
    gap: 60px;
}

#muteBtn{
    mask-image: url('./img/07_icons/sound-on.svg'); 
    mask-size: contain; 
    -webkit-mask-image:url('./img/07_icons/sound-on.svg');  
    -webkit-mask-size: contain; 
}

#fullscreenBtn{
    mask-image: url('./img/07_icons/fullscreen-on.svg'); 
    mask-size: contain;
    -webkit-mask-image:url('./img/07_icons/fullscreen-on.svg'); 
    -webkit-mask-size: contain;
}

#menuBtn{
    mask-image: url('./img/07_icons/menu.svg'); 
    mask-size: contain; 
    -webkit-mask-image:url('./img/07_icons/menu.svg');  
    -webkit-mask-size: contain; 
}


#mobileCtrlBtn{
    mask-image: url('./img/07_icons/mobileCtrl-off.svg'); 
    mask-size: contain; 
    -webkit-mask-image:url('./img/07_icons/mobileCtrl-off.svg');  
    -webkit-mask-size: contain; 
}


#joystick{
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 40%;
    left: 20px;
    bottom: 20px;
    background-color: var(--accClr);
}

#gameBtnGroupCtrl{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.15);
    border-top-left-radius: 80%;
}

#gameBtnGroupCtrl button{
    position: absolute;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: 1px solid var(--accClr);
}

#gameBtnGroupCtrl button.playAnimation{
    animation-name: gameBtnAnimation;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
}

@keyframes gameBtnAnimation {
    50% {transform: scale(0.6);}
}


#slapAttackBtn{
    left: 10px;
    bottom: 10px;
    background-image: url('./img/01_Sharkie/4_Attack/FinSlap/5.png');
    background-size: cover;
    background-position: 0% 100%;
    background-color: var(--secfntClr);
}

#bubbleShotAttackBtn{
    left: 50px;
    bottom: 90px;
    background-image: url('./img/01_Sharkie/4_Attack/BubbleTrap/op1_normalBubble/7.png');
    background-size: cover;
    background-position: 0% 100%;
    background-color: var(--secClr);
}

#bubbleChangeBtn{
    right: 10px;
    top: 10px;
    background-image: url('./img/01_Sharkie/4_Attack/BubbleTrap/PoisonedBubble.png');
    background-size: cover;
    background-position: 50% 50%;
    background-color: var(--primfntClr);
    background-size: 50%;
    background-repeat: no-repeat;
}


/*============================ style for overlay ============================*/

#overlay{
    position: absolute; 
    background-color: rgba(27, 20, 100, 0.6);
    width: min(1100px,100vw);
    height: min(600px,100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}


#ovlyCard{
    position: relative;
    box-sizing: border-box;
    width: 80%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background-color: var(--primClr);
    border-radius: 20px;
    font-size: 30px;
}


#ovlyCloseBtn{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 25px;
    height: 25px;
    mask-image: url('./img/07_icons/close.svg'); 
    mask-size: contain; 
    -webkit-mask-image:url('./img/07_icons/close.svg');  
    -webkit-mask-size: contain; 
}

.highlight-text{
    color: var(--accClr);
}

/*============================ overlay Control ============================*/

#controlTable{
    width: 100%;
    border-spacing: 1px 30px;
}


#controlTable td{
    text-align: center;
    vertical-align: middle;
}

#controlTable td:nth-child(odd){
    width: 25%;
}


.ctrlKeyImg{
    background-color: var(--accClr);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 2px 1px;
}


#ctrlMobileCtrlImg{
    width: 100px;
    height: 100px;
    object-fit: contain;
}


.ctrlMobileBtnImg{
    background-color: var(--secClr);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: 0% 100%;
}


/*============================ overlay Settings ============================*/

.wrapperSettings{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10%;
    padding-right: 10%;
}


.setttingsImg{
    background-color: transparent;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 2px 1px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 100ms ease-in-out;
}

.setttingsImg:hover{
    background-color: var(--secClr);
    transition: all 100ms ease-in-out;
}

.set-active{
    background-color: var(--accClr) !important;
}

#wrapperChoices{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    width: 50%;
}

#soundON,
#soundMUTE,
#mobileCtrlON,
#mobileCtrlOFF{
    padding: 5px;
    box-sizing: border-box;
    border-radius: 10px;
}

.soundSlider{
    width: 60%;
    accent-color: var(--accClr);
    cursor: pointer;
}


/*============================ overlay Introduction ============================*/
#wrapperIntroduction{
    display: flex;
    align-items: center;
    gap: 25px;
    height: 100%;
    box-sizing: border-box;
    padding: 30px;
}




#navIntroduction{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 100%;
    width: 20%;
}


#navIntroduction button{
    border: none;
    height: calc(100%/7);
    background-color: transparent;
    color: var(--primfntClr);
    font-family: 'LuckiestGuys';
    cursor: pointer;
    transition: all 100ms ease-in-out;
    padding: 10px;
    border-radius: 10px;
}

#navIntroduction button:hover{
    background-color: var(--primfntClr);
    color: var(--secfntClr);
    transition: all 100ms ease-in-out;
}


#navIntroduction button.active{
    color: var(--accClr);
    background-color: var(--secClr);
}

#tabPufferfish img,
#tabJellyfish img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#tabSharky img{
    height: 80%;
    width: 65%;
    object-fit: cover;
    object-position: 50% 70%;
}


#tabWhale img{
    height: 100%;
    width: 50%;
    object-fit: cover;
    object-position: 50% 75%;
}

#tabCoin img{
    height: 60%;
    width: 60%;
    object-fit: contain;
}

#tabPoison img,
#tabHeart img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#separateLine{
    width: 3px;
    height: 100%;
    background-color: var(--secClr);
    border-radius: 5px;
}

.tabContentIntroduciton{
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    width: 80%;
    font-size: 20px;
    overflow: auto;
    scrollbar-width: none;
}

#attackTableSharky{
    width: 100%;
}

#attackTableSharky tr:not(:first-child){
    font-size: 16px;
}

#attackTableSharky td{
    width: 33%;
}

.starImg{
    width: 20px;
    height: 20px;
    background-color: var(--accClr);
    mask-image: url("./img/07_icons/star.svg");
    mask-size: contain;
}

.gameImg{
    width: 40px;
    height: 40px;
}

.gameImgCoin{
    width: 30px;
    height: 30px;
}

/*============================ overlay LoadingScreen: LoadingBar ============================*/
#loadingBarFrame{
    position: relative;
    width: calc(100% - 50px);
    border: 2px solid var(--accClr);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    margin-left: 20px;
    margin-right: 20px;
}

#loadingBar{
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--primfntClr);
    width: 0%;
    height: 100%;
    border-radius: 5px;
}

#loadingBarText{
    position: relative;
    color: var(--primfntClr);
    font-size: 20px;
}


/*============================ overlay win & loose screen ============================*/
#wrapperWinScreen
{
    position: relative;
    width: calc(100%);
    height: calc(100%);
    background-image: url(./img/06_Menu/WinscreenBackground.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 33% 50%;
}

#wrapperLooseScreen
{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(./img/06_Menu/LoosescreenBackground.png); /* bild noch ändern*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 33% 50%;
    background-color: #3A77C1;
    border-radius: 20px;
}

.wrapperResult{
    position: absolute;
    right: 100px;
    bottom: 40px;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.wrapperResultElement{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.wrapperBtnGroup{
    position: absolute;
    right: 0;
    top: 100px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
}


/*============================ overlay turn device screen ============================*/
#imgTurnDevice{
    height: 50%;
    width: 50%;
    animation: turnDeviceAnimation 3s linear 2s infinite normal;
}

@keyframes turnDeviceAnimation {
    0% {transform: rotate(0deg);}
    15%{transform: rotate(-90deg);}
    85%{transform: rotate(-90deg);}
}



/*============================ Responsive Design ============================*/
/*===========================================================================*/

@media (max-width: 1100px){
    #gameCanvas{
        border-radius: unset;
    }
}

@media (max-height: 600px){
    /*============================ page ============================*/
    h1{
        margin-bottom: 25px;
        font-size: 30px;
    }

    /*============================ game screen  ============================*/
    #startScreen,
    #pauseScreen{
        gap: 15px;
    }

    #gameBtnGroupMenu{
        gap: 40px;
    }

    /*============================ style for overlay ============================*/
    #ovlyCard{
        font-size: 20px;
    }

    /*============================ overlay Control ============================*/
    #controlTable{
        border-spacing: 1px 20px;
    }
    .ctrlKeyImg{
        width: 40px;
        height: 40px;
    }

    #ctrlMobileCtrlImg{
        width: 80px;
        height: 80px;
    }
    .ctrlMobileBtnImg{
        width: 50px;
        height: 50px;
    }

    /*============================ overlay Introduction ============================*/
    .tabContentIntroduciton{
        font-size: 15px;
    }

    #attackTableSharky tr:not(:first-child){
    font-size: 12px;
}
}

@media (max-height: 450px){
        /*============================ common style============================*/
        .gameBtn{
            width: 25px;
            height: 25px;
        }
        /*============================ game screen  ============================*/
        #gameBtnGroupMenu{
        gap: 25px;
        }
        /*============================ style for overlay ============================*/
        #ovlyCard{
            gap: 10px;
        }

        /*============================ overlay Control ============================*/
        #controlTable{
            border-spacing: 1px 10px;
        }
        .ctrlKeyImg{
            width: 30px;
            height: 30px;
        }
    
        #ctrlMobileCtrlImg{
            width: 60px;
            height: 60px;
        }
        .ctrlMobileBtnImg{
            width: 40px;
            height: 40px;
        }

        /*============================ overlay Introduction ============================*/
        .gameImg{
            width: 30px;
            height: 30px;
        }
        
        .gameImgCoin{
            width: 20px;
            height: 20px;
        }

        /*============================ overlay LoadingScreen: LoadingBar ============================*/
        #loadingBarFrame{
            height: 15px;
        }

        /*============================ overlay win & loose screen ============================*/
        .wrapperBtnGroup{
            top: 50px;
        }

        .wrapperResult{
            right: 75px;
            bottom: 30px;
            gap: 5px;
        }

        .wrapperBtnGroup button{
            padding: 15px 25px !important;
            width: 150px;
        }

        /*============================ overlay turn device screen ============================*/
        #imgTurnDevice{
            height: 30%;
            width: 30%;
        }
}