/* Sweet Shift Saga v4.5.0.1 — Card Collection visual refinement */

:root {
  --cc-purple:#8a56c6;
  --cc-purple-dark:#5b368e;
  --cc-pink:#ef5aac;
  --cc-pink-dark:#b2357f;
  --cc-gold:#ffd96f;
  --cc-gold-dark:#d28e22;
  --cc-cream:#fff8ef;
  --cc-cream-2:#fff2dd;
  --cc-line:#f0d8f0;
  --cc-ink:#6d4b78;
  --cc-soft:#9b81a2;
  --cc-shadow:0 8px 0 rgba(115,62,126,.22),0 16px 24px rgba(82,50,92,.12);
}

#screen-map.active #map-cards-btn {
  background:linear-gradient(180deg,#66c1eb,#3a83cd) !important;
  --map-ui-shadow:#245f98;
}
#screen-map.active .map-card-progress {
  border-radius:10px !important;
  background:linear-gradient(180deg,#fff0aa,#f0a930) !important;
  box-shadow:0 3px 0 #a76517 !important;
}

.card-collection-screen {
  min-height:100svh;
  padding:0 0 70px;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.56), transparent 20%),
    radial-gradient(circle at 90% 18%, rgba(255,215,241,.45), transparent 21%),
    linear-gradient(180deg,#f4d4ef 0%, #efd7f6 28%, #efe9ff 58%, #f7f0ff 100%);
  color:var(--cc-ink);
}

.card-collection-topbar {
  position:sticky;
  top:0;
  z-index:20;
  min-height:92px;
  grid-template-columns:60px 1fr auto;
  gap:14px;
  padding:14px 18px 12px;
  background:linear-gradient(180deg, rgba(255,246,252,.96), rgba(255,239,248,.94));
  border-bottom:0;
  box-shadow:0 7px 0 rgba(168,112,186,.14),0 18px 28px rgba(95,52,108,.12);
}
.card-collection-topbar::after {
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.9), rgba(255,255,255,.55));
}
.cards-back-button,
.card-tab,
.album-overview-actions button,
.vault-overview button,
.duplicate-vault-panel button,
.card-shop-pack button,
.owned-card-pack button,
.card-special-offers button,
.album-reward-step button,
.archive-card-grid .album-card-slot.missing button,
.inventory-card-pack-stack button,
.archive-completion-claim,
.profile-card-collection button,
.card-pack-done,
.card-detail-close {
  border:3px solid #fff !important;
  font-weight:1000 !important;
  letter-spacing:.01em;
}
.cards-back-button,
.card-detail-close {
  display:grid;
  place-items:center;
  border-radius:18px !important;
  background:linear-gradient(180deg,var(--cc-purple) 0%, var(--cc-purple-dark) 100%) !important;
  box-shadow:0 5px 0 #43296e,0 11px 16px rgba(67,41,110,.16) !important;
}
.cards-back-button:active,
.card-detail-close:active,
.card-tab:active,
.card-shop-pack button:active,
.owned-card-pack button:active,
.album-overview-actions button:active,
.inventory-card-pack-stack button:active,
.card-pack-done:active {
  transform:translateY(2px);
}

.card-album-title-block small,
.card-panel > header small,
.album-overview-copy > small,
.card-list-head small,
.card-packs-head small,
.album-rewards-intro small,
.exclusive-intro small,
.archive-intro small,
.completion-reward-copy small,
.card-pack-opening-head small {
  color:#d25396 !important;
  text-shadow:none;
}
.card-album-title-block h1,
.album-overview-copy h2,
.card-list-head h2,
.card-packs-head h2,
.album-rewards-intro h2,
.exclusive-intro h2,
.archive-intro h2,
.card-detail-copy h2 {
  color:#6a4278 !important;
}
.card-album-title-block span,
.album-overview-copy p,
.card-list-head p,
.card-packs-head p,
.album-rewards-intro p,
.exclusive-intro p,
.archive-intro p,
.vault-overview p,
.duplicate-vault-panel p,
.completion-reward-copy p,
.card-detail-copy p,
.card-detail-copy > small,
.recent-card-row small,
.owned-card-pack small,
.card-shop-pack small,
.card-special-offers article small {
  color:#8e7596 !important;
}

.card-album-progress-pill,
.pack-total,
.exclusive-intro > strong,
.album-rewards-intro > strong {
  min-height:56px;
  padding:8px 14px;
  border:3px solid #fff !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#fff5ca 0%, #ffd86a 100%) !important;
  color:#6c4b14 !important;
  box-shadow:0 5px 0 rgba(174,117,26,.55), 0 10px 16px rgba(98,74,34,.10) !important;
}
.card-album-progress-pill strong,
.pack-total strong,
.exclusive-intro > strong,
.album-rewards-intro > strong {
  font-size:1.05rem !important;
}

.card-collection-tabs {
  position:sticky;
  top:92px;
  z-index:18;
  display:grid;
  grid-template-columns:repeat(6, minmax(120px, 1fr));
  gap:8px;
  padding:12px 18px 0;
  background:transparent;
  border:0;
  overflow-x:auto;
}
.card-tab {
  min-height:44px;
  padding:8px 12px;
  border-radius:14px !important;
  background:linear-gradient(180deg,#fff7fd 0%, #f4e6f8 100%) !important;
  color:#7a5c82 !important;
  box-shadow:0 4px 0 rgba(117,88,126,.24), 0 10px 16px rgba(101,70,112,.08);
  text-align:center;
  white-space:nowrap;
}
.card-tab.active {
  background:linear-gradient(180deg,#ffefb5 0%, #ffd86f 100%) !important;
  color:#6b4919 !important;
  border-color:#fff !important;
  box-shadow:0 5px 0 rgba(168,113,26,.42), 0 10px 18px rgba(120,74,18,.12) !important;
}

.card-collection-content {
  width:min(1320px, calc(100vw - 34px));
  padding-top:16px;
}

.card-panel,
.card-overview-hero,
.album-rewards-intro,
.exclusive-intro,
.archive-intro,
.card-list-head,
.card-packs-head,
.completion-reward-copy,
.archive-album-list,
.archive-album-view,
.profile-card-collection {
  border:3px solid #fff !important;
  border-radius:24px !important;
  background:linear-gradient(180deg, var(--cc-cream) 0%, var(--cc-cream-2) 100%) !important;
  box-shadow:var(--cc-shadow) !important;
}
.card-panel {
  padding:16px;
}
.card-panel > header {
  margin-bottom:12px;
}
.card-panel > header strong {
  font-size:.86rem !important;
}

.card-overview-hero {
  min-height:280px;
  padding:26px;
  gap:24px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(135deg, #ffe5f2 0%, #f5ecff 56%, #e5f8ff 100%) !important;
}
.album-overview-stats {
  gap:10px;
}
.album-overview-stats span {
  min-width:126px;
  min-height:54px;
  padding:8px 12px;
  border:2px solid rgba(255,255,255,.85);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,254,.9));
  box-shadow:0 5px 0 rgba(132,93,141,.14);
}
.album-overview-actions button:first-child,
.card-special-offers button,
.album-reward-step.reached button,
.archive-completion-claim,
.card-pack-done {
  background:linear-gradient(180deg,var(--cc-pink) 0%, var(--cc-pink-dark) 100%) !important;
  box-shadow:0 4px 0 #7f285c, 0 10px 16px rgba(121,37,86,.15) !important;
  color:#fff !important;
}
.album-overview-actions button,
.vault-overview button,
.duplicate-vault-panel button,
.card-shop-pack button,
.owned-card-pack button,
.inventory-card-pack-stack button,
.profile-card-collection button {
  border-radius:12px !important;
  background:linear-gradient(180deg,var(--cc-purple) 0%, var(--cc-purple-dark) 100%) !important;
  box-shadow:0 4px 0 #4c2d77, 0 10px 16px rgba(76,45,119,.12) !important;
}
.vault-meter,
.album-category-row > div {
  height:12px !important;
  border-radius:999px !important;
  background:#eddff0 !important;
  box-shadow:inset 0 2px 4px rgba(97,60,104,.09);
}
.vault-meter i,
.album-category-row i,
.album-reward-line i {
  background:linear-gradient(90deg,var(--cc-pink) 0%, var(--cc-purple) 100%) !important;
}
.recent-card-row button,
.owned-card-pack,
.card-shop-pack,
.exclusive-card,
.archive-album-list button,
.album-reward-step,
.archive-card-grid .album-card-slot,
.card-special-offers article {
  border:2px solid #f0ddf0 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#fff 0%, #fff7fb 100%) !important;
  box-shadow:0 6px 16px rgba(89,55,99,.08);
}
.recent-card-row button:hover,
.owned-card-pack:hover,
.card-shop-pack:hover,
.album-card-slot.collected:hover,
.exclusive-card:hover,
.archive-album-list button:hover {
  transform:translateY(-2px);
}

.card-list-head,
.card-packs-head,
.album-rewards-intro,
.exclusive-intro,
.archive-intro {
  padding:18px 20px;
}
.card-list-filters {
  gap:7px;
}
.card-list-filters button {
  min-height:34px;
  padding:6px 11px;
  border:2px solid #fff !important;
  border-radius:12px;
  background:linear-gradient(180deg,#f8effa 0%, #efe0f4 100%);
  color:#7b5c82;
  box-shadow:0 4px 0 rgba(120,89,127,.18);
  font-weight:1000;
}
.card-list-filters button.active {
  border-color:#fff !important;
  background:linear-gradient(180deg,#ffd96f 0%, #efaf34 100%) !important;
  color:#6b4b16 !important;
  box-shadow:0 4px 0 rgba(159,106,20,.44) !important;
}

.album-card-grid {
  gap:11px;
}
.album-card-slot {
  min-height:224px;
  border:3px solid #fff !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,#fffdfd 0%, #fff0f7 100%) !important;
  box-shadow:0 8px 18px rgba(88,56,96,.10);
}
.album-card-slot.missing {
  background:linear-gradient(180deg,#f3edf6 0%, #ece4f1 100%) !important;
}
.album-card-art,
.album-card-back,
.exclusive-card-art,
.card-detail-art,
.pack-result-card > div {
  border:2px solid rgba(255,255,255,.92);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.72);
}
.album-card-number {
  color:#b08aad !important;
  font-size:.47rem !important;
}
.album-card-slot strong,
.exclusive-card strong,
.owned-card-pack strong,
.card-shop-pack strong,
.card-special-offers article strong,
.pack-result-card strong {
  color:#6a4771 !important;
}
.shiny-stamp {
  top:18px;
  right:-22px;
  padding:4px 28px;
  border-radius:999px;
  border:2px solid #fff;
  box-shadow:0 4px 10px rgba(76,43,82,.18);
}

.owned-card-packs,
.card-shop-grid {
  gap:11px;
}
.owned-card-pack,
.card-shop-pack {
  min-height:108px;
}
.card-shop-pack b,
.card-special-offers article > b,
.archive-album-view > header > strong {
  color:#9f6422 !important;
}
.card-pack-shop > header > span {
  padding:8px 11px;
  border-radius:12px;
  border:2px solid #fff;
  background:linear-gradient(180deg,#fff5c8,#ffd86f);
  color:#734d17;
  box-shadow:0 4px 0 rgba(172,118,24,.36);
}
.card-special-offers article {
  grid-template-columns:minmax(0,1fr) auto auto;
  padding:14px;
}
.card-special-offers article span {
  color:#7a5d81 !important;
}

.album-reward-track {
  gap:10px;
  padding:26px 10px 16px;
}
.album-reward-line {
  top:48px;
  left:58px;
  right:58px;
  height:10px;
  background:#ead9ef !important;
}
.album-reward-step {
  min-height:194px;
  padding:10px 8px;
  border:3px solid #fff !important;
}
.album-reward-step.reached {
  background:linear-gradient(180deg,#fff9e7 0%, #fff 100%) !important;
}
.album-reward-target {
  width:42px;
  height:42px;
  border:3px solid #fff !important;
  background:linear-gradient(180deg,#a67dd7 0%, #7447ad 100%) !important;
  box-shadow:0 4px 0 #55307f !important;
}
.album-reward-step.reached .album-reward-target {
  background:linear-gradient(180deg,var(--cc-pink) 0%, var(--cc-pink-dark) 100%) !important;
  box-shadow:0 4px 0 #8d3265 !important;
}
.completion-reward-copy {
  gap:16px;
  padding:18px;
  background:linear-gradient(135deg, #fff7cb 0%, #ffe7f7 50%, #f1e5ff 100%) !important;
}

.exclusive-card {
  min-height:258px;
  border:3px solid #fff !important;
}
.exclusive-card.locked {
  opacity:.88;
}
.archive-layout {
  gap:14px;
}
.archive-album-list,
.archive-album-view {
  padding:14px;
}
.archive-album-list button.active {
  border-color:#fff !important;
  background:linear-gradient(180deg,#fff5c8 0%, #ffe29a 100%) !important;
  box-shadow:0 4px 0 rgba(174,120,27,.28);
}
.archive-card-grid .album-card-slot.missing button {
  width:100%;
  margin-top:auto;
  border-radius:12px !important;
  background:linear-gradient(180deg,#f0a050 0%, #c96833 100%) !important;
  box-shadow:0 4px 0 #87441f !important;
}

.card-detail-panel,
.card-pack-opening {
  backdrop-filter:blur(8px);
}
.card-detail-card {
  border:3px solid #fff !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,#fffdfd 0%, #fff1f8 100%) !important;
  box-shadow:0 24px 50px rgba(26,13,32,.30);
}
.card-detail-rarity,
.card-detail-shiny,
.profile-album-badges span,
.card-pack-earned-result {
  border:2px solid #fff;
}
.card-detail-rarity {
  background:linear-gradient(180deg,#f6eef9 0%, #eadcf0 100%) !important;
}

.card-pack-opening {
  background:
    radial-gradient(circle at center, rgba(184,128,217,.50), rgba(55,27,70,.88)),
    linear-gradient(180deg, rgba(40,20,50,.66), rgba(19,8,25,.92));
}
.card-pack-opening-stage {
  width:min(1080px, 96vw);
  min-height:560px;
}
.card-pack-opening-head strong {
  font-size:1.3rem;
}
.card-pack-opening-art {
  width:156px;
  height:198px;
}
.card-pack-results {
  gap:12px;
}
.pack-result-card {
  width:156px;
  min-height:236px;
  border:3px solid #fff !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,#fffefb 0%, #fff0f8 100%) !important;
}
.pack-result-card > small {
  color:#c14d88 !important;
}
.pack-result-card.shiny {
  background:linear-gradient(145deg,#fff8b7 0%, #dffcff 52%, #f8ddff 100%) !important;
}
.card-pack-done {
  min-width:230px;
  min-height:52px;
  padding:9px 20px;
  border-radius:16px !important;
}

.profile-card-collection {
  border-radius:18px !important;
}
.inventory-card-pack-stack > span {
  width:58px;
  height:74px;
}
.inventory-card-pack-stack b {
  border:2px solid #fff !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#8f6acd 0%, #6a45a8 100%) !important;
  box-shadow:0 3px 0 #4c2d77;
}

@media (max-width: 1024px) {
  .card-collection-tabs {
    grid-template-columns:repeat(6, minmax(130px, 1fr));
  }
  .owned-card-packs,
  .card-shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .card-collection-content {
    width:calc(100vw - 16px);
  }
  .card-collection-topbar {
    min-height:76px;
    padding:10px 8px;
    grid-template-columns:48px 1fr auto;
    gap:8px;
  }
  .card-collection-tabs {
    top:76px;
    padding:10px 8px 0;
    display:flex;
    gap:7px;
  }
  .card-tab {
    min-width:max-content;
  }
  .card-overview-hero,
  .card-list-head,
  .card-packs-head,
  .album-rewards-intro,
  .exclusive-intro,
  .archive-intro,
  .completion-reward-copy,
  .card-panel,
  .archive-album-view,
  .archive-album-list,
  .profile-card-collection {
    border-radius:20px !important;
  }
  .album-overview-stats span {
    min-width:96px;
  }
  .album-card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}