/* Accepted night album: unframed figures, five collapsible families and occasional individual stars. */
.collection { overflow:auto; background:linear-gradient(155deg,#111b32,#26304b); color:#efddbb; }
.collection[hidden] { display:none; }
.collection-sheet { position:relative; isolation:isolate; width:100%; min-height:100%; min-width:0; padding:26px max(26px,calc((100% - 1260px)/2)) calc(110px + env(safe-area-inset-bottom)); }
.collection-sheet:focus {outline:none;}
.collection-sheet > * { position:relative; z-index:1; }
.collection-head { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:16px; }
.collection-head h2 { color:#f5e2b5; font:32px var(--font-display); margin:0 0 8px; }
.collection-count { margin:0; color:#c9c2af; }
.collection-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:30px; }
.collection-family { margin-bottom:12px; }
.collection-family summary { display:flex; justify-content:space-between; gap:8px; font:22px var(--font-display); cursor:pointer; padding:12px 0; border-bottom:1px solid #d6bd8140; }
.collection-family summary .ico { flex:none; align-self:center; }
.collection-family[open] summary .ico { transform:rotate(90deg); }
.collection-family summary span { flex:1; }
.collection-family summary small { font:14px var(--font-ui); align-self:center; color:#b5b8c6; }
.collection-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px 10px; }
.collection-kin { position:relative; min-width:0; border:0; background:transparent; padding:7px 2px 9px; color:inherit; text-align:center; font:inherit; cursor:pointer; }
#collection .collection-kin:disabled { opacity:1; filter:none; cursor:default; }
.collection-kin:not(:disabled):hover { background:#dfbd6a15; }
.collection-kin strong { display:block; font:18px var(--font-display); min-height:22px; overflow-wrap:anywhere; }
.collection-figure { width:100%; aspect-ratio:1; display:block; }
.collection-figure .kinfig { display:block; }
.collection-figure img { object-fit:contain; }
/* Darkness is baked into the unknown image. Only the optional affinity rim uses a filter. */
.collection-figure[data-shadow-art] > .kl-fig { filter:var(--rim); }
.collection-detail { border-left:1px solid #d6bd8133; padding-left:24px; align-self:start; position:sticky; top:0; text-align:center; min-width:0; }
.collection-detail .collection-figure { max-width:280px; margin:auto; }
.collection-avatar { width:100%; height:100%; object-fit:contain; }
.collection-name { color:#f5e2b5; font:28px var(--font-display); margin:0 0 8px; }
.collection-looks { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:15px 0; }
.collection-look { border:0; border-bottom:2px solid transparent; background:transparent; padding:7px 0; color:#c8bfad; font:inherit; cursor:pointer; }
.collection-look[aria-pressed=true] { border-color:#dbb66d; color:#f8db96; }
.collection-look:disabled { opacity:.5; cursor:default; }
.collection-hint,.collection-foot { font-size:14px; line-height:1.4; color:#c9c2af; }
.collection-foot { margin:24px 0 0; }
.collection-back { display:none; border:0; background:none; padding:0 0 16px; color:inherit; font:inherit; cursor:pointer; }
.collection-back .ico { vertical-align:middle; }
.collection button:focus-visible,.collection summary:focus-visible { outline:2px solid #edd08f; outline-offset:2px; }
@container play (min-width:1000px) { .collection-grid { grid-template-columns:repeat(8,minmax(0,1fr)); } }
@container play (max-width:760px) {
 .collection-sheet { padding:22px 12px calc(110px + env(safe-area-inset-bottom)); }
 .collection-head h2 { font-size:27px; }
 .collection-layout { display:block; }
 .collection-detail { display:none; position:static; border:0; padding:0; }
 .collection-layout.has-detail .collection-list { display:none; }
 .collection-layout.has-detail .collection-detail { display:block; }
 .collection-back { display:block; }
 .collection-grid { gap:4px; }
 .collection-kin strong { font-size:17px; }
 .collection-family summary { font-size:20px; }
 .collection-foot { margin-top:14px; }
}

.collection-sheet > .collection-stars { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; border-radius:inherit; }
.collection-stars canvas { display:block; }
.collection-spark { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--parchment); box-shadow:0 0 8px var(--gold-light); translate:-50% -50%; opacity:0; }