*{box-sizing: border-box;}

html, body{
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}


/*keyframe mantenere proprietà*/
#keyframe{
    position: absolute;
    width: 35%;
    height: 30%;
    overflow: hidden;
    z-index: 3;
}

#Simone, #compleanno{
    position: absolute;
    bottom: 55%;
    left: 50%;
    transform: translateX(-53%);
    padding: 0.2px;
    font-size: 30px;
    white-space: nowrap;
}

#compleanno{
    position: absolute;
    bottom: 30%;
    left: 50%;
    font-size: 25px;
    white-space: nowrap;
}

@keyframes Poundingheart {
    from {width: 10%;}
    to {width: 15%;}
    
}

#heart{
    width: 10%;
    transform: translateY(25%);
    animation-name: Poundingheart;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
    animation-range-end: initial;
}

#btn{
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-53%);
}

.titles{
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(4, 4, 78, 0.7);
    height: 150px;
    width: 500px;
    border-radius: 0.5em;
    z-index: 10;
}

.pixelify-sans-title {
  font-family: "Pixelify Sans", sans-serif;
  color: rgb(227, 224, 246);
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}




/*ELEMENTI DI BASE DEL GIOCO*/

#background{
    display: block;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url("./assets/bg/mountains.webp") repeat-x top left;
    background-position: left bottom;      
    background-size: auto 100vh;   
    will-change: background-position;        
}

#parallax-back, #parallax-front {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    inset: 0;
    pointer-events: none;
    background-repeat: repeat-x;
    background-size: 1028px auto;
    image-rendering: pixelated;
    will-change: background-position;
}

#parallax-back {
    background-image: url("./assets/bg/hills.webp");
    background-repeat: repeat-x bottom left;                 
    opacity: .9;
    z-index: 0;
}
#parallax-front {
    background-image: url("./assets/bg/clouds.webp"); 
    opacity: .55;
    z-index: 2;
}

#ground {
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: black;
    image-rendering: pixelated;
    display: none;
}

:root { --tile: 32px}

#world {
    position: absolute;
    inset: 0;
    z-index: 10 !important;
    --camX: 0px;
}

#level {
    position: absolute;
    inset: 0;
    transform: translateX(calc(-1 * var(--camX)));
}

.tile {
    --w: 1;
    --h: 1;
    position: absolute;
    width: calc(var(--w)*var(--tile));
    height: calc(var(--h)*var(--tile));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    backface-visibility: hidden;
    transform: translateZ(0);  
}

.tile.ground.normal {
    background-image: url("./assets/tiles/ground_320.png");
}
.tile.ground.angled-left {
    background-image: url("./assets/tiles/ground_320_01.png");
}
.tile.ground.angled-right {
    background-image: url("./assets/tiles/ground_320_01.png");
    transform: scaleX(-1);
    transform-origin: center;
}
.tile.ground.vertical-left {
    background-image: url("./assets/tiles/ground_320_02.png");
}
.tile.ground.vertical-right {
    background-image: url("./assets/tiles/ground_320_02.png");
    transform: scaleX(-1);
    transform-origin: center;
}
.tile.ground.underground {
    background-image: url("./assets/tiles/ground_320_03.png");
}


.tile.brick {
    background-image: url("./assets/tiles/brick.png");
}
.tile.full-surprise {
    background-image: url("./assets/tiles/brick_32_suprise.png");
}
.tile.empty-surprise {
    background-image: url("./assets/tiles/brick_32_surprise_opened.png");
}

#player {
    position:absolute;
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
}

.idle{
  background: url("./assets/sprites/Player_idle.png") no-repeat 0 0 / contain;
}

.player-run{
    background-image: url("./assets/sprites/player_run_sheet.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    animation: run var(--run-dur, 0.36s) steps(4, end) infinite;
    background-position: 0 0;            
}

@keyframes run {
    from {background-position: 0 0;}
    to {background-position: -256px 0;}
}

.player-jump{
    background-image: url("./assets/sprites/Player_jump_takeoff.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.player-fall{
    background-image: url("./assets/sprites/Player_jump_fall.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.player.paolino-idle{
  background: url("./assets/sprites/paolino_idle.png") no-repeat 0 0 / contain;
}

.player.paolino-run {
    background-image: url("./assets/sprites/paolino_run_sheet.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    animation: run var(--run-dur, 0.36s) steps(4, end) infinite;
    background-position: 0 0; 
}

.player.paolino-jump{
    background-image: url("./assets/sprites/paolino_jump_takeofft.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.player.paolino-fall{
    background-image: url("./assets/sprites/paolino_jump_fall.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.player.paolino-attack{
    background-image: url("./assets/sprites/paolino_attack_sheet.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    animation: paolinoAttack 0.60s steps(4) 1 forwards;
    background-position: 0 0; 
}

@keyframes paolinoAttack{
    from { background-position: 0 0; }
    to   { background-position: -256px 0; } 
}

.enemy.spider{
  position: absolute;
  width: 64px;
  height: 32px;
  background-position: 0 0;
  background-size: auto 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.enemy.spider.walk {
  background-image: url("./assets/sprites/spider_walk_sheet.png"); 
  animation: spiderWalk var(--spd, 0.5s) steps(2) infinite;
  transform: scaleX(1);
}

.enemy.spider.dead {
  animation: none !important;
  filter: grayscale(30%);
  transform: scaleX(1);
}

@keyframes spiderWalk {
  from { background-position: 0 0; }
  to   { background-position: -128px 0; }
}

.ui {
    position: absolute;
    width: var(--w, 16px);
    height: var(--h, 16px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    z-index: 5;
}

.ui-burger {
    background-image: url("assets/ui/burger.png");
}

.ui-coke {
    background-image: url("assets/ui/coke.png");
}

#scoreBoard {
    display: none;
    position: absolute;
    top: 20px;
    left: 30px;
    color: white;
    font-size: 24px;
    font-family: "Pixelify Sans", sans-serif;
    z-index: 5;
}

/*schermate finali*/
#lostgame {
    display: none;
    position: absolute;
    width: 35%;
    height: 30%;
    overflow: hidden;
    z-index: 3;
}

#wongame {
    display:none;
    position: absolute;
    width: 35%;
    height: 30%;
    overflow: hidden;
    z-index: 3;
}

#lost, #win{
    position: absolute;
    bottom: 55%;
    left: 50%;
    transform: translateX(-53%);
    padding: 0.2px;
    font-size: 30px;
    white-space: nowrap;
}

#points, #point{
    position: absolute;
    bottom: 35%;
    left: 50%;
    transform: translateX(-53%);
    padding: 0.2px;
    font-size: 25px;
    white-space: nowrap;
}

#startagain, #liking{
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}