:root {
  --card-width: 400px;
  --card-height: 634px;
  --max-card-width: 45vmin;
  --max-card-height: 60vmin;

  --theme-color: #080;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Silkscreen', 'Roboto', sans-serif;
  background-color: var(--theme-color);
  background: url(../assets/fondo-mesa.jpg);
}

body.blocked {
  overflow: hidden;
  max-height: 100vh;
  ;
}

input {
  font-family: 'Silkscreen', 'Roboto', sans-serif;
}

#install-button {
  position: absolute;
  color: #ff0;
  top: 0.5em;
  left: 50%;
  display: inline-block;
  transform: translate(-50%);
  padding: 1em;
  border: 0.15em solid #ff0;
  cursor: pointer;
  text-align: center;
}

#menu-icon,
#anotador-icon {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  font-size: 2em;
  color: #fffc;
  cursor: pointer;
}

#anotador-icon {
  left: unset;
  right: 0.5em;
}

#close-menu-icon,
#close-anotador-icon {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  font-size: 1.5em;
  color: black;
  cursor: pointer;
}

#navbar,
#anotador {
  display: none;
  background: #2220;
  padding: 1em;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  height: 100%;
  max-width: 100vw;
  min-width: 350px;
  box-shadow: 0px 0px 4px 1px #000;
  z-index: 10;

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    /* margin-top: 3em; */
    li {
      padding: 0.5em;
      cursor: pointer;

      &:hover {
        background: #00660022;
      }

      i.fa-solid {
        color: var(--theme-color);
        margin-right: 0em;
        width: 1.5em;
      }
    }
  }

  box-sizing: border-box;
}

#anotador {
  left: unset;
  right: 0;
  z-index: 9;
}

#navbar.active {
  display: block;
  animation: slideInLeft 0.25s forwards ease-in-out;
}

card back h1 {
  background: #fff;
  padding: 0.5em;
}

#anotador {
  padding: 0.5em;
  padding-top: 3em;
}

#anotador table td {
  white-space: nowrap;
}

#anotador.active {
  display: block;
  animation: slideInRight 0.25s forwards ease-in-out;
}

#anotador input {
  padding: 0.5em;
  border: 0.15em solid #ccc;
  box-sizing: border-box;
  font-size: 1em;
  max-width: 50vw;
}

#anotador input[type='number'] {
  text-align: center;
}

#anotador table td {
  padding-top: 0.5em;
}

#anotador table span {
  color: var(--theme-color);
  background: white;
  border-radius: 0;
  padding: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  border: 0.15em solid var(--theme-color);
  box-sizing: border-box;
}

#anotador table span.suma::before {
  content: '+';
}

#anotador table span.resta::before {
  content: '-';
}

#anotador table span.resta {
  color: #CAA;
  border-color: #CAA;
}

#anotador-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 1em;
  margin-top: 2em;
}

#anotador-buttons span {
  text-align: center;
  display: flex;
  padding: 1em;
  font-size: 1em;
  border: 0.15em solid #800;
  color: #800;
  min-width: 8em;
  margin-top: 2em;
  font-weight: bold;
  /* margin-left: 50%; */
  /* margin-right: 50%; */
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  max-width: 10em;
}

button {
  background: #008800;
  color: #fff;
  border: none;
  padding: 1em;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  transition: all .2s ease-in-out;
}

#blocker {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0808;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1em;
  z-index: 100;
  display: none;
  backdrop-filter: blur(8px);
}

#blocker #message {
  font-size: 3em;
  color: white;
}

#popup {
  max-width: 90vw;
  min-width: 300px;
  background: white;
  padding: 1em;
  border-radius: 4px;
  box-shadow: 0px 0px 4px #000;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  box-sizing: border-box;
}

#popup_content {
  height: 100%;
  display: block;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-bottom: 2em;
}

#close-popup {
  text-align: center;
  display: flex;
  padding: 1em;
  font-size: 1em;
  border: 0.15em solid #080;
  color: #080;
  min-width: 8em;
  margin-top: 2em;
  font-weight: bold;
  /* margin-left: 50%; */
  /* margin-right: 50%; */
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  max-width: 10em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
}


#title {
  display: none;
  height: 100%;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1em;
  text-align: center;
  font-size: 3.2vw;
  color: white;
}

#title h2 {
  margin-top: 0;
}

.hud-icon {
  display: none;
}

.hud-icon.active {
  display: block;
  animation: slideInDown 1s forwards ease-in-out;
}

#title.inactive {
  display: flex;
  animation: fadeOut 0.5s forwards ease-in-out;
}

#title.active {
  display: flex;
  animation: fadeIn 0.5s backwards ease-in-out;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  width: 100%;

}

@media screen and (max-width: 768px) {
  :root {
    --max-card-width: 90vw;
    --max-card-height: 80vh;
  }

  .main {
    flex-direction: column;
    gap: 2em;
    margin-top: 5em;
  }

  #navbar {
    width: 100%;
    box-sizing: border-box;
  }

  card.personaje #datos li {
    font-size: 0.8em;
  }

}

card.card-out {
  transform: rotate3d(0, 0, 1, 15deg) translate3d(0, -100vh, 0);
  display: none;
}

card.card-in {
  animation: cardAppear 1s forwards linear;
}

card {
  cursor: pointer;
  width: var(--card-width);
  height: var(--card-height);
  max-width: var(--max-card-width);
  max-height: var(--max-card-height);

  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: relative;
  transform-style: preserve-3d;
  display: block;
  transform: rotateY(180deg);
  margin: 1em;

  &.card--flipped {
    animation: cardFlip .275s forwards linear;
  }

  &.card--unflip {
    animation: cardUnFlip .275s forwards linear;
  }
}

card front,
card back {
  width: var(--card-width);
  height: var(--card-height);
  max-width: var(--max-card-width);
  max-height: var(--max-card-height);

  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

card front {
  backface-visibility: hidden;
  background: white;
  border-radius: 10px;
  padding: 1em;
  box-sizing: border-box;
  opacity: 0;
}

card.card--flipped front {
  opacity: 1;
}

card back {
  transform: scaleX(-1);
  background: url(../assets/fondo-naipe.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}

card.personaje back {
  filter: hue-rotate(300deg);
}

card.consigna back {
  filter: hue-rotate(0deg);
}

card.card--flipped back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

card.consigna front #texto {
  font-size: 2em;
  text-align: center;
  font-weight: bold;
}

card.consigna #categoria {
  text-transform: uppercase;
  font-size: 0.8em;
  position: absolute;
  top: 2em;
}

card.personaje #nombre_personaje {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  font-size: 1.25em;
  /* padding: 20px; */
  font-weight: bold;
  text-transform: uppercase;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5em;
}

card.personaje #sobrenombre {
  font-style: italic;
  font-weight: normal;
  font-size: 0.8em;
}

card.personaje #sobrenombre::before,
card.personaje #sobrenombre::after {
  content: '"';
}

card.personaje #imagen {
  height: 90%;
  width: 100%;
  background-size: cover;
  background-position: top;
  border-radius: 10px;
  /* filter: sepia(1); */
  background-color: #ccc;
  position: relative;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 2px #010102;
}

card.personaje #wikipedia {
  position: absolute;
  display: inline-block;
  bottom: 0;
  right: 0;
  /* width: 100%; */
  background: #fff;
  color: #fff;
  padding: 0.5em;
  box-sizing: border-box;
  font-size: 0.8em;
  text-align: center;
  text-decoration: none;
  border-top-left-radius: 10px;
}

card.personaje #datos {
  height: 30%;
  width: 100%;
  padding: 1em;
  padding-top: 0.5em;
}

card.personaje #datos p {
  padding: 0.5em;
  /* margin-top: 1.5em; */
  width: 100%;
  /* padding-left: 2em; */
  box-sizing: border-box;
  /* padding-right: 1em; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
  list-style-type: none;
  /* gap: 0.5em; */
  margin: 0;
  border-radius: 10px;
  border: 0px solid #010102;
  background: white;
  color: black;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.5;
  height: 100%;
  /* background: #F0D771; */
  /* box-shadow: inset 0 0 10px #f8a100; */
  margin-top: 0;
}