/* Rank identity: bronze / silver / gold / diamond / platinum. */
.collect-card.tier-2{background:radial-gradient(ellipse at 50% 33%,#765923,#261d1d 65%,#11182a);box-shadow:0 0 18px #f5ca6633,inset 0 0 20px #ffe38c15}
.collect-card.tier-3{--shine:#bbbcff;background:conic-gradient(from 35deg at 50% 35%,#40305b,#183c5b,#314465,#463459,#40305b);box-shadow:0 0 22px #a99cff55;border-color:#b5bcf0}
.collect-card.tier-3::after{background:linear-gradient(115deg,transparent 35%,#f7dbff66 45%,#90eeff66 51%,transparent 65%);animation-duration:3.6s}
.collect-card.tier-4{--shine:#e1f7ff;border:1px solid #d5efff;border-radius:5px 27px 5px 27px;background:radial-gradient(ellipse at 50% 40%,#33465c 0%,#0b1421 46%,#070b15 80%);box-shadow:0 0 0 3px #141e30,0 0 0 4px #8b9dae,0 10px 30px #0009,0 0 32px #ade9ff35;padding:9px;box-sizing:border-box}
.collect-card.tier-4::before{content:'';position:absolute;inset:6px;border:1px solid #a7c3d677;border-radius:2px 20px 2px 20px;pointer-events:none;z-index:4;background:linear-gradient(115deg,transparent 32%,#e5f7ff0a 45%,transparent 58%)}
.collect-card.tier-4::after{inset:-70%;background:linear-gradient(115deg,transparent 40%,#ffffff08 45%,#e8faff44 49%,#baffee18 51%,transparent 57%);animation-duration:5s}
.platinum-crown{display:flex;flex-direction:column;align-items:center;gap:5px;height:52px;margin-top:5px;position:relative;z-index:3}
.platinum-crown svg{width:47px;height:26px;fill:#cde9f515;stroke:#d5efff;stroke-width:1.4;filter:drop-shadow(0 0 6px #b0e9ff88)}
.platinum-crown span{font-size:8px;letter-spacing:3px;color:#a7bfcd}
.tier-4 .card-rank{font-size:14px;padding:9px 9px 5px;letter-spacing:1px}
.tier-4 .card-rank small{letter-spacing:0;color:#9dafc2}
.tier-4 .collect-art{height:181px}
.preview-item .tier-4 .collect-art{height:212px}
.tier-4 .collect-art>svg{position:relative;z-index:2;filter:drop-shadow(0 0 16px #bcdeff70)}
.platinum-orbit{position:absolute;width:155px;height:155px;border:1px solid #bbd8f64a;border-radius:50%;left:50%;top:42%;transform:translate(-50%,-50%);box-shadow:0 0 30px #a6caff12,inset 0 0 25px #7abdff18}
.platinum-orbit::before{content:'';position:absolute;inset:-13px;border-radius:50%;border:1px dashed #cadfff30;animation:platinum-orbit 24s linear infinite}
.platinum-orbit::after{content:'✧';position:absolute;inset:-13px;color:#edfaff;font-size:18px;text-shadow:0 0 9px #a0dfff;animation:platinum-orbit 14s linear infinite}
.tier-4 .card-caption{text-align:center;background:linear-gradient(180deg,transparent,#07101ce6 30%);padding:13px 8px 7px}
.tier-4 .card-caption>small{font-size:7px;letter-spacing:1.7px;color:#a7d2e7}
.tier-4 .card-caption h3{letter-spacing:-.4px;color:#f0faff;text-shadow:0 0 20px #b2dcff55}
.tier-4 .card-caption p{color:#a1b5c8;font-size:10px;min-height:26px}
.platinum-seal{border-top:1px solid #bfd6e84a;padding-top:9px;font-size:7px;letter-spacing:2px;color:#c0d7e6}
.tier-4 .card-sparkles{top:42%;font-size:18px;letter-spacing:7px;opacity:.75;animation-duration:3s}
.fireworks{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;border-radius:inherit;contain:paint}
.firework-burst{position:absolute;left:var(--fx);top:var(--fy);width:1px;height:1px}
.firework-burst i{position:absolute;width:3px;height:8px;border-radius:3px;background:var(--spark);box-shadow:0 0 6px var(--spark);transform-origin:center;animation:firework-spark 4.5s var(--delay) ease-out infinite;opacity:0}
.firework-burst b{position:absolute;width:10px;height:10px;margin:-5px;border:1px solid var(--shine,#ffe8ac);border-radius:50%;animation:firework-ring 4.5s var(--delay) ease-out infinite;opacity:0}
.tier-3 .firework-burst i{height:5px;width:5px;border-radius:0}
.tier-4 .firework-burst i{width:2px;height:11px}
.fireworks-stage{display:none;z-index:0}
.revealed .fireworks-stage{display:block}
.pack-scene>small,.pack-scene>h2,#pack-result,#pack-open{position:relative;z-index:2}
.pack-scene .fireworks-stage .firework-burst i{width:4px;height:14px;animation-duration:3.8s}
.pack-scene .fireworks-stage .firework-burst b{animation-duration:3.8s}
.pack-scene.tier-4{background:radial-gradient(ellipse at 50% 40%,#2c4259,#080f1d 64%)}
.pack-scene.tier-4 .pack-rays{background:repeating-conic-gradient(from 0deg,#d5edff0c 0deg 3deg,transparent 3deg 24deg)}
.pack-scene.tier-4 h2{background:linear-gradient(110deg,#a9c2d5,#fff,#b4e5f8);background-clip:text;color:transparent;letter-spacing:-.8px}
.pack-scene.tier-4 #pack-open{border-radius:5px 30px 5px 30px;border-color:#cbeaff;background:linear-gradient(125deg,#0b1627,#354558 45%,#111e30 52%,#091223);box-shadow:0 0 0 5px #cdefff14,0 0 70px #b8eaff25}
.pack-scene.tier-4 #pack-open span{color:#d7f2ff;text-shadow:0 0 30px #d2faff55}
.pack-scene .collect-card{animation:premium-reveal .95s cubic-bezier(.16,1,.3,1)}
.pack-scene.tier-4 .collect-card{width:260px}
@keyframes firework-spark{0%,8%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.2)}12%{opacity:1}43%{opacity:.85}66%,100%{opacity:0;transform:rotate(var(--angle)) translateY(calc(-1 * var(--reach))) scale(.3)}}
@keyframes firework-ring{0%,8%{opacity:0;transform:scale(.1)}12%{opacity:.7}40%,100%{opacity:0;transform:scale(6)}}
@keyframes platinum-orbit{to{transform:rotate(360deg)}}
@keyframes premium-reveal{0%{opacity:0;transform:perspective(800px) rotateY(110deg) scale(.7) translateY(30px)}65%{opacity:1;transform:perspective(800px) rotateY(-7deg) scale(1.03)}100%{opacity:1;transform:none}}
@media(max-width:700px){.card-page .tier-4 .collect-art{height:122px}.card-page .platinum-crown{height:32px;gap:1px}.card-page .platinum-crown svg{width:30px;height:19px}.card-page .platinum-crown span{font-size:6px;letter-spacing:1.5px}.card-page .tier-4 .card-rank{font-size:10px;padding:7px 3px}.card-page .platinum-orbit{width:90px;height:90px}.card-page .tier-4 .card-caption>small{font-size:5px;letter-spacing:.7px}.card-page .platinum-seal{font-size:5px;letter-spacing:.6px}.card-page .tier-4 .card-caption{padding:8px 2px}.card-page .tier-4 .card-caption p{min-height:25px;font-size:8px}.pack-scene{padding:24px 14px}.pack-scene h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.firework-burst i,.firework-burst b,.platinum-orbit::before,.platinum-orbit::after,.pack-scene .collect-card{animation:none!important}.firework-burst i{opacity:.45;transform:rotate(var(--angle)) translateY(calc(-.65 * var(--reach)))}.pack-rays{animation:none}}
/* Platinum: clear white crystal, visibly brighter than the brushed silver tier. */
.collect-card.tier-4{--shine:#fff;color:#183447;border:1px solid #fff;background:linear-gradient(148deg,#ffffffeb 0%,#e5f8ffbd 24%,#fffffffa 26%,#e6f5ffca 48%,#ffffffed 51%,#cce9f2b8 72%,#fffffff2 100%);box-shadow:0 0 0 3px #d4f0ff45,0 0 0 4px #ffffffc7,0 0 24px #e5f8ff85,0 0 52px #b5e9ff3d,inset 0 0 22px #fff;backdrop-filter:blur(12px)}
.collect-card.tier-4::before{border-color:#fff;background:conic-gradient(from 25deg at 70% 18%,transparent 0deg,#fff9 26deg,transparent 28deg 80deg,#fff8 83deg,transparent 85deg 160deg,#a9def522 170deg,transparent 181deg 270deg,#fff8 282deg,transparent 287deg);box-shadow:inset 0 0 0 1px #c0d6e699}
.collect-card.tier-4::after{background:linear-gradient(115deg,transparent 36%,#ffffff22 42%,#ffffffec 49%,#e4faff9c 51%,transparent 59%);animation-duration:3.8s;mix-blend-mode:screen}
.tier-4 .platinum-crown svg{fill:#fff8;stroke:#416176;filter:drop-shadow(0 0 5px #fff)}
.tier-4 .platinum-crown span{color:#496778;font-weight:700}
.tier-4 .card-rank{color:#274f66;text-shadow:0 1px #fff}
.tier-4 .card-rank small{color:#59788a}
.tier-4 .collect-art>svg{filter:drop-shadow(0 0 14px #fff) drop-shadow(0 5px 7px #496b8740)}
.tier-4 .platinum-orbit{border-color:#fff;background:radial-gradient(circle,#ffffff08 45%,#fff9 70%,#fff0 73%);box-shadow:0 0 24px #fff,inset 0 0 22px #ffffffa1}
.tier-4 .platinum-orbit::before{border-color:#668aa855}
.tier-4 .platinum-orbit::after{color:#fff;text-shadow:0 0 3px #4f829c,0 0 9px white}
.tier-4 .card-caption{background:linear-gradient(180deg,#ffffff00,#ffffffe0 30%,#f3fbffb0)}
.tier-4 .card-caption>small{color:#446981;font-weight:800}
.tier-4 .card-caption h3{color:#193950;text-shadow:0 1px 0 #fff}
.tier-4 .card-caption p{color:#4d6a7d}
.tier-4 .platinum-seal{border-color:#8eafc47d;color:#3c6278;font-weight:700}
.tier-4 .card-sparkles{color:#fff;text-shadow:0 0 2px #51758d,0 0 12px #fff}
.tier-4 .firework-burst i{box-shadow:0 0 3px #7fabc4,0 0 9px #fff,0 0 16px #fff}
.pack-scene.tier-4 #pack-open{border-color:#fff;background:linear-gradient(135deg,#e5f4ffc9,#fff 38%,#cce6ef 40%,#f9feff 63%,#bcdbea 64%,#faffff);box-shadow:0 0 0 5px #fff4,0 0 65px #c9efff77;color:#21445c}
.pack-scene.tier-4 #pack-open span{color:#3e718e;text-shadow:0 0 20px #fff}
.collect-card.original-art .collect-art{height:auto;aspect-ratio:2/3;margin:0 7px;overflow:hidden;border-radius:8px;border:1px solid #ffffff45;background:#10213a}
.collect-card.original-art .collect-art .card-original{display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
.collect-card.original-art.tier-4 .collect-art{margin:0 2px;border:1px solid white;border-radius:2px 14px 2px 14px;box-shadow:0 0 12px #fff8}
.original-art .platinum-orbit{display:none}
.original-art .fireworks:not(.fireworks-stage){z-index:3;opacity:.8}
.pack-scene .original-art{max-width:240px}.pack-scene .original-art .collect-art{max-height:38dvh;aspect-ratio:2/3}
@media(max-width:700px){.card-page .collect-card.original-art .collect-art{height:auto;aspect-ratio:2/3}.card-page .original-art .card-caption p{display:none}}
.platinum-modal .pack-scene{min-height:min(790px,90dvh);box-sizing:border-box;padding:28px 18px;justify-content:center;background:radial-gradient(ellipse at 50% 45%,#263e56,#040b17 72%)}
.platinum-fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;mix-blend-mode:screen}
.platinum-modal .pack-scene>.fireworks-stage{display:none}
.platinum-modal .pack-scene>small,.platinum-modal .pack-scene>h2,.platinum-modal #pack-status,.platinum-modal #pack-skip,.platinum-modal .pack-actions{position:relative;z-index:5}
.platinum-modal #pack-status{min-height:24px;color:#c6eaff;font-size:14px;letter-spacing:2px;margin:12px}
.platinum-modal #pack-open{transition:transform 1.8s,filter 1.8s}
.platinum-modal .fx-charging #pack-title{animation:charge-title 1.8s ease-in-out both}
.platinum-modal .fx-crowned #pack-result .collect-card{animation:platinum-arrival 1s cubic-bezier(.16,1,.3,1) both}
.platinum-modal #pack-result{width:100%;max-width:700px}
.platinum-modal #pack-result>p{font-size:14px;color:#d2e5f5;position:relative;z-index:5}
.pack-actions{display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap}.pack-actions .primary{margin:0}
#pack-skip{min-height:44px}.platinum-modal .pack-rays{opacity:.6}
@keyframes charge-title{50%{letter-spacing:3px;text-shadow:0 0 26px #fff8}}
@keyframes platinum-arrival{from{opacity:0;transform:perspective(900px) rotateY(85deg) scale(.5) translateY(30px);filter:brightness(2)}65%{opacity:1;transform:perspective(900px) rotateY(-7deg) scale(1.05);filter:brightness(1.15)}to{opacity:1;transform:none;filter:brightness(1)}}
@media(max-height:750px){.platinum-modal .pack-scene{padding:16px 12px;min-height:90dvh}.platinum-modal .pack-scene .collect-card{width:210px}.platinum-modal .collect-art{height:145px}.platinum-modal .platinum-crown{height:38px}.platinum-modal .pack-scene h2{font-size:22px}.platinum-modal #pack-status{margin:2px;min-height:10px}.platinum-modal .card-caption p{min-height:15px}}
@media(prefers-reduced-motion:reduce){.platinum-modal .fx-charging #pack-title,.platinum-modal .fx-crowned #pack-result .collect-card{animation:none!important}}