/* ============================================================
   Scatter: the collection (js/collect.js). Cards on home.html and
   collection.html. Colours come from css/scatter.css; each card takes its
   app's own frame and paper from content/cards.js.
   ============================================================ */

.collect-home { margin: 30px 0 8px; }
.collect-home .cards-head { margin-top: 0; }
.collect-new {
  border: 2px solid var(--accent); border-radius: var(--radius); background: var(--card);
  padding: 14px 16px; margin: 0 0 14px;
}
.collect-new h3 { margin: 0 0 8px; font-size: 1.2rem; }
.collect-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

.cc-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}
.cc {
  --cc-frame: #2f6b4f; --cc-paper: #fff; --cc-ink: #1d2340;
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--cc-paper); color: var(--cc-ink);
  border: 5px solid var(--cc-frame); border-radius: 16px; padding: 8px 8px 10px;
  box-shadow: 0 4px 12px rgba(29, 35, 64, .12);
}
.cc-pic { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .55); }
.cc-pic svg { display: block; width: 100%; height: 100%; }
.cc-name { margin: 8px 0 0; font-weight: 700; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.cc-from { margin: 2px 0 0; font-size: .85rem; opacity: .85; }
.cc-line { margin: 6px 0 0; font-size: .85rem; line-height: 1.35; font-style: italic; }
.cc-star {
  display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px;
  background: #7a5a08; color: #fff8e1; font-size: .72rem; vertical-align: 2px;
}
.cc-gold { border-color: #c9a227; box-shadow: 0 0 0 3px #f2d775, 0 6px 16px rgba(122, 90, 8, .3); }

/* Not found yet: a grey space, the same for every card, so it gives nothing away. */
.cc-empty { background: rgba(128, 128, 128, .10); color: var(--ink-soft, #4a5275); border-color: rgba(128, 128, 128, .45); border-style: dashed; box-shadow: none; }
.cc-empty .cc-pic { display: flex; align-items: center; justify-content: center; background: rgba(128, 128, 128, .16); }
.cc-empty .cc-pic span { font-size: 2.6rem; font-weight: 700; opacity: .4; }
.cc-empty .cc-name { opacity: .7; font-weight: 600; }

/* A card arriving: it turns over once. */
.cc-arrive { animation: cc-flip .7s ease-out both; }
@keyframes cc-flip { from { transform: perspective(600px) rotateY(80deg); opacity: 0; } to { transform: none; opacity: 1; } }
html.hg-s-calm-on .cc-arrive { animation: none; }
@media (prefers-reduced-motion: reduce) { .cc-arrive { animation: none; } }

/* collection.html */
.collect-page h1 { margin: 22px 0 4px; }
.collect-set { margin: 26px 0; }
.collect-set > h2 { margin: 0 0 4px; font-size: 1.4rem; }
.collect-app { margin: 18px 0; }
.collect-app > h3 { margin: 0 0 10px; font-size: 1.1rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.collect-app > h3 .muted { font-weight: 400; font-size: .95rem; }
.collect-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.collect-filter button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

@media (max-width: 480px) {
  .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}