:root {
  --cell-size: 72px;
  --move-button-size: 72px;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
}

#floor-counter {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #ddd;
  font-family: monospace;
  font-size: 18px;
  z-index: 10;
}

#key-counter {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 280px;
  z-index: 10;
}

#key-counter .inventory-key {
  width: 14px;
  height: 14px;
  display: inline-block;
  transform: rotate(45deg);
  background: #ddd;
  border: 1px solid #fff;
}

#key-counter .inventory-key[data-key-color="red"] {
  background: #d33;
  border-color: #f88;
}

#key-counter .inventory-key[data-key-color="blue"] {
  background: #39f;
  border-color: #9cf;
}

#key-counter .inventory-key[data-key-color="gold"] {
  background: #db0;
  border-color: #ff8;
}

#mobile-controls {
  display: none;
  rotate: 45deg;
}

#action-button {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  #mobile-controls {
    position: fixed;
    right: calc(var(--move-button-size) / 2 + 8px);
    bottom: calc(var(--move-button-size) / 2 + 8px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    z-index: 20;
  }

  #mobile-controls button {
    background: #fff1;
    border: 1px solid #888a;
    margin: 1px;
    touch-action: manipulation;
    width: var(--move-button-size);
    height: var(--move-button-size);
  }

  #mobile-controls button:active {
    background: #333;
  }

  #action-button {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: calc(var(--move-button-size) * 0.95);
    height: calc(var(--move-button-size) * 0.95);
    border-radius: 999px;
    border: 1px solid #9a9;
    background: #153;
    color: #dfd;
    font-family: monospace;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    text-transform: lowercase;
    z-index: 21;
    touch-action: manipulation;
  }

  #action-button:active {
    background: #1a5;
  }
}

game {

  #game-grid {
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;

    cell {
      width: var(--cell-size);
      height: var(--cell-size);
      position: relative;

      &[data-player="true"]::before {
        content: "";
        position: absolute;
        width: calc(var(--cell-size) / 2);
        height: calc(var(--cell-size) / 2);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle at 50% 50%, #f00, #09f);
        border: 1px solid #6f9;
        z-index: 3;
      }

      &[data-player="true"][data-player-wobble="0"]::before {
        animation: wobble-a 180ms ease-out;
      }

      &[data-player="true"][data-player-wobble="1"]::before {
        animation: wobble-b 180ms ease-out;
      }

      &[data-player="true"][data-player-action="swing"][data-player-action-tick="0"]::before {
        animation: player-swing-a 220ms ease-out;
      }

      &[data-player="true"][data-player-action="swing"][data-player-action-tick="1"]::before {
        animation: player-swing-b 220ms ease-out;
      }

      &[data-player="true"][data-player-action="shoot"][data-player-action-tick="0"]::before {
        animation: player-shoot-a 180ms ease-out;
      }

      &[data-player="true"][data-player-action="shoot"][data-player-action-tick="1"]::before {
        animation: player-shoot-b 180ms ease-out;
      }

      &[type="wall"] {
        background: #222;
        border: 1px solid #888;
        margin: -1px;
        z-index: 1;
      }

      &[type="hidden"] {
        background: #000;
      }

      &[type="open"] {
        background: #333;
      }

      &[type="key"] {
        background: #333;
        position: relative;
      }

      &[type="sword"] {
        background: #333;
        position: relative;
      }

      &[type="sword"]::after {
        content: "sword";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #e8e8e8;
        font-family: monospace;
        font-size: 12px;
        letter-spacing: 0.5px;
        text-transform: lowercase;
      }

      &[type="gun"] {
        background: #333;
        position: relative;
      }

      &[type="gun"]::after {
        content: "gun";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #d7ecff;
        font-family: monospace;
        font-size: 12px;
        letter-spacing: 0.5px;
        text-transform: lowercase;
      }

      &[type="key"]::after {
        content: "";
        position: absolute;
        width: calc(var(--cell-size) / 4);
        height: calc(var(--cell-size) / 4);
        left: 50%;
        top: 50%;
        background: #ddd;
        border: 1px solid #fff;
        transform: translate(-50%, -50%) rotate(45deg);
        animation: rotate 4s linear infinite;
      }

      &[type="key"][data-key-color="red"]::after {
        background: #d33;
        border-color: #f88;
      }

      &[type="key"][data-key-color="blue"]::after {
        background: #39f;
        border-color: #9cf;
      }

      &[type="key"][data-key-color="gold"]::after {
        background: #db0;
        border-color: #ff8;
      }

      &[type="door"] {
        background: #654;
        border: 2px solid #987;
        box-sizing: border-box;
      }

      &[type="door"][data-key-color="red"] {
        background: #511;
        border-color: #d55;
      }

      &[type="door"][data-key-color="blue"] {
        background: #114;
        border-color: #59f;
      }

      &[type="door"][data-key-color="gold"] {
        background: #542;
        border-color: #fc4;
      }

      &[type="end"] {
        background: #a80;
      }

      &[type="enemy-melee"] {
        background: #333;
        position: relative;
      }

      &[type="enemy-melee"]::after {
        content: "";
        position: absolute;
        width: calc(var(--cell-size) / 2.3);
        height: calc(var(--cell-size) / 2.3);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #d44;
        border: 1px solid #faa;
      }

      &[type="enemy-melee"][data-enemy-action="swing"][data-enemy-action-tick="0"]::after {
        animation: enemy-swing-a 220ms ease-out;
      }

      &[type="enemy-melee"][data-enemy-action="swing"][data-enemy-action-tick="1"]::after {
        animation: enemy-swing-b 220ms ease-out;
      }

      &[type="enemy-ranged"] {
        background: #333;
        position: relative;
      }

      &[type="enemy-ranged"]::after {
        content: "";
        position: absolute;
        width: calc(var(--cell-size) / 2.5);
        height: calc(var(--cell-size) / 2.5);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #a4d;
        border: 1px solid #eaf;
      }

      &[type="enemy-ranged"][data-enemy-action="shoot"][data-enemy-action-tick="0"]::after {
        animation: enemy-shoot-a 180ms ease-out;
      }

      &[type="enemy-ranged"][data-enemy-action="shoot"][data-enemy-action-tick="1"]::after {
        animation: enemy-shoot-b 180ms ease-out;
      }

      &[data-enemy-bullet="true"] {
        box-shadow: inset 0 0 0 999px #fff2;
        animation: enemy-bullet-travel 70ms linear;
      }

      &[data-enemy-bullet="true"]::after {
        content: "";
        position: absolute;
        width: calc(var(--cell-size) / 5.5);
        height: calc(var(--cell-size) / 5.5);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #ff9;
        border: 1px solid #fff;
        border-radius: 999px;
        box-shadow: 0 0 10px #ff8;
        z-index: 4;
      }
    }
  }
}

@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes wobble-a {
  0% { transform: translate(-50%, -50%) skew(0deg, 0deg); }
  33% { transform: translate(-50%, -50%) skew(-5deg, 5deg); }
  66% { transform: translate(-50%, -50%) skew(5deg, -5deg); }
  100% { transform: translate(-50%, -50%) skew(0deg, 0deg); }
}

@keyframes wobble-b {
  0% { transform: translate(-50%, -50%) skew(0deg, 0deg); }
  33% { transform: translate(-50%, -50%) skew(-5deg, 5deg); }
  66% { transform: translate(-50%, -50%) skew(5deg, -5deg); }
  100% { transform: translate(-50%, -50%) skew(0deg, 0deg); }
}

@keyframes player-swing-a {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(20deg) scale(1.08); }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}

@keyframes player-swing-b {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(-20deg) scale(1.08); }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}

@keyframes player-shoot-a {
  0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  40% { transform: translate(-50%, -50%) scale(1.14); filter: brightness(1.7); }
  100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}

@keyframes player-shoot-b {
  0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  40% { transform: translate(-50%, -50%) scale(1.14); filter: brightness(1.7); }
  100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}

@keyframes enemy-swing-a {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(16deg) scale(1.07); }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}

@keyframes enemy-swing-b {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(-16deg) scale(1.07); }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}

@keyframes enemy-shoot-a {
  0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  40% { transform: translate(-50%, -50%) scale(1.12); filter: brightness(1.75); }
  100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}

@keyframes enemy-shoot-b {
  0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  40% { transform: translate(-50%, -50%) scale(1.12); filter: brightness(1.75); }
  100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}

@keyframes enemy-bullet-travel {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.8); }
}