@font-face {

    font-family: "PressStart2P";
    src: url("assets/fonts/PressStart2P-Regular.ttf") format("truetype");

}

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

html,
body{
    width:100%;
    height:100%;
}

body{

    background-image: url("assets/images/background.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display:flex;
    flex-direction:column;

    font-family:Arial, Helvetica, sans-serif;

    color:white;

    overflow:hidden;

    background-blend-mode: multiply;

}


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

main{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

}

#game-container{

    position:relative;

}

#leaderboard{

    width:300px;

    min-height:635px;

    background-color: #05055366;

    border-radius:20px;

    padding:30px;

    color:white;

    backdrop-filter:blur(10px);
    border:5px solid #ffffff;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

#gameActions {

    display: none;

    position: absolute;

    left: 50%;

    bottom: 10%;

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

    z-index: 99999;

    flex-direction: column;

    gap: 15px;

}
#gameActions > * {

    pointer-events: auto;

}
#gameActions button {

    width: 220px;

    height: 48px;

    background: #00BFFF;

    border: 3px solid #FFFFFF;

    color: #FFFFFF;

    font-family: "PressStart2P";

    font-size: 12px;

    cursor: pointer;

    border-radius: 10px;

}
#gameOverlayText {

    display: none;

    position: absolute;

    left: 50%;

    top: 10%;

    transform: translateX(-50%);

    flex-direction: column;

    align-items: center;

    gap: 15px;

    z-index: 9999;

}
#overlayTitle {

    margin: 0;

    color: #FFD700;

    font-family: "PressStart2P";

    font-size: 42px;

    text-align: center;

}
#overlaySubtitle {

    margin: 0;

    color: #FFFFFF;

    font-family: "PressStart2P";

    font-size: 18px;

    text-align: center;

    line-height: 1.6;

}
#leaderboard-title{

    display: block;

    width: 180px;

    margin: -15px auto 10px;

}

#leaderboard-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

#leaderboard .loading{

    text-align:center;

    opacity:.6;

    font-family:"PressStart2P";

    font-size:12px;

}

#playerName {

    display: none;

    width: 260px;

    height: 54px;

    padding: 0 15px;

    border: 3px solid #FFFFFF;

    border-radius: 0;

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

    color: #FFFFFF;

    font-family: "PressStart2P";

    font-size: 16px;

    text-align: center;

    outline: none;

    box-sizing: border-box;

}

#playerNameContainer {

    display: none;

    position: absolute;

    left: 50%;

    top: 30%;

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

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 12px;

    z-index: 9999;

}

#saveScoreButton {

    height: 54px;
    width: 120px;

    white-space: nowrap;

    font-size: 14px;

    background: #FFD700;

    border: 3px solid #ffffff;

    border-radius: 10px;

    color: #FFFFFF;

    font-family: "PressStart2P";


    cursor: pointer;
    transition:

        transform .08s,

        filter .08s,

        background .15s;

}
#saveScoreButton:hover {

    background: #FFD700;

}

#closeLeaderboard {

    display: none;

}


#saveScoreButton:active {

    transform: scale(.96);

    filter: brightness(.85);

}

.leaderboard-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px solid rgba(255,255,255,.12);

    font-family:"PressStart2P";

    font-size:12px;

    color:white;

}

#game-logo{

    position: fixed;

    top:30px;

    left: 50%;

    transform: translateX(-50%);

    width: 270px;

    z-index: 1000;

    pointer-events: none;

    filter:

        drop-shadow(0 12px 35px rgba(0,0,0,.75));

}

canvas{
    background:#08354e;

    border:5px solid #ffffff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.75);

    image-rendering:pixelated;
    image-rendering:crisp-edges;
    border-radius: 20px;

}

#controls {

    display: none;

}

#mobileMenu {

    position: fixed;

    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    z-index: 9999;

}
#mobileMenu button {

    width: 130px;

    height: 42px;

    font-size: 9px;

    border-width: 2px;
    text-align: center;
    border-radius: 10px;
    padding: 0;

}
#pauseButton,
#leaderboardButton {

    flex: none;

    width: 140px;

    height: 42px;

    background: #050553;

    border: 3px solid #FFFFFF;

    border-radius: 10px;

    color: #FFFFFF;

    font-family: "PressStart2P";

    font-size: 12px;

    cursor: pointer;

    transition:
        transform .08s,
        filter .08s,
        background .15s;

}
@media (orientation: portrait) {

   #gameOverlayText {

    display: none;

    position: absolute;

    left: 50%;

    top: 10%;

    transform: translateX(-50%);

    flex-direction: column;

    align-items: center;

    gap: 15px;

    z-index: 9999;

}
#overlayTitle {

    margin: 0;

    color: #FFD700;

    font-family: "PressStart2P";

    font-size: 18px;

    text-align: center;

}
#overlaySubtitle {

    margin: 0;

    color: #FFFFFF;

    font-family: "PressStart2P";

    font-size: 11px;

    text-align: center;

    line-height: 1.6;

}
    

     #leaderboard{

        display: none;

    }
#leaderboard-title{

    display: block;

    width: 180px;

    margin: -15px -10px 10px;

}
    main {

        flex-direction: column;

        justify-content: flex-start;

        padding-top: 180px;

        gap: 30px;

    }

    #game {

        width: 95vw;

        height: auto;

    }
    #game-logo {

        width:180px;

        top: 15px;

    }
    #leaderboard{

    border-radius:10px;

    }
    canvas{

        border:4px solid #ffffff;
        border-radius: 15px;

    }

    #controls button img {

        width: 100%;
        height: 100%;

        object-fit: contain;

        pointer-events: none;

        user-select: none;

        -webkit-user-drag: none;

    }

    #controls button:active {

        transform: scale(0.92);

        transition: transform .05s;

    }
#leaderboard {

    position: fixed;

    inset: 20px;

    width: auto;

    min-height: auto;

    display: none;

    z-index: 99999;

}
#closeLeaderboard {

    display: block;

    position: absolute;

    top: 40px;

    right:30px;

    background: transparent;

    border: none;

    color: #f7c405;

    font-family: "PressStart2P";

    font-size: 14px;

    cursor: pointer;
    -webkit-text-stroke: 0.5px #000;

text-shadow:

    1px 1px 0 #000,

    2px 2px 0 rgba(0,0,0,.6);

}

    #controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0px;
    padding-bottom: 40px;

    }

    #leftControls {

        display: flex;

        align-items: center;

        gap: 15px;

    }

    #rightControls {

        display: flex;

        flex-direction: column;

        align-items: flex-end;

        gap: 15px;

    }
    #mobileMenu {

    position: relative;

    left: 50%;

    transform: translateX(-50%);

    width: 95vw;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    margin-top: 15px;

    margin-bottom: 15px;

}
#mobileMenu button {

    width: 90px;

    height: 42px;

    font-size: 9px;

    border-width: 2px;
    text-align: center;

    padding: 0;

}
    #pauseButton,
#leaderboardButton {

    flex: 1;

    height: 42px;

    border: 3px solid #FFFFFF;

    border-radius: 0px;

    color: #FFFFFF;

    font-family: "PressStart2P";

    font-size: 12px;

    cursor: pointer;

    transition:

        transform .08s,

        filter .08s,

        background .15s;

}
#pauseButton:hover,
#leaderboardButton:hover {

    background: #050553;

}

#pauseButton:active,
#leaderboardButton:active {

    transform: scale(.96);

    filter: brightness(.85);

}
    
    #up,
    #down {

        margin-right:68px;

    }

    #controls button {

        padding: 0;
        overflow: hidden;
        width: 68px;
        height: 68px;
        border-radius: 0px;
        background: transparent;
        font-size: 34px;
        font-weight: bold;


        cursor: pointer;

        touch-action: manipulation;
        background: transparent;

    border: none;

    box-shadow: none;

    outline: none;

    padding: 0;

    appearance: none;

    -webkit-appearance: none;

    }

   
    .right-controls {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

    .left-controls,
    .right-controls {

        width: 180px;

    }

    .left-controls {

        display: flex;

        justify-content: flex-end;

        gap: 20px;

    }
    #playerNameContainer {

    top: 36%;

    width: 90%;

    transform: translateX(-50%);

    }

#playerName {

    width: 58%;

    font-size: 12px;

}

#saveScoreButton {

    border-radius: 10px;
    font-size: 11px;

}

#gameActions {

    bottom: 10%;

    transform: translateX(-50%);

}

#gameActions button {

    width: 230px;
    border-radius: 10px;
    
}

}

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

    #gameOverlayText {

    display: none;

    position: absolute;

    left: 50%;

    top: 10%;

    transform: translateX(-50%);

    flex-direction: column;

    align-items: center;

    gap: 15px;

    z-index: 9999;

}
#overlayTitle {

    margin: 0;

    color: #FFD700;

    font-family: "PressStart2P";

    font-size: 22px;

    text-align: center;

}
#overlaySubtitle {

    margin: 0;

    color: #FFFFFF;

    font-family: "PressStart2P";

    font-size: 15px;

    text-align: center;

    line-height: 1.6;

}

    #mobileMenu {

    position: fixed;

    left: 20px;

    bottom: 20px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

}
#mobileMenu button {

    width: 110px;

    height: 32px;

    font-size: 8px;

    border-width: 2px;
    text-align: center;

    padding: 0;

}
    canvas{

        border:4px solid #ffffff;
        border-radius: 15px;

    }
    #leaderboard-title{

    display: block;

    width: 180px;

    margin: -15px -10px 10px;

}
    #leaderboard {

    position: fixed;

    inset: 20px;

    width: auto;

    min-height: auto;

    display: none;

    z-index: 99999;

}
#closeLeaderboard {

    display: block;

    position: absolute;

    top: 40px;

    right: 30px;

    background: transparent;

    border: none;

    color: #f7c405;

    font-family: "PressStart2P";

    font-size: 14px;

    cursor: pointer;
    
cursor: pointer;
    -webkit-text-stroke: 0.5px #000;

text-shadow:

    1px 1px 0 #000,

    2px 2px 0 rgba(0,0,0,.6);

}

    main {

        justify-content: center;

        align-items: center;

        padding-top: 15px;

    }
   #game {

    width: auto;

    height: 92vh;

}
   #pause {

    position: fixed;

    left: 20px;

    top: 85px;

    width: 42px;

    height: 42px;

    opacity: .75;

    transition: opacity .2s;

}
#leaderboard{

    border-radius:10px;

    }
#pause:active {

    opacity: 1;

}


    #game-logo {

        width: 110px;

        top: 10px;

        left: 20px;

        transform: none;

    }
    #controls {

        display: flex;

        justify-content: space-between;

        align-items: center;

        position: fixed;

        left: 0;

        right: 0;

        top: 50%;

        transform: translateY(-50%);

        padding: 0 20px;

    }
#leaderboard-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 40px;

}
    #leftControls {

    display: flex;

    flex-direction: column;

    justify-content: center;

    height: 100%;

}
#left {

    margin-top: 0px;

}

    #rightControls {

        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 15px;

    }

    #controls button {

        width: 58px;
        height: 58px;
        padding: 0;
        border-radius: 0px;
        background: transparent;
        border: none;

        box-shadow: none;

        outline: none;

        padding: 0;

        appearance: none;

        -webkit-appearance: none;

    }
    #up,

    #down {

        margin-right: 38px;

    }

    #pause {

        width: 60px;

        height: 60px;

    }
    #controls button img {

        width: 60px;

        height: 60px;

    }
   #playerNameContainer {

    display: none;

    position: absolute;

    left: 50%;

    top: 20%;

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

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 12px;

    z-index: 9999;

}
#playerName {

    width: 220px;

    font-size: 12px;

}

#saveScoreButton {
    border-radius: 10px;

    font-size: 11px;

}

#gameActions {

    bottom: 10%;

    transform: translateX(-50%);

}
#mobileMenu {

    position: fixed;

    left: 20px;

    bottom: 25px;

    transform: translateX(0%);

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    z-index: 9999;

}

}