.animation-studio{background:radial-gradient(ellipse at top right,#70489e30,transparent 70%),#090f1c;color:#f7f8ff}.animation-studio main{max-width:1100px;padding:30px;margin:auto}.animation-studio main>header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #60487855;padding-bottom:25px;margin-bottom:55px;gap:15px}.animation-studio main>header a{color:white;text-decoration:none;font:800 25px 'Barlow Condensed',sans-serif}.animation-studio main>header span{font-size:9px;letter-spacing:2px;color:#c29be8}.animation-studio h1{font:800 clamp(34px,5vw,54px)/1.05 'Barlow Condensed',sans-serif;margin:14px 0}.studio-copy{font-size:14px;color:#aab7cf}.studio-safe{font-size:12px;color:#d4b3f5}.animation-controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:25px;background:#152139;border:1px solid #76589555;border-radius:10px;margin:35px 0 25px}.animation-controls label{display:grid;gap:8px;font-size:11px;color:#bac6dc}.animation-controls .toggle{display:flex;align-items:center}.animation-controls select{background:#101a2e;border:1px solid #705583;color:white;border-radius:6px;padding:11px}.animation-studio button,.cinematic-controls button{min-height:44px;border:1px solid #9262ba;background:#2c2143;border-radius:6px;padding:12px 18px;color:white;cursor:pointer;font-size:11px;font-weight:700}.preview-options{display:grid;grid-template-columns:1fr 1fr;gap:25px}.preview-options button{display:grid;text-align:left;gap:20px;padding:35px;background:radial-gradient(ellipse at right,#9d4edd30,transparent),#152139;border-color:#725692}.preview-options span{font-size:10px;letter-spacing:2px;color:#be9be5}.preview-options strong{font:700 27px Rajdhani,sans-serif}.preview-options small{font-size:11px;color:#b7c5dd}.animation-studio main>footer,#feedback{font-size:11px;text-align:center;color:#b6a2ca;margin-top:35px}
.collection-cinema{position:fixed;inset:0;margin:0;padding:22px;box-sizing:border-box;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;background:linear-gradient(#04091ac9,#090e1dee),url('/_assets/e94fe19c30cbc1a54c04/diamond-ascent/stadium-hero.png') center/cover;color:white;overflow-x:hidden;overflow-y:auto;isolation:isolate}.collection-cinema::backdrop{background:#030817}.collection-cinema[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.cinematic-top{position:absolute;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;gap:15px;font:700 17px Rajdhani,sans-serif;color:#ddc4f6}.mock-balance{background:#111e30;border:1px solid #796188;border-radius:5px;padding:8px 12px;font-size:12px;color:#b5e5c7}.cinematic-status{font-size:10px;letter-spacing:3px;text-align:center;margin:45px 0 4px;color:#d4b8ed}.transformation-stage{width:min(310px,72vw,calc((100dvh - 250px)*.75));aspect-ratio:3/4;position:relative;flex:none;display:grid;place-items:center}.old-slot,.new-slot{position:absolute;inset:0;z-index:4}.old-slot .player-card,.new-slot .player-card{width:100%;max-width:none}.collection-cinema .flip-hint{display:none}.new-slot:empty{display:none}.transformation-aura{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(ellipse,#9f64e866,#7b57e533 35%,transparent 65%);opacity:0;pointer-events:none}.transformation-particles{position:absolute;inset:0;pointer-events:none;z-index:5}.transformation-particles i{position:absolute;left:50%;top:50%;width:4px;height:7px;background:#d0aaff;border-radius:50%;opacity:0;box-shadow:0 0 12px #b77fff;transform:rotate(var(--angle)) translateY(100px)}.cash-amount{position:relative;background:transparent;border:0;padding:25px 30px;min-height:120px;font:700 clamp(45px,9vw,100px)/1 Rajdhani,sans-serif;letter-spacing:1px;color:#78ffa9;text-shadow:0 0 24px #37dc7960;cursor:pointer;z-index:8}.cash-amount:disabled{cursor:default;opacity:1}.cash-amount[hidden]{display:none}.collection-cinema[data-kind=reroll] .cash-amount{color:#ff737e;text-shadow:0 0 30px #ff486966;position:absolute;top:40%;left:0;right:0;text-align:center}.cinematic-instruction{font-size:10px;letter-spacing:1px;text-align:center;color:#b8a2d3;position:relative;z-index:8;margin:5px 0}.revealed-details{text-align:center}.revealed-details strong{display:block;font:700 25px Rajdhani,sans-serif;color:#d9b3ff}.revealed-details p{font-size:10px;color:#c6d1e0;margin:5px}.cinematic-controls{display:flex;gap:10px;z-index:8}.cinematic-controls[hidden],.revealed-details[hidden]{display:none}
.collection-cinema[data-phase=dissolve] .old-slot{animation:card-dissolve .5s ease-in both}.collection-cinema[data-phase=dissolve] .transformation-aura{animation:purple-flash .5s ease-out both}.collection-cinema[data-kind=sell][data-phase=reward] .transformation-stage,.collection-cinema[data-kind=sell][data-phase=claim] .transformation-stage,.collection-cinema[data-phase=acknowledge] .transformation-stage{position:absolute;opacity:0;pointer-events:none}.collection-cinema[data-phase=reward] .cash-amount{animation:cash-impact .5s ease-out both}.collection-cinema[data-phase=reward] .transformation-particles i{background:#8cffa9;animation:cash-particle 1s ease-out both;animation-delay:var(--delay)}.collection-cinema[data-phase=deduction] .transformation-stage{visibility:hidden}.collection-cinema[data-phase=deduction] .cash-amount{animation:deduction-impact .7s ease both}.collection-cinema[data-phase=charging] .old-slot{animation:card-vibration .14s ease-in-out infinite alternate}.collection-cinema[data-phase=charging] .transformation-aura{animation:energy-charge 2.2s ease-in both}.collection-cinema[data-phase=charging] .transformation-particles i{animation:energy-swirl 1s ease-in-out infinite;animation-delay:var(--delay)}.collection-cinema[data-phase=burst] .transformation-aura{animation:purple-flash .3s ease-out both;background:radial-gradient(ellipse,#f0dbff 0%,#b974ef80 30%,transparent 70%)}.collection-cinema[data-phase=burst] .old-slot{animation:card-dissolve .3s ease-in both}.collection-cinema[data-phase=front] .old-slot,.collection-cinema[data-phase=flip] .old-slot,.collection-cinema[data-phase=ready] .old-slot{display:none}.collection-cinema[data-phase=front] .new-slot{animation:new-front .35s ease-out both}.collection-cinema[data-phase=acknowledge] .cash-amount{animation:claim-sparkle .45s ease-in both}.collection-cinema[data-phase=acknowledge] .mock-balance{box-shadow:0 0 25px #70ffaa60;color:#8cffb4}
@keyframes card-dissolve{to{opacity:0;transform:scale(.93) translateY(-15px);filter:blur(6px)}}@keyframes purple-flash{0%{opacity:0;transform:scale(.6)}45%{opacity:.75;transform:scale(1.3)}100%{opacity:0;transform:scale(1.8)}}@keyframes cash-impact{0%{opacity:0;transform:scale(.65)}65%{opacity:1;transform:scale(1.09)}100%{transform:scale(1)}}@keyframes deduction-impact{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1.07)}65%{opacity:1;transform:scale(1)}100%{opacity:0}}@keyframes card-vibration{from{transform:translate(-1px,1px) rotate(-.3deg)}to{transform:translate(1px,-1px) rotate(.3deg)}}@keyframes energy-charge{from{opacity:.15;transform:scale(.7)}to{opacity:.9;transform:scale(1.35)}}@keyframes energy-swirl{0%{opacity:0;transform:rotate(var(--angle)) translateY(200px)}50%{opacity:.8}100%{opacity:0;transform:rotate(calc(var(--angle) + 90deg)) translateY(70px)}}@keyframes cash-particle{from{opacity:1;transform:rotate(var(--angle)) translateY(15px)}to{opacity:0;transform:rotate(var(--angle)) translateY(210px)}}@keyframes new-front{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes claim-sparkle{to{opacity:0;transform:translate(20vw,-30vh) scale(.15)}}
.collection-cinema.reduced *{animation:none!important;transition:none!important}.collection-cinema.reduced .transformation-particles{display:none}.collection-cinema.reduced .transformation-aura{opacity:.2;background:radial-gradient(ellipse,#9d4edd30,transparent 65%)}.collection-cinema.reduced[data-phase=dissolve] .old-slot,.collection-cinema.reduced[data-phase=burst] .old-slot{opacity:.4}.collection-cinema.reduced .card-rotor{transition:none!important}
@media(max-width:600px){.animation-studio main{padding:22px 16px}.animation-studio main>header{margin-bottom:35px}.animation-studio main>header a{font-size:20px}.animation-studio main>header span{font-size:7px;letter-spacing:1px;text-align:right;max-width:110px}.animation-controls{padding:18px;gap:16px}.preview-options{grid-template-columns:1fr;gap:15px}.preview-options button{padding:25px}.preview-options strong{font-size:24px}.cinematic-top{left:15px;right:15px;top:18px;font-size:12px}.mock-balance{font-size:9px;padding:7px}.transformation-stage{width:min(280px,73vw,calc((100dvh - 260px)*.75))}.cinematic-instruction{font-size:8px}.cash-amount{font-size:60px;padding:22px 12px}}
@media(prefers-reduced-motion:reduce){.collection-cinema *{animation:none!important;transition:none!important}.transformation-particles{display:none}.transformation-aura{opacity:.2!important;background:radial-gradient(ellipse,#9d4edd30,transparent 65%)!important}.collection-cinema[data-phase=dissolve] .old-slot,.collection-cinema[data-phase=burst] .old-slot{opacity:.4}}

.collection-cinema[data-kind=sell][data-phase=reward] .transformation-stage,.collection-cinema[data-kind=sell][data-phase=claim] .transformation-stage{opacity:1;pointer-events:none}.collection-cinema[data-kind=sell][data-phase=reward] .old-slot,.collection-cinema[data-kind=sell][data-phase=claim] .old-slot{display:none}

.collection-cinema .cash-amount{background:transparent;border:0;min-height:140px;padding:25px 30px;font:700 clamp(50px,9vw,100px)/1 Rajdhani,sans-serif;color:#78ffa9;text-shadow:0 0 24px #37dc7960}.collection-cinema[data-kind=reroll] .cash-amount{color:#ff737e;text-shadow:0 0 30px #ff486966}@media(max-width:600px){.collection-cinema .cash-amount{font-size:60px;padding:22px 12px}}
