:root {
  --sky-top: #65c8f2;
  --sky-bottom: #b8edff;
  --grass: #4cae3c;
  --grass-light: #75d452;
  --soil: #b86d35;
  --soil-dark: #8e4d2b;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--sky-bottom);
  font-family: sans-serif;
}

.game-scene {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
}

.game-scene.level-two {
  background: #12052b;
}

.level-two .cloud,
.level-two .flag {
  display: none;
}

.level-two .win-message,
.level-two .final-score,
.level-two .play-again,
.level-two .next-level {
  border-color: #16f2ff;
  background: #3b137d;
  box-shadow: inset 0 -0.25rem #170a35, 0 0 0.9rem #16f2ff;
}

.level-two .win-message,
.level-two .final-score {
  color: #fff;
  text-shadow: 0.15rem 0.15rem #8e1f9d;
}

.level-two .play-again {
  color: #fff;
  text-shadow: 0.08rem 0.08rem #8e1f9d;
}

.level-two .next-level {
  color: #fff;
  text-shadow: 0.08rem 0.08rem #8e1f9d;
}

.level-two .play-again:hover,
.level-two .next-level:hover {
  background: #ff28d7;
  box-shadow: inset 0 -0.2rem #8e1f9d, 0 0 0.9rem #ff28d7;
}

.level-two .ground {
  background: #241044;
  border-top: 0.25rem solid #ff28d7;
}

.level-two .grass-line,
.level-two .soil-pattern {
  display: none;
}

.level-two .platform {
  border-color: #16f2ff;
  background: #3b137d;
  box-shadow: 0 0 0.7rem #16f2ff;
}

.level-two .platform-low {
  bottom: 31%;
  left: 15%;
}

.level-two .platform-middle {
  bottom: 44%;
  left: 30%;
}

.level-two .platform-high {
  bottom: 36%;
  left: 45%;
}

.level-two .platform-four {
  display: block;
  bottom: 52%;
  left: 58%;
  width: 6rem;
}

.level-two .platform-five,
.level-two .platform-six {
  display: block;
}

.level-two .platform-five {
  bottom: 63%;
  left: 43%;
  width: 7rem;
}

.level-two .platform-six {
  bottom: 74%;
  left: 28%;
  width: 6rem;
}

.level-two .coin-one { bottom: 33.8%; left: 17%; }
.level-two .coin-two { bottom: 20.8%; left: 28%; }
.level-two .coin-three { bottom: 46.8%; left: 44%; }
.level-two .coin-four { bottom: 38.8%; left: 67%; }
.level-two .coin-five { bottom: 76.8%; left: 27%; }

.level-two .coin {
  border-color: #ff28d7;
  background: #ff80f0;
  box-shadow: inset 0.18rem 0 #ffd1fa, 0 0 0.65rem #ff28d7;
}

.level-two .score-box {
  border-color: #16f2ff;
  background: #3b137d;
  box-shadow: inset 0 -0.25rem #170a35, 0 0 0.65rem #16f2ff;
}

.laser,
.exit-door {
  display: none;
}

.level-two .laser {
  position: absolute;
  display: block;
  z-index: 2;
  left: 0;
  bottom: 18%;
  width: 100%;
  height: 0.35rem;
  background: #ff234f;
  box-shadow: 0 0 0.8rem #ff234f;
  transform: scaleX(0);
  transform-origin: right center;
  animation: laser-pulse 4.5s steps(1, end) infinite;
}

.level-two .exit-door {
  position: absolute;
  right: 2rem;
  bottom: 18%;
  display: block;
  z-index: 2;
  width: 4.5rem;
  height: 11.5rem;
  background: transparent;
}

.level-two .exit-door::before {
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  width: 0.45rem;
  height: 100%;
  background: #16f2ff;
  box-shadow: 0 0 0.7rem #16f2ff;
  content: '';
}

.level-two .exit-door::after {
  position: absolute;
  top: 0.45rem;
  left: 1rem;
  width: 3.4rem;
  height: 2.25rem;
  background: #ff28d7;
  box-shadow: 0 0 0.8rem #ff28d7;
  clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
  content: '';
}

.level-two .final-score[hidden],
.level-two .win-message[hidden],
.level-two .play-again[hidden] {
  display: none;
}

@keyframes laser-pulse {
  0%, 38%, 72%, 100% {
    opacity: 0;
    transform: scaleX(0);
  }

  39% {
    opacity: 1;
    transform: scaleX(0);
  }

  49%, 70% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.score-box {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  z-index: 3;
  height: 2.9rem;
  padding: 0.8rem 1.15rem 0.65rem;
  border-top: 0.35rem solid var(--grass-light);
  background: var(--soil);
  color: #fff3d1;
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 0.08rem 0.08rem var(--soil-dark);
  box-shadow: inset 0 -0.25rem var(--soil-dark);
}

.hearts {
  position: absolute;
  top: 0.85rem;
  left: 50%;
  z-index: 3;
  display: flex;
  height: 2.9rem;
  gap: 0.55rem;
  align-items: center;
  transform: translateX(-50%);
}

.heart {
  display: block;
  width: 2.35rem;
  height: 2.2rem;
  background: #e63742;
  clip-path: polygon(0 15%, 15% 15%, 15% 0, 40% 0, 40% 15%, 50% 27%, 60% 15%, 60% 0, 85% 0, 85% 15%, 100% 15%, 100% 55%, 85% 55%, 85% 70%, 70% 70%, 70% 85%, 50% 100%, 30% 85%, 30% 70%, 15% 70%, 15% 55%, 0 55%);
  filter: drop-shadow(0.12rem 0.12rem 0 #9d2536);
}

.level-two .heart {
  background: #ff28d7;
  filter: drop-shadow(0.12rem 0.12rem 0 #16f2ff) drop-shadow(0 0 0.35rem #ff28d7);
}

.heart.damaged {
  background: linear-gradient(to right, transparent 0 50%, #e63742 50% 100%);
  filter: drop-shadow(0.12rem 0.12rem 0 #9d2536);
}

.level-two .heart.damaged {
  background: linear-gradient(to right, transparent 0 50%, #ff28d7 50% 100%);
  filter: drop-shadow(0.12rem 0.12rem 0 #16f2ff) drop-shadow(0 0 0.35rem #ff28d7);
}

.heart.empty {
  background: transparent;
  filter: drop-shadow(0.12rem 0.12rem 0 #9d2536);
}

.level-two .heart.empty {
  filter: drop-shadow(0.12rem 0.12rem 0 #16f2ff) drop-shadow(0 0 0.35rem #ff28d7);
}

.level-menu-button {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  z-index: 5;
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.7rem;
  align-content: center;
  gap: 0.35rem;
  border: 0.25rem solid var(--grass-light);
  border-radius: 50%;
  background: var(--soil);
  cursor: pointer;
  box-shadow: inset 0 -0.25rem var(--soil-dark);
}

.level-menu-button span {
  display: block;
  height: 0.22rem;
  background: #fff3d1;
}

.level-menu {
  position: absolute;
  top: 4.25rem;
  left: 1rem;
  z-index: 5;
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 0.25rem solid var(--grass-light);
  background: var(--soil);
  box-shadow: inset 0 -0.25rem var(--soil-dark);
}

.level-menu button {
  min-width: 7rem;
  padding: 0.55rem 0.8rem;
  border: 0.15rem solid var(--grass-light);
  background: var(--soil);
  color: #fff3d1;
  cursor: pointer;
  font: 700 1rem sans-serif;
  text-align: left;
}

.level-menu button:hover {
  background: #c47a3c;
}

.level-menu button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.level-lock {
  float: right;
}

.level-menu[hidden] {
  display: none;
}

.level-two .level-menu-button,
.level-two .level-menu {
  border-color: #16f2ff;
  background: #3b137d;
  box-shadow: inset 0 -0.25rem #170a35, 0 0 0.8rem #16f2ff;
}

.level-two .level-menu-button span {
  background: #fff;
}

.level-two .level-menu button {
  border-color: #16f2ff;
  background: #3b137d;
  color: #fff;
}

.level-two .level-menu button:hover {
  border-color: #ff28d7;
  background: #ff28d7;
  box-shadow: 0 0 0.7rem #ff28d7;
}

.flag {
  position: absolute;
  right: 2rem;
  bottom: 18%;
  z-index: 2;
  width: 4.5rem;
  height: 11.5rem;
}

.flag-pole {
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  width: 0.45rem;
  height: 100%;
  background: #f4e4b0;
}

.flag-banner {
  position: absolute;
  top: 0.45rem;
  left: 1rem;
  width: 3.4rem;
  height: 2.25rem;
  background: #d93632;
  clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
}

.win-message {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 4;
  padding: 1.1rem 1.65rem;
  transform: translate(-50%, -50%);
  background: var(--soil);
  border: 0.25rem solid var(--grass-light);
  color: #fff3d1;
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 900;
  text-shadow: 0.15rem 0.15rem var(--soil-dark);
}

.win-message[hidden] {
  display: none;
}

.final-score {
  position: absolute;
  top: calc(42% - 7.5rem);
  left: 50%;
  z-index: 4;
  padding: 0.75rem 1.15rem 0.6rem;
  transform: translateX(-50%);
  border: 0.25rem solid var(--grass-light);
  background: var(--soil);
  color: #fff3d1;
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 0.08rem 0.08rem var(--soil-dark);
  box-shadow: inset 0 -0.2rem var(--soil-dark);
}

.final-score[hidden] {
  display: none;
}

.play-again {
  position: absolute;
  top: calc(42% + 4.5rem);
  left: 50%;
  z-index: 4;
  padding: 0.75rem 1.15rem 0.6rem;
  transform: translateX(-50%);
  border: 0.25rem solid var(--grass-light);
  background: var(--soil);
  color: #fff3d1;
  cursor: pointer;
  font: 700 1.1rem sans-serif;
  text-shadow: 0.08rem 0.08rem var(--soil-dark);
  box-shadow: inset 0 -0.2rem var(--soil-dark);
}

.play-again:hover {
  background: #c47a3c;
}

.play-again[hidden] {
  display: none;
}

.next-level {
  position: absolute;
  top: calc(42% + 8.5rem);
  left: 50%;
  z-index: 4;
  padding: 0.75rem 1.15rem 0.6rem;
  transform: translateX(-50%);
  border: 0.25rem solid var(--grass-light);
  background: var(--soil);
  color: #fff3d1;
  cursor: pointer;
  font: 700 1.1rem sans-serif;
  text-shadow: 0.08rem 0.08rem var(--soil-dark);
  box-shadow: inset 0 -0.2rem var(--soil-dark);
}

.next-level:hover {
  background: #c47a3c;
}

.next-level[hidden] {
  display: none;
}

.cloud {
  position: absolute;
  width: 8rem;
  height: 2rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 2rem -1.1rem 0 -0.15rem rgba(255, 255, 255, 0.9),
    4rem -0.5rem 0 -0.25rem rgba(255, 255, 255, 0.9);
}

.cloud-one {
  top: 19%;
  left: 13%;
}

.cloud-two {
  top: 9%;
  right: 15%;
  transform: scale(0.72);
  opacity: 0.8;
}

.hero {
  position: absolute;
  z-index: 1;
  bottom: 18%;
  width: 3rem;
  height: 3.65rem;
  left: 1rem;
  transform: scale(1.35);
  transform-origin: bottom center;
}

.hero-head,
.hero-body {
  position: absolute;
}

.platform {
  position: absolute;
  z-index: 1;
  height: 1rem;
  border: 0.2rem solid #74401e;
  background: #c47a3c;
}

.platform-four {
  display: none;
}

.platform-five,
.platform-six {
  display: none;
}

.platform-low {
  bottom: 29%;
  left: 10%;
  width: 8rem;
}

.platform-middle {
  left: 37%;
  bottom: 41%;
  width: 10rem;
}

.platform-high {
  bottom: 53%;
  left: 63%;
  width: 7rem;
}

.coin {
  position: absolute;
  z-index: 2;
  width: 1.2rem;
  height: 1.2rem;
  border: 0.15rem solid #b9780c;
  border-radius: 50%;
  background: #ffd447;
  box-shadow: inset 0.18rem 0 #fff09a;
}

.coin-one { bottom: 31.8%; left: 15%; }
.coin-two { bottom: 39%; left: 29%; }
.coin-three { bottom: 43.8%; left: 45%; }
.coin-four { bottom: 51%; left: 58%; }
.coin-five { bottom: 55.8%; left: 68%; }

.hero-head {
  top: 0.65rem;
  left: 0.75rem;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  background: #f2b27f;
}

.hero-body {
  top: 2rem;
  left: 0.55rem;
  width: 1.9rem;
  height: 1.65rem;
  background: #d93632;
}

.ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18%;
  min-height: 7rem;
  background: var(--soil);
}

.grass-line {
  height: 1.25rem;
  border-top: 0.35rem solid var(--grass-light);
  background: var(--grass);
}

.soil-pattern {
  height: calc(100% - 1.25rem);
  opacity: 0.45;
  background-image: radial-gradient(var(--soil-dark) 0.2rem, transparent 0.25rem);
  background-position: 0.3rem 0.35rem;
  background-size: 1.4rem 1.4rem;
}