@font-face {
  font-family: "Luckiest Guy";
  src: url(Assets/Font/LuckiestGuy.ttf);
}

@font-face {
  font-family: "Urbanist";
  src: url(Assets/Font/Urbanist-Bold.ttf);
}

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Luckiest Guy', cursive;

  --ui-color-background: #303645;
  --ui-color-foreground: #202432;
  color: white;
}

dialog {
  text-align: center;
}

canvas.fullscreen {
  width: 100vw;
  height: 100vh;
}

h2 {
  font-size: 5rem;
  text-align: center;
}

h3 {
  font-size: 3rem;
}

p {
  font-size: 2rem;
  color: #131721;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--ui-color-background);
}

.hidden {
  display: none !important;
}

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

button {
  padding: 0.25em 1em 0.75em 1em;
  color: #2f3749;
  font: inherit;
  font-size: 2em;
  cursor: pointer;
  border-image-source: url("Assets/UI/EmptyButtonBlue.png");
  border-image-width: 0.5em;
  border-image-slice: 25 fill;
  background-color: transparent;
}

button.danger {
  color: #472c35;
  border-image-source: url("Assets/UI/EmptyButtonOrange.png");
}

button.inverted {
  background-color: var(--ui-color-background);
  color: var(--ui-color-foreground);
}

button:disabled {
  filter: brightness(1.5) contrast(0.5);
  cursor: default;
}

/* main menu */

#main-menu-overlay {
  z-index: 10000;
  background-color: #e1a943;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
}

#main-menu-overlay::after {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("Assets/UI/MainMenu/Light.png") no-repeat center;
  background-size: contain;
}

#main-menu-logo {
  margin-top: 3vh;
  height: 30vh;
  background: url("Assets/UI/MainMenu/LogoDesktop.png") no-repeat center;
  background-size: contain;
}

#main-menu-buttons {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  color: #131721;
  text-align: center;
  padding: 0.1em;
}

#main-menu-deck-amount {
  font-size: 4vh;
  margin-bottom: -0.5em;
}

#main-menu-game:not(:disabled) + #main-menu-deck-error {
  display: none;
}

#main-menu-robot {
  background: url("Assets/UI/MainMenu/Robot.png") no-repeat bottom;
  height: 30vh;
  background-size: cover;
}

#main-menu-game {
  font-size: 3em;
}

#main-menu-language {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 1em;
  gap: 1em;
}
#main-menu-language img {
  width: 7.5vh;
  cursor: pointer;
}

/* Game Overlay */
#game-overlay {
  pointer-events: none;
  background-color: transparent;
  color: white;
  z-index: 1001;
}

#healthbar {
  position: absolute;
  /* top: calc(50% - 6vh); */
  top: 1px;
  width: 100%;
  /* height: 10px; */
  appearance: none;
  -webkit-appearance: none;
  --bg-color: #202533;
  --f-color: #c12417;
  background-color: var(--bg-color);
  border: none;
  border-radius: 5vw;
  /* aspect-ratio: 12 / 1; */
}

progress::-webkit-progress-bar {
  background-color: var(--bg-color);
}

progress::-moz-progress-bar {
  background-color: var(--f-color);
  border-radius: 5vw;
}

progress::-webkit-progress-value {
  background-color: var(--f-color);
  border-radius: 5vw;
}

#room-progress {
  display: block;
  text-align: center;
  margin-top: 2vh;
  font-size: 2rem;
}

#timer {
  display: block;
  text-align: center;
  font-size: 4rem;
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}

#game-overlay-pause {
  pointer-events: all;
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  padding: 1rem;
  gap: 1em;
  cursor: pointer;
}

#game-overlay-pause img {
  height: 3em;
}

#xp-display {
  position: absolute;
  bottom: 1px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#xpbar {
  appearance: none;
  -webkit-appearance: none;
  --bg-color: #202533;
  --f-color: #6971af;
  background-color: var(--bg-color);
  border: none;
  border-radius: 5vw;
  width: 100%;
}

#lvlup-marker>img {
  width: 2em;
  margin: 0.2em;
}

#card-upgrade-popup {
  pointer-events: all;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  flex-direction: column;
  height: 100vh;
  gap: 20px;
  background-color: rgba(108, 108, 121, 0.817);
  --card-size: min(40vw, 45vh);
}

#card-upgrade-popup-wrapper {
  pointer-events: all;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card-upgrade-row {
  display: flex;
  justify-content: center;
  gap: 20px;
}

#card-upgrade-popup .card {
  margin-bottom: calc(var(--card-size) * 0.3);
}

#card-upgrade-button-container {
  display: flex;
  justify-content: center;
}


#game-over-overlay {
  display: grid;
  place-items: center;
  z-index: 1005;
}

#game-over-overlay:not(.hidden) {
  animation: fade 1s reverse forwards linear;
}

.game-over-cards-wrapper span {
  font-size: 1.5em;
  margin: 1em 0;
  text-align: center;
  display: block;
}

.game-over-cards {
  --card-size: min(calc((21 / 15) * 17vw), 50vh);
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#between-rooms-overlay {
  z-index: 1002;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgba(108, 108, 121, 0.817);
}

/* pause and settings */
#pause-overlay {
  z-index: 1002;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

#pause-overlay-cards {
  --card-size: min(calc((21 / 15) * 17vw), 50vh);
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
}

#pause-overlay-cards .card {
  cursor: default;
}

.pause-overlay-buttons {
  display: flex;
  justify-content: space-between;
  gap: 3em;
  font-size: 0.8em;
}

#end-confirm {
  z-index: 1003;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}

#settings-overlay {
  z-index: 1002;
}

/* collection & deck */
#collection-overlay {
  --gap: 2vw;
  --padding: 3vw;
  background-color: var(--ui-color-background);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  color: rgb(255, 255, 255);
  --card-size: calc(((100vw - 4 * var(--gap) - 2 * var(--padding))/ 5) * 21 / 15);
}

/* #collection-overlay * {
  border: 1px solid red;
} */

#collection-outer-wrapper {
  width: 100%;
  height: 66vh;
  overflow-y: auto;
  transition: height 0.2s;
}

#deck-outer-wrapper {
  height: 33vh;
  display: flex;
  flex-direction: column;
  transition: height 0.2s;
}

#largeDeck:checked~#collection-outer-wrapper {
  height: 33vh;
}

#largeDeck:checked~#deck-outer-wrapper {
  height: 66vh;
}

#deck-wrapper {
  overflow-y: auto;
  flex-grow: 1;
}

.deck-title {
  display: flex;
  font-size: 24px;
}

.contains-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: var(--padding);
  justify-content: left;
}

#deck-selection {
  display: flex;
  justify-content: space-evenly;
  border-top: 2px solid var(--ui-color-foreground);
  padding: 0.2em;
  font-size: 6vw;
  align-items: baseline;
}

#deck-selection img {
  /* padding: 0 1em; */
  width: 1.5em;
  height: 1.5em;
}

#selection {
  border-bottom: 1px dashed var(--ui-color-foreground);
  padding-top: 3px;
  justify-content: space-evenly;
}

#selection .card {
  outline: 2px solid var(--ui-color-foreground);
}

#deck {
  justify-content: space-evenly;
}

/* popup */

#card-popup {
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  --card-size: min(75vh, calc(100vw * 21 / 15));
}

#card-popup-card {
  height: var(--card-size);

}

#card-popup-card .card:not(.common) .card-image {
  animation: wiggle 4s ease-in-out infinite;
}

/* #card-popup-card .card.legendary .card-rays {
  animation: rotate 10s linear infinite;
} */

#card-popup-selection-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: calc(var(--card-size) / 21 * 15);
}

.popup-button {
  cursor: pointer;
  max-height: calc((100vh - var(--card-size)) / 2);
  max-width: 100%;
}

.popup-button.disabled {
  filter: grayscale(1);
  cursor: default;
}

#card-popup-close {
  scale: 0.7;
}



/* cards */
.card {
  box-sizing: border-box;
  user-select: none;
  cursor: pointer;
  position: relative;
  height: var(--card-size);
  aspect-ratio: 15 / 21;
  display: grid;
  grid-template-rows: 20% 65% 0 15%;
  font-family: 'Luckiest Guy', cursive;

  --delay: 0s;

  --name-text-color: white;

  --name-text-outline: #616161;
  --name-text-dropshadow: #545454;

  --text-text-color: #efefef;
  --text-text-dropshadow: rgba(0, 0, 0, 0.25);

  background-image: url("Assets/Cards/PlainCards/Common_Card.png");
  background-size: 100% 100%;

  --background-image-glow: url("Assets/Cards/PlainCards/Common_Glow.png");
  --background-image-rays: url("Assets/Cards/PlainCards/Common_Rays.png");
}

.card:not(.placeholder)::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: var(--background-image-glow);
  background-size: 100% 100%;
  z-index: 4;
  animation: fade 1.5s infinite alternate-reverse ease-in-out;
  animation-delay: var(--delay);
}

.card.locked::before {
  animation: none;
}

.card-rays-outer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 488"><path class="cls-1" d="M7.53,40.64c-2.28,30.63-1.21,82.49,2.15,102.86.51,3.12,1.04,35.45,2.1,100.09.88,54.01.37,68.18.47,86.86.12,22.34.23,44.79-2.92,66.9l338.58-9.91c1.74-23.61,4.48-54.23,3.98-82.57-.42-23.81-2.67-23.57-3.12-53.7-.27-18.38,1.04-36.73,1.88-55.09,2.74-60.42.2-120.94-2.35-181.37-.12-2.97-.39-6.26-2.54-8.31-2.82-2.69-7.24-2.25-8.35-2.17-12.48.94-111.78,4.89-179.12,1.3h0c-6.5-1.2-30.28.51-68.34,1-42.84.56-45.82.45-60.3-1-3.29-.33-15.42-1.86-20.28,4.61-9.31,8.84-1.27,23.09-1.83,30.51Z"/></svg>') bottom no-repeat;
  z-index: 3;
}

.card-rays {
  width: 100%;
  height: 100%;
  background-image: var(--background-image-rays);
  background-size: 100% 100%;
  /* -webkit-clip-path: url(#cardClip);
  clip-path: url(#cardClip); */
  transform-origin: 55.7% 45.2%;
}

.card:not(.locked) .card-rays {
  animation: wiggle-large 4s ease-in-out infinite;
  animation-delay: var(--delay);
}

.card.uncommon {
  background-image: url("Assets/Cards/PlainCards/Uncommon_Card.png");
  --text-text-color: #d5fee6;
  --name-text-outline: #0a6200;
  --name-text-dropshadow: #005117;
  --background-image-glow: url("Assets/Cards/PlainCards/Uncommon_Glow.png");
  --background-image-rays: url("Assets/Cards/PlainCards/Uncommon_Rays.png");
}

.card.rare {
  background-image: url("Assets/Cards/PlainCards/Rare_Card.png");
  --text-text-color: #d5f6fe;
  --name-text-outline: #002662;
  --name-text-dropshadow: #000f51;
  --background-image-glow: url("Assets/Cards/PlainCards/Rare_Glow.png");
  --background-image-rays: url("Assets/Cards/PlainCards/Rare_Rays.png");
}

.card.epic {
  background-image: url("Assets/Cards/PlainCards/Epic_Card.png");
  --text-text-color: #f1d5fe;
  --name-text-outline: #3e0062;
  --name-text-dropshadow: #480051;
  --background-image-glow: url("Assets/Cards/PlainCards/Epic_Glow.png");
  --background-image-rays: url("Assets/Cards/PlainCards/Epic_Rays.png");
}

.card.legendary {
  background-image: url("Assets/Cards/PlainCards/Legendary_Card.png");
  --name-text-outline: #623600;
  --name-text-dropshadow: #512400;
  --text-text-color: #ffdfa2;
  --background-image-glow: url("Assets/Cards/PlainCards/Legendary_Glow.png");
  --background-image-rays: url("Assets/Cards/PlainCards/Legendary_Rays.png");
}

.card.placeholder {
  background-image: none;
  border: 5px solid var(--ui-color-foreground);
  cursor: default;
  border-radius: 10px;

}

.card-name {
  font-size: calc(var(--card-size) / 100 * 10);
  position: relative;
  --shadow-width: 0.05em;
  text-shadow: 0.05em 0.05em var(--name-text-outline),
    -0.05em 0.05em var(--name-text-outline),
    0.05em -0.05em var(--name-text-outline),
    -0.05em -0.05em var(--name-text-outline);
  filter: drop-shadow(0 0.12em 0 var(--name-text-dropshadow));
  color: var(--name-text-color);
  /* transform: translate(calc(var(--card-size) * -0.015), calc(var(--card-size) * 0.1)) rotate(-2deg); */
  transform: translate(0, calc(var(--card-size) * 0.1));
  margin-top: -0.5em;
  z-index: 6;
}

.card-level {
  display: flex;
  justify-content: center;
  align-items: center;
  --star-size: calc(var(--card-size) / 13);
  margin-top: calc(-1.2 * var(--star-size));
  z-index: 5;
  transform: rotate(-2deg);
}

.card-level-star {
  background-size: 100% 100%;
  --shadow-size: calc(var(--star-size) / 20);
  filter: drop-shadow(0 calc((var(--shadow-size) / 5) * 1) 0 var(--name-text-dropshadow)) drop-shadow(0 calc((var(--shadow-size) / 5) * 2) 0 var(--name-text-dropshadow)) drop-shadow(0 calc((var(--shadow-size) / 5) * 3) 0 var(--name-text-dropshadow)) drop-shadow(0 calc((var(--shadow-size) / 5) * 4) 0 var(--name-text-dropshadow)) drop-shadow(0 calc((var(--shadow-size) / 5) * 5) 0 var(--name-text-dropshadow));
}

.card-level-star>svg {
  height: var(--star-size);
  width: var(--star-size);
  fill: var(--text-text-color);
  stroke: var(--name-text-outline);
  stroke-width: 4px;
  stroke-linecap: round;
}

#card-level-star-1 {
  --scale: 0.8;
  transform: scale(var(--scale)) rotate(-3deg);
  margin-right: calc((1 - var(--scale)) * var(--star-size) * -1);
}

#card-level-star-2 {
  --scale: 0.9;
  transform: scale(var(--scale)) rotate(-5deg);
  margin-right: calc((1 - var(--scale)) * var(--star-size) * -1);
}

#card-level-star-3 {
  --scale: 1;
  transform: scale(var(--scale)) rotate(3deg);
  margin-right: calc((1 - var(--scale)) * var(--star-size) * -1);
}

#card-level-star-4 {
  --scale: 1.1;
  transform: scale(var(--scale)) rotate(1deg);
  margin-right: calc((1 - var(--scale)) * var(--star-size) * -1);
}

#card-level-star-5 {
  --scale: 1.2;
  transform: scale(var(--scale)) rotate(0deg);
  margin-right: calc((1 - var(--scale)) * var(--star-size) * -1);
}

.card.unlock .card-level-star>svg,
.card.level-0 #card-level-star-2>svg,
.card.level-0 #card-level-star-3>svg,
.card.level-1 #card-level-star-3>svg,
.card.level-0 #card-level-star-4>svg,
.card.level-1 #card-level-star-4>svg,
.card.level-2 #card-level-star-4>svg,
.card.level-0 #card-level-star-5>svg,
.card.level-1 #card-level-star-5>svg,
.card.level-2 #card-level-star-5>svg,
.card.level-3 #card-level-star-5>svg {
  fill: rgba(255, 255, 255, 0.25);
  stroke-dasharray: 3, 8;
}

.card.unlock .card-level-star,
.card.level-0 #card-level-star-2,
.card.level-0 #card-level-star-3,
.card.level-1 #card-level-star-3,
.card.level-0 #card-level-star-4,
.card.level-1 #card-level-star-4,
.card.level-2 #card-level-star-4,
.card.level-0 #card-level-star-5,
.card.level-1 #card-level-star-5,
.card.level-2 #card-level-star-5,
.card.level-3 #card-level-star-5 {
  filter: none;
}

.card.unlock #card-level-star-1,
.card.upgrade.level-0 #card-level-star-2,
.card.upgrade.level-1 #card-level-star-3,
.card.upgrade.level-2 #card-level-star-4,
.card.upgrade.level-3 #card-level-star-5 {
  animation: upgrade 0.3s linear alternate-reverse infinite;
}

.card.upgrade::after,
.card.unlock::after {
  content: "";
  background-image: url("Assets/UI/Gameplay/UpgradeCard.png");
  position: absolute;
  --size: calc(var(--card-size) * 0.3);
  bottom: calc(var(--size) * -0.8);
  right: calc(50% - (var(--size) / 2));
  width: var(--size);
  height: var(--size);
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.card.card.unlock::after {
  background-image: url("Assets/UI/Gameplay/AddCard.png");
}

.card.legendary .card-level {
  display: none;
}

.card-text {
  white-space: pre-wrap;
  display: grid;
  place-items: center;
  font-size: calc(var(--card-size) / 100 * 4);
  text-align: center;
  font-family: "Urbanist", Arial, Helvetica, sans-serif;
  color: var(--text-text-color);
  text-shadow: 0 0.1em 0 var(--text-text-dropshadow);
  transform: rotate(-3deg) translate(2em, -0.5em);
  width: 80%;
  height: 100%;
  z-index: 6;
}

.card-image {
  /* Doesn't work in Chrome. Bug? */
  /* display: grid;
  place-items: center; */
  display: flex;
  justify-content: center;
  z-index: 5;
}

.card-image>img {
  max-height: 100%;
  max-width: 100%;
}

.card.selected {
  opacity: 0.5;
}

.card.locked {
  cursor: default;
  filter: saturate(0);
}

.card.locked .card-name,
.card.locked .card-text {
  opacity: 0;
}

.card.locked .card-image {
  filter: brightness(0);
}

/* 
#hideLocked:checked~#collection-outer-wrapper .card.locked {
  display: none;
}

#collection-outer-wrapper label[for="hideLocked"]::before {
  content: "Hide";
}

#hideLocked:checked~#collection-outer-wrapper label[for="hideLocked"]::before {
  content: "Show";
} 
*/

/* touch stuff */
#swipe-game-overlay {
  display: none;
  pointer-events: all;
  z-index: 1000;
  background-color: transparent;
}

.touch-circle {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.25);
  touch-action: none;
  pointer-events: none;
}

#touch-circle {
  width: 15vw;
}

#touch-circle-inner {
  width: 10vw;
  left: 2.5vw;
  top: 2.5vw;
}

#touch-circle.locked {
  bottom: 10vh;
  left: calc(50vw - 7.5vw);
  touch-action: all;
  pointer-events: all;
}

.dmg-number {
  position: absolute;
  color: white;
  animation: dmg 1.2s linear;
  -webkit-text-stroke: 1px black;
}

.dmg-number.player {
  color: red;
  font-size: larger;
}

.dmg-number.healing {
  color: lime;
  /* font-size: larger; */
}

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

  50% {
    transform: rotate(-3deg);
  }

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

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

  50% {
    transform: rotate(-2deg);
  }

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

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

  to {
    transform: rotate(360deg);
  }
}

@keyframes fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.6;
  }
}

@keyframes upgrade {
  from {
    scale: 1;
  }

  to {
    scale: 1.3;
  }
}

@keyframes dmg {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-3em);
    opacity: 0.5;
  }

}

/* pointer: coarse aka we're on a mobile device with touch input */
@media (pointer: coarse) {
  #swipe-game-overlay {
    display: block;
  }
}

#mobile-debug {
  position: absolute;
  bottom: 2rem;
  width: 100%;
}

#mobile-debug>button {
  height: 4.5rem;
  width: 23%;
}

@media screen and (min-width: 500px) {

  #deck-outer-wrapper,
  #collection-outer-wrapper {
    height: 100% !important;
  }

  #deck-outer-wrapper {
    max-width: calc((var(--card-size) * 15 / 21) * 5 + (var(--gap) * 5) + (var(--padding) * 3));
    border-left: 2px solid var(--ui-color-foreground);
  }

  #collection-outer-wrapper {
    --card-size: 12vw;
  }

  #collection-overlay {
    flex-direction: row;
    --card-size: 8vw;
    --gap: 0.5vw;
    --padding: 1vw;
  }

  #deck-selection {
    font-size: 3vw;
    border-top: none;
  }

  #main-menu-robot {
    background-size: contain;
  }

  .pause-overlay-buttons {
    font-size: 1em;
  }

}

@media screen and (min-width: 1000px) {

  #xpbar,
  #healthbar {
    border: 2px solid var(--bg-color);
    border-radius: 10px;
    --width: max(10vw, 200px);
    width: var(--width);
    left: calc(50% - var(--width) / 2);
  }

  progress::-webkit-progress-value {
    border-radius: 10px;
  }

  progress::-moz-progress-bar {
    border-radius: 10px;
  }
}