/* Shared catalog/guide presentation. Deep pink keeps white labels readable. */
:root {
  --game-play-color: oklch(0.56 0.19442544 5.309480);
  --game-play-shadow: color-mix(in oklch, var(--game-play-color), oklch(0 0 none) 15%);
}

.game-card .game-play,
.play-button {
  background: var(--game-play-color);
  color: oklch(1 0 none);
  box-shadow: 0 3px 0 var(--game-play-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .play-button:hover,
  .game-main-link:hover .game-play {
    background: color-mix(in oklch, var(--game-play-color), oklch(1 0 none) 4%);
  }
}

.game-main-link:active .game-play,
.play-button:active {
  background: color-mix(in oklch, var(--game-play-color), oklch(0 0 none) 10%);
}

/* To restore ratings everywhere, remove this rule. Keep markup and data. */
.rating,
.game-rating {
  display: none;
}