/* Shared printed-card illustrations for the four compact games. */
.game-art {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  color: var(--blue);
}

.game-art i,
.game-art::before,
.game-art::after {
  position: absolute;
  display: block;
  content: '';
}

/* One hint: overlapping clue slips with a single marked line. */
.game-art-hint i {
  width: 39px;
  height: 28px;
  border: 2px solid currentColor;
  border-radius: 4px;
  background: var(--paper);
}
.game-art-hint i:nth-child(1) { left: 6px; top: 25px; transform: rotate(-16deg); color: var(--berry); }
.game-art-hint i:nth-child(2) { left: 18px; top: 19px; transform: rotate(8deg); }
.game-art-hint i:nth-child(3) { left: 28px; top: 29px; transform: rotate(16deg); color: var(--berry); }
.game-art-hint::after { left: 37px; top: 41px; width: 22px; border-top: 2px solid var(--blue); transform: rotate(-6deg); }

/* Grid: a four-by-four board with one cherry cell. */
.game-art-grid { display: grid; grid-template-columns: repeat(4, 14px); grid-auto-rows: 14px; gap: 3px; align-content: center; justify-content: center; }
.game-art-grid i { position: relative; border: 2px solid var(--blue); border-radius: 3px; background: var(--paper); }
.game-art-grid i:nth-child(4), .game-art-grid i:nth-child(9), .game-art-grid i:nth-child(13) { background: var(--blue); border-color: var(--blue); }
.game-art-grid i:nth-child(7) { background: var(--berry); border-color: var(--berry); }
.game-art-grid::before { inset: 8px; border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); border-radius: 6px; }

/* Hot letter: a card and a compact timer ring. */
.game-art-letter::before { left: 12px; top: 12px; width: 42px; height: 52px; border: 2px solid var(--blue); border-radius: 6px; background: var(--paper); transform: rotate(-7deg); box-shadow: 5px 4px 0 -2px var(--berry); }
.game-art-letter::after { left: 26px; top: 28px; width: 16px; height: 16px; border: 3px solid var(--berry); border-radius: 50%; border-right-color: transparent; transform: rotate(35deg); }
.game-art-letter i { left: 32px; top: 21px; width: 3px; height: 11px; background: var(--blue); transform-origin: 50% 16px; transform: rotate(28deg); }
.game-art-letter i:nth-child(2) { left: 48px; top: 16px; width: 12px; height: 3px; background: var(--berry); transform: rotate(23deg); }

/* Bluff: question card with two hidden answer slips. */
.game-art-bluff i { width: 39px; height: 27px; border: 2px solid currentColor; border-radius: 4px; background: var(--paper); }
.game-art-bluff i:nth-child(1) { left: 5px; top: 38px; color: var(--berry); transform: rotate(-12deg); }
.game-art-bluff i:nth-child(2) { left: 32px; top: 39px; color: var(--blue); transform: rotate(11deg); }
.game-art-bluff i:nth-child(3) { left: 18px; top: 15px; width: 40px; height: 31px; border-color: var(--blue); background: var(--paper); transform: rotate(0); }
.game-art-bluff i:nth-child(3)::after { left: 12px; top: 4px; content: '?'; color: var(--berry); font-size: 23px; font-weight: 800; line-height: 1; }

.hub-art .game-art { transform: scale(.88); }
.cover .game-art { transform: scale(1.8); }

@media (max-width: 360px) {
  .hub-art .game-art { transform: scale(.68); }
}