/* Image tiles (/js/typing-quiz/image-grid.js): the flags quiz and US presidents by picture. Each image fits inside a
   uniform frame at its own proportions; the frame's shape is --tile-ratio (set by the quiz: 3 / 2 for flags,
   4 / 5 for portraits). States: is-active (the one to name), is-named, is-missed. Rules that depend on the quiz's
   state (playing or not) live in the quiz's own CSS, under its root class. Existing tokens only. */

.image-tile__btn {
  display: grid; gap: var(--s1); width: 100%; padding: var(--s1);
  background: none; border: 0; border-radius: 8px; color: inherit; font: inherit; text-align: center;
}
button.image-tile__btn { cursor: pointer; }
.image-tile__frame {
  position: relative; /* the image is placed absolutely, so the frame's box is definite and every image fits */
  display: grid; place-items: center; aspect-ratio: var(--tile-ratio, 3 / 2);
  background: var(--surface-2); border-radius: 4px; padding: 2px;
  font-size: 11px; color: var(--ink-2); /* the neutral alt text, if an image fails to load */
}
.image-tile__frame img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: contain; }
.image-tile__label { min-height: 2.5em; font-size: 12px; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
.image-tile.is-active .image-tile__btn { box-shadow: inset 0 0 0 3px var(--ink); }
.image-tile.is-named .image-tile__frame { opacity: .35; }
.image-tile.is-named .image-tile__label { color: var(--state-correct); font-weight: 600; }
.image-tile.is-missed .image-tile__label { color: var(--state-wrong); font-weight: 600; }
.image-tile.is-named button.image-tile__btn { cursor: default; }

@media (min-width: 900px) {
  .image-tile__label { font-size: 13px; }
}