@import url('https://fonts.googleapis.com/css2?family=Nova+Cut&display=swap');

:root {
  --highlighterPink: #ef5777;
  --sizzlingRed: #f53b57;
  --darkPeriwinkle: #575fcf;
  --freeSpeechBlue: #3c40c6;
  --megaman: #4bcffa;
  --spiroDiscoBall: #0fbcf9;
  --freshTurquoise: #34e7e4;
  --jadeDust: #00d8d6;
  --mintyGreen: #0be881;
  --greenTeal: #05c46b;
  --narenjiOrange: #ffc048;
  --chromeYellow: #ffa801;
  --yrielYellow: #ffdd59;
  --vibrantYellow: #ffd32a;
  --sunsetOrange: #ff5e57;
  --redOrange: #ff3f34;
  --hintOfElusiveBlue: #d2dae2;
  --londonSquare: #808e9b;
  --goodNight: #485460;
  --blackPearl: #1e272e;
  --top: #CC9543;
  --red: #d80000;

  --canvasHeight: 768px;
  --canvasWidth: 1024px;
  --cardHeight: 60px;
  --cardWidth: 60px;
}
/* TODO: Let's be honest everything is flex-center */
html {
  background-color: var(--blackPearl);
  color: var(--hintOfElusiveBlue);
  height: 100%;
  width: 100%;
  display: flex;
}

header {
  width: var(--canvasWidth);
}

header h1 {
  color: var(--top);
}

body {
  width: 100%;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
  align-content: center;
}

.controls {
  width: 100%;
  justify-content: space-around;
  font-family: "Nova Cut";
}

.game-canvas {
  height: var(--canvasHeight);
  width: var(--canvasWidth);
  background-color: var(--black);
  color: var(--hintOfElusiveBlue);
  border: 1px solid var(--top);
  margin: 5px 0px 5px 0px;
}

.title-screen {
  animation: fadein 1s;
}

.title-screen h1 {
  font-size: 128px;
  font-family: 'Nova Cut';
  background: radial-gradient(circle, rgba(153,98,16,1) 0%, rgba(255,200,118,1) 50%, rgba(204,149,67,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.title-screen h2 {
  font-size: 16px;
  margin-top: 32px;
  animation: blinking 1.5s linear infinite;
}

@keyframes blinking {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

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

.main-menu-screen, .game-options-screen {
  animation: fadein 3s;
  font-family: 'Nova Cut';
  color: var(--top);
}

.main-menu-screen h1 {
  font-size: 128px;
  margin-bottom: 32px;
}

.main-menu-screen h2 {
  color: var(--hintOfElusiveBlue);
  font-size: 32px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.main-menu-screen h1,
.game-options-screen h1, .game-options-screen h2,
.game-over-screen h1, .game-over-screen h2 {
  background: radial-gradient(circle, rgba(153,98,16,1) 0%, rgba(255,200,118,1) 50%, rgba(204,149,67,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: normal;
}

.game-options-screen h1 {
  font-size: 64px;
  margin-bottom: 16px;
}

.game-options-screen h2 {
  font-size: 32px;
  margin: 16px 0 8px 0;
}

.game-options-screen li {
  font-size: 24px;
  color: var(--hintOfElusiveBlue);
  margin-left: 16px;
}

.game-options-screen li:first-child {
  margin-left: 0px;
}

.game-options-screen h3 {
  font-size: 24px;
  color: var(--hintOfElusiveBlue);
  margin-top: 24px;
}

.card-spread {
  width: calc(var(--cardWidth) * 5);
  flex-wrap:wrap;
}

.prompt-card {
  height: var(--cardHeight);
  width: calc((var(--cardWidth) * 5) - (4 * 6px));
  background: linear-gradient(90deg, rgba(255,200,118,1) 0%, rgba(204,149,67,1) 50%, rgba(153,98,16,1) 100%);
  margin: 3px;
  padding: 3px;
  clip-path: polygon(0 25%, 10% 0, 100% 0, 100% 75%, 90% 100%, 0 100%);
}

.prompt-face {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(154,168,181,1) 0%, rgba(128,142,155,1) 50%, rgba(103,117,130,1) 100%);
  font-family: 'Nova Cut';
  font-size: 32px;
  font-weight: bold;
  color: var(--blackPearl);
  opacity: 100%;
  clip-path: polygon(0 25%, 10% 0, 100% 0, 100% 75%, 90% 100%, 0 100%);
}

.on-deck-card {
  margin: -50px 3px 3px 3px;
  padding: 3px;
  height: var(--cardHeight);
  width: var(--cardWidth);
  background: linear-gradient(90deg, rgba(255,200,118,1) 0%, rgba(204,149,67,1) 50%, rgba(153,98,16,1) 100%);
  clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%);
}

.on-deck-back {
  height: 100%;
  width: 100%;
  color: var(--red);
  background: linear-gradient(90deg, rgba(255,200,118,1) 0%, rgba(204,149,67,1) 50%, rgba(153,98,16,1) 100%);
  filter: brightness(80%);
  clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%);
}

.vegvisir {
  width: calc(var(--cardWidth) - 5px);
}

.card-container {
  background-color: transparent;
  width: var(--cardWidth);
  height: var(--cardHeight);
  perspective: 1000px;
  padding: 6px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

.card-face-border, .card-back-border {
  height: 100%;
  width: 100%;
  padding: 3px;
  backface-visibility: hidden;
  background: linear-gradient(90deg, rgba(255,200,118,1) 0%, rgba(204,149,67,1) 50%, rgba(153,98,16,1) 100%);
  position: absolute;
}

.card-face-border {
  clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}

.card-back-border {
  transform: rotateY(180deg);
  clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%);
}

.card-face {
  background: linear-gradient(90deg, rgba(154,168,181,1) 0%, rgba(128,142,155,1) 50%, rgba(103,117,130,1) 100%);
  height: 100%;
  width: 100%;
  font-family: 'Nova Cut';
  font-size: 32px;
  font-weight: bold;
  color: var(--blackPearl);
  clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}

.card-back {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255,200,118,1) 0%, rgba(204,149,67,1) 50%, rgba(153,98,16,1) 100%);
  filter: brightness(80%);
  clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%);
}

.targeted {
  animation: targeting .5s linear infinite;
}

.incorrect {
  animation: incorrect .5s linear infinite;
}

.selected {
  text-decoration: underline;
  text-decoration-color: var(--top);
}

h2.targeted, li.targeted, h3.targeted {
  animation: text-targeting .5s linear infinite;
}

@keyframes targeting {
  0% {
    background: var(--hintOfElusiveBlue);
  }
  50% {
    background: var(--megaman);
  }
  100% {
    background: var(--spiroDiscoBall);
  }
}

@keyframes text-targeting {
  0% {
    color: var(--hintOfElusiveBlue);
  }
  50% {
    color: var(--megaman);
  }
  100% {
    color: var(--spiroDiscoBall);
  }
}

@keyframes incorrect {
  0% {
    background: var(--hintOfElusiveBlue);
  }
  50% {
    background: var(--sunsetOrange);
  }
  100% {
    background: var(--redOrange);
  }
}

.gameplay-screen {
  animation: fadein 3s;
}

.player-two {
  margin-left: 3px;
}

.status-panel {
  height: calc((var(--cardHeight) + 10px) * 5);
  width: calc((var(--cardWidth) + 12px));
  border: 3px solid var(--top);
  justify-content: space-between;
}

.game-status {
  border-bottom: 3px solid var(--top);
  width: 100%;
  font-family: 'Nova Cut';
  font-size: 16px;
}

.game-status h1 {
  font-size: 24px;
  font-weight: bold;
}

.game-over-screen {
  height: 100%;
  width: 100%;
  font-family: 'Nova Cut';
}

.game-over-screen h1 {
  font-size: 64px;
}

.game-over-screen h2 {
  font-size: 32px;
}

.player-stats {
  margin-top: 25px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.player-results {
  align-self: flex-start;
}

/* TODO: this could auto-scroll */
.prompt-list {
  margin-top: 25px;
  max-height: calc(var(--cardHeight) * 5);
}

.player-results .prompt-card {
  margin-top: -20px;
}

.player-results h2 {
  font-size: 32px;
  color: var(--top);
  margin-bottom: 5px;
}

.player-results h3 {
  font-size: 24px;
  margin-bottom: 5px;
}

.game-over-screen h4 {
  font-size: 16px;
  margin-top: 32px;
  animation: blinking 1.5s linear infinite;
}

footer {
  margin-top: 3px;
}

footer a {
  color: var(--hintOfElusiveBlue);
  text-decoration: none;
}

footer a:hover {
  color: var(--red);
}

.o-slash {
  color: var(--red);
}

.top:hover {
  color: var(--top);
}