* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  overflow: hidden;
  background: #9cddf7;
}

.game-scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 320px;
  overflow: hidden;
  background: #78c7f0;
}

.world {
  position: absolute;
  inset: 0;
  width: 100%;
}

.game-scene.level-three .world {
  width: 100%;
}

.sky {
  position: absolute;
  inset: 0;
  background: #78c7f0;
}

.cloud {
  position: absolute;
  z-index: 1;
  width: 105px;
  height: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.88);
  filter: drop-shadow(0 4px 2px rgba(72, 145, 179, 0.18));
  animation: cloud-float 7s ease-in-out infinite alternate;
}

.cloud::before,
.cloud::after {
  position: absolute;
  border-radius: 50%;
  background: inherit;
  content: "";
}

.cloud::before {
  bottom: 8px;
  left: 18px;
  width: 42px;
  height: 42px;
}

.cloud::after {
  right: 17px;
  bottom: 7px;
  width: 34px;
  height: 34px;
}

.cloud-one { top: 17%; left: 9%; }
.cloud-two { top: 28%; left: 52%; transform: scale(.72); animation-delay: -2s; }
.cloud-three { top: 11%; right: 8%; transform: scale(.55); animation-delay: -4s; }

@keyframes cloud-float {
  from { margin-left: -8px; }
  to { margin-left: 8px; }
}

.score {
  position: absolute;
  z-index: 5;
  top: 20px;
  left: 24px;
  padding: 8px 14px;
  border: 3px solid #6b3d20;
  border-radius: 6px;
  color: #fff7d6;
  background: rgba(73, 47, 35, 0.85);
  font: 700 20px/1 Arial, sans-serif;
  text-shadow: 2px 2px #543426;
}

.level-indicator {
  position: absolute;
  z-index: 5;
  top: 20px;
  left: 155px;
  padding: 8px 14px;
  border: 3px solid #6b3d20;
  color: #fff7d6;
  background: rgba(73, 47, 35, 0.85);
  box-shadow: 3px 3px 0 rgba(39, 25, 19, 0.35);
  font: 700 20px/1 Arial, sans-serif;
  text-shadow: 2px 2px #543426;
}

#shop-button {
  position: absolute;
  top: 64px;
  left: 24px;
  z-index: 6;
  padding: 7px 13px;
  border: 3px solid #6b3d20;
  border-radius: 6px;
  color: #fff7d6;
  background: #7c32b5;
  cursor: pointer;
  font-weight: 800;
}

#settings-button {
  position: absolute;
  top: 64px;
  left: 111px;
  z-index: 6;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 247, 214, 0.9);
  border-radius: 50%;
  color: #fff7d6;
  background: rgba(53, 120, 219, 0.92);
  box-shadow: 0 3px 0 rgba(39, 25, 19, 0.35);
  cursor: pointer;
  font: 700 22px/1 Arial, sans-serif;
  transition: transform 0.15s ease, background 0.15s ease;
}

#settings-button:hover,
#settings-button:focus-visible {
  background: #245cae;
  transform: translateY(-1px);
}

#settings-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.touch-controls {
  position: absolute;
  right: 22px;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 8;
  display: none;
  gap: 10px;
  align-items: end;
}

.game-scene.touch-enabled .touch-controls { display: flex; }

.touch-button {
  width: 62px;
  height: 62px;
  border: 4px solid #6b3d20;
  border-radius: 0;
  color: #fff7d6;
  background: rgba(73, 47, 35, 0.88);
  box-shadow: 5px 5px 0 rgba(39, 25, 19, 0.5);
  cursor: pointer;
  font: 900 34px/1 "Courier New", monospace;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.touch-button.pressed,
.touch-button:active {
  background: #7c32b5;
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 rgba(39, 25, 19, 0.5);
}

.settings-panel {
  position: absolute;
  top: 104px;
  left: 105px;
  z-index: 7;
  width: 235px;
  padding: 13px;
  border: 4px solid #6b3d20;
  border-radius: 8px;
  color: #35135c;
  background: #fff1b8;
  font-family: Arial, sans-serif;
}

.settings-panel[hidden] { display: none; }
.settings-panel h2 { margin: 0 0 10px; font-size: 20px; }
.setting-row { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.setting-row input { width: 19px; height: 19px; accent-color: #7c32b5; }
.settings-panel small { display: block; margin-top: 8px; line-height: 1.3; }

@media (pointer: coarse), (max-width: 700px) {
  #settings-button { left: 24px; top: 104px; }
  .settings-panel { top: 144px; left: 24px; }
}

.shop-panel {
  position: absolute;
  top: 104px;
  left: 24px;
  z-index: 7;
  width: 225px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 12px;
  border: 4px solid #6b3d20;
  border-radius: 8px;
  background: #fff1b8;
  color: #35135c;
  font-family: Arial, sans-serif;
}

.shop-panel[hidden] { display: none; }
.shop-panel h2 { margin: 0 0 8px; font-size: 20px; }
.shop-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; padding: 7px 0; border-top: 2px solid rgba(107, 61, 32, .25); }
.shop-item b, .shop-item small { grid-column: 1; }
.shop-item small { font-size: 11px; }
.shop-item button { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 5px 7px; border: 2px solid #6b3d20; border-radius: 4px; background: #35a853; color: white; cursor: pointer; }

.health {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 5;
  display: none;
  align-items: center;
  gap: 8px;
  color: #fff;
  font: 700 16px Arial, sans-serif;
}

.health-track {
  width: 150px;
  height: 18px;
  overflow: hidden;
  border: 3px solid #35135c;
  border-radius: 5px;
  background: #40243f;
}

#health-fill {
  width: 100%;
  height: 100%;
  background: #5fcf55;
  transition: width 0.1s linear, background 0.2s;
}

.acid-rain {
  position: absolute;
  inset: 0;
  bottom: max(18vh, 72px);
  z-index: 1;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.acid-rain i {
  position: absolute;
  top: -24px;
  width: 6px;
  height: 16px;
  border-radius: 50% 50% 60% 60%;
  background: #b1ff4b;
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  animation: drop-fall 1.1s linear infinite;
}

.acid-rain i:nth-child(1) { left: 8%; animation-delay: -0.2s; }
.acid-rain i:nth-child(2) { left: 17%; animation-delay: -0.8s; transform: scale(.7); }
.acid-rain i:nth-child(3) { left: 27%; animation-delay: -0.45s; }
.acid-rain i:nth-child(4) { left: 36%; animation-delay: -1s; transform: scale(.8); }
.acid-rain i:nth-child(5) { left: 45%; animation-delay: -0.3s; }
.acid-rain i:nth-child(6) { left: 54%; animation-delay: -0.7s; transform: scale(.65); }
.acid-rain i:nth-child(7) { left: 63%; animation-delay: -0.1s; }
.acid-rain i:nth-child(8) { left: 72%; animation-delay: -0.9s; transform: scale(.8); }
.acid-rain i:nth-child(9) { left: 81%; animation-delay: -0.5s; }
.acid-rain i:nth-child(10) { left: 90%; animation-delay: -0.35s; transform: scale(.7); }
.acid-rain i:nth-child(11) { left: 22%; animation-delay: -0.6s; transform: scale(.75); }
.acid-rain i:nth-child(12) { left: 68%; animation-delay: -0.95s; transform: scale(.7); }

@keyframes drop-fall {
  from { top: -24px; }
  to { top: 105%; }
}

.acid-clouds {
  position: absolute;
  top: -25px;
  right: -5%;
  left: -5%;
  z-index: 4;
  display: none;
  height: 125px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 68%, #102b21 0 17%, transparent 18%),
    radial-gradient(ellipse at 22% 48%, #1d4930 0 23%, transparent 24%),
    radial-gradient(ellipse at 40% 63%, #123524 0 21%, transparent 22%),
    radial-gradient(ellipse at 59% 42%, #245838 0 25%, transparent 26%),
    radial-gradient(ellipse at 78% 64%, #153b28 0 22%, transparent 23%),
    radial-gradient(ellipse at 95% 47%, #1e4c31 0 22%, transparent 23%),
    linear-gradient(#0b241b 0 48%, #163d29 49% 72%, transparent 73%);
  filter: drop-shadow(0 8px 4px rgba(16, 43, 33, 0.45));
  animation: cloud-drift 8s ease-in-out infinite alternate;
}

@keyframes cloud-drift {
  from { transform: translateX(-18px); }
  to { transform: translateX(18px); }
}

@keyframes acid-fall {
  from { background-position: 0 -80px; }
  to { background-position: 0 80px; }
}

.coin {
  position: absolute;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: 3px solid #b77900;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0a900 0 25%, #ffe27a 26% 63%, #e39a00 64% 100%);
  box-shadow: 0 0 0 2px rgba(255, 232, 112, 0.35), 0 4px 0 rgba(87, 48, 16, 0.25);
  transform-style: preserve-3d;
  animation: coin-spin 1.2s linear infinite;
}

.coin::after {
  position: absolute;
  inset: -3px;
  z-index: -1;
  border: 3px solid #8c5b00;
  border-radius: 50%;
  background: #a56800;
  content: "";
  transform: translateZ(-5px);
}

@keyframes coin-spin {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(360deg); }
}

.coin::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid #8c5b00;
  border-radius: 3px;
  background: transparent;
  content: "";
  transform: translate(-50%, -50%);
}

.coin-one { bottom: 34vh; left: 24%; }
.coin-two { bottom: 46vh; left: 49%; }
.coin-three { bottom: 55vh; left: 68%; }
.coin-four { bottom: 29vh; right: 25%; }
.coin-five { bottom: 22vh; right: 8%; }
.coin-six { bottom: 38vh; left: 34%; }
.coin-seven { bottom: 52vh; left: 52%; }
.coin-eight { bottom: 64vh; left: 68%; }
.coin-nine { bottom: 48vh; right: 14%; }
.coin-ten { bottom: 30vh; right: 4%; }

.flag {
  position: absolute;
  right: -20px;
  bottom: 18vh;
  z-index: 2;
  width: 82px;
  height: 240px;
}

.flag-pole {
  position: absolute;
  bottom: 0;
  left: 8px;
  width: 8px;
  height: 240px;
  border: 2px solid #9c6900;
  border-radius: 5px;
  background: linear-gradient(90deg, #d79b16, #ffe27a 45%, #b77900 46% 100%);
  box-shadow: 3px 0 0 rgba(91, 54, 0, 0.3);
}

.flag-pole::before {
  position: absolute;
  top: -13px;
  left: -7px;
  width: 18px;
  height: 18px;
  border: 3px solid #9c6900;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a6 0 20%, #e0a51b 21% 100%);
  content: "";
}

.flag-banner {
  position: absolute;
  top: 15px;
  left: 18px;
  width: 62px;
  height: 46px;
  padding-top: 8px;
  color: #fff4ff;
  border: 3px solid #35135c;
  border-radius: 4px 42% 42% 4px / 4px 18px 18px 4px;
  background:
    linear-gradient(90deg, #6e2aa8 0 25%, #5a2191 26% 48%, #7c32b5 49% 70%, #5a2191 71% 100%);
  background-size: 140% 100%;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
  box-shadow: inset 14px 0 16px rgba(42, 10, 76, 0.55);
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: perspective(140px) rotateY(-15deg);
  animation: flag-cloth-wave 2.2s ease-in-out infinite;
}

@keyframes flag-cloth-wave {
  0%, 100% {
    background-position: 0 0;
    transform: perspective(140px) rotateY(-10deg) skewY(0deg);
  }
  20% {
    background-position: 10px 0;
    transform: perspective(140px) rotateY(4deg) skewY(1deg);
  }
  40% {
    background-position: 22px 0;
    transform: perspective(140px) rotateY(13deg) skewY(2deg);
  }
  60% {
    background-position: 8px 0;
    transform: perspective(140px) rotateY(-3deg) skewY(-1deg);
  }
  80% {
    background-position: -10px 0;
    transform: perspective(140px) rotateY(-15deg) skewY(-2deg);
  }
}

.win-screen {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(28, 42, 52, 0.58);
}

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

.win-card {
  padding: 30px 42px;
  border: 5px solid #b77900;
  border-radius: 12px;
  background: #fff1b8;
  box-shadow: 0 8px 0 rgba(69, 38, 24, 0.4);
  text-align: center;
}

.win-card h1 {
  margin: 0 0 20px;
  color: #e63946;
  font: 800 40px/1 Arial, sans-serif;
}

#play-again {
  padding: 11px 18px;
  border: 3px solid #6b3d20;
  border-radius: 6px;
  color: #fff7d6;
  background: #477b2c;
  cursor: pointer;
  font: 700 18px/1 Arial, sans-serif;
}

#next-level {
  margin-right: 8px;
  padding: 11px 18px;
  border: 3px solid #35135c;
  border-radius: 6px;
  color: #fff4ff;
  background: #7c32b5;
  cursor: pointer;
  font: 700 18px/1 Arial, sans-serif;
}

#buy-hero {
  display: block;
  margin: 0 auto 12px;
  padding: 10px 16px;
  border: 3px solid #6b3d20;
  border-radius: 6px;
  color: #fff7d6;
  background: #e63946;
  cursor: pointer;
  font: 700 16px/1 Arial, sans-serif;
}

#buy-hero:disabled {
  cursor: default;
  opacity: 0.55;
}

.hero.new-hero {
  border-color: var(--hero-color, #35135c);
  background: #9b4dcc;
  box-shadow: inset 5px 5px 0 #c779ef;
}

.game-scene.level-two .platform-one { bottom: 38vh; left: 6%; }
.game-scene.level-two .platform-two { bottom: 27vh; left: 38%; }
.game-scene.level-two .platform-three { bottom: 50vh; right: 18%; }
.game-scene.level-two .platform-four { display: block; bottom: 63vh; left: 16%; width: 125px; }
.game-scene.level-two .platform-five { display: block; bottom: 44vh; right: 3%; width: 115px; }
.game-scene.level-two .coin-one { bottom: 44vh; left: 19%; }
.game-scene.level-two .coin-two { bottom: 33vh; left: 48%; }
.game-scene.level-two .coin-three { bottom: 56vh; left: 72%; }
.game-scene.level-two .coin-four { bottom: 39vh; right: 28%; }
.game-scene.level-two .coin-five { bottom: 25vh; right: 12%; }
.game-scene.level-three .acid-rain { display: flex; }
.game-scene.level-three .acid-rain { display: block; }
.game-scene.level-three .platform-one { bottom: 33vh; left: 5%; }
.game-scene.level-three .platform-two { bottom: 55vh; left: 32%; }
.game-scene.level-three .platform-three { bottom: 38vh; right: 23%; }
.game-scene.level-three .platform-four { display: block; bottom: 65vh; left: 65%; }
.game-scene.level-three .platform-five { display: block; bottom: 48vh; right: 2%; }

.ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18vh;
  min-height: 72px;
  z-index: 1;
  border: 3px solid #6b3d20;
  border-top: 8px solid #6b3d20;
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(70, 38, 24, 0.3) 59px 62px, transparent 63px 120px),
    linear-gradient(#8a5631 0 18%, #694127 19% 62%, #4d3023 63% 100%);
  box-shadow: inset 0 5px 0 #77ad3d;
}

.ground-left { display: none; }

.game-scene.level-seventeen .ground:not(.ground-left) {
  left: 65%;
  width: 35%;
}

.game-scene.level-seventeen .ground-left {
  right: auto;
  left: 0;
  display: block;
  width: 30%;
}

.ground::before {
  position: absolute;
  top: -11px;
  right: -3px;
  left: -3px;
  height: 11px;
  border: 3px solid #477b2c;
  border-bottom: 0;
  background: repeating-linear-gradient(135deg, #77ad3d 0 8px, #5d922f 8px 13px);
  content: "";
}

.ground::after {
  position: absolute;
  top: 22px;
  left: 8%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b9783d;
  box-shadow: 140px 26px #b9783d, 310px 8px #8a5631, 510px 40px #b9783d, 760px 18px #8a5631;
  content: "";
}

.platform {
  position: absolute;
  z-index: 2;
  height: 18px;
  border: 3px solid #6b3d20;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 31%, rgba(91, 45, 23, 0.35) 32%, rgba(91, 45, 23, 0.35) 34%, transparent 35%, transparent 68%, rgba(91, 45, 23, 0.35) 69%, rgba(91, 45, 23, 0.35) 71%, transparent 72%),
    linear-gradient(#d9954d 0 48%, #a95f30 49% 100%);
  box-shadow: inset 0 3px 0 #e3a45b, 0 5px 0 rgba(69, 38, 24, 0.35);
}

.platform::before {
  position: absolute;
  top: -9px;
  right: -3px;
  left: -3px;
  height: 7px;
  border: 3px solid #477b2c;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(135deg, #77ad3d 0 6px, #5d922f 6px 10px);
  content: "";
}

.platform::after {
  position: absolute;
  top: 4px;
  left: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f2c36b;
  box-shadow: calc(100% - 20px) 0 #f2c36b;
  content: "";
}

.platform-one {
  bottom: 28vh;
  left: 12%;
  width: 150px;
}

.platform-two {
  bottom: 52vh;
  left: 43%;
  width: 170px;
}

.platform-three {
  bottom: 40vh;
  right: 10%;
  width: 135px;
}

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

.hole {
  position: absolute;
  bottom: 0;
  z-index: 2;
  display: none;
  height: 18vh;
  min-height: 72px;
  border-top: 0;
  background: transparent;
}

/* Holes remain part of the scenery markup for future layouts, but level 2 is
   a friendly ground-based level. */
.hole { display: none; }
.hole-one { left: 28%; width: 90px; }
.hole-two { left: 57%; width: 115px; }
.hole-three { right: 20%; width: 75px; }

.platform-six,
.platform-seven,
.platform-eight { display: none; }
.game-scene.level-three .platform-six { display: block; bottom: 30vh; left: 25%; width: 95px; }
.game-scene.level-three .platform-seven { display: block; bottom: 68vh; left: 46%; width: 105px; }
.game-scene.level-three .platform-eight { display: block; bottom: 32vh; right: 12%; width: 85px; }
.game-scene.level-four .platform-one { bottom: 28vh; left: 8%; }
.game-scene.level-four .platform-two { bottom: 38vh; left: 31%; }
.game-scene.level-four .platform-three { bottom: 30vh; right: 8%; }
.game-scene.level-four .platform-four { display: block; bottom: 46vh; left: 53%; width: 110px; }
.game-scene.level-four .platform-five { display: block; bottom: 25vh; right: 28%; width: 100px; }
.game-scene.level-four .platform-six { display: block; bottom: 34vh; left: 18%; width: 95px; }
.game-scene.level-four .platform-seven { display: block; bottom: 44vh; right: 10%; width: 100px; }
.game-scene.level-four .platform-eight { display: block; bottom: 27vh; left: 65%; width: 90px; }
.game-scene.level-four .coin-one { bottom: 23vh; left: 17%; }
.game-scene.level-four .coin-two { bottom: 33vh; left: 40%; }
.game-scene.level-four .coin-three { bottom: 41vh; left: 59%; }
.game-scene.level-four .coin-four { bottom: 27vh; right: 34%; }
.game-scene.level-four .coin-five { bottom: 23vh; right: 12%; }

/* Levels 5–10: each route uses the ground and platforms, so every layout has
   a safe path from the start to the flag. */
.game-scene.level-five .platform-one { bottom: 25vh; left: 5%; }
.game-scene.level-five .platform-two { bottom: 42vh; left: 28%; }
.game-scene.level-five .platform-three { bottom: 46vh; left: 54%; }
.game-scene.level-five .platform-four { display: block; bottom: 35vh; right: 5%; width: 120px; }
.game-scene.level-five .coin-one { bottom: 31vh; left: 12%; }
.game-scene.level-five .coin-two { bottom: 48vh; left: 36%; }
.game-scene.level-five .coin-three { bottom: 52vh; left: 62%; }
.game-scene.level-five .coin-four { bottom: 41vh; right: 12%; }
.game-scene.level-five .coin-five { bottom: 22vh; right: 5%; }

.game-scene.level-six .platform-one { bottom: 45vh; left: 8%; }
.game-scene.level-six .platform-two { bottom: 28vh; left: 35%; }
.game-scene.level-six .platform-three { bottom: 50vh; right: 8%; }
.game-scene.level-six .platform-four { display: block; bottom: 48vh; left: 48%; width: 110px; }
.game-scene.level-six .platform-five { display: block; bottom: 36vh; right: 30%; width: 100px; }
.game-scene.level-six .coin-one { bottom: 51vh; left: 14%; }
.game-scene.level-six .coin-two { bottom: 34vh; left: 43%; }
.game-scene.level-six .coin-three { bottom: 56vh; left: 53%; }
.game-scene.level-six .coin-four { bottom: 56vh; right: 15%; }
.game-scene.level-six .coin-five { bottom: 42vh; right: 34%; }

.game-scene.level-seven .platform-one { bottom: 32vh; left: 4%; }
.game-scene.level-seven .platform-two { bottom: 46vh; left: 24%; }
.game-scene.level-seven .platform-three { bottom: 36vh; left: 55%; }
.game-scene.level-seven .platform-four { display: block; bottom: 48vh; right: 7%; width: 125px; }
.game-scene.level-seven .platform-five { display: block; bottom: 48vh; left: 42%; width: 90px; }
.game-scene.level-seven .coin-one { bottom: 38vh; left: 11%; }
.game-scene.level-seven .coin-two { bottom: 54vh; left: 31%; }
.game-scene.level-seven .coin-three { bottom: 56vh; left: 48%; }
.game-scene.level-seven .coin-four { bottom: 42vh; left: 67%; }
.game-scene.level-seven .coin-five { bottom: 56vh; right: 12%; }

.game-scene.level-eight .platform-one { bottom: 52vh; left: 10%; }
.game-scene.level-eight .platform-two { bottom: 34vh; left: 42%; }
.game-scene.level-eight .platform-three { bottom: 46vh; right: 8%; }
.game-scene.level-eight .platform-six { display: block; bottom: 25vh; left: 20%; width: 95px; }
.game-scene.level-eight .platform-seven { display: block; bottom: 44vh; left: 68%; width: 100px; }
.game-scene.level-eight .coin-one { bottom: 58vh; left: 17%; }
.game-scene.level-eight .coin-two { bottom: 40vh; left: 50%; }
.game-scene.level-eight .coin-three { bottom: 54vh; right: 14%; }
.game-scene.level-eight .coin-four { bottom: 31vh; left: 25%; }
.game-scene.level-eight .coin-five { bottom: 50vh; right: 23%; }

.game-scene.level-nine .platform-one { bottom: 28vh; left: 8%; }
.game-scene.level-nine .platform-two { bottom: 48vh; left: 30%; }
.game-scene.level-nine .platform-three { bottom: 30vh; right: 8%; }
.game-scene.level-nine .platform-four { display: block; bottom: 48vh; left: 53%; }
.game-scene.level-nine .platform-five { display: block; bottom: 54vh; right: 28%; width: 105px; }
.game-scene.level-nine .coin-one { bottom: 34vh; left: 14%; }
.game-scene.level-nine .coin-two { bottom: 56vh; left: 38%; }
.game-scene.level-nine .coin-three { bottom: 56vh; left: 59%; }
.game-scene.level-nine .coin-four { bottom: 62vh; right: 32%; }
.game-scene.level-nine .coin-five { bottom: 36vh; right: 14%; }

.game-scene.level-ten .platform-one { bottom: 40vh; left: 5%; }
.game-scene.level-ten .platform-two { bottom: 48vh; left: 28%; }
.game-scene.level-ten .platform-three { bottom: 44vh; left: 58%; }
.game-scene.level-ten .platform-four { display: block; bottom: 50vh; right: 5%; width: 125px; }
.game-scene.level-ten .platform-five { display: block; bottom: 28vh; left: 42%; width: 105px; }
.game-scene.level-ten .coin-one { bottom: 46vh; left: 12%; }
.game-scene.level-ten .coin-two { bottom: 56vh; left: 35%; }
.game-scene.level-ten .coin-three { bottom: 52vh; left: 64%; }
.game-scene.level-ten .coin-four { bottom: 36vh; left: 48%; }
.game-scene.level-ten .coin-five { bottom: 58vh; right: 11%; }

.game-scene.level-eleven .platform-one { bottom: 34vh; left: 3%; }
.game-scene.level-eleven .platform-two { bottom: 47vh; left: 25%; }
.game-scene.level-eleven .platform-three { bottom: 36vh; left: 58%; }
.game-scene.level-eleven .platform-four { display: block; bottom: 53vh; right: 5%; width: 115px; }
.game-scene.level-eleven .platform-five { display: block; bottom: 27vh; left: 42%; width: 95px; }
.game-scene.level-eleven .coin-one { bottom: 40vh; left: 10%; }
.game-scene.level-eleven .coin-two { bottom: 55vh; left: 32%; }
.game-scene.level-eleven .coin-three { bottom: 44vh; left: 66%; }
.game-scene.level-eleven .coin-four { bottom: 61vh; right: 12%; }
.game-scene.level-eleven .coin-five { bottom: 34vh; left: 47%; }

.game-scene.level-twelve .platform-one { bottom: 43vh; left: 7%; }
.game-scene.level-twelve .platform-two { bottom: 29vh; left: 34%; }
.game-scene.level-twelve .platform-three { bottom: 49vh; right: 5%; }
.game-scene.level-twelve .platform-four { display: block; bottom: 58vh; left: 48%; width: 105px; }
.game-scene.level-twelve .platform-five { display: block; bottom: 36vh; right: 26%; width: 90px; }
.game-scene.level-twelve .coin-one { bottom: 49vh; left: 14%; }
.game-scene.level-twelve .coin-two { bottom: 36vh; left: 42%; }
.game-scene.level-twelve .coin-three { bottom: 64vh; left: 54%; }
.game-scene.level-twelve .coin-four { bottom: 56vh; right: 13%; }
.game-scene.level-twelve .coin-five { bottom: 43vh; right: 31%; }

.game-scene.level-thirteen .platform-one { bottom: 30vh; left: 5%; }
.game-scene.level-thirteen .platform-two { bottom: 51vh; left: 22%; }
.game-scene.level-thirteen .platform-three { bottom: 39vh; left: 53%; }
.game-scene.level-thirteen .platform-four { display: block; bottom: 56vh; right: 4%; width: 120px; }
.game-scene.level-thirteen .platform-five { display: block; bottom: 33vh; left: 38%; width: 90px; }
.game-scene.level-thirteen .platform-six { display: block; bottom: 45vh; left: 72%; width: 80px; }
.game-scene.level-thirteen .coin-one { bottom: 36vh; left: 12%; }
.game-scene.level-thirteen .coin-two { bottom: 59vh; left: 29%; }
.game-scene.level-thirteen .coin-three { bottom: 47vh; left: 61%; }
.game-scene.level-thirteen .coin-four { bottom: 63vh; right: 13%; }
.game-scene.level-thirteen .coin-five { bottom: 39vh; left: 43%; }

.game-scene.level-fourteen .platform-one { bottom: 46vh; left: 4%; }
.game-scene.level-fourteen .platform-two { bottom: 35vh; left: 30%; }
.game-scene.level-fourteen .platform-three { bottom: 54vh; right: 7%; }
.game-scene.level-fourteen .platform-four { display: block; bottom: 65vh; left: 52%; width: 105px; }
.game-scene.level-fourteen .platform-five { display: block; bottom: 42vh; right: 27%; width: 90px; }
.game-scene.level-fourteen .coin-one { bottom: 52vh; left: 11%; }
.game-scene.level-fourteen .coin-two { bottom: 42vh; left: 37%; }
.game-scene.level-fourteen .coin-three { bottom: 71vh; left: 58%; }
.game-scene.level-fourteen .coin-four { bottom: 61vh; right: 32%; }
.game-scene.level-fourteen .coin-five { bottom: 60vh; right: 12%; }

.game-scene.level-fifteen .platform-one { bottom: 37vh; left: 3%; }
.game-scene.level-fifteen .platform-two { bottom: 54vh; left: 23%; }
.game-scene.level-fifteen .platform-three { bottom: 43vh; left: 55%; }
.game-scene.level-fifteen .platform-four { display: block; bottom: 67vh; right: 4%; width: 120px; }
.game-scene.level-fifteen .platform-five { display: block; bottom: 31vh; left: 40%; width: 95px; }
.game-scene.level-fifteen .platform-six { display: block; bottom: 49vh; left: 73%; width: 80px; }
.game-scene.level-fifteen .coin-one { bottom: 44vh; left: 10%; }
.game-scene.level-fifteen .coin-two { bottom: 62vh; left: 31%; }
.game-scene.level-fifteen .coin-three { bottom: 51vh; left: 64%; }
.game-scene.level-fifteen .coin-four { bottom: 69vh; right: 13%; }
.game-scene.level-fifteen .coin-five { bottom: 37vh; left: 45%; }

.moving-platform { display: none; }
.platform-nine { display: none; }
.platform-ten,
.platform-eleven { display: none; }
.game-scene.level-sixteen .ground {
  right: 0;
  left: 50%;
  width: 50%;
}
.game-scene.level-sixteen .moving-platform {
  display: block;
  bottom: 30vh;
  left: 42%;
  width: 130px;
  animation: platform-shuttle 5s ease-in-out infinite alternate;
}
.game-scene.level-sixteen .platform-one,
.game-scene.level-sixteen .platform-two,
.game-scene.level-sixteen .platform-three,
.game-scene.level-sixteen .platform-four,
.game-scene.level-sixteen .platform-five,
.game-scene.level-sixteen .platform-six,
.game-scene.level-sixteen .platform-seven,
.game-scene.level-sixteen .platform-eight { display: none; }

@keyframes platform-shuttle {
  from { transform: translateX(-38vw); }
  to { transform: translateX(30vw); }
}

/* Levels 17–25 use the same gap challenge with varied timing and heights. */
.game-scene.level-seventeen .ground,
.game-scene.level-eighteen .ground,
.game-scene.level-nineteen .ground,
.game-scene.level-twenty .ground,
.game-scene.level-twenty-one .ground,
.game-scene.level-twenty-two .ground,
.game-scene.level-twenty-three .ground,
.game-scene.level-twenty-four .ground,
.game-scene.level-twenty-five .ground { right: 0; left: 50%; width: 50%; }

.game-scene.level-seventeen .moving-platform,
.game-scene.level-eighteen .moving-platform,
.game-scene.level-nineteen .moving-platform,
.game-scene.level-twenty .moving-platform,
.game-scene.level-twenty-one .moving-platform,
.game-scene.level-twenty-two .moving-platform,
.game-scene.level-twenty-three .moving-platform,
.game-scene.level-twenty-four .moving-platform,
.game-scene.level-twenty-five .moving-platform { display: block; left: 42%; width: 130px; }

.game-scene.level-seventeen .platform:not(.moving-platform),
.game-scene.level-eighteen .platform:not(.moving-platform),
.game-scene.level-nineteen .platform:not(.moving-platform),
.game-scene.level-twenty .platform:not(.moving-platform),
.game-scene.level-twenty-one .platform:not(.moving-platform),
.game-scene.level-twenty-two .platform:not(.moving-platform),
.game-scene.level-twenty-three .platform:not(.moving-platform),
.game-scene.level-twenty-four .platform:not(.moving-platform),
.game-scene.level-twenty-five .platform:not(.moving-platform) { display: none; }

.game-scene.level-seventeen .moving-platform { bottom: 25vh; animation-duration: 4.8s; }
.game-scene.level-eighteen .moving-platform { bottom: 34vh; animation-duration: 5.4s; }
.game-scene.level-nineteen .moving-platform { bottom: 29vh; animation-duration: 4.2s; }
.game-scene.level-twenty .moving-platform { bottom: 40vh; animation-duration: 6s; }
.game-scene.level-twenty-one .moving-platform { bottom: 27vh; animation-duration: 3.8s; }
.game-scene.level-twenty-two .moving-platform { bottom: 36vh; animation-duration: 5.8s; }
.game-scene.level-twenty-three .moving-platform { bottom: 31vh; animation-duration: 4.5s; }
.game-scene.level-twenty-four .moving-platform { bottom: 43vh; animation-duration: 6.4s; }
.game-scene.level-twenty-five .moving-platform { bottom: 33vh; animation-duration: 3.5s; }

/* Distinct gap widths and platform positions for each challenge. */
.game-scene.level-seventeen .ground { left: 58%; width: 42%; }
.game-scene.level-seventeen .moving-platform { left: 34%; width: 105px; }
.game-scene.level-eighteen .ground { left: 44%; width: 56%; }
.game-scene.level-eighteen .moving-platform { left: 50%; width: 145px; }
.game-scene.level-nineteen .ground { left: 62%; width: 38%; }
.game-scene.level-nineteen .moving-platform { left: 27%; width: 125px; }
.game-scene.level-twenty .ground { left: 48%; width: 52%; }
.game-scene.level-twenty .moving-platform { left: 57%; width: 100px; }
.game-scene.level-twenty-one .ground { left: 55%; width: 45%; }
.game-scene.level-twenty-one .moving-platform { left: 20%; width: 155px; }
.game-scene.level-twenty-two .ground { left: 40%; width: 60%; }
.game-scene.level-twenty-two .moving-platform { left: 46%; width: 115px; }
.game-scene.level-twenty-three .ground { left: 65%; width: 35%; }
.game-scene.level-twenty-three .moving-platform { left: 31%; width: 135px; }
.game-scene.level-twenty-four .ground { left: 47%; width: 53%; }
.game-scene.level-twenty-four .moving-platform { left: 61%; width: 90px; }
.game-scene.level-twenty-five .ground { left: 57%; width: 43%; }
.game-scene.level-twenty-five .moving-platform { left: 25%; width: 160px; }

.game-scene.level-seventeen .coin-one { left: 18%; bottom: 24vh; }
.game-scene.level-seventeen .coin-two { left: 38%; bottom: 47vh; }
.game-scene.level-eighteen .coin-one { left: 8%; bottom: 39vh; }
.game-scene.level-eighteen .coin-three { right: 30%; bottom: 53vh; }
.game-scene.level-nineteen .coin-two { left: 28%; bottom: 32vh; }
.game-scene.level-nineteen .coin-four { right: 8%; bottom: 42vh; }
.game-scene.level-twenty .coin-one { left: 22%; bottom: 29vh; }
.game-scene.level-twenty .coin-five { right: 7%; bottom: 51vh; }
.game-scene.level-twenty-one .coin-two { left: 17%; bottom: 58vh; }
.game-scene.level-twenty-one .coin-four { right: 22%; bottom: 28vh; }
.game-scene.level-twenty-two .coin-one { left: 5%; bottom: 46vh; }
.game-scene.level-twenty-two .coin-three { left: 73%; bottom: 39vh; }
.game-scene.level-twenty-three .coin-two { left: 44%; bottom: 53vh; }
.game-scene.level-twenty-three .coin-five { right: 6%; bottom: 26vh; }
.game-scene.level-twenty-four .coin-one { left: 13%; bottom: 55vh; }
.game-scene.level-twenty-four .coin-four { right: 39%; bottom: 35vh; }
.game-scene.level-twenty-five .coin-two { left: 25%; bottom: 41vh; }
.game-scene.level-twenty-five .coin-three { left: 70%; bottom: 58vh; }

/* Keep the start and finish reliably grounded on every moving-platform level. */
.game-scene.level-seventeen .ground,
.game-scene.level-eighteen .ground,
.game-scene.level-nineteen .ground,
.game-scene.level-twenty .ground,
.game-scene.level-twenty-one .ground,
.game-scene.level-twenty-two .ground,
.game-scene.level-twenty-three .ground,
.game-scene.level-twenty-four .ground,
.game-scene.level-twenty-five .ground { left: 50% !important; width: 50% !important; }

.game-scene.level-seventeen .moving-platform,
.game-scene.level-eighteen .moving-platform,
.game-scene.level-nineteen .moving-platform,
.game-scene.level-twenty .moving-platform,
.game-scene.level-twenty-one .moving-platform,
.game-scene.level-twenty-two .moving-platform,
.game-scene.level-twenty-three .moving-platform,
.game-scene.level-twenty-four .moving-platform,
.game-scene.level-twenty-five .moving-platform { left: 42% !important; }

/* Level 17 has two ground islands with the gap centered between them. */
.game-scene.level-seventeen .ground:not(.ground-left) { left: 65% !important; width: 35% !important; }
.game-scene.level-seventeen .ground-left { right: auto; left: 0 !important; width: 30% !important; }

/* Levels 18–25 return to regular full-ground platforming. */
.game-scene.level-eighteen .ground,
.game-scene.level-nineteen .ground,
.game-scene.level-twenty .ground,
.game-scene.level-twenty-one .ground,
.game-scene.level-twenty-two .ground,
.game-scene.level-twenty-three .ground,
.game-scene.level-twenty-four .ground,
.game-scene.level-twenty-five .ground {
  left: 0 !important;
  width: 100% !important;
}

.game-scene.level-eighteen .moving-platform,
.game-scene.level-nineteen .moving-platform,
.game-scene.level-twenty .moving-platform,
.game-scene.level-twenty-one .moving-platform,
.game-scene.level-twenty-two .moving-platform,
.game-scene.level-twenty-three .moving-platform,
.game-scene.level-twenty-four .moving-platform,
.game-scene.level-twenty-five .moving-platform { display: none; }

.game-scene.level-eighteen .platform:not(.moving-platform),
.game-scene.level-nineteen .platform:not(.moving-platform),
.game-scene.level-twenty .platform:not(.moving-platform),
.game-scene.level-twenty-one .platform:not(.moving-platform),
.game-scene.level-twenty-two .platform:not(.moving-platform),
.game-scene.level-twenty-three .platform:not(.moving-platform),
.game-scene.level-twenty-four .platform:not(.moving-platform),
.game-scene.level-twenty-five .platform:not(.moving-platform) { display: block; }

.game-scene.level-eighteen .platform-four,
.game-scene.level-eighteen .platform-five,
.game-scene.level-eighteen .platform-six,
.game-scene.level-eighteen .platform-seven,
.game-scene.level-eighteen .platform-eight,
.game-scene.level-nineteen .platform-four,
.game-scene.level-nineteen .platform-five,
.game-scene.level-nineteen .platform-six,
.game-scene.level-nineteen .platform-seven,
.game-scene.level-nineteen .platform-eight,
.game-scene.level-twenty .platform-four,
.game-scene.level-twenty .platform-five,
.game-scene.level-twenty .platform-six,
.game-scene.level-twenty .platform-seven,
.game-scene.level-twenty .platform-eight,
.game-scene.level-twenty-one .platform-four,
.game-scene.level-twenty-one .platform-five,
.game-scene.level-twenty-one .platform-six,
.game-scene.level-twenty-one .platform-seven,
.game-scene.level-twenty-one .platform-eight,
.game-scene.level-twenty-two .platform-four,
.game-scene.level-twenty-two .platform-five,
.game-scene.level-twenty-two .platform-six,
.game-scene.level-twenty-two .platform-seven,
.game-scene.level-twenty-two .platform-eight,
.game-scene.level-twenty-three .platform-four,
.game-scene.level-twenty-three .platform-five,
.game-scene.level-twenty-three .platform-six,
.game-scene.level-twenty-three .platform-seven,
.game-scene.level-twenty-three .platform-eight,
.game-scene.level-twenty-four .platform-four,
.game-scene.level-twenty-four .platform-five,
.game-scene.level-twenty-four .platform-six,
.game-scene.level-twenty-four .platform-seven,
.game-scene.level-twenty-four .platform-eight,
.game-scene.level-twenty-five .platform-four,
.game-scene.level-twenty-five .platform-five,
.game-scene.level-twenty-five .platform-six,
.game-scene.level-twenty-five .platform-seven,
.game-scene.level-twenty-five .platform-eight { display: none; }

.game-scene.level-seventeen .moving-platform,
.game-scene.level-nineteen .moving-platform,
.game-scene.level-twenty-one .moving-platform,
.game-scene.level-twenty-three .moving-platform,
.game-scene.level-twenty-five .moving-platform { animation-name: platform-shuttle-wide; }

@keyframes platform-shuttle-wide {
  from { transform: translateX(-45vw); }
  to { transform: translateX(31vw); }
}

/* Level 26: three platforms rise and fall continuously. */
.game-scene.level-twenty-six .platform-one,
.game-scene.level-twenty-six .platform-two,
.game-scene.level-twenty-six .platform-three {
  display: block;
  bottom: 25vh;
}

.game-scene.level-twenty-six .platform-one {
  left: 16%;
  width: 115px;
  animation: platform-rise-fall-one 3.8s ease-in-out infinite alternate;
}

.game-scene.level-twenty-six .platform-two {
  left: 43%;
  width: 125px;
  animation: platform-rise-fall-two 4.6s ease-in-out infinite alternate;
}

.game-scene.level-twenty-six .platform-three {
  right: 12%;
  width: 110px;
  animation: platform-rise-fall-three 5.2s ease-in-out infinite alternate;
}

.game-scene.level-twenty-six .platform-four,
.game-scene.level-twenty-six .platform-five,
.game-scene.level-twenty-six .platform-six,
.game-scene.level-twenty-six .platform-seven,
.game-scene.level-twenty-six .platform-eight,
.game-scene.level-twenty-six .moving-platform { display: none; }

@keyframes platform-rise-fall-one {
  from { transform: translateY(0); }
  to { transform: translateY(-30vh); }
}

@keyframes platform-rise-fall-two {
  from { transform: translateY(-10vh); }
  to { transform: translateY(-38vh); }
}

@keyframes platform-rise-fall-three {
  from { transform: translateY(-3vh); }
  to { transform: translateY(-32vh); }
}

.hero {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  width: 42px;
  height: 42px;
  border: 3px solid var(--hero-color, #7c1f27);
  border-radius: 4px;
  background: var(--hero-color, #e63946);
  transform: translateX(-50%);
}

.hero-colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 250px;
  margin: 0 auto 16px;
}

.color-choice {
  width: 22px;
  height: 22px;
  border: 2px solid #6b3d20;
  border-radius: 5px;
  cursor: pointer;
}

.color-choice.blue { background: #3478db; }
.color-choice.cyan { background: #19d3d1; }
.color-choice.pink { background: #ec4899; }
.color-choice.orange { background: #f97316; }
.color-choice.yellow { background: #facc15; }
.color-choice.black { background: #171717; }
.color-choice.white { background: #fff; }
.color-choice.gray { background: #737373; }
.color-choice.red { background: #e63946; }
.color-choice.green { background: #35a853; }
.color-choice.brown { background: #8b5a2b; }

.hero[hidden] {
  display: none !important;
}

.hero::before {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.42);
  content: "";
}

.ground {
  box-shadow: inset 0 4px 0 #a8d45c, inset 0 12px 0 rgba(217, 149, 77, 0.22), 4px 4px 0 rgba(47, 25, 16, 0.45);
}

.flag-banner {
  text-shadow: 3px 3px 0 rgba(53, 19, 92, 0.6);
}

@media (max-height: 400px) {
  .hero {
    bottom: 80px;
  }
}

/* Pixel-art visual style */
body,
button {
  font-family: "Courier New", monospace;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

.game-scene,
.game-scene * {
  image-rendering: pixelated;
}

.score,
.level-indicator,
#shop-button,
.shop-panel,
.win-card,
.platform,
.ground,
.hero,
.coin,
.flag-pole,
.flag-banner,
.color-choice,
#next-level,
#play-again {
  border-radius: 0;
}

.score,
#shop-button,
.shop-panel,
.win-card {
  border-width: 4px;
  box-shadow: 6px 6px 0 rgba(39, 25, 19, 0.5);
}

.platform,
.ground,
.hero {
  box-shadow: 4px 4px 0 rgba(47, 25, 16, 0.45);
}

.coin {
  box-shadow: 3px 3px 0 rgba(87, 48, 16, 0.45);
  animation-timing-function: steps(8, end);
}

.cloud,
.cloud::before,
.cloud::after {
  border-radius: 0;
}

.cloud {
  animation-timing-function: steps(4, end);
}

.flag-banner {
  animation-timing-function: steps(6, end);
}

.win-card h1,
.score,
.shop-panel h2 {
  letter-spacing: 1px;
}

.secret-level,
.level-picker {
  display: block;
  margin-top: 10px;
}

.secret-code,
.level-picker select {
  box-sizing: border-box;
  width: 100%;
  margin-top: 5px;
  padding: 6px;
  border: 2px solid #35135c;
  background: #fff7d6;
  color: #35135c;
  font: 700 14px "Courier New", monospace;
}

/* Level 27's reward box gives the hero visible white wings. */
.mystery-box {
  display: none;
  position: absolute;
  z-index: 3;
  bottom: 34vh;
  left: 48%;
  width: 34px;
  height: 34px;
  border: 4px solid #6b3d20;
  color: #fff7b2;
  background: #e9a928;
  box-shadow: inset 4px 4px 0 #ffd85a, 4px 4px 0 rgba(47, 25, 16, 0.45);
  font: 700 26px/29px "Courier New", monospace;
  text-align: center;
}

.game-scene.level-twenty-seven .mystery-box { display: block; }

.game-scene.level-twenty-seven .ground {
  right: auto;
  left: 0;
  width: 10%;
}

.game-scene.level-twenty-seven .ground-left {
  right: 0;
  left: auto;
  display: block;
  width: 10%;
}

.game-scene.level-twenty-seven .mystery-box {
  bottom: 27vh;
  left: 5%;
}

.game-scene.level-twenty-seven .platform-one { left: 18%; bottom: 31vh; }
.game-scene.level-twenty-seven .platform-two { left: 43%; bottom: 47vh; }
.game-scene.level-twenty-seven .platform-three { right: 12%; bottom: 35vh; }
.game-scene.level-twenty-seven .platform-one,
.game-scene.level-twenty-seven .platform-two,
.game-scene.level-twenty-seven .platform-three,
.game-scene.level-twenty-seven .platform-four,
.game-scene.level-twenty-seven .platform-five,
.game-scene.level-twenty-seven .platform-six,
.game-scene.level-twenty-seven .platform-seven,
.game-scene.level-twenty-seven .platform-eight,
.game-scene.level-twenty-seven .moving-platform { display: none; }

.hero.has-wings::before {
  position: absolute;
  top: 14px;
  width: 23px;
  height: 26px;
  border: 3px solid #b9c6d8;
  background: #fff;
  content: "";
}

.hero.has-wings::before { left: -22px; transform: skewY(22deg); }
.hero.has-wings::after { display: none; }

/* Level 28: cross the same gap with five moving platforms. */
.game-scene.level-twenty-eight .ground {
  right: auto;
  left: 0;
  width: 10%;
}

.game-scene.level-twenty-eight .ground-left {
  right: 0;
  left: auto;
  display: block;
  width: 10%;
}

.game-scene.level-twenty-eight .platform-one,
.game-scene.level-twenty-eight .platform-two,
.game-scene.level-twenty-eight .platform-three,
.game-scene.level-twenty-eight .platform-four,
.game-scene.level-twenty-eight .platform-five {
  display: block;
  width: 105px;
}

.game-scene.level-twenty-eight .platform-one { left: 16%; bottom: 25vh; animation: level28-platform-one 3.8s ease-in-out infinite alternate; }
.game-scene.level-twenty-eight .platform-two { left: 32%; bottom: 38vh; animation: level28-platform-two 4.4s ease-in-out infinite alternate; }
.game-scene.level-twenty-eight .platform-three { left: 48%; bottom: 28vh; animation: level28-platform-three 4.9s ease-in-out infinite alternate; }
.game-scene.level-twenty-eight .platform-four { left: 64%; bottom: 42vh; animation: level28-platform-four 5.3s ease-in-out infinite alternate; }
.game-scene.level-twenty-eight .platform-five { left: 78%; bottom: 26vh; animation: level28-platform-five 4.1s ease-in-out infinite alternate; }

.game-scene.level-twenty-eight .platform-six,
.game-scene.level-twenty-eight .platform-seven,
.game-scene.level-twenty-eight .platform-eight,
.game-scene.level-twenty-eight .moving-platform { display: none; }
.game-scene.level-twenty-eight .coin-four { display: none; }

@keyframes level28-platform-one { from { transform: translateY(0); } to { transform: translateY(-16vh); } }
@keyframes level28-platform-two { from { transform: translateY(-8vh); } to { transform: translateY(-30vh); } }
@keyframes level28-platform-three { from { transform: translateY(0); } to { transform: translateY(-20vh); } }
@keyframes level28-platform-four { from { transform: translateY(-12vh); } to { transform: translateY(-34vh); } }
@keyframes level28-platform-five { from { transform: translateY(0); } to { transform: translateY(-18vh); } }

/* Levels 29 and 30: ten-step platform courses. */
.game-scene.level-twenty-nine .platform-one,
.game-scene.level-twenty-nine .platform-two,
.game-scene.level-twenty-nine .platform-three,
.game-scene.level-twenty-nine .platform-four,
.game-scene.level-twenty-nine .platform-five,
.game-scene.level-twenty-nine .platform-six,
.game-scene.level-twenty-nine .platform-seven,
.game-scene.level-twenty-nine .platform-eight,
.game-scene.level-twenty-nine .platform-nine,
.game-scene.level-twenty-nine .moving-platform {
  display: block;
  width: 95px;
}

.game-scene.level-twenty-nine .platform-one { left: 6%; bottom: 22vh; }
.game-scene.level-twenty-nine .platform-two { left: 15%; bottom: 28vh; }
.game-scene.level-twenty-nine .platform-three { left: 24%; bottom: 34vh; }
.game-scene.level-twenty-nine .platform-four { left: 33%; bottom: 40vh; }
.game-scene.level-twenty-nine .platform-five { left: 42%; bottom: 46vh; }
.game-scene.level-twenty-nine .platform-six { left: 51%; bottom: 52vh; }
.game-scene.level-twenty-nine .platform-seven { left: 60%; bottom: 58vh; }
.game-scene.level-twenty-nine .platform-eight { left: 69%; bottom: 64vh; }
.game-scene.level-twenty-nine .platform-nine { left: 78%; bottom: 70vh; }
.game-scene.level-twenty-nine .moving-platform { left: 87%; bottom: 76vh; }

.game-scene.level-thirty .ground {
  right: auto;
  left: 0;
  width: 10%;
}

.game-scene.level-thirty .ground-left {
  right: 0;
  left: auto;
  display: block;
  width: 10%;
}

.game-scene.level-thirty .platform-one,
.game-scene.level-thirty .platform-two,
.game-scene.level-thirty .platform-three,
.game-scene.level-thirty .platform-four,
.game-scene.level-thirty .platform-five {
  display: block;
  width: 105px;
}

.game-scene.level-thirty .platform-six,
.game-scene.level-thirty .platform-seven,
.game-scene.level-thirty .platform-eight,
.game-scene.level-thirty .platform-nine,
.game-scene.level-thirty .platform-ten,
.game-scene.level-thirty .platform-eleven,
.game-scene.level-thirty .moving-platform {
  display: block;
  width: 95px;
}

.game-scene.level-thirty .platform-one { left: 15%; bottom: 25vh; animation: level30-platform-one 4s ease-in-out infinite alternate; }
.game-scene.level-thirty .platform-two { left: 32%; bottom: 40vh; animation: level30-platform-two 4.7s ease-in-out infinite alternate; }
.game-scene.level-thirty .platform-three { left: 49%; bottom: 28vh; animation: level30-platform-three 5.4s ease-in-out infinite alternate; }
.game-scene.level-thirty .platform-four { left: 66%; bottom: 43vh; animation: level30-platform-four 4.5s ease-in-out infinite alternate; }
.game-scene.level-thirty .platform-five { left: 80%; bottom: 27vh; animation: level30-platform-five 5.1s ease-in-out infinite alternate; }
.game-scene.level-thirty .platform-six { left: 51%; bottom: 52vh; animation: level30-platform-two 4.8s ease-in-out infinite alternate; }
.game-scene.level-thirty .platform-seven { left: 60%; bottom: 58vh; animation: level30-platform-three 5.2s ease-in-out infinite alternate; }
.game-scene.level-thirty .platform-eight { left: 69%; bottom: 64vh; animation: level30-platform-four 4.6s ease-in-out infinite alternate; }
.game-scene.level-thirty .platform-nine { left: 78%; bottom: 70vh; animation: level30-platform-five 5s ease-in-out infinite alternate; }
.game-scene.level-thirty .platform-ten { left: 85%; bottom: 76vh; animation: level30-platform-two 4.7s ease-in-out infinite alternate; }
.game-scene.level-thirty .platform-eleven { left: 91%; bottom: 82vh; animation: level30-platform-three 5.3s ease-in-out infinite alternate; }
.game-scene.level-thirty .moving-platform { left: 97%; bottom: 88vh; animation: level30-platform-one 4.3s ease-in-out infinite alternate; }

@keyframes level30-platform-one { from { transform: translateY(0); } to { transform: translateY(-18vh); } }
@keyframes level30-platform-two { from { transform: translateY(-7vh); } to { transform: translateY(-30vh); } }
@keyframes level30-platform-three { from { transform: translateY(0); } to { transform: translateY(-22vh); } }
@keyframes level30-platform-four { from { transform: translateY(-10vh); } to { transform: translateY(-34vh); } }
@keyframes level30-platform-five { from { transform: translateY(0); } to { transform: translateY(-20vh); } }