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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    background-color: #000;
}

#gameCanvas {
    display: block;
    width: 100vw !important;
    height: 100dvh !important;
    background: black;
    position: absolute;
    inset: 0;
}

/* ================= GAME WRAPPER ================= */

/* #gameWrapper {
    display: none;
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
} */

#gameWrapper {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
}


/* ================= SCORE UI ================= */

#scoreContainer {
    position: absolute;
    top: clamp(8px, 2vh, 20px);
    /* left: clamp(10px, 3vw, 24px); */
    left: calc(clamp(4px, 3vw, 10px) + env(safe-area-inset-left));
    z-index: 9999;
    pointer-events: none;
    width: clamp(120px, 18vw, 200px);
}

#scoreContainer img {
    width: 100%;
    display: block;
}

#scoreDisplay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 70%;
    height: auto;

    text-align: center;
    color: #fff;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;

    font-size: clamp(10px, 1.4vw, 16px);

    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================= ROTATE MESSAGE ================= */



/* ================= MOBILE CONTROLS ================= */

/* LEFT SIDE */
#mobileLeft {
    position: absolute;
    left: calc(clamp(4px, 3vw, 10px) + env(safe-area-inset-left));
    bottom: calc(clamp(20px, 4vh, 35px) - env(safe-area-inset-bottom));

    display: none;
    gap: clamp(8px, 2vw, 18px);

    pointer-events: none;
    z-index: 9999;
}

/* RIGHT SIDE */
#mobileRight {
    position: absolute;
    right: calc(clamp(10px, 3vw, 25px) + env(safe-area-inset-right));
    bottom: calc(clamp(20px, 4vh, 35px) - env(safe-area-inset-bottom));
    display: none;
    gap: clamp(8px, 2vw, 18px);
    pointer-events: none;
    z-index: 9999;
}



/* BUTTON STYLE */

.mBtn {
    pointer-events: auto;

    width: clamp(45px, 6vw, 70px);
    height: clamp(45px, 6vw, 70px);

    background: transparent;
    border: none;
    transition: transform 0.12s ease;
}


.mBtn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mBtn:active {
    transform: scale(0.85);
}

/* HIDE ON DESKTOP */
/* @media (pointer: fine) {

    #mobileLeft,
    #mobileRight {
        display: none;
    }
} */

/* ================= PORTRAIT MODE ================= */

.portrait #gameCanvas,
.portrait #scoreDisplay,
.portrait #mobileLeft,
.portrait #mobileRight,
.portrait #paymentPopup {
    display: none !important;
}

.portrait .rotate-message {
    display: flex !important;
}

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

/* @media (pointer:fine) {

    #mobileLeft,
    #mobileRight {
        display: none;
    }
} */

.obstacle {
    object-fit: contain;
}

#game {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-image: url('../images/char-gati/n-bg1.png');
    /* add a wide background image */
    background-repeat: repeat-x;
    background-position: 0 0;
    background-size: cover;
    backdrop-filter: blur(0.4);
}

#monster {

    background-image: url('../images/char-gati/character.jpg');
    z-index: 10;
    left: 0;
    /* make sure this path is correct */
    background-size: contain;
    background-repeat: no-repeat;

    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 100px;
    background-size: contain;
    background-repeat: no-repeat;
}

.star {
    width: 50px;
}

#score,
#life {
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
}

.land {
    /* background-color: saddlebrown; */
    background-image: url("../images/char-gati/base.png");
    background-repeat: no-repeat;
    background-size: cover;

    /* border-top: 5px solid #654321; */
}

.main {
    height: 100vh;
    padding: 60px;
    position: relative;
    overflow: auto;
}

.main_bg {
    background-image: url("../images/char-gati/mario.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.level_wrapper {
    max-width: 1200px;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 60px auto;
    width: 100%;
}

.level_wrapper li {
    background-image: url("../images/char-gati/level_base.png");
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 120px;
    background-position: bottom;
    text-align: center;
    flex: 1 1 25%;
    cursor: pointer;
}

.level_wrapper li img {
    width: 100px;
    animation: ding-dong 25s linear infinite;
}

.level_wrapper li img.level_lock {
    opacity: 0.2;
}

.level_wrapper li:nth-child(even) {
    transform: translateY(-20px);
}

.rotate-message {
    position: fixed;
    /* or absolute, depending on your layout */
    top: 0;
    left: 0;
    width: 100vw;
    /* Full viewport width */
    height: 100vh;
    /* Full viewport height */
    background: rgba(0, 0, 0, 0.9);
    color: white;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    text-align: center;
    z-index: 9999;
    /* Make sure it's on top */
    padding: 20px;
    box-sizing: border-box;
}


.portrait .btn_wrapper,
.portrait #game,
.portrait #score,
.portrait .star {
    display: none;
}

.game_bg {
    height: 100vh;
    padding: 60px;
    position: relative;
    overflow: auto;
}

.btn_wrapper {
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 99;
}

.btn_wrapper img {
    width: 50px;
    cursor: pointer;
    margin-right: 10px;
}

#gameOverModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #000;
    display: none;
}

#customAlert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#customAlertBox {
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    text-align: center;
}

#customAlertBox button {
    margin: 10px;
    padding: 8px 20px;
    cursor: pointer;
}

/* #scoreDisplay {
    position: absolute;
    top: 15px;
    left: 20px;
    color: white;
    font-family: monospace;
    font-size: 22px;
    z-index: 10;
} */

#mario {
    position: absolute;
    bottom: 100px;
    left: 100px;
    width: 117.5px;
    height: 147px;
    background-image: url("../images/char-gati/hell-sprite.webp");
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-size: 1175px 294px;
    z-index: 5;
}

.invincible-glow {
    animation: glow 1s infinite alternate;
}

@keyframes glow {
    from {
        filter: drop-shadow(0 0 5px yellow);
    }

    to {
        filter: drop-shadow(0 0 15px orange);
    }
}

@keyframes dogWalkRight {
    from {
        background-position: 0px 0px;
    }

    to {
        background-position: -960px 0px;
    }
}

.walk-right {
    animation: dogWalkRight 0.6s steps(10) infinite;
    transform: scaleX(1);
}

.walk-left {
    animation: dogWalkRight 0.6s steps(10) infinite;
    transform: scaleX(-1);
}


/* Jump Animations */
.jump-right {
    animation: jumpRightAnim 0.4s steps(4) infinite;
    transform: scaleX(1);
}

.jump-left {
    animation: jumpRightAnim 0.4s steps(4) infinite;
    transform: scaleX(-1);
}

@keyframes jumpRightAnim {
    from {
        background-position: 0px -72px;
    }

    to {
        background-position: -216px -72px;
    }
}

/* Air Run */
.air-run-right {
    animation: airRunRight 1.4s steps(6) infinite;
    transform: scaleX(1);
}

.air-run-left {
    animation: airRunRight 1.4s steps(6) infinite;
    transform: scaleX(-1);
}

@keyframes airRunRight {
    from {
        background-position: -216px -144px;
    }

    to {
        background-position: -576px -144px;
    }
}

#controls {
    position: fixed;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    z-index: 10;
}

#controls button {
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 10px;
    background-color: #f5f5f5;
    border: 2px solid #ccc;
    cursor: pointer;
}

@keyframes movePlatformY {
    0% {
        bottom: 100px;
    }

    50% {
        bottom: 200px;
    }

    100% {
        bottom: 100px;
    }
}

.moving-platform {
    animation: movePlatformY 3s infinite ease-in-out;
}

#startScreen {
    position: fixed;
    inset: 0;
    background-image: url("../images/char-gati/new-logo.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 9999;
}

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

#assetLoader,
#playAreaAssetLoader {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 10000;
}

.loader-rectangle {
    width: 200px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.loader-rectangle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

#assetLoader p,
#playAreaAssetLoader p {
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin: 0;
    text-align: center;
}

#languageSelect {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
}

#languageSelect img {
    cursor: pointer;
    height: 60px;
}

#musicBtn {
    position: absolute;
    top: calc(20px + env(safe-area-inset-top));
    right: calc(20px + env(safe-area-inset-right));
    width: 60px;
    cursor: pointer;
}

#homeBtn {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    width: 60px;
    cursor: pointer;
    z-index: 9999;
    display: none;
}

#musicInsideBtn {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top));
    /* right: 50px; */
    /* right: calc(80px + env(safe-area-inset-right)); */
    right: calc(80px + env(safe-area-inset-right));
    left: calc(10px + env(safe-area-inset-left));
    margin-left: auto;
    width: 60px;
    display: none;
    cursor: pointer;
}

/* / left: calc(clamp(4px, 3vw, 10px) + env(safe-area-inset-left)); */
 /* right: calc(clamp(10px, 3vw, 25px) + env(safe-area-inset-right)); */


.infoScreen{position: absolute;background: rgba(0, 0, 0, 0.8);width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);color: white;font-size: 20px;line-height: 35px; text-align: center;z-index: 99999;display: flex;align-items: center;justify-content: center;flex-flow: column;gap: 20px;padding: 50px;display: none;
    border: 4px solid #d4a437;box-shadow:
    inset 0 2px 2px rgba(255,255,255,.45),
    inset 0 -4px 8px rgba(70,35,0,.5),
    0 0 10px rgba(255,210,90,.15);border-top-color:#fff1a8;
    border-right-color:#c18416;
    border-bottom-color:#8d5c09;
    border-left-color:#f5cf63;
    animation: borderGlow 2.5s linear infinite;
}
@keyframes borderGlow{
  0%{
    border-top-color:#fff1a8;
    border-right-color:#c18416;
    border-bottom-color:#8d5c09;
    border-left-color:#f5cf63;
  }

  25%{
    border-top-color:#f5cf63;
    border-right-color:#fff1a8;
    border-bottom-color:#c18416;
    border-left-color:#8d5c09;
  }

  50%{
    border-top-color:#8d5c09;
    border-right-color:#f5cf63;
    border-bottom-color:#fff1a8;
    border-left-color:#c18416;
  }

  75%{
    border-top-color:#c18416;
    border-right-color:#8d5c09;
    border-bottom-color:#f5cf63;
    border-left-color:#fff1a8;
  }

  100%{
    border-top-color:#fff1a8;
    border-right-color:#c18416;
    border-bottom-color:#8d5c09;
    border-left-color:#f5cf63;
  }
}

.infoScreen::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 6px rgba(255,255,255,.15),inset 0 0 12px rgba(255,255,255,.08);}
#infoTxt{max-width: 600px;}
#startGameBtn{cursor: pointer;}


@media (max-width: 767px) {
    #languageSelect {bottom: 10%;}

    #assetLoader,#playAreaAssetLoader {bottom: 10%;}

    .loader-rectangle {width: 180px;height: 6px;}

    #assetLoader p,#playAreaAssetLoader p {font-size: 14px;}

    #languageSelect img {
        height: 35px;
    }

    #musicInsideBtn,
    #musicBtn,
    #homeBtn {
        width: 35px;
    }
    .mBtn{width: 35px; height: 35px;}
    
    

}

@media (orientation: landscape) and (max-width: 1024px) {
    #languageSelect {
        bottom: 10%;
    }

    #languageSelect img {
        height: 35px;
    }

    #musicInsideBtn,
    #musicBtn,
    #homeBtn {
        width: 35px;
    }
    #musicInsideBtn {right: calc(55px + env(safe-area-inset-right))}
    #startGameBtn{width: 55px;}
    .infoScreen{font-size: 18px; padding: 10px;line-height: 28px;}
    #infoTxt{max-width: 80%;}
    
}

/* Scope to left controls */
#mobileLeft .mBtn img,
#mobileRight .mBtn img {
    pointer-events: none;
    /* prevent image from catching touch */
    -webkit-user-drag: none;
    /* disables drag */
    user-drag: none;
}

#mobileLeft .mBtn,
#mobileRight .mBtn {
    -webkit-touch-callout: none;
    /* disables long-press menu */
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    /* prevent default gestures */
}

#mobileRight .btnDown {
    display: none;
}