* {
  border-spacing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
}

/* Pointer */

.pointer:hover {
  cursor: pointer;
}

/* Pointer */

.start-background {
  background-position: center;
  height: 100vh;
  width: 100vw;
}

.descend-button {
  position: absolute;
  width: 240px;
  margin: 0;
  padding: 0;
  border: 0;
  top: 35rem;
  left: 32.5rem;
}

.save-game-modal {
  position: absolute;
  width: 500px;
  margin: 0;
  padding: 0;
  border: 0;
  top: 25rem;
  left: 35.5rem;
}

.descend-button:hover {
  cursor: pointer;
}

.descend-button:active {
  opacity: 0.5;
  width: 900px;
}

.character-select-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 0.25fr 0.25fr 1fr 0.25fr;
  gap: 1.5rem;
  grid-template-areas:
    ". womb-image ."
    ". class-select-choice ."
    ". class-description ."
    ". character-select-image  ."
    ". start-game-button .";
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-items: center;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 5%,
    rgb(111, 110, 110) 90%
  );
  color: whitesmoke;
}

.character-select-womb {
  grid-area: womb-image;
  animation: womb-pulse 3s infinite;
}

@keyframes womb-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.blurred {
  filter: drop-shadow(0.1rem 0 1rem rgb(255, 254, 254)) blur(0.05rem);
  animation: womb-pulse 5s infinite, womb-color-change 5s infinite;
}

@keyframes womb-color-change {
  0% {
    filter: drop-shadow(0.1rem 0 1rem rgb(80, 80, 80)) blur(0.05rem);
  }
  50% {
    filter: drop-shadow(0.1rem 0 1rem rgb(255, 255, 255)) blur(0.05rem);
  }
  100% {
    filter: drop-shadow(0.1rem 0 1rem rgb(80, 80, 80)) blur(0.05rem);
  }
}

.blurred-Warrior {
  animation: womb-pulse 5s infinite, womb-color-change-warrior 5s infinite;
}

@keyframes womb-color-change-warrior {
  0% {
    filter: drop-shadow(0.1rem 0 1rem rgb(118, 2, 2)) blur(0.05rem);
  }
  50% {
    filter: drop-shadow(0.1rem 0 1rem rgb(221, 19, 19)) blur(0.05rem);
  }
  100% {
    filter: drop-shadow(0.1rem 0 1rem rgb(119, 2, 2)) blur(0.05rem);
  }
}

.blurred-Cleric {
  animation: womb-pulse 5s infinite, womb-color-change-cleric 5s infinite;
}

@keyframes womb-color-change-cleric {
  0% {
    filter: drop-shadow(0.1rem 0 1rem rgb(100, 91, 34)) blur(0.05rem);
  }
  50% {
    filter: drop-shadow(0.1rem 0 1rem rgb(246, 222, 68)) blur(0.05rem);
  }
  100% {
    filter: drop-shadow(0.1rem 0 1rem rgb(99, 90, 33)) blur(0.05rem);
  }
}

.blurred-Rogue {
  animation: womb-pulse 5s infinite, womb-color-change-rogue 5s infinite;
}

@keyframes womb-color-change-rogue {
  0% {
    filter: drop-shadow(0.1rem 0 1rem rgb(0, 100, 0)) blur(0.05rem);
  }
  50% {
    filter: drop-shadow(0.1rem 0 1rem rgb(0, 200, 0)) blur(0.05rem);
  }
  100% {
    filter: drop-shadow(0.1rem 0 1rem rgb(0, 100, 0)) blur(0.05rem);
  }
}

.blurred-Magician {
  filter: drop-shadow(0.1rem 0 1rem rgb(5, 37, 196)) blur(0.05rem);
  animation: womb-pulse 5s infinite, womb-color-change-magician 5s infinite;
}

@keyframes womb-color-change-magician {
  0% {
    filter: drop-shadow(0.1rem 0 1rem rgb(3, 23, 122)) blur(0.05rem);
  }
  50% {
    filter: drop-shadow(0.1rem 0 1rem rgb(33, 66, 230)) blur(0.05rem);
  }
  100% {
    filter: drop-shadow(0.1rem 0 1rem rgb(3, 23, 122)) blur(0.05rem);
  }
}

.class-select {
  box-shadow: 2px 2px 2px 2px black;
  grid-area: class-select-choice;
}

.class-description {
  justify-self: center;
  align-self: center;
  text-shadow: 0.025rem 0.025rem 0.1rem rgb(116, 113, 113);
  grid-area: class-description;
}

.character-select-image {
  grid-area: character-select-image;
}

.start-game-button {
  border: 2px solid rgb(82, 13, 13);
  grid-area: start-game-button;
}

.start-game-button:hover {
  cursor: pointer;
  background-color: rgb(82, 13, 13);
  color: white;
}

.opening-cinematic-container {
  width: 100vw;
  height: 100vh;
  display: grid;
}

.opening-cinematic-background {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "enter-womb";
}

.enter-womb {
  grid-area: enter-womb;
  position: absolute;
  justify-self: center;
  align-self: center;
  width: 25rem;
  height: 25rem;
  border-radius: 200px;
  transform: translateX(-12rem) translateY(8rem);
}

.enter-womb:hover {
  cursor: pointer;
  animation: enter-womb-fade-in 1s linear infinite;
}

@keyframes enter-womb-fade-in {
  0% {
    background-color: rgba(25, 0, 0, 0.05);
  }
  50% {
    background-color: rgba(125, 0, 0, 0.2);
  }
  100% {
    background-color: rgba(25, 0, 0, 0.05);
  }
}

.fade-in {
  animation: fadeIn 1s linear;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.main-game-container {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 0.25fr 2fr 0.25fr;
  grid-template-areas:
    "player-stats game-title game-title "
    "player-stats combat-area enemy-stats"
    "player-stats player-skills .";
  height: 100vh;
  width: 100vw;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 75%) 2%,
    rgba(255, 255, 255, 0%) 100%
  );
}

/* .player-upgrades {
  display: grid;
  border: 1px solid red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
} */

.player-stats-container {
  grid-area: player-stats;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  align-content: center;
  justify-content: center;
  grid-template-areas:
    "."
    "."
    "player-click-attack"
    "."
    "."
    ".";
}

.player-click-attack {
  /* make it so this doesn't resize all other grid cells when it's text changes */
  grid-area: player-click-attack;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.player-upgrades-toggle:hover {
  cursor: pointer;
}

.upgrade-category-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1rem;
  grid-template-areas:
    "attack-upgrade-button auto-attack-upgrade-button defense-upgrade-button"
    "abilities-upgrade-button currency-upgrade-button ."
    ". . ."
    ". back-button .";
}

.attack-upgrade-button {
  grid-area: attack-upgrade-button;
}

.attack-upgrade-button:hover {
  cursor: pointer;
}

.disabled-attack-upgrades {
  display: none;
}

/* Sub categories for attacks */
.attack-upgrades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}

.auto-attack-upgrade-button {
  grid-area: auto-attack-upgrade-button;
}

.auto-attack-upgrades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}

.defense-upgrade-button {
  grid-area: defense-upgrade-button;
}

.defense-upgrades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}

.abilities-upgrade-button {
  grid-area: abilities-upgrade-button;
}

.abilities-upgrades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}

.upgrade-value {
  overflow: visible;
}

.upgrade-player-currency {
  align-self: center;
  justify-self: center;
  font-size: 1.25rem;
  overflow: visible;
}

.back-button {
  grid-area: back-button;
}

.button-shadow {
  border-radius: 0.15rem;
  box-shadow: 0 0.15rem 0.05rem black;
}

.button-shadow:hover {
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.1rem black;
  color: white;
  background-color: rgba(82, 13, 13, 0.85);
}

.game-title-container {
  grid-area: game-title;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "game-title . ."
    "player-timer . .";
}

.game-title {
  grid-area: game-title;
}

.player-timer {
  grid-area: player-timer;
}

.player-skills-container {
  grid-area: player-skills;
  border-radius: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2rem;
  justify-content: center;
  align-content: center;
}

.player-skill {
  height: 2rem;
  border-radius: 0.15rem;
  box-shadow: 0 0.15rem 0.05rem black;
}

.combat-area-container {
  border-radius: 1rem;
  display: grid;
  grid-template-columns: 0.25fr 10fr 0.25fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "background-image background-image  enemy-image-container"
    "player-image-container background-image  background-image";
  overflow: hidden;
}

.player-image-container {
  /* Overflow is set to visible so when we call the auto-attack-dash animation, the player image isn't cut off */
  overflow: visible;
  grid-area: player-image-container;
  align-self: flex-end;
  transform: translateX(27rem) translateY(-5rem);
  z-index: 2;
  max-width: 110px;
}

.click-attack-ready {
  animation: click-attack 3s infinite;
}

.auto-attack-hit {
  animation: auto-attack 0.2s normal;
}

.auto-attack-dash {
  animation: player-dash-shadow 0.2s normal;
}

/* TODO Make it animate */
@keyframes click-attack {
  0% {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1));
  }
  5% {
    filter: drop-shadow(0 0 2px rgba(235, 235, 235, 0.95));
  }
  10% {
    filter: drop-shadow(0 0 3px rgba(215, 215, 215, 0.9));
  }
  15% {
    filter: drop-shadow(0 0 3px rgba(195, 195, 195, 0.85));
  }
  20% {
    filter: drop-shadow(0 0 4px rgba(175, 175, 175, 0.8));
  }
  25% {
    filter: drop-shadow(0 0 4px rgba(155, 155, 155, 0.75));
  }
  30% {
    filter: drop-shadow(0 0 5px rgba(135, 135, 135, 0.7));
  }
  35% {
    filter: drop-shadow(0 0 5px rgba(115, 115, 115, 0.65));
  }
  40% {
    filter: drop-shadow(0 0 8px rgba(95, 95, 95, 0.6));
  }
  45% {
    filter: drop-shadow(0 0 9px rgba(75, 75, 75, 0.55));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(55, 55, 55, 0.5));
  }
  55% {
    filter: drop-shadow(0 0 10px rgba(35, 35, 35, 0.45));
  }
  60% {
    filter: drop-shadow(0 0 11px rgba(15, 15, 15, 0.4));
  }
  65% {
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.35));
  }
  70% {
    filter: drop-shadow(0 0 13px rgba(0, 0, 0, 0.3));
  }
  75% {
    filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.25));
  }
  80% {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.2));
  }
  85% {
    filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.15));
  }
  90% {
    filter: drop-shadow(0 0 17px rgba(0, 0, 0, 0.1));
  }
  95% {
    filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.05));
  }
  100% {
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0));
  }
}

@keyframes auto-attack {
  0% {
    filter: drop-shadow(0 0 1px rgba(5, 0, 0, 1));
  }
  10% {
    filter: drop-shadow(0 0 2px rgba(20, 0, 0, 0.9));
  }
  20% {
    filter: drop-shadow(0 0 3px rgba(35, 0, 0, 0.8));
  }
  30% {
    filter: drop-shadow(0 0 4px rgba(50, 0, 0, 0.7));
  }
  40% {
    filter: drop-shadow(0 0 5px rgba(96, 1, 1, 0.651));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(124, 1, 1, 0.69));
  }
  60% {
    filter: drop-shadow(0 0 7px rgba(135, 0, 0, 0.73));
  }
  70% {
    filter: drop-shadow(0 0 8px rgba(140, 0, 0, 0.65));
  }
  80% {
    filter: drop-shadow(0 0 9px rgba(125, 0, 0, 0.2));
  }
  90% {
    filter: drop-shadow(0 0 10px rgba(140, 0, 0, 0.1));
  }
  100% {
    filter: drop-shadow(0 0 11px rgba(155, 0, 0, 0));
  }
}

/* TODO: Fun colors to remind to change */
@keyframes player-dash-shadow {
  0% {
    transform: translateY(-0.45rem);
    filter: drop-shadow(-0.05rem 0.05rem 0.1rem rgb(52, 51, 51));
  }
  50% {
    transform: translateY(-0.55rem) translateX(0.25rem);
    filter: drop-shadow(-0.1rem 0.1rem 0.2rem rgb(167, 167, 165));
  }
  100% {
    transform: translateY(+0.5rem);
    filter: drop-shadow(0 0.05rem 0.1rem rgb(34, 34, 34));
  }
}

.background-image {
  grid-area: background-image;
  z-index: -1;
  max-width: auto;
  max-height: auto;
  transform: translateX(-5rem) translateY(-25rem);
}

.enemy-image-container {
  overflow: visible;
  position: relative;
  grid-area: enemy-image-container;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  align-self: center;
  transform: translateX(9rem) translateY(-3rem);
  z-index: 2;
  /* border: 10px solid yellow; */
}

.enemy-image {
  color: red;
}

.enemy-image-take-damage {
  animation: enemy-image-take-damage 0.2s normal;
}

@keyframes enemy-image-take-damage {
  0% {
    transform: translateY(-0.25rem) translateX(0.05rem);
  }
  50% {
    transform: translateY(-0.5rem) translateX(0.075rem);
  }
  100% {
    transform: translateY(-0.95rem) translateX(0.125rem);
  }
}

.enemy-stats-container {
  grid-area: enemy-stats;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  justify-content: center;
  align-content: center;
}

.floor-selection-container {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr 0.5fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "ascend-button . descend-button ."
    ". . . .";
}

.ascend-floor-button {
  grid-area: ascend-button;
}

.descend-floor-button {
  grid-area: descend-button;
}

/* Floating damage numbers */
.floating-damage-number,
.floating-click-damage-number,
.floating-skill-damage-number {
  position: absolute;
  font-size: 25px;
  pointer-events: none;
  z-index: 20;
  animation: damageNumberAnimation 1.5s ease-out forwards;
  transform-origin: center;
  left: 50%;
  top: 50%;
  --float-x: 0;
  --float-y: 0;
}

.floating-damage-number {
  font-size: 30px;
  color: red;
}

.floating-click-damage-number {
  font-size: 30px;
  color: blue;
}

@keyframes damageNumberAnimation {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    opacity: 1;
    transform: translate(calc(-50% + var(--float-x)), -50%)
      translateY(var(--float-y));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--float-x)), -50%)
      translateY(calc(var(--float-y) * 0.5));
  }
}

/* Colors for floating damage number text */

/* Warrior skills */
.skill-Slash {
  color: #ff4500;
}

.skill-Bash {
  color: #8b0000;
}

.skill-Charge {
  color: #b22222;
}

/* Magician skills */
.skill-Fire {
  color: #ff6347;
}

.skill-Ice {
  color: #00ffff;
}

.skill-Arcane {
  color: #9932cc;
}

/* Rogue skills */
.skill-Backstab {
  color: #006400;
}

.skill-Poison {
  color: #9acd32;
}

.skill-Garrotte {
  color: #228b22;
}

/* Cleric skills */
.skill-Smite {
  color: #ffd700;
}

.skill-Wrath {
  color: #ffffe0;
}

.skill-Exorcism {
  color: #fffacd;
}