/* Answer pictures: a small rounded thumbnail beside each answer that has one
   (public/data/answer-images.json), tap to enlarge with caption and credit. */

.toplist.has-pics li { grid-template-columns: 2.2rem 40px 1fr auto; align-items: center; }
.key-list.has-pics li { grid-template-columns: 2.4rem 36px 1fr auto; align-items: center; }

.pic {
  display: block; width: 40px; height: 40px; padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  cursor: zoom-in; position: relative;
}
.key-list .pic { width: 36px; height: 36px; border-radius: 8px; }
.pic.none { border: 0; background: none; cursor: default; }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .pic:not(.none):hover { border-color: var(--accent); } }

/* the player's own answer on the reveal card */
.your.with-pic { display: flex; align-items: center; gap: 12px; }
.your .pic { width: 56px; height: 56px; flex: none; border-radius: 12px; animation: pic-pop 0.42s cubic-bezier(.2, 1.4, .4, 1) 0.12s both; }
@keyframes pic-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .your .pic { animation: none; } }

/* lightbox */
.pic-dialog {
  width: min(92vw, 480px); max-height: 92vh; padding: 14px; box-sizing: border-box;
  background: var(--panel); color: var(--ink); font-family: var(--font-body);
  border: var(--panel-border); border-color: var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.pic-dialog::backdrop { background: rgba(10, 12, 16, 0.72); }
.pic-dialog[open] { display: grid; gap: 12px; }
.pic-dialog figure { margin: 0; display: grid; gap: 10px; min-height: 0; }
.pic-dialog img {
  display: block; width: 100%; height: auto; max-height: 64vh; object-fit: contain;
  border-radius: calc(var(--radius) * 0.5); background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.pic-dialog figcaption { display: grid; gap: 4px; }
.pic-dialog strong { font-size: 1.1rem; }
.pic-dialog figcaption span { font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.pic-dialog a { color: inherit; }
.pic-dialog .btn { justify-self: end; min-height: 40px; }
.pic-dialog .btn.ghost { color: var(--ink); border-color: var(--line); }