/* Local palette: one-off colors for the Curio Cabinet, named by role. Global tokens live in style.css. */
:root {
  --cc-plank: #b07a4a;      /* the shelf board under each line of curios (same wood as the trophy shelf) */
  --cc-back: #fff8ec;       /* the cabinet's back panel */
  --cc-lit-back: #fff3c4;   /* the back panel under a lamp */
}

/* The Curio Cabinet (src/services/curio.js cabinetCard), at the top of /collection. */
.curio-keeper { margin-bottom: 14px; }
.curio-shelves { display: grid; gap: var(--gap); }
@media (min-width: 1000px) { .curio-shelves { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.curio-shelf {
  position: relative; padding: 12px 12px 10px; border: 2px solid var(--ink); border-radius: var(--r-tile);
  background: var(--cc-back); box-shadow: var(--shadow-sm);
}
/* Each shelf is a fold: the plaque is the tap target, the pieces show once it opens. The arrow sits top right. */
.curio-plaque { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; text-align: center; padding-inline: 32px; list-style: none; cursor: pointer; }
.curio-plaque::-webkit-details-marker { display: none; }
.curio-plaque::after { content: '▾'; position: absolute; top: 10px; right: 12px; font-size: 1.1rem; color: var(--grape); transition: rotate .15s; }
.curio-shelf:not([open]) .curio-plaque::after { rotate: -90deg; }
.curio-shelf.is-lit .curio-plaque::after { top: 54px; }
.curio-shelf[open] .curio-plaque { margin-bottom: 10px; }
.curio-plaque:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: var(--r-sm); box-shadow: 0 0 0 10px var(--sky); }
.curio-plaque h3 { margin: 0; width: 100%; font-size: 1.15rem; }
.curio-plaque small { color: var(--muted); font: 600 var(--fs-xs) var(--body); }
@media (prefers-reduced-motion: reduce) { .curio-plaque::after { transition: none; } }
/* One plank under every line of curios: each line is 64px tall and the board is its bottom 8px. */
.curio-row {
  list-style: none; margin: 0 0 8px; padding: 0 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px;
  background: repeating-linear-gradient(transparent 0 56px, var(--cc-plank) 56px 64px);
  border-radius: var(--r-sm);
}
.curio-row li { height: 64px; display: grid; place-items: end center; padding-bottom: 6px; }
.curio-row svg { width: 52px; height: 52px; display: block; }
.curio-row .is-gap svg { filter: brightness(0) opacity(.2); } /* not found yet: a silhouette, like a locked trophy */
.curio-shelf .stat-bar { display: block; width: 100%; margin-top: 4px; }
.curio-where { margin: 6px 0 0; font-size: var(--fs-sm); text-align: center; }

/* A full shelf: Barnaby's lamp hangs over it and the pieces glow. */
.curio-shelf.is-lit { padding-top: 56px; background: linear-gradient(var(--cc-lit-back), var(--cc-back) 70%); box-shadow: 0 0 0 3px var(--sun-glow), 0 0 22px 4px var(--sun-glow), var(--shadow-sm); }
.curio-lamp { position: absolute; top: 0; left: 50%; translate: -50% 0; pointer-events: none; line-height: 0; }
.curio-lamp .twinkle { transform-box: fill-box; transform-origin: 50% 50%; animation: scene-twinkle 1.8s ease-in-out infinite alternate; }
.curio-shelf.is-lit .is-here svg { filter: drop-shadow(0 0 6px var(--sun-glow)); }

@media (max-width: 767px) {
  .curio-row { background: repeating-linear-gradient(transparent 0 50px, var(--cc-plank) 50px 56px); }
  .curio-row li { height: 56px; }
  .curio-row svg { width: 44px; height: 44px; }
}

/* The Collection page (src/routes/collections.js /collection): one tappable row per album, log or shelf. */
.coll-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .coll-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.coll-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px;
  border: 2px solid var(--ink); border-radius: var(--r-tile); background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .coll-row:hover { box-shadow: var(--shadow-lift); background: var(--hi-soft); } }
.coll-row.is-done { background: var(--ok-bg); }
.coll-art { line-height: 0; }
.coll-art svg { width: 48px; height: 48px; }
.coll-text { display: grid; gap: 6px; min-width: 0; }
.coll-text b { font: 600 1rem/1.2 var(--display); }
.coll-how { margin-top: -4px; font-size: var(--fs-sm); line-height: 1.3; color: var(--muted); } /* where the row's pieces come from (collections.js HOW) */
.coll-text .stat-bar { display: block; }
.coll-row .pill { white-space: nowrap; }