:root {
  /* Mobile-first options */
  --board-width: 90vw;
  --board-columns: 3;
  --options-width: 95vw;

  /* SPRITE */
  /* Init via script */
  --cards-sprite-columns: 0;
  --cards-aspect-ratio: 0.6293586;
  --cards-border: 1px;
  --cards-gap: 5px;
  --board-card-width: calc((var(--board-width) / var(--board-columns)) - var(--cards-border) * 2 - var(--cards-gap) * 2);
  --board-card-height: calc(var(--board-card-width) / var(--cards-aspect-ratio));

  --color-yellow: hsl(50, 80%, 60%);

  --player-color-raw-blue: 217, 80%, 60%;
  --player-color-raw-red: 0, 80%, 60%;
  --player-color-raw-green: 120, 60%, 40%;
  --player-color-raw-purple: 245, 80%, 60%;
  
  /* Init via script */
  --player-color-raw : 0, 0%, 0%;
  --player-color: hsl(var(--player-color-raw));
  --player-color-semi-transparent: hsla(var(--player-color-raw), 85%);
}

header {
  display: flex;
  justify-content: center;
}

header .game-logo {
  width: 30vw;
  margin: 1em;
}

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

#app {
  display: flex;
  justify-content: space-evenly;
  position: relative;
}

/* BOARD */
#board {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cards-gap);
  justify-content: center;
  align-items: center;
  width: var(--board-width);
}

.card-container {
  width: var(--board-card-width);
  height: var(--board-card-height);
  cursor: pointer;
  perspective: calc(var(--board-card-width) * 5);
}

.card-container--secret .card:not(.card--inactive) {
  transform: scale(175%) translateY(-25%);
}

.card {
  border-radius: 0.8em;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container--secret .card {
  box-shadow: 0 0 10px #555;
  border: var(--cards-border) solid var(--color-yellow);
  background-color: var(--color-yellow);
}

.card-container--board .card {
  border: var(--cards-border) solid var(--player-color);
}

.card--inactive {
  transform: rotateY(180deg);
}


.card-front,
.card-front-details,
.card-back,
.card-back__image {
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

.card-front,
.card-front__title,
.card-front-details,
.card-back {
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  position: absolute;
}

.card-front {
  background-color: #fff;
  background-image: url(../images/characters.png);
  background-size: calc(var(--cards-sprite-columns) * 100%);
}

.card-container--secret .card-front {
  width: 70%;
  height: 70%;
  border-radius: 0.4em;
}

.card-front__title {
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  /* Centering */
  bottom: 5%;
  font-weight: bold;
  font-size: calc(var(--board-card-width) * 0.18);
}

/* Details for DEBUGGING only */
.card-front-details {
  display: none;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.5em;
  box-sizing: border-box;
}

.card-front-details p {
  font-size: calc(var(--board-card-width) * 0.1);
}


/* CARD BACK */

.card-back {
  transform: rotateY(180deg);
  /* Initially hidden */
  background: var(--player-color);
}

.card-back__image {
  position: absolute;
  background-size: cover;
}

/* Different background if secret card */
.card-container--secret .card-back__image {
  background-image: url(../images/card-back-secret.png);
}

.card-container--board .card-back__image {
  mix-blend-mode: hard-light;
  background-image: url(../images/card-back.png);
}


footer {
  text-align: center;
  margin-top: 2em;
}

footer aside {
  font-size: 0.7em;
  margin: 0.5em 0;
  font-style: italic;
}

@media (orientation : landscape) {
  header .game-logo {
    width: 15vw;
  }
}

@media (min-width : 600px) {
  :root {
    --board-columns: 5;
    --options-width: 60vw;
  }
}

@media (min-width : 900px) {
  :root {
    --board-columns: 7;
    --options-width: 45vw;
  }
}

@media (min-width : 1200px) {
  :root {
    --board-columns: 10;
    --options-width: 35vw;
  }
}