@font-face {
    font-display: swap;
    font-family: 'Minecraftia';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Minecraftia-Regular.woff2')
        format('woff2');
}
*{
    margin: 0;
    padding: 0;
    
    outline: none;
}

::selection {
    background: transparent; 
}
::-webkit-selection {
    background: transparent;
}

.fading-out {
    opacity: 0;
    transition: opacity 2000ms ease-out; 
}

img{
    image-rendering: pixelated;
}

html,body{
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: #000000;
}
body {
    font-family: 'Minecraftia', sans-serif;
    background-attachment: fixed;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../img/htmlbkg/bg.jpg');
    touch-action: manipulation;
    -webkit-user-select: none; /* Per i browser basati su WebKit (Chrome, Safari, ecc.) */
    -ms-user-select: none;     /* Per Internet Explorer/Edge (se ancora necessario) */
    user-select: none;         /* La proprietà standard */
}
#html-bkg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 200;
    pointer-events: none;
}
#html-bkg .bkg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#game-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 9 / 16; 
    overflow: hidden;
    width: calc(100vw - 20px);
    height: calc( (100vw - 20px) / 9 * 16 );
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    font-family: 'Minecraftia', sans-serif;
}

button#music-button{
    cursor: pointer;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    position: absolute;
    top: 4%;
    right: 4%;
    background-color: #000000;
    color: white;
    z-index: 100;
    padding: 3%;
    padding-bottom: 0;
    display: none !important;
}



/* --- COPERTINA --- */

#cover-screen,
#loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Sfondo scuro per coprire il gioco */
    color: white;
    display: flex; /* Per centrare gli elementi */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



#cover-screen button#start-button {
    cursor: pointer;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
#cover-screen button#start-button img{
    object-fit: fill;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}


#cover-screen #cover-background,
#cover-screen #cover-logo,
#cover-screen #cover-snow
{
    width: 100%;
    height: 100%;
    display: block;
    top:0;
    left: 0;
    position: absolute;
    pointer-events: none;
}

#loading-screen {
    z-index: 200;
}
#loading-screen #loading-background,
#loading-screen #loading-background-2{
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    position: absolute;
    
}
#loading-screen #loading-background-2{
    display: none;
    cursor: pointer;
}
#loading-screen #intro-anim{
    display: block;
    width: 30%;
    height: auto;
    top:45%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    pointer-events: none;
}



/* Nascondi inizialmente l'area di gioco. Sarà mostrata dal JS. */
#game-view {
    width: 100%;
    height: 100%;
    display: none; 
    position: absolute;
}

#game-canvas {
    background-color: black;
}
#pointer{
    pointer-events: none; 
}

#game-canvas #game-background{
    width: 100%;
    height: auto;
    display: block;
    top:0;
    left: 0;
    position: absolute;
}


#game-canvas #player{
    position: absolute;
    top:50%;
    /* transition-duration: .2s; */
    /* background-color: yellow; */
}
#game-canvas #player #player-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#game-canvas #player #player-wrap img{
    width: 100%;
    height: auto;
    display: block;
    image-rendering: pixelated;
    position: absolute;
    top:0;
    left: 0;
}
#game-canvas #player #player-wrap img#player-state-1,
#game-canvas #player #player-wrap img#player-state-2,
#game-canvas #player #player-wrap img#player-state-3
{
    display: none;
}



#game-canvas #bonus-container{
    position: absolute;
    top:0;
    left: 0;
    width: 100%; 
    height: 100%;
}
#game-canvas #bonus-container .bonus {
    position: absolute;
    image-rendering: pixelated;
    /* background-color: yellow; */
    /* z-index: 10; */
}


#game-canvas #score-contaier{
    position: absolute;
    top:86%;
    left: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    color: white;
}

#game-canvas #lives-container{
    position: absolute;
    top:78%;
    left: 0%;
    width: 100%;
    height: 40px;
    text-align: center;
}
#game-canvas #lives-container .life-icon{
    display: inline-block;
    width: 5%;
    margin: 0 0.5%;
    opacity: 1;
}
#game-canvas #lives-container .life-icon.life-lost{
    opacity: .2;
    filter: grayscale(100%);
}

#game-canvas #arrows-container{
    position: absolute;
    top:79.2%;
    left: 10%;
    width: 80%;
    height: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#game-canvas #arrows-container .arrow{
    cursor: pointer;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px;
    height: 100%;
}
#game-canvas #arrows-container .arrow img{
    display: block;
    height: 100%;
    width: auto;
    pointer-events: none;
}



#character-selection-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/selectcharacter/selectcharacter.png);
    background-size: cover;
    background-position: center;
}
#character-selection-screen .selection-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#character-selection-screen #char-preview-container {
    width: 50%; 
    height: 20%;
    margin:auto;
    left: 25%;
    position: absolute;
    top:54%;
    pointer-events: none;
}
#character-selection-screen #char-preview-img {
    margin: auto;
    display: block;
    width: 40%;
    height: auto;
}
#character-selection-screen .nav-btn {
    cursor: pointer;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    position: absolute;
    height: 7%;
    width: 6%;
    aspect-ratio: 1;
    top:59%;
}
#character-selection-screen #prev-char-btn{
    left: 25%;
}
#character-selection-screen #next-char-btn{
    left: 69%;
    transform: rotate(180deg);
}
#character-selection-screen .nav-btn img{
    display: block;
    width: 100%;
    height: auto;

}
#character-selection-screen  #confirm-start-btn {
    cursor: pointer;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    position: absolute;
    top:0;
    left: 0;
    width: 50%;
    height: 10%;
    top:80%;
    left: 50%;
    transform: translate(-50%, -50%);
}






#video-screen{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
}
#video-screen #end-video{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}