.image-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 16px;
  margin-block: 20px;
}
.image-story-card { min-width: 0; border: 2px solid var(--ink); border-radius: 16px; padding: 8px; background: var(--paper); }
.image-story-card.is-selected { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple); }
.image-story-card.is-correct { background: var(--mint); }
.image-story-pick { width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; box-shadow: none; color: var(--ink); }
.image-story-pick:disabled { opacity: 1; cursor: default; }
.image-story-pick img { display: block; width: 100%; height: 240px; object-fit: contain; border-radius: 10px; }
.image-story-pick span { display: block; padding: 10px 4px; }
.image-story-card summary { padding: 10px 4px; cursor: pointer; }
.image-story-detail { display: block; width: 100%; height: auto; }
.image-detail-close { display: none; }
.image-story-card:has(details[open]) { grid-column: 1 / -1; }
.image-story-card:has(details[open]) .image-story-pick img { display: none; }
.image-story-card details[open] .image-detail-open { display: none; }
.image-story-card details[open] .image-detail-close { display: inline; }
.image-story-card details[open] .image-story-detail { max-width: 640px; margin-inline: auto; }
#image-load-status:empty { display: none; }
.image-story-clue { margin: 16px 0; padding: 18px; border-left: 5px solid var(--purple); background: var(--lilac); font-size: 1.35rem; overflow-wrap: anywhere; }
.image-story-scores { display: flex; flex-wrap: wrap; gap: 12px; }
.image-story-rules { margin-top: 20px; }
#image-clue { width: 100%; margin-block: 8px 16px; }
@media (max-width: 600px) {
  .image-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .image-story-card { padding: 4px; border-radius: 12px; }
  .image-story-pick img { height: 150px; }
  .image-story-card summary { font-size: .85rem; }
}