.bad { --pile-color: var(--bad); }
.low { --pile-color: var(--low); }
.confident { --pile-color: var(--confident); }

.play {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.table {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
}

/* Card */

.card {
  display: grid;
  gap: var(--space-m);
  width: min(100%, 22rem);
  animation: deal var(--slow) var(--bouncy);
}

.flip {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sides {
  display: grid;
  height: min(48dvh, 24rem);
  perspective: 60rem;
  cursor: pointer;
}

.side {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  backface-visibility: hidden;
  transition: transform var(--slow) var(--bouncy), translate var(--fast), rotate var(--fast), opacity var(--fast);
}

.back {
  background: #f1edff;
  transform: rotateY(180deg);
}

.flip:checked + .sides .front { transform: rotateY(-180deg); }
.flip:checked + .sides .back { transform: rotateY(0); }
.flip:focus-visible + .sides { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: var(--radius); }

/* While the placement is on its way, the card leans towards its Pile. */
.card:has(.htmx-request.bad) .side { translate: -25% 10%; rotate: -8deg; opacity: 0.4; }
.card:has(.htmx-request.low) .side { translate: 0 15%; opacity: 0.4; }
.card:has(.htmx-request.confident) .side { translate: 25% 10%; rotate: 8deg; opacity: 0.4; }

/* Rating buttons, shown once the card is flipped */

.rate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
  opacity: 0;
  translate: 0 1rem;
  pointer-events: none;
  transition: opacity var(--fast), translate var(--fast);
}

.card:has(.flip:checked) .rate {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.rate button {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: var(--space-s);
  border: 0;
  border-radius: var(--radius-small);
  background: var(--paper);
  box-shadow: 0 0.3rem 0 var(--pile-color);
  font-size: 1.75rem;
}

.rate button span { font-size: 0.8rem; font-weight: 700; }
.rate button:active { translate: 0 0.2rem; box-shadow: 0 0.1rem 0 var(--pile-color); }

/* The answered card flying onto its Pile */

.ghost {
  position: absolute;
  top: 40%;
  left: 50%;
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius);
  background: #f1edff;
  box-shadow: var(--shadow);
  font-size: 1.5rem;
  font-weight: 700;
  pointer-events: none;
  translate: -50% -50%;
  animation: to-pile var(--slow) ease-in forwards;
}

.ghost.to-bad { --to-x: -9rem; --to-rotate: -25deg; }
.ghost.to-low { --to-x: 0rem; --to-rotate: 0deg; }
.ghost.to-confident { --to-x: 9rem; --to-rotate: 25deg; }

/* Stars when half of the Hand is done */

.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stars span {
  position: absolute;
  top: 40%;
  left: 50%;
  font-size: 2.5rem;
  opacity: 0;
  animation: burst 900ms ease-out forwards;
}

.stars span:nth-child(1) { --to: -8rem -6rem; }
.stars span:nth-child(2) { --to: 0rem -9rem; animation-delay: 60ms; }
.stars span:nth-child(3) { --to: 8rem -6rem; animation-delay: 120ms; }
.stars span:nth-child(4) { --to: -9rem 2rem; animation-delay: 90ms; }
.stars span:nth-child(5) { --to: 9rem 2rem; animation-delay: 30ms; }
.stars span:nth-child(6) { --to: 0rem 7rem; animation-delay: 150ms; }

/* Piles */

.piles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
  padding: 0;
  list-style: none;
}

.pile {
  display: grid;
  justify-items: center;
  padding: var(--space-s);
  border-bottom: 0.3rem solid var(--pile-color);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--pile-color) 20%, var(--paper));
  font-size: 1.5rem;
}

.pile b { font-size: 1.25rem; }
.pile.bump { animation: bump var(--slow) var(--bouncy) 200ms; }

/* Summary */

.summary {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  text-align: center;
  animation: deal var(--slow) var(--bouncy);
}

.summary h2 { font-size: 2.25rem; }
.summary p { font-size: 1.5rem; }

.again {
  padding: var(--space-m) var(--space-l);
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  box-shadow: var(--shadow);
}

@keyframes deal {
  from { opacity: 0; scale: 0.85; }
}

@keyframes to-pile {
  to { transform: translate(var(--to-x), 45dvh) rotate(var(--to-rotate)) scale(0.2); opacity: 0; }
}

@keyframes burst {
  20% { opacity: 1; }
  to { translate: var(--to); scale: 1.4; opacity: 0; }
}

@keyframes bump {
  40% { scale: 1.2; }
}