@font-face{

  font-family:"Minecraft";

  src:url("/font/minecraft.ttf");

}

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

body{

  overflow:hidden;

  width:100%;
  height:100dvh;

  position:relative;

  font-family:"Minecraft", sans-serif;

  background:
    radial-gradient(
      circle at top,
      #5a189a 0%,
      #3c096c 35%,
      #240046 65%,
      #10002b 100%
    );

  color:white;
}

/* OVERLAY */

body::before{

  content:"";

  position:fixed;

  inset:0;

  background:
    radial-gradient(
      circle,
      transparent 40%,
      rgba(0,0,0,0.35)
    );

  z-index:1;

  pointer-events:none;
}

/* PARTICLES */

.particles{

  position:fixed;

  inset:0;

  background-image:
    radial-gradient(
      rgba(255,255,255,0.8) 1px,
      transparent 1px
    );

  background-size:50px 50px;

  opacity:0.2;

  animation:
    moveParticles 20s linear infinite;

  z-index:2;
}

@keyframes moveParticles{

  from{
    transform:translateY(0);
  }

  to{
    transform:translateY(-50px);
  }

}

/* INLINE HEART */

.inline-heart{

  width:1em;

  height:1em;

  object-fit:contain;

  vertical-align:-0.12em;

  display:inline-block;

  filter:
    drop-shadow(0 0 6px pink);
}

/* TITLE */

.title{

  position:fixed;

  top:7%;

  left:50%;

  transform:
    translateX(-50%);

  width:90%;

  text-align:center;

  font-size:3rem;

  line-height:1.3;

  z-index:30;

  text-shadow:
    0 0 10px pink,
    0 0 20px #ff4da6;

  transition:
    opacity 2s ease;
}

/* GAME AREA */

#game-area{

  position:relative;

  width:100%;
  height:100dvh;

  overflow:hidden;
}

/* FOUNTAIN */

.fountain-container{

  position:fixed;

  left:50%;

  top:50%;

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

  width:640px;
  height:640px;

  display:flex;

  justify-content:center;

  align-items:center;

  z-index:10;

  transition:
    top 2s ease;
}

.fountain-container.game-start{

  top:78%;
}

.fountain{

  width:auto;

  height:640px;

  object-fit:contain;

  pointer-events:none;

  user-select:none;

  filter:
    drop-shadow(0 0 30px #c77dff)
    drop-shadow(0 0 70px #ff80bf);

  animation:
    fountainFloat 4s ease-in-out infinite;
}

@keyframes fountainFloat{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-8px);
  }

  100%{
    transform:translateY(0px);
  }

}

/* BUTTON */

#start-btn{

  position:fixed;

  left:50%;

  top:78%;

  transform:
    translateX(-50%);

  padding:
    18px 35px;

  border:none;

  border-radius:40px;

  font-size:1.2rem;

  font-family:"Minecraft";

  cursor:pointer;

  color:white;

  background:
    linear-gradient(
      45deg,
      #ff4da6,
      #c77dff
    );

  box-shadow:
    0 0 15px #ff80bf;

  transition:
    0.3s;

  z-index:20;
}

#start-btn:hover{

  transform:
    translateX(-50%)
    scale(1.08);

}

/* SCORE */

#score{

  position:fixed;

  top:20px;

  left:50%;

  transform:
    translateX(-50%);

  font-size:2rem;

  z-index:50;

  text-shadow:
    0 0 10px pink;
}

/* HEARTS */

.heart{

  position:absolute;

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

  background-position:center;

  background-repeat:no-repeat;

  background-size:contain;

  cursor:pointer;

  z-index:40;

  animation:
    floatUp linear forwards;

  filter:
    drop-shadow(0 0 10px pink);

  transition:
    transform 0.15s ease;
}

@keyframes floatUp{

  0%{

    transform:
      translateY(0)
      scale(0.6);

    opacity:0;
  }

  15%{
    opacity:1;
  }

  100%{

    transform:
      translateY(-120vh)
      scale(1.25);

    opacity:0;
  }

}

.heart.pop{

  transform:
    scale(1.35);

  opacity:0;
}

/* =========================
   IDLE HEARTS
========================= */

.idle-heart{

  position:absolute;

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

  background-position:center;

  background-repeat:no-repeat;

  background-size:contain;

  pointer-events:none;

  opacity:0;

  z-index:15;

  filter:
    drop-shadow(0 0 10px pink);

  animation:
    idleFloat linear forwards;
}

/* =========================
   IDLE FLOAT
========================= */

@keyframes idleFloat{

  0%{

    opacity:0;

    transform:
      translateY(0)
      scale(0.2);
  }

  20%{

    opacity:0.9;

    transform:
      translateY(-20px)
      scale(0.6);
  }

  60%{

    opacity:1;

    transform:
      translateY(-50px)
      scale(1);
  }

  100%{

    opacity:0;

    transform:
      translateY(-70px)
      scale(1.15);
  }

}

/* NICKNAME */

.nickname{

  position:absolute;

  color:#ffd6f6;

  font-size:1rem;

  white-space:nowrap;

  pointer-events:none;

  text-shadow:
    0 0 10px white,
    0 0 20px pink;

  animation:
    nicknameFade 1s forwards;

  z-index:100;
}

@keyframes nicknameFade{

  0%{

    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(0.8);
  }

  20%{

    opacity:1;

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  100%{

    opacity:0;

    transform:
      translate(-50%, -90%)
      scale(1.05);
  }

}

/* WIN SCREEN */

#win-screen{

  position:fixed;

  inset:0;

  background:
    rgba(0,0,0,0.88);

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;

  z-index:200;

  animation:
    fadeIn 2s ease;
}

#win-screen h1{

  width:90%;

  font-size:4rem;

  line-height:1.3;

  color:#ffb3d9;

  text-shadow:
    0 0 20px pink;
}

#win-screen p{

  margin-top:20px;

  font-size:1.3rem;
}

.tap-text{

  margin-top:40px;

  opacity:0.7;

  font-size:0.9rem;
}

.hidden{
  display:none !important;
}

@keyframes fadeIn{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }

}

/* MOBILE */

@media (max-width:768px){

  .title{

    top:6%;

    font-size:1.8rem;
  }

  .fountain-container{

    width:420px;
    height:420px;
  }

  .fountain{

    height:420px;
  }

  .fountain-container.game-start{

    top:82%;
  }

  #start-btn{

    top:76%;

    font-size:0.9rem;

    padding:
      16px 26px;
  }

  #score{

    font-size:1.3rem;
  }

  .nickname{

    font-size:0.8rem;
  }

  #win-screen h1{

    font-size:2.2rem;
  }

  #win-screen p{

    font-size:1rem;
  }

}