:root {
  --animation-duration: 0.3s;
}

body {
  margin: 0;
}

#status > p {
  margin-block: 0;
}

main {
  display: grid;
  grid-template:
    "status" 1lh
    "board" 1fr
  ;
  height: 100svh;
  width: 100svw;
  overflow: hidden;
}

#board {
  overflow: auto;
}

svg {
  min-width: calc(2em * var(--size));
}

#cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

@property --x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --flip {
  syntax: "<angle>";
  inherits: false;
  initial-value: 180deg;
}

@property --wobble {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.card {
  transition: transform 1s;
  cursor: pointer;
  transition: --flip var(--animation-duration), --x var(--animation-duration), --y var(--animation-duration);
  transform: translate(var(--x), var(--y)) rotateX(var(--flip)) rotateZ(var(--wobble));
}

.finished .card {
  animation: finished 0.1s infinite alternate-reverse ease-in-out;
}

@keyframes finished {
  from {
    --wobble: -5deg;
  }

  to {
    --wobble: 5deg;
  }
}

.card .label {
  text-anchor: middle;
  dominant-baseline: middle;
  fill: currentColor;
  font-family: monospace;
  user-select: none;
}

.card.revealed .bg {
  fill: lightgreen;
}

.card[aria-selected="true"] {
  z-index: 2;
}

.card:is(.revealed, [aria-selected="true"]) {
  --flip: 0deg;
}

@keyframes flip {
  from {
    --flip: 180deg;
  }
  to {
    --flip: 0deg;
  }
}

.card.revealed {
  cursor: not-allowed;
}

.card:not(.revealed, [aria-selected="true"]) .label {
  color: transparent;
}

.card .bg {
  fill: white;
  stroke: black;
  stroke-width: 0.01;
}