/* Approved collection grid, illustrated title badges and ukiyo-e chronicle. */
#screen[data-route="collection"]{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.collection-header{flex-shrink:0;background:var(--bg)}
.collection-header .section-heading{margin:0 0 8px;min-height:40px}
.collection-header .eyebrow{display:none}
.collection-header h1{font-size:22px}
.collection-header .count{font-size:16px;color:var(--muted)}
.collection-header .tabs{margin:0}
.collection-header .tabs button{min-height:44px;text-transform:uppercase;font-size:10px}
.collection-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding:12px 0 18px;outline-offset:-2px}
.collection-scroll .filters{margin-bottom:12px}
.collection-scroll .search input,.collection-scroll select{font-size:11px}
.collection-scroll .item-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.collection-group-heading{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:13px 0 3px;color:var(--muted);font-size:11px}
.collection-group-heading h2{font-size:13px;text-transform:uppercase;color:var(--text)}
.collection-scroll .item-card{padding:8px 5px;text-align:center;align-items:center;border-radius:10px;min-height:155px}
.collection-scroll .item-card strong{font-size:10px;min-height:30px}
.collection-scroll .item-card .rarity{order:3;font-size:9px;margin:4px 0}
.collection-scroll .item-card small{font-size:9px}
.collection-scroll .item-card .placeholder-art,.collection-scroll .item-card .sprite-art,.collection-scroll .item-art{height:85px}
.collection-scroll .sprite-art>span{transform:scale(.86)}
.sprite-oni{background-position:-25px -254px}
.sprite-headphones{background-position:-25px -590px}
.collection-scroll .item-card:has(.item-state .icon path[d^="m4 12"]){border-color:var(--rarity)}
.collection-intro{color:var(--muted);font-size:11px;margin:0 0 12px}
.illustrated-title{min-height:84px;border:1px solid color-mix(in srgb,var(--title-color) 60%,#222);border-radius:4px 14px;background:linear-gradient(105deg,color-mix(in srgb,var(--title-color) 12%,#08090b),#08090b);padding:8px;gap:10px;box-shadow:inset 0 0 0 3px #08090b,inset 0 0 0 4px color-mix(in srgb,var(--title-color) 25%,#111)}
.illustrated-title.locked{filter:grayscale(1)}
.illustrated-title strong{font-size:13px;text-transform:uppercase;font-weight:600;line-height:1.5}
.illustrated-title small{font-size:10px;color:var(--title-color)}
.illustrated-title>.title-medallion{width:64px;height:64px;flex-shrink:0;padding:0;border:0;background-image:url('./design-assets/titles-reference.png');background-size:393px 852px;border-radius:50%}
.medallion-0{background-position:-23px -252px}
.medallion-1{background-position:-23px -341px}
.medallion-2{background-position:-23px -437px}
.chronicle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chronicle-card{padding:0;text-align:left;overflow:hidden;border:1px solid #444134;border-radius:6px;background:#090d10;color:var(--text)}
.chronicle-card.obtained{border-color:#a07c3b}
.chronicle-art{display:block;width:100%;aspect-ratio:1.2;background-image:url('./design-assets/chronicle-reference.png');background-repeat:no-repeat}
.chronicle-collector{background-size:768% 853.333%;background-position:3.74% 83.2%}
.chronicle-journey{aspect-ratio:200/130;background-size:768% 787.692%;background-position:19.16% 61.521%}
.title-detail-banner{display:flex;align-items:center;justify-content:center;margin:20px 0;padding:20px;min-height:120px}
.chronicle-copy{display:block;padding:10px}
.chronicle-copy strong{display:block;font-size:12px;text-transform:uppercase;line-height:1.5}
.chronicle-copy small{display:block;font-size:9px;color:var(--muted);margin-top:5px;line-height:1.5}
.chronicle-copy .progress{display:block;margin-top:10px}
.chronicle-copy .progress i{background:var(--red)}
.chronicle-status{display:block;font-size:10px;color:var(--muted);margin-top:7px}
.chronicle-detail{max-width:260px;margin:0 auto 20px;border-radius:8px}
dialog:has(.detail) .detail{border-radius:50% 50% 14px 14px;background:radial-gradient(ellipse at 50% 28%,color-mix(in srgb,var(--rarity) 16%,transparent),transparent 67%)}
dialog:has(.detail) .detail.locked{filter:grayscale(1)}
@media(max-width:350px){.collection-scroll .item-grid{gap:6px}.collection-scroll .item-card{padding:7px 3px}.collection-scroll .sprite-art>span{transform:scale(.7)}.illustrated-title strong{font-size:11px}.illustrated-title>.title-medallion{width:54px;height:54px}}