/* exp-collections.css
   Stitch "Soft-Modernist" reskin for the in-game COLLECTIONS and KEEPSAKES screens:
   the creature collection / dex and its detail card, the Bestiary, the adventure
   Inventory, the Achievements / Badges grid, the trip Scrapbook (Our Journey) plus
   Memory keepsakes, and the finish Certificate chooser.

   All of these are LIGHT chrome screens: a warm off-white stage (#F9F9F7), deep slate
   ink (#1E293B), white cards with a 24px radius and a gentle soft lift, fully rounded
   pill buttons and chips, and one confident amber accent. The accent is the app's own
   pack variables: var(--amber) fills, with var(--on-amber) (dark brown) as its paired
   on-accent ink, so every pack recolours its own earned badges, selection glows and
   primary pills. Uncollected and locked items stay neutral grey silhouettes.

   Load order: link this LAST, after experience.css, so its light-chrome rules win over
   the darker in-game defaults in main.css / scrapbook.css / certificate.css / rewards.css.

   Scope: keyed on each real component root (.bestiary, .dex-card, .badges-card,
   .inventory, .scrapbook, .memory-panel, .certificate-panel) and on the in-game
   #screen host via :has(); none of these ever carry the platform ".platform-screen"
   class, so the platform front door is untouched. Additive and reversible: it only
   overrides colour, surface and shape on the screens named above.

   No em or en dashes anywhere in this file. */

/* ============================================================= *
 * 0. Shared Soft-Modernist tokens for every collection / keepsake root.
 *    Declared on each real root so a screen is styled whether or not it
 *    sits inside a specific theme wrapper.
 * ============================================================= */
.bestiary,
.inventory,
.scrapbook,
.memory-panel,
.certificate-panel,
.dex-card,
.badges-card {
  --c-surface: #F9F9F7;   /* warm off-white stage            */
  --c-variant: #F1F1EF;   /* faintly deeper neutral fill     */
  --c-card: #FFFFFF;       /* pure white card                 */
  --c-ink: #1E293B;        /* deep slate ink (body + titles)  */
  --c-muted: #64748B;      /* readable muted slate            */
  --c-hairline: #E2E8F0;   /* hairline outline                */
  --c-accent: var(--amber, #f5a623);
  --c-on-accent: var(--on-amber, #4a2e00);
  --c-accent-ink: #8A5A00; /* accent as readable text on white */
  --c-accent-soft: #FDF1DD;/* soft amber tint for chips + rings */
  --c-lift: 0 4px 20px rgba(0, 0, 0, 0.05);
  --c-radius: 24px;
  --c-radius-md: 16px;
  --c-pill: 9999px;
}

/* Light off-white page behind each panel-based keepsake screen, so no dark app
   surface bleeds around the light chrome (mirrors experience.css for the hub). */
#screen:has(.bestiary),
#screen:has(.inventory),
#screen:has(.scrapbook),
#screen:has(.memory-panel),
#screen:has(.certificate-panel) {
  background: #F9F9F7;
}

/* Shared type: slate ink titles + names, muted slate notes, dark ink body. */
.bestiary .panel-title,
.inventory .panel-title,
.inventory .panel-sub,
.scrapbook .panel-title,
.memory-panel .panel-title,
.certificate-panel .panel-title,
.certificate-panel .panel-sub,
.dex-card .panel-title,
.badges-card .panel-title {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.bestiary .panel-note,
.inventory .panel-note,
.inventory .empty-note,
.scrapbook .panel-note,
.memory-panel .panel-note,
.certificate-panel .panel-note,
.dex-card .panel-note,
.badges-card .panel-note {
  color: var(--c-muted);
}

/* Shared buttons on the light pages: soften the heavy dark-surface shadows to a
   gentle lift, and turn the light-on-light .btn-small into a readable outline pill. */
#screen:has(.bestiary) .btn-amber,
#screen:has(.inventory) .btn-amber,
#screen:has(.scrapbook) .btn-amber,
#screen:has(.memory-panel) .btn-amber,
#screen:has(.certificate-panel) .btn-amber,
.dex-card .btn-amber,
.badges-card .btn-amber {
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 12px 26px rgba(245, 158, 11, 0.26);
}
#screen:has(.bestiary) .btn-small,
#screen:has(.inventory) .btn-small,
#screen:has(.scrapbook) .btn-small,
#screen:has(.memory-panel) .btn-small,
#screen:has(.certificate-panel) .btn-small,
.dex-card .btn-small,
.badges-card .btn-small {
  background: #FFFFFF;
  color: var(--c-ink);
  border: 1.5px solid var(--c-hairline);
  box-shadow: 0 1px 2px rgba(26, 28, 27, 0.04);
}
#screen:has(.bestiary) .btn-small:hover,
#screen:has(.inventory) .btn-small:hover,
#screen:has(.scrapbook) .btn-small:hover,
#screen:has(.memory-panel) .btn-small:hover,
#screen:has(.certificate-panel) .btn-small:hover,
.dex-card .btn-small:hover,
.badges-card .btn-small:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* Light selects on the keepsake screens (photo / chapter pickers). */
.scrapbook select,
.memory-panel .cert-photo-select,
.memory-panel select,
.certificate-panel .cert-photo-select,
.certificate-panel select {
  background: #FFFFFF;
  color: var(--c-ink);
  border: 1.5px solid var(--c-hairline);
  border-radius: 14px;
  min-height: 48px;
}
.scrapbook select:focus,
.memory-panel select:focus,
.certificate-panel select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

/* ============================================================= *
 * 1. CREATURE COLLECTION  ~  the dex (collection.js overlay) + the Bestiary.
 *    Root: .overlay-card.dex-card  /  .bestiary
 *    Collected = full colour card; uncollected = neutral grey locked silhouette;
 *    a soft amber caught-count chip heads the grid.
 * ============================================================= */

/* --- 1a. The dex overlay card, relit as a light bottom-sheet style modal. --- */
.overlay-card.dex-card,
.overlay-card.badges-card {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  box-shadow: 0 1px 3px rgba(26, 28, 27, 0.06), 0 24px 60px rgba(26, 28, 27, 0.22);
}
.dex-card .menu-header,
.badges-card .menu-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-hairline);
}
.dex-card .menu-close,
.badges-card .menu-close {
  background: #FFFFFF;
  border: 1.5px solid var(--c-hairline);
  color: var(--c-ink);
  border-radius: var(--c-pill);
}
.dex-card .menu-close:hover,
.dex-card .menu-close:focus-visible,
.badges-card .menu-close:hover,
.badges-card .menu-close:focus-visible {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* Caught-count line becomes a soft amber pill chip ("X of Y creatures collected"). */
.dex-body > .panel-note {
  display: inline-block;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  font-weight: 700;
  border-radius: var(--c-pill);
  padding: 0.34rem 0.85rem;
  margin-bottom: 0.4rem;
}

/* The dex grid of creatures. */
.dex-grid { gap: 12px; margin-top: 10px; }
.dex-cell {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius-md);
  padding: 14px 8px;
  box-shadow: var(--c-lift);
  opacity: 1;                 /* uncollected reads via colour, not fade */
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
/* Uncollected = neutral grey silhouette (shows a ? glyph and ??? name). */
.dex-cell:not(.has) {
  background: var(--c-variant);
  border-color: var(--c-hairline);
  box-shadow: none;
  color: #94A3B8;
}
.dex-cell:not(.has) .dex-emoji { color: #94A3B8; filter: grayscale(1); opacity: 0.7; }
.dex-cell:not(.has) .dex-name { color: #94A3B8; }
/* Collected = full colour, keyed by the creature rarity colour ring. */
.dex-cell.has {
  border-color: var(--c-hairline);
  box-shadow: inset 0 0 0 2px var(--rar, var(--c-accent)), var(--c-lift);
  cursor: pointer;
}
.dex-cell.has:hover,
.dex-cell.has:focus-visible {
  transform: translateY(-2px);
  border-color: var(--c-accent);
}
.dex-emoji { font-size: 32px; line-height: 1; }
.dex-name { color: var(--c-ink); font-family: var(--font-head); font-weight: 700; font-size: 12px; margin-top: 4px; }
.dex-rar {
  color: var(--rar, var(--c-accent-ink));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- 1b. The Bestiary panel: a grid of full-art creature cards. --- */
.bestiary { max-width: 760px; margin: 0 auto; }
.bestiary-grid { gap: 14px; margin-top: 12px; }
.bestiary-card {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius);
  overflow: hidden;
  box-shadow: var(--c-lift);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.bestiary-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-accent);
  box-shadow: 0 2px 6px rgba(26, 28, 27, 0.06), 0 22px 44px rgba(245, 158, 11, 0.14);
}
.bestiary-art { background: var(--c-variant); }
.bestiary-art-empty {
  background: var(--c-variant);
  color: #94A3B8;
  font-family: var(--font-head);
}
.bestiary-body { padding: 12px 14px 14px; }
.bestiary-name { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; color: var(--c-ink); font-size: 17px; }
.bestiary-desc { color: #3F3A33; opacity: 1; margin-top: 4px; }
.bestiary-empty { color: var(--c-muted); opacity: 1; }
/* Lore reveal: a quiet accent outline pill on the light card. */
.bestiary-lore-btn {
  border: 1.5px solid var(--c-hairline);
  background: #FFFFFF;
  color: var(--c-accent-ink);
  border-radius: var(--c-pill);
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  font-weight: 700;
}
.bestiary-lore-btn:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.bestiary-lore { color: #3F3A33; opacity: 1; }

/* ============================================================= *
 * 2. CREATURE DETAIL  ~  the encounter / detail card (collection.js .dex-encounter).
 *    A light detail card with the creature art glyph, name and rarity, plus a
 *    "Found at / where seen" note when present. Accent framed on catch.
 * ============================================================= */
.dex-encounter {
  background: var(--c-card);
  border: 2px solid var(--rar, var(--c-accent));
  border-radius: var(--c-radius);
  padding: 16px;
  margin-top: 10px;
  box-shadow: var(--c-lift);
  text-align: center;
}
.dex-enc-emoji { font-size: 58px; line-height: 1; }
.dex-enc-title { font-family: var(--font-head); font-weight: 800; color: var(--c-ink); margin: 8px 0 2px; }
.dex-enc-rar { color: var(--rar, var(--c-accent-ink)); font-weight: 700; font-size: 12px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================= *
 * 3. INVENTORY  ~  runes, the Rune Staff, relics and treasure (inventory.js).
 *    Root: .inventory  |  grid of item tiles, collected in colour, locked grey.
 * ============================================================= */
.inventory { max-width: 760px; margin: 0 auto; }
.inventory .help-row { align-items: center; }

/* Runes: white tiles, an amber ring when found, neutral grey when not yet. */
.inv-rune {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-lift);
  padding: 14px 8px;
}
.inv-rune.locked {
  background: var(--c-variant);
  border-color: var(--c-hairline);
  box-shadow: none;
  opacity: 1;
}
.inv-rune.locked .rune-glyph,
.inv-rune.locked .rune-glyph-char { color: #94A3B8; }
.inv-rune.locked .rune-name { color: #94A3B8; }
.inv-rune.has {
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 2px var(--c-accent-soft), var(--c-lift);
}
.rune-glyph, .rune-glyph-char { color: var(--c-accent-ink); }
.rune-name { font-family: var(--font-head); font-weight: 700; color: var(--c-ink); }
.rune-meaning { color: var(--c-muted); }

/* The Rune Staff progress card. */
.inv-staff {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius);
  box-shadow: var(--c-lift);
  padding: 16px;
}
.inv-staff.lit { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft), var(--c-lift); }
.staff-title { font-family: var(--font-head); font-weight: 700; color: var(--c-ink); }
.staff-note { color: var(--c-muted); }
.staff-bar {
  height: 12px;
  background: var(--c-hairline);
  border-radius: var(--c-pill);
  overflow: hidden;
  margin: 8px 0 2px;
}
.staff-fill { height: 100%; background: var(--c-accent); border-radius: var(--c-pill); }

/* Relics: item tiles, earned in accent, locked neutral grey. */
.inv-relic {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-lift);
  padding: 14px;
  text-align: center;
}
.inv-relic.locked {
  background: var(--c-variant);
  border-color: var(--c-hairline);
  box-shadow: none;
  opacity: 1;
}
.inv-relic.locked .relic-name,
.inv-relic.locked .relic-norse { color: #94A3B8; }
.inv-relic.locked .relic-img { filter: grayscale(1); opacity: 0.55; }
.inv-relic.has { border-color: var(--c-accent); box-shadow: inset 0 0 0 2px var(--c-accent-soft), var(--c-lift); }
.relic-name { font-family: var(--font-head); font-weight: 700; color: var(--c-ink); }
.relic-norse { color: var(--c-muted); }
.relic-status { color: var(--c-accent-ink); font-weight: 700; }

/* Treasure counters (Troll Points, Viking Coins). */
.inv-coin {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-lift);
  padding: 16px;
}
.coin-amount { font-family: var(--font-head); font-weight: 800; color: var(--c-accent-ink); }
.coin-name { color: var(--c-muted); }

/* ============================================================= *
 * 4. ACHIEVEMENTS  ~  the Badges grid (achievements.js overlay + rewards.css tiles).
 *    Earned = accent tile; locked = neutral grey with a "Locked" hint.
 * ============================================================= */

/* Main Badges overlay ("Your badges"). */
.badges-grid { gap: 12px; margin-top: 12px; }
.badge {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-lift);
  padding: 16px 10px;
}
.badge.earned {
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 2px var(--c-accent-soft), var(--c-lift);
}
/* The earned badge glyph rides in an accent disc, as in the mock. */
.badge.earned .badge-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.badge.locked {
  background: var(--c-variant);
  border-color: var(--c-hairline);
  box-shadow: none;
  opacity: 1;
}
.badge.locked .badge-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #E5E7EB;
  color: #94A3B8;
  filter: grayscale(1);
}
.badge-label { font-family: var(--font-head); font-weight: 700; color: var(--c-ink); margin-top: 6px; }
.badge.locked .badge-label { color: #94A3B8; }
.badge-hint { color: var(--c-muted); }
.badge.earned .badge-hint { color: var(--c-accent-ink); font-weight: 600; }
/* A neutral "Locked" pill under a locked badge hint. */
.badge.locked .badge-hint {
  display: inline-block;
  background: #E5E7EB;
  color: #64748B;
  border-radius: var(--c-pill);
  padding: 0.16rem 0.6rem;
  font-weight: 600;
}

/* Trophy-room badge tiles (rewards.css .reward-badge*): the same light badge grid,
   self-contained white tiles so they read on any surface. Earned in accent art,
   locked neutral grey. */
.reward-badge {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 0.7rem 0.5rem;
}
.reward-badge-label { color: #1E293B; font-weight: 700; }
.reward-badge.locked {
  background: #F1F1EF;
  opacity: 1;
  filter: none;
}
.reward-badge.locked .reward-badge-art { filter: grayscale(1); opacity: 0.5; }
.reward-badge.locked .reward-badge-label { color: #94A3B8; }

/* ============================================================= *
 * 5. SCRAPBOOK / JOURNAL  ~  "Our Journey" (scrapbook.js) + Memory keepsakes.
 *    A warm page of white snapshot cards with dark captions.
 * ============================================================= */
.scrapbook { max-width: 760px; margin: 0 auto; }
.scrapbook-empty {
  background: var(--c-card);
  color: var(--c-muted);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-lift);
}
.scrapbook-grid { gap: 14px; }
.scrap-cell {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-lift);
  overflow: hidden;
  padding-bottom: 6px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.scrap-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(26, 28, 27, 0.07), 0 22px 44px rgba(26, 28, 27, 0.1);
}
.scrap-cap {
  color: var(--c-ink);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 10px 4px;
}
.scrap-caption-btn {
  margin: 0 10px;
  width: calc(100% - 20px);
  min-height: 40px;
}

/* Memory keepsakes hub (collage, then and now, saga reel). */
.memory-panel { max-width: 640px; margin: 0 auto; }
.memory-card {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius);
  box-shadow: var(--c-lift);
  padding: 16px;
}
.memory-card-title { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; color: var(--c-ink); }
.memory-empty { color: var(--c-muted); opacity: 1; }
.saga-reel-canvas {
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-lift);
  background: #0F172A; /* the reel itself is a dark cinema stage, kept intentionally */
}

/* ============================================================= *
 * 6. FINISH CERTIFICATE  ~  the certificate chooser (certificate.js).
 *    The certificate art is drawn on a Canvas and exported; this panel is the
 *    chooser, dressed here as a celebratory light certificate card.
 * ============================================================= */
.certificate-panel { max-width: 640px; margin: 0 auto; }
.certificate-panel .cert-group {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--c-radius);
  /* A faint inner rule evokes the mock's double-bordered certificate frame. */
  box-shadow: inset 0 0 0 1px #F0E6D2, var(--c-lift);
  padding: 20px;
  text-align: center;
  align-items: center;
}
.certificate-panel .panel-sub {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--c-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
}
/* Nudge the standing note to read as the accent eyebrow above the card. */
.certificate-panel > .panel-note { color: var(--c-accent-ink); font-weight: 700; }
.certificate-panel .btn-amber { align-self: center; width: 100%; max-width: 360px; }
.cert-label { color: var(--c-muted); }
.cert-photo-select {
  background: #FFFFFF;
  color: var(--c-ink);
  border: 1.5px solid var(--c-hairline);
  border-radius: 14px;
}

/* ============================================================= *
 * 7. Motion safety: pin the light-chrome hover lifts for reduced motion.
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .dex-cell,
  .bestiary-card,
  .scrap-cell { transition: none !important; }
  .dex-cell.has:hover,
  .bestiary-card:hover,
  .scrap-cell:hover { transform: none !important; }
}
body.reduce-motion .dex-cell,
body.reduce-motion .bestiary-card,
body.reduce-motion .scrap-cell { transition: none !important; }