style.css

body {
  --scrollX: 0px;
  margin: 0;
  padding: 0;
  min-width: 100vw;
  min-width: 100dvw;
  min-height: 100vh;
  min-height: 100dvh;
  background-image: url(ground.png), url(front.svg), url(back.svg),
    radial-gradient(
      circle at top center,
      rgb(198 239 251) 0%,
      rgb(67, 199, 254) 100%
    );
  background-repeat: repeat-x, repeat-x, repeat-x, no-repeat;
  background-attachment: scroll, scroll, scroll, fixed;
  background-position: var(--scrollX) bottom, calc(var(--scrollX) / 2) bottom,
    calc(var(--scrollX) / 3) calc(100% - 100px), top center;
  background-size: 32px, auto, auto, auto;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
  transform: translateX(var(--scrollX));
  transition: transform 333ms ease-in, background-position 333ms ease-in;
  user-select: none;
  overscroll-behavior-y: contain;
}

body[data-s="title"]::after,
body[data-s="menu"]::after,
.tower-floor .character,
.e,
.hit,
#soundButton,
body:not(.walking)
  section:not(#editor)
  .tower-floor:not(.destroying)[data-e]::after {
  background-image: url(sprites.png);
}

#levelList {
  max-width: 1000px;
  overflow-y: scroll;
}

#levelList::-webkit-scrollbar {
  display: none;
}

.tower-container {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  padding-left: calc(50vw - 192px);
  position: relative;
  bottom: 32px;
}

.tower {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 144px;
  margin: 0 24px;
  flex-shrink: 0;
}
.tower::before,
.tower-floor {
  width: 144px;
  position: relative;
  background-image: url(tower.png);
}
.tower::before {
  content: "";
  display: block;
  height: 38px;
  background-position: top;
}
#editor .tower:not(.current)::before,
.tower-floor.ghost {
  filter: grayscale(1) brightness(2);
  pointer-events: all;
  cursor: pointer;
}
#editor .tower-floor.ghost .floor-value {
  font-size: 5rem;
  background-color: transparent;
  pointer-events: none;
}

.d {
  position: absolute;
  right: 12px;
  top: 12px;
  background: none;
  border: 0;
  pointer-events: all;
  cursor: pointer;
  background: #fff;
  width: 20px;
  height: 20px;
  text-align: center;
  padding: 0;
  line-height: 20px;
  border-radius: 6px;
  opacity: 0.8;
  z-index: 10;
}
.d:hover,
.d:focus-visible {
  opacity: 1;
}
.tower-floor.ghost:hover,
.tower-floor.ghost:focus-visible {
  filter: sepia(0.5);
}
.tower.destroying-floor::before {
  top: 144px;
}
.tower-floor {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 144px;
  background-position: bottom;
  background-repeat: no-repeat;
  pointer-events: none;
  flex-shrink: 0;
}
.tower-floor.destroying:not(.piece) {
  background-image: none;
}

.tower-floor.destroying.piece {
  --initialX: 0;
  --initialY: 0;
  position: absolute;
  width: 36px;
  height: 36px;
  left: var(--initialX);
  top: var(--initialY);
  background-position: calc(var(--initialX) * -1) calc(var(--initialY) * -1);
  z-index: 30;
}

body[data-s="title"]::after,
body[data-s="menu"]::after,
.tower.current .tower-floor .character {
  --from: 0 0;
  --to: -32px 0;
  transition: transform 333ms ease-in;
  z-index: 2;
  position: relative;
  left: 0;
}

body[data-s="title"]::after,
body[data-s="menu"]::after,
.tower-floor .character {
  display: block;
  width: 16px;
  height: 16px;
  transform: scale(4);
  transform-origin: center bottom;
  background-position: var(--from);
  animation-name: spriteAnim;
  animation-timing-function: steps(2);
  animation-iteration-count: infinite;
  animation-duration: 1s;
  pointer-events: none;
  z-index: 0;
}

body[data-s="title"]::after,
body[data-s="menu"]::after {
  content: "";
  position: absolute !important;
  bottom: 32px;
  left: calc(50vw - 16px);
  z-index: 0;
}

.e,
body:not(.walking)
  section:not(#editor)
  .tower-floor:not(.destroying)[data-e]::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  right: 16px;
  bottom: 8px;
  transform: scale(2);
  z-index: 1;
  color: transparent;
}

aside .e {
  position: relative;
  transform: none;
  right: auto;
  bottom: auto;
  display: inline-block;
  vertical-align: middle;
  margin: 2px;
}

section:not(#editor) .e {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  inset: 0;
  transform: none;
}

.tower-floor[data-e="f"] {
  color: #e84537;
}
.tower-floor[data-e="a"] {
  color: #0099db;
}
.tower-floor[data-e="p"] {
  color: #25956a;
}

.e.f,
.tower-floor:not(.destroying)[data-e="f"]::after {
  background-position: -16px -48px !important;
  background-color: #e84537;
}

.e.p,
.tower-floor:not(.destroying)[data-e="p"]::after {
  background-position: -31px -48px !important;
  background-color: #25956a;
}

.e.a,
.tower-floor:not(.destroying)[data-e="a"]::after {
  background-position: -46px -48px !important;
  background-color: #0099db;
}

.e.none {
  background-image: none;
  background-color: #8c9ab3;
  color: #3f2631;
  border: 1px solid #3f2631;
  text-align: center;
  font-size: 12px;
  padding-top: 2px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

#editor .e,
#editor .tower:not(.current) .character {
  pointer-events: all;
  cursor: pointer;
}

#editor .e:hover,
#editor .tower:not(.current) .character:hover {
  box-shadow: inset 0 0 2px #fff;
}

.tower.current [data-e] .character .hit {
  filter: saturate(3) brightness(0.7);
}

[data-e="f"] .character {
  filter: hue-rotate(125deg) saturate(3);
}

[data-e="a"] .character {
  filter: hue-rotate(350deg) saturate(3);
}

[data-e="p"] .character {
  filter: hue-rotate(255deg) saturate(3);
}

.hit {
  --rotate: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  z-index: 3;
  background-position: 0 -128px;
  position: absolute;
  left: 4px;
  filter: hue-rotate(180deg) sepia(1) saturate(5);
  transform: scale(var(--scale)) rotate(var(--rotate));
  transform-origin: center;
  animation: hit 200ms cubic-bezier(0, 1.4, 0.73, 1.24) 1;
  animation-fill-mode: forwards;
}

.hit.drink {
  --rotate: 0 !important;
  left: 6px;
  bottom: 8px;
  background-position: -16px -32px;
}

.hit.drink + .hit-m {
  top: -2px;
}

.hit-m {
  --shadow: #fff;
  position: absolute;
  z-index: 4;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  top: 3px;
  left: 8px;
  filter: brightness(1);
  font-size: 0.5rem;
  color: #000;
  text-shadow: 1px 1px var(--shadow), -1px -1px var(--shadow),
    1px -1px var(--shadow), -1px 1px var(--shadow), 1px 0 var(--shadow),
    -1px 0 var(--shadow), 0 -1px var(--shadow), 0 1px var(--shadow);
}

body.walking[data-s="title"]::after,
body.walking[data-s="menu"]::after,
body.walking .tower.current .tower-floor .character,
body.attacking .tower.current .tower-floor .character {
  --from: -32px 0;
  --to: -64px 0;
  animation-duration: 500ms;
}

body.walking .tower.current .tower-floor .character {
  left: 41vw;
  transition: left 2s ease-in;
}

body.walking[data-s="title"]::after,
body.walking[data-s="menu"]::after {
  left: 100vw;
  transition: left 1s ease-in;
}

.tower.current .tower-floor .character.dead {
  --from: 0 -32px;
  --to: 0 -32px;
}

.tower-floor.b .character {
  --from: 0 -16px;
  --to: -32px -16px;
}
.tower-floor.s .character {
  --from: -32px -16px;
  --to: -64px -16px;
}
.tower-floor.w .character {
  --from: -32px -32px;
  --to: -64px -32px;
}
.tower-floor.m .character {
  --from: -32px -64px;
  --to: -64px -64px;
}
.floor-value {
  font-family: "Comic Sans MS";
  font-weight: bold;
  font-size: 3rem;
  text-align: center;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff,
    -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
  transform-origin: center;
  opacity: 0.3;
  pointer-events: none;
  position: relative;
  top: 16px;
}

.tower.current .floor-value,
#editor .floor-value {
  opacity: 1;
}

#editor .tower-floor:not(.destroying, .ghost) .floor-value {
  pointer-events: all;
  min-width: 48px;
  min-height: 66px;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
}

#editor .floor-value span {
  flex-grow: 1;
}

#editor span.sign {
  min-width: 36px;
}

body:not(.attacking):not(.gameover)
  #game
  .tower.current
  + .tower
  .tower-floor:not(.destroying) {
  cursor: pointer;
  pointer-events: all;
}

body:not(.attacking):not(.gameover)
  #game
  .tower.current
  + .tower
  .tower-floor:not(.destroying):hover,
body:not(.attacking):not(.gameover)
  #game
  .tower.current
  + .tower
  .tower-floor:not(.destroying):focus-visible {
  box-shadow: 0 0 22px #fff inset, 0 0 22px #fff inset;
  outline: 1px solid #fff;
}
body:not(.gameover)
  #game
  .tower.current
  + .tower:not(.destroying)
  .floor-value {
  animation: jello 1s ease-in-out infinite;
  opacity: 1;
}

dialog {
  border: 0;
  background: transparent;
  overflow: visible;
  text-align: center;
  z-index: 100;
  outline: 0;
}

dialog::backdrop {
  background-color: transparent;
}

#game dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

dialog .title,
#gameEndMessage {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-weight: bold;
  color: #000;
  text-shadow: 4px 0 #fff, -4px 0 #fff, 0 4px #fff, 0 -4px #fff, 3px 0 #fff,
    -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2px 2px #fff, -2px -2px #fff,
    2px -2px #fff, -2px 2px #fff;
}

#gameOverDialog .title {
  color: #e84537;
}

#endLevelDialog .title,
dialog p span {
  --init-y: -100vh;
  transform: translateY(var(--init-y));
  animation: gameOverLetter 800ms cubic-bezier(0.29, 0.76, 0.56, 1.33) 1;
  animation-fill-mode: forwards;
  display: inline-block;
}

#endLevelDialog .title {
  color: #1f976a;
  display: block;
}

#endLevelDialog .button span,
#endLevelDialog:not(.end) #gameEndMessage,
#endLevelDialog.hideEndMessage #gameEndMessage,
.destroying .e,
.destroying .d,
section,
[data-s="title"] #soundButton,
[data-s="editor"] #soundButton,
.tower-floor.destroying .character,
.tower-floor.destroying .floor-value,
#editor .tower-floor:not(.m) .sign {
  display: none;
}

#endLevelDialog.end .menu,
#endLevelDialog:not(.end) .next {
  display: inline-block;
}

.title {
  margin: 0 0 8px 0;
}

#gameEndMessage span {
  font-size: 3rem;
  animation: dancing 850ms ease-in-out infinite;
}

#titleDialog form {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-direction: column;
}

dialog button {
  --init-y: 100vh;
  transform: translateY(var(--init-y));
  animation: gameOverLetter 800ms ease-in 1;
  animation-fill-mode: forwards;
  display: inline-block;
}

.button {
  display: inline-block;
  border: 3px solid;
  border-top-color: #67ffd5;
  border-bottom-color: #1f976a;
  border-right-color: #67ffd5;
  border-left-color: #3ee2b4;
  border-radius: 0;
  font-size: 2rem;
  cursor: pointer;
  background-color: #3ee2b4;
  color: #3f2631;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 3px;
  width: 200px;
  padding: 8px;
}

.button[disabled] {
  pointer-events: none;
  opacity: 0.3;
}

#menu .button {
  width: 65px;
  height: 65px;
  box-sizing: border-box;
  margin: 4px;
}

.button:hover {
  filter: brightness(1.1);
}

.button::before {
  content: " ";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border: 3px solid #3f2631;
}

.button small {
  display: block;
  font-size: 1rem;
  letter-spacing: 1px;
}

.button[value="no-sound"] {
  animation-delay: 100ms;
}

.button[value="editor"] {
  animation-delay: 200ms;
}

[data-s="title"] #title,
[data-s="game"] #game,
[data-s="menu"] #menu,
[data-s="editor"] #editor {
  display: block;
}

aside {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
  padding: 24px;
  position: absolute;
  max-width: 400px;
  width: auto;
  left: 100px;
  top: 100px;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  display: none;
  transform: translateX(calc(var(--scrollX) * -1));
  transition: transform 333ms ease-in;
}

aside[data-t="21"] {
  max-width: 600px;
}

aside p {
  margin: 0;
}

#editor aside * {
  pointer-events: all;
}

#editor aside input {
  height: 20px;
  font-size: 1rem;
  width: 100%;
}

#editor aside a,
#editor aside a:visited {
  margin: auto;
  display: block;
  margin-top: 16px;
}

#soundButton {
  position: fixed;
  padding: 0;
  right: 16px;
  top: 16px;
  width: 16px;
  height: 16px;
  z-index: 999;
  border: 0;
  transform: translateX(calc(var(--scrollX) * -1)) scale(4);
  transition: transform 333ms ease-in;
  transform-origin: top right;
  background-position: -16px -64px;
  background-color: #e84537;
  cursor: pointer;
}

#soundButton.on {
  background-position: 0 -64px;
  background-color: #25956a;
}

@media screen and ((max-height: 500px) or (max-width: 750px)) {
  aside {
    font-size: 1rem;
    padding: 12px;
    position: relative;
    max-width: none;
    left: 0;
    top: 0;
    border-radius: 0;
  }

  #title {
    padding-top: 8px;
  }

  #titleDialog,
  #menuDialog {
    margin-top: 48px;
  }

  dialog .title,
  dialog p {
    font-size: 2rem;
  }

  #gameEndMessage {
    text-align: left;
  }

  #gameEndMessage span {
    font-size: 2rem;
  }

  #titleDialog form {
    gap: 16px;
  }

  .button {
    font-size: 1rem;
    padding: 4px;
  }

  #soundButton {
    position: relative;
    left: 4px;
    right: 0;
    top: 0;
    transform: none;
  }
}

@keyframes spriteAnim {
  0% {
    background-position: var(--from);
  }
  100% {
    background-position: var(--to);
  }
}

@keyframes hit {
  0% {
    transform: scale(0.5) rotate(var(--rotate));
  }
  100% {
    transform: scale(1.75) rotate(var(--rotate));
  }
}

@keyframes gameOverLetter {
  0% {
    transform: translateY(var(--init-y));
  }
  100% {
    transform: translate(0);
  }
}

@keyframes jello {
  from,
  11%,
  to {
    transform: translate3d(0, 0, 0);
  }

  22% {
    transform: skew(-2.5deg);
  }

  33% {
    transform: skew(6.2deg);
  }

  44% {
    transform: skew(-3.1deg);
  }

  55% {
    transform: skew(1.5deg);
  }

  66% {
    transform: skew(-0.7deg);
  }

  77% {
    transform: skewX(0.3deg);
  }

  88% {
    transform: skew(-0.1deg);
  }
}

@keyframes dancing {
  0% {
    transform: translateY(0);
  }

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

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