/* The Jigsaw and Tiles pills in the middle of a picture card - hotpuzzle.net's home gallery
   (hotpuzzle-home.html, home.ts; with home.css) and My Puzzle's saved pictures (my-pictures.ts). */
.card .modes {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: 8px;
}
.card .mode {
  background: rgba(0, 0, 0, .6); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  padding: 7px 16px; border-radius: 999px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: background .2s, transform .2s;
}
/* ▶ and ▦ as text, not emoji */
.card .mode::before { margin-right: .45em; }
.card .mode.jigsaw::before { content: "\25B6\FE0E"; }
.card .mode.tiles::before { content: "\25A6\FE0E"; }
.card .mode:hover, .card .mode:focus-visible { background: var(--accent); transform: scale(1.06); }
.card .mode:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (max-width: 600px) {
  .card .modes { gap: 6px; }
  .card .mode { font-size: 12px; padding: 5px 11px; }
}