html,
body {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  touch-action: none;
  -webkit-user-drag: none;
}

body {
  --speed: 1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

dialog {
  text-align: center;
}

canvas.fullscreen {
  width: 100vw;
  height: 100vh;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.UI {
  position: absolute;
  inset: 0px;
}

/* Start Screen */
#StartScreen {
  --x: 0;
  --y: 0;
  --depth: 0;
  cursor: pointer;
}

.StartScreenScreen {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: 110% 110%;
}

#StartScreen1 {
  background-image: url("./Assets/Pics/BackGround_TitleScreen.png");
}

#StartScreen2 {
  --depth: 50%;
  background-image: url("./Assets/Pics/MiddleGround_TitleScreen.png");
  background-position: calc(50% + (var(--x) - 0.5) * var(--depth)) calc(50% + (var(--y) - 0.5) * var(--depth));
}

#StartScreen3 {
  --depth: 100%;
  background-image: url("./Assets/Pics/ForeGround_TitleScreen.png");
  background-position: calc(50% + (var(--x) - 0.5) * var(--depth)) calc(50% + (var(--y) - 0.5) * var(--depth));
}

#LoadingScreen {
  color: white;
  font-size: 4vh;
  cursor: wait;
}

/* Main Menu */
#MainMenu {
  display: flex;
  flex-direction: column;
  font-size: 5vh;
  align-items: center;
  justify-content: center;
  gap: 3vh;
}

/* Map but not really */
#LogoShieldWithSettings {
  width: 50vw;
  position: relative;
  background-position: center center;
  background-size: 80%, contain;
  background-image: url(./Assets/Pics/Logo_black.png), url(./Assets/UIElemente/HolzSchild.png);
  background-repeat: no-repeat;
  rotate: -15deg;
  scale: 0.8;
}

#MapOptionButton {
  position: absolute;
  bottom: -3vh;
  right: 3vh;
  width: 7vh;
  height: 7vh;
  object-fit: contain;
}

#MapHeader>.GoldDisplay {
  justify-self: end;
  align-self: center;
  margin-right: 2em;
}

/* Map */
#Map {
  display: flex;
  flex-direction: column;
  background-image: url("./Assets/UIElemente/HimmelBackground.PNG");
  background-size: cover;
}

#MapHeader,
#MapOptions {
  height: 15vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}

.MapOption {
  width: 25vw;
  height: 25vw;
  cursor: pointer;
  text-align: center;
  z-index: 4;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: 50% 100%;
  transition: scale 0.2s ease, translate 0.2s ease;
}

.MapOption:not(.selected) {
  animation: wiggle calc(2.5s/ var(--speed)) infinite ease;
}

.MapOption:hover:not(.selected) {
  scale: 1.1;
}

.MapOption.selected {
  scale: 1.3;
  z-index: 6;
  /* translate: var(--transX) -4vh; */
}

.MapOption.remove {
  scale: 0;
  transition: scale 1s, translate 1s;
}

.MapOption.center {
  scale: 1.5;
  transition: scale 1s, translate 1s, rotate 1s;
  translate: var(--transX2) 30vh;
  rotate: 0deg !important;
  z-index: 6;
}

.MapOption[data-type="-1"] {
  background-image: url("./Assets/UIElemente/CoverShop.PNG");
}

.MapOption[data-type="0"] {
  background-image: url("./Assets/UIElemente/CoverChallenge1.PNG");
}

.MapOption[data-type="1"] {
  background-image: url("./Assets/UIElemente/CoverChallenge2.PNG");
}

.MapOption[data-type="2"] {
  background-image: url("./Assets/UIElemente/CoverChallenge3.PNG");
}

.MapOption[data-type="3"] {
  background-image: url("./Assets/UIElemente/CoverChallenge4.PNG");
}

.MapOption:first-of-type {
  rotate: -15deg;
  --transX: -1vh;
  --transX2: 25vw;
}

.MapOption:last-of-type {
  rotate: 15deg;
  --transX: 1vh;
  --transX2: -25vw;
}

#MapHill {
  flex-grow: 1;
  background-image: url("./Assets/UIElemente/LandschaftBackground.PNG");
  background-position: center 0%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  padding-bottom: 5vh;
  font-size: 6vh;
  margin-top: -5vh;
  z-index: 5;
  pointer-events: none;
}

#MapHill>* {
  pointer-events: all;
}

#MapHill[data-selected="0"] {
  background-image: url("./Assets/UIElemente/WegLinks.PNG"), url("./Assets/UIElemente/LandschaftBackground.PNG");
}

#MapHill[data-selected="1"] {
  background-image: url("./Assets/UIElemente/WegRechts.PNG"), url("./Assets/UIElemente/LandschaftBackground.PNG");
}

#MapProgressBarWrapper {
  --height: 50vh;
  height: var(--height);

  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  bottom: 0;
}

#MapProgressBar {
  height: 100%;
  --fill-color: lightblue;
  height: 0%;
  transition: height 1s ease-out;
}

#MapProgressBar,
#MapProgressBarCurrent {
  width: 10vw;
  background: linear-gradient(to top, var(--fill-color) 99.9%, transparent 99.9%), linear-gradient(to top, transparent 99%, var(--fill-color) 99%, var(--fill-color) 100%, transparent 100%);
  background-position: 0 75%, 0 78%;
  background-size: 100% 5px, calc(var(--currentLevel) / var(--totalLevels) * var(--width)) 20%;
  background-repeat: no-repeat, repeat-x;
}

/* Fight Prep */
#GameCanvas.info {
  cursor: help;
}

#GameCanvas.pickup {
  cursor: grab;
}

#GameCanvas.dragging {
  cursor: grabbing;
}

#FightPrepEumlings {
  padding: 10px;
  background-color: brown;
  cursor: pointer;
}

#FightPrepStones,
#FightStones {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 1vh;
}

#FightStartWrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 3vh;
}

#FightStart {
  font-size: 3vh;
}

#FightPrepInfoWrapper {
  position: absolute;
  left: 50%;
}

#FightPrepInfo {
  background: url("./Assets/UIElemente/ButtonGr.png") center no-repeat;
  background-size: 100% 100%;
  padding: 2em;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50%) translateX(-50%);
  position: relative;
}

#FightRewardGoldWrapper,
#FightPrepGoldCounterWrapper,
#FightGoldCounterWrapper {
  position: absolute;
  top: 0;
  right: 0;
  margin: 2em 2em 0 0;
}

/* FIGHT */
#FightPhaseOverlay {
  display: none;
}

#FightPhaseOverlay.active {
  display: grid;
  place-items: center;
}

#FightPhaseOverlayText {
  color: white;
  font-size: 3rem;
}

#FightPhaseOverlay.active>#FightPhaseOverlayText {
  animation: fight-phase-overlay calc(1s/ var(--speed)) linear forwards;
}

@keyframes fight-phase-overlay {
  0% {
    transform: translateX(-100vw);
  }

  20% {
    transform: translateX(-10vw);
  }

  50% {
    transform: translateX(0vw);
  }

  80% {
    transform: translateX(10vw);
  }

  100% {
    transform: translateX(100vw);
  }
}

#FightProgress {
  position: absolute;
  bottom: 2vh;
  left: 2vh;
  pointer-events: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5vh;
  height: 4vh;
}

.FightProgressElement {
  width: 2.5vh;
  height: 2.5vh;
  background-color: white;
  border-radius: 50%;
  border: 2px solid transparent;
  background-image: url("./Assets/UIElemente/PhaseOffen.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}

.FightProgressElement.active {
  width: 4vh;
  height: 4vh;
}

.FightProgressElement.done {
  background-image: url("./Assets/UIElemente/PhaseAbgeschlossen.png");
}

.FightProgressElement:not(:last-of-type)::after {
  content: "";
  width: 2.5vh;
  height: 2px;
  background-color: black;
  position: absolute;
  left: 100%;
  top: calc(50% - 1px);
  z-index: -1;
}

.FightProgressElement:not(.active):not(.done) {
  border-color: lightblue;
}

#FightSpeedOptions {
  position: absolute;
  bottom: 2vh;
  right: 2vh;
  pointer-events: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5vh;
  height: 4vh;
}
#FightSpeedOptions > div {
  background: url("./Assets/UIElemente/PhaseOffen.png") center no-repeat;
  background-size: contain;
  color: white;
  font-size: 2vh;
  width: 4vh;
  height: 4vh;
  border: 2px solid transparent;
  border-radius: 50%;
  pointer-events: all;
  cursor: pointer;
}

#FightSpeedOptions > div.active {
  border-color: green;
}
/* Fight Reward */
#FightRewardTitle {
  background: url("./Assets/UIElemente/HolzSchild.png") center no-repeat;
  background-size: contain;
  font-size: 6vh;
  margin-top: 1em;
  padding: 1.5em;
  color: white;
  text-align: center;
  animation: scale-in calc(0.7s / var(--speed)) cubic-bezier(.81, 1.48, .64, 1);
}

#FightRewardRewards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1em;
  font-size: 4vh;
  margin-top: -1em;
  margin-bottom: 1em;
}

.FightRewardIcon {
  width: 3em;
  height: 3em;
  display: flex;
  align-items: end;
  justify-content: right;
  padding: 0.2em;
  position: relative;
  background: url("./Assets/UIElemente/ItemBackdrop.png") center no-repeat;
  background-size: contain;
  color: white;
  animation: scale-in calc(0.4s/ var(--speed)) calc(0.7s/ var(--speed)) cubic-bezier(.81, 1.48, .64, 1) forwards;
  scale: 0;
}

.FightRewardIcon>span {
  z-index: 1;
  text-shadow: 0 0.05em black, 0 -0.05em black, 0.05em 0 black, -0.05em 0 black;
}

.FightRewardIcon::before {
  content: "";
  background: center no-repeat;
  background-size: contain;
  width: 60%;
  height: 60%;
  position: absolute;
  inset: 20%;
  display: block;
}

.FightRewardIcon.Gold::before {
  background-image: url("./Assets/UIElemente/Muenze.PNG");
}

.FightRewardIcon.XP::before {
  background-image: url("./Assets/UIElemente/XpPotion.png");
  transform: rotate(10deg);
}

#FightRewardXP {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  font-size: 2vh;
}

#FightRewardXP>* {
  opacity: 0;
  animation: fade-in calc(0.4s/ var(--speed)) calc(1.1s/ var(--speed)) cubic-bezier(.81, 1.48, .64, 1) forwards;
}

#FightRewardXPAmount {
  font-size: 2.5vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#FightRewardXPAmount::after {
  width: 2em;
  height: 2em;
  background: url("./Assets/UIElemente/XpPotion.png") center no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
}

#FightRewardXPEumlings {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 2vh;
  padding: 1em;
}

#FightRewardConvert {
  font-size: 2vh;
}

@keyframes scale-in {
  0% {
    scale: 0
  }

  100% {
    scale: 1
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#FightRewardContinueWrapper,
#FightRewardInfoWrapperWrapper {
  position: absolute;
  bottom: 0;
}

#FightRewardInfoWrapperWrapper {
  display: flex;
  width: 100%;
  justify-content: center;
}

#FightRewardInfoWrapper {
  height: 30vh;
  width: 40vh;
  bottom: -6vw;
  display: flex;
  flex-direction: column;
  align-items: start;
  color: white;
  background: url("./Assets/UIElemente/HolzRahmen.png") no-repeat center;
  background-size: 100% 100%;
  font-size: 1.75vh;
  justify-content: space-between;
  padding: 6vw 6vw 10vw 6vw;
  position: relative;
}

#FightRewardInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25em;
  align-items: start;
  width: 70%;
  align-self: flex-start;
  z-index: 1;
}

#FightRewardInfoWrapper::after {
  content: "";
  background: url("./Assets/UIElemente/XpPotion.png") center no-repeat;
  background-size: contain;
  width: 50%;
  height: 70%;
  position: absolute;
  right: -7vw;
  rotate: 15deg;
}

#FightRewardContinueWrapper {
  padding: 3vh;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 3vh;
}

/* Game Overlay Info */
.EntityOverlay {
  position: absolute;
}

.EntityOverlayInner {
  background: url("./Assets/UIElemente/InGameUI/InfoKastenFrame.png") center no-repeat;
  background-size: 100% 100%;
  padding: 0.1em 0.1em 0.1em 1em;
  position: relative;
  color: white;
  font-size: 1.5vh;
  left: -50%;
}

.EntityOverlayInner::after {
  content: "";
  height: 1.5em;
  width: 1.5em;
  background: url("./Assets/UIElemente/InGameUI/IconHerz.png") center no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  left: -0.55em;
  top: 0;
}

.EntityOverlayInner img {
  position: absolute;
  height: 1.5em;
  width: 1.5em;
  display: block;
  object-fit: contain;
  top: -1.3em;
  right: calc(var(--index) * 1em);
}

/* Other */
#EumlingLevelupInner,
#ChooseStoneInner,
#ChooseEumlingInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vh;
}

#EumlingLevelupInfo,
#ChooseEumlingInfo,
#ChooseStoneInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 3vh;
  gap: 1vh;
}

.InfoTitle {
  text-transform: capitalize;
  font-size: 1.2em;
  font-weight: 700;
}

.InfoSmaller {
  font-size: 0.8em;
}

#EumlingLevelupConfirm,
#ChooseStoneConfirm,
#ChooseEumlingConfirm {
  font-size: 3vh;
}


/* Reusables */

.EumlingUIElement {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: wheat; */
}

.EumlingUIElement>* {
  pointer-events: none;
}

.EumlingUIElement.selected {
  /* background-color: lightblue; */
}

.StoneUIElement {
  --size: 18vw;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background-image: url("./Assets/UIElemente/ItemBackdrop.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--size);
  height: var(--size);
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
}

.StoneUIElement[data-level="1"] {
  background-image: url("./Assets/UIElemente/ItemBackdrop2.png");
}

.StoneUIElement::after {
  content: '';
  background-image: var(--stone-url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 80%;
  height: 80%;
}

.StoneUIElement.animate::after {
  animation: stone-animate calc(1s/ var(--speed)) linear;
}

@keyframes stone-animate {
  0% {
    scale: 1
  }

  50% {
    scale: 1.2
  }

  100% {
    scale: 1
  }
}

/* SHOP */
#Shop {
  padding: 2vh;
}

#ShopHeader {
  height: 20vh;
  background: url("./Assets/UIElemente/ShopHeader.png") center no-repeat;
  background-size: contain;
}

#Shop :not(#ShopGoldWrapper) .GoldDisplay {
  font-size: 2.5vh;
  position: absolute;
}

.ShopOption {
  display: inline-flex;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  margin: 10px;
  /* background-color: bisque; */
}

#ShopStonesWrapper {
  display: flex;
  flex-direction: row;
}

#ShopStonesRefresh {
  margin: 10px;
  /* display: flex; */
  position: relative;
}

#ShopStonesRefresh>img {
  width: 18vw;
  height: 18vw;
}

#ShopGoldWrapper {
  position: absolute;
  top: 3vh;
  right: 3vh;
}

#ShopInfoOverlay {
  background: url("./Assets/UIElemente/HolzRahmen.png") center no-repeat;
  background-size: 100% 100%;
  aspect-ratio: 1;
  width: 50vw;
  height: 40vw;
  padding: 4vw;
  color: white;
  font-size: 2.5vw;
  display: grid;
  grid-template-areas: "info info" "confirm cancel";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 1em;
  position: relative;
}

#ShopInfoOverlay::before,
#ShopInfoOverlay::after {
  content: '';
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

#ShopInfoOverlay::before {
  background-image: url("./Assets/UIElemente/PostIt.png");
  width: 30%;
  height: 30%;
  right: 5%;
  top: 10%;
}

#ShopInfoOverlay::after {
  background-image: var(--stone-url);
  width: 15%;
  height: 15%;
  right: 12.5%;
  top: 15%;
}

#ShopInfo {
  grid-area: info;
  display: flex;
  flex-direction: column;
  width: 80%;
  gap: 1em;
}

#ShopInfo>.GoldDisplay {
  top: 50%;
  right: 10%;
}

.ShopOption>.GoldDisplay {
  top: -2vh;
  right: -1vh;
  rotate: 10deg;
}

#Shop p {
  height: 18vw;
  display: grid;
  place-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 1em;
  margin: 10px;
}

#Shop h3 {
  margin: 1em 0;
  font-size: 2.5vh;
}

#ShopCloseWrapper {
  font-size: 3vh;
  position: absolute;
  bottom: 2vh;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.too-expensive {
  filter: grayscale(1) !important;
  opacity: 0.5;
}

/* OPTIONS */
#OptionsWrapper {
  background: url("./Assets/UIElemente/HolzRahmen.png") center no-repeat;
  background-size: 100% 100%;
  color: white;
  width: 80vw;
  height: 65vw;
  padding: 10vw;
  font-size: 2vh;
}

.settings-category-name {
  display: block;
  font-size: 1.2em;
  margin: 1em 0;
}

.settings-label {
  display: flex;
  justify-content: space-evenly;
  margin: 0.25em 0;
}

.settings-label-text {
  flex-grow: 1;
}

.settings-number-input {
  appearance: textfield;
  background-color: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: medium;
  text-align: center;
  padding: 0 0.5em;
  font: inherit;
}

#OptionsClose {
  font-size: 3vh;
}

/* END SCREEN */
#RunEnd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#RunEndInner {
  background: url("./Assets/UIElemente/HolzSchild.png") center no-repeat;
  background-size: contain;
  font-size: 6vh;
  padding: 1.5em;
  color: white;
  text-align: center;
  animation: scale-in calc(0.7s/ var(--speed)) cubic-bezier(.81, 1.48, .64, 1);
}

#RunEndMainMenu {
  opacity: 0;
  animation: fade-in calc(0.4s/ var(--speed)) calc(0.7s/ var(--speed)) cubic-bezier(.81, 1.48, .64, 1) forwards;
  font-size: 3vh;
}

/* LEVELUP */
.LevelupOption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.LevelupLetter {
  font-size: 2em;
}

/* MISC */

.no-interact {
  pointer-events: none;
}

.interact {
  pointer-events: all;
}

.hidden {
  display: none !important;
}

button.hidden {
  display: block !important;
  visibility: hidden;
}

.blur {
  backdrop-filter: blur(100vh);
}

.center-center {
  display: grid;
  place-items: center;
}

button {
  background: none;
  border: none;
  padding: 0.5em 0.75em;
  background-image: url("./Assets/UIElemente/ButtonGr.png");
  background-size: 100% 100%;
  color: white;
  font-size: inherit;
  font-family: inherit;
  transition: filter 0.1s, translate 0.1s;
}

button,
.clickable {
  transition: filter 0.1s, translate 0.1s, scale 0.2s;
  filter: drop-shadow(0.1em 0.1em 0 #3e2e1d);
  cursor: pointer;
}

.clickable:not(:disabled):not(.selected):hover,
button:not(:disabled):not(.selected):hover {
  scale: 1.05;
}

.clickable:active,
button:active {
  filter: none;
  translate: 0.1em 0.1em;
}

button:disabled,
.clickable:disabled {
  cursor: default;
}

.clickable.selected {
  scale: 1.2;
}

.selectable {
  background-color: #f7f7f9;
  border: 1px solid black;
  border-radius: 1em;
  padding: 1em;
}

.settings-number-input-button.plus,
button.green {
  background-image: url("./Assets/UIElemente/ButtonGrGruen.png");
}

.settings-number-input-button.minus,
button.red {
  background-image: url("./Assets/UIElemente/ButtonGrRot.PNG");
}

.GoldDisplay {
  background-image: url("./Assets/UIElemente/ButtonGr.png");
  background-size: 100% 100%;
  width: 3em;
  height: 1.5em;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-left: 0.75em;
  font-size: 4vh;
  z-index: 10;
}

.GoldDisplay::before {
  display: inline-block;
  content: "";
  background-image: url("./Assets/UIElemente/Muenze.PNG");
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: -50%;
}

.GoldDisplayPopovers {
  position: absolute;
  top: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  z-index: -1;
  padding-top: 0.2em;
  right: 0;
}

.GoldDisplayPopover {
  animation: gold-display-popover calc(2s/ var(--speed)) forwards;
  z-index: -1;
  width: 3em;
  background: url("./Assets/UIElemente/ButtonGr.png") center no-repeat;
  background-size: 100% 100%;
  text-align: center;
}

.GoldDisplayPopover.positive {
  color: green;
}

.GoldDisplayPopover.positive::before {
  content: "+";
}

.GoldDisplayPopover.negative {
  color: rgb(187, 1, 1);
}

@keyframes gold-display-popover {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  5% {
    transform: translateX(0);
    opacity: 1;
  }

  95% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.ChoiceScreen {
  width: 80vw;
  height: 30vh;
  display: flex;
  flex-direction: column;
  /* background: url("./Assets/UIElemente/HolzSchild.png") center no-repeat; */
  background-size: contain;
  justify-content: center;
  align-items: center;
  margin: auto;
  font-size: 3vh;
}

.ChoiceScreen>span {
  display: block;
  background: url("./Assets/UIElemente/ButtonKl.png") center no-repeat;
  background-size: 100% 100%;
  /* height: 6vh; */
  color: white;
  display: grid;
  place-items: center;
  padding: 1em 1em;
  font-weight: 700;
  margin-bottom: 3vh;
  text-align: center;
}

.ChoiceScreen>div {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.InfoScreen {
  background: url("./Assets/UIElemente/HolzRahmen.png") center no-repeat;
  background-size: 100% 100%;
  color: white;
  width: 80vw;
  height: 65vw;
  padding: 10vw;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }

  90% {
    transform: rotate(0deg);
  }

  93% {
    transform: rotate(5deg);
  }

  96% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }

}

.DamageNumber {
  position: absolute;
  z-index: 10;
  font-size: 3vh;
  color: rgb(187, 1, 1);
  font-weight: bold;
  animation: damage-number calc(1.2s/ var(--speed)) ease-out forwards;
  text-shadow: 0 0 5px white;
}

.DamageNumber.Critical::after {
  content: "!";
}

.DamageNumber.heal {
  color: green;
}

.DamageNumber.zero {
  color: white;
  text-shadow: 0 0 5px black;
}

@keyframes damage-number {
  0% {
    transform: translateY(0) rotate(0) translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-3em) rotate(calc(var(--random) * 10deg)) translateX(calc(var(--random) * 1em));
    opacity: 0.5;
  }
}

#Introduction {
  padding: 2em;
  font-size: 2.5vh;
  text-align: center;
  color: white;
}

.IntroInner {
  visibility: none;
  opacity: 0;
  padding: 1em;
}

.IntroInner:not(:last-of-type) {
  background: url("./Assets/UIElemente/HolzRahmen.png") center no-repeat;
  background-size: 100% 100%;
}

.IntroInner.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s;
}