/* Game Css */
#preloadImagesArea {
    display: none;
}

.boom-png-seq {
    display: none;
}
/* Game container styling */
#gameBackgroundImage {
    width: 100%;
    max-width: 1080px;
    max-height: 1920px;
    height: 100vh;
}

/* Score and time display */
.game-info {
    position: absolute;
    display: inline-block;
    justify-content: space-around;
    width: 86%;
    max-width: 1080px;
    margin-bottom: 15px;
    font-size: 1.5em;
    font-weight: bold;
    color: rgba(12,41,99);
    left: 50%;
    transform: translateX(-50%);
    top: 35px;
}

.info-item {
    position: absolute;
    padding: 10px 2%;
    width: 45%;
    text-align: center;
    display: inline-block;
    font-family: 'AcuminVariableConcept', sans-serif;
    font-weight: 800;
}
.info-item > img {
    width: 100%;
}
#timer {
    left: 0px;
}
#score {
    right: 0px;
}
#gameCanvas {
    position: absolute;
    top: 0px;
    left: 0px;
}
/* Canvas styling */
canvas {
    background-color: rgba(96, 124, 181, 0);
    /* border-radius: 15px; */
    /* box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7); */
    touch-action: none;  /* Prevent default touch actions like scrolling */
    display: block; 
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    margin: 6%;
}

.scoreArea {
    display: none;
    position: relative;
    width: 100%;
    max-width: 1080px;
    max-height: 1920px;
    text-align: center;
    font-family: 'AcuminVariableConcept', sans-serif;
    font-weight: 800;
}
#scoreImageBg {
    width: 100%;
    max-width: 1080px;
}
.clickable {
    display: block;
    position: absolute;
}
.clickable:hover {
    cursor: pointer;
}
#finalScore {
    display: block;
    position: absolute;
    width: 100%;
    height: 15%;
    top: 25%;
    font-size: 72px;
    text-align: center;
    color: rgb(255, 209, 1);
    font-family: 'AcuminVariableConcept', sans-serif;
    font-weight: 800;
}
#toSubmit {
    width: 34%;
    height: 7%;
    top: 77.5%;
    left: 33%;
}
#retry {
    width: 34%;
    height: 8%;
    top: 86.5%;
    left: 33%;
}
#timeText, #scoreText{
    position: absolute;
    top: 33%;
    display: inline-block;
    width: 50%;
    left: 30%;
}
#gameWarpper {
    width: 82.13%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 1/1;
    background: url('../images/ingame_grid.png');
    background-size: contain;
}