/* The game picker on the Room screen: one card per game, each with a picture drawn from tokens.
   A game with several versions opens across the full width and lists them. */

.picker {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}

.picker h2 {
  font-size: var(--text-md);
  color: var(--chalk-dim);
  font-weight: var(--weight-text);
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.game-card {
  display: grid;
  grid-template-rows: 1fr auto;
  border-radius: var(--radius-control);
  background: var(--felt-deep);
  overflow: hidden;
}

.game-card.is-open {
  box-shadow: inset 0 0 0 2px var(--chalk);
}

.card-main {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 0 0 var(--space-2);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.card-main:active {
  transform: translateY(1px);
}

.card-main:disabled {
  cursor: default;
}

.card-main:disabled .card-art {
  opacity: 0.55;
}

.card-art {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.card-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.card-main .game-name {
  padding: var(--space-2) var(--space-3) 0;
}

.card-main .game-blurb {
  padding: 0 var(--space-3);
}

.card-count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.card-count::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-quick);
}

.card-toggle[aria-expanded='true'] .card-count::after {
  transform: translateY(2px) rotate(-135deg);
}

/* An open family's versions: a panel across the row under its card. */
.versions {
  grid-column: 1 / -1;
  display: grid;
  border-radius: var(--radius-control);
  background: var(--felt-deep);
  box-shadow: inset 0 0 0 2px var(--chalk);
  overflow: hidden;
}

.version {
  display: grid;
  grid-template-columns: 1fr auto;
}

.version + .version {
  border-top: 1px solid color-mix(in srgb, var(--chalk) 15%, transparent);
}

.version .game-pick {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.version .game-pick:active {
  transform: translateY(1px);
}

.version .game-pick:disabled {
  opacity: 0.45;
  cursor: default;
}

.how-btn {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  color: var(--chalk-dim);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.version .how-btn {
  border-left: 1px solid color-mix(in srgb, var(--chalk) 15%, transparent);
}

.game-name {
  font-weight: var(--weight-bold);
}

.game-blurb {
  color: var(--chalk-dim);
  font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
  .card-count::after {
    transition: none;
  }
}