@font-face {
    font-family: 'BigNoodleTitling';
    src: url('../data/BigNoodleTitling.woff') format('woff');
}

* {
    margin: 0; padding: 0; user-select: none;
}

body {
    background-color: #005000;
    overflow: hidden;
}

#selectExit {
    position: absolute; top: 0px; left: 0px;
    width: 100vw; height: 100vh;
    display: none;
}

#phaserGame {
    position: absolute; top: 0px; left: 0px;
}

#logoFlex {
    position: absolute; bottom: 3vh; width: 100vw;
    display: flex; justify-content: center;
}

@media (max-height: 800px) {
    #logoFlex {
        display: none;
    }
}

#gameUI {
    width: 100vw; height: 34px; margin: auto;

    font-family: 'BigNoodleTitling', sans-serif;
    color: #3a9e3a;
    font-size: 26px;
    white-space: nowrap; 

    opacity: 0;

    display: flex; flex-direction: row; justify-content: center;
    transform: translateY(6px);
}

@media (max-height: 830px) {
    #gameUI {
        height: 30px;
        transform: translateY(2px);
    }

    #difficultySelection {
        top: 32px;
    }
}

#gameUI_TurnFlex {
    display: flex; flex-direction: row;
}

#gameUI_statsFlex {
    display: flex; flex-direction: row;
}

#gameUI_GameFlex {
    display: flex; flex-direction: row;
}

#gameUI_MiddleFlex {
    display: flex; flex-direction: row;
}

#gameUI_line {
    height: 1px; margin: auto;
    width: 155vh;
    background-color: #165e14;
    transform: translateY(6px);
}

#gameUI_name {
    transform: translateY(-6px);
    font-size: 38px;
    margin: 0px 40px;
}

#gameUI_timer {
    min-width: 100px;
}

#gameUI_moves, #gameUI_stock, #gameUI_pass {
    min-width: 50px;
}

#gameUI_nameTop {
    display: none;
}

.gameUI_button, .gameUI_stats {
    margin: 0px 0.8vw;
}

.gameUI_stats {
    color: #ffffff;
}

.mouseHover {
    cursor: pointer;
    transition: 0.3s;
}

.mouseHoverWhite {
    cursor: pointer;
    transition: 0.3s;
}

@media(hover: hover) and (pointer: fine) {
    .mouseHover:hover {
        color: #00b050 !important;
    }

    .mouseHoverWhite:hover {
        color: #ffffff !important;
    }

    .issTurnButton:hover {
        background-color: #ffffff !important;
        color: #00b050 !important;
    }

    #issTimeLimitCopy:hover {
        opacity: 1 !important;
    }

    #gwTimeLimitCopy:hover {
        opacity: 1 !important;
    }
}

.fa-mouse-pointer, .fa-layer-group, .fa-sync, .fa-clock {
    color: #3a9e3a;
}

.fa-mouse-pointer, .fa-layer-group, .fa-sync {
    transform: translateY(-2px);
    margin-right: 2px;
    font-size: 18px;
}

.gameWin_stats>.fa-mouse-pointer, .gameWin_stats>.fa-sync {
    transform: translateY(-4px);
    font-size: 29px;
}

.fa-lightbulb, .fa-pause-circle {
    transform: translateY(-2px);
    margin-right: 1px;
    font-size: 19px;
}

.fa-clock {
    transform: translateY(-2px);
    margin-right: 2px;
    font-size: 21px;
}

.gameWin_stats>.fa-clock {
    transform: translateY(-3px);
    font-size: 31px;
}

.fa-caret-down {
    transform: translateY(-2px);
    margin-left: 2px;
    font-size: 21px;
}




#difficultySelection {
    position: absolute; top: 38px; left: 24%;
    width: 280px; height: 275px;

    display: flex; flex-direction: column;

    background-color: #005000;
    border: 4px solid #2c8b2c;

    font-family: 'BigNoodleTitling', sans-serif; color: #3a9e3a;
    font-size: 26px;

    opacity: 0; display: none;
}

@media (max-width: 1500px) {
    #difficultySelection {
        left: 18%;
    }
}

#difficultySelection_line {
    transform: translateX(10px);
    width: 260px; height: 2px;
    background-color: #165e14;
}

.difficultySelection_type {
    text-align: center;
    margin-top: 10px;
}

.difficultySelection_group {
    display: flex; justify-content: center;
}

.difficultySelection_button {
    margin: 10px 20px;
}



#gameOverlay {
    position: absolute; top: 0px; left: 0px;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 80, 0, 0.75);
    backdrop-filter: blur(12px);

    font-family: 'BigNoodleTitling', sans-serif;

    display: none;
    justify-content: center; align-items: center;
    text-align: center;

    opacity: 0;
}

#gameOverlay_gamePause {
    display: none;
    transform: translateY(-4vh) scale(1);
}

#gameOverlay_gameWin {
    display: none;
    transform: translateY(-3vh) scale(1);
}

@media (max-width: 640px), (max-height: 710px) {
    #gameOverlay_gameWin {
        transform: translateY(-3vh) scale(0.65);
    }
}

@media (max-width: 490px), (max-height: 570px) {
    #gameOverlay_gameWin {
        /* transform: translateY(-3vh) scale(0.5); */
    }
}

#gameOverlay_gameWin_stats {
    display: flex; justify-content: center; margin: 0px 0px;
}

.gameOverlay_bigLetters {
    color: #ffffff;
    font-size: 10vh;
}

#gameOverlay_gamePause>.gameOverlay_bigLetters {
    font-size: 137px;
}

.gameOverlay_line {
    width: auto; height: 3px;
    background-color: #ffffff;
    margin: 20px auto; border-radius: 5px;
}

#gameOverlay_gamePause>.gameOverlay_line {
    width: 320px;
    margin: 3px auto 20px auto;
}

.gameOverlay_smallLetters {
    color: #ffffff !important;
    font-size: 5vh;
}

#gameWin_newGame {
    display: flex; justify-content: center;
    margin-top: 1vh; margin-bottom: 1vh;
}

#gameWin_newGame_mode1, #gameWin_newGame_mode2, #gameWin_newGame_mode3 {
    margin: 0px 2vh;
}

#gameWin_newGame_mode1_copy, #gameWin_newGame_mode2_copy, #gameWin_newGame_mode3_copy {
    margin-bottom: 15px;
    font-size: 4vh !important;
}

.gameWin_stats {
    color: #ffffff;
    font-size: 4vh; 
    margin: 0px 40px;
}

#rotatePhone {
    position: absolute; bottom: 0px; left: 0px;
    width: 100vw; height: 25vh;

    font-family: 'BigNoodleTitling', sans-serif;
    color: #ffffff;
    text-align: center;

    font-size: 5vh;
    display: none;
}

@media (max-aspect-ratio: 10/16) {
    #rotatePhone {
        display: block;
    }
}

@media (max-height: 730px) {
    #rotatePhone {
        display: none;
    }
}



@media (max-width: 1400px) {
    #gameUI_name {
        display: none;
    }
}

@media (max-width: 1270px) {
    #gameUI_moves {
        display: none;
    }

    #gameUI_line {
        display: none;
    }
}

@media (max-width: 1120px) {
    #gameUI {
        transform: scale(0.86) translateY(1.2vw);
    }
}



@media (max-height: 700px) {
    #gameUI_line {
        display: none;
    }
}






@media (max-aspect-ratio: 1/1) {
    #gameUI {
        position: absolute; top: 52vw; left: 0px;
        width: 100vw; height: 50vh;
        flex-direction: column;
        text-align: center;
        font-size: 28px; 
    }

    #gameUI_name {
        display: none;
    }
    
    #gameUI_nameTop {
        font-size: 32px; 
        display: block;
        margin-bottom: 2vh;
    }

    #gameUI_statsFlex {
        justify-content: center;
    }

    #gameUI_statsFlex div {
        margin: 0px 10px;
    }

    #gameUI_TurnFlex {
        flex-direction: column;
        justify-content: center;
        margin-bottom: 2vh;
    }

    #gameUI_TurnFlex div {
        margin: 0px 30px;
    }

    #gameUI_GameFlex {
        justify-content: center;
        margin-bottom: 2vh;
    }

    #gameUI_GameFlex div {
        margin: 0px 20px;
    }

    #gameUI_MiddleFlex {
        justify-content: center;
        margin-bottom: 2vh;
    }

    #gameUI_MiddleFlex div {
        margin: 0px 10px;
    }

    .fa-mouse-pointer, .fa-layer-group, .fa-sync, .fa-clock, .fa-lightbulb, .fa-pause-circle, .fa-caret-down {
        transform: translateY(-1px);
        font-size: 20px;
    }

    #gameUI_line {
        display: none;
    }

    #difficultySelection {
        position: absolute; top: 40vh; left: 5vw;
    }

    #gameUI_timer {
        text-align: left;
        min-width: 120px;
    }
    
    #gameUI_moves, #gameUI_stock, #gameUI_pass {
        text-align: left;
        min-width: 50px;
    }

    #gameUI_pass, #gameUI_stock, #gameUI_moves, #gameUI_timer {
        display: block !important;
    }

    #gameUI {
        transform: scale(1) translateY(0vw) !important;
    }
}





@media screen and (min-aspect-ratio: 16/8) and (max-height: 640px) {
    #gameUI {
        position: absolute; top: 0px; left: 76vw;
        width: 180px; height: 100vh;
        flex-direction: column;
        font-size: 30px;
    }

    #gameUI_moves, #gameUI_stock, #gameUI_pass {
        min-width: 42px;
    }

    #phaserGame {
        transform: translateX(-12vw);
    }

    #gameUI_name {
        display: none;
    }
    
    #gameUI_nameTop {
        font-size: 40px; 
        display: block;
        margin-bottom: 2vh;
    }

    #gameUI_TurnFlex {
        flex-direction: column;
        margin-bottom: 2vh;
    }

    #gameUI_GameFlex {
        flex-direction: column;
        margin-bottom: 2vh;
    }

    #gameUI_MiddleFlex {
        flex-wrap: wrap;
    }

    #gameUI_undo, #gameUI_redo {
        flex: 0 0 33.3333%;
        margin-bottom: 2vh;
    }

    #gameUI_statsFlex div {
        margin-right: 5px;
    }

    #gameUI_pauseGame {
        margin-bottom: 2vh;
    }

    #gameUI_hint, #gameUI_pauseGame, #gameUI_timer {
        width: 180px;
    }

    #gameUI_line {
        display: none;
    }

    #logoFlex {
        width: 50vw;
        transform: scale(0.7);
    }

    .fa-mouse-pointer, .fa-layer-group, .fa-sync, .fa-clock, .fa-lightbulb, .fa-pause-circle, .fa-caret-down {
        transform: translateY(-2px);
        font-size: 20px;
    }

    #difficultySelection {
        top: 25vh; left: 60vw;
    }
}



/* ========== Intro Splash Screen ========== */

#introSplashScreen {
    position: absolute; top: 0px; left: 0px;
    width: 100vw; height: 100vh;

    font-family: 'BigNoodleTitling', sans-serif;
    color: #ffffff;
    font-size: 6vh;
    text-align: center;

    display: flex; justify-content: center; align-items: center;
    flex-direction: column;
    margin-top: -5vh;
}

#introSplashScreenTransition {
    position: absolute; top: 0px; left: 0px;
    width: 100vw; height: 100vh;

    background-color: rgba(0, 80, 0, 0.75);
    backdrop-filter: blur(12px);
}

#issMenu {
    margin-top: 0vh;
}

#issMenuFlex {
    display: flex;
    flex-direction: row;
}

#issName {
    font-size: 8vh;
    margin-bottom: 3vh;
}

#issChoose {
    font-size: 4vh;
    margin-bottom: 4vh;
}

.issTurnName {
    font-size: 4vh;
}

.issTurnButton {
    padding: 1vh 3vh;
    font-size: 4vh;
    background-color: #00b050;
    cursor: pointer;
    transition: 0.3s;

    border-radius: 10px;
    box-shadow: rgb(0 176 80 / 80%) 0px 0px 15px 0px;
}

.issTurnButtonLeft {
    margin: 1vh 3vh 1vh 0px;
}

.issTurnButtonMiddle {
    margin: 1vh 0vh 1vh 0vh;
}

.issTurnButtonRight {
    margin: 1vh 0vh 1vh 3vh;
}

.issMiddleLine {
    width: 2px; height: 100%;
    background-color: #00a138;
}

#issLine {
    height: 0.5vh; width: 100%;
    background-color: #00b050;
    border-radius: 5px;
    box-shadow: rgb(0 176 80 / 80%) 0px 0px 15px 0px;
    margin-bottom: 4vh;
}

@keyframes fadeOut {
    0%   {opacity: 1}
    100% {opacity: 0}
}

@media screen and (max-width: 560px) {
    .issTurnButton {
        padding: 0.5vh 2vh;
        font-size: 3.5vh;
    }
}




/* ========== TIME LIMIT ========== */

#introTimeLimit, #endTimeLimit {
    position: absolute; top: 0px; left: 0px;
    width: 100vw; height: 100vh;

    font-family: 'BigNoodleTitling', sans-serif;
    color: #ffffff;
    font-size: 6vh;
    text-align: center;

    display: flex; opacity: 0;
    justify-content: center; align-items: center;
    flex-direction: column;
}

#itlInputForm, #etlInputForm {
    display: flex; height: 10vh;
}

.itlInputFormClass, .etlInputFormClass {
    width: 8vh; height: 10vh;
    margin: 0px 1vh;
    margin-top: 9vh;
    font-family: 'BigNoodleTitling', sans-serif;
    font-size: 10vh;
    background-color: transparent;
    color: #ffffff;
    border: 0; outline: 0;
}

#itlMinutes, #etlMinutes {
    text-align: right;
}

#itlHL, #etlHL {
    font-size: 8vh;
    margin-top: -12vh;
    margin-bottom: 5vh;
    transform: translateY(7vh);
}

#itlStartGame, #etlStartGame {
    cursor: pointer;
    margin-top: 5vh;
    font-size: 4vh;
}

#itlLabel, #etlLabel {
    display: flex;
    margin-top: 1vh;
}

.itlLabelClass, .etlLabelClass {
    font-size: 3vh; margin: 2vh 3.2vh;
}

#itlLabelMinutes, #etlLabelMinutes {
    text-align: right;
}

#itlBack, #etlBack {
    cursor: pointer;
    margin-top: 3vh;
    font-size: 3vh;
}



#issTimeLimitForm input:checked ~ #issTimeLimitCopy {
    opacity: 1;
}

#issTimeLimitCopy {
    font-size: 4vh;
    opacity: 0.3;
    cursor: pointer;
    transition: 0.3s;
}

#issTimeLimitForm {
    margin-top: 20px;
}

#gwTimeLimitForm input:checked ~ #gwTimeLimitCopy {
    opacity: 1;
}

#gwTimeLimitCopy {
    font-size: 4vh;
    opacity: 0.3;
    cursor: pointer;
    transition: 0.3s;
}

#gwTimeLimitForm {
    margin-bottom: 3vw;
    color: #ffffff;
}
/* ================================ */

#messageFlex {
    position: absolute; top: 0px; left: 0px;
    width: 100%; height: 100%;
    display: none; justify-content: center; opacity: 0;
}

#message {
    margin-top: 10vh;
    font-family: 'BigNoodleTitling', sans-serif;
    font-size: 4vh; padding: 1vh;
    width: max-content; height: min-content;
    color: white; background-color: black;
    text-align: center;
    z-index: 1000;
}


@media screen and (min-aspect-ratio: 16/8) and (max-height: 640px) {
    #introSplashScreen {
        margin-top: 0vh;
    }

    #issName {
        font-size: 16vh;
    }

    .issTurnName, .issTurnButton, #issTimeLimitCopy, #gwTimeLimitCopy {
        font-size: 8vh;
        padding: 1vh 5vh;
        margin-bottom: 2vh;
    }

    #itlHL, #etlHL {
        font-size: 16vh;
    }

    .itlInputFormClass, .etlInputFormClass {
        width: 16vh; height: 20vh;
        margin: 0px 2vh;
        margin-top: 9vh;
        font-size: 20vh;
    }

    #introTimeLimit, #endTimeLimit {
        font-size: 12vh;
        display: flex; opacity: 0;
        justify-content: center; align-items: center;
        flex-direction: column;
    }

    #itlLabel, #etlLabel {
        margin-top: 2vh;
    }

    #itlTime, #etlTime {
        margin-top: 1vh;
    }

    .itlLabelClass, .etlLabelClass {
        font-size: 6vh;
    }

    #itlStartGame, #etlStartGame {
        font-size: 8vh;
        padding: 1.5vh 5vh;
    }

    #itlBack, #etlBack {
        font-size: 6vh;
    }

    #itlBackText, #etlBackText {
        padding-right: 5vh !important;
    }

    .gameOverlay_bigLetters {
        font-size: 20vh;
    }

    .gameWin_stats {
        font-size: 8vh; 
    }

    .gameOverlay_smallLetters {
        font-size: 10vh;
    }

    #gameWin_newGame_turn1_copy, #gameWin_newGame_turn3_copy {
        font-size: 8vh !important;
    }

    #gameWin_restartGame {
        font-size: 10vh !important;
    }

    #gameOverlay_gameWin {
        transform: translateY(0vh) scale(0.6);
    }

    #gameOverlay_continue {
        font-size: 10vh !important;
    }

    #gameWin_newGame_mode1_copy, #gameWin_newGame_mode2_copy, #gameWin_newGame_mode3_copy {
        font-size: 8vh !important;
    }
}