/* v4.5.1.1 — Sweetfolio professional polish */
#screen-cards .card-collection-topbar{
  background:linear-gradient(180deg,#dd4d9b 0%,#b1347e 58%,#972868 100%) !important;
}
#screen-cards .card-collection-tabs{
  background:linear-gradient(180deg,rgba(255,241,249,.97),rgba(244,232,252,.96)) !important;
}
#screen-cards .card-tab{
  box-shadow:0 4px 0 rgba(119,73,128,.22),0 10px 16px rgba(111,72,119,.06) !important;
}
#screen-cards .card-panel,
#screen-cards .card-overview-hero,
#screen-cards .card-list-head,
#screen-cards .card-packs-head,
#screen-cards .album-rewards-intro,
#screen-cards .exclusive-intro,
#screen-cards .archive-intro,
#screen-cards .completion-reward-copy,
#screen-cards .archive-album-list,
#screen-cards .archive-album-view{
  box-shadow:0 10px 0 rgba(147,88,135,.12),0 18px 28px rgba(86,53,98,.08) !important;
}
#screen-cards .album-card-slot,
#screen-cards .exclusive-card,
#screen-cards .owned-card-pack,
#screen-cards .card-shop-pack,
#screen-cards .album-reward-step{
  transition:transform .18s ease, box-shadow .18s ease !important;
}
#screen-cards button.album-card-slot:hover,
#screen-cards .owned-card-pack:hover,
#screen-cards .card-shop-pack:hover,
#screen-cards .album-reward-step:hover,
#screen-cards .exclusive-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 8px 0 rgba(132,85,140,.14),0 16px 24px rgba(83,51,92,.11) !important;
}
#screen-cards .album-card-slot{
  border:2px solid rgba(255,255,255,.92) !important;
  background:linear-gradient(180deg,#fffefc 0%,#fff5fa 100%) !important;
}
#screen-cards .album-card-slot.missing{
  background:linear-gradient(180deg,#fffefc 0%,#f8eff7 100%) !important;
}
#screen-cards .album-card-art,
#screen-cards .album-card-back{
  background:linear-gradient(180deg,#fff 0%,#fff4fc 100%) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.72) !important;
}
#screen-cards .card-packs-head{min-height:124px !important;}
#screen-cards .owned-card-packs,
#screen-cards .card-shop-grid{
  grid-template-columns:repeat(auto-fit,minmax(172px,1fr)) !important;
}
#screen-cards .owned-card-pack,
#screen-cards .card-shop-pack{
  border:2px solid #f0d8ea !important;
  background:linear-gradient(180deg,#fffefc 0%,#fff5fb 100%) !important;
}
#screen-cards .owned-card-pack{min-height:108px !important;}
#screen-cards .card-shop-pack{min-height:268px !important;}
#screen-cards .card-pack-earn .pack-earn-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
#screen-cards .card-pack-earn .pack-earn-rule{
  border:2px solid #f2dfef;
  border-radius:18px;
  padding:14px 14px 13px;
  background:linear-gradient(180deg,#fffefc 0%,#fff7ed 100%);
  box-shadow:0 5px 0 rgba(145,97,119,.08);
}
#screen-cards .card-pack-earn .pack-earn-rule strong{display:block;color:#6f426f;font-size:.68rem;margin-bottom:5px;}
#screen-cards .card-pack-earn .pack-earn-rule small{display:block;color:#c6448b;font-size:.47rem;font-weight:800;letter-spacing:.08em;margin-bottom:6px;}
#screen-cards .card-pack-earn .pack-earn-rule p{margin:0;color:#8c728c;line-height:1.35;}
#screen-cards .card-pack-earn .pack-earn-rule .pack-earn-meter{margin-top:10px;height:10px;border-radius:999px;background:#eedceb;overflow:hidden;}
#screen-cards .card-pack-earn .pack-earn-rule .pack-earn-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ff8db8,#ffc857);}
#screen-cards .card-pack-earn .pack-earn-rule .pack-earn-progress{margin-top:8px;display:block;color:#7a5e7a;font-size:.53rem;font-weight:700;}
#screen-cards .card-special-offers article{background:linear-gradient(90deg,#fff7d2,#ffeafd 58%,#eef5ff) !important;}
#screen-cards .card-pack-opening{backdrop-filter:blur(10px) !important;}
#screen-cards .card-pack-opening-stage{
  background:
    radial-gradient(circle at 14% 8%,rgba(255,255,255,.18),transparent 20%),
    radial-gradient(circle at 88% 18%,rgba(255,199,230,.16),transparent 22%),
    url('../assets/cards/frames/sweetfolio-wide-frame.png') center/100% 100% no-repeat !important;
}
#screen-cards .card-pack-opening-head{z-index:3 !important;}
#screen-cards .card-pack-opening-art{
  justify-self:center !important;
  width:150px !important;
  height:188px !important;
  transition:transform .52s cubic-bezier(.2,.85,.25,1.2), opacity .35s ease !important;
}
#screen-cards .card-pack-opening.opening .card-pack-opening-art{transform:scale(1.12) rotate(-6deg) !important;}
#screen-cards .card-pack-opening.opened .card-pack-opening-art{transform:translateY(-74px) scale(.72) rotate(10deg) !important;opacity:0 !important;}
#screen-cards .card-pack-reveal{
  justify-self:center;
  align-self:center;
  min-width:226px;
  min-height:48px;
  margin-top:2px;
  border:3px solid #fff;
  border-radius:16px;
  background:linear-gradient(180deg,#8d67d0 0%,#6742a2 100%);
  color:#fff;
  box-shadow:0 5px 0 #48316f,0 10px 18px rgba(69,41,75,.12);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.05em;
}
#screen-cards .card-pack-opening.opened .card-pack-reveal,
#screen-cards .card-pack-reveal.hidden{display:none !important;}
#screen-cards .card-pack-results{opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease;pointer-events:none;}
#screen-cards .card-pack-opening.opened .card-pack-results{opacity:1;transform:translateY(0);pointer-events:auto;}
#screen-cards .pack-result-card{background:linear-gradient(180deg,#fffefc 0%,#fff3fb 100%) !important;}
#screen-cards .pack-result-card > small{display:block;text-align:center;margin-bottom:5px;color:#ce4e94;font-weight:800;letter-spacing:.04em;}
#screen-cards .pack-result-card > span{display:block;text-align:center;color:#826682;}
#screen-cards .card-pack-done{min-width:240px !important;}
@media (max-width: 980px){
  #screen-cards .card-pack-opening-stage{padding:104px 34px 42px !important;}
  #screen-cards .card-pack-opening-art{width:118px !important;height:148px !important;}
}
@media (max-width: 760px){
  #screen-cards .card-pack-earn .pack-earn-grid{grid-template-columns:1fr;}
  #screen-cards .card-pack-reveal{min-width:188px;font-size:.57rem;}
}


/* v4.5.1.2 hotfix — robust pack opening overlay */
#screen-cards .card-pack-opening{
  position:fixed !important;
  inset:0 !important;
  z-index:5000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  background:rgba(28,14,36,.72) !important;
  backdrop-filter:blur(10px) !important;
}
#screen-cards .card-pack-opening.hidden{display:none !important;}
#screen-cards .card-pack-opening-stage{
  position:relative !important;
  width:min(980px,94vw) !important;
  min-height:min(700px,86vh) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  padding:34px 28px 28px !important;
  border:4px solid rgba(255,255,255,.95) !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at top,rgba(255,255,255,.18),transparent 30%),
    linear-gradient(180deg,#ff78bd 0%,#d34a95 16%,#fff8fe 16%,#fff7fc 100%) !important;
  box-shadow:0 20px 40px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.55) !important;
  overflow:hidden !important;
}
#screen-cards .card-pack-opening-stage::before{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:110px;
  background:linear-gradient(180deg,#c83480 0%,#a62269 100%);
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.15);
}
#screen-cards .card-pack-opening-head{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:76px !important;
  padding-top:4px !important;
  z-index:2 !important;
}
#screen-cards .card-pack-opening-head small{color:#ffe4f6 !important; font-size:.55rem !important; letter-spacing:.14em !important; font-weight:900 !important;}
#screen-cards .card-pack-opening-head strong{color:#fff !important; font-size:1.28rem !important; text-align:center !important;}
#screen-cards .card-pack-opening-art{
  position:relative !important;
  justify-self:auto !important;
  width:184px !important;
  height:236px !important;
  margin:8px auto 0 !important;
  object-fit:contain !important;
  filter:drop-shadow(0 18px 18px rgba(70,35,65,.22)) !important;
  z-index:1 !important;
}
#screen-cards .card-pack-opening.opening .card-pack-opening-art{transform:scale(1.08) rotate(-5deg) !important;}
#screen-cards .card-pack-opening.opened .card-pack-opening-art{transform:translateY(-14px) scale(.86) rotate(7deg) !important;opacity:.06 !important;}
#screen-cards .card-pack-reveal{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:260px !important;
  min-height:56px !important;
  padding:0 24px !important;
  margin-top:2px !important;
  border:3px solid #fff !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#8e69d2 0%,#6a43a8 100%) !important;
  color:#fff !important;
  box-shadow:0 6px 0 #4a3072,0 14px 22px rgba(69,41,75,.14) !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  letter-spacing:.05em !important;
  cursor:pointer !important;
  z-index:2 !important;
}
#screen-cards .card-pack-reveal:hover{transform:translateY(-1px) !important;}
#screen-cards .card-pack-reveal:active{transform:translateY(2px) !important; box-shadow:0 3px 0 #4a3072 !important;}
#screen-cards .card-pack-results{
  position:relative !important;
  width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:12px !important;
  padding:10px 6px 0 !important;
  opacity:0 !important;
  transform:translateY(10px) !important;
  transition:opacity .25s ease, transform .25s ease !important;
  pointer-events:none !important;
  z-index:2 !important;
}
#screen-cards .card-pack-opening.opened .card-pack-results{opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important;}
#screen-cards .pack-result-card{
  width:140px !important;
  min-height:210px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:10px 10px 12px !important;
  border:3px solid #fff !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,#fffefc 0%,#fff3fb 100%) !important;
  box-shadow:0 7px 0 rgba(137,88,141,.12),0 12px 18px rgba(69,41,75,.10) !important;
}
#screen-cards .pack-result-card > div{width:100% !important; height:108px !important; display:flex !important; align-items:center !important; justify-content:center !important;}
#screen-cards .pack-result-card img{max-width:96px !important; max-height:96px !important; object-fit:contain !important;}
#screen-cards .card-pack-done{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:240px !important;
  min-height:52px !important;
  margin-top:auto !important;
  border:3px solid #fff !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#ffd96e 0%,#eea52e 100%) !important;
  color:#684315 !important;
  box-shadow:0 6px 0 #a66d1d,0 11px 18px rgba(84,52,19,.12) !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  cursor:pointer !important;
  z-index:2 !important;
}
#screen-cards .card-pack-done.hidden{display:none !important; visibility:hidden !important; pointer-events:none !important;}
#screen-cards .card-pack-close{
  position:absolute !important;
  top:18px !important;
  right:18px !important;
  width:50px !important;
  height:50px !important;
  border-radius:50% !important;
  border:3px solid #fff !important;
  background:linear-gradient(180deg,#8c67cb 0%,#6541a6 100%) !important;
  color:#fff !important;
  font-size:1.2rem !important;
  line-height:1 !important;
  box-shadow:0 5px 0 #48316f,0 8px 16px rgba(43,27,45,.16) !important;
  z-index:3 !important;
}
@media (max-width: 900px){
  #screen-cards .card-pack-opening-stage{width:min(720px,95vw) !important; min-height:min(640px,88vh) !important; padding:30px 18px 20px !important;}
  #screen-cards .card-pack-opening-stage::before{height:96px;}
  #screen-cards .card-pack-opening-art{width:144px !important; height:188px !important;}
  #screen-cards .pack-result-card{width:124px !important; min-height:196px !important;}
}
@media (max-width: 620px){
  #screen-cards .card-pack-opening{padding:10px !important;}
  #screen-cards .card-pack-opening-stage{width:100% !important; min-height:0 !important; height:auto !important; max-height:94vh !important; overflow:auto !important;}
  #screen-cards .card-pack-opening-head strong{font-size:1.04rem !important;}
  #screen-cards .card-pack-opening-art{width:118px !important; height:152px !important;}
  #screen-cards .card-pack-reveal, #screen-cards .card-pack-done{min-width:200px !important; min-height:48px !important;}
  #screen-cards .pack-result-card{width:45% !important; min-width:126px !important;}
}