/* Set collections on the original album sprites (collection-1_v174): set name over the header_framer_big bar
   with the paging arrows, a thin n/8 progress bar, the compact gem reward row (reward_gems icon, lock_small
   padlock), art-only card tiles in their rarity frames inside album_set_frame. */

.collections-screen {
  background:
    linear-gradient(180deg, rgba(27, 29, 31, .9) 0%, rgba(40, 30, 20, .7) 50%, rgba(27, 29, 31, .92) 100%),
    url('/assets/bg/horizon-sunset.jpg') center 45% / cover no-repeat,
    var(--bg);
}
.set-header { display: flex; align-items: center; gap: 12px; padding: 14px 12px 0; }
.set-header .set-arrow { flex: none; width: 92px; height: 64px; margin: 0; }
.set-header .set-arrow img { width: 46%; height: 60%; }
.set-title, .set-title.plate {
  flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 16px;
  height: 92px; padding: 6px 16px 34px;
  border: 0; border-image: none;
  background: url('/assets/orig/ui/header_framer_big.png') center bottom / 100% 54px no-repeat;
}
.set-name { font-size: 40px; font-weight: var(--fw-bold); color: var(--headline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 2px rgba(0, 0, 0, .8); }
.set-index { font-size: 24px; color: var(--muted); font-weight: var(--fw-light); }
.set-progress-wrap { padding: 0 30px 10px; }
/* thin green bar with the small "n/8" (collection-1_v174) */
.set-progress.bar, .bar.set-progress { height: 22px; min-height: 0; }
.set-progress .bar-label { font-size: 17px; font-weight: var(--fw-bold); color: var(--c-hp); }
.set-progress.complete .bar-label { color: var(--c-star); }
/* compact reward row: "Reward:" over "4600 Gems" on the left, the gem tile (padlock) on the right */
.set-reward {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 16px 14px; padding: 16px 26px; min-height: 0;
}
.set-reward.panel { border-radius: 4px; }
.set-reward.complete::after {
  content: ''; position: absolute; inset: -6px; pointer-events: none;
  border: 24px solid transparent;
  border-image: url('/assets/orig/ui/frames/glowgold.png') 26 / 24px stretch;
}
.reward-text { display: flex; flex-direction: column; gap: 2px; }
.reward-label { font-size: 30px; font-weight: var(--fw-light); color: var(--text); text-shadow: 0 2px 2px rgba(0, 0, 0, .8); }
.reward-value { font-size: 40px; font-weight: var(--fw-light); color: var(--text); white-space: nowrap; text-shadow: 0 2px 2px rgba(0, 0, 0, .8); }
.reward-box {
  position: relative; width: 110px; height: 110px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 5px solid transparent;
  border-image: url('/assets/orig/ui/frames/ironframe.png') 10 / 10px stretch;
  background: rgba(8, 9, 10, .8); background-clip: padding-box;
}
.reward-box img { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .9)); }
.reward-box img.icon[src$="/gem.svg"] { content: url('/assets/orig/ui/reward_gems.png'); }
.reward-box.locked img.lock { position: absolute; width: 48px; height: 70px; opacity: .95; }
.reward-box.locked img:not(.lock) { opacity: .45; }
.reward-box.claimed { flex-direction: column; gap: 4px; color: var(--c-gem); font-size: 16px; font-weight: var(--fw-bold); }
.reward-box.claimed img { width: 56px; height: 56px; }
.claim-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.claim-glow { position: absolute; width: 230px; height: 160px; object-fit: fill; opacity: .9; pointer-events: none; animation: claimGlow 1.8s ease-in-out infinite; }
@keyframes claimGlow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .95; transform: scale(1.06); } }
.claim-btn { position: relative; margin: 0; min-width: 160px; }
.claim-btn img { width: 36px; height: 26px; object-fit: contain; }
.reward-box img.sprite { width: 84px; height: 60px; }
.reward-box.claimed img.sprite { width: 64px; height: 44px; }
.set-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px;
  margin: 0 12px 24px; padding: 14px 8px;
  border: 12px solid transparent;
  border-image: url('/assets/orig/ui/album_set_frame.png') 24 fill / 20px stretch;
  background: none;
}
.set-tile { display: flex; justify-content: center; }
/* a card the album shows for the first time (shop.albumNewCards): one golden flash */
.set-tile.new .album-card { animation: album-new 1.6s ease-out 1; }
@keyframes album-new { 0% { filter: brightness(2.2); box-shadow: 0 0 28px 8px rgba(255, 214, 102, 0.9); } 100% { filter: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .set-tile.new .album-card { animation: none; } }
/* art-only album card in its rarity frame; locked = grey art under the padlock */
.album-card {
  position: relative; width: 150px; height: 216px; padding: 0;
  border: 4px solid var(--frame); border-radius: 6px; overflow: hidden;
  background: #0a0b0c; box-shadow: 0 3px 8px rgba(0, 0, 0, .7);
  cursor: pointer; transition: transform var(--t-fast);
}
.album-card::before { display: none; }
.album-card:active { transform: scale(.97); }
.album-card .album-art { position: absolute; inset: 0; }
.album-card .album-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-card.locked .album-art img { filter: grayscale(1) brightness(.75) contrast(.95); }
.album-card.locked:not(.has-pieces)::after {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/orig/ui/lock_big.png') center / 62% auto no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .8));
}
.album-card .card-pieces { position: absolute; inset: 0; }
.collections-screen .empty-panel { margin: 40px 20px; padding: 20px; }